Merge branch 'master' into dev

CREDITS

@@ -33,6 +33,9 @@ W: https://github.com/nikkehtine
 ----------
     Contributors
 
+N: 2641a40fd44383320adde4b027a1d0b03bd550
+W: https://github.com/2641a40fd44383320adde4b027a1d0b03bd550
+
 N: 7k5x
 E: 7k5xlp0onfire@gmail.com
 W: https://github.com/7k5x

README.org

@@ -18,14 +18,14 @@
 
 -----
 
-🔔🔔 Did you set a custom, but not work?
+🔔🔔 Does the theme not work after installation?
 
 You should copy [[./user.js][ ~user.js~ ]] file before the theme works.
 
 The option system depends on user configuration, and nothing applies without settings. \\
-Also, real-time changes are difficult for [[./docs/Restrictions.md#supports][technical limitations]] and require restarts.
+Also, real-time changes are difficult because of [[./docs/Restrictions.md#supports][technical limitations]] and require a restart.
 
-Some settings [[https://github.com/black7375/Firefox-UI-Fix/wiki/Options#using-userjs][can be conflict]] and should be explicitly =false=.
+Some settings [[https://github.com/black7375/Firefox-UI-Fix/wiki/Options#using-userjs][can be conflicted]] and should be explicitly set to =false=.
 
 -----
 
@@ -50,10 +50,8 @@ Some settings [[https://github.com/black7375/Firefox-UI-Fix/wiki/Options#using-u
     - Default light/dark theme contrast enhancement
     - Colorful context menu
     - More dark mode support
-    - GTK system theme support
+    - Windows/Mac/Linux system theme support
-    - Windows system theme support
+    - Windows 7 compatibility
-    - Mac system theme support
-    - Windows7 compatibility
   - *Icons*
     - Panel
     - Context Menu
@@ -66,13 +64,13 @@ Some settings [[https://github.com/black7375/Firefox-UI-Fix/wiki/Options#using-u
     - Menu
     - Density
     - Others...
-  - *Tabbar Layouts*
+  - *Tab Bar Layouts*
     - Tabs on Bottom
     - One Liner
     - Vertical Tab Support
   - *Tab Design*
     - General:
-      - Connect with toolbar(Buttons like tabs)
+      - Connect with toolbar (buttons like tabs)
     - Selected:
       - Box Shadow: Highlight the selected tab
       - Bottom Rounding: Natural
@@ -98,7 +96,7 @@ Some settings [[https://github.com/black7375/Firefox-UI-Fix/wiki/Options#using-u
       - Focused Shadow: Same as the accent color
       - Hand off to Awesomebar
     - Icons:
-      - Size: Fill(Changes dynamically to your size)
+      - Size: Fill (Changes dynamically to your size)
   - *Error Page Design*
     - Illustrations: Restore error page illustrations
   - *Video Player*
@@ -116,9 +114,9 @@ Some settings [[https://github.com/black7375/Firefox-UI-Fix/wiki/Options#using-u
 
 ** Installation Guide
 
-   *Script Installation (experimental)*
+   *Installation script (experimental)*
 
-   Linux, mac users:
+   Linux/Mac users:
    #+BEGIN_SRC bash
    bash -c "$(curl -fsSL https://raw.githubusercontent.com/black7375/Firefox-UI-Fix/master/install.sh)"
    #+END_SRC
@@ -133,8 +131,8 @@ Windows users: Run with powershell ([[https://github.com/black7375/Firefox-UI-Fi
    You can see the [[https://github.com/black7375/Firefox-UI-Fix/wiki/Installation-Guide][installation guide]] with screenshots on the wiki.
 
   1. Download files
-     - Click the green ":arrow_down: Code"-button above
+     - Click the green ":arrow_down: Code" button above
-     - Select ":package: Download Zip"
+     - Select ":package: Download ZIP"
   2. Find your profile directory
      - Open =about:support= in a new tab
      - Find the =Profile Folder= entry and click the =Open Folder= button

docs/Omni_ja.md

@@ -19,10 +19,10 @@
 
 **Explanation**
 
-Firefox achieve performance improvements by moving many of their internal parts from being standalone files or sets of JAR files into just one JAR file called `omni.ja`.  
+Firefox achieves performance improvements by moving many of their internal parts from being standalone files or sets of JAR files into just one JAR file called `omni.ja`.  
 This reduces the amount of I/O needed to load the application.
 
-Chrome content, modules, non-binary components, and many other elements are packaged in an omni.jar file for each base directory.
+Chrome content, modules, non-binary components, and many other elements are packaged in an omni.ja file for each base directory.
 
 - `actors/`: [JSActors](https://firefox-source-docs.mozilla.org/dom/ipc/jsactors.html) related files.
 - `chrome.manifest`: The [chrome manifest](https://udn.realityripple.com/docs/Mozilla/Chrome_Registration) file.

docs/Preference.md

@@ -27,7 +27,7 @@
   - Convention is to use a dotted segmented form (Ex. `browser.cache.disk.enable`)
 - Value:
   - Type: bool, 32-bit ints, 8-bit C string
-  - When you need an float, use a string. (Ex. `general.smoothScroll.currentVelocityWeighting`: `"0.25"`)
+  - When you need a float, use a string (Ex. `general.smoothScroll.currentVelocityWeighting`: `"0.25"`)
 
 **Main Purpose**
 - Feature enable/disable flags (Ex. `xpinstall.signatures.required`).
@@ -47,7 +47,7 @@ Key information on the sets that can be used in the configuration file.
 - `user_pref()`: Set user pref
 
 The following is a method of operating the configuration file parser.  
-See [EBNF(Extended Backus-Naur form)](https://en.wikipedia.org/wiki/Extended_Backus%E2%80%93Naur_form) if you want to know about syntax.
+See [EBNF (Extended Backus-Naur form)](https://en.wikipedia.org/wiki/Extended_Backus%E2%80%93Naur_form) if you want to know about syntax.
 
 ```ebnf
 <pref-file>   = <pref>*
@@ -107,7 +107,7 @@ It is written to `prefs.js` in a way that can be set by the GUI.
 **Basics**
 It exists in the profile directory, and is used to store settings that are changed from *defaults* or when users added *new settings*.
 
-In general, Do NOT edit `prefs.js` directly.
+In general, do NOT edit `prefs.js` directly.
 
 ### user.js
 **Related Docs**

docs/Project_Structure.md

@@ -23,12 +23,12 @@ root
 |- src/: Source files
 |- src/leptonChrome.scss: Entry of SCSS for Browser UI
 |- src/leptonContent.scss: Entry of SCSS for Web pages
-|- .gitattributes: Exclude at `Download Zip`
+|- .gitattributes: Exclude at `Download ZIP`
 |- .github: Issue/PR Template, Github Actions
 |- .prettierignore: Exclude coding style
 |- .prettierrc.json: Coding style
-|- install.ps1: Install script write in powershell
+|- install.ps1: Install script written in powershell
-|- install.sh: Install script write in bash
+|- install.sh: Install script written in bash
 |- package.json: Build setup, package dependency
 |- LEPTON: Meta infos (branch, version)
 |- user.js: about:config settings
@@ -88,7 +88,7 @@ Path=<Full PATH>
 Inspired by [arkenfox](https://github.com/arkenfox/user.js/wiki/3.1-Overrides).  
 These files need to use a shell script and has some priorities.
 
-CSS override settings(`userChrome-overrides.css`, `userContent-overrides.css`) are relatively simple.
+CSS override settings (`userChrome-overrides.css`, `userContent-overrides.css`) are relatively simple.
 - `./<CSS_OVERRIDES>` (Will be copied `<FIREFOX_PROFILE>/chrome/`)
 - `<FIREFOX_PROFILE>/chrome/<CSS_OVERRIDES>`
 

docs/README.md

@@ -31,15 +31,15 @@ Firefox Source Code:
 - [Firefox Source Docs](https://firefox-source-docs.mozilla.org/)
 
 Firefox Documents:
-- [Support Mozilla: Firefox advanced customization and configuration options](https://support.mozilla.org/en-US/kb/firefox-advanced-customization-and-configuration)
+- [Mozilla Support: Firefox advanced customization and configuration options](https://support.mozilla.org/en-US/kb/firefox-advanced-customization-and-configuration)
-- [Support Mozilla: Profiles - Where Firefox stores your bookmarks, passwords and other user data](https://support.mozilla.org/en-US/kb/profiles-where-firefox-stores-user-data)
+- [Mozilla Support: Profiles - Where Firefox stores your bookmarks, passwords and other user data](https://support.mozilla.org/en-US/kb/profiles-where-firefox-stores-user-data)
 
-Test for None mac users:
+Test for non-Mac users:
 - [Docker-OSX](https://github.com/sickcodes/Docker-OSX)
 
 ## Project-Specific
 ### Environment
-[`git`](https://git-scm.com/) and [`yarn`](https://yarnpkg.com/) should be installed.
+[`git`](https://git-scm.com/) and [`yarn`](https://yarnpkg.com/) must be installed.
 
 You can configure it as follows:
 ```shell

docs/Restrictions.md

@@ -63,7 +63,8 @@ This project is using SCSS to make a [reusable compatible mixins](../src/utils).
 - Breaking change with `-moz-accent-color`/`-moz-accent-color-foreground` -> `AccentColor`/`AccentColorText` [#433](https://github.com/black7375/Firefox-UI-Fix/issues/433)
 
 ### Side Effect
-Only CSS modifications can cause bugs that are hard to think of in the general web, such as the [context menu not appearing](https://github.com/black7375/Firefox-UI-Fix/issues/114).
+Only CSS modifications can cause bugs that are hard to think of in the general web, such as the [context menu not appearing](https://github.com/black7375/Firefox-UI-Fix/issues/114).  
+Sometimes there are times when there is a really hard to understand. [#503](https://github.com/black7375/Firefox-UI-Fix/issues/503#issuecomment-1312685684)
 
 Especially be careful when customizing XUL elements.  
 The following code will cause extension panels fail to open and trying to open them might even crash Firefox. ([@MrOtherGuy](https://www.reddit.com/r/FirefoxCSS/comments/u1mdld/comment/i4eg29n/?utm_source=share&utm_medium=web2x&context=3) reports)
@@ -88,9 +89,9 @@ I don't know the exact reason, but it can be a problem if it is not applied to [
 
 ### Fork Browsers
 
-Fork browsers have a different installation location([bash](https://github.com/black7375/Firefox-UI-Fix/blob/2e87567b662922810d53959e46084b78f330f54e/install.sh#L336-L353), [powershell](https://github.com/black7375/Firefox-UI-Fix/blob/2e87567b662922810d53959e46084b78f330f54e/install.ps1#L387-L395)), and there may be a menu that Firefox does not have.
+Fork browsers have a different installation location ([bash](https://github.com/black7375/Firefox-UI-Fix/blob/2e87567b662922810d53959e46084b78f330f54e/install.sh#L336-L353), [powershell](https://github.com/black7375/Firefox-UI-Fix/blob/2e87567b662922810d53959e46084b78f330f54e/install.ps1#L387-L395)), and there may be a menu that Firefox does not have.
 
-This is a list of fork browsers supported by this project.
+List of fork browsers supported by this project:
 - [Waterfox](https://www.waterfox.net/)
 - [LibreWolf](https://librewolf.net/)
 - [Tor Browser](https://www.torproject.org/download/)
@@ -107,7 +108,7 @@ You can apply [Web extentions](https://developer.mozilla.org/en-US/docs/Mozilla/
 At this time, we recommend that the [explicit ID](https://extensionworkshop.com/documentation/develop/extensions-and-the-add-on-id/) is set.  
 If not, an anonymous ID is created in the local, so you need a [UUID replacer](https://github.com/overdodactyl/ShadowFox/blob/master/scripts/uuids.sh).
 
-This is a list of web extentions supported by this project.
+List of web extentions supported by this project:
 - [Tree Style Tab](https://addons.mozilla.org/en-US/firefox/addon/tree-style-tab/)
 - [Tab Center Reborn](https://addons.mozilla.org/en-US/firefox/addon/tabcenter-reborn/)
 - [Sidebar Tabs](https://addons.mozilla.org/en-US/firefox/addon/sidebartabs/)
@@ -118,17 +119,17 @@ We should consider [Legacy addons](https://extensionworkshop.com/documentation/d
 
 Legacy addons can be loaded by [Auto config's feature](./Preference.md#auto-config) or [bootstrapLoder](https://github.com/xiaoxiaoflood/firefox-scripts/tree/master/extensions/bootstrapLoader) and can directly manipulate the DOM structure and style. [onemen/TabMixPlus#168](https://github.com/onemen/TabMixPlus/issues/168)
 
-This is a list of legacy addons supported by this project.
+List of legacy addons supported by this project:
 - [Tab Mix Plus](https://github.com/onemen/TabMixPlus)
 
 ## Internals
 ### CSS Loading Order
-User CSS(`userChrome.css`, `userContent.css`) is usually loaded first.
+User CSS (`userChrome.css`, `userContent.css`) is usually loaded first.
 
-In many cases, overriding should be prevented with [`important!`](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#the_!important_exception)(Anti-pattern in general web), and side effects should also be considered. [#11](https://github.com/black7375/Firefox-UI-Fix/issues/11)
+In many cases, overriding should be prevented with [`!important`](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#the_!important_exception) (Anti-pattern in general web), and side effects should also be considered. [#11](https://github.com/black7375/Firefox-UI-Fix/issues/11)
 
 ### DOM structure cannot be modified
-It is possible with [JS(Auto config)](./Preference.md#auto-config), but there are security and configuration issues, so we should make the most of CSS.
+It is possible with [JS (Auto config)](./Preference.md#auto-config), but there are security and configuration issues, so we should make the most of CSS.
 
 [`::before`](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) and [`::after`](https://developer.mozilla.org/en-US/docs/Web/CSS/::after) can indirectly add CSS elements.
 
@@ -148,7 +149,7 @@ It is recommended to use `list-style-image` when a layout is provided for the im
 - [Menu Item Icon](https://github.com/black7375/Firefox-UI-Fix/blob/36e9c94844fee2417662251cbd50c2b874d5b576/userChrome.css#L4551-L4744)
 - [Error Illustration](https://github.com/black7375/Firefox-UI-Fix/blob/36e9c94844fee2417662251cbd50c2b874d5b576/userContent.css#L275-L380)
 
-You can use [`-moz-box-ordinal-group`](https://udn.realityripple.com/docs/Web/CSS/box-ordinal-group)([`-moz-box`](https://udn.realityripple.com/docs/Web/CSS/Mozilla_Extensions#display)) and [`order`](https://developer.mozilla.org/en-US/docs/Web/CSS/order)(at [flex](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)) to change the order of the layout.  
+You can use [`-moz-box-ordinal-group`](https://udn.realityripple.com/docs/Web/CSS/box-ordinal-group) ([`-moz-box`](https://udn.realityripple.com/docs/Web/CSS/Mozilla_Extensions#display)) and [`order`](https://developer.mozilla.org/en-US/docs/Web/CSS/order) (at [flex](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)) to change the order of the layout.  
 In experience, the detailed actions of `-moz-box` and `flex` are different, so tests are required.
 - [Separator Order](https://github.com/black7375/Firefox-UI-Fix/blob/36e9c94844fee2417662251cbd50c2b874d5b576/userChrome.css#L4286-L4288)
 - [Sync Menu Item's Image Order](https://github.com/black7375/Firefox-UI-Fix/blob/36e9c94844fee2417662251cbd50c2b874d5b576/userChrome.css#L4234-L4238)
@@ -160,7 +161,7 @@ By default, [attribute selectors](https://developer.mozilla.org/en-US/docs/Web/C
 If there is no state attributes, you can bypass by using [both transitions and keyframes](https://github.com/black7375/Firefox-UI-Fix/blob/36e9c94844fee2417662251cbd50c2b874d5b576/userChrome.css#L2704-L2730) for animation.
 
 ### Shadow DOM
-Firefox actively uses [shadow dom](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) internally.
+Firefox actively uses [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) internally.
 
 To modify, it is often a roundabout approach or impossible to inherit.
 
@@ -169,7 +170,7 @@ One bypass method is to declare [`var()`](https://developer.mozilla.org/en-US/do
 - [Audio, Video Player UI](https://github.com/black7375/Firefox-UI-Fix/blob/36e9c94844fee2417662251cbd50c2b874d5b576/userContent.css#L5-L47)
 - [Video Player Twoline UI](https://github.com/black7375/Firefox-UI-Fix/blob/cbf14cd55a9edada7ab2f5f1b626608fb9fe38a2/src/contents/_video_player.scss#L68-L171): It is pretty difficult when the condition becomes complicated.
 
-Another limitation of shadow dom in user style is that you cannot use shadow dom related selectors like [`:host`](https://developer.mozilla.org/en-US/docs/Web/CSS/:host_function) and [`::part`](https://developer.mozilla.org/en-US/docs/Web/CSS/::part).
+Another limitation of shadow DOM in user style is that you cannot use shadow DOM related selectors like [`:host`](https://developer.mozilla.org/en-US/docs/Web/CSS/:host_function) and [`::part`](https://developer.mozilla.org/en-US/docs/Web/CSS/::part).
 
 - [Using ::part() selector in userchrome.css?](https://www.reddit.com/r/FirefoxCSS/comments/d2sukj/using_part_selector_in_userchromecss/)
 - [Can't change some shadow-dom properties](https://www.reddit.com/r/FirefoxCSS/comments/rebn3s/cant_change_some_shadowdom_properties/)
@@ -179,11 +180,11 @@ Another limitation of shadow dom in user style is that you cannot use shadow dom
 Sometimes firefox can use [XUL](https://en.wikipedia.org/wiki/XUL) that have been written and bound with C++ for performance like a treeview of bookmarks.  
 XUL's [box model](https://udn.realityripple.com/docs/Archive/Mozilla/XUL/Tutorial/The_Box_Model) and [DOM](https://udn.realityripple.com/docs/Archive/Mozilla/XUL/Tutorial/Document_Object_Model) are different from HTML.
 
-There ar few appropriate documents, so we have to read the source code and work. (Ex. [1](https://github.com/mozilla/gecko-dev/blob/master/layout/style/nsCSSAnonBoxList.h), [2](https://github.com/mozilla/gecko-dev/blob/master/layout/xul/tree/nsITreeView.idl))
+There are a few appropriate documents, so we have to read the source code and work. (Ex. [1](https://github.com/mozilla/gecko-dev/blob/master/layout/style/nsCSSAnonBoxList.h), [2](https://github.com/mozilla/gecko-dev/blob/master/layout/xul/tree/nsITreeView.idl))
 
 Available CSS features are also restricted.
 
-Example of legacy documents that will help.
+Examples of legacy documents that will help:
 - [UDN: ::-moz-tree-cell](https://udn.realityripple.com/docs/Mozilla/Gecko/Chrome/CSS/::-moz-tree-cell)
 - [UDN: ::-moz-tree-cell-text](https://udn.realityripple.com/docs/Mozilla/Gecko/Chrome/CSS/::-moz-tree-cell-text)
 
@@ -193,9 +194,9 @@ Like [`<toolbar align="end"></toolbar>`](https://udn.realityripple.com/docs/Arch
 ### Supports
 [`@supports`](https://developer.mozilla.org/en-US/docs/Web/CSS/@supports) change in CSS is not detected in real time. (Caching after checking only once)  
 
-So a restart is required, and if the mozilla need real time changes, are using `@media` to handle it.
+So a restart is required, and if Mozilla needs real time changes, they are using `@media` to handle it.
 
-If project only use pure CSS, we cannot add `@media rules`.
+If project only uses pure CSS, we cannot add `@media rules`.
 
 - [Bug 1267890 - Support detecting bool preferences in chrome stylesheets](https://bugzilla.mozilla.org/show_bug.cgi?id=1267890)
 - [Bug 1698132 - Improve caching behaviour of -moz-bool-pref](https://bugzilla.mozilla.org/show_bug.cgi?id=1698132)

docs/Smart_Bookmarks.md

@@ -1,4 +1,4 @@
-# Smart Bookmarks(Query Bookmarks)
+# Smart Bookmarks (Query Bookmarks)
 
 <!-- markdown-toc start - Don't edit this section. Run M-x markdown-toc-refresh-toc -->
 **Table of Contents**
@@ -12,7 +12,7 @@
 
 ## Basics
 **Related Docs**
-- [Support Mozilla: Restore the default Smart Bookmarks Folders](https://support.mozilla.org/en-US/kb/restore-default-smart-bookmarks-folders) (Not works)
+- [Mozilla Support: Restore the default Smart Bookmarks Folders](https://support.mozilla.org/en-US/kb/restore-default-smart-bookmarks-folders) (does not work)
 - [Smart Bookmarks. A quick guide.](https://www.reddit.com/r/firefox/comments/2i4qcy/smart_bookmarks_a_quick_guide/)
 - [Smart Bookmarks. A quick guide. (extended)](https://www.reddit.com/r/firefox/comments/fvcw96/query_bookmarks_smart_bookmarks_a_quick_guide/)
 - [How to Create Custom Smart Bookmarks Folders in Firefox](https://www.howtogeek.com/111820/how-to-create-custom-smart-bookmarks-folders-in-firefox/)

package.json

@@ -21,10 +21,14 @@
   },
   "devDependencies": {
     "csstree-validator": "^3.0.0",
-    "fast-glob": "^3.2.11",
+    "fast-glob": "^3.2.12",
-    "jest": "^27.5.1",
+    "jest": "^29.3.1",
-    "prettier": "^2.6.1",
+    "jest-environment-node-single-context": "^29.0.0",
-    "sass": "^1.49.0",
+    "prettier": "^2.7.1",
+    "sass": "^1.56.1",
     "sass-true": "^6.1.0"
+  },
+  "jest": {
+    "testEnvironment": "jest-environment-node-single-context"
   }
 }

src/compatibility/_theme.scss

@@ -171,3 +171,10 @@ vbox[part="drop-indicator-bar"] > image[part="drop-indicator"] {
     }
   }
 }
+
+/*= Firefox View Border #498 =================================================*/
+:root:not([privatebrowsingmode=temporary])[firefoxviewhidden] #firefox-view-button + #tabbrowser-tabs {
+  border-inline-start: none !important;
+  padding-inline-start: var(--tab-overflow-pinned-tabs-width) !important;
+  margin-inline-start: 0 !important;
+}

src/decoration/_animate.scss

@@ -40,9 +40,7 @@
         margin-inline-start 0.2s var(--animation-easing-function), min-width 0.1s ease-out, max-width 0.1s ease-out !important;
     }
     &[pinned] {
-      transition: -moz-box-flex 0.2s var(--animation-easing-function),
+      transition: margin-inline-start 0.2s var(--animation-easing-function), min-width 0.1s ease-out, max-width 0.1s ease-out !important;
-        margin-inline-start 0.2s var(--animation-easing-function) !important;
-
     }
   }
 

src/hidden/_index.scss

@@ -94,7 +94,7 @@
   menu,
   menuitem:not(#context-back, #context-forward) {
     &[disabled="true"] {
-      display: none !important;
+      visibility: collapse !important;
     }
   }
 
@@ -102,7 +102,7 @@
     #context-back,
     #context-forward {
       &[disabled="true"] {
-        display: none !important;
+        visibility: collapse !important;
       }
     }
   }

src/icons/_panel.scss

@@ -41,21 +41,23 @@
     padding-inline-start: var(--arrowpanel-menuimageblank-padding-horizontal) !important;
   }
 }
-@include Option("userChrome.icon.panel_sparse") {
+@include NotOption("userChrome.icon.panel_photon") {
-  #appMenu-new-tab-button2,           /* Separate */
+  @include NotOption("userChrome.icon.panel_full") {
-  #appMenu-passwords-button,          /* Separate */
+    #appMenu-new-tab-button2,           /* Separate */
-  #appMenu-extensions-themes-button,
+    #appMenu-passwords-button,          /* Separate */
-  #appMenu-save-file-button2,         /* Separate */
+    #appMenu-extensions-themes-button,
-  #appMenu-find-button2,
+    #appMenu-save-file-button2,         /* Separate */
-  #appMenu-more-button2,              /* Separate */
+    #appMenu-find-button2,
-  #appMenu-help-button2,
+    #appMenu-more-button2,              /* Separate */
-  #appMenu-quit-button2               /* Separate */ {
+    #appMenu-help-button2,
-    padding-top: var(--arrowpanel-menuitemblank-padding-block) !important;
+    #appMenu-quit-button2               /* Separate */ {
-    padding-bottom: var(--arrowpanel-menuitemblank-padding-block) !important;
+      padding-top: var(--arrowpanel-menuitemblank-padding-block) !important;
-  }
+      padding-bottom: var(--arrowpanel-menuitemblank-padding-block) !important;
-  #appMenu-zoom-controls2, /* Legacy v104 */
+    }
-  #appMenu-zoom-controls {
+    #appMenu-zoom-controls2, /* Legacy v104 */
-    padding-inline-start: var(--arrowpanel-menuimageblank-padding-horizontal) !important;
+    #appMenu-zoom-controls {
+      padding-inline-start: var(--arrowpanel-menuimageblank-padding-horizontal) !important;
+    }
   }
 }
 #appMenu-new-window-button2 {

src/icons/layout/_bookmark_menu.scss

@@ -101,6 +101,12 @@ $_bookmarkToolbarMenus: selector.nest(
   /* Bookmark Popup - None icon menu */
   @include _layoutBookmarkMenu() {
     padding-inline-start: calc(var(--arrowpanel-menuitem-padding-inline) + 1px) !important;
+
+    .menu-text {
+      // https://github.com/mozilla/gecko-dev/commit/e54707888510dec75db59a170b287d1db031505a
+      // https://github.com/mozilla/gecko-dev/blob/e54707888510dec75db59a170b287d1db031505a/toolkit/themes/linux/global/menu.css#L103
+      margin-inline-start: 21px !important;
+    }
   }
 }
 
@@ -108,11 +114,19 @@ $_bookmarkToolbarMenus: selector.nest(
   /* Bookmark Popup - As Arrow Panel */
   #PersonalToolbar menupopup menuitem,
   #PersonalToolbar menupopup menu {
-    padding-inline: calc(var(--arrowpanel-menuicon-padding) + var(--arrowpanel-menuitem-padding-inline)) !important;
+    padding-inline: var(--arrowpanel-menuitem-padding-inline) !important;
   }
 
   /* Bookmark Popup - None icon menu */
   @include _layoutBookmarkPopup() {
     padding-inline-start: calc(var(--arrowpanel-menuitem-padding-inline) + 3px) !important;
   }
+  @include _layoutBookmarkToolbar() {
+    padding-inline-start: calc(var(--arrowpanel-menuitem-padding-inline) + 1px) !important;
+  }
+  @include _layoutBookmarkMenu() {
+    > .menu-text {
+      padding-inline-start: var(--context-menu-mac-padding) !important;
+    }
+  }
 }

src/icons/layout/_panel.scss

@@ -9,7 +9,7 @@
   width: 16px;
 }
 
-@include Option("userChrome.icon.panel_photon", "userChrome.icon.panel_sparse") {
+@include NotOption("userChrome.icon.panel_full") {
   :root {
     /* Global */
     --arrowpanel-menuicon-paddingx2: calc(var(--arrowpanel-menuicon-padding) * 2);

src/padding/_infobar.scss

@@ -1,16 +1,16 @@
-:root:not([uidensity]) #tab-notification-deck {
+:root:not([uidensity]) notification-message {
   --infobar-message-vertical-margin: 3px;
 
   --infobar-vertical-margin: 7px;
   --infobar-button-vertical-margin: 3px;
 }
-:root[uidensity="compact"] #tab-notification-deck {
+:root[uidensity="compact"] notification-message {
   --infobar-message-vertical-margin: 2px;
 
   --infobar-vertical-margin: 6px;
   --infobar-button-vertical-margin: 2px;
 }
-:root[uidensity="touch"] #tab-notification-deck {
+:root[uidensity="touch"] notification-message {
   --infobar-message-vertical-margin: 4px;
 
   --infobar-vertical-margin: 8px;

src/padding/_panel.scss

@@ -14,3 +14,11 @@
   --arrowpanel-menuitem-padding-block: 8px !important; /* Original: 8px */
   --arrowpanel-menuitem-padding-inline: 8px !important; /* Original: 8px */
 }
+
+@include NotOption("userChrome.icon.disabled") {
+  @include NotOption("userChrome.icon.panel") {
+    .subviewbutton {
+      min-height: calc(16px + (var(--arrowpanel-menuitem-padding-block) * 2)) !important;
+    }
+  }
+}

src/tab/_container_tab.scss

@@ -4,19 +4,26 @@
   }
 }
 
-.tabbrowser-tab {
+#tabbrowser-tabs {
   $containerPositionX: 9px;
-  --container-position-x: #{ $containerPositionX };
+  --uc-container-position-x: #{ $containerPositionX };
-  --container-position-y: 11px;
   &:-moz-locale-dir(rtl) {
-    --container-position-x: #{ $containerPositionX * -1 };
+    --uc-container-position-x: #{ $containerPositionX * -1 };
   }
+
+  --uc-container-position-y-default: 11.5px;
+  --uc-container-position-y: calc(50% + var(--uc-container-position-y-default));
+
+  // Pinned Tab - Titlechanged Indicator override
+  --uc-titlechanged-container-position-x: 32%, 50%, 70%;
 }
-:root[uidensity="compact"] .tabbrowser-tab {
+:root[uidensity="compact"] #tabbrowser-tabs {
-  --container-position-y: 10px;
+  --uc-container-position-y-default: 10.5px;
+
+  --uc-titlechanged-container-position-x: 30%, 50%, 70%;
 }
-:root[uidensity="touch"] .tabbrowser-tab {
+:root[uidensity="touch"] #tabbrowser-tabs {
-  --container-position-y: 12px;
+  --uc-container-position-y-default: 12.5px;
 }
 .tab-content:not([titlechanged])::before {
   /* Box Model */
@@ -24,7 +31,7 @@
   display: block;
   position: absolute;
   top: 50%;
-  transform: translate(var(--container-position-x), var(--container-position-y));
+  transform: translate(var(--uc-container-position-x), var(--uc-container-position-y));
 
   /* Shape */
   border-bottom: 2px solid var(--identity-icon-color);
@@ -49,7 +56,7 @@
 
 /* Pinned Tab */
 .tabbrowser-tab[pinned] .tab-content::before {
-  transform: translateY(var(--container-position-y));
+  transform: translateY(var(--uc-container-position-y));
   width: 16px;
 }
 @include Option("userChrome.tab.close_button_at_pinned") {
@@ -69,25 +76,14 @@
     var(--identity-icon-color) 2px,
     transparent 2px
   );
-  background-image: var(--dotted-identity-image), var(--dotted-identity-image), var(--dotted-identity-image);
+  background-image: var(--dotted-identity-image), var(--dotted-identity-image), var(--dotted-identity-image) !important;
-  background-position-x: 32%, 50%, 70%;
+  background-position-x: var(--uc-titlechanged-container-position-x) !important;
-}
-:root[uidensity="compact"]
-  .tabbrowser-tab:is([image], [pinned])[usercontextid]
-  > .tab-stack
-  > .tab-content[attention]:not([selected="true"]),
-:root[uidensity="compact"]
-  .tabbrowser-tab[usercontextid]
-  > .tab-stack
-  > .tab-content[pinned][titlechanged]:not([selected="true"]) {
-  /* Original: radial-gradient(circle, var(--attention-icon-color), var(--attention-icon-color) 2px, transparent 2px); */
-  background-position-x: 30%, 50%, 70%;
 }
 
 .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
 .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
   /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */
-  background-position-y: top calc(0.5px + 50% + var(--container-position-y));
+  background-position-y: top var(--uc-container-position-y) !important;
 }
 
 /* Pinned Tab - Titlechanged & soundplaying */
@@ -97,7 +93,7 @@
 .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
   > .tab-stack
   > .tab-content[pinned][titlechanged]:not([selected="true"]) {
-  background-position-x: calc(32% - 1px), calc(50% - 1px), calc(70% - 1px);
+  --uc-titlechanged-container-position-x: calc(32% - 1px), calc(50% - 1px), calc(70% - 1px);
 }
 :root[uidensity="compact"]
   .tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
@@ -107,5 +103,5 @@
   .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
   > .tab-stack
   > .tab-content[pinned][titlechanged]:not([selected="true"]) {
-  background-position-x: calc(30% - 1px), calc(50% - 1px), calc(70% - 1px);
+  --uc-titlechanged-container-position-x: calc(30% - 1px), calc(50% - 1px), calc(70% - 1px);
 }

src/tabbar/_one_liner.scss

@@ -16,7 +16,7 @@
   height: calc(var(--uc-tabbar-height) - var(--uc-navbar-double-block)) !important;
   margin-top: calc(var(--uc-tabbar-hide-height) + var(--uc-navbar-double-block)) !important;
   margin-bottom: var(--uc-navbar-block, 0px) !important;
-  transform: translateY(calc(-1 * var(--uc-navbar-block, 0px)));
+  // transform: translateY(calc(-1 * var(--uc-navbar-block, 0px)));
 }
 
 #titlebar {
@@ -54,8 +54,9 @@
     -moz-box-align: center;
   }
 
-  #urlbar[breakout] {
+  #urlbar-container {
-    top: 0px !important; /* Original: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2); */
+    // Minus --toolbarbutton-inner-padding
+    min-height: calc(var(--urlbar-container-height) - 2px) !important;
   }
 }
 
@@ -72,8 +73,13 @@
 }
 
 #urlbar-container {
+  // https://github.com/mozilla/gecko-dev/commit/f30aeeee449c753d7494c788cae58dae7e1a92e5
+  // https://github.com/mozilla/gecko-dev/commit/42a66e80d97bc07b25be913c02fd004ee9c7ca1a
   min-width: calc(var(--uc-oneliner-urlbar-base-width, 50px) + 24px + 2 * var(--toolbarbutton-inner-padding)) !important; // Original: calc(350px + 24px + 2 * var(--toolbarbutton-inner-padding))
 }
+#urlbar[breakout][breakout-extend] {
+  min-width: calc(310px + 2 * (24px + 2 * var(--toolbarbutton-inner-padding))) !important;
+}
 
 #PersonalToolbar {
   // for URL Bar

user.js

@@ -47,7 +47,6 @@ user_pref("userChrome.tab.newtab_button_proton",      false); // Proton
 
 user_pref("userChrome.icon.panel_full",                true); // Original, Proton
 user_pref("userChrome.icon.panel_photon",             false); // Photon
-user_pref("userChrome.icon.panel_sparse",             false); // Just option
 
 // Original Only
 user_pref("userChrome.tab.box_shadow",                 true);