Merge branch 'dev' into photon-style-dev

.github/FUNDING.yml

@@ -0,0 +1,17 @@
+# These are supported funding model platforms
+
+## Example
+# https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/displaying-a-sponsor-button-in-your-repository
+# github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
+# patreon: # Replace with a single Patreon username
+# open_collective: # Replace with a single Open Collective username
+# ko_fi: # Replace with a single Ko-fi username
+# tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+# community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+# liberapay: # Replace with a single Liberapay username
+# issuehunt: # Replace with a single IssueHunt username
+# otechie: # Replace with a single Otechie username
+# lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
+# custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
+
+github: [black7375]

.github/workflows/ci.yml

@@ -41,21 +41,3 @@ jobs:
 
       - name: Test
         run: yarn test
-
-  prettier:
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v2
-        with:
-          # Make sure the actual branch is checked out when running on pull requests
-          ref: ${{ github.head_ref }}
-
-      - name: Prettify code
-        uses: creyD/prettier_action@v4.1.1
-        with:
-          # This part is also where you can pass other options, for example:
-          prettier_options: --write .
-          only_changed: True
-          commit_message: "Clean: Prettified Code!"

.github/workflows/release.yml

@@ -55,12 +55,20 @@ jobs:
 
       - name: Release Structure
         run: |
+          # Remove unnecessary files
+          rm -rf ./.git ./.github ./__tests__ ./docs ./src
+          rm -rf ./.gitattributes ./.gitignore ./.prettierignore ./.prettierrc.json
+          rm -rf ./package.json ./yarn.lock ./waterfox.sh
+          rm -rf ./CODE_OF_CONDUCT.md ./CONTRIBUTING.md ./README.org
+
+          # Move to ./chrome/
           mkdir -v chrome
 
           shopt -s extglob
-          mv -v !(chrome|user.js|install.sh) chrome/
+          mv -v !(chrome|CREDITS|LICENSE|user.js|install.sh|install.ps1) chrome/
 
-          zip -rv ${{ matrix.name }}.zip chrome user.js install.sh
+          # Zip files
+          zip -rv ${{ matrix.name }}.zip chrome CREDITS LICENSE user.js install.sh install.ps1
 
       - uses: softprops/action-gh-release@v1 # actions/create-release, actions/upload-release-asset is deprecated
         if: startsWith(github.ref, 'refs/tags/')

.gitignore

@@ -0,0 +1,130 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next
+out
+build
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Zero install
+# .pnp.* # If not zero install
+.yarn/*
+!.yarn/cache
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+
+# Turborepo
+.turbo
+
+# misc
+.DS_Store
+*.pem

.prettierignore

@@ -5,7 +5,7 @@
 # User.js
 user.js
 
-# Prettier error exeption
+# Prettier error exception
 src/utils/_each.scss
 # [error] src/utils/_each.scss: SyntaxError: CssSyntaxError: At-rule without name (28:7)
 # [error]   26 |         }

CONTRIBUTING.md

@@ -90,7 +90,7 @@ Even if you copy the code snippet, it is recommended that you leave a link.
 
 **FAQ**
 
-If you have any questions about other licenses, please see [Moailla's MPL 2.0 FAQ](https://www.mozilla.org/en-US/MPL/2.0/FAQ/).
+If you have any questions about other licenses, please see [Mozilla's MPL 2.0 FAQ](https://www.mozilla.org/en-US/MPL/2.0/FAQ/).
 
 
 ## References

CREDITS

@@ -19,9 +19,23 @@ N: Yunsup Sim
 E: pedogunu@gmail.com
 W: https://ethansup.net
 
+----------
+    Sponsors
+
+N: Jani Haiko
+E: haiko.jani@gmail.com
+W: https://github.com/ojaha065
+
+N: nikkehtine
+E: nikkehtine@int.pl
+W: https://github.com/nikkehtine
+
 ----------
     Contributors
 
+N: 2641a40fd44383320adde4b027a1d0b03bd550
+W: https://github.com/2641a40fd44383320adde4b027a1d0b03bd550
+
 N: 7k5x
 E: 7k5xlp0onfire@gmail.com
 W: https://github.com/7k5x
@@ -30,6 +44,9 @@ N: Ajith-stark
 E: ajith.kum.12342@gmail.com
 W: https://github.com/Ajith-stark
 
+N: akay
+W: https://github.com/akay
+
 N: Andmagdo
 W: https://github.com/andmagdo
 
@@ -89,6 +106,9 @@ N: Roel
 E: Nyubis@gmail.com
 W: https://github.com/Nyubis
 
+N: roland-rollo
+W: https://github.com/roland-rollo
+
 N: SanderTheDragon
 E: sanderthedragon@zoho.com
 W: https://gitlab.com/SanderTheDragon
@@ -126,6 +146,11 @@ W: https://gist.github.com/mmis1000/08d8de4bbe70c04423f0b966bcc286b1
 C: Copyright (c) 2021 Mmis1000 <mmis10002@gmail.com>
 L: MIT
 
+N: edge-frfox
+W: https://github.com/bmFtZQ/edge-frfox
+C: Copyright (c) 2021 bmFtZQ
+L: MIT
+
 N: Feather
 W: https://github.com/feathericons/feather
 C: Copyright (c) 2013-2017 Cole Bemis
@@ -216,3 +241,8 @@ N: Waterfox
 W: https://github.com/WaterfoxCo/Waterfox
 C: Copyright (c) 2012 Waterfox Limited
 L: MPL 2.0
+
+N: WaveFox
+W: https://github.com/QNetITQ/WaveFox
+C: Copyright (c) 2021 QNetITQ
+L: MIT

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=.
 
 -----
 
@@ -39,8 +39,8 @@ Some settings [[https://github.com/black7375/Firefox-UI-Fix/wiki/Options#using-u
   Lepton's photon styled is preserve Photon's feeling while keep [[https://github.com/black7375/Firefox-UI-Fix][Original Lepton]].'s strengths.
 
   /Disclaimer:/ It works on *Firefox 89* and above!!
-  | *Wiki*             |             |         |                               |      |
+  | *Wiki*             |             |          |         |                               |      |                      |
-  | [[https://github.com/black7375/Firefox-UI-Fix/wiki/Installation-Guide][Installation Guide]] | [[https://github.com/black7375/Firefox-UI-Fix/wiki/Screenshots][Screenshots]] | [[https://github.com/black7375/Firefox-UI-Fix/wiki/Options][Options]] | [[https://github.com/black7375/Firefox-UI-Fix/wiki/Compatibility-Issues-Solution][Compatibility Issues Solution]] | [[https://github.com/black7375/Firefox-UI-Fix/wiki/Tips][Tips]] |
+  | [[https://github.com/black7375/Firefox-UI-Fix/wiki/Installation-Guide][Installation Guide]] | [[https://github.com/black7375/Firefox-UI-Fix/wiki/Screenshots][Screenshots]] | [[https://github.com/black7375/Firefox-UI-Fix/wiki/Tutorial][Tutorial]] | [[https://github.com/black7375/Firefox-UI-Fix/wiki/Options][Options]] | [[https://github.com/black7375/Firefox-UI-Fix/wiki/Compatibility-Issues-Solution][Compatibility Issues Solution]] | [[https://github.com/black7375/Firefox-UI-Fix/wiki/Tips][Tips]] | [[https://github.com/black7375/Firefox-UI-Fix/wiki/Show-Off-Your-Config][Show Off Your Config]] |
 
   [[https://user-images.githubusercontent.com/25581533/120091976-41ea4e00-c0ff-11eb-88ca-a204cfcebe72.png]]
 
@@ -52,10 +52,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: like Photon
     - Context Menu
@@ -68,13 +66,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): like Photon
+      - Connect with toolbar (buttons like tabs): like Photon
     - Selected:
       - Context Line: like Photon
       - Bottom Rounding: Natural
@@ -100,7 +98,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*
@@ -118,9 +116,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
@@ -135,8 +133,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

__tests__/_has.test.scss

@@ -0,0 +1,34 @@
+@use "true" as *;
+@use "example" as *;
+@use "../src/utils/has" as *;
+
+@include test-module("`:has()` selector test [mix]") {
+  @include test("exist `:has()`") {
+    @include assert {
+      @include output {
+        @include Has {
+          @include example;
+        }
+      }
+      @include expect {
+        @supports selector(:has(a)) {
+          @include example;
+        }
+      }
+    }
+  }
+  @include test("don't exist `:has()`") {
+    @include assert {
+      @include output {
+        @include NotHas {
+          @include example;
+        }
+      }
+      @include expect {
+        @supports not selector(:has(a)) {
+          @include example;
+        }
+      }
+    }
+  }
+}

__tests__/accent_color.test.scss

@@ -59,4 +59,28 @@
       }
     }
   }
+  @include test("Highlight") {
+    @include assert {
+      @include output {
+        @include AccentColor("Highlight") {
+          body {
+            background-color: $accentColor;
+            color: $accentTextColor;
+          }
+        }
+      }
+      @include expect {
+        body {
+          background-color: AccentColor;
+          color: AccentColorText;
+        }
+        @supports -moz-bool-pref("userChrome.compatibility.accent_color") {
+          body {
+            background-color: Highlight;
+            color: HighlightText;
+          }
+        }
+      }
+    }
+  }
 }

__tests__/color_scheme.test.scss

@@ -1,4 +1,4 @@
-@use 'true' as *;
+@use "true" as *;
 @use "example" as *;
 @use "../src/utils/color_scheme";
 

__tests__/each.test.scss

@@ -1,4 +1,4 @@
-@use 'true' as *;
+@use "true" as *;
 @use "example" as *;
 @use "../src/utils/each";
 
@@ -68,7 +68,7 @@
   @include test("prefix custom option") {
     @include assert {
       @include output {
-        @include each.AtEach("supports", "userChrome.tab.photon", "-moz-bool-pref", ("seperator": " or ", "quoted": true)) {
+        @include each.AtEach("supports", "userChrome.tab.photon", "-moz-bool-pref", ("separator": " or ", "quoted": true)) {
           @include example;
         }
       }
@@ -84,7 +84,7 @@
     @include assert {
       @include output {
         $input: "userChrome.tab.photon" "userChrome.padding.photon";
-        @include each.AtEach("supports", $input, "-moz-bool-pref", ("seperator": " or ", "quoted": true)) {
+        @include each.AtEach("supports", $input, "-moz-bool-pref", ("separator": " or ", "quoted": true)) {
           @include example;
         }
       }

__tests__/list.test.scss

@@ -1,4 +1,4 @@
-@use 'true' as *;
+@use "true" as *;
 @use "../src/utils/list";
 
 // TODO: Need more tests..

__tests__/media.test.scss

@@ -1,4 +1,4 @@
-@use 'true' as *;
+@use "true" as *;
 @use "example" as *;
 @use "../src/utils/media";
 

__tests__/native_menu.test.scss

@@ -1,4 +1,4 @@
-@use 'true' as *;
+@use "true" as *;
 @use "example" as *;
 @use "../src/utils/native_menu";
 

__tests__/one_liner.test.scss

@@ -1,4 +1,4 @@
-@use 'true' as *;
+@use "true" as *;
 @use "example" as *;
 @use "../src/utils/one_liner";
 

__tests__/option.test.scss

@@ -1,4 +1,4 @@
-@use 'true' as *;
+@use "true" as *;
 @use "example" as *;
 @use "../src/utils/option";
 

__tests__/os.test.scss

@@ -1,4 +1,4 @@
-@use 'true' as *;
+@use "true" as *;
 @use "example" as *;
 @use "../src/utils/os" as *;
 

__tests__/theme.test.scss

@@ -1,4 +1,4 @@
-@use 'true' as *;
+@use "true" as *;
 @use "example" as *;
 @use "sass:selector";
 @use "../src/utils/theme";

docs/Omni_ja.md

@@ -15,14 +15,14 @@
 - [UDN: omni.ja (formerly omni.jar)](https://udn.realityripple.com/docs/Mozilla/About_omni.ja_(formerly_omni.jar))
 - [Firefox 4: jar jar jar](https://web.archive.org/web/20161003115800/https://blog.mozilla.org/tglek/2010/09/14/firefox-4-jar-jar-jar/)
 - [Firefox's Optimized Zip Format: Reading Zip Files Really Quickly](https://taras.glek.net/post/optimized-zip-format/)
-- [How to Optimize or Deoptimize Firefox OMNI.JA File](https://www.raymond.cc/blog/edit-files-inside-firefox-4-omni-jar-to-auto-save-password/)
+- [How to Optimize or De-optimize Firefox OMNI.JA File](https://www.raymond.cc/blog/edit-files-inside-firefox-4-omni-jar-to-auto-save-password/)
 
 **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>*
@@ -73,7 +73,7 @@ See [EBNF(Extended Backus-Naur form)](https://en.wikipedia.org/wiki/Extended_Bac
 
 ## Default Config
 - [`modules/libpref/init/all.js`](https://github.com/mozilla/gecko-dev/blob/master/modules/libpref/init/all.js): all products
-- [`browser/app/profile/firefox.js`](https://github.com/mozilla/gecko-dev/blob/master/browser/app/profile/firefox.js): only firefox deskstop
+- [`browser/app/profile/firefox.js`](https://github.com/mozilla/gecko-dev/blob/master/browser/app/profile/firefox.js): only firefox desktop
 
 In release builds these are all put into [`omni.ja`](./Omni_ja.md).
 
@@ -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**
@@ -141,6 +141,9 @@ user_pref("general.smoothScroll.currentVelocityWeighting", "0.12"); // String
 **Basics**
 Customizations that cannot be done with add-on and [`User Custom CSS`](./README.md#user-custom-css), such as adding browser UI elements directly or changing default behavior, must use `Auto Config`.
 
+`.mjs`(ES6 Module) is also used in FF `v102` or above.
+- [Bug 1432901 - Prototype loading ES6 Module as JSM](https://bugzilla.mozilla.org/show_bug.cgi?id=1432901)
+
 **How to**
 ```javascript
 pref("general.config.filename", "config.js"); // alternative to "firefox.cfg", for using highlight

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 powersehll
+|- 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
@@ -47,7 +47,7 @@ Icons are mainly [FirefoxUX/photon-icons](https://github.com/FirefoxUX/photon-ic
 or [microsoft/fluentui-system-icons](https://github.com/microsoft/fluentui-system-icons).  
 Although not yet used, [tabler/tabler-icons](https://github.com/tabler/tabler-icons) and [feathericons/feather](https://github.com/feathericons/feather) can also be referred to.
 
-You can see more in the issue, [Unify icon design langauge #213](https://github.com/black7375/Firefox-UI-Fix/issues/213).
+You can see more in the issue, [Unify icon design language #213](https://github.com/black7375/Firefox-UI-Fix/issues/213).
 
 ## Install Scripts
 ### Meta Info files
@@ -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

@@ -1,4 +1,4 @@
-# Develper Documents for Firefox Custom
+# Developer Documents for Firefox Custom
 
 <!-- markdown-toc start - Don't edit this section. Run M-x markdown-toc-refresh-toc -->
 **Table of Contents**
@@ -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
@@ -62,7 +62,7 @@ yarn build
 You can check test and css validate:
 ```shell
 ## test - When you make mixin or function
-# __tests__ direcory, You can also find out how to use internal utils.
+# __tests__ directory, You can also find out how to use internal utils.
 yarn test
 
 ## validate - Will be failed, this project uses non-standard features.
@@ -93,7 +93,7 @@ This is a rough guideline. (Not forced)
 ### Basics
 `userChrome.css` file is for browser UI, `userContent.css` file is for web contents.
 
-Unlike [User config](./Preference.md#user-config), they are located in `<FIREFPX_PROFILE>/chrome/`.
+Unlike [User config](./Preference.md#user-config), they are located in `<FIREFOX_PROFILE>/chrome/`.
 
 Start Guide:
 - [What is userChrome.css? What can it do?](https://www.userchrome.org/what-is-userchrome-css.html)

docs/Restrictions.md

@@ -6,7 +6,10 @@
   * [Cross Platform](#cross-platform)
   * [Firefox Version](#firefox-version)
   * [Side Effect](#side-effect)
-  * [`-moz-accent-color` Related](#-moz-accent-color-related)
+  * [RTL](#rtl)
+  * [`-moz-accent-color`](#-moz-accent-color)
+  * [Fork Browsers](#fork-browsers)
+  * [Add-ons](#add-ons)
 - [Internals](#internals)
   * [CSS Loading Order](#css-loading-order)
   * [DOM structure cannot be modified](#dom-structure-cannot-be-modified)
@@ -59,12 +62,9 @@ This project is using SCSS to make a [reusable compatible mixins](../src/utils).
 - `-moz-os-version` -> `-moz-platform` [#331](https://github.com/black7375/Firefox-UI-Fix/issues/331)
 - Breaking change with `-moz-accent-color`/`-moz-accent-color-foreground` -> `AccentColor`/`AccentColorText` [#433](https://github.com/black7375/Firefox-UI-Fix/issues/433)
 
-### `-moz-accent-color`
-
-I don't know the exact reason, but it can be a problem if it is not applied to [CSS Variable](https://developer.mozilla.org/en-US/docs/Web/CSS/var). [#437](https://github.com/black7375/Firefox-UI-Fix/issues/437)
-
 ### 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)
@@ -77,14 +77,59 @@ Info: `#nav-bar` is [`toolbar`](https://udn.realityripple.com/docs/Archive/Mozil
 
 Another `display: flex`'s side effect examples. [#368](https://github.com/black7375/Firefox-UI-Fix/issues/368) [#372](https://github.com/black7375/Firefox-UI-Fix/issues/372)
 
+### RTL
+
+It can be detected using [`:-moz-locale-dir(rtl)`](https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-locale-dir(rtl)) on the interface(chrome) and [`:dir(rtl)`](https://developer.mozilla.org/en-US/docs/Web/CSS/:dir) on the content.
+
+[`margin-inline`](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline) and [`padding-inline`](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline) works as desired, but [`background-position-x`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-position-x) and [`translateX()`](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateX) should use the opposite values.
+
+### `-moz-accent-color`
+
+I don't know the exact reason, but it can be a problem if it is not applied to [CSS Variable](https://developer.mozilla.org/en-US/docs/Web/CSS/var). [#437](https://github.com/black7375/Firefox-UI-Fix/issues/437)
+
+### 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.
+
+List of fork browsers supported by this project:
+- [Waterfox](https://www.waterfox.net/)
+- [LibreWolf](https://librewolf.net/)
+- [Tor Browser](https://www.torproject.org/download/)
+- [Pulse Browser](https://pulsebrowser.app/)
+- [Firedragon](https://dr460nf1r3.org/projects/firedragon/)
+- [Ghostery Broser](https://www.ghostery.com/dawn)
+
+### Add-ons
+
+**Web extentions**
+
+You can apply [Web extentions](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions)'s context menu icons.
+
+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).
+
+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/)
+
+**Legacy Addons**
+
+We should consider [Legacy addons](https://extensionworkshop.com/documentation/develop/porting-a-legacy-firefox-extension/), not web extentions.
+
+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)
+
+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(Autoconfig)](./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.
 
@@ -93,7 +138,7 @@ Many implementations using `::before`, `::after`.
 - [Dynamic Tab Separator](https://github.com/black7375/Firefox-UI-Fix/blob/36e9c94844fee2417662251cbd50c2b874d5b576/userChrome.css#L3394-L3457)
 - [Static Tab Separator](https://github.com/black7375/Firefox-UI-Fix/blob/0f78a73b856e1335954ecded93d377b85134bd61/userChrome.css#L3387-L3428)
 - [Picture In Picture Indicator](https://github.com/black7375/Firefox-UI-Fix/blob/36e9c94844fee2417662251cbd50c2b874d5b576/userChrome.css#L3716-L3753)
-- [Contaner Indicator](https://github.com/black7375/Firefox-UI-Fix/blob/36e9c94844fee2417662251cbd50c2b874d5b576/userChrome.css#L3754-L3852)
+- [Container Indicator](https://github.com/black7375/Firefox-UI-Fix/blob/36e9c94844fee2417662251cbd50c2b874d5b576/userChrome.css#L3754-L3852)
 
 For icons, [`list-style-image`](https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-image) and [`background-image`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-image) are available.
 
@@ -104,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)
@@ -116,42 +161,42 @@ 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.
 
-Onething bypass method is to declare [`var()`](https://developer.mozilla.org/en-US/docs/Web/CSS/var) to shadow root.
+One bypass method is to declare [`var()`](https://developer.mozilla.org/en-US/docs/Web/CSS/var) to shadow root.
 - [Scrollbutton Padding](https://github.com/black7375/Firefox-UI-Fix/blob/36e9c94844fee2417662251cbd50c2b874d5b576/userChrome.css#L2906-L2924)
 - [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/)
 - [Bug 1575507 - Shadow parts should work in user-origin stylesheets.](https://bugzilla.mozilla.org/show_bug.cgi?id=1575507)
 
 ### XUL
-Sometimes firefox can use [XUL](https://en.wikipedia.org/wiki/XUL) that have been written and binded with C++ for performance like a treeview of bookmarks.  
+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)
 
 Another case.  
-Like [`<toolbar align="end"></toolbar>`](https://udn.realityripple.com/docs/Archive/Mozilla/XUL/Attribute/align), [`attributes`](https://udn.realityripple.com/docs/Archive/Mozilla/XUL/Attribute) is set and CSS of same property may not be appplied. (Ex. [`box-align: start`](https://udn.realityripple.com/docs/Web/CSS/box-align))
+Like [`<toolbar align="end"></toolbar>`](https://udn.realityripple.com/docs/Archive/Mozilla/XUL/Attribute/align), [`attributes`](https://udn.realityripple.com/docs/Archive/Mozilla/XUL/Attribute) is set and CSS of same property may not be applied. (Ex. [`box-align: start`](https://udn.realityripple.com/docs/Web/CSS/box-align))
 
 ### 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/Rules.md

@@ -46,7 +46,7 @@ It comes from [#109](https://github.com/black7375/Firefox-UI-Fix/issues/109#issu
 Stable: Only bugfix, Documentation.
 - `master`: Common bugfix, documentation.
 - `photon-style`: Bugfix, documentation specified in `photon-style`.
-- `proton-sryle`: Bugfix, documentation specified in `proton-style`.
+- `proton-style`: Bugfix, documentation specified in `proton-style`.
 
 Development: New Features.
 - `dev`: Common new features.

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/)

icons/bookmark-multiple.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M9.037 0c-.599 0-1.13.358-1.351.914l-.395.994a1.457 1.457 0 0 1 1.156.117l.276-.697a.326.326 0 0 1 .314-.213.328.328 0 0 1 .313.213l1.28 3.215.483.352 3.453.222a.328.328 0 0 1 .301.235.325.325 0 0 1-.105.365l-.576.476a1.446 1.446 0 0 1 .441.653 1.446 1.446 0 0 1 .07.373l.776-.645a1.446 1.446 0 0 0 .455-1.568 1.446 1.446 0 0 0-1.29-1l-3.1-.201-1.151-2.89A1.445 1.445 0 0 0 9.037 0zM6.963 2.613c-.599 0-1.13.36-1.352.916L4.463 6.418l-3.102.201a1.447 1.447 0 0 0-1.289 1 1.444 1.444 0 0 0 .453 1.567l2.393 1.986-.768 3.012a1.446 1.446 0 0 0 .555 1.535c.255.186.554.279.854.279a1.455 1.455 0 0 0 .777-.225l2.627-1.662 2.627 1.662a1.444 1.444 0 0 0 1.63-.052 1.446 1.446 0 0 0 .555-1.535l-.767-3.012 2.39-1.986a1.446 1.446 0 0 0 .456-1.569 1.446 1.446 0 0 0-1.29-1l-3.101-.201-1.149-2.889a1.45 1.45 0 0 0-1.351-.916zm0 1.116a.328.328 0 0 1 .314.212L8.56 7.156l.482.352 3.453.222a.328.328 0 0 1 .299.235.325.325 0 0 1-.105.363l-2.665 2.211-.183.566.855 3.356a.328.328 0 0 1-.127.355.326.326 0 0 1-.38.014l-2.926-1.85h-.596L3.74 14.83a.324.324 0 0 1-.38-.014.325.325 0 0 1-.13-.355l.856-3.354-.184-.566-2.664-2.213a.325.325 0 0 1-.105-.363.327.327 0 0 1 .299-.233l3.455-.224.482-.35 1.28-3.217a.326.326 0 0 1 .314-.212z"/>
+</svg>

icons/edit-paste-go.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M7.432 0a2.5 2.5 0 0 0-2.38 2H3.999a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h3.9l3.33-3.172H5.437c-1.44-.002-1.766-2.065-.98-3.004A.995.995 0 0 1 4 9V5h5.537c.621-.353 1.442-.377 2.133.26L13 6.527V4a2 2 0 0 0-2-2H9.95a2.5 2.5 0 0 0-2.518-2zm.125 1a1.5 1.5 0 0 1 1.412 1.2 1 1 0 0 0 .98.8H11v1H4V3h1.05a1 1 0 0 0 .98-.8A1.5 1.5 0 0 1 7.556 1zM7.5 2c-.785 0 .5 1.285.5.5a.5.5 0 0 0-.5-.5zm-2 4c-.667 0-.667 1 0 1h3.18a1.488 1.488 0 0 1 0-1H5.5zm0 2c-.667 0-.667 1 0 1h2c.667 0 .667-1 0-1h-2z"/>
+  <path d="m15.798 10.678-4.136-4.137a.69.69 0 0 0-.975.975l2.96 2.96H5.658a.69.69 0 0 0 0 1.379h7.987l-2.96 2.96a.69.69 0 1 0 .976.975l4.136-4.137a.69.69 0 0 0 0-.975z"/>
+</svg>

icons/edit-paste-search.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M7.455-.002a2.5 2.5 0 0 0-.266.02A2.5 2.5 0 0 0 5.051 2H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h7a2 2 0 0 0 1.844-1.236l-1.623-1.616a5.17 5.17 0 0 1-2.666.752 5.17 5.17 0 0 1-5.17-5.17A5.17 5.17 0 0 1 4 6.31V5h.992a5.17 5.17 0 0 1 1.485-1H4V3h1.05a1 1 0 0 0 .98-.8 1.5 1.5 0 0 1 2.939 0 1 1 0 0 0 .98.8H11v1h-.36A5.17 5.17 0 0 1 13 6.09V4a2 2 0 0 0-2-2H9.95A2.5 2.5 0 0 0 7.454-.002zM7.5 2a.5.5 0 1 0 .5.5.5.5 0 0 0-.5-.5z"/>
+  <path d="m15.68 14.706-3.539-3.538a4.417 4.417 0 1 0-1.037 1.037l3.538 3.539a.734.734 0 0 0 1.038-1.038zm-7.123-3.15a2.935 2.935 0 1 1 2.935-2.935 2.935 2.935 0 0 1-2.935 2.935Z" style="stroke-width:.733799"/>
+</svg>

icons/error-malformed-url.svg

@@ -0,0 +1,61 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300">
+  <defs>
+    <linearGradient id="a" x1="-300.021" y1="-272.736" x2="547.138" y2="574.423" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#ccfbff"/>
+      <stop offset="1" stop-color="#c9e4ff"/>
+    </linearGradient>
+    <linearGradient id="b" x1="-18.672" y1="23.78" x2="279.805" y2="322.256" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#00c8d7"/>
+      <stop offset="1" stop-color="#0a84ff"/>
+    </linearGradient>
+  </defs>
+  <path d="M73.275 165.84l63.117-26.74a1 1 0 0 0-.78-1.842L72.494 164a1 1 0 0 0 .78 1.842z" fill="#eaeaee"/>
+  <path d="M110.05 144.74l15.834-6.708a.5.5 0 1 0-.39-.921l-15.834 6.708a.5.5 0 0 0 .39.921z" fill="#eaeaee"/>
+  <path d="M59.35 176.038a.5.5 0 0 1 .265-.655l2.762-1.17a.5.5 0 1 1 .39.921l-2.762 1.17a.5.5 0 0 1-.655-.266zm10.128-4.291a.5.5 0 0 1 .265-.655l11.049-4.681a.5.5 0 1 1 .39.921l-11.049 4.681a.5.5 0 0 1-.654-.266zm19.336-8.192a.5.5 0 0 1 .265-.655l.921-.39a.5.5 0 1 1 .39.921l-.921.39a.5.5 0 0 1-.654-.266zm4.6-1.951a.5.5 0 0 1 .265-.655l2.762-1.17a.5.5 0 1 1 .39.921l-2.762 1.17a.5.5 0 0 1-.65-.27zm10.128-4.291a.5.5 0 0 1 .265-.655l11.049-4.681a.5.5 0 0 1 .39.921l-11.046 4.68a.5.5 0 0 1-.653-.265z" fill="#eaeaee"/>
+  <path d="M103.245 194.26L208.809 161a1 1 0 0 0-.6-1.908l-105.565 33.26a1 1 0 1 0 .6 1.908z" fill="#eaeaee"/>
+  <path d="M116 185l26.482-8.343a.5.5 0 1 0-.3-.954l-26.482 8.342a.5.5 0 0 0 .3.954z" fill="#eaeaee"/>
+  <path d="M84.918 204.09a.5.5 0 0 1 .327-.627l11.445-3.606a.5.5 0 0 1 .3.954l-11.445 3.606a.5.5 0 0 1-.627-.327zm19.076-6.01a.5.5 0 0 1 .327-.627l2.861-.9a.5.5 0 1 1 .3.954l-2.861.9a.5.5 0 0 1-.627-.326zm6.677-2.1a.5.5 0 0 1 .327-.627l.954-.3a.5.5 0 1 1 .3.954l-.954.3a.5.5 0 0 1-.627-.33zm9.538-3a.5.5 0 0 1 .327-.627l11.445-3.606a.5.5 0 1 1 .3.954l-11.445 3.599a.5.5 0 0 1-.628-.327zm19.076-6.01a.5.5 0 0 1 .327-.627l2.861-.9a.5.5 0 1 1 .3.954l-2.861.9a.5.5 0 0 1-.628-.334zm6.677-2.1a.5.5 0 0 1 .327-.627l.954-.3a.5.5 0 1 1 .3.954l-.954.3a.5.5 0 0 1-.628-.337zm9.538-3a.5.5 0 0 1 .327-.627l11.445-3.606a.5.5 0 1 1 .3.954l-11.445 3.606a.5.5 0 0 1-.627-.342zm19.076-6.01a.5.5 0 0 1 .327-.627l2.861-.9a.5.5 0 0 1 .3.954l-2.861.9a.5.5 0 0 1-.629-.342zm6.677-2.1a.5.5 0 0 1 .327-.627l.954-.3a.5.5 0 1 1 .3.954l-.954.3a.5.5 0 0 1-.629-.345zm9.538-3a.5.5 0 0 1 .327-.627l11.445-3.606a.5.5 0 0 1 .3.954l-11.445 3.606a.5.5 0 0 1-.629-.35zm19.076-6.01a.5.5 0 0 1 .327-.627l2.861-.9a.5.5 0 0 1 .3.954l-2.861.9a.5.5 0 0 1-.629-.349zm6.677-2.1a.5.5 0 0 1 .327-.627l.954-.3a.5.5 0 0 1 .3.954l-.954.3a.5.5 0 0 1-.63-.352zm9.538-3a.5.5 0 0 1 .327-.627l11.445-3.606a.5.5 0 1 1 .3.954l-11.445 3.606a.5.5 0 0 1-.63-.357z" fill="#eaeaee"/>
+  <path d="M50.883 109.437L73.366 97.57s-15.334-12.008-1.472-21.924C84.256 66.8 96.745 77.71 96.745 77.71s-2.589-8.73 6.13-11.4c8.6-2.633 20.994 6.885 20.994 6.885l19.577-10.334" fill="#fff"/>
+  <path d="M141.872 58.947L136.085 62a.588.588 0 0 1-.549-1.04l5.788-3.055a.588.588 0 1 1 .549 1.04zm-15.152 8l-1.04.549a.588.588 0 0 1-.549-1.04l1.04-.549a.588.588 0 0 1 .549 1.04zM72.4 94.811l-1.674.884a.588.588 0 0 1-.549-1.04l.9-.478a24.222 24.222 0 0 1-.591-.543.588.588 0 1 1 .81-.853c.7.664 1.177 1.039 1.188 1.048a.588.588 0 0 1-.088.983zm-10 5.277l-12.485 6.59a.588.588 0 1 1-.549-1.04l12.485-6.59a.588.588 0 1 1 .549 1.04zm59.158-31.3a.588.588 0 0 1-.6-.026 45.206 45.206 0 0 0-3-1.776.588.588 0 1 1 .559-1.036 46.056 46.056 0 0 1 3.086 1.824.588.588 0 0 1-.045 1.014zM68.064 90.2a.588.588 0 0 1-.751-.176q-.348-.483-.681-1a.588.588 0 0 1 .993-.631c.208.328.423.643.642.946a.588.588 0 0 1-.133.821.666.666 0 0 1-.07.04zm25.892-16.6a.587.587 0 0 1-.6-.031c-.293-.2-.617-.4-.972-.62a.588.588 0 0 1 .611-1.006c.37.225.71.444 1.016.649a.588.588 0 0 1-.052 1.008zm15.815-10.047a.586.586 0 0 1-.405.053 14.722 14.722 0 0 0-7.557-.008 8.578 8.578 0 0 0-4.693 3.166.588.588 0 0 1-.966-.673 9.747 9.747 0 0 1 5.314-3.618 15.855 15.855 0 0 1 8.163-.013.588.588 0 0 1 .144 1.093zm-21.029 7.324a.587.587 0 0 1-.486.029 21.942 21.942 0 0 0-3.291-.988.588.588 0 0 1 .246-1.151 23.255 23.255 0 0 1 3.468 1.04.588.588 0 0 1 .063 1.07zm-23.055 8.291a.589.589 0 0 1-.827-.722 14.421 14.421 0 0 1 5.452-6.558 19.345 19.345 0 0 1 5.307-2.711.588.588 0 1 1 .361 1.123A18.263 18.263 0 0 0 71 72.844a13.284 13.284 0 0 0-5.031 6.006.59.59 0 0 1-.282.318z" fill="#eaeaee"/>
+  <path d="M144.627 62.6l-92.656 48.906a1.176 1.176 0 0 1-1.1-2.081l92.656-48.907a1.176 1.176 0 1 1 1.1 2.081z" fill="#fff"/>
+  <path d="M185.779 90.824l13.771 3.409s-1.925-10.7 7.531-9.678c8.434.909 9.583 10.091 9.583 10.091s2.165-4.6 6.788-2.471c4.558 2.1 6.186 10.666 6.186 10.666l11.991 2.968" fill="#fff"/>
+  <path d="M200.337 92.789l-13.752-3.4a.59.59 0 0 1 .284-1.146l13.752 3.4a.59.59 0 0 1-.284 1.146zm42.412 10.311l-.529-.131a.59.59 0 1 1 .284-1.146l.529.131a.59.59 0 0 1-.284 1.146zm-5.113-1.266l-3.438-.851a.59.59 0 1 1 .284-1.146l3.438.851a.59.59 0 0 1-.284 1.146zm-20.166-8.627a.614.614 0 0 1-.445-.506l-.035-.222a.589.589 0 0 1 .4-.662 5.483 5.483 0 0 1 6-2.637 7.111 7.111 0 0 1 1.259.447 10.622 10.622 0 0 1 4.381 4.221.591.591 0 0 1-1 .626 9.484 9.484 0 0 0-3.872-3.774 5.935 5.935 0 0 0-1.05-.374c-3.3-.818-4.891 2.422-4.957 2.562a.592.592 0 0 1-.681.319zm-14.675-9.061a.591.591 0 0 1-.2-1.053 6.8 6.8 0 0 1 3.628-1.19.591.591 0 0 1 .07 1.179 5.632 5.632 0 0 0-3.009.97.589.589 0 0 1-.489.094zm9 .181a.6.6 0 0 1-.146-.057 9.055 9.055 0 0 0-1-.478.59.59 0 0 1-.324-.769.6.6 0 0 1 .769-.325 10.36 10.36 0 0 1 1.128.54.59.59 0 0 1-.428 1.089z" fill="#eaeaee"/>
+  <path d="M242.217 107.236l-56.755-14.049a1.181 1.181 0 1 1 .567-2.292l56.755 14.049a1.181 1.181 0 0 1-.567 2.292z" fill="#fff"/>
+  <ellipse cx="155.535" cy="245.952" rx="7.463" ry="43.55" transform="rotate(-86.464 155.535 245.951)" fill="#eaeaee"/>
+  <path d="M112.695 226.207l-64.217-18.684a1 1 0 1 0-.559 1.92l64.217 18.684a1 1 0 1 0 .559-1.92z" fill="#eaeaee"/>
+  <path d="M243.246 226.609L178.5 209.394a1 1 0 0 0-.514 1.933l64.751 17.215a1 1 0 1 0 .514-1.933z" fill="#eaeaee"/>
+  <path d="M146.467 240.275a.789.789 0 0 0 .166-.037.82.82 0 0 1-.205.045z" fill="#fff"/>
+  <g fill="#fff">
+    <path d="M179.037 101.776l-.121-.547a12.937 12.937 0 0 0-.4-1.386 12.75 12.75 0 0 0-22.367-3.36l-4.583-.2a5 5 0 0 0-4.02-2.981 5 5 0 0 0-1.409-1.736l-.987 5.022-.259 1.327 1.261-.689 2.337-1.286.866 3.905 8.492.371.509-.8a9.751 9.751 0 0 1 16.444 10.478l-1.117 1.753a166 166 0 0 1 5.9 23.121c.32-.012 11.494 70.842 11.421 75.734a61.9 61.9 0 0 1-.1 10.1c-.433 3.64-1.661 13.195-5.4 14.023a2.76 2.76 0 0 1-1.855-.234c-.957-.484-1.864-1.833-3.817-11.386a123 123 0 0 1-15.17 4.294 149.57 149.57 0 0 1-17.448 2.843c2.283 9.563 1.761 10.211 1.121 11.019a2.76 2.76 0 0 1-1.582 1c-3.739.829-8.634-6.281-10.574-9.446a46.87 46.87 0 0 1-2.769-5.378c-2.744-3.417-5.519-2.72-2.775.881a47.78 47.78 0 0 0 2.805 5.4 38.26 38.26 0 0 0 6.116 7.863c2.261 2.07 4.879 3.528 7.652 2.913a5.81 5.81 0 0 0 3.292-2.061c.926-1.229 1.334-2.436 1.126-4.9a43.46 43.46 0 0 0-.916-5.379c4.453-.567 9.452-1.439 14.4-2.536 3.437-.762 7.923-1.869 12.292-3.277A61.92 61.92 0 0 0 179 232.33c.863 2.369 1.735 4.03 3.085 4.714a5.017 5.017 0 0 0 3.538.655c2.812-.623 4.751-1.742 6.522-6.337a46.05 46.05 0 0 0 1.841-10.27 75.3 75.3 0 0 0-.13-11.375c.029-4.493-.48-7.184-.945-13.441-1.184-16.126-9.59-59.447-11.018-64.876a168.439 168.439 0 0 0-5.141-20.053l.342-.537a12.8 12.8 0 0 0 1.475-3.236c.1-.361.189-.718.262-1.082a12.68 12.68 0 0 0 .206-4.716z"/>
+    <path d="M134.237 228.656l-6.947-14.593c-1.686-6.992-20.874-79.082-21.813-86.213l-3.447-2.2a9.76 9.76 0 0 1 10.489-16.449l2.087 1.33c4.834-2.638 12.315-6.642 15.256-7.744 3.252-1.223 9.874-6.285 12.141-8.119L146 91.43c-.11-.078-.209-.158-.317-.227a5 5 0 0 0-5.729.4c-3.239 2.623-8.884 6.732-11.307 7.627-2.713 1.021-8.725 4.167-14.083 7.075l-.6-.38a12.76 12.76 0 1 0-13.679 21.468l2.254 1.436c.592 4.611 14.794 90.939 28.1 99.384z"/>
+    <path d="M186.722 176.206s10.389-4.558 15.3-2.655c3.46 1.339 7.075 4.468 9.434 12.129s2.346 13.664-1.921 16.234-9.314 1.9-10.178-.979c-.621-2.067-2.547-9.158-2.547-9.158s-1.255-.941-6.281 1.683z"/>
+    <path d="M116.553 182.33s-16.275-1.34-19.879 3.447c-2.232 2.964-4.4 7.12-3.154 15.039s3.888 13.307 8.85 13.744 9.2-2.381 8.716-5.346c-.349-2.129-1.73-9.347-1.73-9.347s.135 1.219 11.44 2.024z"/>
+  </g>
+  <path d="M205.432 180.5c-3.039-4.414-6.895-5.465-18.936.241-3.035-15.577-8.491-43.6-8.527-43.761a260.987 260.987 0 0 0-.7-3.767l-.039-.176-.958-4.325-.113-.508-.361-1.63-.307-1.386-.314-1.416q-.216-.976-.5-1.937l-.206-.927q-.369-1.342-.756-2.67a5 5 0 0 0-.285-.961q-.305-1.008-.618-2c-.065-.293-.179-.575-.275-.871-.3-.957-.6-1.833-.924-2.735l1.623-2.8a7.778 7.778 0 0 0-13.12-8.359l-.448.7a12.79 12.79 0 0 1 7.84 4.408.5.5 0 0 1-.755.659 11.81 11.81 0 0 0-7.682-4.115l-.084.131-11.187-.495-.052-.234-.059.013-.576-2.6-4.955 2.737.067-.343-.192.1 1.014-5.131c-1.3 1.047-8.6 6.812-12.5 8.282-3.064 1.15-11.506 5.715-16.035 8.2-4.027 2.582-4.287 5.938-4.3 6.074a.5.5 0 0 1-.391.455l-.137.03a.5.5 0 0 1-.474-.52c-.035-.156.269-3.778 4.383-6.615l-2.111-1.345a7.778 7.778 0 0 0-8.359 13.12l3.817 2.432.463.287c.312 3.3 1.05 7.88 2.09 13.129a244.916 244.916 0 0 0 2.3 10.359l.182.82s.136 11.739 6.835 36.611c-13.88-.9-19.023.179-20.366 4.046-1.625 4.678.566 13.9 1.116 15.346a4 4 0 0 0 4.6 2.486 4.046 4.046 0 0 0 .557-.167c2.064-.782 1.925-2.583 1.145-4.648-1.047-2.768-.811-7.074-.755-9.09 2.342-1.09 8.613-.388 16.016.208a437.29 437.29 0 0 0 5.028 15.915c3.14 9.547 6.214 11.174 9.089 14.624a46.19 46.19 0 0 0 2.75 5.383c2.74 4.412 5.31 7.181 7.025 8.174l.357.177.091.041.277.092.13.033.2.037.156-.035.137-.03a.821.821 0 0 0 .205-.045l.059-.013a.781.781 0 0 0 .214-.191c.465-.584-.541-5.4-1.791-10.532a17.821 17.821 0 0 1-5.563-1.625.5.5 0 1 1 .446-.9 17.649 17.649 0 0 0 4.866 1.482c2.018-.14 4.231-.364 6.637-.693l.185-.041 2.114-.3.989-.158 1.423-.234 1.45-.25.976-.216 1.836-.356.586-.13 2.119-.47.312-.069a115.067 115.067 0 0 0 17.231-4.884c2.187-1.13 5.312-3.021 5.347-3.049a.5.5 0 0 1 .518.858c-.136.081-2.713 1.625-4.879 2.8 1.044 5.218 2.365 11.073 3.045 11.414a.77.77 0 0 0 .476.069l.049-.011.215-.048.088-.019.205-.138.087-.07.2-.2.09-.1.216-.273.078-.109.228-.358.046-.072a15.559 15.559 0 0 0 1.319-3.293l-.019-.088.221-.807.033-.13.215-.877-.022-.1c.072-.323.143-.646.211-.989.213-1.071 1.234-3.087.359-4.558a61.5 61.5 0 0 0 .075-9.829l-.015-.068-.033-.658c.569-3.666-.534-19.041-.534-19.041l-.4-2.048c5.392-2.54 8.767-3.317 11.088-3.221.826 1.839 2.666 5.179 2.763 8.137.074 2.206.67 4.468 2.876 4.4a4 4 0 0 0 3.869-4.122c-.047-1.53-.432-9.45-3.24-13.53z" fill="url(#a)"/>
+  <g fill="#f9f9fa">
+    <path d="M120.69 115.886c-2.232 1.282-7.4 4.415-7.3 9.164s2.239 19.146 3.2 20.184 16.5-.365 17.218-1.631-1.208-31.981-1.974-32.714-8.428 3.437-11.144 4.997z"/>
+    <path d="M173.771 187.946c-.254-1.838 4.982-9.811 7.446-13.441-2.179-10.881-6.769-31.937-7.541-34.944-1.738-10.523-4.47-21.185-8.722-28.908-2.181-3.961-12.142-6.956-23.757-5.16l-4.669 36.8s-.428 3.26-2.172 3.549c-1.431.237-13.05 3.558-17.183 4.745q.248.932.505 1.867c.248 1.63 4.281 18.045 7.083 28.711 4.165 2.817 11.809 8.193 12.283 10.016.429 1.652-2.666 8.234-4.839 12.552 2.917 7.157 5.781 12.57 7.815 14.158 12.135 9.6 40.827 2.219 43.492-11.964a69.862 69.862 0 0 0 .03-7.868c-3.884-3.376-9.553-8.541-9.771-10.113z"/>
+  </g>
+  <g fill="url(#b)">
+    <path d="M124.228 131.126a1.4 1.4 0 0 0 1.064-1.67l-.679-3.066a1.4 1.4 0 1 0-2.734.606l.679 3.066a1.4 1.4 0 0 0 1.67 1.064z"/>
+    <path d="M165.962 143.534a1.4 1.4 0 0 0 1.064-1.67l-.679-3.066a1.4 1.4 0 1 0-2.734.606l.679 3.066a1.4 1.4 0 0 0 1.67 1.064z"/>
+    <path d="M125.543 137.062a5.7 5.7 0 0 0 3.981-3.341 1 1 0 1 0-1.876-.7 3.72 3.72 0 0 1-2.548 2.091 3.67 3.67 0 0 1-3.193-.819 1 1 0 0 0-1.4 1.428 5.7 5.7 0 0 0 5.036 1.341z"/>
+    <path d="M167.278 149.47a5.7 5.7 0 0 0 3.991-3.343 1 1 0 0 0-1.866-.7 3.64 3.64 0 0 1-5.741 1.272 1 1 0 0 0-1.395 1.426 5.7 5.7 0 0 0 5.011 1.345z"/>
+    <path d="M156.452 156.752a6.476 6.476 0 0 1-.522.387 6.69 6.69 0 0 1 .8 1.377 4.69 4.69 0 0 1-.525 4.333 1 1 0 0 0 1.592 1.21 6.72 6.72 0 0 0 .808-6.321 7.62 7.62 0 0 0-.365-.762 4.47 4.47 0 0 0 1.118.081 5 5 0 0 0 3.889-2.108 1 1 0 0 0-1.693-1.061 3.06 3.06 0 0 1-2.335 1.181 4.41 4.41 0 0 1-1.548-.31 6.4 6.4 0 0 1-.921 1.814 1.579 1.579 0 0 1-.298.179z"/>
+    <path d="M155.906 157.107a6.476 6.476 0 0 0 .522-.387 1.58 1.58 0 0 0 .249-.184 6.4 6.4 0 0 0 .921-1.814 14.34 14.34 0 0 0 .973-5.9 2.88 2.88 0 0 0-1.181-2.149 1.75 1.75 0 0 0-1.792-.017c-2.144 1-6.864 6.325-7.348 10.764a1.52 1.52 0 0 0 .906 1.594c1.376.615 5.074-.928 6.75-1.907z"/>
+    <path d="M205.286 200.2a5.653 5.653 0 0 0 4.378-4.134c.93-3.7-1.4-15.212-7.182-18.87-5.91-3.741-18 3.543-19.94 4.564-.488.258-.789.725-.531 1.213a1 1 0 0 0 1.35.418c14.7-7.753 16.768-5.262 18.106-4.473 4.967 2.926 7.036 13.563 6.257 16.658a3.561 3.561 0 0 1-3.3 2.686.794.794 0 0 1-.858-.791c-1.144-9.775-3.335-12.139-3.582-12.377a1 1 0 0 0-.744-.28c-.358.018-2.956-.343-13.509 4.457a.97.97 0 0 0-.37 1.365 1.049 1.049 0 0 0 1.365.369c7.878-3.365 10.1-3.936 12.094-4.148.54.877 1.925 3.726 2.759 10.845a2.777 2.777 0 0 0 2.714 2.555 4.132 4.132 0 0 0 .993-.057z"/>
+    <path d="M122.9 161.253l-16.287 3.61a1 1 0 0 1-.433-1.953l16.287-3.61a1 1 0 0 1 .433 1.953z"/>
+    <path d="M124.115 166.721l-16.287 3.61a1 1 0 1 1-.433-1.953l16.287-3.61a1 1 0 1 1 .433 1.953z"/>
+    <path d="M125.219 171.7l-16.287 3.61a.5.5 0 1 1-.216-.976l16.284-3.61a.5.5 0 0 1 .216.976z"/>
+    <path d="M177.123 139.793a1 1 0 0 1-1.06-1.514l8.964-14.069a1 1 0 0 1 1.687 1.075l-8.964 14.069a1 1 0 0 1-.627.439z"/>
+    <path d="M105.051 211.452a5.653 5.653 0 0 1-5.63-2.134c-2.28-3.056-4.647-14.652-.62-20.181 3.171-4.352 22.929-3.128 25.11-2.93a1 1 0 0 1 .9 1.087 1.024 1.024 0 0 1-1.086.9c-22.257-.643-23.329 2.139-23.329 2.139-3.462 4.61-1.284 15.225.625 17.784a3.561 3.561 0 0 0 4.076 1.213.794.794 0 0 0 .488-1.06c-2.7-9.464-1.586-12.489-1.449-12.8a1 1 0 0 1 .58-.544c.337-.121 7.4-.753 19.966.848a1 1 0 1 1-.253 1.983c-10.344-1.318-16.621-1.676-18.541-1.106-.162 1.018-.346 4.18 1.62 11.072a2.777 2.777 0 0 1-1.524 3.4 4.132 4.132 0 0 1-.933.329z"/>
+    <path d="M154.954 133.172s2.432 4.544 3.463 4.542 1.742-2.279 4.785-3.524c3.272-1.339 5.033.538 6.124-.251s1.2-5.459.718-6.368-3.7-2.42-8.672-.654-6.905 5.347-6.418 6.255z"/>
+    <path d="M131.166 148.6a6.476 6.476 0 0 0 .643.1 1.58 1.58 0 0 0 .307.046 6.4 6.4 0 0 0 1.934-.631 14.34 14.34 0 0 0 4.857-3.481 2.88 2.88 0 0 0 .685-2.355 1.75 1.75 0 0 0-1.255-1.279c-2.225-.807-9.326-.381-12.807 2.416a1.52 1.52 0 0 0-.486 1.768c.538 1.397 4.244 2.916 6.122 3.416z"/>
+    <path d="M131.973 147.394s-.186 6.672 2.354 8.45"/>
+    <path d="M134.349 156.844a1 1 0 0 1-.595-.181c-2.9-2.028-2.8-8.559-2.781-9.3a.982.982 0 0 1 1.028-.972 1 1 0 0 1 .972 1.027c-.064 2.374.4 6.536 1.929 7.6a1 1 0 0 1-.553 1.819z"/>
+    <path d="M191.146 210.564c-.657-8.673-1.389-15.793-2.2-22.113a70.69 70.69 0 0 0-1.943.918c.927 6.929 1.676 13.949 2.144 21.2l.015.068a61.494 61.494 0 0 1-.075 9.829c-.254 3.16-.151 3.467-.359 4.558-.067.343-.139.666-.211.989l.022.1-.215.877-.033.13-.221.807.019.088a15.562 15.562 0 0 1-1.319 3.293l-.046.072-.228.358-.078.109-.216.273-.09.1-.2.2-.087.07-.205.138-.088.019-.215.048-.049.011a.77.77 0 0 1-.476-.069c-.67-.343-2-6.187-3.045-11.414 2.134-1.139 4.734-2.719 4.879-2.8a.5.5 0 1 0-.518-.858s-3.162 1.909-5.347 3.049l-.156.035a113.632 113.632 0 0 1-16.147 4.695l-1.25.277-2.119.47-.586.13-1.837.356-.976.216-1.45.25-1.423.233-.989.158-2.114.3-.185.041c-2.4.326-4.649.559-6.637.693a17.65 17.65 0 0 1-4.866-1.482.5.5 0 1 0-.446.9 17.821 17.821 0 0 0 5.563 1.625c1.25 5.131 2.256 9.948 1.791 10.532a.769.769 0 0 1-.224.193l-.1.022a.784.784 0 0 1-.166.037l-.137.03-.156.035-.2-.037-.13-.033-.276-.092-.091-.041-.357-.177c-1.723-.98-4.285-3.762-7.025-8.174a46.184 46.184 0 0 1-2.75-5.383c-2.877-3.46-6.6-10.108-9.711-19.642q-1.77-5.725-3.244-10.808c-.206-.022-.41-.043-.606-.059-.655-.052-1.3-.1-1.936-.157 4.495 15.768 9.369 28.443 13.727 31.643a46.869 46.869 0 0 0 2.769 5.378c1.93 3.116 6.835 10.274 10.574 9.446a2.76 2.76 0 0 0 1.582-1c.64-.808 1.16-1.466-1.121-11.019a149.565 149.565 0 0 0 17.448-2.843 123 123 0 0 0 15.17-4.294c1.953 9.554 2.86 10.9 3.817 11.386a2.76 2.76 0 0 0 1.855.234c3.739-.829 5.571-8.783 5.4-14.023a61.9 61.9 0 0 0 .1-10.101zm-79.172-59.54l-.182-.82-2.3-10.359c-1.052-5.257-1.793-9.845-2.11-13.124l-.441-.281-3.817-2.432a7.778 7.778 0 1 1 8.359-13.12l2.111 1.345c-4.114 2.837-4.368 6.448-4.383 6.615a.5.5 0 0 0 .474.52l.137-.03a.5.5 0 0 0 .391-.455c-.032-.146.249-3.5 4.3-6.074 4.568-2.5 12.973-7.044 16.035-8.2 3.885-1.465 11.18-7.23 12.5-8.282l.2-.167-1.02 5.194-.067.343 4.955-2.737.059-.013.63 2.841 11.181.492.084-.131a11.81 11.81 0 0 1 7.682 4.115.5.5 0 1 0 .755-.659 12.79 12.79 0 0 0-7.84-4.408l.448-.7a7.778 7.778 0 1 1 13.12 8.359l-1.634 2.564c.311.894.616 1.81.924 2.735.065.293.188.573.275.871q.3.957.618 2a5 5 0 0 0 .285.961q.386 1.328.756 2.67l.206.927q.216.976.5 1.938l.314 1.416.307 1.386.361 1.63.112.508.959 4.325.039.176c2.917 16.877 6.122 32.387 8.549 48.11a99.288 99.288 0 0 1 1.969-.924c-2.147-13.977-4.762-25.188-7.888-44.349a179.865 179.865 0 0 0-6.07-24.087l1.117-1.753a9.751 9.751 0 0 0-16.447-10.479l-.509.8-8.492-.371-.859-3.91-2.337 1.286-1.261.689.259-1.327.987-5.022.076-.4-.3.24-3.993 3.241c-2.342 1.82-8.958 6.861-12.167 8.094-2.941 1.1-10.422 5.106-15.256 7.744l-2.087-1.33a9.76 9.76 0 1 0-11.04 16.1q.269.185.55.351l3.447 2.2A571.373 571.373 0 0 0 117.6 187.6q1.175.069 2.441.158c-6.999-25.479-8.067-36.735-8.067-36.735z"/>
+  </g>
+</svg>

icons/filter-dismiss.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M15.94 6.144a4.537 4.537 0 1 1-9.074 0 4.537 4.537 0 0 1 9.074 0zm-5.895-1.942a.413.413 0 0 0-.584.584l1.359 1.358-1.36 1.358a.413.413 0 0 0 .584.583l1.358-1.358 1.358 1.358a.413.413 0 0 0 .583-.583l-1.358-1.358 1.358-1.358a.413.413 0 0 0-.583-.584l-1.358 1.359zm-2.069 6.067A5.392 5.392 0 0 1 6.884 9.03h-3.73a.619.619 0 0 0 0 1.238zM6.04 6.144c0-.426.05-.84.144-1.238H.68a.619.619 0 0 0 0 1.238zm2.063 7.012a.619.619 0 0 1 0 1.237H5.628a.619.619 0 0 1 0-1.237z"/>
+</svg>

icons/filter-reload.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M10.985 1.627a4.537 4.537 0 0 0-4.12 4.518 4.537 4.537 0 1 0 9.075 0 4.537 4.537 0 0 0-4.955-4.518zm.377 1.76a2.727 2.727 0 0 1 1.84.71l.572-.572a.196.196 0 0 1 .334.14V5.23l-.117.118h-1.567a.196.196 0 0 1-.138-.336l.568-.569a2.24 2.24 0 0 0-1.492-.566 2.258 2.258 0 0 0-2.256 2.256 2.258 2.258 0 0 0 2.256 2.256 2.247 2.247 0 0 0 2.246-2.037.25.25 0 0 1 .268-.221.246.246 0 0 1 .22.267 2.735 2.735 0 0 1-2.734 2.48 2.75 2.75 0 0 1-2.746-2.745 2.75 2.75 0 0 1 2.746-2.746zM.68 4.907a.62.62 0 0 0 0 1.238h5.36c0-.426.05-.84.144-1.239H.68zm2.475 4.122a.62.62 0 0 0 0 1.239l4.82.002a5.392 5.392 0 0 1-1.092-1.24H3.155zm2.472 4.127a.619.619 0 0 0 0 1.237h2.475a.619.619 0 0 0 0-1.237H5.627z"/>
+</svg>

icons/lock-closed.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M8 0a3.2 3.2 0 0 1 3.2 3.2v1.6h1.4a1.8 1.8 0 0 1 1.8 1.8v7.6a1.8 1.8 0 0 1-1.8 1.8H3.4a1.8 1.8 0 0 1-1.8-1.8V6.6a1.8 1.8 0 0 1 1.8-1.8h1.4V3.2A3.2 3.2 0 0 1 8 0Zm4.6 6H3.4a.6.6 0 0 0-.6.6v7.6a.6.6 0 0 0 .6.6h9.2a.6.6 0 0 0 .6-.6V6.6a.6.6 0 0 0-.6-.6ZM8 9.2a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4zm0-8a2 2 0 0 0-2 2v1.6h4V3.2a2 2 0 0 0-2-2Z"/>
+</svg>

icons/merge.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#212121" d="M0 3.789c0-.349.283-.632.632-.632h2.743c.838 0 1.64.333 2.233.925l2.484 2.485a2.74 2.74 0 0 0 1.936.801h3.816l-3.132-3.132a.632.632 0 1 1 .894-.894l4.21 4.211a.632.632 0 0 1 0 .894l-4.21 4.21a.631.631 0 1 1-.894-.893l3.132-3.132h-3.765a2.74 2.74 0 0 0-1.985.852L5.837 11.86a3.158 3.158 0 0 1-2.29.983H.632a.632.632 0 0 1 0-1.264h2.915c.52 0 1.016-.213 1.374-.59l2.257-2.376c.217-.228.458-.428.718-.597a4.004 4.004 0 0 1-.697-.556L4.715 4.976a1.895 1.895 0 0 0-1.34-.555H.632A.632.632 0 0 1 0 3.789Z" />
+</svg>

icons/new-tab-forward.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M4 3.192a2 2 0 0 0-2 2v4.585H1c-1.334 0-1.334 1.485 0 1.485h7v-.485a1 1 0 0 1 .872-.99h-5.64V7.34h.01V5.36a1.11 1.11 0 0 1 1.113-1.114h7.035a1.11 1.11 0 0 1 1.113 1.113v1.418h.496a1 1 0 0 1 1 1V5.192a2 2 0 0 0-2-2h-8z"/>
+  <path d="M8.695 10.604h6.186L12.528 8.25a.342.342 0 0 1 .484-.483L16 10.758v.376l-2.989 2.988a.34.34 0 0 1-.483 0 .343.343 0 0 1 0-.483l2.353-2.353H8.695a.341.341 0 0 1 0-.682z"/>
+</svg>

icons/new-tab-multiple.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M4.04 4.69a2 2 0 0 0-2 2v4.585h-1c-1.334 0-1.334 1.485 0 1.485h7v-.485a1 1 0 0 1 .872-.99h-5.64V8.838h.01v-1.98a1.11 1.11 0 0 1 1.113-1.114h7.035a1.11 1.11 0 0 1 1.113 1.113v1.418h.496a1 1 0 0 1 1 1V6.69a2 2 0 0 0-2-2h-8zm8.5 4.585c-.25 0-.5.167-.5.5v2.5h-2.5c-.668 0-.668 1 0 1h2.5v2.5c0 .667 1 .667 1 0v-2.5h2.5c.666 0 .666-1 0-1h-2.5v-2.5c0-.333-.25-.5-.5-.5z"/>
+  <path d="M12.5 2.721a3.5 3.5 0 0 1 3.5 3.5v2.5c0 .819-.393 1.545-1 2v-4.5a2.5 2.5 0 0 0-2.5-2.5H3c.456-.606 1.182-1 2-1z"/>
+</svg>

icons/new-tab-skip-forward.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M16 .655a.632.632 0 0 0-1.263 0v2.863C13.765 2.35 12.506 1.36 10.924.87a9.419 9.419 0 0 0-6.091.162C2.883 1.758 1.04 3.23.078 4.984a.632.632 0 1 0 1.107.607c.796-1.45 2.38-2.74 4.088-3.375a8.156 8.156 0 0 1 5.277-.139c1.433.444 2.586 1.401 3.477 2.578h-3.29a.632.632 0 0 0 0 1.264h4.631A.632.632 0 0 0 16 5.287zM4.037 6.939a2 2 0 0 0-2 2v4.089H.998c-1.332.002-1.332 1.527 0 1.527h14c1.335.002 1.335-1.527 0-1.527v.002h-1.3V8.938a2 2 0 0 0-2-2zm.407 1.065h6.818a1.11 1.11 0 0 1 1.113 1.113v3.913H3.33V9.117a1.11 1.11 0 0 1 1.114-1.113z"/>
+</svg>

icons/notebook-subsection.svg

@@ -1,4 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg">
-  <path d="M12.5 3A3.5 3.5 0 0 1 16 6.5V9c0 .818-.393 1.544-1 2V6.5A2.5 2.5 0 0 0 12.5 4H3c.456-.607 1.182-1 2-1h7.5Z"/>
-  <path d="M15.995 12.432 16 12.5c0 .253-.226.462-.519.495L15.4 13H.6c-.331 0-.6-.224-.6-.5 0-.253.226-.462.519-.495L.6 12H1V7a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v5h1.4c.304 0 .555.188.595.432ZM13 7a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v5h11V7Z"/>
-</svg>

icons/panelarrow-vertical-reverse.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="10">
+  <path fill="context-stroke" d="m0 0 10 10L20 0Z"/>
+  <path fill="context-fill" d="m1 0 9 9 9-9z"/>
+</svg>

icons/panelarrow-vertical.svg

@@ -0,0 +1,7 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="10">
+  <path fill="context-stroke" d="M 0,10 L 10,0 20,10 z"/>
+  <path fill="context-fill" d="M 1,10 L 10,1 19,10 z"/>
+</svg>

icons/reload-auto.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M8.366 0a.475.475 0 0 0-.474.48v1.967l-.016.105v.09c-3.62.074-6.543 3.04-6.543 6.677a6.689 6.689 0 0 0 6.68 6.68 6.652 6.652 0 0 0 6.652-6.033.599.599 0 0 0-.538-.651.604.604 0 0 0-.65.536 5.466 5.466 0 0 1-5.464 4.955 5.493 5.493 0 0 1-5.487-5.487A5.49 5.49 0 0 1 7.89 3.835v1.762c0 .426.515.64.815.339L11.4 3.242v-.405L8.707.14a.469.469 0 0 0-.34-.14Z"/>
+  <path d="m7.554 11.454-2.29-2.29c-.552-.581.29-1.424.87-.872l1.767 1.766 3.405-3.407a.617.617 0 0 1 .872.872L8.25 11.45z"/>
+</svg>

icons/shield-task.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M14.6 2.4c-2.13 0-4.206-.754-6.24-2.28a.6.6 0 0 0-.72 0C5.606 1.646 3.53 2.4 1.4 2.4a.6.6 0 0 0-.6.6v4.2c0 4 2.366 6.94 6.98 8.758a.6.6 0 0 0 .44 0C12.834 14.141 15.2 11.2 15.2 7.2V3a.6.6 0 0 0-.6-.6Zm-2.794 3.442-4.8 4.4a.6.6 0 0 1-.83-.018l-2-2a.6.6 0 1 1 .848-.848L6.618 8.97l4.376-4.012a.6.6 0 0 1 .812.884z"/>
+</svg>

icons/tab-bottom-corner-left-australis-clipped.svg

@@ -0,0 +1,3 @@
+<svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
+  <path fill="context-fill" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="47.7, 100" d="M30 0h-1.5C20.286.018 16.736 3.745 15 7.967l.045.105c.18.447.342.9.486 1.36.21.675.392 1.358.547 2.047.101.45.19.899.272 1.337.081.44.154.87.222 1.29.137.837.253 1.625.377 2.335.178 1.01.397 2.01.656 3.002.182.676.393 1.345.631 2.004a17.87 17.87 0 0 0 1.05 2.348c.29.525.612 1.03.966 1.514.344.463.722.9 1.13 1.306a10.525 10.525 0 0 0 1.79 1.414c.674.422 1.392.77 2.14 1.041a15.082 15.082 0 0 0 2.523.673c.47.083.942.148 1.417.195.245.024.494.045.748.062V0"/>
+</svg>

icons/tab-bottom-corner-left-australis.svg

@@ -0,0 +1,9 @@
+<svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <path id="tabCorner" fill="context-fill" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="46.5, 100" d="M28.5 0C14.55.03 14.046 10.757 13.05 16.442 11.56 24.942 8.125 29.452 0 30h30V0m0 0h-1.5"/>
+  </defs>
+  <clipPath id="svgClipPath" clipPathUnits="objectBoundingBox">
+    <use href="#tabCorner" x="-2.2" transform="scale(0.036, 0.0333)" />
+  </clipPath>
+  <use href="#tabCorner" />
+</svg>

icons/tab-bottom-corner-left-chrome-clipped.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="36" viewBox="0 0 18 36" xmlns="http://www.w3.org/2000/svg">
+  <path fill="context-fill" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="47 100" d="M18 0a9 9 0 0 0-7.571 4.135 9 9 0 0 0-.617 1.127 9 9 0 0 0-.72 2.457A9 9 0 0 0 9 9v18a9 9 0 0 0 4.135 7.571 9 9 0 0 0 1.127.617 9 9 0 0 0 2.457.72A9 9 0 0 0 18 36V0"/>
+</svg>

icons/tab-bottom-corner-left-chrome.svg

@@ -0,0 +1,9 @@
+<svg width="18" height="36" viewBox="0 0 18 36" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <path id="tabCorner" fill="context-fill" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="47 100" d="M18 0a9 9 0 0 0-7.571 4.135 9 9 0 0 0-.617 1.127 9 9 0 0 0-.72 2.457A9 9 0 0 0 9 9v18a9 9 0 0 1-4.135 7.571 9 9 0 0 1-1.127.617 9 9 0 0 1-2.457.72A9 9 0 0 1 0 36h18V0"/>
+  </defs>
+  <clipPath id="svgClipPath" clipPathUnits="objectBoundingBox">
+    <use href="#tabCorner" x="-2.5" transform="scale(0.065, 0.0277)" />
+  </clipPath>
+  <use href="#tabCorner" />
+</svg>

icons/tab-bottom-corner-left-chromeLegacy-clipped.svg

@@ -0,0 +1,3 @@
+<svg width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
+  <path fill="context-fill" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="59 100" d="M36 0h-9l-9 18 9 18h9V0"/>
+</svg>

icons/tab-bottom-corner-left-chromeLegacy.svg

@@ -0,0 +1,9 @@
+<svg width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <path id="tabCorner" fill="context-fill" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="59 100" d="M0 36h9L27 0h9v36z"/>
+  </defs>
+  <clipPath id="svgClipPath" clipPathUnits="objectBoundingBox">
+    <use href="#tabCorner" x="-2.5" transform="scale(0.0299, 0.0277)" />
+  </clipPath>
+  <use href="#tabCorner" />
+</svg>

icons/tab-bottom-corner-left-edge-clipped.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="32" viewBox="0 0 16 32" xmlns="http://www.w3.org/2000/svg">
+  <path fill="context-fill" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="44.5, 100" d="M16 0h-4a4 4 0 0 0-3.365 1.838 4 4 0 0 0-.473 1.035A4 4 0 0 0 8 4v24a4 4 0 0 0 1.838 3.365 4 4 0 0 0 1.035.473A4 4 0 0 0 12 32h4V0"/>
+</svg>

icons/tab-bottom-corner-left-edge.svg

@@ -0,0 +1,9 @@
+<svg width="16" height="32" viewBox="0 0 16 32" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <path id="tabCorner" fill="context-fill" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="37, 100" d="M12 0a4 4 0 0 0-3.365 1.838A4 4 0 0 0 8 4v24a4 4 0 0 1-1.38 3.023A4 4 0 0 1 4 32h12V0m0 0h-4"/>
+  </defs>
+  <clipPath id="svgClipPath" clipPathUnits="objectBoundingBox">
+    <use href="#tabCorner" x="-2.5" transform="scale(0.075, 0.0333)" />
+  </clipPath>
+  <use href="#tabCorner" />
+</svg>

icons/tab-bottom-corner-left-wave-clipped.svg

@@ -0,0 +1,3 @@
+<svg width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
+  <path fill="context-fill" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="60, 100" d="M36 0c-6 0-12 0-15 6-1.5 3-2.25 7.5-3 12 .188 1.125.375 2.25.574 3.352.1.55.202 1.096.309 1.632.107.536.219 1.063.336 1.578.117.516.24 1.021.37 1.51.131.49.268.963.415 1.42.146.457.301.898.467 1.317a14.336 14.336 0 0 0 .818 1.736 9.98 9.98 0 0 0 1.695 2.236 9.134 9.134 0 0 0 2.498 1.754c.302.147.61.278.926.397.316.118.639.224.967.318.328.094.66.176 1 .248.34.072.685.133 1.033.186.71.102 1.423.176 2.139.222.363.024.73.042 1.098.055.368.013.739.021 1.11.027C34.5 36 35.25 36 36 36V0"/>
+</svg>

icons/tab-bottom-corner-left-wave.svg

@@ -0,0 +1,9 @@
+<svg width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <path id="tabCorner" fill="context-fill" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="59.75 100" d="M 0,36 C 6,36 12.001,36 15.0005,30.0005 18,24.001 18,12.001 21.0005,6.0005 24.001,0 30,0 36,0 c 0,0 0,36 0,36 0,0 -36,0 -36,0 z"/>
+  </defs>
+  <clipPath id="svgClipPath" clipPathUnits="objectBoundingBox">
+    <use href="#tabCorner" x="-2.5" transform="scale(0.0299, 0.0277)" />
+  </clipPath>
+  <use href="#tabCorner" />
+</svg>

icons/tab-bottom-corner-right-australis-cilpped.svg

@@ -0,0 +1,3 @@
+<svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
+  <path fill="context-fill" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="47, 100" d="M0 0h1.5m0 0C9.714.018 13.264 3.745 15 7.967l-.045.105c-.18.447-.342.9-.486 1.36a26.38 26.38 0 0 0-.547 2.047c-.101.45-.19.899-.272 1.337-.08.44-.154.87-.222 1.29-.137.837-.253 1.625-.377 2.335a38.38 38.38 0 0 1-.305 1.547c-.109.5-.225.986-.351 1.455a25.149 25.149 0 0 1-.631 2.004 17.918 17.918 0 0 1-1.05 2.348 14.16 14.16 0 0 1-.966 1.514c-.344.463-.722.9-1.13 1.306a10.525 10.525 0 0 1-1.79 1.414c-.674.422-1.392.77-2.14 1.041a13.21 13.21 0 0 1-1.213.383c-.432.116-.87.212-1.31.29-.47.083-.942.148-1.417.195-.245.024-.494.045-.748.062V0"/>
+</svg>

icons/tab-bottom-corner-right-australis.svg

@@ -0,0 +1,9 @@
+<svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <path id="tabCorner" fill="context-fill" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="46.5, 100" d="M0 0h1.5m0 0c13.95.03 14.454 10.757 15.45 16.442C18.44 24.942 21.875 29.452 30 30H0V0"/>
+  </defs>
+  <clipPath id="svgClipPath" clipPathUnits="objectBoundingBox">
+    <use href="#tabCorner" transform="scale(0.036, 0.0333)" />
+  </clipPath>
+  <use href="#tabCorner" />
+</svg>

icons/tab-bottom-corner-right-chrome-clipped.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="36" viewBox="0 0 18 36" xmlns="http://www.w3.org/2000/svg">
+  <path fill="context-fill" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="47 100" d="M0 0a9 9 0 0 1 7.571 4.135 9 9 0 0 1 .617 1.127 9 9 0 0 1 .72 2.457A9 9 0 0 1 9 9v18a9 9 0 0 1-4.135 7.571 9 9 0 0 1-1.127.617 9 9 0 0 1-2.457.72A9 9 0 0 1 0 36V0"/>
+</svg>

icons/tab-bottom-corner-right-chrome.svg

@@ -0,0 +1,9 @@
+<svg width="18" height="36" viewBox="0 0 18 36" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <path id="tabCorner" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="47 100" fill="context-fill" d="M0 0a9 9 0 0 1 9 9v18a9 9 0 0 0 9 9H0V0"/>
+  </defs>
+  <clipPath id="svgClipPath" clipPathUnits="objectBoundingBox">
+    <use href="#tabCorner" transform="scale(0.065, 0.0277)" />
+  </clipPath>
+  <use href="#tabCorner" />
+</svg>

icons/tab-bottom-corner-right-chromeLegacy-clipped.svg

@@ -0,0 +1,3 @@
+<svg width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
+  <path fill="context-fill" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="59 100" d="M0 0h9l9 18-9 18H0V0"/>
+</svg>

icons/tab-bottom-corner-right-chromeLegacy.svg

@@ -0,0 +1,9 @@
+<svg width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <path id="tabCorner" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="59 100" fill="context-fill" d="M36 36h-9L9 0H0v36z"/>
+  </defs>
+  <clipPath id="svgClipPath" clipPathUnits="objectBoundingBox">
+    <use href="#tabCorner" transform="scale(0.0299, 0.0277)" />
+  </clipPath>
+  <use href="#tabCorner" />
+</svg>

icons/tab-bottom-corner-right-edge-clipped.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="32" viewBox="0 0 16 32" xmlns="http://www.w3.org/2000/svg">
+  <path fill="context-fill" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="44.5, 100" d="M0 0h4a4 4 0 0 1 3.365 1.838 4 4 0 0 1 .473 1.035A4 4 0 0 1 8 4v24a4 4 0 0 1-1.838 3.365 4 4 0 0 1-1.035.473A4 4 0 0 1 4 32H0V0"/>
+</svg>

icons/tab-bottom-corner-right-edge.svg

@@ -0,0 +1,9 @@
+<svg width="16" height="32" viewBox="0 0 16 32" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <path id="tabCorner" fill="context-fill" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="37, 100" d="M4 0a4 4 0 0 1 3.365 1.838A4 4 0 0 1 8 4v24a4 4 0 0 0 1.838 3.365A4 4 0 0 0 12 32H0V0m0 0h4"/>
+  </defs>
+  <clipPath id="svgClipPath" clipPathUnits="objectBoundingBox">
+    <use href="#tabCorner" transform="scale(0.075, 0.0333)" />
+  </clipPath>
+  <use href="#tabCorner" />
+</svg>

icons/tab-bottom-corner-right-wave-clipped.svg

@@ -0,0 +1,3 @@
+<svg width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
+  <path fill="context-fill" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="60, 100" d="M0 0c6 0 12 0 15 6 1.5 3 2.25 7.5 3 12-.188 1.125-.375 2.25-.574 3.352-.1.55-.202 1.096-.309 1.632a60.698 60.698 0 0 1-.336 1.578c-.117.516-.24 1.021-.37 1.51-.131.49-.268.963-.415 1.42a21.2 21.2 0 0 1-.467 1.317 14.336 14.336 0 0 1-.818 1.736 9.98 9.98 0 0 1-1.695 2.236 9.134 9.134 0 0 1-2.498 1.754c-.302.147-.61.278-.926.397-.316.118-.639.224-.967.318-.33.094-.664.177-1 .248-.34.072-.685.133-1.033.186a27.096 27.096 0 0 1-2.139.222c-.363.024-.73.042-1.098.055-.368.013-.739.021-1.11.027C1.5 36 .75 36 0 36V0"/>
+</svg>

icons/tab-bottom-corner-right-wave.svg

@@ -0,0 +1,9 @@
+<svg width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <path id="tabCorner" fill="context-fill" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="59.75 100" d="M 36,36 C 30,36 23.999,36 20.9995,30.0005 18,24.001 18,12.001 14.9995,6.0005 11.999,0 6,0 0,0 c 0,0 0,36 0,36 0,0 36,0 36,0 z"/>
+  </defs>
+  <clipPath id="svgClipPath" clipPathUnits="objectBoundingBox">
+    <use href="#tabCorner" transform="scale(0.0299, 0.0277)" />
+  </clipPath>
+  <use href="#tabCorner" />
+</svg>

icons/tab-copy.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M3.662 4.678a2 2 0 0 0-2 2v4.601H.998c-1.332.002-1.332 1.527 0 1.527h14c1.335.002 1.335-1.527 0-1.527v.002h-1V6.678a2 2 0 0 0-2-2zm.565 1.066h7.035a1.11 1.11 0 0 1 1.113 1.113v4.424H3.113V6.857a1.11 1.11 0 0 1 1.114-1.113z"/>
+  <path d="M12.5 2.721a3.5 3.5 0 0 1 3.5 3.5v2.5c0 .819-.393 1.545-1 2v-4.5a2.5 2.5 0 0 0-2.5-2.5H3c.456-.606 1.182-1 2-1z"/>
+</svg>

icons/tab-desktop-multiple-bottom.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg">
+  <path d="M3.207 2.4h1.207A1.4 1.4 0 0 1 5.8 1.2h6.4a2.6 2.6 0 0 1 2.6 2.6v6.4a1.4 1.4 0 0 1-1.2 1.386v1.206A2.6 2.6 0 0 0 16 10.2V3.8A3.8 3.8 0 0 0 12.2 0H5.8a2.6 2.6 0 0 0-2.593 2.4ZM0 5.8a2.6 2.6 0 0 1 2.6-2.6h7.6a2.6 2.6 0 0 1 2.6 2.6v7.6a2.6 2.6 0 0 1-2.6 2.6H2.6A2.6 2.6 0 0 1 0 13.4Zm2.6-1.4a1.4 1.4 0 0 0-1.4 1.4v5.8h4.6a1.8 1.8 0 0 1 1.8 1.8v1.4h2.6a1.4 1.4 0 0 0 1.4-1.4V5.8a1.4 1.4 0 0 0-1.4-1.4zm3.8 10.4v-1.4a.6.6 0 0 0-.6-.6H1.2v.6a1.4 1.4 0 0 0 1.4 1.4z"/>
+</svg>

icons/tab-unload.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M4 3a2 2 0 0 0-2 2v6H1a1 1 0 0 0 0 2h5.707a5.297 5.297 0 0 1-.049-.709 5.297 5.297 0 0 1 5.297-5.299A5.297 5.297 0 0 1 14 7.404V5a2 2 0 0 0-2-2Z"/>
+  <path d="M12.098 8.823c-1.423.007-2.729.726-3.408 1.879V9.497c0-.3-.487-.3-.487 0v2.245c0 .124.109.224.243.224h2.435a.225.225 0 0 0 0-.449H9.344a.413.413 0 0 0 .027-.038c1.137-2.817 5.659-2.062 5.659.94 0 3-4.522 3.756-5.659.939-.235-.544-1.121-.239-.912.314 1.104 2.711 5.056 3.162 6.843.781 1.786-2.381-.064-5.633-3.204-5.63Z"/>
+</svg>

icons/timer10.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg">
+  <path d="M7.024 1.951a6.636 6.636 0 0 1 6.538 5.5 3.34 3.34 0 0 0-1.184.037A5.465 5.465 0 0 0 1.56 8.585a5.463 5.463 0 0 0 5.854 5.45v1.173a6.634 6.634 0 1 1-.39-13.257zm.586 5.78V4.878l-.006-.08a.586.586 0 0 0-1.165.08V8.39l.005.07a1.36 1.36 0 0 1 .734-.585Zm4.993-5.691.064.047.904.752a.585.585 0 0 1-.684.947l-.065-.047-.904-.753a.585.585 0 0 1 .685-.946ZM8.78 0a.585.585 0 0 1 .08 1.165l-.08.006H5.268a.585.585 0 0 1-.08-1.166L5.269 0zm.343 8.306c.152.11.243.286.243.474v6.635a.585.585 0 0 1-1.17 0V9.593l-.401.133a.585.585 0 0 1-.37-1.11l1.17-.39a.585.585 0 0 1 .528.08zm1.414 2.426a2.537 2.537 0 0 1 5.073 0v2.731a2.537 2.537 0 0 1-5.073 0Zm2.536-1.366c-.754 0-1.366.611-1.366 1.366v2.731a1.366 1.366 0 1 0 2.732 0v-2.731c0-.755-.611-1.366-1.366-1.366z"/>
+</svg>

icons/toolbarButton-download.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg">
+  <path d="M9.709 7.344h-1.84a.477.477 0 0 0-.337.813l2.555 2.554a.477.477 0 0 0 .673 0l2.554-2.554c.3-.3.088-.813-.337-.813h-1.84V4.548h.002v-1.19h-.002v-.786H9.71v.785h-.003v1.19h.004v2.797z"/>
+  <path d="M13.714 3.357h-1.146v1.19h1.146c.329 0 .596.267.596.596v7.619a.595.595 0 0 1-.596.595H2.286a.595.595 0 0 1-.596-.595V3.238c0-.328.267-.595.596-.595h3.47a.6.6 0 0 1 .442.197l1.36 1.51A.593.593 0 0 0 8 4.548h.277v-1.19h-.012L7.082 2.042a1.79 1.79 0 0 0-1.328-.59H2.286C1.3 1.452.5 2.252.5 3.237v9.524c0 .985.801 1.786 1.786 1.786h11.428c.985 0 1.786-.801 1.786-1.786v-7.62c0-.984-.801-1.785-1.786-1.785z"/>
+</svg>

icons/weather-snowflake.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg">
+  <path d="M8 0c.312 0 .57.232.61.532l.005.083v2.746l1.782-1.565a.615.615 0 0 1 .813.924L8.615 5l-.001 2.384H11l2.28-2.594a.615.615 0 0 1 .796-.11l.073.055a.615.615 0 0 1 .11.795l-.054.073-1.566 1.78h2.745c.311 0 .569.232.61.532L16 8a.616.616 0 0 1-.532.61l-.083.005h-2.747l1.566 1.783a.615.615 0 0 1 .008.804l-.064.065a.615.615 0 0 1-.804.007l-.065-.063L11 8.615l-2.386-.001V11l2.597 2.28a.616.616 0 0 1 .11.796l-.054.073a.616.616 0 0 1-.796.111l-.073-.055-1.783-1.567-.001 2.747a.616.616 0 0 1-.532.61L7.997 16a.616.616 0 0 1-.61-.532l-.005-.083V12.64l-1.779 1.564a.615.615 0 0 1-.813-.924L7.382 11V8.615H5.18l-2.459 2.8a.615.615 0 0 1-.925-.813l1.746-1.987H.615a.616.616 0 0 1-.61-.531L0 8c0-.311.231-.569.532-.61l.083-.005H3.18L1.795 5.807a.615.615 0 0 1 .925-.811l2.096 2.388h2.567V4.998L4.79 2.718a.616.616 0 0 1-.11-.796l.055-.072a.616.616 0 0 1 .795-.111l.073.055 1.78 1.565.002-2.744c0-.283.191-.521.451-.593l.08-.016z"/>
+</svg>

install.ps1

@@ -31,7 +31,7 @@ Shows this help message
 
 .PARAMETER WhatIf
 Runs the installer without actioning any file copies/moves
-Equivelant to a dry-run
+Equivalent to a dry-run
 
 .EXAMPLE
 PS> .\Install.ps1 -u -f C:\Users\someone\ff-profiles

install.sh

@@ -67,7 +67,7 @@ mac_command_line_developer_tools() {
 
 check_git() {
   if ! [ -x "$(command -v git)" ]; then
-    if [ "${OSTYPE}" == "linux-gnu" ] || [ "${OSTYPE}" == "FreeBSD" ]; then
+    if [[ "${OSTYPE}" == "linux"* || "${OSTYPE}" == "FreeBSD" ]]; then
       pacapt_install
       sudo pacapt -S git
       pacapt_uninstall
@@ -185,8 +185,8 @@ write_file() {
 get_ini_section() {
   local filePath="$1"
 
-  local ouput=$(grep -E "^\[" "${filePath}" |sed -e "s/^\[//g" -e "s/\]$//g")
+  local output=$(grep -E "^\[" "${filePath}" |sed -e "s/^\[//g" -e "s/\]$//g")
-  echo "${ouput}"
+  echo "${output}"
 }
 get_ini_value() {
   local filePath="$1"

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/autohide/_back_button.scss

@@ -1,5 +1,5 @@
 #back-button[disabled="true"] {
-  margin-left: -36px !important;
+  margin-left: var(--uc-toolbarbutton-hide-size) !important;
   opacity: 0 !important;
   pointer-events: none;
 }

src/autohide/_bookmarkbar.scss

@@ -5,9 +5,13 @@
   will-change: margin-bottom, opacity;
 
   @include Option("userChrome.autohide.toolbar_overlap") {
-    &[collapsed="true"] {
+    @include NotOption("userChrome.autohide.toolbar_overlap.allow_layout_shift") {
-      visibility: visible !important;
+      @include NotHas {
-      max-height: unset !important;
+        &[collapsed="true"] {
+          visibility: visible !important;
+          max-height: unset !important;
+        }
+      }
     }
   }
 }
@@ -20,8 +24,8 @@
 @include Animate {
   #PersonalToolbar:not([customizing]) {
     //  --ext-theme-background-transition: background-color 0.1s cubic-bezier(.17,.67,.83,.67);
-    transition: margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
+    transition: margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
-                opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
+                opacity var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
                 min-height 170ms ease-out, max-height 170ms ease-out, var(--ext-theme-background-transition) !important;
   }
   #navigator-toolbox:is(:hover, :focus-within) #PersonalToolbar:not([customizing]) {

src/autohide/_common.scss

@@ -1,12 +1,34 @@
-@include Option("userChrome.autohide.tabbar", "userChrome.autohide.navbar", "userChrome.autohide.bookmarkbar", "userChrome.tabbar.one_liner") {
+:root {
+  --uc-autohide-toolbar-speed: 0.25s;
+  --uc-autohide-toolbar-delay: 600ms;
+}
+
+@include Option("userChrome.autohide.tabbar", "userChrome.autohide.navbar", "userChrome.autohide.bookmarkbar", "userChrome.tabbar.one_liner", "userChrome.tabbar.on_bottom.menubar_on_top", "userChrome.hidden.tabbar", "userChrome.navbar.as_sidebar") {
   :root {
-    --uc-tabbar-height: var(--tab-min-height); // calc((var(--tab-block-margin) * 2) + var(--tab-min-height));
+    --uc-tabbar-height: var(--uc-tabbar-height-default);
+    --uc-tabbar-height-default: var(--tab-min-height); // calc((var(--tab-block-margin) * 2) + var(--tab-min-height));
     --uc-tabbar-hide-height: calc(-1 * var(--uc-tabbar-height));
-    --uc-navbar-height: calc(16px + 2 * (var(--toolbarbutton-inner-padding) + var(--toolbarbutton-outer-padding)));
+
+    --uc-navbar-height: var(--uc-navbar-height-default);
+    --uc-navbar-height-default: calc(16px + 2 * (var(--toolbarbutton-inner-padding) + var(--toolbarbutton-outer-padding)));
     --uc-navbar-hide-height: calc(-1 * var(--uc-navbar-height));
-    --uc-bm-height: calc(20px + (2 * var(--bookmark-block-padding, 4px))); /* 20px = 16px + (2px * 2) [margin block] */
+
+    --uc-bm-height: var(--uc-bm-height-default);
+    --uc-bm-height-default: calc(20px + (2 * var(--bookmark-block-padding, 4px))); /* 20px = 16px + (2px * 2) [margin block] */
     --uc-bm-hide-height: calc(-1 * var(--uc-bm-height));
 
+    // Mac - None exist
+    // https://github.com/mozilla/gecko-dev/blob/92d3050ecbbdd077ffa4cb78e0dffc4bd5021109/browser/base/content/browser.css#L131
+    // https://github.com/mozilla/gecko-dev/blob/92d3050ecbbdd077ffa4cb78e0dffc4bd5021109/browser/themes/linux/browser.css#L327
+    // https://github.com/mozilla/gecko-dev/blob/92d3050ecbbdd077ffa4cb78e0dffc4bd5021109/browser/themes/windows/browser-aero.css#L14
+    // https://github.com/mozilla/gecko-dev/blob/92d3050ecbbdd077ffa4cb78e0dffc4bd5021109/browser/themes/windows/browser.css#L65
+    $_menubarPadding: 1px * 2; // menubar padding block 1px
+    $_menubarHeightDefault: 1rem + 0.3rem * 2; // text 1rem, menu padding 0.3em
+    --uc-titlebar-buttonbox-height: #{ 32px + $_menubarPadding };
+    --uc-menubar-height: 0px;
+    --uc-menubar-height-default: #{ calc($_menubarHeightDefault + $_menubarPadding) };
+    --uc-menubar-inner-height: #{ calc($_menubarHeightDefault - $_menubarPadding) };
+
     @include Option("userChrome.hidden.tabbar") {
       @include OneLinerNavbarContent() {
         --uc-tabbar-height: 0px;
@@ -16,18 +38,64 @@
       --uc-navbar-height: 0px;
     }
   }
+  @include Has {
+    :root {
+      &:not([tabsintitlebar]):has(#toolbar-menubar) {
+        --uc-menubar-height: var(--uc-menubar-height-default); // text 1rem, menu padding 0.3em
+      }
+
+      &[tabsintitlebar]:has(#toolbar-menubar[autohide="true"]) {
+        @include OS($linux) {
+          --uc-menubar-height: calc(var(--tab-min-height) + 2 * var(--tab-block-margin));
+        }
+        @include OS($win10) {
+          --uc-menubar-height: calc(var(--tab-min-height) - var(--tabs-navbar-shadow-size));
+        }
+        @include OS($win7, $win8) {
+          --uc-menubar-height: calc(var(--tab-min-height) + var(--tab-block-margin));
+        }
+      }
+      &[tabsintitlebar]:has(#toolbar-menubar[autohide="false"]) {
+        --uc-menubar-height: var(--uc-titlebar-buttonbox-height);
+      }
+
+      &:not([tabsintitlebar]),
+      &[tabsintitlebar] {
+        &:has(#toolbar-menubar[autohide="true"][inactive="true"]) {
+          --uc-menubar-height: 0px;
+        }
+      }
+    }
+
+    #navigator-toolbox:has(#PersonalToolbar[collapsed="true"]) {
+      --uc-bm-height: 0px;
+    }
+
+    @include Option("userChrome.navbar.as_sidebar") {
+      #navigator-toolbox:has(#PersonalToolbar[collapsed="false"]) #nav-bar {
+        --uc-bm-height: var(--uc-bm-height-default); // Re-calculate to force!!
+      }
+      @include Option("userChrome.autohide.bookmarkbar") {
+        #navigator-toolbox:has(#PersonalToolbar[collapsed="false"]):not(:hover) #nav-bar {
+          --uc-bm-height: 0px;
+        }
+      }
+    }
+  }
 }
 
 @include Option("userChrome.autohide.tabbar", "userChrome.autohide.navbar", "userChrome.autohide.bookmarkbar", "userChrome.autohide.infobar") {
-  :root {
-    --uc-autohide-toolbar-delay: 600ms;
-  }
-
   #navigator-toolbox {
     position: relative;
-    z-index: 2;
+    &:is(:hover, :focus-within) {
+      z-index: 2;
+
+      #PersonalToolbar {
+        z-index: -1;
+      }
+    }
   }
-  #navigator-toolbox:not(:hover) {
+  #navigator-toolbox:not(:hover):not(:focus-within) {
     animation: 1s keepfront;
   }
   @keyframes keepfront {

src/autohide/_fill_urlbar.scss

@@ -12,7 +12,7 @@
 @include Animate {
   @include OneLiner {
     #nav-bar {
-      transition: margin-inline 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
+      transition: margin-inline var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
                   var(--ext-theme-background-transition) !important;
     }
     #nav-bar:is(:hover, :focus-within, [urlbar-exceeds-toolbar-bounds="true"]) {
@@ -22,7 +22,7 @@
 
   @include OneLinerNavbarContent {
     #urlbar-container {
-      transition: min-width 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay);
+      transition: min-width var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay);
     }
     #nav-bar:is(:hover, :focus-within, [urlbar-exceeds-toolbar-bounds="true"]) #urlbar-container {
       transition-delay: 0s !important;

src/autohide/_forward_button.scss

@@ -1,5 +1,5 @@
 #forward-button[disabled="true"] {
-  margin-left: -36px !important;
+  margin-left: var(--uc-toolbarbutton-hide-size) !important;
   opacity: 0 !important;
   pointer-events: none;
 }

src/autohide/_index.scss

@@ -1,3 +1,9 @@
+@include Option("userChrome.autohide.back_button", "userChrome.autohide.forward_button") {
+  :root {
+    --uc-toolbarbutton-hide-size: calc(-1 * (16px + (2 * var(--toolbarbutton-outer-padding) + var(--toolbarbutton-inner-padding))));
+  }
+}
+
 @include Option("userChrome.autohide.back_button") {
   @import "back_button";
 }

src/autohide/_infobar.scss

@@ -1,6 +1,6 @@
 #tab-notification-deck:not([customizing]) > .notificationbox-stack {
   $infobarFixedHeight: 13px + ((1px + 5px) * 2); // button height + (button border + [button.small-button padding]) * 2
-  // fiexedHeight + (button margin * 2) + messagebar margin
+  // fixedHeight + (button margin * 2) + messagebar margin
   --infobar-height: calc(#{ $infobarFixedHeight } + (var(--infobar-button-vertical-margin, 4px) * 2) + var(--infobar-message-vertical-margin, 8px));
 }
 #tab-notification-deck:not([customizing]) > .notificationbox-stack[slot="selected"] > notification-message {
@@ -22,8 +22,8 @@
 
 @include Animate {
   #tab-notification-deck:not([customizing]) > .notificationbox-stack[slot="selected"] > notification-message {
-    transition: margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
+    transition: margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
-                opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
+                opacity var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
                 var(--ext-theme-background-transition) !important;
   }
   #navigator-toolbox:is(:hover, :focus-within) #tab-notification-deck:not([customizing]) > .notificationbox-stack[slot="selected"] > notification-message {

src/autohide/_navbar.scss

@@ -12,14 +12,14 @@
 
 @include Animate {
   #nav-bar:not([customizing]) {
-    transition: margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
+    transition: margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
-                opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
+                opacity var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
                 var(--ext-theme-background-transition) !important;
 
     @include Option("userChrome.autohide.fill_urlbar") {
-      transition: margin-inline 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
+      transition: margin-inline var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
-                  margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
+                  margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
-                  opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
+                  opacity var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
                   var(--ext-theme-background-transition) !important;
     }
   }

src/autohide/_tabbar.scss

@@ -1,7 +1,10 @@
 //-- Mixin ---------------------------------------------------------------------
 @mixin _autohide_tabbar() {
   @include NotOption("userChrome.tabbar.on_bottom") {
-    @content;
+    &,
+    & .titlebar-buttonbox-container {
+      @content;
+    }
   }
   @include Option("userChrome.tabbar.on_bottom") {
     > *:not(.titlebar-buttonbox-container) {
@@ -20,8 +23,8 @@
   #TabsToolbar:not([customizing]) {
     @include _autohide_tabbar {
       opacity: 0;
-      will-change: opacity;
     }
+    will-change: opacity;
   }
 
   #navigator-toolbox:is(:hover, :focus-within) {
@@ -38,13 +41,13 @@
 
 @include Animate {
   #titlebar:not([customizing]) {
-    transition: margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
+    transition: margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
                 background-color 1s var(--animation-easing-function) !important;
   }
 
   #TabsToolbar:not([customizing]) {
     @include _autohide_tabbar {
-      transition: opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay) !important;
+      transition: opacity var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay) !important;
     }
   }
 

src/autohide/_toolbar_overlap.scss

@@ -5,7 +5,7 @@
   @include Animate {
     @include Option("userChrome.decoration.animate") {
       transition: margin-top 1s ease,
-                  margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay);
+                  margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay);
 
       &:is(:hover, :focus-within) {
         transition-delay: 0s !important;
@@ -13,11 +13,11 @@
 
       &[inFullscreen="true"] {
         transition: margin-top 1.3s var(--animation-easing-function) 50ms,
-                    margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay);
+                    margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay);
       }
     }
     @include NotOption("userChrome.decoration.animate") {
-      transition: margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay);
+      transition: margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay);
 
       &:is(:hover, :focus-within) {
         transition-delay: 0s !important;

src/autohide/sidebar/_overlap.scss

@@ -1,3 +1,4 @@
+#sidebar-header,
 #sidebar {
   min-width: var(--uc-sidebar-width) !important;
   max-width: var(--uc-sidebar-width) !important;
@@ -5,9 +6,12 @@
   will-change: min-width, max-width;
 }
 
-#sidebar-box:is(:hover, :focus-within) > #sidebar {
+#sidebar-box:is(:hover, :focus-within) > {
-  min-width: var(--uc-sidebar-activate-width) !important;
+  #sidebar-header,
-  max-width: var(--uc-sidebar-activate-width) !important;
+  #sidebar {
+    min-width: var(--uc-sidebar-activate-width) !important;
+    max-width: var(--uc-sidebar-activate-width) !important;
+  }
 }
 
 :root[inFullscreen="true"] #sidebar-box {
@@ -29,16 +33,20 @@
 }
 
 @include Animate {
+  #sidebar-header,
   #sidebar {
-    transition: min-width 750ms var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !important;
+    transition: min-width var(--uc-autohide-sidebar-speed) var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !important;
   }
 
-  #sidebar-box:is(:hover, :focus-within) > #sidebar {
+  #sidebar-box:is(:hover, :focus-within) > {
-    transition-delay: 0ms !important;
+    #sidebar-header,
+    #sidebar {
+      transition-delay: 0ms !important;
+    }
   }
 
   :root[inFullscreen="true"] #sidebar-box {
-    transition: padding-inline-start 1s var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !important;
+    transition: padding-inline-start var(--uc-autohide-fullscreen-sidebar-speed) var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !important;
 
     &:is(:hover, :focus-within) {
       transition-delay: 0ms !important;

src/autohide/sidebar/_static.scss

@@ -32,7 +32,7 @@
 
 @include Animate {
   #sidebar-box {
-    transition: min-width 750ms var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !important;
+    transition: min-width var(--uc-autohide-sidebar-speed) var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !important;
 
     &:is(:hover, :focus-within) {
       transition-delay: 0ms !important;
@@ -40,7 +40,7 @@
   }
 
   :root[inFullscreen="true"] #sidebar-box {
-    transition: margin-inline-start 1s var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !important;
+    transition: margin-inline-start var(--uc-autohide-fullscreen-sidebar-speed) var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !important;
 
     &[positionend="true"] {
       transition-property: margin-inline-end !important;

src/bookmarkbar/_index.scss

@@ -0,0 +1,3 @@
+@include Option("userChrome.bookmarkbar.multi_row") {
+  @import "_multi_row";
+}

src/bookmarkbar/_multi_row.scss

@@ -0,0 +1,34 @@
+// Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/multi-row_bookmarks.css made available under Mozilla Public License v. 2.0
+// See the above repository for updates as well as full license text.
+
+#PersonalToolbar {
+  --uc-multirow-bookmark-rows: 3;
+  --uc-multirow-bookmark-row-margin: 2px;
+  max-height: none !important;
+}
+
+#PlacesToolbar > hbox {
+  display: block;
+  width: 100vw;
+}
+
+#PlacesToolbarItems {
+  display: flex;
+  flex-wrap: wrap;
+  overflow-y: auto;
+  scroll-snap-type: y mandatory;
+  max-height: calc(var(--uc-multirow-bookmark-rows) *
+                   (var(--uc-bm-height, calc(20px + (2 * var(--bookmark-block-padding, 4px)))) +
+                    (2 * var(--uc-multirow-bookmark-row-margin)))) !important;
+}
+
+// Hide the all-bookmarks button
+#PlacesChevron {
+  display: none;
+}
+
+// Add some spacing between rows
+#PlacesToolbarItems > .bookmark-item {
+  scroll-snap-align: start;
+  margin-block: var(--uc-multirow-bookmark-row-margin) !important;
+}

src/combined/_back_forward_button.scss

@@ -0,0 +1,143 @@
+//-- Mixin ---------------------------------------------------------------------
+@mixin _combined_nav_button_background() {
+  > .toolbarbutton-icon {
+    background-color: var(--uc-combined-circlebutton-background);
+  }
+  &:not([disabled], [open]):hover > .toolbarbutton-icon {
+    background-color: var(--uc-combined-circlebutton-hover-background) !important;
+    box-shadow: 0 1px 6px hsla(0,0%,0%,.1);
+    border-color: hsla(240,5%,5%,.35);
+  }
+  &[open] > .toolbarbutton-icon,
+  &:not([disabled]):hover:active > .toolbarbutton-icon {
+    background-color: var(--uc-combined-circlebutton-active-background) !important;
+    border-color: hsla(240,5%,5%,.40);
+  }
+
+  &[disabled="true"] {
+    > .toolbarbutton-icon {
+      background-color:  color-mix(in srgb, var(--toolbarbutton-hover-background), var(--toolbar-field-background-color) 40%) !important;
+      fill: color-mix(in srgb, var(--toolbarbutton-icon-fill), transparent 60%);
+    }
+  }
+}
+
+@mixin _back_button_circle_shape() {
+  z-index: 3 !important;
+  background-color: var(--toolbar-bgcolor) !important;
+  background-clip: content-box !important;
+  border-radius: 100%;
+
+  padding-block: 0 !important;
+  @include NotOption("userChrome.autohide.back_button") {
+    padding-inline-end: 0 !important;
+  }
+  @include Option("userChrome.autohide.back_button") {
+    &:not([disabled="true"]) {
+      padding-inline-end: 0 !important;
+    }
+    &[disabled="true"] {
+      padding-inline-end: calc(var(--toolbarbutton-outer-padding) + 1px) !important;
+    }
+  }
+
+  > menupopup {
+    margin-top: -1px !important;
+  }
+
+  > .toolbarbutton-icon {
+    background-origin: padding-box;
+    background-clip: padding-box;
+    border: 1px solid var(--uc-combined-circlebutton-border-color);
+    border-radius: 10000px !important;
+
+    padding-inline-end: var(--urlbar-icon-padding) !important;
+    height: auto !important
+  }
+}
+
+//------------------------------------------------------------------------------
+
+#nav-bar-customization-target > {
+  #forward-button {
+    --uc-forward-button-margin: calc(-1 * var(--uc-toolbarbutton-boundary) + 1px);
+
+    z-index: 2;
+    position: relative;
+
+    > .toolbarbutton-icon {
+      padding-inline-end: var(--urlbar-icon-padding) !important; /* Original: var(--toolbarbutton-inner-padding) */
+      padding-block: var(--urlbar-icon-padding) !important;
+      height: var(--uc-urlbar-icon-size) !important;
+    }
+
+    @include Option("userChrome.combined.urlbar.nav_button") {
+      padding-inline-end: 0px !important; /* Original: var(--toolbarbutton-outer-padding) */
+    }
+    @include NotOption("userChrome.combined.urlbar.nav_button") {
+      @include NotOption("userChrome.combined.nav_button.none_forward_background") {
+        @include Option("userChrome.combined.urlbar.home_button") {
+          @include NotOption("userChrome.combined.nav_button.home_button") {
+            @include _combined_nav_button_background;
+            @include NotOption("userChrome.autohide.forward_button") {
+              &[disabled="true"] {
+                opacity: 1 !important; /* Original: 0.4 */
+              }
+            }
+          }
+        }
+        @include NotOption("userChrome.combined.urlbar.home_button") {
+          @include _combined_nav_button_background;
+          @include NotOption("userChrome.autohide.forward_button") {
+            &[disabled="true"] {
+              opacity: 1 !important; /* Original: 0.4 */
+            }
+          }
+        }
+      }
+    }
+
+    @include NotOption("userChrome.autohide.forward_button") {
+      margin-inline-start: var(--uc-forward-button-margin) !important;
+    }
+    @include Option("userChrome.autohide.forward_button") {
+      &:not([disabled="true"]) {
+        margin-inline-start: var(--uc-forward-button-margin) !important;
+      }
+    }
+  }
+
+  #back-button {
+    position: relative;
+
+    @include _combined_nav_button_background;
+    @include NotOption("userChrome.autohide.back_button") {
+      &[disabled="true"] {
+        opacity: 1 !important; /* Original: 0.4 */
+      }
+    }
+    @include Option("userChrome.combined.nav_button.home_button", "userChrome.combined.urlbar.home_button") {
+      z-index: 2;
+
+      margin-inline-end: calc(-1 * var(--uc-toolbarbutton-boundary) - 1px) !important;
+      padding-inline-start: 0px !important; /* Original: var(--toolbarbutton-outer-padding) */
+
+      > .toolbarbutton-icon {
+        padding-inline-start: var(--urlbar-icon-padding) !important; /* Original: var(--toolbarbutton-inner-padding) */
+        padding-block: var(--urlbar-icon-padding) !important;
+        height: var(--uc-urlbar-icon-size) !important;
+      }
+    }
+
+    @include NotOption("userChrome.combined.nav_button.home_button") {
+      @include Option("userChrome.combined.urlbar.nav_button") {
+        @include NotOption("userChrome.combined.urlbar.home_button") {
+          @include _back_button_circle_shape;
+        }
+      }
+      @include NotOption("userChrome.combined.urlbar.nav_button") {
+        @include _back_button_circle_shape;
+      }
+    }
+  }
+}

src/combined/_home_button.scss

@@ -0,0 +1,31 @@
+#nav-bar-customization-target > #home-button {
+  z-index: 3;
+  position: relative;
+
+  background-color: var(--toolbar-bgcolor) !important;
+  background-clip: content-box !important;
+  border-radius: 100%;
+
+  padding-block: 0 !important;
+  padding-inline-end: 0 !important;
+
+  > .toolbarbutton-icon {
+    background-color: var(--uc-combined-circlebutton-background);
+    background-origin: padding-box;
+    background-clip: padding-box;
+    border: 1px solid var(--uc-combined-circlebutton-border-color);
+    border-radius: 10000px !important;
+
+    padding-inline-end: var(--urlbar-icon-padding) !important;
+    height: auto !important
+  }
+  &:hover > .toolbarbutton-icon {
+    background-color: var(--uc-combined-circlebutton-hover-background) !important;
+    box-shadow: 0 1px 6px hsla(0,0%,0%,.1);
+    border-color: hsla(240,5%,5%,.35);
+  }
+  &:hover:active > .toolbarbutton-icon {
+    background-color: var(--uc-combined-circlebutton-active-background) !important;
+    border-color: hsla(240,5%,5%,.40);
+  }
+}

src/combined/_index.scss

@@ -0,0 +1,114 @@
+/*= Combined - At URL bar ====================================================*/
+@include Option(
+  "userChrome.combined.nav_button", "userChrome.combined.nav_button.home_button",
+  "userChrome.combined.urlbar.nav_button", "userChrome.combined.urlbar.home_button", "userChrome.combined.urlbar.reload_button"
+) {
+  // Init
+  #nav-bar {
+    // Color
+    --uc-combined-circlebutton-background: hsla(0,100%,100%,.5);
+    --uc-combined-circlebutton-hover-background: var(--uc-combined-circlebutton-background);
+    --uc-combined-circlebutton-active-background: var(--toolbarbutton-active-background);
+    --uc-combined-circlebutton-border-color: hsla(240,5%,5%,.3);
+    &[brighttext] {
+      // Original: Using :-moz-lwtheme
+      --uc-combined-circlebutton-background: var(--toolbarbutton-hover-background);
+      --uc-combined-circlebutton-hover-background: var(--toolbarbutton-active-background);
+      --uc-combined-circlebutton-active-background: color-mix(in srgb, currentColor 20%, transparent);
+    }
+
+    // Padding & Size
+    --uc-toolbarbutton-boundary: calc(var(--toolbarbutton-outer-padding) + var(--toolbarbutton-inner-padding));
+    --uc-toolbarbutton-padding: calc(2 * var(--uc-toolbarbutton-boundary));
+    --uc-toolbarbutton-size: calc(12px + var(--uc-toolbarbutton-padding));
+    --uc-toolbarbutton-halfsize: calc(6px + var(--uc-toolbarbutton-boundary));
+
+    --uc-urlbar-icon-size: calc(16px + 2 * var(--urlbar-icon-padding));
+  }
+
+  #nav-bar-customization-target > * {
+    -moz-box-ordinal-group: 1;
+  }
+  // Preserve
+  // `back`    -> 2
+  // `home`    -> 3
+  // `forward` -> 4
+  #nav-bar-customization-target > #urlbar-container {
+    -moz-box-ordinal-group: 5;
+  }
+  // `reload`  -> 6
+  #nav-bar-customization-target > #urlbar-container ~ * {
+    -moz-box-ordinal-group: 7;
+  }
+}
+
+@include Option("userChrome.combined.urlbar.nav_button", "userChrome.combined.urlbar.home_button") {
+  #nav-bar-customization-target > #urlbar-container {
+    /* var(--urlbar-margin-inline) */
+    margin-inline-start: calc(-1 * var(--uc-urlbar-combined-margin, 0px)) !important;
+
+    > #urlbar:not([breakout][breakout-extend]) {
+      padding-left: var(--uc-urlbar-combined-margin, 0px);
+    }
+
+    @include Option("userChrome.combined.urlbar.nav_button") {
+      --uc-urlbar-combined-margin: var(--uc-toolbarbutton-size);
+    }
+    @include NotOption("userChrome.combined.urlbar.nav_button") {
+      --uc-urlbar-combined-margin: var(--uc-toolbarbutton-halfsize);
+
+      @include Option("userChrome.combined.nav_button") {
+        @include Option("userChrome.combined.nav_button.home_button") {
+          @include Option("userChrome.combined.urlbar.home_button") {
+            --uc-urlbar-combined-margin: var(--uc-toolbarbutton-size);
+          }
+        }
+      }
+    }
+  }
+  #nav-bar-customization-target > #forward-button[disabled="true"] ~ #urlbar-container > #urlbar {
+    @include Option("userChrome.combined.urlbar.nav_button") {
+      @include Option("userChrome.autohide.forward_button") {
+        &:not([breakout][breakout-extend]) {
+          padding-left: calc(var(--uc-urlbar-combined-margin, 0px) - var(--urlbar-icon-padding));
+        }
+      }
+      @include Animate {
+        transition-property: margin-left, padding-left;
+        transition-duration: 0.5s;
+        transition-timing-function: var(--animation-easing-function);
+      }
+    }
+  }
+}
+
+@include Option("userChrome.combined.nav_button", "userChrome.combined.urlbar.nav_button") {
+  @import "back_forward_button";
+}
+@include Option("userChrome.combined.nav_button") {
+  @include Option("userChrome.combined.nav_button.home_button") {
+    @import "home_button";
+  }
+}
+
+@include Option("userChrome.combined.urlbar.nav_button") {
+  #nav-bar-customization-target > #back-button {
+    -moz-box-ordinal-group: 2;
+  }
+  #nav-bar-customization-target > #forward-button {
+    -moz-box-ordinal-group: 4;
+  }
+}
+@include Option("userChrome.combined.urlbar.home_button") {
+  #nav-bar-customization-target > #home-button {
+    -moz-box-ordinal-group: 3;
+  }
+  @import "home_button";
+}
+@include Option("userChrome.combined.urlbar.reload_button") {
+  #nav-bar-customization-target > #stop-reload-button {
+    -moz-box-ordinal-group: 6;
+  }
+
+  @import "reload_button";
+}

src/combined/_reload_button.scss

@@ -0,0 +1,22 @@
+// Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/reload_button_in_urlbar.css made available under Mozilla Public License v. 2.0
+// See the above repository for updates as well as full license text.
+#urlbar {
+  padding-right: calc(var(--uc-toolbarbutton-size) - (var(--urlbar-margin-inline) / 2));
+}
+
+#nav-bar-customization-target > #stop-reload-button {
+  z-index: 3;
+  position: relative;
+
+  --toolbarbutton-hover-background: var(--urlbar-box-hover-bgcolor);
+  color: var(--urlbar-box-hover-text-color) !important;
+
+  margin-left: calc( -1 * (var(--uc-toolbarbutton-size) + var(--urlbar-margin-inline)));
+}
+
+#nav-bar-customization-target > #stop-reload-button > .toolbarbutton-1 > .toolbarbutton-icon {
+  width: var(--uc-urlbar-icon-size) !important;
+  height: var(--uc-urlbar-icon-size) !important;
+
+  padding: var(--urlbar-icon-padding) !important;
+}

src/compatibility/_os.scss

@@ -131,7 +131,7 @@
   }
 
   /*= Linux - Titlebar button at lwtheme =====================================*/
-  @include NotOption("userChrome.compatiblity.os.linux_non_native_titlebar_button") {
+  @include NotOption("userChrome.compatibility.os.linux_non_native_titlebar_button") {
     .titlebar-button:-moz-lwtheme {
       appearance: auto !important;
     }
@@ -183,14 +183,28 @@ $_os_linuxDefaultShadow: 0 0 4px rgba(128, 128, 142, 0.5);
 }
 
 /*= Titlebar Container Size at maximized #384 ================================*/
-@include Option("userChrome.compatibility.os.windows_maximized") {
+@include OS($win) {
-  @include OS($win) {
+  :root[tabsintitlebar] {
-    :root[tabsintitlebar][sizemode="maximized"] #titlebar {
+    @include NotOption("userChrome.compatibility.os.windows_maximized") {
-      /* -moz-default-appearance: -moz-window-titlebar */
+      #titlebar {
-      appearance: none !important;
+        // Prevent #476 FF v105 above
+        /* -moz-default-appearance: -moz-window-titlebar */
+        appearance: none !important;
+      }
+      @include OS($win7, $win8) {
+        &[sizemode="maximized"] #titlebar {
+          // Only win7, win8 #480
+          padding-top: 8px; // Don't use margin-top for reserved fullscreen animation
+        }
+      }
+    }
+    @include Option("userChrome.compatibility.os.windows_maximized") {
+      &[sizemode="maximized"] #titlebar {
+        appearance: none !important;
 
-      // Prevent sideeffect #370
+        // Prevent side effect #370
-      padding-top: 8px; // Don't use margin-top for reserved fullscreen animation
+        padding-top: 8px; // Don't use margin-top for reserved fullscreen animation
+      }
     }
   }
 }

src/compatibility/_theme.scss

@@ -48,7 +48,7 @@ menu {
 /*= Remove Tab Border ========================================================*/
 @mixin _theme_removeTabBorder($options...) {
   %noneBorder {
-    /* Nigtly 96:  1px solid var(--tab-line-color, rgba(128,128,142,0.9)); */
+    /* Nightly 96:  1px solid var(--tab-line-color, rgba(128,128,142,0.9)); */
     border: unset !important;
   }
   @each $prefix, $postfix in $options {
@@ -82,6 +82,13 @@ menu {
   }
 }
 
+/*= Tab Separator Color ======================================================*/
+#TabsToolbar,
+#nav-bar {
+  --toolbarseparator-color: color-mix(in srgb, currentColor 20%, transparent); /* 60% at v105 */
+}
+
+
 /*= Light Weight Theme =======================================================*/
 /* Header Image */
 :root[lwtheme-image] {
@@ -109,11 +116,65 @@ menu {
 
 /* Navbar Border */
 #navigator-toolbox:-moz-lwtheme {
-  --tabs-border-color: rgba(0, 0, 0, 0.3); /* Legacy: v96 */
+  --tabs-border-color: rgba(0, 0, 0, 0.4); /* Legacy: v96, (0, 0, 0, 0.3) -> (0, 0, 0, 0.4)  */
-  --lwt-tabs-border-color: rgba(0, 0, 0, 0.3);
+  --lwt-tabs-border-color: rgba(0, 0, 0, 0.4);
 }
 
 /*= Findbar Border Color =====================================================*/
 html|input.findbar-textbox {
   border: 1px solid var(--input-border-color, var(--toolbar-field-border-color, ThreeDShadow)) !important; /* Original: 1px solid var(--input-border-color, var(--toolbar-field-border-color)) */
 }
+
+/*= Drop Indicator Color #473 ================================================*/
+treechildren::-moz-tree-cell-text(primary, dropOn),
+treechildren::-moz-tree-drop-feedback,
+vbox[part="drop-indicator-bar"] > image[part="drop-indicator"] {
+  background-color: var(--button-primary-bgcolor, var(--focus-outline-color)) !important; /* Original: SelectedItem or AccentColor*/
+}
+
+#bookmarksPanel[lwt-sidebar="true"] {
+  --focus-outline-color: var(--in-content-focus-outline-color, AccentColor) !important;
+}
+
+/*= Menu color #477 ==========================================================*/
+@media (-moz-windows-non-native-menus) {
+  :root {
+    /* Override some menu color variables for light browser themes. */
+    --menuitem-hover-background-color: #e0e0e6;
+    --menu-background-color: #f9f9fb;
+    --menu-color: #15141a;
+    --menuitem-disabled-hover-background-color: rgba(224, 224, 230, 0.4);
+    --menu-disabled-color: rgba(21, 20, 26, 0.4);
+    --menu-border-color: #cfcfd8;
+    --menu-icon-opacity: 0.7;
+
+    /* Declare menu colors for dark themes, but don't override anything yet. */
+    --dark-menuitem-hover-background-color: #52525e;
+    --dark-menu-background-color: #2b2a33;
+    --dark-menu-color: #fbfbfe;
+    --dark-menuitem-disabled-hover-background-color: rgba(82, 82, 94, 0.4);
+    --dark-menu-disabled-color: rgba(251, 251, 254, 0.4);
+    --dark-menu-border-color: #5b5b66;
+    --dark-menu-icon-opacity: 1;
+  }
+
+  /* Override the menu color variables for dark browser themes. */
+  @include Dark {
+    :root {
+      --menuitem-hover-background-color: var(--dark-menuitem-hover-background-color);
+      --menu-background-color: var(--dark-menu-background-color);
+      --menu-color: var(--dark-menu-color);
+      --menuitem-disabled-hover-background-color: var(--dark-menuitem-disabled-hover-background-color);
+      --menu-disabled-color: var(--dark-menu-disabled-color);
+      --menu-border-color: var(--dark-menu-border-color);
+      --menu-icon-opacity: var(--dark-menu-icon-opacity);
+    }
+  }
+}
+
+/*= 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/contents/_activity_stream.scss

@@ -101,7 +101,7 @@
   }
 
   /** Activity Stream - Home Search Bar looks like proton *********************/
-  @include Option("userContent.newTab.animate") {
+  @include Option("userContent.newTab.searchbar") {
     /* Dropdown Colors */
     #root {
       --newtab-search-background-color: rgba(255, 255, 255, 1); /* Same as light theme's --panel-background */

src/contents/_error_page.scss

@@ -4,11 +4,13 @@
 {
   /* Illustrations Position */
   #errorPageContainer,
+  .neterror > .container,
   .description-wrapper {
     min-height: 300px;
     background-position: left center;
     background-repeat: no-repeat;
     background-size: 38%;
+    background-image: var(--uc-error-llustration);
   }
 
   #errorPageContainer {
@@ -34,33 +36,30 @@
 
 
 //-- Mixin ---------------------------------------------------------------------
-@mixin _backgroundImage($imgURL, $important: false) {
-  background-image: url($imgURL) if($important, !important, null);
-  @content;
-}
-
 @mixin _errorContainerImage($imgURL) {
-  #errorPageContainer {
+  :root {
-    @include _backgroundImage($imgURL) {
+    --uc-error-llustration: url(#{$imgURL});
-      @content;
+  }
-    }
+  #errorPageContainer,
+  .neterror > .container {
+    @content;
   }
 }
 
 @mixin _errorDescriptionImage($imgURL) {
+  :root {
+    --uc-error-llustration: url(#{$imgURL});
+  }
   .description-wrapper {
-    @include _backgroundImage($imgURL) {
+    @content;
-      @content;
-    }
   }
 }
 
 @mixin _errorTitleImage($imgURL) {
   @media (min-width: 970px) {
     .title {
-      @include _backgroundImage($imgURL, true) {
+      background-image: url($imgURL) !important;
-        @content;
+      @content;
-      }
     }
   }
 }
@@ -69,8 +68,8 @@
 
 @-moz-document url-prefix("about:neterror?e=connectionFailure"),
   url-prefix("about:neterror?e=netInterrupt"),
-  url-prefix("about:neterror?e=netTimeout"),
   url-prefix("about:neterror?e=netReset"),
+  url-prefix("about:neterror?e=netTimeout"),
   url-prefix("about:neterror?e=netOffline"),
   url("about:restartrequired"), url("chrome://browser/content/aboutRestartRequired.xhtml")
 {
@@ -79,7 +78,9 @@
 @-moz-document url-prefix("about:neterror?e=dnsNotFound") {
   @include _errorContainerImage("../icons/error-server-not-found.svg");
 }
-@-moz-document url-prefix("about:neterror?e=malformedURI") {
+@-moz-document   url-prefix("about:neterror?e=blockedByPolicy"),
+  url-prefix("about:neterror?e=deniedPortAccess"),
+  url-prefix("about:neterror?e=malformedURI") {
   @include _errorContainerImage("chrome://browser/skin/illustrations/error-malformed-url.svg");
 }
 @-moz-document url-prefix("about:neterror?e=clockSkewError"),

src/contents/_proton_color.scss

@@ -19,12 +19,13 @@
 
   @include Option("userContent.page.proton_color.system_accent") {
     :host, :root {
-      @include AccentColor {
+      @include AccentColor("Highlight") {
         --in-content-primary-button-text-color: #{$accentTextColor} !important;
+
+        --in-content-primary-button-background: #{$accentColor} !important;
+        --in-content-primary-button-background-hover: color-mix(in srgb, black 10%, #{$accentColor}) !important;
+        --in-content-primary-button-background-active: color-mix(in srgb, black 20%, #{$accentColor}) !important;
       }
-      --in-content-primary-button-background: Highlight !important;
-      --in-content-primary-button-background-hover: color-mix(in srgb, black 10%, Highlight) !important;
-      --in-content-primary-button-background-active: color-mix(in srgb, black 20%, Highlight) !important;
     }
   }
 }

src/contents/dark_mode/_accounts_com.scss

@@ -46,6 +46,7 @@
   .input-row input[type="tel"],
   .input-row input[type="text"],
   .input-row input::placeholder,
+  .input-text,
   .firefox-family-services > ul > .firefox-service,
   .faint,
   .faint a,
@@ -68,7 +69,9 @@
   .input-row input[type="password"],
   .input-row input[type="tel"],
   .input-row input[type="text"],
+  .input-text,
   header,
+  .card,
   .bg-white:not(nav) {
     background: var(--in-content-box-background) !important;
   }

src/contents/dark_mode/_addons_org.scss

@@ -486,7 +486,7 @@
       background: var(--in-content-border-color) !important;
     }
 
-    /* Othres */
+    /* Others */
     #promos .view-button a,
     #upload-file-finish.button,
     #upload-file-widget .button.prominent,

src/contents/proton_contents/_proton_commons.scss

@@ -191,13 +191,13 @@
   richlistbox:focus-visible {
     border-color: transparent !important;
     outline: 2px solid var(--in-content-focus-outline-color) !important;
-    outline-offset: -1px !important; /* Prevents antialising around the corners */
+    outline-offset: -1px !important; /* Prevents antialiasing around the corners */
   }
   input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):-moz-ui-invalid,
   textarea:-moz-ui-invalid {
     border-color: transparent !important;
     outline: 2px solid var(--in-content-border-invalid) !important;
-    outline-offset: -1px !important; /* Prevents antialising around the corners */
+    outline-offset: -1px !important; /* Prevents antialiasing around the corners */
   }
   input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):disabled,
   textarea:disabled,

src/counter/_bookmark_menu.scss

@@ -0,0 +1,17 @@
+menupopup[placespopup="true"] > menu.bookmark-item > .menu-right {
+  counter-reset: bookmark-counts 0;
+}
+menupopup[placespopup="true"] > menu.bookmark-item::after {
+  display: -moz-inline-box;
+  content: "(" counter(bookmark-counts) ")";
+}
+
+menupopup[placespopup="true"] > menu.bookmark-item > .menu-iconic-highlightable-text,
+menupopup[placespopup="true"] > menu.bookmark-item > .menu-accel-container,
+menupopup[placespopup="true"] > menu.bookmark-item > .menu-right {
+  -moz-box-ordinal-group: 2;
+}
+
+menu.bookmark-item > menupopup[placespopup="true"] > .bookmark-item {
+  counter-increment: bookmark-counts;
+}