(JS) update some scripts to account for

new namespace rules for XUL display values. (CSS) update some stylesheets for the same reason. fix a searchbar style. fix an oversight in navbarToolbarButtonSlider.uc.js. remove an obsolete option from miscMods.uc.js.
aminomancer · Aug 15, 2022 · 7b353e5 · 7b353e5
1 parent 6139802
commit 7b353e5
Show file tree

Hide file tree

Showing 14 changed files with 83 additions and 99 deletions.
diff --git a/JS/extensionOptionsPanel.uc.js b/JS/extensionOptionsPanel.uc.js
@@ -1,6 +1,6 @@
 // ==UserScript==
 // @name           Extension Options Panel
-// @version        1.8.4
+// @version        1.8.5
 // @author         aminomancer
 // @homepage       https://github.com/aminomancer/uc.css.js
 // @description    This script creates a toolbar button that opens a popup panel
@@ -1044,7 +1044,7 @@ class ExtensionOptionsWidget {
     content: url(chrome://global/skin/icons/check.svg);
     fill: currentColor;
     fill-opacity: 0.6;
-    display: -moz-box;
+    display: block;
     margin-inline-start: 10px;
 }
 #eom-theme-preview-tooltip {

diff --git a/JS/miscMods.uc.js b/JS/miscMods.uc.js
@@ -1,6 +1,6 @@
 // ==UserScript==
 // @name           Misc. Mods
-// @version        2.0.1
+// @version        2.0.2
 // @author         aminomancer
 // @homepage       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.
@@ -141,8 +141,6 @@
         this.makeDefaultBookmarkFolderPermanent();
       if (config["Turn private browsing indicator into button"])
         this.privateBrowsingIndicatorButton();
-      if (config["Anchor permissions popup to granted permission icon"])
-        this.anchorPermissionsPopup();
       if (config["Don't exit DOM fullscreen when opening permissions popup"])
         this.permsPopupInFullscreen();
       if (config["Customize tab drag preview background color"]) this.tabDragPreview();
@@ -303,30 +301,6 @@
                 oncommand="openHelpLink('private-browsing-myths')" />`;
       indicator.replaceWith(MozXULElement.parseXULToFragment(markup));
     }
-    anchorPermissionsPopup() {
-      gPermissionPanel._initializePopup();
-      eval(
-        `gPermissionPanel.openPopup = function ` +
-          gPermissionPanel.openPopup
-            .toSource()
-            .replace(/_openPopup/, "")
-            .replace(/\"bottomcenter/, `"bottomleft`)
-            .replace(
-              /(PanelMultiView\.openPopup)/,
-              `let bounds = windowUtils.getBoundsWithoutFlushing;\n    let anchorBounds = bounds(this._permissionGrantedIcon);\n    let diff = anchorBounds.left - bounds(this._identityPermissionBox).left + (anchorBounds.width / 2);\n    this._permissionPopup.style.setProperty("--uc-panel-left-offset", diff + "px");\n\n    $1`
-            )
-      );
-      let { _permissionPopup } = gPermissionPanel;
-      _permissionPopup.setAttribute("anchor-to-icon", true);
-      // we want the icon to be the same height as the container. normally it's only 16px
-      // which affects the popup positioning. we can increase the height but it's just an
-      // image element. so, doing so would mean the icon must have explicit width/height
-      // attributes. otherwise the image will be resized vertically by a lot. the icon does
-      // have explicit values, but some users may use custom icons. so to ensure this doesn't
-      // happen, set block padding equal to half the difference between the icon height and
-      // the urlbar height, minus the urlbar padding.
-      _permissionPopup.style.marginInline = `calc(-20px + var(--uc-panel-left-offset, 0px))`;
-    }
     permsPopupInFullscreen() {
       gPermissionPanel._initializePopup();
       eval(

diff --git a/JS/navbarToolbarButtonSlider.uc.js b/JS/navbarToolbarButtonSlider.uc.js
@@ -1,6 +1,6 @@
 // ==UserScript==
 // @name           Navbar Toolbar Button Slider
-// @version        2.8.1
+// @version        2.8.2
 // @author         aminomancer
 // @homepage       https://github.com/aminomancer
 // @description    Wrap all toolbar buttons in a scrollable container. It can
@@ -122,8 +122,17 @@ class NavbarToolbarSlider {
     );
   }
   constructor() {
-    this.outer = document.createElement("toolbaritem");
-    this.inner = this.outer.appendChild(document.createElement("hbox"));
+    this.outer = document.createXULElement("toolbaritem");
+    Object.defineProperty(this.outer, "hidden", {
+      get() {
+        return this.getAttribute("hidden") === "true";
+      },
+      set(val) {
+        if (val) this.setAttribute("hidden", "true");
+        else this.removeAttribute("hidden");
+      },
+    });
+    this.inner = this.outer.appendChild(document.createXULElement("hbox"));
     this.kids = this.inner.children;
     this.navbar = document.getElementById("nav-bar");
     this.cTarget = document.getElementById(this.navbar.getAttribute("customizationtarget"));
@@ -316,7 +325,7 @@ class NavbarToolbarSlider {
     await this.navbar.overflowable._moveItemsBackToTheirOrigin(true);
     this.unwrapAll();
     this.wrapAll([...this.widgets].filter(this.filterFn, this), this.inner);
-    this.outer.style.display = "-moz-box";
+    this.outer.hidden = false;
   }
   onCustomizeStart() {
     let overflown = this.isOverflowing;
@@ -327,7 +336,7 @@ class NavbarToolbarSlider {
     // or else we get a tiny bug where dragging a widget ahead of the empty
     // slider causes the widget to teleport to the end.
     this.bin.appendChild(this.outer);
-    this.outer.style.display = overflown ? "none" : "-moz-box";
+    this.outer.hidden = overflown;
   }
   onCustomizeEnd() {
     let overflown = this.isOverflowing;
@@ -336,14 +345,14 @@ class NavbarToolbarSlider {
       this.wrapAll(array, this.cOverflow);
       this.cOverflow.insertBefore(this.outer, this.cOverflow.firstElementChild);
     } else this.wrapAll(array, this.inner);
-    this.outer.style.display = overflown ? "none" : "-moz-box";
+    this.outer.hidden = overflown;
     this.setMaxWidth();
   }
   onWidgetOverflow(aNode, aContainer) {
     if (aNode.ownerGlobal !== window) return;
     if (aNode === this.outer && aContainer === this.cTarget) {
       NavbarToolbarSlider.appendLoop(this.kids, this.cOverflow);
-      this.outer.style.display = "none";
+      this.outer.hidden = true;
       this.reOrder();
     }
   }
@@ -352,7 +361,7 @@ class NavbarToolbarSlider {
     if (aNode === this.outer && aContainer === this.cTarget) {
       this.unwrapAll();
       this.wrapAll([...this.widgets].filter(this.filterFn, this), this.inner);
-      this.outer.style.display = "-moz-box";
+      this.outer.hidden = false;
       this.reOrder();
     }
   }
@@ -615,15 +624,15 @@ class NavbarToolbarSlider {
       clicktoscroll: true,
       orient: "horizontal",
       style:
-        "display: -moz-box; -moz-box-align: center; -moz-box-orient: vertical; scrollbar-width: none; box-sizing: border-box; scroll-behavior: smooth; overflow: hidden; transition: max-width 0.2s ease-out;",
+        "-moz-box-align: center; -moz-box-orient: vertical; scrollbar-width: none; box-sizing: border-box; scroll-behavior: smooth; overflow: hidden; transition: max-width 0.2s ease-out;",
     })) {
       outer.setAttribute(key, val);
     }
     if (!this.collapse) outer.setAttribute("overflows", false);
     for (const [key, val] of Object.entries({
       class: "slider-inner-container",
       id: "nav-bar-toolbarbutton-slider",
-      style: "display: -moz-box; -moz-box-flex: 1;",
+      style: "-moz-box-flex: 1;",
     })) {
       inner.setAttribute(key, val);
     }

diff --git a/JS/restoreTabSoundButton.uc.js b/JS/restoreTabSoundButton.uc.js
@@ -1,6 +1,6 @@
 // ==UserScript==
 // @name           Restore pre-Proton Tab Sound Button
-// @version        2.3.3
+// @version        2.3.4
 // @author         aminomancer
 // @homepage       https://github.com/aminomancer/uc.css.js
 // @description    Proton makes really big changes to tabs, in particular
@@ -29,9 +29,6 @@
   .tab-secondary-label {
     display: none;
   }
-  .tab-icon-sound {
-    display: -moz-box;
-  }
   .tab-icon-sound:not([soundplaying], [muted], [activemedia-blocked], [pictureinpicture]),
   .tab-icon-sound[pinned] {
     display: none;

diff --git a/JS/verticalTabsPane.uc.js b/JS/verticalTabsPane.uc.js
@@ -1,6 +1,6 @@
 // ==UserScript==
 // @name           Vertical Tabs Pane
-// @version        1.6.5
+// @version        1.6.6
 // @author         aminomancer
 // @homepage       https://github.com/aminomancer/uc.css.js
 // @description    Create a vertical pane across from the sidebar that functions
@@ -2197,7 +2197,7 @@
 }
 @supports -moz-bool-pref("userChrome.tabs.tooltip.always-show-lock-icon") {
     #vertical-tabs-tooltip #places-tooltip-insecure-icon {
-        display: -moz-inline-box !important;
+        display: inline-block !important;
     }
 }
 #vertical-tabs-tooltip #places-tooltip-insecure-icon[pending] {

diff --git a/README.md b/README.md
@@ -107,9 +107,6 @@ I also recommend setting the following prefs in `about:config`. There are two pr
 | <i>layout.css.backdrop-filter.enabled</i> | Boolean | true | Required for the acrylic/glass gaussian blur effect |
 | <i>layout.css.cached-scrollbar-styles.enabled</i> | Boolean | false | Recommended for the scrollbar styles in userChrome.ag.css |
 | <i>layout.css.moz-document.content.enabled</i> | Boolean | true | Required |
-| <i>layout.css.xul-box-display-values.content.enabled</i> | Boolean | true | Required |
-| <i>layout.css.xul-display-values.content.enabled</i> | Boolean | true | Required |
-| layout.css.xul-tree-pseudos.content.enabled | Boolean | true | |
 | mousewheel.autodir.enabled | Boolean | false | Allow mousewheel ⇅ to scroll ⇄-only scrollboxes |
 | prompts.contentPromptSubDialog | Boolean | true | Use the modern content dialog instead of modal prompts |
 | reader.color\_scheme | String | `dark` | |

diff --git a/prefs/recommended.js b/prefs/recommended.js
@@ -12,8 +12,6 @@ user_pref("browser.crashReports.unsubmittedCheck.autoSubmit2", false);
 user_pref("toolkit.legacyUserProfileCustomizations.stylesheets", true);
 user_pref("browser.proton.places-tooltip.enabled", true);
 user_pref("layout.css.moz-document.content.enabled", true);
-user_pref("layout.css.xul-box-display-values.content.enabled", true);
-user_pref("layout.css.xul-display-values.content.enabled", true);
 //// eliminate the blank white window during startup
 user_pref("browser.startup.blankWindow", false);
 user_pref("browser.startup.preXulSkeletonUI", false);
@@ -28,8 +26,6 @@ user_pref("layout.css.cached-scrollbar-styles.enabled", false);
 user_pref("ui.systemUsesDarkTheme", 1);
 // enable content dark mode
 user_pref("layout.css.prefers-color-scheme.content-override", 0);
-// allow stylesheets to modify trees in system pages viewed in regular tabs
-user_pref("layout.css.xul-tree-pseudos.content.enabled", true);
 // allow the color-mix() CSS function
 user_pref("layout.css.color-mix.enabled", true);
 // other CSS features

diff --git a/prefs/required.js b/prefs/required.js
@@ -12,8 +12,6 @@ user_pref("browser.crashReports.unsubmittedCheck.autoSubmit2", false);
 user_pref("toolkit.legacyUserProfileCustomizations.stylesheets", true);
 user_pref("browser.proton.places-tooltip.enabled", true);
 user_pref("layout.css.moz-document.content.enabled", true);
-user_pref("layout.css.xul-box-display-values.content.enabled", true);
-user_pref("layout.css.xul-display-values.content.enabled", true);
 //// eliminate the blank white window during startup
 user_pref("browser.startup.blankWindow", false);
 user_pref("browser.startup.preXulSkeletonUI", false);
@@ -28,8 +26,6 @@ user_pref("layout.css.cached-scrollbar-styles.enabled", false);
 user_pref("ui.systemUsesDarkTheme", 1);
 // enable content dark mode
 user_pref("layout.css.prefers-color-scheme.content-override", 0);
-// allow stylesheets to modify trees in system pages viewed in regular tabs
-user_pref("layout.css.xul-tree-pseudos.content.enabled", true);
 // allow the color-mix() CSS function
 user_pref("layout.css.color-mix.enabled", true);
 // other CSS features

diff --git a/resources/in-content/devtools.css b/resources/in-content/devtools.css
@@ -403,18 +403,6 @@ and a few elements like checkboxes */
     padding: 0 !important;
   }
 
-  menuseparator[id]:not(#context-sep-open, #context-media-sep-commands, #context-sep-copylink, #spell-suggestions-separator, #context-sep-selectall) {
-    display: none !important;
-  }
-
-  menuseparator:not([id]) {
-    display: -moz-box !important;
-  }
-
-  menuseparator:last-child {
-    display: none;
-  }
-
   menupopup[menu-api] menuitem:is([type="checkbox"], [type="radio"]) .menu-iconic-left {
     display: none !important;
   }

diff --git a/resources/in-content/ext-zoomscheduler.css b/resources/in-content/ext-zoomscheduler.css
@@ -114,6 +114,16 @@
     border-color: var(--global-focus-outline-color) !important;
   }
 
+  :root[uc-extension-id="{bf855ead-d7c3-4c7b-9f88-9a7e75c0efdf}"i] button > .drop-icon {
+    color: var(--ui-text-50) !important;
+  }
+
+  :root[uc-extension-id="{bf855ead-d7c3-4c7b-9f88-9a7e75c0efdf}"i]
+    .btn-group.open button
+    > .drop-icon {
+    color: inherit !important;
+  }
+
   :root[uc-extension-id="{bf855ead-d7c3-4c7b-9f88-9a7e75c0efdf}"i] .btn:focus {
     outline: 1px auto !important;
   }

diff --git a/resources/layout/uc-nsRules.au.css b/resources/layout/uc-nsRules.au.css
@@ -5,6 +5,24 @@ from the style editor in the browser toolbox. */
 
 @-moz-document regexp("^((chrome|resource|file)://|about:).*$")
 {
+  panel,
+  menupopup,
+  :is(menupopup, panel)[type="arrow"] {
+    -moz-window-shadow: none;
+  }
+
+  :is(panel, menupopup)::part(content) {
+    display: -moz-box;
+    -moz-box-flex: 1;
+  }
+
+  @-moz-document url(chrome://browser/content/browser.xhtml)
+  {
+    :is(panel, menupopup)::part(arrow) {
+      display: -moz-inline-box;
+    }
+  }
+
   #customization-container:-moz-lwtheme {
     background-color: var(--in-content-bg-dark);
     background-image: none;
@@ -312,4 +330,10 @@ from the style editor in the browser toolbox. */
       opacity: 1;
     }
   }
+
+  #handlersView .actionIcon[src="chrome://browser/skin/preferences/application.png"],
+  #handlersView .actionsMenu[image="chrome://browser/skin/preferences/application.png"]::before
+  {
+    display: -moz-inline-box;
+  }
 }
diff --git a/uc-panels.css b/uc-panels.css
@@ -169,7 +169,7 @@ panel[type="arrow"][side="top"] {
 }
 
 #BMB_bookmarksPopup {
-  margin-top: -12px !important;
+  margin-top: -7px !important;
 }
 
 #editBookmarkPanel[on-toolbar-button] {

diff --git a/uc-urlbar.css b/uc-urlbar.css
@@ -244,11 +244,6 @@ toolbarpaletteitem[place="palette"] > #search-container {
   fill-opacity: 1 !important;
 }
 
-#PopupSearchAutoComplete {
-  border-bottom-right-radius: 4px !important;
-  border-bottom-left-radius: 4px !important;
-}
-
 #urlbar-input-container,
 #searchbar {
   background-color: var(--urlbar-input-bgcolor) !important;