update several scripts and stylesheets.

aminomancer · Jun 29, 2023 · 689118c · 689118c
1 parent 4bcebe7
commit 689118c
Show file tree

Hide file tree

Showing 14 changed files with 166 additions and 102 deletions.
diff --git a/JS/miscMods.uc.js b/JS/miscMods.uc.js
@@ -1,6 +1,6 @@
 // ==UserScript==
 // @name           Misc. Mods
-// @version        2.0.8
+// @version        2.0.9
 // @author         aminomancer
 // @homepageURL    https://github.com/aminomancer/uc.css.js
 // @description    Various tiny mods not worth making separate scripts for. Read the comments inside the script for details.
@@ -576,35 +576,6 @@
         etpPanel.addEventListener("popupshowing", setEtpPopupInfoTooltip);
       }
 
-      // support icons for the "move sidebar to left" and "move sidebar to right" buttons in
-      // the sidebar switcher dropdown menu that appear when you click the sidebar switcher:
-      // #sidebar-reverse-position[to-position="left"] {
-      //     list-style-image: url(chrome://browser/skin/back.svg);
-      // }
-      // #sidebar-reverse-position[to-position="right"] {
-      //     list-style-image: url(chrome://browser/skin/forward.svg);
-      // }
-      SidebarUI.showSwitcherPanel = function() {
-        this._ensureShortcutsShown();
-        this._switcherPanel.addEventListener(
-          "popuphiding",
-          () => this._switcherTarget.classList.remove("active"),
-          { once: true }
-        );
-        let onRight = this._positionStart == RTL_UI;
-        let label = onRight
-          ? gNavigatorBundle.getString("sidebar.moveToLeft")
-          : gNavigatorBundle.getString("sidebar.moveToRight");
-        this._reversePositionButton.setAttribute("label", label);
-        this._reversePositionButton.setAttribute(
-          "to-position",
-          onRight ? "left" : "right"
-        );
-        this._switcherPanel.hidden = false;
-        this._switcherPanel.openPopup(this._title.previousElementSibling);
-        this._switcherTarget.classList.add("active");
-      };
-
       // add an "engine" attribute to the searchbar autocomplete popup, so we can replace the
       // engine icon with CSS without needing to use the (random) icon URL as a selector. this
       // way, my replacing the built-in Google engine's icon with a nicer-looking one will

diff --git a/JS/restorePreProtonArrowpanels.uc.js b/JS/restorePreProtonArrowpanels.uc.js
@@ -1,6 +1,6 @@
 // ==UserScript==
 // @name           Restore pre-Proton Arrowpanels
-// @version        1.2.9
+// @version        1.3.0
 // @author         aminomancer
 // @homepageURL    https://github.com/aminomancer/uc.css.js
 // @long-description
@@ -386,8 +386,7 @@ override chrome://browser/content/translation-notification.js ../resources/scrip
   if (uePanel) {
     uePanel.position = "bottomcenter topright";
   }
-  document.getElementById("sidebarMenu-popup").position =
-    "bottomcenter topleft";
+  document.getElementById("sidebarMenu-popup").position = "bottomleft topleft";
   document.getElementById("confirmation-hint").position =
     "bottomcenter topright";
 

diff --git a/JS/showSelectedSidebarInSwitcherPanel.uc.js b/JS/showSelectedSidebarInSwitcherPanel.uc.js
@@ -1,6 +1,6 @@
 // ==UserScript==
 // @name           Show Selected Sidebar in Switcher Panel
-// @version        1.0.2
+// @version        1.0.3
 // @author         aminomancer
 // @homepageURL    https://github.com/aminomancer/uc.css.js
 // @long-description
@@ -23,32 +23,75 @@ Proton removes the checkmark shown on the selected sidebar in the sidebar switch
     for (let type of builtInSidebars) {
       SidebarUI.sidebars.get(
         `view${type}Sidebar`
-      ).buttonId = `sidebar-switcher-${type.toLowerCase()}`;
+      ).switcherMenuId = `sidebar-switcher-${type.toLowerCase()}`;
     }
 
     SidebarUI.selectMenuItem = function selectMenuItem(commandID) {
-      for (let [id, { menuId, buttonId, triggerButtonId }] of this.sidebars) {
+      for (let [id, { menuId, switcherMenuId, triggerButtonId }] of this
+        .sidebars) {
         let menu = document.getElementById(menuId);
-        let button = document.getElementById(buttonId);
+        let menuitem = document.getElementById(switcherMenuId);
         let triggerbutton =
           triggerButtonId && document.getElementById(triggerButtonId);
         if (id == commandID) {
           menu.setAttribute("checked", "true");
-          button.setAttribute("checked", "true");
+          menuitem.setAttribute("checked", "true");
           if (triggerbutton) {
             triggerbutton.setAttribute("checked", "true");
             updateToggleControlLabel(triggerbutton);
           }
         } else {
           menu.removeAttribute("checked");
-          button.removeAttribute("checked");
+          menuitem.removeAttribute("checked");
           if (triggerbutton) {
             triggerbutton.removeAttribute("checked");
             updateToggleControlLabel(triggerbutton);
           }
         }
       }
     };
+
+    // support icons for the "move sidebar to left" and "move sidebar to right" buttons in
+    // the sidebar switcher dropdown menu that appear when you click the sidebar switcher:
+    // #sidebar-reverse-position[to-position="left"] {
+    //     list-style-image: url(chrome://browser/skin/back.svg);
+    // }
+    // #sidebar-reverse-position[to-position="right"] {
+    //     list-style-image: url(chrome://browser/skin/forward.svg);
+    // }
+    SidebarUI.showSwitcherPanel = function() {
+      this._switcherPanel.addEventListener(
+        "popuphiding",
+        () => this._switcherTarget.classList.remove("active"),
+        { once: true }
+      );
+      let onRight = this._positionStart == RTL_UI;
+      let label = onRight
+        ? gNavigatorBundle.getString("sidebar.moveToLeft")
+        : gNavigatorBundle.getString("sidebar.moveToRight");
+      this._reversePositionButton.setAttribute("label", label);
+      this._reversePositionButton.setAttribute(
+        "to-position",
+        onRight ? "left" : "right"
+      );
+      this._switcherPanel.hidden = false;
+      this._switcherPanel.openPopup(this._switcherTarget);
+      this._switcherTarget.classList.add("active");
+      this._switcherTarget.setAttribute("aria-expanded", true);
+      for (let sidebar of this.sidebars.values()) {
+        let menuitem = document.getElementById(sidebar.switcherMenuId);
+        menuitem.setAttribute("type", "radio");
+      }
+    };
+
+    document
+      .getElementById("viewSidebarMenu")
+      .addEventListener("popupshowing", () => {
+        for (let sidebar of SidebarUI.sidebars.values()) {
+          let menuitem = document.getElementById(sidebar.menuId);
+          menuitem.setAttribute("type", "radio");
+        }
+      });
   }
 
   if (gBrowserInit.delayedStartupFinished) {

diff --git a/JS/tooltipStyler.uc.js b/JS/tooltipStyler.uc.js
@@ -1,6 +1,6 @@
 // ==UserScript==
 // @name           Tooltip Styler
-// @version        1.1.4
+// @version        1.1.5
 // @author         aminomancer
 // @homepageURL    https://github.com/aminomancer/uc.css.js
 // @description    Allows you to style a tooltip in the chrome window based on which node triggered it. [duskFox](https://github.com/aminomancer/uc.css.js) uses this to make certain tooltips and popups gray instead of indigo, since we have gray system pages. If you want to use this for custom purposes, you'll need to edit the script and add CSS to your _agent_ sheet like `tooltip[backdrop-color"red"] {...}`
@@ -34,17 +34,12 @@
       let tooltip = e.originalTarget;
       let color;
       switch (tooltip.localName) {
-        case "panel":
-          if (tooltip.id === "sidebarMenu-popup") {
-            color = colorForSidebar(SidebarUI.currentID);
-          } else {
-            return;
-          }
-          break;
         case "tooltip":
         case "menupopup":
-          let node = tooltip.triggerNode;
-          if (node?.closest("#sidebar-header")) {
+          let node = tooltip.triggerNode ?? tooltip.anchorNode;
+          if (tooltip.id === "sidebarMenu-popup") {
+            color = colorForSidebar(SidebarUI.currentID);
+          } else if (node?.closest("#sidebar-header")) {
             color = colorForSidebar(SidebarUI.currentID);
           } else if (
             node?.closest("#customization-container") &&

diff --git a/JS/verticalTabsPane.uc.js b/JS/verticalTabsPane.uc.js
@@ -1,6 +1,6 @@
 // ==UserScript==
 // @name           Vertical Tabs Pane
-// @version        1.7.5
+// @version        1.7.6
 // @author         aminomancer
 // @homepageURL    https://github.com/aminomancer/uc.css.js
 // @long-description
@@ -2643,16 +2643,16 @@ When you collapse the pane with the unpin button, it collapses to a small width
     let appcontent = document.getElementById("appcontent");
     let verticalSplitter = document.getElementById("vertical-tabs-splitter");
     let verticalPane = document.getElementById("vertical-tabs-pane");
-    this._box.style.MozBoxOrdinalGroup = 1;
-    this._splitter.style.MozBoxOrdinalGroup = 2;
-    appcontent.style.MozBoxOrdinalGroup = 3;
-    verticalSplitter.style.MozBoxOrdinalGroup = 4;
-    verticalPane.style.MozBoxOrdinalGroup = 5;
+    this._box.style.order = 1;
+    this._splitter.style.order = 2;
+    appcontent.style.order = 3;
+    verticalSplitter.style.order = 4;
+    verticalPane.style.order = 5;
     if (!this._positionStart) {
-      this._box.style.MozBoxOrdinalGroup = 5;
-      this._splitter.style.MozBoxOrdinalGroup = 4;
-      verticalSplitter.style.MozBoxOrdinalGroup = 2;
-      verticalPane.style.MozBoxOrdinalGroup = 1;
+      this._box.style.order = 5;
+      this._splitter.style.order = 4;
+      verticalSplitter.style.order = 2;
+      verticalPane.style.order = 1;
       this._box.setAttribute("positionend", true);
       verticalPane.setAttribute("positionstart", true);
     } else {

diff --git a/resources/in-content/devtools.css b/resources/in-content/devtools.css
@@ -221,6 +221,7 @@ and a few elements like checkboxes */
     width: 14px;
     height: 14px;
     margin-inline: var(--context-checkbox-margin);
+    box-sizing: border-box;
     fill: currentColor;
     -moz-context-properties: fill, fill-opacity, stroke;
     content: "";

diff --git a/resources/in-content/menus.css b/resources/in-content/menus.css
@@ -214,6 +214,7 @@ menupopup.in-menulist menuitem:is([type="checkbox"], [type="radio"])::before {
   width: 14px;
   height: 14px;
   margin-inline: var(--context-checkbox-margin);
+  box-sizing: border-box;
   fill: currentColor;
   -moz-context-properties: fill, fill-opacity, stroke;
   content: "";

diff --git a/uc-context-menu-icons.css b/uc-context-menu-icons.css
@@ -20,6 +20,8 @@ menu#pageStyleMenu > .menu-text,
 :is(#menu_zoomEnlarge, #menu_zoomReduce, #menu_zoomReset) .menu-text,
 #viewToolbarsMenu > .menu-text,
 #viewSidebarMenuMenu > .menu-text,
+#sidebar-reverse-position > .menu-text,
+#sidebarMenu-popup > menuitem[oncommand="SidebarUI.hide()"][data-l10n-id="sidebar-menu-close"] > .menu-text,
 #menu_showAllHistory > .menu-text,
 menuitem#sanitizeItem > .menu-text,
 :is(#sync-tabs-menuitem, #syncedTabsRefresh, #syncedTabsRefreshFilter) > .menu-text,
@@ -374,6 +376,8 @@ menuitem#helpPolicySupport::before,
 :is(#menu_zoomEnlarge, #menu_zoomReduce, #menu_zoomReset)::before,
 #viewToolbarsMenu::before,
 #viewSidebarMenuMenu::before,
+#sidebar-reverse-position::before,
+#sidebarMenu-popup > menuitem[oncommand="SidebarUI.hide()"][data-l10n-id="sidebar-menu-close"]::before,
 #menu_showAllHistory::before,
 menuitem#sanitizeItem::before,
 :is(#sync-tabs-menuitem, #syncedTabsRefresh, #syncedTabsRefreshFilter)::before,
@@ -927,16 +931,58 @@ menupopup#viewSidebarMenu menuitem:is([type="checkbox"], [type="radio"]):not([ch
   display: none;
 }
 
+/* check for the english label in case user doesn't have my script miscMods
+obviously that will only work for english firefox, so if you use another
+language, you should download miscMods.uc.js since it will dynamically set a
+universal attribute that we can select irrespective of target language. */
+#sidebar-reverse-position:is([label="Move Sidebar to Left"], [to-position="left"])::before {
+  background-image: url(chrome://userchrome/content/skin/back.svg);
+  background-size: 15px;
+}
+
+#sidebar-reverse-position:is([label="Move Sidebar to Right"], [to-position="right"])::before {
+  background-image: url(chrome://userchrome/content/skin/forward.svg);
+  background-size: 15px;
+}
+
+#sidebarMenu-popup > menuitem:is([type="checkbox"], [type="radio"]):is(:not(.webextension-menuitem), [style]):not([checked="true"])::before {
+  width: 16px;
+  min-width: 16px;
+  height: 16px;
+  min-height: 16px;
+  margin-inline: var(--context-iconic-margin);
+  border-radius: 0;
+  border: 0;
+  background-color: transparent;
+  color: inherit;
+}
+
 menupopup#viewSidebarMenu #menu_bookmarksSidebar:is([type="checkbox"], [type="radio"]):not([checked="true"]) {
   list-style-image: url(chrome://userchrome/content/skin/bookmark.svg) !important;
 }
 
+#sidebarMenu-popup > menuitem#sidebar-switcher-bookmarks:is([type="checkbox"], [type="radio"]):not([checked="true"])::before {
+  background-image: url(chrome://userchrome/content/skin/bookmark.svg);
+}
+
 menupopup#viewSidebarMenu #menu_historySidebar:is([type="checkbox"], [type="radio"]):not([checked="true"]) {
   list-style-image: url(chrome://userchrome/content/skin/history.svg) !important;
 }
 
+#sidebarMenu-popup > menuitem#sidebar-switcher-history:is([type="checkbox"], [type="radio"]):not([checked="true"])::before {
+  background-image: url(chrome://userchrome/content/skin/history.svg);
+}
+
 menupopup#viewSidebarMenu #menu_tabsSidebar:is([type="checkbox"], [type="radio"]):not([checked="true"]) {
-  list-style-image: url(chrome://userchrome/content/skin/tab.svg) !important;
+  list-style-image: url(chrome://userchrome/content/skin/synced-tabs.svg) !important;
+}
+
+#sidebarMenu-popup > menuitem#sidebar-switcher-tabs:is([type="checkbox"], [type="radio"]):not([checked="true"])::before {
+  background-image: url(chrome://userchrome/content/skin/synced-tabs.svg);
+}
+
+#sidebarMenu-popup > menuitem[oncommand="SidebarUI.hide()"][data-l10n-id="sidebar-menu-close"]::before {
+  background-image: url(chrome://userchrome/content/close-big.svg);
 }
 
 #menu_showAllHistory::before {

diff --git a/uc-context-menus.css b/uc-context-menus.css
@@ -186,6 +186,7 @@ menupopup menuitem:is([type="checkbox"], [type="radio"])::before {
   height: 14px;
   min-height: 14px;
   margin-inline: var(--context-checkbox-margin);
+  box-sizing: border-box;
   fill: currentColor;
   -moz-context-properties: fill, fill-opacity, stroke;
   content: "";