resizable header in editor

edit.html

@@ -466,6 +466,7 @@
           </div>
         </details>
       </div>
+      <div id="header-resizer"></div>
       <div id="footer" class="hidden">
         <a href="https://github.com/openstyles/stylus/wiki/Usercss"
            i18n-text="externalUsercssDocument"

edit/base.js

@@ -41,6 +41,12 @@ const editor = {
     document.documentElement.classList.toggle('is-new-style', !editor.style.id);
   },
 
+  updateHeaderWidth(w) {
+    w = Math.round(Math.max(200, Math.min(innerWidth / 2, w)));
+    document.documentElement.style.setProperty('--header-width', w + 'px');
+    return w;
+  },
+
   updateTitle(isDirty = editor.dirty.isDirty()) {
     const {customName, name} = editor.style;
     document.title = `${
@@ -65,6 +71,7 @@ const baseInit = (() => {
         Promise.all([
           loadTheme(),
           loadKeymaps(),
+          editor.updateHeaderWidth(prefs.get('editor.headerWidth')),
         ])),
     ]),
   };

edit/edit.css

@@ -1,5 +1,6 @@
 :root {
   --fixed-padding: unset;
+  --header-width: 280px;
 }
 
 body {
@@ -7,6 +8,18 @@ body {
   height: 100vh;
   font: 12px arial,sans-serif;
 }
+body.resizing-h {
+  cursor: e-resize;
+}
+body.resizing-v {
+  cursor: n-resize;
+}
+body.resizing-h > *,
+body.resizing-v > * {
+  pointer-events: none;
+  -moz-user-select: none;
+  user-select: none;
+}
 
 a {
   color: #000;
@@ -90,13 +103,12 @@ label {
 
 /************ header ************/
 #header {
-  width: 280px;
+  width: var(--header-width);
   height: 100vh;
   overflow: auto;
   position: fixed;
   top: 0;
   padding: 1rem;
-  border-right: 1px dashed #AAA;
   box-shadow: 0 0 3rem -1.2rem black;
   box-sizing: border-box;
   z-index: 10;
@@ -107,7 +119,7 @@ label {
   margin-top: 0;
 }
 #sections {
-  padding-left: 280px;
+  padding-left: var(--header-width);
   min-height: 0;
   height: 100%;
 }
@@ -123,6 +135,30 @@ label {
   margin-top: 0.1rem;
   min-height: 1.4rem;
 }
+#header-resizer {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 6px;
+  cursor: e-resize;
+  border-width: 0 1px;
+  border-style: solid;
+  color: #8888;
+  border-color: currentColor;
+  pointer-events: auto;
+}
+#header-resizer:active {
+  border-color: #888;
+}
+#header-resizer::after {
+  content: '';
+  position: absolute;
+  border-right: 2px dotted currentColor;
+  left: 2px;
+  width: 0;
+  height: 100%;
+}
 
 /* basic info */
 #basic-info {
@@ -745,7 +781,7 @@ body:not(.find-open) [data-match-highlight-count="1"] .CodeMirror-selection-high
 }
 #help-popup.big {
   box-shadow: rgba(0, 0, 0, 0.45) 0px 0px 0px 100000px !important;
-  left: calc(280px - 3rem);
+  left: calc(var(--header-width) - 3rem);
 }
 #help-popup.big .CodeMirror {
   min-height: 2rem;
@@ -1054,6 +1090,7 @@ body.linter-disabled .hidden-unless-compact {
     padding: 0;
     background-color: #fff;
   }
+  #header-resizer,
   .fixed-header #header > *:not(#details-wrapper),
   .fixed-header #options {
     display: none !important;

edit/edit.js

@@ -55,6 +55,7 @@ baseInit.ready.then(async () => {
   require([
     '/edit/autocomplete',
     '/edit/global-search',
+    '/edit/header-resizer',
   ]);
 });
 

edit/header-resizer.js

@@ -0,0 +1,34 @@
+/* global $ $$ */// dom.js
+/* global editor */
+/* global prefs */
+'use strict';
+
+(function HeaderResizer() {
+  const el = $('#header-resizer');
+  let lastW, lastX;
+  el.onmousedown = e => {
+    if (e.button) return;
+    lastW = $('#header').clientWidth;
+    lastX = e.clientX;
+    document.body.classList.add('resizing-h');
+    document.on('mousemove', resize);
+    document.on('mouseup', resizeStop);
+  };
+  function resize({clientX: x}) {
+    const w = editor.updateHeaderWidth(lastW + x - lastX);
+    const delta = w - lastW;
+    if (delta) {
+      lastW = w;
+      lastX = x;
+      prefs.set('editor.headerWidth', w);
+      for (const el of $$('.CodeMirror-linewidget[style*="width:"]')) {
+        el.style.width = parseFloat(el.style.width) - delta + 'px';
+      }
+    }
+  }
+  function resizeStop() {
+    document.off('mouseup', resizeStop);
+    document.off('mousemove', resize);
+    document.body.classList.remove('resizing-h');
+  }
+})();

edit/sections-editor-section.js

@@ -381,8 +381,7 @@ function createResizeGrip(cm) {
       cm.display.lineDiv.offsetParent.offsetTop +
       /* borders */
       wrapper.offsetHeight - wrapper.clientHeight;
-    wrapper.style.pointerEvents = 'none';
+    document.body.classList.add('resizing-v');
-    document.body.style.cursor = 's-resize';
     document.on('mousemove', resize);
     document.on('mouseup', resizeStop);
 
@@ -398,8 +397,7 @@ function createResizeGrip(cm) {
     function resizeStop() {
       document.off('mouseup', resizeStop);
       document.off('mousemove', resize);
-      wrapper.style.pointerEvents = '';
+      document.body.classList.remove('resizing-v');
-      document.body.style.cursor = '';
     }
   };
 

js/prefs.js

@@ -99,6 +99,7 @@
 
     'editor.appliesToLineWidget': true, // show applies-to line widget on the editor
     'editor.livePreview': true,
+    'editor.headerWidth': 280,
 
     // show CSS colors as clickable colored rectangles
     'editor.colorpicker': true,