Shift key to set all widths

_locales/en/messages.json

@@ -504,6 +504,10 @@
   "gettingStyles": {
     "message": "Getting all styles..."
   },
+  "headerResizerHint": {
+    "message": "Holding Shift key dragging will set the new size in all UI pages",
+    "description": "Tooltip for the header panel resizer"
+  },
   "helpAlt": {
     "message": "Help",
     "description": "Alternate text for help buttons"

edit.html

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

install-usercss.html

@@ -80,7 +80,7 @@
           </ul>
         </div>
       </div>
-      <div id="header-resizer"></div>
+      <div id="header-resizer" i18n-title="headerResizerHint"></div>
     </div>
     <div class="main">
       <div class="warnings"></div>

js/dom.js

@@ -471,18 +471,20 @@ const dom = {};
   }
   // set language for a) CSS :lang pseudo and b) hyphenation
   elHtml.setAttribute('lang', chrome.i18n.getUILanguage());
-  // set header width and export stuff via `dom.headerResizer`
+  // set up header width resizer
-  if (/^.(edit|manage|install)/.test(location.pathname)) {
+  const HW = 'headerWidth.';
-    const prefId = `${RegExp.$1 === 'edit' ? 'editor' : RegExp.$1}.headerWidth`;
+  const HWprefId = HW + location.pathname.match(/^.(\w*)/)[1];
-    const HR = dom.headerResizer = {
+  if (prefs.knownKeys.includes(HWprefId)) {
-      prefId,
+    Object.assign(dom, {
-      setDomProp(width) {
+      HW,
-        width = Math.round(Math.max(200, Math.min(innerWidth / 2, width)));
+      HWprefId,
+      setHWProp(width) {
+        width = Math.round(Math.max(200, Math.min(innerWidth / 2, Number(width) || 0)));
         elHtml.style.setProperty('--header-width', width + 'px');
         return width;
       },
-    };
+    });
-    prefs.ready.then(() => HR.setDomProp(prefs.get(prefId)));
+    prefs.ready.then(() => dom.setHWProp(prefs.get(HWprefId)));
     lazyScripts.push('/js/header-resizer');
   }
   // add favicon in FF

js/header-resizer.js

@@ -4,16 +4,14 @@
 'use strict';
 
 (() => {
-  const HR = dom.headerResizer;
-  const el = $('#header-resizer');
   let curW, offset, active;
-  prefs.subscribe(HR.prefId, (key, val) => {
+  prefs.subscribe(dom.HWprefId, (key, val) => {
     if (!active && val !== curW) {
       getCurWidth();
       setWidth(val);
     }
   });
-  el.onmousedown = e => {
+  $('#header-resizer').onmousedown = e => {
     if (e.button) return;
     getCurWidth();
     offset = curW - e.clientX;
@@ -28,9 +26,10 @@
       || $('#header').offsetWidth;
   }
 
-  function resize({clientX: x}) {
+  /** @param {MouseEvent} e */
-    if (setWidth(offset + x)) {
+  function resize(e) {
-      debounce(save, 250);
+    if (setWidth(offset + e.clientX)) {
+      debounce(save, 250, e.shiftKey);
     }
   }
 
@@ -41,12 +40,18 @@
     active = false;
   }
 
-  function save() {
+  function save(all) {
-    prefs.set(HR.prefId, curW);
+    if (all) {
+      for (const k of prefs.knownKeys) {
+        if (k.startsWith(dom.HW)) prefs.set(k, curW);
+      }
+    } else {
+      prefs.set(dom.HWprefId, curW);
+    }
   }
 
   function setWidth(w) {
-    const delta = (w = HR.setDomProp(w)) - curW;
+    const delta = (w = dom.setHWProp(w)) - curW;
     if (delta) {
       curW = w;
       for (const el of $$('.CodeMirror-linewidget[style*="width:"]')) {

js/prefs.js

@@ -123,9 +123,11 @@
     'badgeDisabled': '#8B0000',     // badge background color when disabled
     'badgeNormal': '#006666',       // badge background color
 
-    'editor.headerWidth': 280,
+    /* Using separate values instead of a single {} to ensure type control.
-    'install.headerWidth': 280,
+     * Sub-key is the first word in the html's file name. */
-    'manage.headerWidth': 280,
+    'headerWidth.edit': 280,
+    'headerWidth.install': 280,
+    'headerWidth.manage': 280,
 
     'popupWidth': 246,              // popup width in pixels
 

manage.html

@@ -354,7 +354,7 @@
     </div>
   </div>
 
-  <div id="header-resizer"></div>
+  <div id="header-resizer" i18n-title="headerResizerHint"></div>
 </div>
 
 <div id="installed"></div>