options to open UI pages in side panel

Author: tophf

src/_locales/en/messages.json

@@ -1039,12 +1039,9 @@
     "message": "Max window width for compact UI layout (in pixels)"
   },
   "optionConfigSidePanel": {
-    "message": "Side panel for UserCSS configurations this long",
+    "message": "UserCSS configuration",
     "description": "Label of the option shown after the number that specifies the minimum length of a UserCSS configuration to be shown in a side panel."
   },
-  "optionConfigSidePanelHint": {
-    "message": "1..99: minimum number of configuration parameters,\n0: always side panel, you can also right-click or long-press the configuration icon,\n-1: always popup."
-  },
   "optionFOUC": {
     "message": "Styles applied too late?",
     "description": "Shown in the options. Followed by FOUCMV2 or FOUCMV3 message."
@@ -1084,6 +1081,24 @@
   "optionKeepAliveNote": {
     "message": "Increase it if you encounter flashing of unstyled content (FOUC) when opening a page after not interacting with the browser for a while.\n\n-1 = ManifestV2 default behavior (no limit).\n0 = ManifestV3 default behavior (half a minute).\n\nThe cache takes 30MB or more of RAM, but rebuilding it may take too much time and cause FOUC depending on the website, network speed, amount of styles, RAM size, and CPU performance."
   },
+  "optionSidePanelActions": {
+    "message": "Side panel for popup actions"
+  },
+  "optionSidePanelActionsHint": {
+    "message": "Actions to be opened in a side panel when using the popup in standard mode (\"$optPopup$\" option is not enabled).\n\nYou can also right-click or long-press on the corresponding button in the popup.",
+    "description": "$optPopup$ is the translated title of \"Open popup in a side panel\"",
+    "placeholders": {
+      "optPopup": {
+        "content": "$1"
+      }
+    }
+  },
+  "optionSidePanelNumberHint": {
+    "message": "1..99: minimum number of items,\n0: always side panel,\n-1: always popup."
+  },
+  "optionSidePanelPopup": {
+    "message": "Open popup in a side panel"
+  },
   "optionTargetIcons": {
     "message": "Icons for target sites",
     "description": "Label for the checkbox that toggles showing icons for style's target sites in various parts of UI"
@@ -1321,6 +1336,15 @@
     "message": "Hold <Enter> (or <▤>) and press a digit to open the corresponding style's menu.",
     "description": "Preserve < and > symbols so that <hotkey> is styled as a key"
   },
+  "popupHotkeysInfoSide": {
+    "message": "Right-click or long-press on an action button to force-open in a side panel. You can change the default behavior in the options 🞂 $side$.",
+    "description": "$side$ is replaced with translation for optionSidePanelActions: \"Side panel for popup actions\"",
+    "placeholders": {
+      "side": {
+        "content": "$1"
+      }
+    }
+  },
   "popupHotkeysInfoTab": {
     "message": "Hold <Alt> to toggle styles only for the current tab.",
     "description": "Preserve < and > symbols so that <hotkey> is styled as a key"
@@ -1345,6 +1369,10 @@
     "message": "Also enabled by detaching editor tab from a browser window,\nand disabled by attaching a single editor tab into another window.",
     "description": "Label for the checkbox controlling 'edit' action behavior in the popup."
   },
+  "popupSidePanelOpenHint": {
+    "message": "Right-click: in side panel",
+    "description": "Tooltip for some buttons in the popup that normally open in a tab/popup."
+  },
   "popupStylesFirst": {
     "message": "Styles before commands",
     "description": "Label for the checkbox controlling section order in the popup."

src/background/icon-manager.js

@@ -1,8 +1,10 @@
-import {kDisableAll, kStyleIds} from '@/js/consts';
+import {kDisableAll, kSidebar, kStyleIds} from '@/js/consts';
 import {__values as __prefs, subscribe} from '@/js/prefs';
 import {CHROME, FIREFOX, MOBILE, VIVALDI} from '@/js/ua';
 import {debounce, NOP, t} from '@/js/util';
-import {browserAction, MF_ICON_EXT, MF_ICON_PATH} from '@/js/util-webext';
+import {
+  browserAction, browserSidebar, MF_ICON_EXT, MF_ICON_PATH, toggleListener,
+} from '@/js/util-webext';
 import * as colorScheme from './color-scheme';
 import {bgBusy, bgInit, onSchemeChange, onUnload} from './common';
 import {removePreloadedStyles} from './style-via-webrequest';
@@ -26,8 +28,18 @@ const kShowBadge = 'show-badge';
 // https://github.com/openstyles/stylus/issues/335
 let hasCanvas = FIREFOX_ANDROID ? false : null;
 
-if (browserAction)
+if (browserAction) {
   bgInit.push(initIcons);
+  if (browserSidebar) {
+    if (__.MV3) // receiving a wake-up event, gonna unregister in subscribe() if not enabled
+      toggleListener(browserAction.onClicked, true, openSidebar);
+    subscribe('popup.sidePanel', (key, val) => {
+      browserAction.setPopup({popup: val ? '' : 'popup.html'});
+      toggleListener(browserAction.onClicked, val, openSidebar);
+    }, true);
+  }
+}
+
 onSchemeChange.add(() => {
   if (__prefs[kIconset] === -1) {
     debounce(refreshGlobalIcon);
@@ -174,6 +186,17 @@ async function loadImage(url) {
   return result;
 }
 
+function openSidebar(tab) {
+  tab = {tabId: tab.id};
+  if (__.MV3) {
+    browserSidebar.setOptions({path: 'popup.html?' + kSidebar, ...tab});
+    browserSidebar.open(tab);
+  } else {
+    browserSidebar.setPanel({panel: 'popup.html?' + kSidebar, ...tab});
+    browserSidebar.open();
+  }
+}
+
 function refreshGlobalIcon() {
   setIcon({
     path: getIconPath(getIconName()),

src/background/popup-data.js

@@ -1,37 +1,65 @@
 import '@/js/browser';
 import {kAboutBlank, kPopup, kStyleIds, kTabOvrToggle, kUrl} from '@/js/consts';
+import {onConnect, onDisconnect} from '@/js/msg';
 import {CHROME, FIREFOX} from '@/js/ua';
 import {ownRoot, supported} from '@/js/urls';
-import {getActiveTab} from '@/js/util-webext';
+import {getActiveTab, toggleListener} from '@/js/util-webext';
 import {pingTab} from './broadcast';
 import {bgBusy} from './common';
 import reinjectContentScripts from './content-scripts';
 import {getByUrl} from './style-manager';
-import {tabCache, set as tabSet} from './tab-manager';
+import {set as tabSet, tabCache} from './tab-manager';
 import {waitForTabUrl} from './tab-util';
 
-export default async function makePopupData() {
+/** @type {Map<number,Set<chrome.runtime.Port>>} tabs can have popup & popup-in-sidebar */
+const popups = new Map();
+const onTabUpdated = async (tabId, {url}) => {
+  if (url && popups.has(tabId)) {
+    const data = await makePopupData(tabId);
+    for (const port of popups.get(tabId) || [])
+      port.postMessage(data);
+  }
+};
+/** Using chrome.tabs.onUpdated to see unsupported URLs */
+const toggleObserver = enable => toggleListener(chrome.tabs.onUpdated, enable, onTabUpdated);
+onConnect[kPopup] = port => {
+  if (!popups.size)
+    toggleObserver(true);
+  const tabId = +port.name.split(':')[1];
+  const ports = popups.get(tabId);
+  if (ports) ports.add(port);
+  else popups.set(tabId, new Set([port]));
+};
+onDisconnect[kPopup] = port => {
+  const tabId = +port.name.split(':')[1];
+  const ports = popups.get(tabId);
+  if (ports?.delete(port) && !ports.size && popups.delete(tabId) && !popups.size)
+    toggleObserver(false);
+};
+
+export default async function makePopupData(tabId) {
   let tmp;
-  let tab = await getActiveTab();
+  let tab = await (tabId != null ? browser.tabs.get(tabId) : getActiveTab());
+  tabId ??= tab.id;
   if (FIREFOX && tab.status === 'loading' && tab.url === kAboutBlank) {
-    tab = await waitForTabUrl(tab.id);
+    tab = await waitForTabUrl(tabId);
   }
   // In modern Chrome `url` is for the current tab's contents, so it may be undefined
   // when a newly created tab is still connecting to `pendingUrl`.
   const url = tab.url || tab.pendingUrl || '';
-  const td = tabCache[tab.id] || false;
+  const td = tabCache[tabId] || false;
   const isOwn = url.startsWith(ownRoot);
   const [
     ping0 = __.MV3 && !td[kPopup] && (
-      tabSet(tab.id, kPopup, true),
+      tabSet(tabId, kPopup, true),
       await reinjectContentScripts(tab)
     ),
     frames,
   ] = await Promise.all([
     isOwn
-      || supported(url) && pingTab(tab.id),
+      || supported(url) && pingTab(tabId),
     isOwn && CHROME && __.BUILD !== 'firefox' && getAllFrames(url, tab)
-      || browser.webNavigation.getAllFrames({tabId: tab.id}),
+      || browser.webNavigation.getAllFrames({tabId}),
   ]);
   // sorting frames and connecting children to parents
   const unknown = new Map(frames.map(f => [f.frameId, f]));
@@ -44,7 +72,7 @@ export default async function makePopupData() {
         unknown.set(id, {
           frameId: id,
           parentFrameId: 0,
-          styles: getByUrl(frameUrl, undefined, tab.id),
+          styles: getByUrl(frameUrl, undefined, tabId),
           url: frameUrl,
         });
       }
@@ -79,9 +107,10 @@ export default async function makePopupData() {
     if (bgBusy) await bgBusy;
     for (const f of frames) {
       if (f.url && !f.isDupe)
-        f.styles ??= getByUrl(f.url, undefined, tab.id);
+        f.styles ??= getByUrl(f.url, undefined, tabId);
     }
   }
+  /** @namespace PopupData */
   return {
     frames,
     ping0,

src/background/set-client-data.js

@@ -82,6 +82,7 @@ export default async function setClientData({
     dark: isDark,
     favicon: FIREFOX || isVivaldi,
     prefs: nondefaults,
+    tabId: tabId ?? -1,
     [kBadFavs]: (page === 'edit' || page === 'install-usercss' || page === 'manage')
       && prefs.__values['manage.newUI.favicons']
       && prefs.getDbArray(kBadFavs),

src/content/apply.js

@@ -1,7 +1,7 @@
 // WARNING: make sure util-webext.js runs first and sets _deepCopy
 import {k_deepCopy, kApplyPort} from '@/js/consts';
 import {onMessage} from '@/js/msg';
-import {API, isFrame, isPopup, TDM, updateTDM} from '@/js/msg-api';
+import {API, isFrame, isTab, TDM, updateTDM} from '@/js/msg-api';
 import * as styleInjector from './style-injector';
 import {FF, isXml, own, ownId, runtime} from './style-injector';
 
@@ -150,7 +150,7 @@ function applyOnMessage(req, sender, multi) {
       break;
 
     case 'styleUpdated':
-      if (req.broadcast && !isPopup || !own.sections && own.cfg.off)
+      if (req.broadcast && isTab || !own.sections && own.cfg.off)
         break;
       if (style.enabled) {
         getStyles({id: style.id}).then(res =>
@@ -229,7 +229,7 @@ function updateExposeIframes() {
 
 function updateCount() {
   let ids, str;
-  if (TDM < 0 || isPopup) return;
+  if (TDM < 0 || !isTab) return;
   if (isFrame && lazyBadge && performance.now() > 1000) lazyBadge = false;
   if (isUnstylable) API.styleViaAPI({method: 'updateCount'});
   else if (!throttled

src/edit/edit.css

@@ -933,12 +933,8 @@ a.icon {
     border-right: none;
     border-bottom: 1px dashed var(--c65);
     padding: $pad05 $pad05 0;
-    &:not(.sticky) {
-      flex-direction: row;
-      flex-wrap: wrap;
-    }
+    flex-flow: row wrap;
     &.sticky {
-      flex-direction: row;
       box-shadow: 0 0 3rem -.75rem;
       #basic-info {
         margin: 0;
@@ -957,7 +953,7 @@ a.icon {
       font-size: 14px;
     }
     .settings h2 {
-      max-width: 10vw;
+      max-width: max(10vw, 8ex);
     }
   }
   #header.sticky .hide-if-sticky,
@@ -979,6 +975,7 @@ a.icon {
     box-sizing: border-box;
     display: flex;
     flex-wrap: wrap;
+    gap: $pad05;
     #header:not(.sticky) & {
       width: 100%;
       align-items: center;
@@ -987,9 +984,6 @@ a.icon {
     > *:first-child {
       flex-grow: 1;
     }
-    > *:not(:last-child) {
-      margin-right: $pad05;
-    }
     > a {
       order: 1;
       align-self: center;
@@ -999,13 +993,11 @@ a.icon {
     display: flex;
     flex-flow: wrap;
     align-items: center;
+    gap: $pad025 $pad075;
   }
   #new-as {
     order: 1;
   }
-  #basic-info-enabled > :nth-last-child(n + 2) {
-    margin-right: $pad075;
-  }
   #actions .buttons {
     flex-wrap: nowrap;
   }

src/js/consts.js

@@ -18,6 +18,7 @@ export const kDark = 'dark';
 export const kDisableAll = 'disableAll';
 export const kEditorSettings = 'editorSettings';
 export const kExclusions = 'exclusions';
+export const kFind = 'find';
 export const kHocused = 'focusedViaClick';
 export const kHocusedAttr = 'data-focused-via-click';
 export const kInclusions = 'inclusions';
@@ -27,6 +28,7 @@ export const kMainFrame = 'main_frame';
 export const kOverridden = 'overridden';
 export const kPopup = 'popup';
 export const kResolve = 'resolve';
+export const kSidebar = 'sidebar';
 export const kStyleIdPrefix = 'style-';
 export const kStyleIds = 'styleIds';
 export const kSubFrame = 'sub_frame';

src/js/dlg/config-dialog.js

@@ -1,5 +1,5 @@
 import {UCD} from '@/js/consts';
-import {$create, $createLink} from '@/js/dom';
+import {$create, $createLink, isSidebar} from '@/js/dom';
 import {important, messageBox, setupLivePrefs} from '@/js/dom-util';
 import {breakWord} from '@/js/localization';
 import {API} from '@/js/msg-api';
@@ -9,7 +9,7 @@ import {MOBILE} from '@/js/ua';
 import './config-dialog.css';
 import '@/css/onoffswitch.css';
 
-export default async function configDialog(style) {
+export default async function configDialog(style, y) {
   const AUTOSAVE_DELAY = 400;
   let saving = false;
   let bodyStyle;
@@ -89,7 +89,7 @@ export default async function configDialog(style) {
       renderValues();
       vars.forEach(renderValueState);
       box.style.setProperty('--num', vars.length);
-      if (isPopup && !MOBILE) {
+      if (isPopup) {
         adjustSizeForPopup(box);
       }
       updateButtons();
@@ -429,6 +429,12 @@ export default async function configDialog(style) {
     let {offsetWidth: width, offsetHeight: height} = contents;
     contents.style = '';
 
+    if (MOBILE || isSidebar) {
+      if (y + height < innerHeight)
+        box.style.cssText = `padding-top:${y}px; justify-content: center;`;
+      return;
+    }
+
     const dpr = devicePixelRatio;
     const elPicker = document.body.appendChild(
       $create('.colorpicker-popup', {style: 'display: none!important'}));
@@ -444,5 +450,6 @@ export default async function configDialog(style) {
     bs.cssText = bodyStyle.replace(/((min|max)-width|min-height)\s*:[^;]+|;\s*$/g, '') + `;
       min-width:${width}px !important;
       min-height:${height}px !important;`;
+    box.classList.add('center-dialog');
   }
 }

src/js/dom-init.js

@@ -1,6 +1,7 @@
-import {pFavicons, pFaviconsGray} from '@/js/consts';
+import {kSidebar, pFavicons, pFaviconsGray} from '@/js/consts';
+import {isTab} from '@/js/msg-api';
 import {ownRoot} from '@/js/urls';
-import {$toggleClasses, header} from './dom';
+import {$toggleClasses, header, isSidebar} from './dom';
 import {getCssMediaRuleByName} from './dom-util';
 import * as prefs from './prefs';
 import {FIREFOX, MOBILE, OPERA, VIVALDI, WINDOWS} from './ua';
@@ -18,12 +19,13 @@ prefs.subscribe([pFavicons, pFaviconsGray], (key, val) => {
   $rootCL.toggle(key === pFavicons ? 'has-favicons' : 'favicons-grayed', val);
 }, true);
 
-$root.classList.add(
+$rootCL.add(
   __.MV3 ? 'mv3' : 'mv2',
   MOBILE ? 'mobile' : 'desktop',
   WINDOWS ? 'windows' : 'non-windows',
   FIREFOX ? 'firefox' : 'chromium',
   ...OPERA ? ['opera'] : VIVALDI ? ['vivaldi'] : [],
+  ...isSidebar ? [kSidebar] : isTab ? ['tab'] : [],
   navigator.maxTouchPoints ? 'touch' : 'non-touch',
 );
 // set language for a) CSS :lang pseudo and b) hyphenation