code-server bookmarklet - enlarge Status bar area, remove titlebar

code-server-mod.js

(() => {
  const KEY = "__docShiftPlusFooter__";
  const SHIFT_PX = 15;
  const HEIGHT_ADD = 30;
  const FONT_SCALE = 1.2;
  const START_DELAY_MS = 5000;
  const RESTORE_DELAY_MS = 2000;

  // --- Undo / Restore ---
  if (window[KEY]?.active) {
    const s = window[KEY];
    clearTimeout(s.timer);
    s.obs?.disconnect();
    s.obsFooter?.disconnect();
    for (const [el, props] of s.snapshots) {
      for (const [p, v] of Object.entries(props))
        v ? el.style.setProperty(p, v) : el.style.removeProperty(p);
    }
    for (const [el, fontSnap] of s.fontMap) {
      for (const [p, v] of Object.entries(fontSnap))
        v ? el.style.setProperty(p, v) : el.style.removeProperty(p);
    }
    document.documentElement.style.transform = "";
    document.documentElement.style.marginTop = "";
    delete window[KEY];
    console.log("♻️ Layout fix disabled and styles restored.");
    return;
  }

  console.log(`⏳ Waiting ${START_DELAY_MS / 1000}s before applying layout fix...`);

  setTimeout(() => {
    const st = (window[KEY] = {
      active: true,
      snapshots: new Map(),
      fontMap: new Map(),
    });

    const save = (el, props) => {
      if (!el) return;
      const snap = {};
      for (const p of props) snap[p] = el.style.getPropertyValue(p);
      st.snapshots.set(el, snap);
    };
    const setVal = (el, prop, val, imp = false) =>
      el?.style?.setProperty(prop, val, imp ? "important" : "");

    const html = document.documentElement;
    const enableMotion = document.querySelector("div.enable-motion");
    const footer = document.getElementById("workbench.parts.statusbar");

    // --- Shift the page up ---
    html.style.transform = `translateY(-${SHIFT_PX}px)`;
    html.style.marginTop = `-${SHIFT_PX}px`;

    // --- Enable-motion height fix ---
    let enableMotionTargetHeight;
    if (enableMotion) {
      save(enableMotion, ["height"]);
      const curH =
        parseFloat(getComputedStyle(enableMotion).height) || window.innerHeight;
      enableMotionTargetHeight = curH + HEIGHT_ADD;
      setVal(enableMotion, "height", `${enableMotionTargetHeight}px`, true);
      console.log(`⬆️ .enable-motion height locked to ${enableMotionTargetHeight}px`);
    } else {
      console.warn("⚠️ .enable-motion not found.");
    }

    // --- Footer fix ---
    let footerTargetHeight;
    if (footer) {
      save(footer, ["height"]);
      const curH = parseFloat(getComputedStyle(footer).height) || 22;
      footerTargetHeight = curH + HEIGHT_ADD;
      setVal(footer, "height", `${footerTargetHeight}px`, true);

      footer.querySelectorAll("*").forEach((el) => {
        if (!st.fontMap.has(el)) {
          st.fontMap.set(el, {
            "font-size": el.style.getPropertyValue("font-size") || "",
            "line-height": el.style.getPropertyValue("line-height") || "",
          });
        }
        const cs = getComputedStyle(el);
        const curSize = parseFloat(cs.fontSize) || 12;
        const curLine = parseFloat(cs.lineHeight) || curSize;
        el.style.fontSize = `${curSize * FONT_SCALE}px`;
        el.style.lineHeight = `${curLine * FONT_SCALE}px`;
      });

      console.log(`⬆️ Footer height locked to ${footerTargetHeight}px (fonts ×${FONT_SCALE})`);
    } else {
      console.warn("⚠️ Footer not found.");
    }

    // --- Self-healing logic ---
    const scheduleRestore = (el, targetH, label) => {
      let timer;
      return new MutationObserver(() => {
        clearTimeout(timer);
        timer = setTimeout(() => {
          const cur = parseFloat(getComputedStyle(el).height) || 0;
          if (Math.abs(cur - targetH) > 1) {
            console.log(`🔧 Restoring ${label} height (${cur}→${targetH})`);
            setVal(el, "height", `${targetH}px`, true);
          }
        }, RESTORE_DELAY_MS);
      });
    };

    if (enableMotion && enableMotionTargetHeight) {
      st.obs = scheduleRestore(enableMotion, enableMotionTargetHeight, "enable-motion");
      st.obs.observe(enableMotion, { attributes: true, attributeFilter: ["style"] });
    }
    if (footer && footerTargetHeight) {
      st.obsFooter = scheduleRestore(footer, footerTargetHeight, "footer");
      st.obsFooter.observe(footer, { attributes: true, attributeFilter: ["style"] });
    }

    console.log(
      "✅ Layout fix applied: shift −15px, height locks +30px, self-healing after 5s if modified. Run again to undo."
    );
  }, START_DELAY_MS);
})();

Run through this site for the bookmarklet.

https://chriszarate.github.io/bookmarkleter/