Update firefox

arch-config/.mozilla/firefox/default-release/chrome/CONTRIBUTING.md

@@ -4,23 +4,10 @@
 **Table of Contents**
 
 - [Introduce](#introduce)
-  - [Code of Conduct](#code-of-conduct)
+  * [Code of Conduct](#code-of-conduct)
-  - [We Develop with Github](#we-develop-with-github)
+  * [We Develop with Github](#we-develop-with-github)
-  - [Environment](#environment)
+  * [Your First Contribution](#your-first-contribution)
-  - [Your First Contribution](#your-first-contribution)
+  * [Contribution Targets](#contribution-targets)
-  - [Contribution Targets](#contribution-targets)
-  - [Project Structure](#project-structure)
-    - [Icon files](#icon-files)
-    - [Meta Info files](#meta-info-files)
-  - [Restrictions](#restrictions)
-- [Rules](#rules)
-  - [Version](#version)
-  - [Branch](#branch)
-  - [Issue](#issue)
-  - [Coding style](#coding-style)
-  - [Commit](#commit)
-  - [Commit Message](#commit-message)
-  - [Pull request](#pull-request)
 - [License](#license)
 - [References](#references)
 
@@ -30,11 +17,15 @@
 
 I'm really glad you're reading this, because we need volunteer developers to help this project come to fruition.
 
+This document is intended to help, not burden you.
+
+You can use it as a reference for various guidelines and information, and PR comfortably.
+
 Please note we have a code of conduct, please follow it in all your interactions with the project.
 
 ### Code of Conduct
 
-Refer to [CODE\_OF\_CONDUCT.md](https://github.com/black7375/Firefox-UI-Fix/blob/master/CODE_OF_CONDUCT.md).
+Refer to [CODE\_OF\_CONDUCT.md](./CODE_OF_CONDUCT.md).
 
 ### We Develop with Github
 
@@ -42,45 +33,40 @@ We use [github](https://github.com/black7375/Firefox-UI-Fix) to host code, to tr
 
 After feedback has been given we expect responses within two weeks. After two weeks we may close the issue and pull request if it isn't showing any activity.
 
-### Environment
-
-You can configure it as follows:
-```shell
-## clone repository
-git clone https://github.com/black7375/Firefox-UI-Fix.git
-cd ./Firefox-UI-Fix
-
-## checkout branch
-git checkout <BRANCH_NAME>
-```
-
 ### Your First Contribution
 
-**Working on your first Pull Request?** You can learn how from this *free* series [How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github)
+**Working on your first Pull Request?**
 
-The following documents may be helpful:
+You can learn how from this *free* series [How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github)
-- [Roadmap](https://github.com/black7375/Firefox-UI-Fix/issues/2)
-- [Each Versions Plan](https://github.com/black7375/Firefox-UI-Fix/milestones)
-- [Wiki:Compatibility Issues Solution](https://github.com/black7375/Firefox-UI-Fix/wiki/Compatibility-Issues-Solution)
-- [Wiki:Tips](https://github.com/black7375/Firefox-UI-Fix/wiki/Tips)
 
-Live Debugging:
+And, Please refer to the [development documentation](./docs/).
-- [Tutorial: How to create and live-debug userChrome.css](https://www.reddit.com/r/FirefoxCSS/comments/73dvty/tutorial_how_to_create_and_livedebug_userchromecss/)
-- [Browser Toolbox](https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox)
-- [Style Editor](https://developer.mozilla.org/en-US/docs/Tools/Style_Editor)
-
-Firefox Source Code:
-- [Github](https://github.com/mozilla/gecko-dev)
-- [Searchfox](https://searchfox.org/)
-- [Firefox Source Docs](https://firefox-source-docs.mozilla.org/)
-
-Test for None mac users:
-- [Docker-OSX](https://github.com/sickcodes/Docker-OSX)
 
 ### Contribution Targets
 
 We love your input! We want to make contributing to this project as easy and transparent as possible, whether it's:
 
+**Codes**
+- New Features.
+- Bug fixes.
+- Improved compatibility or accessibility.
+- Refactoring.
+
+**Graphic Resources**
+- Icons ([#213](https://github.com/black7375/Firefox-UI-Fix/issues/213), We need the help of a designer!!)
+- Social preview image ([sample](https://github.com/topics/firefox-theme))
+
+**Issues**
+- Report a bug.
+- Discussing the current state of the code.
+- Tell us about related or relevant projects and documents.
+- Help other users issue.
+- Proposing others..
+
+**Docs**
+- Fix typos, alignments.
+- Correct awkward sentences.
+- Improve document readability.
+
 **Promotions**
 - Introduce project
   - Video (Recommend!!, We need it)
@@ -91,160 +77,7 @@ We love your input! We want to make contributing to this project as easy and tra
   - [Producthunt](https://www.producthunt.com/posts/firefox-ui-fix-proton)([#43](https://github.com/black7375/Firefox-UI-Fix/issues/43))
   - [Youtube](https://www.youtube.com/watch?v=ECta0icNMgY)
 
-**Docs**
+## License
-- Fix typos, alignments.
-- Correct awkward sentences.
-- Improve document readability.
-
-**Issues**
-- Report a bug.
-- Discussing the current state of the code.
-- Tell us about related or relevant projects and documents.
-- Help other users issue.
-- Proposing others..
-
-**Codes**
-- New Features.
-- Bug fixes.
-- Improved compatibility or accessibility.
-- Refactoring.
-
-### Project Structure
-
-```
-root
-|- .gitattributes: Exclude at `Download Zip`
-|- .github: Issue/PR Template, Github Actions
-|- .prettierignore: Exclude coding style
-|- .prettierrc.json: Coding style
-|- icons/: Icons, illustrations
-|- install.ps1: Install script write in powersehll
-|- install.sh: Install script write in bash
-|- LEPTON: Meta infos (branch, version)
-|- user.js: about:config settings
-|- userChrome.css: CSS for Browser UI
-|- userContent.css: CSS for Web pages
-```
-
-#### Icon files
-
-Most of them are made in SVG.
-
-Except for illustrations, there must be an `fill="context-fill" fill-opacity="context-fill-opacity"` property to dynamically determine color and transparency.
-
-Icons are mainly [FirefoxUX/photon-icons](https://github.com/FirefoxUX/photon-icons)
-or [microsoft/fluentui-system-icons](https://github.com/microsoft/fluentui-system-icons).
-
-#### Meta Info files
-
-It comes from [install.sh](https://github.com/black7375/Firefox-UI-Fix/blob/01ae88bf2c4710e1f364d9eb2901ca2b722cefe7/install.sh#L442).
-
-**`LEPTON` file format**
-
-If this file exist in same directory as the `userChrome.css` file,
-it is recognized as the "Lepton" installation directory.
-
-```ini
-[Info]
-Branch=master | photon-style | proton-style
-Ver=<git tag> | <git hash> | [NULL]
-```
-
-**`lepton.ini` file Format**
-
-In `lepton.ini`, various information is stored during the installation process.\
-This file is recreated every time the installer is created.
-
-```ini
-[Profile Name]
-Type=Local | Release | Git
-Branch=master | photon-style | proton-style
-Ver=<git tag> | <git hash> | [NULL]
-Path=<Full PATH>
-```
-
-**Update Policy according to `Type`**
-- Local(unknown): force latest commit update
-- Release(<git tag>): force latest tag update
-- Git<git hash>: latest commit update
-
-### Restrictions
-
-- Cross Platform
-  - Different compatibility issues occur in Win7, Win8, Win10, KDE, Gnome, Mac, etc.
-  - Consider compatibility as much as possible, but use [dedicated media queries](https://github.com/mozilla/gecko-dev/blob/d6188c9ce02efeea309e7177fc14c9eb2f09db37/servo/components/style/gecko/media_features.rs#L906-L930) in special cases
-- CSS Loading Order
-  - 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.
-- DOM structure cannot be modified
-  - It is possible with JS, 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.
-- [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)
-  - Firefox actively uses shadow dom internally
-  - To modify, it is often a roundabout approach or impossible to inherit
-- [XUL](https://en.wikipedia.org/wiki/XUL)
-  - Sometimes written and bound in C++ for performance, like a treeview of bookmarks.
-  - The proper document does not exist, so we have to read the source code and work
-  - Available CSS features are also restricted.
-- Side Effects
-  - 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).  
-
-## Rules
-
-### Version
-
-Milestone, The versioning scheme we use is [SemVer](https://semver.org/). (Maintainer decides, do not pull request.)
-
-We will release the feature as soon as it is complete, but the cycle should be 2-4 weeks.
-Rapid releases.
-
-It comes from [#109](https://github.com/black7375/Firefox-UI-Fix/issues/109#issuecomment-873313945).
-
-### Branch
-
-Stable: Only bugfix, Documentation.
-- `master`: Common bugfix, documentation.
-- `photon-style`: Bugfix, documentation specified in `photon-style`.
-- `proton-sryle`: Bugfix, documentation specified in `proton-style`.
-
-Development: New Features.
-- `dev`: Common new features.
-- `photon-style-dev`: New features specified in `photon-style`.
-- `proton-style-dev`: New features specified in `proton-style`.
-
-### Issue
-
-- **Versions:**
-- Make sure you’re on the latest version.
-- Try older versions.
-- Try switching up dependency versions.
-- **Search:** Search the project’s [issues](https://github.com/black7375/Firefox-UI-Fix/issues) to make sure it's not a known issue.
-
-### Coding style
-
-- **Indent:** 2 spaces for indentation rather than tabs.
-- **Columns:** Fit `80`~`100` columns as much as possible. (Auto formatting is using 120 to avoid the worst case)
-
-### Commit
-
-- **Meaningfully:**: It doesn't make meaningless commits.
-- **One per task:** It's difficult to distinguish when various tasks are mixed.
-- **Often:** Codes may corrupt during large changes.
-
-### Commit Message
-
-For intuitive recognition, I [put a **prefix**](https://github.com/black7375/Firefox-UI-Fix/commits/master).
-- `Add:` Add feature or enhanced.
-- `Fix:` Bug fix or change default values.
-- `Clean:` Refactoring.
-- `Doc:` Update docs.
-
-### Pull request
-
-- **Branch:** Check the [Branch](#branch) section and PR to the correct branch.
-- **Issue:** We recommend that you open the issue first to discuss the changes with the owner of this repository.
-
-### License
 
 **Any contributions you make will be under the MPL 2.0 Software License**
 

arch-config/.mozilla/firefox/default-release/chrome/CREDITS

@@ -4,6 +4,104 @@
     Thanks,
 
                  black7375
+----------
+    Major Contributors
+
+N: AveYo
+E: aveyo@yahoo.com
+W: https://github.com/AveYo
+
+N: Jan Janssen
+E: medhefgo@web.de
+W: https://github.com/medhefgo
+
+N: Yunsup Sim
+E: pedogunu@gmail.com
+W: https://ethansup.net
+
+----------
+    Contributors
+
+N: 7k5x
+E: 7k5xlp0onfire@gmail.com
+W: https://github.com/7k5x
+
+N: Ajith-stark
+E: ajith.kum.12342@gmail.com
+W: https://github.com/Ajith-stark
+
+N: Andmagdo
+W: https://github.com/andmagdo
+
+N: anzz1
+W: https://github.com/anzz1
+
+N: Backseat-Driver
+W: https://www.reddit.com/user/Backseat-Driver/
+
+N: badprogramshere
+W: https://github.com/badprogramshere
+
+N: BPower0036
+W: https://github.com/BPower0036
+
+N: Burak Yigit Kaya
+E: ben@byk.im
+W: https://byk.im/
+
+N: dr460nf1r3
+E: njcrypted@protonmail.com
+W: https://dr460nf1r3.me/
+
+N: Filip Š
+E: filip.stamcar@hotmail.com
+W: https://www.filips.si/
+
+N: hellojaccc
+E: kim@taekyeong.me
+W: https://github.com/hellojaccc
+
+N: James Upjohn
+E: jammehcow@jammehcow.co.nz
+W: https://github.com/jammehcow
+
+N: Jonta
+W: https://github.com/Jonta
+
+N: mamen
+W: https://www.mamen.at
+
+N: MarNicGit
+W: https://github.com/MarNicGit
+
+N: ph3b3
+E: phoebeleong8@gmail.com
+W: https://phoebe-leong.github.io/
+
+N: Rahul Ramkumar
+E: rahulram226@gmail.com
+W: https://rahulramkumar.dev
+
+N: Roel
+E: Nyubis@gmail.com
+W: https://github.com/Nyubis
+
+N: SanderTheDragon
+E: sanderthedragon@zoho.com
+W: https://gitlab.com/SanderTheDragon
+
+N: sean z
+E: ean@vsxd.com
+W: https://vsxd.com/
+
+N: Sylvain
+E: B00ze64@hotmail.com
+W: https://github.com/B00ze64
+
+N: Tatsuyuki Ishi
+E: ishitatsuyuki@gmail.com
+W: https://github.com/ishitatsuyuki
+
 ----------
     Reference Projects & Resources
 
@@ -107,91 +205,3 @@ N: Waterfox
 W: https://github.com/WaterfoxCo/Waterfox
 C: Copyright (c) 2012 Waterfox Limited
 L: MPL 2.0
-
-----------
-    Major Contributors
-
-N: AveYo
-E: aveyo@yahoo.com
-W: https://github.com/AveYo
-
-N: Jan Janssen
-E: medhefgo@web.de
-W: https://github.com/medhefgo
-
-N: Yunsup Sim
-E: pedogunu@gmail.com
-W: https://ethansup.net
-
-----------
-    Contributors
-
-N: 7k5x
-E: 7k5xlp0onfire@gmail.com
-W: https://github.com/7k5x
-
-N: Ajith-stark
-E: ajith.kum.12342@gmail.com
-W: https://github.com/Ajith-stark
-
-N: Andmagdo
-W: https://github.com/andmagdo
-
-N: Backseat-Driver
-W: https://www.reddit.com/user/Backseat-Driver/
-
-N: badprogramshere
-W: https://github.com/badprogramshere
-
-N: Burak Yigit Kaya
-E: ben@byk.im
-W: https://byk.im/
-
-N: dr460nf1r3
-E: njcrypted@protonmail.com
-W: https://dr460nf1r3.me/
-
-N: hellojaccc
-E: kim@taekyeong.me
-W: https://github.com/hellojaccc
-
-N: James Upjohn
-E: jammehcow@jammehcow.co.nz
-W: https://github.com/jammehcow
-
-N: Jonta
-W: https://github.com/Jonta
-
-N: mamen
-W: https://www.mamen.at
-
-N: MarNicGit
-W: https://github.com/MarNicGit
-
-N: ph3b3
-E: phoebeleong8@gmail.com
-W: https://phoebe-leong.github.io/
-
-N: Rahul Ramkumar
-E: rahulram226@gmail.com
-W: https://rahulramkumar.dev
-
-N: Roel
-E: Nyubis@gmail.com
-W: https://github.com/Nyubis
-
-N: SanderTheDragon
-E: sanderthedragon@zoho.com
-W: https://gitlab.com/SanderTheDragon
-
-N: sean z
-E: ean@vsxd.com
-W: https://vsxd.com/
-
-N: Sylvain
-E: B00ze64@hotmail.com
-W: https://github.com/B00ze64
-
-N: Tatsuyuki Ishi
-E: ishitatsuyuki@gmail.com
-W: https://github.com/ishitatsuyuki

arch-config/.mozilla/firefox/default-release/chrome/LEPTON

@@ -1,3 +1,3 @@
 [Info]
-Ver=v4.6.3
+Ver=v5.1.0
 Branch=photon-style

arch-config/.mozilla/firefox/default-release/chrome/README.org

@@ -18,10 +18,14 @@
 
 -----
 
-🔔🔔 A project redesign is in progress. #351
+🔔🔔 Did you set a custom, but not work?
 
-It's built with SCSS and all configured as options. \\
+You should copy [[./user.js][ ~user.js~ ]] file before the theme works.
-It's in beta testing, and I'am looking forward to hearing from you.
+
+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.
+
+Some settings [[https://github.com/black7375/Firefox-UI-Fix/wiki/Options#using-userjs][can be conflict]] and should be explicitly =false=.
 
 -----
 
@@ -35,8 +39,8 @@ It's in beta testing, and I'am looking forward to hearing from you.
   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/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/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://user-images.githubusercontent.com/25581533/120091976-41ea4e00-c0ff-11eb-88ca-a204cfcebe72.png]]
 
@@ -116,7 +120,7 @@ It's in beta testing, and I'am looking forward to hearing from you.
    bash -c "$(curl -fsSL https://raw.githubusercontent.com/black7375/Firefox-UI-Fix/master/install.sh)"
    #+END_SRC
 
-   Windows users: Run with powershell
+Windows users: Run with powershell ([[https://github.com/black7375/Firefox-UI-Fix/wiki/Compatibility-Issues-Solution#windows-7-powershell-script-not-works][Does not work at Win7?]])
    #+BEGIN_SRC powershell
    Powershell -c "Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iwr https://raw.githubusercontent.com/black7375/Firefox-UI-Fix/master/install.ps1 -useb | iex"
    #+END_SRC

arch-config/.mozilla/firefox/default-release/chrome/__tests__/color_scheme.test.scss

@@ -0,0 +1,126 @@
+@use 'true' as *;
+@use "example" as *;
+@use "../src/utils/color_scheme";
+
+@include test-module("Color scheme is dark [mix]") {
+  @include test("simple") {
+    @include assert {
+      @include output {
+        @include color_scheme.Dark {
+          @include example;
+        }
+      }
+      @include expect {
+        @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
+          @include example;
+        }
+      }
+    }
+  }
+
+  @include test("simple reversed") {
+    @include assert {
+      @include output {
+        @include example_tag {
+          @include color_scheme.Dark {
+            @include example_property;
+          }
+        }
+      }
+      @include expect {
+        @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
+          @include example_tag {
+            @include example_property;
+          }
+        }
+      }
+    }
+  }
+}
+
+@include test-module("Color scheme is light [mix]") {
+  @include test("simple") {
+    @include assert {
+      @include output {
+        @include color_scheme.Light {
+          @include example;
+        }
+      }
+      @include expect {
+        @media (-moz-toolbar-prefers-color-scheme: light), (prefers-color-scheme: light) {
+          @include example;
+        }
+      }
+    }
+  }
+
+  @include test("simple reversed") {
+    @include assert {
+      @include output {
+        @include example_tag {
+          @media (-moz-toolbar-prefers-color-scheme: light), (prefers-color-scheme: light) {
+            @include example_property;
+          }
+        }
+      }
+      @include expect {
+        @media (-moz-toolbar-prefers-color-scheme: light), (prefers-color-scheme: light) {
+          @include example_tag {
+            @include example_property;
+          }
+        }
+      }
+    }
+  }
+}
+
+@include test-module("Color contrast [mix]") {
+  @include test("simple") {
+    @include assert {
+      @include output {
+        @include color_scheme.Contrast {
+          @include example;
+        }
+      }
+      @include expect {
+        @media (prefers-contrast) {
+          @include example;
+        }
+      }
+    }
+  }
+}
+
+@include test-module("Color not contrast [mix]") {
+  @include test("simple") {
+    @include assert {
+      @include output {
+        @include color_scheme.NotContrast {
+          @include example;
+        }
+      }
+      @include expect {
+        @media not all and (prefers-contrast) {
+          @include example;
+        }
+      }
+    }
+  }
+}
+
+@include test-module("Animate, not reduced motion [mix]") {
+  @include test("simple") {
+    @include assert {
+      @include output {
+        @include color_scheme.Animate {
+          @include example;
+        }
+      }
+      @include expect {
+        @media (prefers-reduced-motion: no-preference) {
+          @include example;
+        }
+      }
+    }
+  }
+}

arch-config/.mozilla/firefox/default-release/chrome/__tests__/each.test.scss

@@ -0,0 +1,98 @@
+@use 'true' as *;
+@use "example" as *;
+@use "../src/utils/each";
+
+@include test-module("Create each at rules [mix]") {
+  @include test("prefix single") {
+    @include assert {
+      @include output {
+        @include each.AtEach("-moz-document", "about:home", "url") {
+          @include example;
+        }
+      }
+      @include expect {
+        @-moz-document url(about:home) {
+          @include example;
+        }
+      }
+    }
+  }
+
+  @include test("prefix multiple") {
+    @include assert {
+      @include output {
+        $input: "about:home" "about:newtab";
+        @include each.AtEach("-moz-document", $input, "url") {
+          @include example;
+        }
+      }
+      @include expect {
+        @-moz-document url(about:home), url(about:newtab) {
+          @include example;
+        }
+      }
+    }
+  }
+
+  @include test("null prefix single") {
+    @include assert {
+      @include output {
+        @include each.AtEach("media", "max-width: 1024px") {
+          @include example;
+        }
+      }
+      @include expect {
+        @media (max-width: 1024px) {
+          @include example;
+        }
+      }
+    }
+  }
+
+  @include test("null prefix multiple") {
+    @include assert {
+      @include output {
+        $input: "hover: hover" "max-width: 1024px";
+        @include each.AtEach("media", $input) {
+          @include example;
+        }
+      }
+      @include expect {
+        @media (hover: hover), (max-width: 1024px) {
+          @include example;
+        }
+      }
+    }
+  }
+
+  @include test("prefix custom option") {
+    @include assert {
+      @include output {
+        @include each.AtEach("supports", "userChrome.tab.photon", "-moz-bool-pref", ("seperator": " or ", "quoted": true)) {
+          @include example;
+        }
+      }
+      @include expect {
+        @supports -moz-bool-pref("userChrome.tab.photon") {
+          @include example;
+        }
+      }
+    }
+  }
+
+  @include test("prefix custom option multiple") {
+    @include assert {
+      @include output {
+        $input: "userChrome.tab.photon" "userChrome.padding.photon";
+        @include each.AtEach("supports", $input, "-moz-bool-pref", ("seperator": " or ", "quoted": true)) {
+          @include example;
+        }
+      }
+      @include expect {
+        @supports -moz-bool-pref("userChrome.tab.photon") or -moz-bool-pref("userChrome.padding.photon") {
+          @include example;
+        }
+      }
+    }
+  }
+}

arch-config/.mozilla/firefox/default-release/chrome/__tests__/example.scss

@@ -0,0 +1,14 @@
+@mixin example_tag() {
+  body {
+    @content;
+  }
+}
+@mixin example_property() {
+  font-size: 16px;
+}
+
+@mixin example() {
+  @include example_tag {
+    @include example_property;
+  }
+}

arch-config/.mozilla/firefox/default-release/chrome/__tests__/list.test.scss

@@ -0,0 +1,31 @@
+@use 'true' as *;
+@use "../src/utils/list";
+
+// TODO: Need more tests..
+$simpleList: (ab cd efgh ijk);
+$dupList: (ab cd efgh efgh efgh ijk);
+
+@include test-module("Remove at list [fn]") {
+  @include test("simple") {
+    @include assert-equal(
+      list.remove($simpleList, "cd"),
+      (ab efgh ijk)
+    );
+  }
+
+  @include test("duplicate") {
+    @include assert-equal(
+      list.remove($dupList, "efgh"),
+      (ab cd ijk)
+    );
+  }
+}
+
+@include test-module("Convert to str [fn]") {
+  @include test("simple") {
+    @include assert-equal(
+      list.to-string($simpleList),
+      (((null ab) cd) efgh) ijk
+    );
+  }
+}

arch-config/.mozilla/firefox/default-release/chrome/__tests__/media.test.scss

@@ -0,0 +1,72 @@
+@use 'true' as *;
+@use "example" as *;
+@use "../src/utils/media";
+
+// TODO: Need more tests..
+@include test-module("Create each media at once [mix]") {
+  @include test("simple") {
+    @include assert {
+      @include output {
+        $input: "hover: hover" "max-width: 1024px";
+        @include media.each($input...) {
+          @include example;
+        }
+      }
+      @include expect {
+        @media (hover: hover), (max-width: 1024px) {
+          @include example;
+        }
+      }
+    }
+  }
+
+  @include test("beyond") {
+    @include assert {
+      @include output {
+        $input: "hover: hover" "max-width: 1024px";
+        @include example_tag {
+          @include media.each($input...) {
+            font-size: 16px;
+          }
+        }
+      }
+      @include expect {
+        @media (hover: hover), (max-width: 1024px) {
+          @include example_tag {
+            @include example_property;
+          }
+        }
+      }
+    }
+  }
+
+  @include test("null") {
+    @include assert {
+      @include output {
+        $input: ();
+        @include example_tag {
+          @include media.each($input) {
+            @include example_property;
+          }
+        }
+      }
+      @include expect {
+      }
+    }
+  }
+
+  @include test("null element") {
+    @include assert {
+      @include output {
+        $input: (null);
+        @include example_tag {
+          @include media.each($input) {
+            @include example_property;
+          }
+        }
+      }
+      @include expect {
+      }
+    }
+  }
+}

arch-config/.mozilla/firefox/default-release/chrome/__tests__/option.test.scss

@@ -0,0 +1,54 @@
+@use 'true' as *;
+@use "example" as *;
+@use "../src/utils/option";
+
+@include test-module("If exist pref [mix]") {
+  @include test("simple") {
+    @include assert {
+      @include output {
+        @include option.Option("userChrome.tab.photon") {
+          @include example;
+        }
+      }
+      @include expect {
+        @supports -moz-bool-pref("userChrome.tab.photon") {
+          @include example;
+        }
+      }
+    }
+  }
+
+  @include test("multiple") {
+    @include assert {
+      @include output {
+        @include option.Option("userChrome.tab.photon", "userChrome.padding.photon") {
+          @include example;
+        }
+      }
+      @include expect {
+        @supports -moz-bool-pref("userChrome.tab.photon") or -moz-bool-pref("userChrome.padding.photon") {
+          @include example;
+        }
+      }
+    }
+  }
+}
+
+@include test-module("If not exist pref [mx]") {
+  @include test("simple") {
+    @include assert {
+      @include output {
+        @include option.NotOption("userChrome.tab.photon") {
+          @include example;
+        }
+      }
+      @include expect {
+        @supports not -moz-bool-pref("userChrome.tab.photon") {
+          @include example;
+        }
+      }
+    }
+  }
+
+  // Need multiple test
+}

arch-config/.mozilla/firefox/default-release/chrome/__tests__/os.test.scss

@@ -0,0 +1,147 @@
+@use 'true' as *;
+@use "example" as *;
+@use "../src/utils/os" as *;
+
+// TODO: Need more tests..
+@include test-module("Create OS related media [mix]") {
+  @include test("win7") {
+    @include assert {
+      @include output {
+        @include OS($win7) {
+          @include example;
+        }
+      }
+      @include expect {
+        @media (-moz-os-version: windows-win7), (-moz-platform: windows-win7) {
+          @include example;
+        }
+      }
+    }
+  }
+
+  @include test("win8") {
+    @include assert {
+      @include output {
+        @include OS($win8) {
+          @include example;
+        }
+      }
+      @include expect {
+        @media (-moz-os-version: windows-win8), (-moz-platform: windows-win8) {
+          @include example;
+        }
+      }
+    }
+  }
+
+  @include test("win10") {
+    @include assert {
+      @include output {
+        @include OS($win10) {
+          @include example;
+        }
+      }
+      @include expect {
+        @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) {
+          @include example;
+        }
+      }
+    }
+  }
+
+  @include test("linux") {
+    @include assert {
+      @include output {
+        @include OS($linux) {
+          @include example;
+        }
+      }
+      @include expect {
+        @media (-moz-gtk-csd-available) {
+          @include example;
+        }
+      }
+    }
+  }
+
+  @include test("mac") {
+    @include assert {
+      @include output {
+        @include OS($mac) {
+          @include example;
+        }
+      }
+      @include expect {
+        @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
+          @include example;
+        }
+      }
+    }
+  }
+
+  @include test("bigsur") {
+    @include assert {
+      @include output {
+        @include OS($bigsur) {
+          @include example;
+        }
+      }
+      @include expect {
+        @media (-moz-mac-big-sur-theme: 0) {
+          @include example;
+        }
+      }
+    }
+  }
+
+  @include test("win") {
+    @include assert {
+      @include output {
+        @include OS($win) {
+          @include example;
+        }
+      }
+      @include expect {
+        @media (-moz-os-version: windows-win7), (-moz-platform: windows-win7), (-moz-os-version: windows-win8), (-moz-platform: windows-win8), (-moz-os-version: windows-win10), (-moz-platform: windows-win10) {
+          @include example;
+        }
+      }
+    }
+  }
+
+  @include test("all os - win7, win8, win10, mac, bigsur, linux") {
+    @include assert {
+      @include output {
+        @include OS($win7, $win8, $win10, $mac, $bigsur, $linux) {
+          @include example;
+        }
+      }
+      @include expect {
+        @media (-moz-os-version: windows-win7), (-moz-platform: windows-win7), (-moz-os-version: windows-win8), (-moz-platform: windows-win8), (-moz-os-version: windows-win10), (-moz-platform: windows-win10), (-moz-mac-big-sur-theme: 0), (-moz-gtk-csd-available) {
+          @include example;
+        }
+        @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
+          @include example;
+        }
+      }
+    }
+  }
+
+  @include test("all os - win, mac, bigsur, linux") {
+    @include assert {
+      @include output {
+        @include OS($win, $mac, $bigsur, $linux) {
+          @include example;
+        }
+      }
+      @include expect {
+        @media (-moz-mac-big-sur-theme: 0), (-moz-gtk-csd-available), (-moz-os-version: windows-win7), (-moz-platform: windows-win7), (-moz-os-version: windows-win8), (-moz-platform: windows-win8), (-moz-os-version: windows-win10), (-moz-platform: windows-win10) {
+          @include example;
+        }
+        @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
+          @include example;
+        }
+      }
+    }
+  }
+}

arch-config/.mozilla/firefox/default-release/chrome/__tests__/scss.spec.js

@@ -0,0 +1,14 @@
+const path = require("path");
+const sassTrue = require("sass-true");
+const glob = require("fast-glob");
+
+// https://www.educative.io/blog/sass-tutorial-unit-testing-with-sass-true
+// Find all of the Sass files that end in `*.test.scss` in any directory of this project.
+// I use path.resolve because True requires absolute paths to compile test files.
+const pattern = path.resolve(process.cwd(), "__tests__/**/*.test.scss");
+const sassTestFiles = glob.sync([pattern]);
+
+// Run True on every file found with the describe and it methods provided
+sassTestFiles.forEach(file => {
+  describe(file, () => sassTrue.runSass({ file }, { describe, it }));
+});

arch-config/.mozilla/firefox/default-release/chrome/__tests__/theme.test.scss

@@ -0,0 +1,192 @@
+@use 'true' as *;
+@use "example" as *;
+@use "sass:selector";
+@use "../src/utils/theme";
+
+@include test-module("System Default Theme Selector [fn]") {
+  @include test("simple") {
+    @include assert {
+      @include output {
+        #{theme.system-default-theme()} {
+          @include example_property;
+        }
+      }
+      @include expect {
+        :root:not(:-moz-lwtheme), :root[lwt-default-theme-in-dark-mode] {
+          @include example_property;
+        }
+      }
+    }
+  }
+
+  @include test("append selector") {
+    @include assert {
+      @include output {
+        #{selector.append(theme.system-default-theme(), "[inFullscreen=true]")} {
+          @include example_property;
+        }
+      }
+      @include expect {
+        :root:not(:-moz-lwtheme)[inFullscreen=true], :root[lwt-default-theme-in-dark-mode][inFullscreen=true] {
+          @include example_property;
+        }
+      }
+    }
+  }
+
+  @include test("nested selector") {
+    @include assert {
+      @include output {
+        #{selector.nest(theme.system-default-theme(), "#navigator-toolbox")} {
+          @include example_property;
+        }
+      }
+      @include expect {
+        :root:not(:-moz-lwtheme) #navigator-toolbox, :root[lwt-default-theme-in-dark-mode] #navigator-toolbox {
+          @include example_property;
+        }
+      }
+    }
+  }
+}
+
+@include test-module("Built-In Default Theme Selector [fn]") {
+  @include test("simple") {
+    @include assert {
+      @include output {
+        #{theme.built-in-default-theme()} {
+          @include example_property;
+        }
+      }
+      @include expect {
+        :root[lwtheme-mozlightdark], :root:is([style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) {
+          @include example_property;
+        }
+      }
+    }
+  }
+
+  @include test("append selector") {
+    @include assert {
+      @include output {
+        #{selector.append(theme.built-in-default-theme(), "[inFullscreen=true]")} {
+          @include example_property;
+        }
+      }
+      @include expect {
+        :root[lwtheme-mozlightdark][inFullscreen=true], :root:is([style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"])[inFullscreen=true] {
+          @include example_property;
+        }
+      }
+    }
+  }
+
+  @include test("nested selector") {
+    @include assert {
+      @include output {
+        #{selector.nest(theme.built-in-default-theme(), "#navigator-toolbox")} {
+          @include example_property;
+        }
+      }
+      @include expect {
+        :root[lwtheme-mozlightdark] #navigator-toolbox, :root:is([style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) #navigator-toolbox {
+          @include example_property;
+        }
+      }
+    }
+  }
+}
+
+@include test-module("Built-In Light Theme Selector [fn]") {
+  @include test("simple") {
+    @include assert {
+      @include output {
+        #{theme.built-in-light-theme()} {
+          @include example_property;
+        }
+      }
+      @include expect {
+        :root[lwtheme-mozlightdark]:not([lwthemetextcolor=bright]), :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] {
+          @include example_property;
+        }
+      }
+    }
+  }
+
+  @include test("append selector") {
+    @include assert {
+      @include output {
+        #{selector.append(theme.built-in-light-theme(), "[inFullscreen=true]")} {
+          @include example_property;
+        }
+      }
+      @include expect {
+        :root[lwtheme-mozlightdark]:not([lwthemetextcolor=bright])[inFullscreen=true], :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"][inFullscreen=true] {
+          @include example_property;
+        }
+      }
+    }
+  }
+
+  @include test("nested selector") {
+    @include assert {
+      @include output {
+        #{selector.nest(theme.built-in-light-theme(), "#navigator-toolbox")} {
+          @include example_property;
+        }
+      }
+      @include expect {
+        :root[lwtheme-mozlightdark]:not([lwthemetextcolor=bright]) #navigator-toolbox, :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] #navigator-toolbox {
+          @include example_property;
+        }
+      }
+    }
+  }
+}
+
+@include test-module("Built-In Dark Theme Selector [fn]") {
+  @include test("simple") {
+    @include assert {
+      @include output {
+        #{theme.built-in-dark-theme()} {
+          @include example_property;
+        }
+      }
+      @include expect {
+        :root[lwtheme-mozlightdark][lwthemetextcolor=bright], :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] {
+          @include example_property;
+        }
+      }
+    }
+  }
+
+  @include test("append selector") {
+    @include assert {
+      @include output {
+        #{selector.append(theme.built-in-dark-theme(), "[inFullscreen=true]")} {
+          @include example_property;
+        }
+      }
+      @include expect {
+        :root[lwtheme-mozlightdark][lwthemetextcolor=bright][inFullscreen=true], :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][inFullscreen=true] {
+          @include example_property;
+        }
+      }
+    }
+  }
+
+  @include test("nested selector") {
+    @include assert {
+      @include output {
+        #{selector.nest(theme.built-in-dark-theme(), "#navigator-toolbox")} {
+          @include example_property;
+        }
+      }
+      @include expect {
+        :root[lwtheme-mozlightdark][lwthemetextcolor=bright] #navigator-toolbox, :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] #navigator-toolbox {
+          @include example_property;
+        }
+      }
+    }
+  }
+}

arch-config/.mozilla/firefox/default-release/chrome/docs/Omni_ja.md

@@ -0,0 +1,40 @@
+# Omni.ja
+
+<!-- markdown-toc start - Don't edit this section. Run M-x markdown-toc-refresh-toc -->
+**Table of Contents**
+
+- [Basics](#basics)
+- [Related Project](#related-project)
+- [Related Source file](#related-source-file)
+
+<!-- markdown-toc end -->
+
+
+## Basics
+**Related Docs**
+- [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/)
+
+**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`.  
+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.
+
+- `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.
+- `chrome/`: User interface files for the application
+- `components/`: XPCOM components the application relies upon.
+- `defaults/`: Default preference files.
+- `modules/`: [JavaScript code modules](https://udn.realityripple.com/docs/Mozilla/JavaScript_code_modules).
+- `res/`: Miscellaneous resource files.
+
+## Related Project
+- https://github.com/SebastianSimon/firefox-omni-tweaks
+
+## Related Source file
+- https://github.com/mozilla/gecko-dev/blob/de91f5ee41251779ff2973d24d195d116cb6ebd7/python/mozbuild/mozpack/packager/formats.py#L258-L359
+- https://github.com/humphd/mozilla-central-old/blob/9d4d9f265e24e6358c067ae1e300c1ce3227a91d/config/optimizejars.py

arch-config/.mozilla/firefox/default-release/chrome/docs/Preference.md

@@ -0,0 +1,246 @@
+# Preference
+
+<!-- markdown-toc start - Don't edit this section. Run M-x markdown-toc-refresh-toc -->
+**Table of Contents**
+
+- [Basics](#basics)
+- [Default Config](#default-config)
+- [User Config](#user-config)
+  * [about:config](#aboutconfig)
+  * [prefs.js](#prefsjs)
+  * [user.js](#userjs)
+- [Auto Config](#auto-config)
+- [Using with User Custom CSS](#using-with-user-custom-css)
+- [Sync](#sync)
+- [Related Source file](#related-source-file)
+
+<!-- markdown-toc end -->
+
+## Basics
+**Related Docs**
+- [Firefox Source Docs: libpref](https://firefox-source-docs.mozilla.org/modules/libpref/index.html)
+
+**Key/Value**
+- Key:
+  - Pref name
+  - Type: 8-bit string
+  - 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"`)
+
+**Main Purpose**
+- Feature enable/disable flags (Ex. `xpinstall.signatures.required`).
+- User preferences (Ex. things set from `about:preferences`)
+- Internal application parameters (Ex. `javascript.options.mem.nursery.max_kb`).
+- Application data (Ex. `browser.onboarding.tour.onboarding-tour-addons.completed`, `services.sync.clients.lastSync`).
+- Things that might need locking in an enterprise installation.
+
+**Preference file RFC**
+
+Key information on the sets that can be used in the configuration file.
+
+- `pref()`: Set default pref
+  - `sticky` attr: same as `sticky_pref()`
+  - `locked` attr: cannot change from default.
+- `sticky_pref()`: Always logged even if the defaults match
+- `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.
+
+```ebnf
+<pref-file>   = <pref>*
+<pref>        = <pref-spec> "(" <pref-name> "," <pref-value> <pref-attrs> ")" ";"
+<pref-spec>   = "user_pref" | "pref" | "sticky_pref" // in default pref files
+<pref-spec>   = "user_pref"                          // in user pref files
+<pref-name>   = <string-literal>
+<pref-value>  = <string-literal> | "true" | "false" | <int-value>
+<int-value>   = <sign>? <int-literal>
+<sign>        = "+" | "-"
+<int-literal> = [0-9]+ (and cannot be followed by [A-Za-z_])
+<string-literal> =
+  A single or double-quoted string, with the following escape sequences
+  allowed: \", \', \\, \n, \r, \xNN, \uNNNN, where \xNN gives a raw byte
+  value that is copied directly into an 8-bit string value, and \uNNNN
+  gives a UTF-16 code unit that is converted to UTF-8 before being copied
+  into an 8-bit string value. \x00 and \u0000 are disallowed because they
+  would cause C++ code handling such strings to misbehave.
+<pref-attrs>  = ("," <pref-attr>)*      // in default pref files
+              = <empty>                 // in user pref files
+<pref-attr>   = "sticky" | "locked"     // default pref files only
+```
+
+## 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
+
+In release builds these are all put into [`omni.ja`](./Omni_ja.md).
+
+## User Config
+**Related Docs**
+- [mozillaZine: Editing configuration](https://kb.mozillazine.org/Editing_configuration)
+- [Support Mozilla: How to fix preferences that won't save](https://support.mozilla.org/en-US/kb/how-to-fix-preferences-wont-save)
+- [Support Mozilla: Reset Firefox preferences to troubleshoot and fix problems](https://support.mozilla.org/en-US/kb/reset-preferences-fix-problems)
+- [UDN: A brief guide to Mozilla preferences](https://udn.realityripple.com/docs/Mozilla/Preferences/A_brief_guide_to_Mozilla_preferences)
+
+**Restrictions**
+
+It can be defined using only `user_pref()`.
+
+> User pref file syntax is slightly more restrictive than default pref file syntax. In user pref files `user_pref` definitions are allowed but `pref` and `sticky_pref` definitions are not, and attributes (such as `locked`) are not allowed.
+
+**File Path**
+
+`prefs.js`, `user.js`  is located in the profile directory.
+
+### about:config
+
+It is written to `prefs.js` in a way that can be set by the GUI.
+
+- [Support Mozilla: Configuration Editor for Firefox](https://support.mozilla.org/en-US/kb/about-config-editor-firefox)
+
+### prefs.js
+**Related Docs**
+- [mozillaZine: Prefs.js file](https://kb.mozillazine.org/Prefs.js_file)
+
+**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.
+
+### user.js
+**Related Docs**
+- [mozillaZine: User.js file](https://kb.mozillazine.org/User.js_file)
+
+**Restrictions**
+
+A `user.js` file can make certain preference settings more or less "permanent" in a specific profile.
+
+Once an entry for a preference setting exists in the `user.js` file, any change you make to that setting in the options and preference dialogs or via `about:config` will be lost when you restart your firefox because the `user.js` entry will override it.
+
+You'll have to first delete or edit the `user.js` file to remove the entries before the preferences can be changed in the application.
+
+**Example**
+
+```javascript
+// user.js
+user_pref("browser.cache.disk.enable", false);                      // Bool
+user_pref("layout.css.prefers-color-scheme.content-override", 3);   // Int
+user_pref("general.smoothScroll.currentVelocityWeighting", "0.12"); // String
+```
+
+## Auto Config
+**Related Docs**
+- [Support Mozilla: Customizing Firefox Using AutoConfig](https://support.mozilla.org/en-US/kb/customizing-firefox-using-autoconfig)
+- [What is Autoconfig Startup Scripting (AKA userChrome.js)?](https://www.userchrome.org/what-is-userchrome-js.html)
+- [UDN: Gecko Chrome](https://udn.realityripple.com/docs/Mozilla/Gecko/Chrome)
+- [UDN: JavaScript code modules](https://udn.realityripple.com/docs/Mozilla/JavaScript_code_modules)
+- [UDN: Limitations of chrome scripts](https://udn.realityripple.com/docs/Mozilla/Firefox/Multiprocess_Leftovers/Limitations_of_chrome_scripts)
+
+**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`.
+
+**How to**
+```javascript
+pref("general.config.filename", "config.js"); // alternative to "firefox.cfg", for using highlight
+pref("general.config.obscure_value", 0);
+```
+
+**Example**
+```javascript
+pref("general.config.filename", "config.js"); // alternative to "firefox.cfg", for using highlight
+pref("general.config.obscure_value", 0);
+```
+
+## Using with User Custom CSS
+**Related Docs**
+- [MDN: @supports](https://developer.mozilla.org/en-US/docs/Web/CSS/@supports)
+- [UDN: `CSS -moz-bool-pref() @supports function`](https://udn.realityripple.com/docs/Mozilla/Gecko/Chrome/CSS/-moz-bool-pref)
+
+**Restrictions**
+
+Please refer to [Doc: Restrictions.md](./Restrictions.md#supports)'s `@support`.
+
+**Example**
+
+Test each case by turning on/off the following settings.
+- `userChrome.navBar.red`
+- `userChrome.navBar.margin`
+
+```css
+/* userChrome.css */
+
+/* 1. If config is true */
+@supports -moz-bool-pref("userChrome.navBar.red") {
+  #nav-bar {
+    background-color: red !important;
+  }
+}
+
+/* 2. When any one of the config is true */
+@supports -moz-bool-pref("userChrome.navBar.red") or -moz-bool-pref("userChrome.navBar.margin") {
+  #nav-bar {
+    background-color: red !important;
+    margin-block: 20px;
+  }
+}
+
+/* 3. Multiple configs must all be satisfied */
+@supports -moz-bool-pref("userChrome.navBar.red") and -moz-bool-pref("userChrome.navBar.margin") {
+  #nav-bar {
+    background-color: red !important;
+    margin-block: 20px;
+  }
+}
+
+/* 4. 3's Other version */
+@supports -moz-bool-pref("userChrome.navBar.red") {
+  @supports -moz-bool-pref("userChrome.navBar.margin") {
+    #nav-bar {
+      background-color: red !important;
+      margin-block: 20px;
+    }
+  }
+}
+
+/* 5. If not exist or false */
+@supports not -moz-bool-pref("userChrome.navBar.red") {
+  #nav-bar {
+    background-color: blue !important;
+  }
+}
+```
+
+## Sync
+
+**Related Docs**
+- [Support Mozilla: Sync custom preferences](https://support.mozilla.org/en-US/kb/sync-custom-preferences)
+
+**How to**
+
+Firefox Sync allows you to [choose the types of data](https://support.mozilla.org/en-US/kb/how-do-i-choose-what-information-sync-firefox) to sync across all devices.
+
+![Choose sync data](https://user-images.githubusercontent.com/25581533/162106009-85f8efe6-c310-488b-9940-763b6e7dd271.png)
+
+The following options are required to sync custom configs.
+- `services.sync.prefs.dangerously_allow_arbitrary` to `true`
+
+Then, subsequently any pref can be pushed there by creating a remote with prefix.
+- `services.sync.prefs.sync.`
+
+**Example**
+
+```javascript
+// user.js
+user_pref("services.sync.prefs.dangerously_allow_arbitrary", true); // Must need
+
+// Sync UI
+user_pref("services.sync.prefs.sync.browser.uiCustomization.state", true);
+user_pref("services.sync.prefs.sync.browser.uidensity", true);
+```
+
+## Related Source file
+
+- https://github.com/mozilla/gecko-dev/blob/master/modules/libpref/parser/src/lib.rs
+- https://github.com/mozilla/gecko-dev/blob/master/extensions/pref/autoconfig/src/prefcalls.js

arch-config/.mozilla/firefox/default-release/chrome/docs/Project_Structure.md

@@ -0,0 +1,98 @@
+# Project Structure
+
+<!-- markdown-toc start - Don't edit this section. Run M-x markdown-toc-refresh-toc -->
+**Table of Contents**
+
+- [Basics](#basics)
+- [Icon files](#icon-files)
+- [Install Scripts](#install-scripts)
+  * [Meta Info files](#meta-info-files)
+  * [Overriding](#overriding)
+
+<!-- markdown-toc end -->
+
+## Basics
+The overall structure of this project.
+
+```
+root
+|- __tests__/: Mixin spec test
+|- icons/: Icons, illustrations
+|- css/: Build result of SCSS Files
+|- docs/: Development Documents
+|- 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`
+|- .github: Issue/PR Template, Github Actions
+|- .prettierignore: Exclude coding style
+|- .prettierrc.json: Coding style
+|- install.ps1: Install script write in powersehll
+|- install.sh: Install script write in bash
+|- package.json: Build setup, package dependency
+|- LEPTON: Meta infos (branch, version)
+|- user.js: about:config settings
+|- userChrome.css: Entry of css for Browser UI (Don't modify directly!!)
+|- userContent.css: Entry of css for Web pages (Don't modify directly!!)
+|- yarn.lock: Auto generated dependency (Don't modify directly!!)
+```
+
+## Icon files
+
+Most of them are made in SVG.
+
+Except for illustrations, there must be an `fill="context-fill" fill-opacity="context-fill-opacity"` property to dynamically determine color and transparency.
+
+Icons are mainly [FirefoxUX/photon-icons](https://github.com/FirefoxUX/photon-icons)
+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).
+
+## Install Scripts
+### Meta Info files
+
+It comes from [install.sh](https://github.com/black7375/Firefox-UI-Fix/blob/01ae88bf2c4710e1f364d9eb2901ca2b722cefe7/install.sh#L442).
+
+**`LEPTON` file format**
+
+If this file exist in same directory as the `userChrome.css` file,
+it is recognized as the "Lepton" installation directory.
+
+```ini
+[Info]
+Branch=master | photon-style | proton-style
+Ver=<git tag> | <git hash> | [NULL]
+```
+
+**`lepton.ini` file Format**
+
+In `lepton.ini`, various information is stored during the installation process.\
+This file is recreated every time the installer is created.
+
+```ini
+[Profile Name]
+Type=Local | Release | Git
+Branch=master | photon-style | proton-style
+Ver=<git tag> | <git hash> | [NULL]
+Path=<Full PATH>
+```
+
+**Update Policy according to `Type`**
+- Local(unknown): force latest commit update
+- Release(<git tag>): force latest tag update
+- Git<git hash>: latest commit update
+
+## Overriding
+
+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_OVERRIDES>` (Will be copied `<FIREFOX_PROFILE>/chrome/`)
+- `<FIREFOX_PROFILE>/chrome/<CSS_OVERRIDES>`
+
+`user-overrides.js` needs to use a shell script and has some priorities.
+- `<FIREFOX_PROFILE>/user-overrides.js`
+- `./user-overrides.js` (Will be copied `<FIREFOX_PROFILE>/chrome/`)
+- `<FIREFOX_PROFILE>/chrome/user-overrides.js`

arch-config/.mozilla/firefox/default-release/chrome/docs/README.md

@@ -0,0 +1,119 @@
+# Develper Documents for Firefox Custom
+
+<!-- markdown-toc start - Don't edit this section. Run M-x markdown-toc-refresh-toc -->
+**Table of Contents**
+
+- [Basics](#basics)
+- [Project-Specific](#project-specific)
+  * [Environment](#environment)
+  * [Project Structure](#project-structure)
+  * [Rules](#rules)
+- [Advanced Customizing](#advanced-customizing)
+  * [Smart Bookmarks](#smart-bookmarks)
+  * [Policies](#policies)
+  * [Preference](#preference)
+- [User Custom CSS](#user-custom-css)
+  * [Basics](#basics-1)
+  * [Restrictions](#restrictions)
+
+<!-- markdown-toc end -->
+
+## Basics
+The following documents may be helpful:
+- [Roadmap](https://github.com/black7375/Firefox-UI-Fix/issues/2)
+- [Each Versions Plan](https://github.com/black7375/Firefox-UI-Fix/milestones)
+- [Wiki:Compatibility Issues Solution](https://github.com/black7375/Firefox-UI-Fix/wiki/Compatibility-Issues-Solution)
+- [Wiki:Tips](https://github.com/black7375/Firefox-UI-Fix/wiki/Tips)
+
+Firefox Source Code:
+- [Github](https://github.com/mozilla/gecko-dev)
+- [Searchfox](https://searchfox.org/)
+- [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)
+- [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)
+
+Test for None 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.
+
+You can configure it as follows:
+```shell
+## clone repository
+git clone https://github.com/black7375/Firefox-UI-Fix.git
+cd ./Firefox-UI-Fix
+
+## checkout branch
+git checkout <BRANCH_NAME>
+
+## env setup
+yarn install
+```
+
+You can build with this command:
+```shell
+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.
+yarn test
+
+## validate - Will be failed, this project uses non-standard features.
+# Just use only for checking.
+yarn validate
+```
+
+### Project Structure
+- [Doc: Project\_Structure.md](./Project_Structure.md).
+
+### Rules
+This is a rough guideline. (Not forced)
+
+- [Doc: Rules.md](./Rules.md).
+
+## Advanced Customizing
+### Smart Bookmarks
+- [Doc: Smart_Bookmarks.md](./Smart_Bookmarks.md).
+
+### Policies
+- [Support Mozilla: Policies overview](https://support.mozilla.org/en-US/products/firefox-enterprise/policies-customization-enterprise/policies-overview-enterprise)
+- [Policy Templates](https://github.com/mozilla/policy-templates)
+
+### Preference
+- [Doc: Preference.md](./Preference.md).
+
+## User Custom CSS
+### 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/`.
+
+Start Guide:
+- [What is userChrome.css? What can it do?](https://www.userchrome.org/what-is-userchrome-css.html)
+- [How to Create a userChrome.css File](https://www.userchrome.org/how-create-userchrome-css.html)
+- [Where to Find Style Recipes](https://www.userchrome.org/find-user-style-recipes.html)
+
+CSS, SASS Documents:
+- [MDN: CSS](https://developer.mozilla.org/en-US/docs/Web/CSS)
+- [MDN: Introducing the CSS Cascade](https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade)
+- [SASS(SCSS)](https://sass-lang.com/documentation)
+- [SASS Live Compile](https://www.sassmeister.com/)
+
+Live Debugging:
+- [Tutorial: How to create and live-debug userChrome.css](https://www.reddit.com/r/FirefoxCSS/comments/73dvty/tutorial_how_to_create_and_livedebug_userchromecss/)
+- [Browser Toolbox](https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox)
+- [Style Editor](https://developer.mozilla.org/en-US/docs/Tools/Style_Editor)
+
+Advanced CSS keywords:
+- [UDN: Chrome-only CSS reference](https://udn.realityripple.com/docs/Mozilla/Gecko/Chrome/CSS)
+- [UDN: Mozilla CSS extensions](https://udn.realityripple.com/docs/Web/CSS/Mozilla_Extensions)
+
+### Restrictions
+- [Doc: Restrictions.md](./Restrictions.md).

arch-config/.mozilla/firefox/default-release/chrome/docs/Restrictions.md

@@ -0,0 +1,216 @@
+# Restrictions
+<!-- markdown-toc start - Don't edit this section. Run M-x markdown-toc-refresh-toc -->
+**Table of Contents**
+
+- [Compatibility](#compatibility)
+  * [Cross Platform](#cross-platform)
+  * [Firefox Version](#firefox-version)
+  * [Side Effect](#side-effect)
+- [Internals](#internals)
+  * [CSS Loading Order](#css-loading-order)
+  * [DOM structure cannot be modified](#dom-structure-cannot-be-modified)
+  * [Shadow DOM](#shadow-dom)
+  * [XUL](#xul)
+  * [Supports](#supports)
+  * [Namespace](#namespace)
+  * [Import](#import)
+
+<!-- markdown-toc end -->
+
+## Compatibility
+### Cross Platform
+Different compatibility issues occur in Win7, Win8, Win10, KDE, Gnome, Mac, etc.
+
+For example, The appearance of the context menu varies from platform to platform.
+
+![context menu](https://user-images.githubusercontent.com/25581533/124066951-0eb21c00-da29-11eb-9ac4-c6b82a268c6f.png)
+
+Consider compatibility as much as possible, but use [dedicated media queries](https://github.com/mozilla/gecko-dev/blob/d6188c9ce02efeea309e7177fc14c9eb2f09db37/servo/components/style/gecko/media_features.rs#L906-L930) in special cases.
+
+Even the implementation is also different like [Context menu's image](https://github.com/black7375/Firefox-UI-Fix/blob/36e9c94844fee2417662251cbd50c2b874d5b576/userChrome.css#L4558-L4595).  
+If you need to implement it in a variety of forms, make a sort of API using [`css var()`](https://developer.mozilla.org/en-US/docs/Web/CSS/var).
+
+Problems that are not [`appearance: auto`](https://developer.mozilla.org/en-US/docs/Web/CSS/appearance#values) may require emulation like [Win7, 8's menu active color](https://github.com/black7375/Firefox-UI-Fix/blob/36e9c94844fee2417662251cbd50c2b874d5b576/userChrome.css#L146-L223).  
+Complex UI emulation is quite tricky. [[Linux's Proton UI Library Chrome](https://github.com/black7375/Firefox-UI-Fix/blob/36e9c94844fee2417662251cbd50c2b874d5b576/userChrome.css#L2113-L2504), [Linux's Proton UI Library Content](https://github.com/black7375/Firefox-UI-Fix/blob/36e9c94844fee2417662251cbd50c2b874d5b576/userContent.css#L1458)]
+
+[Bookmark menu](https://github.com/black7375/Firefox-UI-Fix/issues/136) is also similar example([code](https://github.com/black7375/Firefox-UI-Fix/blob/36e9c94844fee2417662251cbd50c2b874d5b576/userChrome.css#L4745-L4840)).
+
+### Firefox Version
+There may be changes that change by version of Firefox.
+
+It's [more frequent than your thought](https://github.com/black7375/Firefox-UI-Fix/issues?q=is%3Aissue+label%3Aupstream+), and we need to respond to compatibility between [Nightly](https://www.mozilla.org/en-US/firefox/nightly/notes/) and [ESR](https://www.mozilla.org/en-US/firefox/organizations/notes/) versions.
+
+This project is using SCSS to make a [reusable compatible mixins](../src/utils).
+```scss
+@include OS($linux) {
+  // Your CSS
+}
+
+@include Dark {
+  // Your CSS
+}
+```
+
+### 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).
+
+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)
+```css
+#nav-bar {
+  display: flex;
+}
+```
+Info: `#nav-bar` is [`toolbar`](https://udn.realityripple.com/docs/Archive/Mozilla/XUL/toolbar).
+
+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)
+
+## Internals
+### CSS Loading Order
+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)
+
+### 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.
+
+[`::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.
+
+Many implementations using `::before`, `::after`.
+- [Bottom Rounded Corner](https://github.com/black7375/Firefox-UI-Fix/blob/36e9c94844fee2417662251cbd50c2b874d5b576/userChrome.css#L3319-L3393)
+- [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)
+
+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.
+
+It is recommended to use `list-style-image` when a layout is provided for the image.  
+`background-image` may require many calculations to fit the layout.
+- [Replace Library Icon](https://github.com/black7375/Firefox-UI-Fix/blob/36e9c94844fee2417662251cbd50c2b874d5b576/userChrome.css#L3923-L3965)
+- [Panel Icon](https://github.com/black7375/Firefox-UI-Fix/blob/36e9c94844fee2417662251cbd50c2b874d5b576/userChrome.css#L4136-L4214)
+- [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.  
+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)
+- [Tabs On Bottom](https://github.com/black7375/Firefox-UI-Fix/blob/c453ef43a699759f55800a5d266a89ac11321b2b/src/tabbar/_tabs_on_bottom.scss#L4-L32)
+
+Finally, it's time to respond to various states.
+
+By default, [attribute selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors) is used, and sometimes [hard coding](https://github.com/black7375/Firefox-UI-Fix/blob/36e9c94844fee2417662251cbd50c2b874d5b576/userChrome.css#L873-L893) according to [selector specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) may be required.  
+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.
+
+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.
+- [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).
+
+- [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.  
+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))
+
+Available CSS features are also restricted.
+
+Example 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))
+
+### 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.
+
+If project only use 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)
+
+This restriction is also related to the [Doc: Preference.md](./Preference.md#using-with-user-custom-css).
+
+### Namespace
+In older codes, the following [namespace](https://developer.mozilla.org/en-US/docs/Web/CSS/@namespace) is commonly seen:
+
+```css
+@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
+```
+
+However, it is [only applicable to XUL](https://www.userchrome.org/adding-style-recipes-userchrome-css.html#namespaces), so it is recommended to use with `prefix`.
+```css
+@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+/* Use */
+xul|search-textbox {
+  border: 2px solid red !important;
+}
+html|input {
+  border: 2px solid green !important;
+}
+```
+
+If you want to limit the coverage to some pages, you can use [`@-moz-document`](https://developer.mozilla.org/en-US/docs/Web/CSS/@document):
+```css
+/* Main browser UI */
+@-moz-document url("chrome://browser/content/browser.xhtml") {
+  /* Your CSS */
+}
+
+/* Library UI */
+@-moz-document url("chrome://browser/content/places/places.xhtml") {
+  /* Your CSS */
+}
+
+/* PageInfo UI */
+@-moz-document url("chrome://browser/content/pageinfo/pageInfo.xhtml") {
+  /* Your CSS */
+}
+```
+
+### Import
+There are a few caveats when you [`@import`](https://developer.mozilla.org/en-US/docs/Web/CSS/@import) the CSS.  
+It's because of specification definition, not Firefox design, but to prevent some mistakes.
+
+`@import` rule is not a [nested statement](https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax#nested_statements). Therefore, it cannot be used inside [conditional group at-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule#conditional_group_rules).
+
+```css
+/* Precede */
+@import url("YourFile.css"); /* Works */
+
+/* Nested */
+@supports -moz-bool-pref("userChrome.test.pref") {
+  @import url("AnotherFile.css"); /* Not Works */
+}
+```
+
+Any [`@namespace`](https://developer.mozilla.org/en-US/docs/Web/CSS/@namespace) rules must follow all `@charset` and @import rules, and precede all other at-rules and style declarations in a style sheet.
+
+```css
+/* Before - Namespace */
+@import url("YourFile.css"); /* Works */
+
+/* Declare - Namespace */
+@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+/* After - Namespace */
+@import url("YourFile.css"); /* Not Works */
+```

arch-config/.mozilla/firefox/default-release/chrome/docs/Rules.md

@@ -0,0 +1,86 @@
+# Rules
+
+<!-- markdown-toc start - Don't edit this section. Run M-x markdown-toc-refresh-toc -->
+**Table of Contents**
+
+- [Basics](#basics)
+  * [Issue](#issue)
+  * [Version](#version)
+  * [Branch](#branch)
+- [Edit](#edit)
+  * [Modify only source file](#modify-only-source-file)
+  * [Coding style](#coding-style)
+- [Commits](#commits)
+  * [Commit](#commit)
+  * [Commit Message](#commit-message)
+  * [Pull request](#pull-request)
+
+<!-- markdown-toc end -->
+
+## Basics
+This is a rough guideline. (Not forced)
+
+Feel free to make PR.
+
+### Issue
+
+**Search:**
+- Search the project’s [issues](https://github.com/black7375/Firefox-UI-Fix/issues) to make sure it's not a known issue.
+
+**Versions:**
+- Make sure you’re on the latest version.
+- Try older versions.
+- Try switching up dependency versions.
+
+### Version
+
+Milestone, The versioning scheme we use is [SemVer](https://semver.org/). (Maintainer decides, do not pull request.)
+
+We will release the feature as soon as it is complete, but the cycle should be 2-4 weeks.
+Rapid releases.
+
+It comes from [#109](https://github.com/black7375/Firefox-UI-Fix/issues/109#issuecomment-873313945).
+
+### Branch
+
+Stable: Only bugfix, Documentation.
+- `master`: Common bugfix, documentation.
+- `photon-style`: Bugfix, documentation specified in `photon-style`.
+- `proton-sryle`: Bugfix, documentation specified in `proton-style`.
+
+Development: New Features.
+- `dev`: Common new features.
+- `photon-style-dev`: New features specified in `photon-style`.
+- `proton-style-dev`: New features specified in `proton-style`.
+
+## Edit
+### Modify only source file
+
+Do not modify files that are built directly or automatically generated.
+
+### Coding style
+
+- **Indent:** 2 spaces for indentation rather than tabs.
+- **Columns:** Fit `80`~`100` columns as much as possible. (Auto formatting is using 120 to avoid the worst case)
+
+## Commits
+### Commit
+
+- **Meaningfully:**: It doesn't make meaningless commits.
+- **One per task:** It's difficult to distinguish when various tasks are mixed.
+- **Often:** Codes may corrupt during large changes.
+
+### Commit Message
+
+For intuitive recognition, I [put a **prefix**](https://github.com/black7375/Firefox-UI-Fix/commits/master).
+- `Add:` Add feature or enhanced.
+- `Bump:` Update dependency packages.
+- `Fix:` Bug fix or change default values.
+- `Clean:` Refactoring.
+- `Doc:` Update docs.
+
+### Pull request
+
+- **Branch:** Check the [Branch](#branch) section and PR to the correct branch.
+- **Issue:** We recommend that you open the issue first to discuss the changes with the owner of this repository.
+- **Build:** Please check if it was built before PR.

arch-config/.mozilla/firefox/default-release/chrome/docs/Smart_Bookmarks.md

@@ -0,0 +1,150 @@
+# Smart Bookmarks(Query Bookmarks)
+
+<!-- markdown-toc start - Don't edit this section. Run M-x markdown-toc-refresh-toc -->
+**Table of Contents**
+
+- [Basics](#basics)
+- [Places query URIs](#places-query-uris)
+- [Query parameters](#query-parameters)
+- [Query operators](#query-operators)
+
+<!-- markdown-toc end -->
+
+## 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)
+- [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/)
+- [MDN: Places query URIs(Archived)](https://web.archive.org/web/20210531033430/https://developer.mozilla.org/en-US/docs/Mozilla/Tech/Places/Places_query_URIs)
+- [UDN: Querying Places](https://udn.realityripple.com/docs/Mozilla/Tech/Places/Querying)
+- [mozillaZine: Places query syntax](https://forums.mozillazine.org/viewtopic.php?p=3260477)
+
+**Explanation**
+
+Firefox 3 switched to "places" sqlite database as a main bookmarks and history container. (Previously used [MDN: Mork file format(Achieved)](https://web.archive.org/web/20120509214427/https://developer.mozilla.org/en/Mork_Structure))
+
+You can get a glimpse of SQL query power by using serialized `places:` query strings.
+
+Simple strings that can be added to your bookmarks that will perform queries over database.
+
+**Current State**
+
+`browser.places.smartBookmarksVersion` does not work.
+
+There is [no search in the source code](https://searchfox.org/mozilla-central/search?q=browser.places.smartBookmarksVersion&path=&case=false&regexp=false), and you can see that [the code in ESR 60](https://searchfox.org/mozilla-esr60/search?q=browser.places.smartBookmarksVersion&path=&case=false&regexp=false) has been removed.
+
+Place query URIS related information was also removed from MDN, but fortunately it is still operable.
+
+## Places query URIs
+
+This article describes the parameters you can use when constructing `place` URIs. These URIs perform [Places](https://udn.realityripple.com/docs/Mozilla/Tech/Places) queries.
+
+You can use a `place` URI as a bookmark. For example, if you right-click on the toolbar and choose "New Bookmark," you can enter a `place` URI there to create a new query on your toolbar that, when clicked, will reveal a popup containing the results of the query.
+
+The following `place` URI is used to implement the "Most Visited" smart bookmark in the default set of smart bookmarks created when you first start using Firefox 3:
+
+```
+place:queryType=0&sort=8&maxResults=10
+```
+
+The parameters used in this query are:
+
+- `queryType=0`: This indicates that the query should look only at the user's history and not at bookmarks.
+- `sort=8`: The `sort` parameter indicates that the query results should be listed in reverse numeric order, based on visit count. In other words, the most visited result will be first, and the least visited result last.
+- `maxResults=10`: This parameter specifies that a maximum of 10 results should be returned by the query.
+
+If you wanted to change this query to only consider visits that took place today, you could change it to:
+
+```
+place:queryType=0&sort=8&maxResults=10&beginTimeRef=1&beginTime=0
+```
+
+The new parameters added here are:
+
+- `beginTimeRef=1`: Indicates that the `beginTime` parameter that follows is specified as relative to midnight this morning.
+- `beginTime`: Specifies the amount of time, in microseconds, from midnight at which to begin looking for visits. By specifying zero for this value, we indicate that we wish to consider all visits that occurred today.
+
+## Query parameters
+Here's a list of the parameters available that you can look for.
+
+| **Parameter**    | **Type**        | **Description**                                                                                                                                                                                                                            |
+|------------------|-----------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `beginTime`      | `unsigned long` | The time, in microseconds of the earliest result to return.                                                                                                                                                                                |
+| `beginTimeRef`   | `unsigned long` | Indicates the type of reference specified in `beginTime`:                                                                                                                                                                                  |
+|                  |                 | `0`:     The time is relative to January 1, 1970 GMT. This is the default.                                                                                                                                                                 |
+|                  |                 | `1`: The time is relative to this morning at midnight. This is useful for queries relative to "today."                                                                                                                                     |
+|                  |                 | `2`: The time is relative to right now.                                                                                                                                                                                                    |
+| `endTime`        | `unsigned long` | The time, in microseconds, of the latest result to return.                                                                                                                                                                                 |
+| `endTimeRef`     | `unsigned long` | Indicates the type of reference specified in `endTime`. The values are the same as for beginTime.                                                                                                                                          |
+| `terms`          | `string`        | The term to query.                                                                                                                                                                                                                         |
+| `minVisits`      | `long`          | Filters results based on the minimum number of visits. Specify -1 (the default) to return all results, or any other number to only include results with a visit count higher than the given value.                                         |
+| `maxVisits`      | `long`          | Filters results based on the maximum number of visits. Only items that have been visited fewer than this number of times are included in the results. Specify -1 (which is the default) to not filter based on a maximum number of visits. |
+| `onlyBookmarked` | `boolean`       | If `true`, only bookmarked items are included in the results.                                                                                                                                                                              |
+| `domainIsHost`   | `boolean`       | If `true`, `domain` must be an exact match. Otherwise, anything that ends in `domain` is considered a match.                                                                                                                               |
+| `domain`         | `string`        | Query for items matching this host or domain name. See `domainIsHost` for more information.                                                                                                                                                |
+| `folder`         | `string`        | The folder to query. This may be one of the following:                                                                                                                                                                                     |
+|                  |                 | `PLACES_ROOT`: The Places root folder.                                                                                                                                                                                                     |
+|                  |                 | `BOOKMARKS_MENU`: The Bookmarks menu.                                                                                                                                                                                                      |
+|                  |                 | `TOOLBAR`: The bookmarks toolbar.                                                                                                                                                                                                          |
+|                  |                 | `TAGS`: Tags                                                                                                                                                                                                                               |
+|                  |                 | `UNFILED_BOOKMARKS`: Unfiled bookmarks                                                                                                                                                                                                     |
+| `!annotation`    | `boolean`       | Indicates whether to include or reject items matching the annotation specified by `annotation`. If `true`, items that don't have the specified annotation are rejected.                                                                    |
+| `annotation`     | `string`        | The annotation to match when querying.                                                                                                                                                                                                     |
+| `uri`            | `string`        | The URI to match.                                                                                                                                                                                                                          |
+| `uriIsPrefix`    | `boolean`       | If `false`, the uri must be an exact match; this is the default. If `true`, any entry that begins with the specified URI is considered a match.                                                                                            |
+| `tag`            | `string`        | -                                                                                                                                                                                                                                          |
+| `!tas`           | -               | -                                                                                                                                                                                                                                          |
+
+## Query operators
+The following attributes allow you to control the results more precisely.
+
+| **Operator**                                                   | **Type**         | **Description**                                                                                                                                                                                                                                      |
+|----------------------------------------------------------------|------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `OR`                                                           |                  | This is the OR logical operator.                                                                                                                                                                                                                     |
+| `applyOptionsToContainers`                                     |                  |                                                                                                                                                                                                                                                      |
+| `excludeItemIfParentHasAnnotation` - Obsolete since Gecko 13.0 | `string`         | Items whose parent has this value as an annotation are excluded from the query results. This parameter is ignored for queries over history. For example, you can exclude livemark entries by specifying "livemark/feedURI" here.                     |
+| `excludeItems`                                                 | `boolean`        | If `true`, all URIs and separators are excluded from the bookmark query results, so that only folders and queries are returned. If `false`, all items are returned; this is the default.                                                             |
+| `excludeQueries`                                               | `boolean`        | If `true`, queries are excluded from the results; however, simple folder queries like bookmark folder symlinks will still be included. `false`, the default, indicates that queries should be included in the results.                               |
+| `excludeReadOnlyFolders`                                       | `boolean`        | If `true`, read-only folders are excluded from the results. This only affects cases in which the actual folder result node would appear in its parent folder. The default is `false`.                                                                |
+| `expandQueries`                                                | `boolean`        | If `true`, `place` URIs appear as containers in the results, with the contents filled in from the stored query. This doesn't do anything if `excludeQueries` is `true`. The default is `false`, which causes `place` URIs to appear as normal items. |
+| `group`                                                        |                  |                                                                                                                                                                                                                                                      |
+| `includeHidden`                                                | `boolean`        | If `true`, items that would normally be hidden in a history query (such as the content of iframes as well as images) are included in the results. This is `false` by default.                                                                        |
+| `maxResults`                                                   | `unsigned long`  | The maximum number of results to return. This doesn't work when sorting by title. The result is `0`, which means that all results are returned.                                                                                                      |
+| `originalTitle`                                                | `string`         | Retrieves the original page title.                                                                                                                                                                                                                   |
+| `queryType`                                                    | `unsigned short` | The type of search to use when querying the database. This attribute is only honored by query nodes. It's ignored for simple folder queries.                                                                                                         |
+|                                                                |                  | `0`: History                                                                                                                                                                                                                                         |
+|                                                                |                  | `1`: Bookmarks                                                                                                                                                                                                                                       |
+|                                                                |                  | `2`:     Both history and bookmarks (**Not yet implemented** -- see [bug 378798](https://bugzilla.mozilla.org/show_bug.cgi?id=378798))                                                                                                               |
+| `resolveNullBookmarkTitles`                                    | `boolean`        | If `true`, bookmarks with null titles get their page titles fetched from history if possible. This doesn't apply to bookmarks with empty titles. The default is `false`.                                                                             |
+| `showSessions`                                                 | `boolean`        | If `true`, session information is used to group history items. This only makes a difference when sorting by date. The default is `false`.                                                                                                            |
+| `sort`                                                         | `unsigned short` | The sort order to use for the results.                                                                                                                                                                                                               |
+|                                                                |                  | `0`:     Natural bookmark order                                                                                                                                                                                                                      |
+|                                                                |                  | `1`:      Sort by title, A-Z                                                                                                                                                                                                                         |
+|                                                                |                  | `2`:       Sort by title, Z-A                                                                                                                                                                                                                        |
+|                                                                |                  | `3`:      Sort by visit date, most recent last                                                                                                                                                                                                       |
+|                                                                |                  | `4`:     Sort by visit date, most recent first                                                                                                                                                                                                       |
+|                                                                |                  | `5`:       Sort by uri, A-Z                                                                                                                                                                                                                          |
+|                                                                |                  | `6`:      Sort by uri, Z-A                                                                                                                                                                                                                           |
+|                                                                |                  | `7`:      Sort by visit count, ascending                                                                                                                                                                                                             |
+|                                                                |                  | `8`:     Sort by visit count, descending                                                                                                                                                                                                             |
+|                                                                |                  | `9`:       Sort by keyword, A-Z                                                                                                                                                                                                                      |
+|                                                                |                  | `10`:       Sort by keyword, Z-A                                                                                                                                                                                                                     |
+|                                                                |                  | `11`:      Sort by date added, most recent last                                                                                                                                                                                                      |
+|                                                                |                  | `12`:       Sort by date added, most recent first                                                                                                                                                                                                    |
+|                                                                |                  | `13`:       Sort by last modified date, most recent last                                                                                                                                                                                             |
+|                                                                |                  | `14`:      Sort by last modified date, most recent first                                                                                                                                                                                             |
+|                                                                |                  | `17`:   Sort by tags, ascending                                                                                                                                                                                                                      |
+|                                                                |                  | `18`:  Sort by tags, descending                                                                                                                                                                                                                      |
+|                                                                |                  | `19`:      Sort by annotation, ascending                                                                                                                                                                                                             |
+|                                                                |                  | `20`:     Sort by annotation, descending                                                                                                                                                                                                             |
+| `sortingAnnotation`                                            | `string`         | The annotation to use when sorting by annotation.                                                                                                                                                                                                    |
+| `type`                                                         | `unsigned short` | The type of results to return.                                                                                                                                                                                                                       |
+|                                                                |                  | `0`:     Results as URI ("URI" results, one for each URI visited in the range).                                                                                                                                                                      |
+|                                                                |                  | `1`:     Results as visit ("visit" results, with one for each time a page was visited this will often give you multiple results for one URI).                                                                                                        |
+|                                                                |                  | `2`:     Results as full visits (like "visit", but returns all attributes for each result)                                                                                                                                                           |
+|                                                                |                  | `3`:     Results as date query (returns results for given date range)                                                                                                                                                                                |
+|                                                                |                  | `4`:     Results as site query (returns last visit for each url in the given host)                                                                                                                                                                   |
+|                                                                |                  | `5`:     Results as date+site query (returns list of hosts visited in the given period)                                                                                                                                                              |
+|                                                                |                  | `6`:     Results as tag query (returns list of bookmarks with the given tag)                                                                                                                                                                         |
+|                                                                |                  | `7`:     Results as tag container (returns bookmarks with given tag; for same uri uses last modified. `folder=tag_folder_id` must be present in the query                                                                                            |

arch-config/.mozilla/firefox/default-release/chrome/install.ps1

@@ -49,13 +49,13 @@ https://github.com/black7375/Firefox-UI-Fix#readme
 
 param(
   [Alias("u")]
-  [Switch]$updateMode,
+  [switch]$updateMode,
   [Alias("f")]
   [string]$profileDir,
   [Alias("p")]
   [string]$profileName,
   [Alias("h")]
-  [Switch]$help = $false
+  [switch]$help = $false
 )
 
 #** Helper Utils ***************************************************************
@@ -92,25 +92,33 @@ function Verify-PowerShellVersion {
 #== Required Tools =============================================================
 function Install-Choco() {
   # https://chocolatey.org/install
+  # https://docs.chocolatey.org/en-us/choco/setup#non-administrative-install
+  $InstallDir='C:\ProgramData\chocoportable'
+  $env:ChocolateyInstall="$InstallDir"
+
   Set-ExecutionPolicy Bypass -Scope Process -Force
   [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072
   iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))
-  $env:Path += ";C:\ProgramData\chocolatey"
+  $env:Path += ";C:\ProgramData\chocoportable" # Adimin: ";C:\ProgramData\chocolatey"
+  refreshenv
 }
 
 function Check-Git() {
-  if( -Not (Get-Command git) ) {
+  if ( -Not (Get-Command git -errorAction SilentlyContinue) ) {
-    if ( -Not (Get-Command choco)) {
+    if ( -Not (Get-Command choco -errorAction SilentlyContinue) ) {
       Install-Choco
     }
-    choco install git -y
+    choco install git.commandline -y
-    $env:Path += ";C:\Program Files\Git\bin"
+    $env:Path += ";C:\tools\git\bin" # Adimin: ";C:\Program Files\Git\bin"
+    refreshenv
   }
 
   Lepton-OKMessage "Required - git"
 }
 
 #== PATH / File ================================================================
+$PSDefaultParameterValues['Out-File:Encoding'] = 'utf8'
+
 $currentDir = (Get-Location).path
 
 function Filter-Path() {
@@ -634,6 +642,147 @@ function Check-InstallTypes() {
   }
 }
 
+#== Custom Install =============================================================
+$customFiles = @(
+  "user-overrides.js",
+  "userChrome-overrides.css",
+  "userContent-overrides.css"
+)
+$localCustomFiles = $customFiles.Clone()
+
+$customFileExist = $false
+function Check-CustomFiles() {
+  $global:localCustomFiles = Filter-Path $localCustomFiles
+
+  if ( $global:localCustomFiles.Length -gt 0 ) {
+    $global:customFileExist = $true
+    Lepton-OKMessage "Check custom file detected"
+
+    foreach ( $customFile in $global:localCustomFiles ) {
+      Write-Host "- ${customFile}"
+    }
+  }
+}
+
+function Copy-CustomFiles() {
+  if ( "${customFileExist}" -eq $true ) {
+    # If Release or Network mode, Local is passed (Already copied)
+    if ( "${leptonInstallType}" -ne "Local" ) {
+      foreach ( $profilePath in $global:firefoxProfilePaths ) {
+        foreach ( $customFile in $global:localCustomFiles ) {
+          if ( "${customFile}" -eq "user-overrides.js" ) {
+            Copy-Auto "${customFile}" "${profilePath}\${customFile}"
+          }
+          else {
+            Copy-Auto "${customFile}" "${profilePath}\chrome\${customFile}"
+          }
+        }
+      }
+    }
+
+    Lepton-OKMessage "End custom file copy"
+  }
+}
+
+$customMethod = ""
+$customReset  = $false
+$customAppend = $false
+function Set-CustomMethod() {
+  $local:menuAppend="Append - Maintain changes in existing files and apply custom"
+  $local:menuOverwrite="Overwrite - After initializing the change, apply only custom"
+  $local:menuNone="None - Maintain changes in existing files"
+  $local:menuReset="Reset- Reset to pure lepton theme without custom"
+
+  Write-Host "Select custom method"
+  while ( "${customMethod}" -eq "" ) {
+    $local:applyMethod = Menu @("${menuAppend}", "${menuOverwrite}", "${menuNone}", "${menuReset}")
+    switch ( $applyMethod ) {
+      "${menuAppend}" {
+        $global:customMethod = "Append"
+        $global:customAppend = $true
+      }
+      "${menuOverwrite}" {
+        $global:customMethod = "Overwrite"
+        $global:customReset  = $true
+        $global:customAppend = $true
+      }
+      "${menuNone}" {
+        $global:customMethod = "None"
+      }
+      "${menuReset}" {
+        $global:customMethod = "Reset"
+        $global:customReset  = $true
+      }
+      default { Write-Host "Invalid option, reselect please." }
+    }
+  }
+
+  Lepton-OKMessage "Selected ${customMethod}"
+}
+
+$customFileApplied = $false
+function Apply-CustomFile() {
+  Param (
+    [Parameter(Mandatory=$true, Position=0)]
+    [string] $profilePath,
+    [Parameter(Mandatory=$true, Position=1)]
+    [string] $targetPath,
+    [Parameter(Mandatory=$true, Position=2)]
+    [string] $customPath,
+    [Parameter(Position=3)]
+    [string] $otherCustomPath = ""
+  )
+
+  $local:leptonDir = "${profilePath}\chrome"
+  $local:gitDir    = "${leptonDir}\.git"
+  if ( Test-Path -Path "${customPath}" -PathType leaf ) {
+    $global:customFileApplied = $true
+
+    if ( "${customMethod}" -eq "" ) {
+      Set-CustomMethod
+    }
+
+    if ( "${customReset}" -eq $true ) {
+      if ( "${targetPath}" -like "*user.js" ) {
+        Copy-Item -Path "${leptonDir}\user.js" -Destination "${targetPath}" -Force
+      }
+      else {
+        git --git-dir "${gitDir}" --work-tree "${leptonDir}" checkout HEAD -- "${targetPath}"
+      }
+    }
+    if ( "${customAppend}" -eq $true ) {
+      # Apply without duplication
+      if ( -not (Write-Output "$(Write-Output $(Get-Content -Path "${targetPath}"))" | Select-String -Pattern "$(Write-Output $(Get-Content -Path "${customPath}"))" -SimpleMatch -Quiet) ) {
+        Get-Content -Path "${customPath}" | Out-File -FilePath "${targetPath}" -Append
+      }
+    }
+  }
+  elseif ( "${otherCustomPath}" -ne "" ) {
+    Apply-CustomFile "${profilePath}" "${targetPath}" "${otherCustomPath}"
+  }
+}
+
+function Apply-CustomFiles() {
+  foreach ( $profilePath in $global:firefoxProfilePaths ) {
+    foreach ( $customFile in  $global:customFiles ) {
+      $local:targetFile = $customFile.Replace("-overrides", "")
+      if ( "${customFile}" -eq "user-overrides.js" ) {
+        $local:targetPath = "${profilePath}\${targetFile}"
+        $local:customPath = "${profilePath}\user-overrides.js"
+        $local:otherCustomPath = "${profilePath}\chrome\user-overrides.js"
+        Apply-CustomFile "${profilePath}" "${targetPath}" "${customPath}" "${otherCustomPath}"
+      }
+      else {
+        Apply-CustomFile "${profilePath}" "${profilePath}\chrome\${targetFile}" "${profilePath}\chrome\${customFile}"
+      }
+    }
+  }
+
+  if ( "${customFileApplied}" -eq $true ) {
+    Lepton-OKMessage "End custom file applied"
+  }
+}
+
 #== Install Helpers ============================================================
 $chromeDuplicate = $false
 function Check-ChromeExist() {
@@ -692,10 +841,16 @@ function Copy-Lepton() {
 #== Each Install ===============================================================
 function Install-Local() {
   Copy-Lepton "${currentDir}" "user.js"
+  Copy-CustomFiles
+
+  Apply-CustomFiles
 }
 
 function Install-Release() {
   Copy-Lepton "chrome" "user.js"
+  Copy-CustomFiles
+
+  Apply-CustomFiles
 }
 
 function Install-Network() {
@@ -704,9 +859,12 @@ function Install-Network() {
 
   Clone-Lepton
   Copy-Lepton
+  Copy-CustomFiles
 
   Clean-Lepton
   Check-ChromeRestore
+
+  Apply-CustomFiles
 }
 
 function Install-Profile() {
@@ -722,6 +880,35 @@ function Install-Profile() {
 }
 
 #** Update *********************************************************************
+function Stash-File() {
+  Param (
+    [Parameter(Mandatory=$true, Position=0)]
+    [string] $leptonDir,
+    [Parameter(Mandatory=$true, Position=1)]
+    [string] $gitDir
+  )
+
+  if ( "$(git --git-dir "${gitDir}" --work-tree "${leptonDir}" diff --stat)" -ne '' ) {
+    git --git-dir "${gitDir}" --work-tree "${leptonDir}" stash --quiet
+    return $true
+  }
+  return $false
+}
+function Restore-File() {
+  Param (
+    [Parameter(Mandatory=$true, Position=0)]
+    [string] $leptonDir,
+    [Parameter(Mandatory=$true, Position=1)]
+    [string] $gitDir,
+    [Parameter(Position=2)]
+    [string] $gitDirty = "$false"
+  )
+
+  if ( "${gitDirty}" -eq $true ) {
+    git --git-dir "${gitDir}" --work-tree "${leptonDir}" stash pop --quiet
+  }
+}
+
 function Update-Profile() {
   Check-Git
   foreach ( $profileDir in $global:firefoxProfileDirPaths ) {
@@ -734,10 +921,15 @@ function Update-Profile() {
         $local:Branch = $LEPTONINFO["${section}"]["Branch"]
         $local:Path   = $LEPTONINFO["${section}"]["Path"]
 
-        $local:LEPTONGITPATH="${Path}\chrome\.git"
+        $local:leptonDir = "${Path}\chrome"
+        $local:gitDir    = "${leptonDir}\.git"
         if ( "${Type}" -eq "Git" ) {
-          git --git-dir "${LEPTONGITPATH}" checkout "${Branch}"
+          $local:gitDirty = $(Stash-File "${leptonDir}" "${gitDir}")
-          git --git-dir "${LEPTONGITPATH}" pull --no-edit
+
+          git --git-dir "${gitDir}" --work-tree "${leptonDir}" checkout "${Branch}"
+          git --git-dir "${gitDir}" --work-tree "${leptonDir}" pull --no-edit
+
+          Restore-File "${leptonDir}" "${gitDir}" "$gitDirty"
         }
         elseif ( "${Type}" -eq "Local" -or "${Type}" -eq "Release" ) {
           Check-ChromeExist
@@ -749,12 +941,15 @@ function Update-Profile() {
           if ( "${Branch}" -eq $null ) {
             $Branch = "${leptonBranch}"
           }
-          git --git-dir "${LEPTONGITPATH}" checkout "${Branch}"
+          git --git-dir "${gitDir}" --work-tree "${leptonDir}" checkout "${Branch}"
 
           if ( "${Type}" -eq "Release" ) {
-            $local:Ver=$(git --git-dir "${LEPTONINFOFILE}" describe --tags --abbrev=0)
+            $local:Ver=$(git --git-dir "${gitDir}" describe --tags --abbrev=0)
-            git --git-dir "${LEPTONGITPATH}" checkout "tags/${Ver}"
+            git --git-dir "${gitDir}" --work-tree "${leptonDir}" checkout "tags/${Ver}"
           }
+
+          Clean-Lepton
+          Check-ChromeRestore
         }
         else {
           Lepton-ErrorMessage "Unable to find update type, ${Type} at ${section}"
@@ -762,8 +957,8 @@ function Update-Profile() {
       }
     }
   }
-  Clean-Lepton
+
-  Check-ChromeRestore
+  Apply-CustomFiles
 }
 
 #** Main ***********************************************************************
@@ -784,6 +979,8 @@ function Install-Lepton {
   Update-ProfilePaths
   Write-LeptonInfo
 
+  Check-CustomFiles
+
   if ( $updateMode ) {
     Update-Profile
   }

arch-config/.mozilla/firefox/default-release/chrome/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "Lepton",
+  "version": "5.0.0",
+  "description": "I respect proton UI and aim to improve it. ",
+  "author": "alstjr7375 <alstjr7375@daum.net>",
+  "license": "MPL 2.0",
+  "private": true,
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/black7375/Firefox-UI-Fix.git"
+  },
+  "bugs": {
+    "url": "https://github.com/black7375/Firefox-UI-Fix/issues"
+  },
+  "homepage": "https://github.com/black7375/Firefox-UI-Fix#readme",
+  "scripts": {
+    "build": "sass --no-source-map src/leptonChrome.scss css/leptonChrome.css && sass --no-source-map src/leptonContent.scss css/leptonContent.css && prettier --write css/leptonChrome.css css/leptonContent.css",
+    "format": "prettier --write .",
+    "test": "jest",
+    "validate": "csstree-validator css/leptonChrome.css; csstree-validator css/leptonContent.css"
+  },
+  "devDependencies": {
+    "csstree-validator": "^3.0.0",
+    "fast-glob": "^3.2.11",
+    "jest": "^27.5.1",
+    "prettier": "^2.6.1",
+    "sass": "^1.49.0",
+    "sass-true": "^6.1.0"
+  }
+}

arch-config/.mozilla/firefox/default-release/chrome/src/compatibility/_index.scss

@@ -0,0 +1,12 @@
+/*= Theme - Compatibility ====================================================*/
+@include Option("userChrome.compatibility.theme") {
+  @import "theme";
+}
+
+/*= OS - Compatibility =======================================================*/
+@include Option("userChrome.compatibility.os") {
+  @import "os";
+}
+
+/*= Others - Compatibility ===================================================*/
+@import "others";

arch-config/.mozilla/firefox/default-release/chrome/src/compatibility/_os.scss

@@ -0,0 +1,169 @@
+/*= Windows 10 - Top border of accent color at ESR #358 ======================*/
+@include OS($win10) {
+  :root[sizemode=normal][tabsintitlebar] {
+    #navigator-toolbox {
+      border-top: .5px solid rgb(47, 47, 47) !important;
+    }
+    &:-moz-window-inactive #navigator-toolbox {
+      border-top-color: rgb(57, 57, 57) !important;
+    }
+
+    @media (-moz-windows-accent-color-in-titlebar) {
+      #navigator-toolbox {
+        border-top-color: -moz-accent-color !important;
+      }
+    }
+  }
+}
+
+/*= Windows 7, 8 - Tab Bar Background *****************************************/
+@include OS($win7, $win8) {
+  /* Header Color */
+  :root:not([lwtheme-image]):-moz-lwtheme {
+    background-color: var(--lwt-accent-color) !important;
+  }
+}
+
+@mixin _os_winTabBarTextColor {
+  /* background textcolor */
+  color: var(--lwt-text-color) !important;
+}
+@include OS($win7) {
+  #TabsToolbar {
+    &:-moz-lwtheme {
+      @include _os_winTabBarTextColor;
+    }
+
+    /* Remove Aero */
+    /* Original: radial-gradient(eclipse at bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.5) 80%, transparent) */
+    background-image: unset !important;
+  }
+}
+@include OS($win8) {
+  #navigator-toolbox:-moz-lwtheme {
+    @include _os_winTabBarTextColor;
+  }
+}
+
+/*= Windows 7, 8 - Menu Active Color =========================================*/
+@include OS($win7, $win8) {
+  menupopup > menu,
+  menupopup > menuitem,
+  #context-navigation > menuitem {
+    border: 1px solid transparent; /* Need reduce 2px at menu */
+  }
+
+  #main-menubar > menu[open="true"],
+  #main-menubar > menu[_moz-menuactive="true"] {
+    background-color: -moz-menuhover !important; /* Make to original */
+  }
+  :root:-moz-lwtheme #main-menubar > menu[open="true"],
+  :root:-moz-lwtheme #main-menubar > menu[_moz-menuactive="true"] {
+    color: inherit !important; /* Original: -moz-menubarhovertext */
+    background-color: color-mix(in srgb, currentColor 20%, transparent) !important; /* Original: -moz-menuhover */
+  }
+
+  menulist > menupopup > menuitem[_moz-menuactive="true"],
+  menulist > menupopup > menu[_moz-menuactive="true"] {
+    background-color: highlight !important;
+    color: highlighttext !important;
+  }
+
+  #PlacesToolbar menu,
+  #PlacesToolbar menuitem,
+  #BMB_bookmarksPopup menu,
+  #BMB_bookmarksPopup menuitem {
+    border: none !important; /* Remove border */
+
+    &:not([disabled], :active)[_moz-menuactive="true"] {
+      background-color: var(--button-hover-bgcolor) !important;
+    }
+  }
+}
+
+@mixin _os_menuEmulate($bgRate, $bdRate) {
+  menu[_moz-menuactive="true"],
+  menuitem[_moz-menuactive="true"] {
+    background-color: color-mix(in srgb, -moz-menuhover $bgRate, transparent) !important;
+    border-color: color-mix(in srgb, -moz-menuhover $bdRate, transparent) !important;
+  }
+  menu[_moz-menuactive="true"][disabled="disabled"],
+  menuitem[_moz-menuactive="true"][disabled="true"] {
+    background-color: color-mix(in srgb, currentColor $bgRate, transparent) !important;
+    border-color: color-mix(in srgb, currentColor $bdRate, transparent) !important;
+  }
+}
+@include OS($win7) {
+  @include _os_menuEmulate(5%, 60%);
+
+  /* Remove text shadow */
+  :root:-moz-lwtheme #toolbar-menubar {
+    text-shadow: unset !important;
+    /* Original: 0 0 .5em white, 0 0 .5em white, 0 1px 0 rgba(255, 255, 255, .4) */
+  }
+
+  /* Remove Color */
+  :root:-moz-lwtheme #main-menubar:not(:-moz-window-inactive) {
+    background-color: unset !important; /* Original: rgba(255, 255, 255, .5) */
+    color: unset !important; /* Original: black */
+  }
+}
+@include OS($win8) {
+  @include _os_menuEmulate(17%, 80%);
+}
+
+@include OS($linux) {
+  /*= Linux - Global Menubar Active Color ====================================*/
+  #main-menubar > menu[open="true"],
+  #main-menubar > menu[_moz-menuactive="true"] {
+    color: inherit !important; /* Original: -moz-menubarhovertext */
+    background-color: color-mix(in srgb, currentColor 20%, transparent) !important; /* Original: -moz-menuhover */
+  }
+
+  /*= Linux - Titlebar button at lwtheme =====================================*/
+  @include NotOption("userChrome.compatiblity.os.linux_non_native_titlebar_button") {
+    .titlebar-button:-moz-lwtheme {
+      appearance: auto !important;
+    }
+    .titlebar-min:-moz-lwtheme,
+    .titlebar-max:-moz-lwtheme,
+    .titlebar-restore:-moz-lwtheme,
+    .titlebar-close:-moz-lwtheme {
+      list-style-image: none !important;
+    }
+    .titlebar-button:-moz-lwtheme:hover,
+    .titlebar-button:-moz-lwtheme:hover:active {
+      background-color: unset !important;
+      color: unset !important;
+    }
+  }
+}
+
+/*= Linux - Light System Default Theme's Selected Tab ========================*/
+$_os_linuxDefaultShadow: 0 0 4px rgba(128, 128, 142, 0.5);
+@mixin _os_linuxDefaultThemeSelectedTab {
+  #tabbrowser-tabs:not([noshadowfortests])
+    .tabbrowser-tab:is([visuallyselected="true"], [multiselected])
+    > .tab-stack
+    > .tab-background:not(:-moz-lwtheme) {
+    @content;
+  }
+}
+@include OS($linux) {
+  @include Light {
+    /* Because of
+      #TabsToolbar:not([brighttext]) #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected=true], [multiselected]) > .tab-stack > .tab-background {
+        border: 1px solid var(--tab-line-color, rgba(128,128,142,0.9));
+        box-shadow: 0 0 4px rgba(128,128,142,0.5);
+      }
+     */
+    @include _os_linuxDefaultThemeSelectedTab {
+      box-shadow: $_os_linuxDefaultShadow !important;
+    }
+    #TabsToolbar:not([brighttext]) {
+      @include _os_linuxDefaultThemeSelectedTab {
+        box-shadow: 0 0 1px var(--tab-line-color, rgba(128, 128, 142, 0.9)), $_os_linuxDefaultShadow !important;
+      }
+    }
+  }
+}

arch-config/.mozilla/firefox/default-release/chrome/src/compatibility/_others.scss

@@ -0,0 +1,11 @@
+@include Option("userChrome.compatibility.panel_cutoff") {
+  #appMenu-popup panelview {
+    width: 24.5em !important; /* can modify panel width, Original: 22.5em */
+  }
+}
+
+@include Option("userChrome.compatibility.navbar_top_border") {
+  #nav-bar {
+    box-shadow: none !important;
+  }
+}

arch-config/.mozilla/firefox/default-release/chrome/src/compatibility/_theme.scss

@@ -0,0 +1,114 @@
+/*= Hotfix #98 ===============================================================*/
+/* Hidden Tab Panel Padding */
+#allTabsMenu-hiddenTabsView .all-tabs-item {
+  margin-inline: 8px;
+  border-radius: 4px;
+}
+
+/*= Remote Tabs Panel's Bottom Padding =======================================*/
+#PanelUI-remotetabs #PanelUI-remotetabs-main {
+  margin-bottom: 6px;
+}
+
+/*= Identity Popup Icon Crop =================================================*/
+.identity-popup-security-connection.identity-button {
+  padding-block: 1px !important;
+}
+
+/*= Zoom in button's plus icon horizontal rate ===============================*/
+#customization-palette-container,
+#customization-panel-container,
+#widget-overflow-mainView {
+  #zoom-in-button > .toolbarbutton-icon {
+    padding-inline-start: 0px !important;
+  }
+}
+
+/*= Icon Fill Color ==========================================================*/
+:root:-moz-lwtheme {
+  /* Auto create --lwt-toolbarbutton-icon-fill-attention, fix for nightly default theme
+       Default Color: rgb(0,97,224) -> rgb(0, 120, 215) for more light
+     */
+  --lwt-toolbarbutton-icon-fill-attention: var(--button-primary-bgcolor, rgb(0, 120, 215));
+}
+
+/*= First visible tab margin at maximized #332 ===============================*/
+:root[tabsintitlebar="true"][sizemode="maximized"] #TabsToolbar {
+  margin-left: -1px;
+}
+
+/*= Disabled menu background color ===========================================*/
+menuitem,
+menu {
+  &[disabled="true"] {
+    background-color: transparent !important;
+  }
+}
+
+/*= Remove Tab Border ========================================================*/
+@mixin _theme_removeTabBorder($options...) {
+  %noneBorder {
+    /* Nigtly 96:  1px solid var(--tab-line-color, rgba(128,128,142,0.9)); */
+    border: unset !important;
+  }
+  @each $prefix, $postfix in $options {
+    #TabsToolbar#{$prefix}
+    #tabbrowser-tabs:not([noshadowfortests])
+      .tabbrowser-tab:is([visuallyselected="true"], [multiselected])
+      > .tab-stack
+      > .tab-background#{$postfix} {
+      @extend %noneBorder;
+    }
+  }
+}
+
+@include Option("userChrome.tab.connect_to_window") {
+  /* TARGET: original, photon */
+  @include _theme_removeTabBorder(
+    // Light Theme
+    ":not([brighttext])",
+    // Dark Theme
+    "[brighttext]" ":-moz-lwtheme"
+  );
+
+  #TabsToolbar #firefox-view-button[open] > .toolbarbutton-icon:-moz-lwtheme,
+  .tab-background[selected]:-moz-lwtheme {
+    // Nightly 102: outline: 1px solid var(--lwt-tab-line-color, var(--lwt-tabs-border-color, currentColor));
+    outline-color: transparent !important;
+  }
+  .keyboard-focused-tab > .tab-stack > .tab-background,
+  .tabbrowser-tab:focus:not([aria-activedescendant]) > .tab-stack > .tab-background {
+    outline: var(--focus-outline) !important;
+  }
+}
+
+/*= Light Weight Theme =======================================================*/
+/* Header Image */
+:root[lwtheme-image] {
+  background-image: var(--lwt-header-image) !important; /* Original: var(--lwt-header-image) */
+  background-repeat: no-repeat !important;
+  background-position: right top !important;
+
+  // For high-resolution screen's image ratio
+  @media (min-width: 2500px) {
+    background-size: contain;
+
+    @include Option("userChrome.compatibility.covered_header_image") {
+      background-size: cover;
+    }
+  }
+
+  // lwtheme compatibility
+  #navigator-toolbox:-moz-lwtheme {
+    background-image: var(--lwt-header-image), var(--lwt-additional-images) !important;
+    background-repeat: var(--lwt-background-tiling) !important;
+    background-position: var(--lwt-background-alignment) !important;
+    background-color: unset !important; /* Original:  var(--lwt-accent-color) */
+  }
+}
+
+/* Navbar Border */
+#navigator-toolbox:-moz-lwtheme {
+  --tabs-border-color: rgba(0, 0, 0, 0.3); /* Legacy: v96 */
+  --lwt-tabs-border-color: rgba(0, 0, 0, 0.3);
+}

arch-config/.mozilla/firefox/default-release/chrome/src/contents/_activity_stream.scss

@@ -0,0 +1,192 @@
+@-moz-document url("about:home"), url("about:newtab") {
+  /** Activity Stream - Search Focus Border: like URL *************************/
+  @include Option("userContent.page.field_border") {
+    /* At DarkMode, Color */
+    body[style*="--newtab-background-color:rgba(28, 27, 34, 1);"],
+    body[style*="--newtab-background-color:rgba(42, 42, 46, 1);"],
+    body[style*="--newtab-background-color: rgba(42, 42, 46, 1);"],
+    body[style*="--newtab-background-color: rgba(43, 42, 51, 1);"],
+    body[style*="--newtab-background-color: rgb(43, 42, 51);"] {
+      /* inner */
+      --newtab-focus-border: rgba(
+        0,
+        221,
+        255,
+        0.5
+      ) !important; /* Original: #B5D3FF, Better color-mix(in srgb, #B5D3FF 70%, transparent) */
+      --newtab-focus-border-selected: var(--newtab-focus-border) !important; /* Original: #B5D3FF */
+
+      /* For Nightly */
+      --newtab-primary-action-background: var(--newtab-focus-border) !important;
+
+      @include Option("userContent.page.proton_color") {
+        @include Option("userContent.page.proton_color.dark_blue_accent") {
+          --newtab-focus-border: var(--in-content-focus-outline-color) !important;
+        }
+      }
+    }
+  }
+
+  /** Activity Stream - Web Site Icon: full size ******************************/
+  @include Option("userContent.newTab.full_icon") {
+    .top-site-outer .tile {
+      overflow: hidden;
+    }
+
+    .top-site-outer .tile .icon-wrapper {
+      width: 100% !important; /* Original: 48px */
+      height: 100% !important; /* Original: 48px */
+    }
+  }
+
+  /** Activity Stream - Animate ***********************************************/
+  @include Option("userContent.newTab.animate") {
+    @include Animate {
+      :root {
+        --animation-easing-function: cubic-bezier(0.07, 0.95, 0, 1);
+      }
+
+      /* Background */
+      .top-site-outer,
+      #searchSubmit,
+      button.icon,
+      button.close-button {
+        transition: background 1.5s var(--animation-easing-function);
+      }
+      .top-site-outer:hover,
+      #searchSubmit:hover,
+      button.icon:hover,
+      button.close-button:hover {
+        transition: background 0.5s var(--animation-easing-function);
+      }
+
+      /* Search Bar */
+      .search-inner-wrapper input {
+        transition: 1s var(--animation-easing-function);
+        transition-property: border-color, box-shadow;
+      }
+      .search-wrapper .search-inner-wrapper:active input,
+      .search-wrapper input:focus {
+        transition: border-color 0.5s var(--animation-easing-function), box-shadow 1s var(--animation-easing-function);
+      }
+      @include Option("userContent.page.field_border") {
+        .search-wrapper .search-inner-wrapper:hover input {
+          border-color: var(--newtab-primary-action-background) !important;
+          transition: border-color 0.5s var(--animation-easing-function);
+        }
+      }
+    }
+  }
+
+  /** Activity Stream - Pocket order to last **********************************/
+  @include Option("userContent.newTab.pocket_to_last") {
+    .body-wrapper.on {
+      display: flex;
+      flex-wrap: wrap;
+    }
+
+    .body-wrapper.on > .discovery-stream.ds-layout {
+      flex-basis: 100%;
+    }
+
+    .body-wrapper.on > .collapsible-section[data-section-id="topstories"],
+    .home-section > #pocket-section,
+    .home-section > .divider,
+    .home-section > div:not(.section) {
+      order: 2;
+    }
+  }
+
+  /** Activity Stream - Home Search Bar looks like proton *********************/
+  @include Option("userContent.newTab.animate") {
+    /* Dropdown Colors */
+    #root {
+      --newtab-search-background-color: rgba(255, 255, 255, 1); /* Same as light theme's --panel-background */
+
+      /* Set search dropdown background */
+      --newtab-search-dropdown-header-color: var(--newtab-search-background-color) !important;
+      --newtab-search-dropdown-color: var(--newtab-search-background-color) !important;
+      --newtab-element-hover-color: color-mix(in srgb, currentColor 9%, transparent) !important;
+    }
+
+    @include Dark {
+      #root {
+        /* Default Dark Mode */
+        --newtab-search-background-color: rgba(66, 65, 77, 1); /* Same as dark theme's --panel-background */
+      }
+    }
+    .activity-stream[lwt-sidebar]:not([style*="--newtab-background-color: rgba(43, 42, 51, 1);"]) #root {
+      /* Light weight theme */
+      --newtab-search-background-color: var(--lwt-sidebar-background-color);
+    }
+
+    /* Padding */
+    #searchSuggestionTable {
+      border-radius: 4px !important;
+      -moz-window-shadow: cliprounded;
+    }
+
+    .contentSearchSuggestionTable .contentSearchOneOffItem {
+      width: 32px !important;
+      height: 32px !important;
+
+      /* Margin */
+      margin-block: 5px !important;
+      margin-inline-start: 5px !important;
+      margin-inline-end: 8px !important;
+
+      /* Border */
+      border-radius: 4px !important;
+      border-image: none !important; /* Original: linear-gradient(transparent 18%, var(--newtab-border-secondary-color) 18%, var(--newtab-border-secondary-color) 82%, transparent 82%) 1; */
+      border-inline-end: none !important; /* Original: 1px solid; */
+    }
+
+    #contentSearchSettingsButton::before {
+      content: url("chrome://global/skin/icons/settings.svg") !important;
+      display: -moz-inline-box;
+
+      /* Color */
+      -moz-context-properties: fill, fill-opacity !important;
+      fill: currentColor !important;
+
+      /* Align */
+      margin-inline-end: 5px;
+      vertical-align: -25%;
+    }
+
+    /* Pointer */
+    .contentSearchSuggestionTable .contentSearchOneOffItem,
+    #contentSearchSettingsButton {
+      cursor: pointer;
+    }
+
+    /*- Fix Color For Nightly ------------------------------------------------*/
+    .contentSearchSuggestionTable,
+    .contentSearchHeaderRow,
+    .contentSearchHeader,
+    .contentSearchSuggestionsContainer {
+      color: var(--newtab-text-primary-color) !important;
+      background: var(--newtab-search-background-color) !important;
+    }
+
+    .contentSearchSuggestionTable .contentSearchSuggestionRow.selected,
+    .contentSearchSuggestionTable .contentSearchSettingsButton:hover {
+      color: var(--newtab-text-primary-color) !important;
+    }
+
+    .contentSearchSuggestionTable .contentSearchSuggestionRow.selected,
+    .contentSearchSuggestionTable .contentSearchSettingsButton:hover,
+    .contentSearchSuggestionTable .contentSearchOneOffItem.selected {
+      background: var(--newtab-element-hover-color) !important;
+    }
+
+    .contentSearchSuggestionTable .contentSearchSuggestionRow.selected:active,
+    .contentSearchSuggestionTable .contentSearchOneOffItem:active {
+      background: var(--newtab-element-active-color) !important;
+    }
+
+    .contentSearchSuggestionTable .contentSearchSuggestionRow.selected .historyIcon {
+      fill: var(--newtab-icon-secondary-color) !important;
+    }
+  }
+}

arch-config/.mozilla/firefox/default-release/chrome/src/contents/_dark_mode.scss

@@ -0,0 +1,5 @@
+@include Dark {
+  @import "dark_mode/addons_org";
+  @import "dark_mode/support_org";
+  @import "dark_mode/accounts_com";
+}

arch-config/.mozilla/firefox/default-release/chrome/src/contents/_error_page.scss

@@ -0,0 +1,104 @@
+@-moz-document url-prefix("about:neterror"),
+  url("about:restartrequired"), url("chrome://browser/content/aboutRestartRequired.xhtml"),
+  url("about:sessionrestore"),  url("chrome://browser/content/aboutSessionRestore.xhtml")
+{
+  /* Illustrations Position */
+  #errorPageContainer,
+  .description-wrapper {
+    min-height: 300px;
+    background-position: left center;
+    background-repeat: no-repeat;
+    background-size: 38%;
+  }
+
+  #errorPageContainer {
+    display: flex;
+    flex-direction: column;
+  }
+  .description-wrapper {
+    padding-inline-start: 38%;
+  }
+
+  /* Container */
+  .container {
+    min-width: var(--in-content-container-min-width); /* 13em */
+    max-width: var(--in-content-container-max-width); /* 52em */
+  }
+
+  /* Text Position */
+  #text-container {
+    margin: auto;
+    padding-inline-start: 38%;
+  }
+}
+
+@-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=netOffline"),
+  url("about:restartrequired"), url("chrome://browser/content/aboutRestartRequired.xhtml")
+{
+  #errorPageContainer {
+    background-image: url("../icons/error-connection-failure.svg");
+  }
+}
+@-moz-document url-prefix("about:neterror?e=dnsNotFound") {
+  #errorPageContainer {
+    background-image: url("../icons/error-server-not-found.svg");
+  }
+}
+@-moz-document url-prefix("about:neterror?e=malformedURI") {
+  #errorPageContainer {
+    background-image: url("chrome://browser/skin/illustrations/error-malformed-url.svg");
+  }
+}
+@-moz-document url-prefix("about:neterror?e=clockSkewError"),
+  url-prefix("about:neterror?e=nssFailure") {
+  #errorPageContainer {
+    background-image: url("../icons/blue-berror.svg");
+    background-size: 18.5em;
+  }
+}
+
+@-moz-document url("about:sessionrestore"), url("chrome://browser/content/aboutSessionRestore.xhtml")
+{
+  .description-wrapper {
+    background-image: url("../icons/error-session-restore.svg");
+  }
+}
+
+@-moz-document url-prefix("about:neterror?e=fileNotFound") {
+  @media (min-width: 970px) {
+    .title {
+      background-image: url("chrome://global/skin/icons/info.svg") !important;
+    }
+  }
+
+  #text-container {
+    padding-inline-start: 0;
+  }
+}
+@-moz-document url-prefix("about:tabcrashed") {
+  @media (min-width: 970px) {
+    .title {
+      background-image: url("chrome://browser/skin/tab-crashed.svg") !important;
+    }
+  }
+}
+@-moz-document url("about:robots"), url("chrome://browser/content/aboutRobots.xhtml")
+{
+  @media (min-width: 970px) {
+    .title {
+      background-image: url("chrome://browser/content/aboutRobots-icon.png") !important;
+    }
+  }
+}
+@-moz-document url("about:welcomeBack"), url("chrome://browser/content/aboutWelcomeBack.xhtml")
+{
+  @media (min-width: 970px) {
+    .title {
+      background-image: url("../icons/welcome-back.svg") !important;
+    }
+  }
+}

arch-config/.mozilla/firefox/default-release/chrome/src/contents/_proton_color.scss

@@ -0,0 +1,27 @@
+@-moz-document url-prefix("about:"),
+               url-prefix("https://addons.mozilla.org"),
+               url-prefix("https://support.mozilla.org"),
+               url-prefix("https://accounts.firefox.com"),
+               url-prefix("view-source"),
+               regexp("^(((jar:)?file:\/\/\/)|(chrome:\/\/)).*\/$") {
+  @import "../theme/proton_color";
+
+  @include Option("userContent.page.proton_color.dark_blue_accent") {
+    @include Dark {
+      @import "../theme/dark_blue_color";
+
+      :host, :root {
+        @include DarkBlueContent;
+      }
+    }
+  }
+
+  @include Option("userContent.page.proton_color.system_accent") {
+    :host, :root {
+      --in-content-primary-button-text-color: -moz-accent-color-foreground !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;
+    }
+  }
+}

arch-config/.mozilla/firefox/default-release/chrome/src/contents/_proton_contents.scss

@@ -0,0 +1,30 @@
+/*= Common contents ==========================================================*/
+@import "proton_contents/proton_commons";
+
+/*= Field Border =============================================================*/
+@include Option("userContent.page.field_border") {
+  @include Animate {
+    @import "proton_contents/field_border";
+  }
+}
+
+/*= View Source ==============================================================*/
+@import "proton_contents/view_source";
+
+/*= Directory View ===========================================================*/
+@import "proton_contents/directory_view";
+
+/*= about:plugins ============================================================*/
+@import "proton_contents/about_plugins";
+
+/*= about:cache ==============================================================*/
+@import "proton_contents/about_cache";
+
+/*= about:checkerboard =======================================================*/
+@import "proton_contents/about_checkerboard";
+
+/*= about:memory =============================================================*/
+@import "proton_contents/about_memory";
+
+/*= chrome://browser/content/places/places.xhtml =============================*/
+@import "../library/contents";

arch-config/.mozilla/firefox/default-release/chrome/src/contents/_video_player.scss

@@ -0,0 +1,236 @@
+/* Control Bar Size */
+@include Option("userContent.player.size") {
+  #controlsContainer {
+    --button-size: 32px !important; /* Original: 30px */
+    --controlBar-height: 40px; /* Original: 40px, Replace to this value */
+  }
+  #controlsContainer .touch {
+    --button-size: 48px !important; /* Original: 40px */
+    --controlBar-height: 52px; /* Original: 52px */
+  }
+  .videocontrols[inDOMFullscreen] #controlsContainer {
+    --button-size: 64px !important; /* Original: 30px */
+    --track-size: 6px !important; /* Original: 5px, Touch: 7px */
+    --thumb-size: 15px !important; /* Original: 13px, Touch: 16px */
+    --controlBar-height: 64px; /* Original: 40px */
+  }
+  .videocontrols[inDOMFullscreen] #controlsContainer .touch {
+    --button-size: 72px !important; /* Original: 40px */
+    --controlBar-height: 64px; /* Original: 52px */
+  }
+  #controlsContainer .controlBar {
+    height: var(--controlBar-height) !important; /* Original: 40px */
+  }
+  .videocontrols[inDOMFullscreen] #controlsContainer .controlBar {
+    padding-bottom: 8px !important;
+  }
+}
+
+/* Control Bar UI */
+@include Option("userContent.player.ui") {
+  audio {
+    --duration-color: #929292; /* Like Original */
+    --media-background: rgba(26,26,26,.8); /* Like Original */
+
+    border-radius: 8px;
+    --box-shadow1: rgba(14,13,26,.12);
+    --box-shadow2: rgba(7,48,114,.12);
+    --box-shadow3: rgba(34,0,51,.04);
+    box-shadow: 0 5px 10px -3px var(--box-shadow1), 0 3px 16px 2px var(--box-shadow2),
+                0 8px 12px  1px var(--box-shadow3);
+    /* Or: 0 2px 15px rgba(0,0,0,.1); */
+  }
+  video {
+    --duration-color: #eee;
+    --media-background: linear-gradient(transparent, rgba(26,26,26,.85));
+  }
+
+  @include Dark {
+    audio {
+      --box-shadow1: rgba(249, 249, 250, 0.12);
+      --box-shadow2: rgba(91, 91, 102, 0.12);
+      --box-shadow3: rgba(82, 82, 94, 0.04);
+    }
+  }
+  @include Contrast {
+    video {
+      --duration-color: #929292; /* Like Original */
+      --media-background: rgba(26,26,26,.8); /* Like Original */
+    }
+  }
+  #controlsContainer .controlBar {
+    background: var(--media-background) !important;
+  }
+  #controlsContainer .duration {
+    color: var(--duration-color) !important; /* Original: #929292 */
+  }
+
+  @include Option("userContent.player.ui.twoline") {
+    audio {
+      // All thing like original
+      /* #controlsContainer .controlBar */
+      --controlBar-flex-wrap: unset;
+      --controlBar-justify-content: center;
+      --controlBar-align-content: unset;
+      --controlBar-twoline-more-height: 0px;
+      --controlBar-padding-inline: 9px;
+
+      /* #controlsContainer .scrubberStack */
+      /* .scrubberStack - Vertical */
+      --scrubberStack-order: unset;
+      --scrubberStack-height: 100%;
+      --scrubberStack-transform: none;
+
+      /* .scrubberStack - Horizontal */
+      --scrubberStack-margin-inline: 9px;
+
+      /* #controlsContainer .positionDurationBox */
+      --positionDurationBox-flex-grow: unset;
+      --positionDurationBox-margin-left: unset;
+      --positionDurationBox-text-align: center;
+
+      /* Others */
+      --button-outside-margin: 0;
+    }
+    video {
+      /* #scrubber .scrubber::-moz-range-thumb */
+      --scrubber-thumb-scale: 0;
+      --scrubber-thumb-color: #48a0f7; /* Color as hover, Prevent flashing */
+
+      /* .progressBar::-moz-progress-bar */
+      --progressBar-scale: 0.65;
+
+      /* #controlsContainer .controlBar */
+      --controlBar-flex-wrap: wrap;
+      --controlBar-justify-content: space-between;
+      --controlBar-align-content: space-around;
+      --controlBar-padding-inline: 0 !important; /* Original: 9px */
+
+      /* #controlsContainer .scrubberStack */
+      /* .scrubberStack - Vertical */
+      --scrubberStack-order: -1;
+
+      /* .scrubberStack - Horizontal */
+      --scrubberStack-flex-basis: auto;
+      --scrubberStack-twoline-width: 100%;
+      --scrubberStack-margin-inline: 0;
+
+      /* #controlsContainer .positionDurationBox */
+      --positionDurationBox-flex-grow: 2;
+      --positionDurationBox-margin-left: 15px;
+      --positionDurationBox-text-align: left;
+
+      /* Others */
+      --duration-color: #dadada;
+      --button-outside-margin: 9px;
+    }
+
+    .scrubber:not(:hover)::-moz-range-thumb {
+      transform: scale(var(--scrubber-thumb-scale, 1));
+      background-color: var(--scrubber-thumb-color, currentColor) !important;
+    }
+    .progressStack {
+      transform-origin: bottom;
+      transform: scaleY(var(--progressBar-scale, 1));
+    }
+    .scrubber:hover::-moz-range-thumb,
+    .progressContainer:hover .progressStack {
+      transform:scale(1);
+    }
+
+    #controlsContainer .controlBar {
+      flex-wrap: var(--controlBar-flex-wrap);
+      justify-content: var(--controlBar-justify-content);
+      align-content: var(--controlBar-align-content);
+      height: calc(var(--controlBar-height) + var(--controlBar-twoline-more-height, var(--thumb-size))) !important;
+      padding-inline: var(--controlBar-padding-inline) !important; /* Original: 9px */
+    }
+    #controlsContainer .scrubberStack {
+      /* Vertical */
+      order: var(--scrubberStack-order);
+      height: var(--scrubberStack-height, var(--thumb-size)) !important;
+      transform: var(--scrubberStack-transform, translateY(calc(var(--thumb-size) / 2)));
+
+      /* Horizontal */
+      flex-basis: var(--scrubberStack-flex-basis, calc(var(--scrubberStack-width) - 18px)) !important;
+      width: var(--scrubberStack-twoline-width, var(--scrubberStack-width));
+      margin-inline: var(--scrubberStack-margin-inline) !important;
+    }
+    #controlsContainer .positionDurationBox {
+      flex-grow: var(--positionDurationBox-flex-grow);
+      margin-left: var(--positionDurationBox-margin-left);
+      text-align: var(--positionDurationBox-text-align) !important;
+    }
+
+    #playButton {
+      margin-left: var(--button-outside-margin) !important;
+    }
+    #fullscreenButton {
+      margin-right: var(--button-outside-margin) !important;
+    }
+  }
+}
+
+@include Option("userContent.player.icon") {
+  #controlsContainer .fullscreenButton {
+    background-image: url("../icons/enter-fullscreen.svg") !important;
+  }
+  #controlsContainer .fullscreenButton[fullscreened] {
+    background-image: url("../icons/exit-fullscreen.svg") !important;
+  }
+}
+
+@include Option("userContent.player.noaudio") {
+  #controlsContainer .muteButton[noAudio] {
+    /* Remove volume button at noAudio */
+    display: none !important;
+  }
+}
+
+/* Click to play UI */
+@include Option("userContent.player.click_to_play") {
+  #controlsContainer .clickToPlay {
+    cursor: pointer;
+    opacity: 0.65 !important;
+  }
+  #controlsContainer .controlsSpacerStack:hover > .clickToPlay {
+    opacity: 0.85 !important;
+  }
+  #controlsContainer .controlsSpacerStack:hover > .clickToPlay:hover {
+    opacity: 1 !important;
+    fill: #48a0f7 !important; /* color as .scrubber */
+  }
+}
+
+/* Animation */
+@include Option("userContent.player.animate") {
+  @include Animate {
+    /* Control Bar */
+    #controlsContainer .controlBar {
+      transition: transform 350ms ease;
+      opacity: 1 !important;
+    }
+    #controlsContainer .controlBar[hidden] {
+      transform: translateY(100%);
+      transition: transform 350ms ease-in-out, opacity 1s ease 100ms !important;
+      opacity: 0 !important;
+    }
+    #controlsContainer .controlBar[hidden] .progressBar,
+    #controlsContainer .controlBar[hidden] .bufferBar {
+      display: unset !important;
+      opacity: 0.55;
+      transition: opacity 150ms ease 50ms;
+    }
+
+    /* Two line Control Bar */
+    .scrubber::-moz-range-thumb,
+    .progressStack {
+      transition:transform .1s cubic-bezier(0, 0, 0.2, 1);
+    }
+
+    /* Click to play */
+    #controlsContainer .clickToPlay {
+    transition: opacity 150ms ease-in-out, fill 150ms ease-in-out;
+    }
+  }
+}

arch-config/.mozilla/firefox/default-release/chrome/src/contents/dark_mode/_accounts_com.scss

@@ -0,0 +1,149 @@
+/*= Accounts.com ===========================================================*/
+@-moz-document url-prefix("https://accounts.firefox.com")
+{
+  /* Basic */
+  body {
+    color: var(--in-content-page-color) !important;
+    background: var(--in-content-page-background) !important;
+  }
+  .button.primary-button,
+  .button[type="submit"]:not(.secondary-button),
+  .settings-button.primary-button,
+  .settings-button[type="submit"]:not(.secondary-button),
+  button.primary-button,
+  button[type="submit"]:not(.secondary-button) {
+    color: var(--in-content-primary-button-text-color) !important;
+    background: var(--in-content-primary-button-background) !important;
+  }
+
+  /* Text */
+  header h1,
+  .info,
+  .info a,
+  .prefillEmail,
+  .faint a:hover,
+  .cta-neutral:hover {
+    color: var(--in-content-page-color) !important;
+  }
+  #main-content.panel a,
+  .links a,
+  .link-blue,
+  .text-blue-500 {
+    color: var(--in-content-link-color) !important;
+  }
+  .link-blue:hover {
+    color: var(--in-content-link-color-hover) !important;
+  }
+
+  .signed-in-email-message,
+  .verification-email-message,
+  .verification-message,
+  .verification-recovery-code-message,
+  .verification-totp-message,
+  .input-row input[type="email"],
+  .input-row input[type="number"],
+  .input-row input[type="password"],
+  .input-row input[type="tel"],
+  .input-row input[type="text"],
+  .input-row input::placeholder,
+  .firefox-family-services > ul > .firefox-service,
+  .faint,
+  .faint a,
+  .text-grey-400 {
+    color: var(--in-content-deemphasized-text) !important;
+  }
+
+  /* Background */
+  .flex .flex-wrap {
+    background: var(--in-content-page-background);
+  }
+  .password-row .show-password-label {
+    background-color: unset !important;
+  }
+  #main-content,
+  .modal,
+  .firefox-family-services,
+  .input-row input[type="email"],
+  .input-row input[type="number"],
+  .input-row input[type="password"],
+  .input-row input[type="tel"],
+  .input-row input[type="text"],
+  header,
+  .bg-white:not(nav) {
+    background: var(--in-content-box-background) !important;
+  }
+  #suggest-sync,
+  .cta-neutral {
+    background: var(--in-content-button-background) !important;
+  }
+  .cta-neutral:hover,
+  .bg-grey-50:hover,
+  .hover\:bg-grey-100:hover {
+    background: var(--in-content-button-background-hover) !important;
+  }
+  .text-blue-500 .cta-neutral,
+  .text-blue-500 .bg-grey-50,
+  .text-blue-500 .hover\:bg-grey-100 {
+    background: var(--in-content-button-background) !important;
+  }
+  .hover\:bg-grey-200:hover {
+    background: var(--in-content-button-background-active) !important;
+  }
+  .button.primary-button:hover:enabled,
+  .button[type="submit"]:not(.secondary-button):hover:enabled,
+  .settings-button.primary-button:hover:enabled,
+  .settings-button[type="submit"]:not(.secondary-button):hover:enabled,
+  button.primary-button:hover:enabled,
+  button[type="submit"]:not(.secondary-button):hover:enabled {
+    background: var(--in-content-primary-button-background-hover) !important;
+  }
+  .tooltip,
+  .tooltip::before {
+    background: var(--in-content-danger-button-background) !important;
+  }
+
+  /* Fill */
+  .dismiss,
+  #about-mozilla,
+  .show-password-label,
+  footer a[data-testid="link-mozilla"] {
+    filter: invert(95%) !important;
+  }
+  header button svg,
+  header .rounded svg,
+  #service svg {
+    filter: brightness(15) !important;
+  }
+  button.relative,
+  #fxa-settings nav svg {
+    filter: brightness(2) !important;
+  }
+
+  /* Others */
+  .input-row input[type="email"],
+  .input-row input[type="number"],
+  .input-row input[type="password"],
+  .input-row input[type="tel"],
+  .input-row input[type="text"],
+  .unit-row-hr .border-grey-100 {
+    border-color: var(--in-content-border-color) !important;
+  }
+  .input-row input[type="email"]:hover,
+  .input-row input[type="number"]:hover,
+  .input-row input[type="password"]:hover,
+  .input-row input[type="tel"]:hover,
+  .input-row input[type="text"]:hover {
+    border-color: var(--in-content-border-hover) !important;
+  }
+  #main-content {
+    box-shadow: 0 12px 18px 2px rgba(249, 249, 250, 0.12), 0 6px 22px 4px rgba(91, 91, 102, 0.12),
+      0 6px 10px -4px rgba(82, 82, 94, 0.04) !important;
+  }
+  .input-row input[type="email"]:focus,
+  .input-row input[type="number"]:focus,
+  .input-row input[type="password"]:focus,
+  .input-row input[type="tel"]:focus,
+  .input-row input[type="text"]:focus {
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--in-content-primary-button-background-hover) 80%, transparent) !important;
+  }
+}

arch-config/.mozilla/firefox/default-release/chrome/src/contents/dark_mode/_addons_org.scss

@@ -0,0 +1,242 @@
+/*= Addons.org =============================================================*/
+@-moz-document url-prefix("https://addons.mozilla.org")
+{
+  /* Basic */
+  .Page-content,
+  .SecondaryHero,
+  body:not(.developer-hub):not(.statistics),
+  main[aria-label="Content"] {
+    color: var(--in-content-page-color) !important;
+    background: var(--in-content-page-background) !important;
+  }
+
+  /* Text */
+  .AutoSearchInput-query,
+  .AutoSearchInput-suggestions-list,
+  .Page-content h1,
+  .Page-content h2,
+  .SearchResult-link,
+  .Home-SubjectShelf-link:link,
+  .Home-SubjectShelf-link:visited,
+  .DropdownMenuItem-link a,
+  .Select,
+  .Badge,
+  .Notice-generic,
+  .Notice-genericWarning,
+  .Notice-button,
+  .Paginate .Button.Paginate-item:first-child,
+  .Paginate .Button.Paginate-item:last-child,
+  .Paginate .Button.Paginate-item--current-page,
+  .Button--neutral,
+  .blog-entry-title,
+  .blogpost-nav * {
+    color: var(--in-content-text-color) !important;
+  }
+  .AutoSearchInput-suggestions-item:is(:active, :focus, :hover),
+  .AutoSearchInput-suggestions-item--highlighted,
+  .SecondaryHero-message-link,
+  .SecondaryHero-module-link,
+  .Card-contents a:not(.Button),
+  .Card-footer-link a,
+  .Card-shelf-footer-in-header a,
+  .SearchResult-link:is(:active, :focus, :hover),
+  .SearchResult:hover .SearchResult-link,
+  .Home-SubjectShelf-link:is(:active, :focus, :hover),
+  .DropdownMenuItem-link a:is(:active, :focus, :hover),
+  .AddonMeta .MetadataCard-title a:is(:active, :hover),
+  .AddonMeta .MetadataCard-title a.AddonMeta-reviews-content-link:is(:active, :hover),
+  .AddonMeta .MetadataCard-content a:is(:active, :hover),
+  .AddonMeta .MetadataCard-content a.AddonMeta-reviews-content-link:is(:active, :hover),
+  .Addon-summary a,
+  .RatingsByStar-count a:hover,
+  .RatingsByStar-star a:hover,
+  .Paginate .Button.Paginate-item:not(:first-child, :last-child, .Paginate-item--current-page),
+  .AddonTitle-author a,
+  .PermissionsCard-learn-more,
+  .DefinitionList a,
+  .ShowMoreCard-contents a,
+  .AddonDescription-contents a,
+  .AddonTitle a,
+  .TooltipMenu-opener,
+  .LanguageTools .Card-contents a,
+  .blog-entry-read-more-link,
+  .blogpost-nav-next.blogpost-nav-no-prev:hover p,
+  .blogpost-content-wrapper p a,
+  .blogpost-nav-prev:hover p,
+  .blogpost-nav-next:hover p {
+    color: var(--in-content-link-color) !important;
+  }
+  .SearchResult--meta-section,
+  .MetadataCard-title,
+  .MetadataCard-title a,
+  .MetadataCard-content a,
+  .CollectionSort-label,
+  .SearchResult-summary,
+  .AddonMeta .MetadataCard-content a.AddonMeta-reviews-content-link,
+  .AddonMeta .MetadataCard-title a.AddonMeta-reviews-content-link,
+  .PermissionsCard-subhead--optional,
+  .PermissionsCard-subhead--required,
+  .Definition-dt,
+  .RatingsByStar-count a,
+  .RatingsByStar-star a,
+  .Paginate-page-number,
+  .AddonSummaryCard-addonAverage,
+  .AddonReviewCard-authorByLine,
+  .UserReview-byLine,
+  .UserReview-reply-header,
+  .Home-heroHeader-subtitle,
+  .blog-entry-date,
+  .blogpost-breadcrumb *,
+  .AddonTitle-author,
+  .ExpandableCard-ToggleLink,
+  .SearchFilters-label,
+  .PromotedBadge-label--line {
+    color: var(--in-content-deemphasized-text) !important;
+  }
+  .PromotedBadge-label--recommended {
+    color: color-mix(in srgb, #712b00 15%, #ff9400) !important;
+  }
+
+  /* Background */
+  .Button--action {
+    color: var(--in-content-primary-button-text-color) !important;
+    background: var(--in-content-primary-button-background) !important;
+  }
+  .Select,
+  .Button--neutral,
+  .Button--neutral:link,
+  .Notice-button,
+  .AMInstallButton .AMInstallButton-loading-button {
+    background-color: var(--in-content-button-background) !important;
+  }
+  .Button--neutral.Button--micro:not(.Button--disabled):hover,
+  .Button--neutral:not(.Button--disabled):hover,
+  .Notice-button:hover {
+    background: var(--in-content-button-background-hover) !important;
+  }
+  .Button--action.Button--micro:not(.Button--disabled):hover,
+  .Button--action:not(.Button--disabled):hover {
+    background: var(--in-content-primary-button-background-hover) !important;
+  }
+  .ShowMoreCard-contents::after {
+    background: linear-gradient(hsla(0, 0%, 100%, 0), var(--in-content-table-background)) !important;
+  }
+  .AutoSearchInput-query,
+  .AutoSearchInput-suggestions-list,
+  .SecondaryHero-module,
+  .Card-header,
+  .Card-contents,
+  .CardList ul > li,
+  .AddonsCard--horizontal ul.AddonsCard-list .SearchResult-wrapper:is(:focus, :hover),
+  .Paginate,
+  .LandingPage-header,
+  .DropdownMenu-items,
+  .DropdownMenu-items::after,
+  .MetadataCard,
+  .AddonsCard-list,
+  .Card-footer,
+  .StaticAddonCard,
+  .blogpost-nav,
+  .blogpost-nav * {
+    background: var(--in-content-table-background) !important;
+  }
+
+  .Paginate .Button.Paginate-item:is(:active, :hover) {
+    background: var(--in-content-button-background-hover) !important;
+  }
+  .Notice-generic,
+  .Notice-genericWarning {
+    background: color-mix(
+      in srgb,
+      var(--in-content-page-background) 40%,
+      var(--in-content-table-background)
+    ) !important;
+  }
+
+  .LanguageTools-header-row {
+    color: var(--in-content-table-header-color) !important;
+    background: var(--in-content-table-header-background) !important;
+  }
+  .LanguageTools-table.responsiveTable tbody tr:nth-child(2n) {
+    background-color: var(--in-content-box-background-odd) !important;
+  }
+
+  /* Fill */
+  .Icon-arrow-blue.SearchSuggestion-icon-arrow {
+    filter: hue-rotate(330deg) brightness(1.3) !important;
+  }
+  .SecondaryHero-module-icon {
+    filter: invert(85%) !important;
+  }
+  .Icon-magnifying-glass,
+  .Notice-icon {
+    filter: invert(65%) !important;
+  }
+  .PermissionsCard-learn-more .Icon,
+  .Permission .Icon {
+    filter: invert(100%) !important;
+  }
+  .Icon-heart {
+    filter: brightness(0) !important;
+  }
+
+  /* Others */
+  .DropdownMenu-items {
+    box-shadow: 0 0 2px var(--in-content-border-color) !important;
+  }
+
+  .AutoSearchInput-query {
+    border: 1px solid var(--in-content-table-background) !important;
+  }
+  .AutoSearchInput-query:is(:hover, :focus) {
+    border-color: var(--in-content-primary-button-background) !important;
+  }
+  .AutoSearchInput-query:focus {
+    box-shadow: inset 0 0 0 1px var(--in-content-primary-button-background),
+      0 0 0 1px var(--in-content-primary-button-background), 0 0 0 4px rgba(0, 211, 255, 0.3) !important;
+  }
+
+  .PromotedBadge-link--line {
+    border-color: var(--in-content-deemphasized-text) !important;
+  }
+  .PromotedBadge-link--line:hover {
+    border-color: var(--in-content-button-background-hover) !important;
+  }
+
+  .blog-entry-read-more-link {
+    border-color: var(--in-content-link-color) !important;
+  }
+
+  .blogpost-nav-arrow-left .cls-1,
+  .blogpost-nav-arrow-right .cls-1 {
+    stroke: var(--in-content-text-color) !important;
+  }
+
+  /* /developers/ */
+  .DevHub-Navigation,
+  .DevHub-submit-addon,
+  .DevHub-get-involved,
+  .DevHub-MyAddons > * {
+    background: var(--in-content-page-background) !important;
+    color: var(--in-content-page-color) !important;
+  }
+  .DevHub-Footer,
+  .DevHub-callout-box {
+    background: var(--in-content-box-background) !important;
+    color: var(--in-content-page-color) !important;
+  }
+
+  .DevHub-Navigation.scheme-light ul li a,
+  .DevHub-Footer-sections-header,
+  .DevHub-Footer-section h4,
+  .DevHub-Footer-section p,
+  .DevHub-content-copy h2 {
+    color: var(--in-content-page-color) !important;
+  }
+  .DevHub-Banner a,
+  .DevHub-Footer a,
+  .DevHub-MyAddons-list a,
+  .DevHub-MyAddons-item-buttons-all {
+    color: var(--in-content-link-color) !important;
+  }
+}

arch-config/.mozilla/firefox/default-release/chrome/src/contents/dark_mode/_support_org.scss

@@ -0,0 +1,181 @@
+/*= Support.org ============================================================*/
+@-moz-document url-prefix("https://support.mozilla.org")
+{
+  /* Basic */
+  :root {
+    --color-blue-06: var(--in-content-link-color) !important;
+    --color-blue-07: var(--in-content-link-color-hover) !important;
+    --color-blue-09: var(--in-content-link-color-active) !important;
+
+    --page-bg: var(--in-content-page-background) !important;
+    --color-white: var(--in-content-page-background) !important;
+    --color-shade-bg: var(--in-content-page-background) !important;
+    --color-marketing-gray-02: var(--card-outline-color) !important;
+    --color-inverse-bg: var(--in-content-page-color) !important;
+    --color-inverse: var(--in-content-page-background) !important;
+    --color-text: var(--in-content-page-color) !important;
+    --color-moz-text: var(--in-content-page-color) !important;
+    --color-moz-heading: var(--in-content-page-color) !important;
+    --color-text-light: var(--in-content-deemphasized-text) !important;
+    --color-link: var(--in-content-link-color) !important;
+    --color-success: var(--green-70) !important;
+    --color-warning: var(--yellow-80) !important;
+    --color-error: var(--red-60) !important;
+    --color-error-hover: var(--red-50) !important;
+    --color-moz-heading: #fff;
+    --color-moz-inverse-bg: var(red) !important;
+    --focus-shadow: 0 0 0 4px color-mix(in srgb, var(--in-content-primary-button-background) 30%, transparent),
+      0 0 0 2px var(--in-content-primary-button-background-active);
+  }
+  .warning {
+    --color-link: rgb(55, 255, 255) !important;
+  }
+
+  body,
+  #main-content,
+  #instant-search-content,
+  #mzp-c-menu-panel-help,
+  .mzp-c-navigation,
+  .kbox-container {
+    color: var(--in-content-page-color) !important;
+    background: var(--in-content-page-background) !important;
+  }
+
+  #editor {
+    border: 2px solid var(--in-content-border-color) !important;
+  }
+  .CodeMirror-linenumbers {
+    background: var(--in-content-table-background);
+  }
+  .CodeMirror-lines {
+    color: var(--in-content-deemphasized-text) !important;
+    background: var(--in-content-page-background) !important;
+  }
+  .CodeMirror-scroll {
+    background: var(--in-content-page-background) !important;
+  }
+
+  /* Text */
+  .mzp-c-menu-category .mzp-c-menu-title,
+  .mzp-c-menu-item .mzp-c-menu-item-link,
+  .mzp-c-menu-item .mzp-c-menu-item-link > *,
+  .mzp-c-menu-item .mzp-c-menu-item-list a,
+  #doc-content .menu,
+  .document--content .menu,
+  .forum--entry-content .menu,
+  .tag-name a {
+    color: var(--in-content-page-color) !important;
+  }
+
+  .ts-select-trigger,
+  input[type="date"],
+  input[type="email"],
+  input[type="number"],
+  input[type="password"],
+  input[type="search"],
+  input[type="tel"],
+  input[type="text"],
+  input[type="time"],
+  input[type="url"],
+  select,
+  textarea,
+  #doc-content .button,
+  #doc-content .key,
+  .document--content .button,
+  .document--content .key,
+  .forum--entry-content .button,
+  .forum--entry-content .key {
+    color: var(--in-content-deemphasized-text) !important;
+  }
+
+  .tag-list a {
+    color: var(--color-marketing-gray-10) !important;
+  }
+  .tag-list a:hover,
+  .sidebar-nav a:hover {
+    color: var(--color-link) !important;
+  }
+  .tag-list li {
+    background: var(--in-content-page-color) !important;
+  }
+  .tag-list li:hover {
+    background: var(--in-content-deemphasized-text) !important;
+  }
+
+  #remaining-characters {
+    color: var(--in-content-page-color) !important;
+  }
+
+  /* Background */
+  .sidebar-nav.topics,
+  .sidebar-nav.topics > li {
+    background: var(--in-content-page-background) !important;
+  }
+  .mzp-c-menu-panel {
+    color: var(--in-content-page-color) !important;
+    background: var(--in-content-page-background) !important;
+  }
+  .mzp-c-menu-list-list,
+  .mzp-c-menu-list-list:hover {
+    color: var(--in-content-page-color) !important;
+    background: var(--in-content-box-background) !important;
+  }
+  .mzp-c-menu-list-item:focus,
+  .mzp-c-menu-list-item:hover {
+    background: var(--in-content-button-background-hover) !important;
+  }
+  .cm-bold {
+    color: var(--in-content-page-color) !important;
+  }
+
+  /* Fill */
+  .sumo-nav--logo,
+  .sumo-nav--search-button,
+  .sumo-nav--toggle-button,
+  .card:not(.is-inverse) .card--icon-sm,
+  .mzp-c-menu-item-icon,
+  .mzp-c-menu-button-close,
+  .topic-article--icon,
+  .card--topic > .card--icon,
+  .mzp-c-details .is-summary button::before,
+  details .is-summary button::before,
+  summary::before,
+  .icon-button > button,
+  .search-button {
+    filter: invert(95%) !important;
+  }
+  button.markup-toolbar-button {
+    /*using 0.5 because in middle*/
+    filter: invert(0.5) !important;
+  }
+
+  /* Others */
+  .support-callouts > .card.is-inverse {
+    background: #20133a !important;
+  }
+  .support-callouts > .card.is-inverse :is(h1, h2, h3, h4, h5, h6, li, p) {
+    color: var(--in-content-page-color) !important;
+  }
+
+  .sumo-button.secondary-button {
+    border-color: transparent !important;
+  }
+  .mzp-c-menu-panel {
+    border-color: var(--in-content-button-background-hover) !important;
+  }
+  .mzp-c-menu-item:is(:focus, :hover, :active) .mzp-c-menu-item-link .mzp-c-menu-item-title {
+    border-color: var(--in-content-page-color) !important;
+  }
+
+  @media screen and (min-width: 768px) {
+    .mzp-c-menu-panel {
+      box-shadow: 0 16px 16px -16px rgba(255, 255, 255, 0.3) !important;
+    }
+  }
+  .card--product,
+  .card--topic,
+  .card--article {
+    box-shadow: 0 5px 10px -3px rgba(249, 249, 250, 0.12), 0 3px 16px 2px rgba(91, 91, 102, 0.12),
+      0 8px 12px 1px rgba(82, 82, 94, 0.04) !important;
+  }
+}

arch-config/.mozilla/firefox/default-release/chrome/src/contents/proton_contents/_about_cache.scss

@@ -0,0 +1,11 @@
+@-moz-document url-prefix("about:cache") {
+  table {
+    padding: 0 !important;
+  }
+
+  th,
+  td {
+    padding: 4px !important;
+    text-align: match-parent !important;
+  }
+}

arch-config/.mozilla/firefox/default-release/chrome/src/contents/proton_contents/_about_checkerboard.scss

@@ -0,0 +1,8 @@
+@-moz-document url-prefix("about:checkerboard") {
+  #canvas {
+    border: 1px solid var(--in-content-border-color) !important;
+  }
+  #excludePageFromZoom {
+    vertical-align: bottom !important;
+  }
+}

arch-config/.mozilla/firefox/default-release/chrome/src/contents/proton_contents/_about_memory.scss

@@ -0,0 +1,10 @@
+@-moz-document url-prefix("about:memory") {
+  .opsRow,
+  .section {
+    background-color: var(--in-content-box-background) !important;
+    color: var(--in-content-page-color) !important;
+  }
+  .opsRowLabel input {
+    vertical-align: bottom !important;
+  }
+}

arch-config/.mozilla/firefox/default-release/chrome/src/contents/proton_contents/_about_plugins.scss

@@ -0,0 +1,6 @@
+@-moz-document url-prefix("about:plugins") {
+  .notice {
+    background: var(--in-content-box-background) !important;
+    border: 1px solid var(--in-content-border-color) !important;
+  }
+}

arch-config/.mozilla/firefox/default-release/chrome/src/contents/proton_contents/_directory_view.scss

@@ -0,0 +1,13 @@
+@-moz-document url-prefix("about:sync-log"),
+               regexp("^(((jar:)?file:\/\/\/)|(chrome:\/\/)).*\/$") {
+  body {
+    background-color: var(--in-content-box-background) !important;
+    margin: 4em auto !important; /* Override to default */
+  }
+  thead a {
+    color: var(--in-content-page-color) !important;
+  }
+  td ::before {
+    vertical-align: top !important;
+  }
+}

arch-config/.mozilla/firefox/default-release/chrome/src/contents/proton_contents/_field_border.scss

@@ -0,0 +1,12 @@
+@-moz-document url-prefix("about:") {
+  xul|search-textbox:hover {
+    border-color: var(--in-content-focus-outline-color) !important;
+    transition: border-color 0.5s var(--animation-easing-function);
+  }
+}
+@-moz-document url-prefix("about:config") {
+  #about-config-search:hover {
+    border-color: var(--in-content-focus-outline-color) !important;
+    transition: border-color 0.5s var(--animation-easing-function);
+  }
+}

arch-config/.mozilla/firefox/default-release/chrome/src/contents/proton_contents/_proton_commons.scss

@@ -0,0 +1,232 @@
+/*= abouts' common ===========================================================*/
+@-moz-document url-prefix("about:plugins"),
+               url-prefix("about:cache"),
+               url-prefix("about:checkerboard"),
+               url-prefix("about:sync-log"),
+               url-prefix("about:memory"),
+               regexp("^(((jar:)?file:\/\/\/)|(chrome:\/\/)).*\/$") {
+  /* Base */
+  html,
+  body {
+    font: message-box !important;
+    appearance: none !important;
+    background-color: var(--in-content-page-background) !important;
+    color: var(--in-content-page-color) !important;
+  }
+  body {
+    font-size: 15px !important;
+    font-weight: normal !important;
+    margin: 0 !important;
+  }
+
+  h1 {
+    line-height: 1.2 !important;
+  }
+  h2 {
+    line-height: 1.4em !important;
+  }
+
+  /* Link */
+  a {
+    color: var(--in-content-link-color) !important;
+  }
+  a:hover,
+  .text-link:hover {
+    color: var(--in-content-link-color-hover) !important;
+    text-decoration: underline !important;
+  }
+  a:visited {
+    color: var(--in-content-link-color-visited) !important;
+  }
+  a:hover:active,
+  .text-link:hover:active {
+    color: var(--in-content-link-color-active) !important;
+  }
+  a:-moz-focusring,
+  .text-link:-moz-focusring {
+    outline: 2px solid var(--in-content-focus-outline-color) !important;
+    outline-offset: 1px !important;
+    border-radius: 4px !important;
+  }
+
+  /* Button */
+  button {
+    font: inherit;
+  }
+  button,
+  select,
+  input[type="color"] {
+    appearance: none !important;
+    min-height: 32px !important;
+    color: var(--in-content-button-text-color, inherit) !important;
+    border: 1px solid transparent !important; /* shows up in high-contrast mode */
+    border-radius: var(--in-content-button-border-radius) !important;
+    background-color: var(--in-content-button-background) !important;
+    font-weight: 400 !important;
+    padding: var(--in-content-button-vertical-padding) var(--in-content-button-horizontal-padding) !important;
+    text-decoration: none !important;
+    margin: 4px 8px !important;
+    /* Ensure font-size isn't overridden by widget styling (e.g. in forms.css) */
+    font-size: 1em !important;
+  }
+  button {
+    font-weight: 600 !important;
+    /* Use the same margin of other elements for the alignment */
+    margin-inline: 4px !important;
+    min-width: 6.3em !important;
+  }
+  /* Medium and small buttons get sized to 7/14 and 6/12px padding (when adding
+     * the 1px border): */
+  button.medium {
+    --in-content-button-vertical-padding: 6px;
+    --in-content-button-horizontal-padding: 13px;
+    min-height: 28px !important;
+    font-size: 0.95em !important;
+  }
+  button.small {
+    --in-content-button-vertical-padding: 5px;
+    --in-content-button-horizontal-padding: 11px;
+    min-height: 24px !important;
+    font-size: 0.9em !important;
+  }
+  ::-moz-focus-inner {
+    border: none !important;
+  }
+  button:-moz-focusring {
+    box-shadow: none !important;
+    outline: 2px solid var(--in-content-focus-outline-color) !important;
+    outline-offset: 2px !important;
+  }
+  button:enabled:hover,
+  input[type="color"]:hover {
+    background-color: var(--in-content-button-background-hover) !important;
+    color: var(--in-content-button-text-color-hover) !important;
+    border-color: transparent !important;
+  }
+  button:enabled:hover:active,
+  input[type="color"]:enabled:hover:active {
+    background-color: var(--in-content-button-background-active) !important;
+  }
+  button:disabled,
+  input[type="color"]:disabled {
+    opacity: 0.4 !important;
+  }
+  button[autofocus],
+  button[type="submit"],
+  button.primary {
+    background-color: var(--in-content-primary-button-background) !important;
+    color: var(--in-content-primary-button-text-color) !important;
+  }
+  button[autofocus]:enabled:hover,
+  button[type="submit"]:enabled:hover,
+  button.primary:enabled:hover {
+    background-color: var(--in-content-primary-button-background-hover) !important;
+    color: var(--in-content-primary-button-text-color-hover) !important;
+  }
+  button[autofocus]:enabled:hover:active,
+  button[type="submit"]:enabled:hover:active,
+  button.primary:enabled:hover:active {
+    background-color: var(--in-content-primary-button-background-active) !important;
+  }
+
+  /* Checkbox */
+  input[type="checkbox"] {
+    margin-block: 2px !important;
+  }
+  input[type="checkbox"] {
+    appearance: none !important;
+    height: 16px !important;
+    width: 16px !important;
+    border: 1px solid var(--checkbox-border-color) !important;
+    background-color: var(--checkbox-unchecked-bgcolor) !important;
+    border-radius: 2px !important;
+    margin-inline: 0 6px !important;
+    flex-shrink: 0 !important; /* avoid shrinking inside flex container */
+  }
+  input[type="checkbox"]:enabled:hover {
+    background-color: var(--checkbox-unchecked-hover-bgcolor) !important;
+  }
+  input[type="checkbox"]:enabled:hover:active {
+    background-color: var(--checkbox-unchecked-active-bgcolor) !important;
+  }
+  input[type="checkbox"]:checked {
+    border-color: var(--checkbox-checked-border-color) !important;
+    background-color: var(--checkbox-checked-bgcolor) !important;
+    background-image: url("chrome://global/skin/icons/check.svg") !important;
+    background-position: center !important;
+    background-repeat: no-repeat !important;
+    -moz-context-properties: fill !important;
+    fill: currentColor !important;
+    color: var(--checkbox-checked-color) !important;
+    /* Style the button also when printing with "Print Backgrounds" unchecked */
+    color-adjust: exact !important;
+  }
+  input[type="checkbox"]:enabled:checked:hover {
+    background-color: var(--checkbox-checked-hover-bgcolor) !important;
+  }
+  input[type="checkbox"]:enabled:checked:hover:active {
+    background-color: var(--checkbox-checked-active-bgcolor) !important;
+  }
+
+  /* Textarea */
+  input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]),
+  textarea {
+    appearance: none !important;
+    border: 1px solid var(--in-content-box-border-color) !important;
+    border-radius: 4px !important;
+    color: inherit !important;
+    background-color: var(--in-content-box-background) !important;
+  }
+  input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]),
+  textarea {
+    font-family: inherit !important;
+    font-size: inherit !important;
+    padding: 8px !important;
+    margin: 2px 4px !important;
+  }
+  input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):focus,
+  textarea:focus,
+  search-textbox[focused],
+  tree:focus-visible,
+  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 */
+  }
+  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 */
+  }
+  input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):disabled,
+  textarea:disabled,
+  search-textbox[disabled="true"] {
+    opacity: 0.4 !important;
+  }
+
+  /* Table */
+  table {
+    width: 100% !important;
+  }
+}
+
+@-moz-document url-prefix("about:plugins"),
+               url-prefix("about:cache"),
+               url-prefix("about:checkerboard") {
+  table {
+    border: 1px solid var(--in-content-table-border-color) !important;
+    border-radius: 0 !important;
+  }
+}
+@-moz-document url-prefix("about:cache"),
+               url-prefix("about:checkerboard") {
+  th,
+  td {
+    border: 1px solid var(--in-content-table-border-color) !important;
+  }
+  th {
+    background-color: var(--in-content-table-header-background) !important;
+    color: var(--in-content-table-header-color) !important;
+  }
+}

arch-config/.mozilla/firefox/default-release/chrome/src/contents/proton_contents/_view_source.scss

@@ -0,0 +1,59 @@
+@-moz-document url-prefix("view-source") {
+  :root {
+    background-color: var(--in-content-page-background) !important; /* Original: white */
+    color: var(--in-content-page-color) !important; /* Original: black */
+
+    /* Colors */
+    --view-source-green: var(--green-80);
+    --view-source-purple: #800080; /* Like alphenglow */
+  }
+  @include Dark {
+    :root {
+      --view-source-green: var(--green-60);
+      --view-source-purple: #c68aff;
+    }
+  }
+
+  pre[id]::before,
+  span[id]::before {
+    color: color-mix(
+      in srgb,
+      var(--in-content-page-color) 70%,
+      var(--in-content-page-background)
+    ) !important; /* Original: #ccc */
+  }
+  .highlight .start-tag,
+  .highlight .end-tag {
+    color: var(--view-source-purple) !important; /* Original: purple */
+  }
+  .highlight .comment {
+    color: var(--view-source-green) !important; /* Original: green */
+  }
+  .highlight .cdata {
+    color: var(--in-content-border-invalid) !important; /* Original: #CC0066 */
+  }
+  .highlight .doctype {
+    color: #4682b4 !important; /* Original: steelblue */
+  }
+  .highlight .pi {
+    color: orchid !important; /* Original: orchid */
+  }
+  .highlight .entity {
+    color: #ff4500 !important; /* Original: #FF4500 */
+  }
+  .highlight .attribute-name {
+    color: var(--view-source-green) !important; /* Original: black */
+  }
+  .highlight .attribute-value {
+    color: var(--in-content-link-color) !important; /* Original: blue */
+  }
+  .highlight .markupdeclaration {
+    color: #4682b4 !important; /* Original: steelblue */
+  }
+  .highlight .error,
+  .highlight
+    .error
+    > :-moz-any(.start-tag, .end-tag, .comment, .cdata, .doctype, .pi, .entity, .attribute-name, .attribute-value) {
+    color: var(--in-content-error-text-color) !important; /* Original: red */
+  }
+}

arch-config/.mozilla/firefox/default-release/chrome/src/decoration/_animate.scss

@@ -0,0 +1,197 @@
+/*- Background Color -------------------------------------------------------*/
+@mixin _animate_bgColor($duration, $presudo: "") {
+  button#{$presudo},
+  toolbarbutton#{$presudo},
+  stack#{$presudo},
+  vbox#{$presudo},
+  .toolbarbutton-icon#{$presudo},
+  #tabs-newtab-button#{$presudo} > .toolbarbutton-icon {
+    transition: background-color $duration var(--animation-easing-function) !important;
+  }
+}
+@include _animate_bgColor(1s);
+@include _animate_bgColor(0.25s, ":hover");
+@include OS($linux) {
+  .tabbrowser-tab:is([visuallyselected], [multiselected], [selected]) .tab-background:not(:-moz-lwtheme) {
+    transition: background-image 0.25s var(--animation-easing-function) !important;
+  }
+}
+
+.subviewbutton {
+  /* treechildren::-moz-tree-row: Can't apply
+     menu, menuitem is not apply.
+   */
+  transition: background-color 0.5s var(--animation-easing-function) !important;
+  &:hover {
+    transition: background-color 0.1s var(--animation-easing-function) !important;
+  }
+}
+
+/*- Pinned Tab -------------------------------------------------------------*/
+#tabbrowser-tabs:not([movingtab]) {
+  .tabbrowser-tab {
+    &:not([collapsed]) {
+      /* -moz-box-flex may be caused #tabbrowser-tabs[closebuttons] */
+      transition: -moz-box-flex 0.2s var(--animation-easing-function),
+        margin-inline-start 0.2s var(--animation-easing-function), min-width 0.1s ease-out, max-width 0.1s ease-out !important;
+    }
+    &[pinned] {
+      transition: -moz-box-flex 0.2s var(--animation-easing-function),
+        margin-inline-start 0.2s var(--animation-easing-function) !important;
+
+    }
+  }
+
+  .tab-content {
+    &::before,
+    &::after {
+      transition: width 0.2s var(--animation-easing-function), transform 0.2s var(--animation-easing-function) !important;
+    }
+    .tab-label-container {
+      transition: width 0.3s var(--animation-easing-function) !important;
+    }
+    .tab-icon-image {
+      transition: all 0.3s var(--animation-easing-function) !important;
+    }
+  }
+}
+
+/*- URL / Search Bar -------------------------------------------------------*/
+#urlbar-background,
+#searchbar {
+  transition: border-color 1s var(--animation-easing-function), background-color 1.5s var(--animation-easing-function) !important;
+  &:hover {
+    transition: border-color 0.5s var(--animation-easing-function), background-color 1s var(--animation-easing-function) !important;
+  }
+}
+
+/* Buttons in URL bar */
+#tracking-protection-icon-container,
+#identity-icon-box,
+#identity-permission-box,
+#notification-popup-box,
+#page-action-buttons > .urlbar-page-action {
+  transition: background-color 2.5s var(--animation-easing-function) !important;
+  &:hover {
+    transition: background-color 1.25s var(--animation-easing-function) !important;
+  }
+}
+
+/*- Border - Other Fields --------------------------------------------------*/
+#search-box,
+xul|search-textbox.tabsFilter,
+#editBMPanel_namePicker,
+#editBMPanel_tagsField,
+.findbar-container .findbar-textbox {
+  transition: border-color 1s var(--animation-easing-function) !important;
+  &:hover {
+    transition: border-color 0.5s var(--animation-easing-function) !important;
+  }
+}
+
+/*- Sidebar ----------------------------------------------------------------*/
+@include NotOption("userChrome.decoration.disable_sidebar_animate") {
+  #sidebar-box {
+    /* like #sidebar-box > #sidebar */
+    min-width: 14em;
+    width: 18em;
+    max-width: 36em;
+
+    /* Animation */
+    transition: margin-inline-start 0.25s var(--animation-easing-function), opacity 0.25s ease-in-out,
+      visibility 0s linear !important;
+
+    &[hidden="true"] {
+      display: -moz-box !important;
+      margin-inline-start: -18em;
+      opacity: 0;
+      visibility: collapse;
+      transition-delay: 0s, 0s, 0.25s !important;
+    }
+  }
+}
+
+/*- Full Screen ------------------------------------------------------------*/
+#navigator-toolbox {
+  /* Full screen out */
+  transition: margin-top 1s ease;
+  transform-origin: top;
+
+  &[inFullscreen="true"] {
+    /* Full screen enter */
+    animation-duration: 1s;
+    animation-name: fullscreen;
+    animation-timing-function: ease;
+
+    /* Full screen navbar not hover */
+    // transition: margin-top 0.3s var(--animation-easing-function) 50ms;
+    transition: margin-top 1.3s var(--animation-easing-function) 50ms;
+    &:hover {
+    // Full screen navbar hover
+    // transition-duration: 1.5s; // Not works, because !important
+    // transition-delay: 0.5s;
+      margin-top: 0 !important;
+    }
+  }
+}
+
+@keyframes fullscreen {
+  from {
+    margin-top: 0;
+  }
+  /* Dont' use `to`: Depending on density */
+}
+
+/*- Expand - Synced Tabs ---------------------------------------------------*/
+@-moz-document url("chrome://browser/content/syncedtabs/sidebar.xhtml")
+{
+  .item-tabs-list {
+    transition: transform 0.2s ease-out, opacity 0.2s ease-out;
+    transform: translateY(0%);
+    opacity: 1;
+    max-height: 100%;
+  }
+
+  .item.client.closed .item-tabs-list {
+    display: flex !important;
+
+    transition: transform 0.2s ease-out, opacity 0.2s ease-out,
+      max-height 0.25s cubic-bezier(0.82, 0.085, 0.395, 0.895) 0.05s;
+    visibility: hidden;
+    transform: translateY(-100%);
+    opacity: 0;
+    max-height: 0;
+  }
+}
+
+/*- Arrow - Synced Tabs ----------------------------------------------------*/
+@-moz-document url("chrome://browser/content/syncedtabs/sidebar.xhtml")
+{
+  /* treechildren::-moz-tree-twisty: Can't apply */
+  #template-container .item.client {
+    .item-twisty-container {
+      transition: transform 0.1s var(--animation-easing-function) !important;
+    }
+
+    &.closed .item-twisty-container {
+      transform: rotate(-90deg);
+      background-image: url("chrome://global/skin/icons/arrow-down-12.svg") !important;
+
+      &:dir(rtl) {
+        transform: rotate(90deg);
+      }
+    }
+  }
+}
+
+/*- Arrow - Edit Bookmark Popup --------------------------------------------*/
+#editBookmarkPanelRows .expander-up .button-icon,
+#editBookmarkPanelRows .expander-down .button-icon {
+  transition: transform 0.1s var(--animation-easing-function) !important;
+}
+#editBookmarkPanelRows .expander-up {
+  list-style-image: url("chrome://global/skin/icons/arrow-down.svg") !important;
+  .button-icon {
+    transform: rotate(180deg);
+  }
+}

arch-config/.mozilla/firefox/default-release/chrome/src/decoration/_cursor.scss

@@ -0,0 +1,33 @@
+#appMenu-proton-update-banner,
+#appMenu-fxa-status2:not([fxastatus]) > #appMenu-fxa-label2,
+#appMenu-zoomReduce-button2,
+#appMenu-zoomReset-button2,
+#appMenu-zoomEnlarge-button2,
+#appMenu-fullscreen-button2,
+#panelMenu_showAllBookmarks,
+#PanelUI-historyMore,
+#appMenuClearRecentHistory:not([disabled]),
+#appMenu-library-recentlyClosedTabs > .restoreallitem.panel-subview-footer-button,
+#appMenu-library-recentlyClosedWindows > .restoreallitem.panel-subview-footer-button,
+#BMB_viewBookmarksSidebar,
+#BMB_bookmarksShowAllTop,
+#BMB_bookmarksShowAll,
+#import-button,
+menuitem.openintabs-menuitem,
+#downloadsListBox .downloadButton,
+#downloadsListBox .download-state[exists],
+#downloadsListBox .download-state[exists] .downloadDetails,
+#downloadsHistory,
+#protections-popup-footer .protections-popup-footer-button,
+#protections-popup-multiView .panel-subview-footer-button,
+#identity-popup-clear-sitedata-button,
+#identity-popup-more-info {
+  cursor: pointer !important;
+}
+
+/* TODO: For now, fxa-menu doesn't show any status.
+           (JS required, observe .syncNowBtn status)
+  #PanelUI-fxa-menu-syncnow-button[syncstatus="active"] {
+    cursor: progress !important;
+  }
+  */

arch-config/.mozilla/firefox/default-release/chrome/src/decoration/_download_panel.scss

@@ -0,0 +1,18 @@
+/* Accent Color for downloaded item */
+#downloadsListBox .download-state[exists] .downloadDetails {
+  color: var(--button-primary-bgcolor);
+  &.downloadDetailsHover {
+    color: var(--button-primary-hover-bgcolor);
+  }
+}
+
+/* File moved or missing */
+#downloadsListBox .download-state:not([exists], [state="0"]) {
+  .downloadTarget {
+    text-decoration: line-through;
+    text-decoration-color: color-mix(in srgb, currentColor 65%, transparent);
+  }
+  .downloadTypeIcon {
+    filter: grayscale(100%) !important;
+  }
+}

arch-config/.mozilla/firefox/default-release/chrome/src/decoration/_field_border.scss

@@ -0,0 +1,23 @@
+/*- URL, Search Bar --------------------------------------------------------*/
+#urlbar:hover:not([focused="true"]) > #urlbar-background,
+#searchbar:hover:not(:focus-within) {
+  --toolbar-field-border-color: var(--toolbar-field-focus-border-color);
+}
+
+/*- Other Fields -----------------------------------------------------------*/
+/* Sidebar */
+.sidebar-panel[lwt-sidebar] #search-box:hover,
+body[lwt-sidebar] xul|search-textbox.tabsFilter:hover {
+  border-color: var(--lwt-sidebar-highlight-background-color, Highlight) !important;
+}
+.sidebar-panel:not([lwt-sidebar]) #search-box:hover,
+body:not([lwt-sidebar]) xul|search-textbox.tabsFilter:hover {
+  border-color: -moz-accent-color !important;
+}
+
+/* Others */
+#editBMPanel_namePicker:hover,
+#editBMPanel_tagsField:hover,
+.findbar-container .findbar-textbox:hover {
+  --input-border-color: color-mix(in srgb, var(--focus-outline-color, -moz-accent-color) 50%, transparent);
+}

arch-config/.mozilla/firefox/default-release/chrome/src/decoration/_index.scss

@@ -0,0 +1,26 @@
+/*= Cursor Types =============================================================*/
+@include Option("userChrome.decoration.cursor") {
+  @import "cursor";
+}
+
+@include Animate {
+  /*= Field Border ===========================================================*/
+  @include Option("userChrome.decoration.field_border") {
+    @import "field_border";
+  }
+
+  /*= Downloads Panel ========================================================*/
+  @include Option("userChrome.decoration.download_panel") {
+    @import "download_panel";
+  }
+
+  /*= Animate ================================================================*/
+  @include Option("userChrome.decoration.animate") {
+    @import "animate";
+  }
+  @include Option("userChrome.decoration.disable_panel_animate") {
+    :root {
+      --panelui-subview-transition-duration: 1ms !important; /* Disable top right corner menu sliding animation (0ms will not work!) */
+    }
+  }
+}

arch-config/.mozilla/firefox/default-release/chrome/src/fullscreen/_index.scss

@@ -0,0 +1,9 @@
+@include Option("userChrome.fullscreen.overlap") {
+  @include Option("browser.fullscreen.autohide") {
+    @import "overlap";
+  }
+}
+
+@include Option("userChrome.fullscreen.show_bookmarkbar") {
+  @import "show_bookmarkbar";
+}

arch-config/.mozilla/firefox/default-release/chrome/src/icons/_context_menu.scss

@@ -0,0 +1,5 @@
+/** Context Menu - Icons ******************************************************/
+@import "context_menu/tab_toolbar.scss";
+@import "context_menu/content_area.scss";
+@import "context_menu/place";
+@import "context_menu/others";

arch-config/.mozilla/firefox/default-release/chrome/src/icons/_global_menu.scss

@@ -0,0 +1,277 @@
+/** Global Menu ***************************************************************/
+/*= menu_FilePopup ===========================================================*/
+#menu_newNavigatorTab {
+  --menuitem-image: url("chrome://browser/skin/new-tab.svg");
+}
+#menu_newUserContext {
+}
+#menu_newNavigator {
+  --menuitem-image: url("chrome://browser/skin/window.svg");
+}
+#menu_newPrivateWindow {
+  --menuitem-image: url("chrome://browser/skin/privateBrowsing.svg");
+}
+#menu_newFissionWindow {
+}
+#menu_newNonFissionWindow {
+}
+#menu_openLocation {
+}
+#menu_openFile {
+  --menuitem-image: url("chrome://browser/skin/open.svg");
+}
+#menu_close {
+}
+#menu_closeWindow {
+}
+
+#menu_savePage {
+  --menuitem-image: url("chrome://browser/skin/save.svg");
+}
+#menu_sendLink {
+  --menuitem-image: url("chrome://browser/skin/mail.svg");
+}
+
+#menu_printPreview {
+}
+#menu_print {
+  --menuitem-image: url("chrome://global/skin/icons/print.svg");
+}
+
+#menu_importFromAnotherBrowser {
+  --menuitem-image: url("chrome://browser/skin/import.svg");
+}
+
+#goOfflineMenuitem {
+}
+#menu_FileQuitItem {
+  --menuitem-image: url("../icons/quit.svg");
+}
+
+/* Mange Containers */
+#menu_newUserContext menupopup menuitem:last-child {
+  --menuitem-image: url("chrome://global/skin/icons/settings.svg");
+}
+
+/*= menu_EditPopup ===========================================================*/
+#menu_undo {
+  --menuitem-image: url("../icons/undo.svg");
+}
+#menu_redo {
+}
+
+#menu_cut {
+  --menuitem-image: url("chrome://browser/skin/edit-cut.svg");
+}
+#menu_copy {
+  --menuitem-image: url("../icons/edit-copy.svg");
+}
+#menu_paste {
+  --menuitem-image: url("chrome://browser/skin/edit-paste.svg");
+}
+#menu_delete {
+  --menuitem-image: url("chrome://global/skin/icons/delete.svg");
+}
+
+#menu_selectAll {
+  --menuitem-image: url("../icons/select-all-on.svg");
+}
+
+#menu_find {
+  --menuitem-image: url("chrome://global/skin/icons/search-glass.svg");
+}
+#menu_findAgain {
+}
+
+#textfieldDirection-swap {
+}
+
+#menu_preferences {
+  --menuitem-image: url("chrome://global/skin/icons/settings.svg");
+}
+
+/*= menu_viewPopup ===========================================================*/
+#viewToolbarsMenu {
+  --menuitem-image: url("../icons/toolbar.svg");
+}
+#viewSidebarMenuMenu {
+  --menuitem-image: url("chrome://browser/skin/sidebars.svg");
+}
+
+#viewFullZoomMenu {
+  --menuitem-image: url("../icons/screenshot.svg");
+}
+#pageStyleMenu {
+  --menuitem-image: url("../icons/document-css.svg");
+}
+#repair-text-encoding {
+  --menuitem-image: url("chrome://browser/skin/characterEncoding.svg");
+}
+
+#fullScreenItem {
+  --menuitem-image: url("chrome://browser/skin/fullscreen.svg");
+}
+#menu_readerModeItem {
+  --menuitem-image: url("chrome://browser/skin/reader-mode.svg");
+}
+#menu_showAllTabs {
+}
+
+#documentDirection-swap {
+  --menuitem-image: url("../icons/text-direction-horizontal-ltr.svg");
+}
+
+/* view-menu-popup sub menu */
+#menu_customizeToolbars {
+  --menuitem-image: url("chrome://browser/skin/customize.svg");
+}
+
+/* viewFullZoomMenu sub menu */
+#menu_zoomEnlarge {
+  --menuitem-image: url("chrome://browser/skin/add-circle-fill.svg");
+}
+#menu_zoomReduce {
+  --menuitem-image: url("chrome://browser/skin/subtract-circle-fill.svg");
+}
+#menu_zoomReset {
+  --menuitem-image: url("../icons/resize.svg");
+}
+
+/*= goPopup ==================================================================*/
+#menu_showAllHistory {
+  --menuitem-image: url("chrome://browser/skin/history.svg");
+}
+#sanitizeItem {
+  --menuitem-image: url("chrome://browser/skin/forget.svg");
+}
+
+#sync-tabs-menuitem {
+  --menuitem-image: url("chrome://browser/skin/sync.svg");
+}
+#historyRestoreLastSession {
+  --menuitem-image: url("../icons/restore-session.svg");
+}
+#hiddenTabsMenu {
+}
+#historyUndoMenu {
+  --menuitem-image: url("chrome://browser/skin/tab.svg");
+}
+#historyUndoWindowMenu {
+  --menuitem-image: url("chrome://browser/skin/window.svg");
+}
+
+/* sub menu */
+#historyUndoPopup .restoreallitem {
+  --menuitem-image: url("../icons/movetowindow-16.svg");
+}
+#historyUndoWindowPopup .restoreallitem {
+  --menuitem-image: url("../icons/restore-session.svg");
+}
+
+/*= bookmarksMenuPopup =======================================================*/
+#bookmarksShowAll {
+  --menuitem-image: url("chrome://browser/skin/bookmark-star-on-tray.svg");
+}
+
+#menu_bookmarkThisPage,
+#menu_bookmarkAllTabs {
+  --menuitem-image: url("chrome://browser/skin/bookmark-hollow.svg");
+}
+#menu_bookmarkThisPage[data-l10n-id="menu-bookmark-edit"] {
+  --menuitem-image: url("chrome://browser/skin/bookmark.svg");
+}
+
+#bookmarksToolbarFolderMenu {
+}
+#menu_unsortedBookmarks {
+}
+#menu_mobileBookmarks {
+}
+
+/*= menu_ToolsPopup ==========================================================*/
+#menu_openDownloads {
+  --menuitem-image: url("chrome://browser/skin/downloads/downloads.svg");
+}
+#menu_openAddons {
+  --menuitem-image: url("chrome://mozapps/skin/extensions/extension.svg");
+}
+#sync-setup {
+  --menuitem-image: url("chrome://browser/skin/fxa/avatar-empty.svg");
+}
+#sync-enable {
+}
+#sync-unverifieditem {
+}
+#sync-syncnowitem {
+  --menuitem-image: url("chrome://browser/skin/sync.svg");
+}
+#sync-reauthitem {
+}
+
+#webDeveloperMenu, /* Legacy */
+  #browserToolsMenu {
+  --menuitem-image: url("../icons/developer.svg");
+}
+#menu_pageInfo {
+  --menuitem-image: url("../icons/document-endnote.svg");
+}
+
+/* menuWebDeveloperPopup sub menu */
+#enableDeveloperTools {
+}
+#menu_devToolbox {
+}
+#menu_taskManager {
+  --menuitem-image: url("../icons/performance.svg");
+}
+#menu_devtools_remotedebugging {
+  --menuitem-image: url("../icons/bug.svg");
+}
+#menu_browserToolbox {
+  --menuitem-image: url("../icons/window-dev-tools.svg");
+}
+#menu_browserContentToolbox {
+  --menuitem-image: url("../icons/command-frames.svg");
+}
+#menu_browserConsole {
+  --menuitem-image: url("chrome://devtools/skin/images/command-console.svg");
+}
+#menu_responsiveUI {
+}
+#menu_eyedropper {
+}
+#menu_pageSource {
+  --menuitem-image: url("../icons/document-search.svg");
+}
+#extensionsForDevelopers {
+  --menuitem-image: url("chrome://devtools/skin/images/debugging-addons.svg");
+}
+
+/*= menu_HelpPopup ===========================================================*/
+#menu_openHelp {
+  --menuitem-image: url("chrome://global/skin/icons/help.svg");
+}
+#feedbackPage {
+  --menuitem-image: url("../icons/send.svg");
+}
+#helpSafeMode {
+  --menuitem-image: url("chrome://devtools/skin/images/debugging-workers.svg");
+}
+#troubleShooting {
+  --menuitem-image: url("chrome://global/skin/icons/more.svg");
+}
+#help_reportSiteIssue {
+  --menuitem-image: url("chrome://global/skin/icons/lightbulb.svg");
+}
+#menu_HelpPopup_reportPhishingtoolmenu {
+  --menuitem-image: url("chrome://global/skin/icons/warning.svg");
+}
+#menu_HelpPopup_reportPhishingErrortoolmenu {
+}
+
+#aboutName {
+  --menuitem-image: url("chrome://global/skin/icons/info.svg");
+}
+
+#helpPolicySupport {
+}

arch-config/.mozilla/firefox/default-release/chrome/src/icons/_global_menubar.scss

@@ -0,0 +1,22 @@
+/*= main-menubar =============================================================*/
+#file-menu {
+  --menuitem-image: url("../icons/mail-inbox-all.svg");
+}
+#edit-menu {
+  --menuitem-image: url("chrome://global/skin/icons/edit.svg");
+}
+#view-menu {
+  --menuitem-image: url("../icons/content-view.svg");
+}
+#history-menu {
+  --menuitem-image: url("chrome://browser/skin/history.svg");
+}
+#bookmarksMenu {
+  --menuitem-image: url("chrome://browser/skin/bookmark.svg");
+}
+#tools-menu {
+  --menuitem-image: url("../icons/toolbox.svg");
+}
+#helpMenu {
+  --menuitem-image: url("chrome://global/skin/icons/help.svg");
+}

arch-config/.mozilla/firefox/default-release/chrome/src/icons/_layout_bookmark_menu.scss

@@ -0,0 +1,93 @@
+/*= Bookmark Menu - Layout ===================================================*/
+/* #goPopup(Legacy of historyMenuPoup), #historyMenuPopup, #bookmarksMenuPopup: looks like global menu
+   * #BMB_bookmarksPopup: looks like arrow panel
+   */
+
+/* Empty Menu */
+menupopup menupopup[emptyplacesresult] .menu-text,
+#PersonalToolbar menupopup[emptyplacesresult] .menu-text {
+  margin-inline-start: 0 !important;
+}
+
+/* Bookmark Popup - As Arrow Panel */
+#BMB_bookmarksPopup,
+#PersonalToolbar {
+  --context-menu-background-padding: var(--arrowpanel-menuitem-padding-inline);
+}
+
+/* Windows 7, 8 */
+@include OS($win7, $win8) {
+  /* Global Menu */
+  menupopup:is(#goPopup, #historyMenuPopup, #bookmarksMenuPopup) .bookmark-item {
+    padding-inline-start: 0 !important;
+  }
+
+  /* Bookmark Popup - None icon menu */
+  #BMB_bookmarksPopup,
+  #PersonalToolbar {
+    --arrowpanel-menuicon-padding: 9px;
+  }
+  menupopup:is(#BMB_bookmarksPopup) menuitem:not(.menuitem-iconic, [disabled="true"]),
+  menupopup:is(#BMB_bookmarksPopup) menu:not(.menu-iconic),
+  #PersonalToolbar menupopup[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]),
+  #PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic) {
+    margin-inline: var(--arrowpanel-menuitem-padding-inline) !important;
+    background-position: left calc(var(--arrowpanel-menuicon-padding)) center !important;
+  }
+  menupopup:is(#BMB_bookmarksPopup) menuitem:not(.menuitem-iconic, [disabled="true"]),
+  menupopup:is(#BMB_bookmarksPopup) menu:not(.menu-iconic) {
+    padding-inline-start: calc(var(--arrowpanel-menuicon-padding) + var(--context-menu-text-padding) + 2px) !important;
+  }
+  #PersonalToolbar menupopup[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]),
+  #PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic) {
+    padding-inline-start: var(--arrowpanel-menuicon-padding) !important;
+  }
+}
+
+/* Windows */
+@include OS($win10) {
+  /* Bookmark Popup - None icon menu */
+  menupopup:is(#BMB_bookmarksPopup) menuitem:not(.menuitem-iconic, [disabled="true"]),
+  menupopup:is(#BMB_bookmarksPopup) menu:not(.menu-iconic),
+  #PersonalToolbar menupopup[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]),
+  #PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic) {
+    margin-inline: var(--arrowpanel-menuitem-padding-inline) !important;
+    padding-inline-start: calc(var(--arrowpanel-menuicon-padding) + var(--context-menu-text-padding)) !important;
+    background-position: left calc(var(--arrowpanel-menuicon-padding)) center !important;
+  }
+}
+
+/* Linux */
+@include OS($linux) {
+  /* Global Menu */
+  menupopup:is(#goPopup, #historyMenuPopup, #bookmarksMenuPopup) .bookmark-item {
+    padding-inline-start: var(--context-menu-background-padding) !important;
+  }
+
+  /* Bookmark Popup - Iconic menu */
+  #BMB_bookmarksPopup .menu-iconic-text,
+  #PersonalToolbar menupopup[placespopup="true"] .bookmark-item .menu-iconic-text {
+    padding-inline-start: 1px !important;
+  }
+  /* Bookmark Popup - None icon menu */
+  menupopup:is(#BMB_bookmarksPopup) menuitem:not(.menuitem-iconic, [disabled="true"]),
+  menupopup:is(#BMB_bookmarksPopup) menu:not(.menu-iconic),
+  #PersonalToolbar menupopup[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]),
+  #PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic) {
+    padding-inline-start: calc(var(--arrowpanel-menuitem-padding-inline) + 1px) !important;
+  }
+}
+
+@include OS($mac) {
+  /* Bookmark Popup - As Arrow Panel */
+  #PersonalToolbar menupopup menuitem,
+  #PersonalToolbar menupopup menu {
+    padding-inline: calc(var(--arrowpanel-menuicon-padding) + var(--arrowpanel-menuitem-padding-inline)) !important;
+  }
+
+  /* Bookmark Popup - None icon menu */
+  menupopup:is(#BMB_bookmarksPopup) menuitem:not(.menuitem-iconic, [disabled="true"]),
+  menupopup:is(#BMB_bookmarksPopup) menu:not(.menu-iconic) {
+    padding-inline-start: calc(var(--arrowpanel-menuitem-padding-inline) + 3px) !important;
+  }
+}

arch-config/.mozilla/firefox/default-release/chrome/src/icons/_layout_menu.scss

@@ -0,0 +1,209 @@
+menupopup menuitem:not([type="checkbox"], [type="radio"]),
+menupopup menu:not([type="checkbox"], [type="radio"]),
+#main-menubar > menu {
+  -moz-appearance: none !important; /* Linux: menulist */
+}
+
+/* Icon */
+:not(menu, #ContentSelectDropdown)
+  > menupopup
+  > menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
+:not(menu, #ContentSelectDropdown)
+  > menupopup
+  > menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
+#main-menubar > menu,
+menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
+  menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
+menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
+  menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
+menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem,
+menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu,
+menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) > menuitem,
+.openintabs-menuitem,
+#blockedPopupDontShowMessage {
+  /* Color */
+  -moz-context-properties: fill, fill-opacity !important;
+  fill: currentColor !important;
+
+  /* Layout */
+  background-size: 16px !important;
+  background-repeat: no-repeat !important;
+  background-image: var(--menuitem-image);
+}
+
+/* For native context menus on macOS */
+@supports -moz-bool-pref("widget.macos.native-context-menus") {
+  :not(menu, #ContentSelectDropdown)
+    > menupopup
+    > menuitem:not(.menuitem-iconic, [type="checkbox"], [checked="true"], .in-menulist),
+  :not(menu, #ContentSelectDropdown)
+    > menupopup
+    > menu:not(.menu-iconic, [type="checkbox"], [checked="true"], .in-menulist) {
+    list-style-image: var(--menuitem-image, url("../icons/blank.svg")) !important;
+  }
+}
+
+/* Padding */
+:root {
+  --context-menu-background-padding-default: 5px;
+  --context-menu-background-padding: var(--context-menu-background-padding-default);
+}
+:not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menuitem:not(.menuitem-iconic),
+:not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menu:not(.menu-iconic),
+menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
+  menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"], .bookmark-item),
+menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
+  menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
+menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem,
+menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu,
+menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) > menuitem,
+.openintabs-menuitem,
+#blockedPopupDontShowMessage {
+  background-position: left var(--context-menu-background-padding) center !important;
+  padding-inline-start: var(--context-menu-background-padding) !important;
+}
+
+/* Menubar */
+@include Option("userChrome.icon.global_menubar") {
+  #main-menubar > menu {
+    background-position: left var(--context-menu-background-padding-default) center !important;
+    padding-inline-start: calc(16px + var(--context-menu-background-padding-default)) !important;
+    padding-inline-end: 3px;
+  }
+  #main-menubar > menu:first-child {
+    background-position: left calc(3px + var(--context-menu-background-padding-default)) center !important;
+    padding-inline-start: calc(19px + var(--context-menu-background-padding-default)) !important;
+  }
+  #main-menubar > menu > menupopup {
+    --menuitem-image: none; /* Prevent Image Inheritance */
+  }
+
+  @include NotOption("userChrome.padding.global_menubar") {
+    #main-menubar > menu {
+      padding-block: 2px !important;;
+    }
+  }
+}
+
+/* Padding - Windows */
+@include OS($win) {
+  /* Checkbox */
+  :root {
+    --context-menu-text-padding: calc(var(--menu-padding) + var(--context-menu-background-padding-default) + 16px);
+  }
+  :not(menu, #ContentSelectDropdown, #context-navigation)
+    > menupopup
+    > menuitem[type="checkbox"]:not([checked="true"])
+    > .menu-iconic-left {
+    padding-inline-start: var(--context-menu-text-padding);
+  }
+}
+
+@include OS($win7) {
+  :root {
+    --context-menu-background-padding-default: 2px;
+  }
+}
+@include OS($win8) {
+  :root {
+    --context-menu-background-padding-default: 3px;
+  }
+}
+@include OS($win7, $win8) {
+  :not(menu, #ContentSelectDropdown, #context-navigation)
+    > menupopup
+    > menuitem:not(.menuitem-iconic, [type="checkbox"], [checked="true"], .in-menulist),
+  :not(menu, #ContentSelectDropdown, #context-navigation)
+    > menupopup
+    > menu:not(.menu-iconic, [type="checkbox"], [checked="true"], .in-menulist),
+  menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
+    menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"], .bookmark-item),
+  menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
+    menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
+  menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem,
+  menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu,
+  menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) > menuitem,
+  .openintabs-menuitem,
+  #blockedPopupDontShowMessage {
+    background-position: left var(--context-menu-background-padding) center !important;
+    padding-inline-start: 0 !important;
+  }
+}
+@include OS($win10) {
+  :root {
+    --context-menu-background-padding: 1em;
+    --context-menu-text-padding: 24px; /* 16px + 8px */
+    --menu-background-padding-default: calc(var(--context-menu-background-padding) + var(--context-menu-text-padding));
+  }
+
+  :not(menu, #ContentSelectDropdown, #context-navigation)
+    > menupopup
+    > menuitem:not(.menuitem-iconic, [type="checkbox"], [checked="true"], .in-menulist),
+  :not(menu, #ContentSelectDropdown, #context-navigation)
+    > menupopup
+    > menu:not(.menu-iconic, [type="checkbox"], [checked="true"], .in-menulist),
+  menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
+    menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"], .bookmark-item),
+  menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
+    menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
+  menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem,
+  menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu,
+  menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) > menuitem,
+  .openintabs-menuitem,
+  #blockedPopupDontShowMessage {
+    padding-inline-start: var(--menu-background-padding-default) !important;
+    margin-left: 0 !important;
+  }
+}
+
+/* Padding - Linux */
+@include OS($linux) {
+  :root {
+    --context-menu-background-padding-default: 6px;
+  }
+
+  #main-menubar > menu > .menubar-text {
+    padding-inline-start: 3px;
+  }
+}
+
+/* Padding - Mac */
+@include OS($mac) {
+  :root {
+    --context-menu-background-padding-default: 10px;
+    --context-menu-mac-padding: 21px;
+  }
+
+  /* context menu width */
+  :not(menu, #ContentSelectDropdown, #context-navigation)
+    > menupopup
+    > menuitem:not(.menuitem-iconic, [type="checkbox"], [checked="true"], .in-menulist),
+  :not(menu, #ContentSelectDropdown, #context-navigation)
+    > menupopup
+    > menu:not(.menu-iconic, [type="checkbox"], [checked="true"], .in-menulist),
+  #blockedPopupDontShowMessage {
+    padding-inline-end: var(--context-menu-background-padding) !important;
+  }
+
+  /* text position */
+  :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menuitem > .menu-text,
+  :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menu > menu-text {
+    padding-inline-start: var(--context-menu-mac-padding) !important;
+  }
+
+  /* Checkbox menuitem, None iconic menu */
+  :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menuitem[type="checkbox"],
+  :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menu:not(.menu-iconic) {
+    padding-inline-start: calc(var(--context-menu-background-padding) + var(--context-menu-mac-padding)) !important;
+  }
+
+  /* Global Menu */
+  /* Disabled. some icons not appear
+  menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
+    menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"], .bookmark-item),
+  menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
+    menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]) {
+    list-style-image: var(--menuitem-image, url("../icons/blank.svg"));
+  }
+ */
+}

arch-config/.mozilla/firefox/default-release/chrome/src/icons/_layout_panel.scss

@@ -0,0 +1,99 @@
+/*= Padding ==================================================================*/
+:root {
+  --arrowpanel-menuicon-padding: 8px;
+  --arrowpanel-menublank-padding: calc(var(--arrowpanel-menuicon-padding) * 2 + var(var(--arrowpanel-menuitem-padding-inline))) !important;
+  --arrowpanel-menuimageblank-padding: calc(var(--arrowpanel-menuitem-padding-inline) - 2px) !important;
+  --arrowpanel-menuimageblank-padding-block: calc(var(--arrowpanel-menuitem-padding-block) - 2px) !important;
+}
+.subviewbutton > .toolbarbutton-icon {
+  width: 16px;
+}
+
+@include Option("userChrome.icon.panel_photon", "userChrome.icon.panel_sparse") {
+  :root {
+    /* Global */
+    --arrowpanel-menuicon-paddingx2: calc(var(--arrowpanel-menuicon-padding) * 2);
+
+    /* General Panel */
+    --arrowpanel-menublank-padding: calc(var(--arrowpanel-menuicon-paddingx2) + 8px) !important;
+    --arrowpanel-menuimageblank-padding: calc(var(--arrowpanel-menuitem-padding-inline) - 2px) !important;
+
+    /* Blank Menu Left Padding */
+    --arrowpanel-menuimageblank-padding-horizontal: calc(
+      var(--arrowpanel-menuicon-paddingx2) + var(--arrowpanel-menuitem-padding-inline)
+    );
+    --arrowpanel-menuitemblank-padding: calc(var(--arrowpanel-menuitem-padding-block) + 1px);
+  }
+}
+
+#downloadsHistory .button-text,
+.subviewbutton > .toolbarbutton-text {
+  padding-inline-start: var(--arrowpanel-menuicon-padding) !important;
+}
+.toolbaritem-combined-buttons > .subviewbutton:not(.subviewbutton-iconic) > .toolbarbutton-text {
+  padding-inline-start: 0 !important;
+}
+#panelMenu_bookmarksMenu .subviewbutton[disabled="true"] .toolbarbutton-text,
+#appMenu_historyMenu .subviewbutton[disabled="true"] .toolbarbutton-text {
+  padding-inline-start: var(--arrowpanel-menublank-padding) !important;
+}
+#appMenu-proton-update-banner .toolbarbutton-text {
+  margin-inline-start: 0 !important;
+}
+
+#appMenu-multiView .subviewbutton::before,
+#appMenu-proton-update-banner::before {
+  display: -moz-inline-box;
+  margin-inline-end: var(--arrowpanel-menuicon-padding);
+  width: 16px;
+  height: 16px;
+}
+#appMenu-proton-update-banner {
+  margin-bottom: 2px !important;
+}
+#appMenu-proton-update-banner::before {
+  margin-inline-start: var(--arrowpanel-menuitem-padding-inline) !important;
+}
+#appMenu-fxa-status2,
+#appMenu-zoom-controls2 {
+  align-items: center;
+  padding-top: var(--arrowpanel-menuimageblank-padding-block) !important;
+  padding-bottom: var(--arrowpanel-menuimageblank-padding-block) !important;
+}
+#appMenu-zoom-controls2::before {
+  margin-inline-end: 0 !important;
+}
+#appMenu-zoomReduce-button2,
+#appMenu-zoomReset-button2,
+#appMenu-zoomEnlarge-button2,
+#appMenu-fullscreen-button2 {
+  --arrowpanel-menuitem-padding-block: 0px;
+}
+
+.subviewbutton[type="checkbox"]:not([checked="true"]) > .toolbarbutton-text {
+  margin-left: 16px !important;
+}
+
+/* Icons Color */
+#appMenu-multiView .subviewbutton::before,
+#appMenu-proton-update-banner::before,
+#downloadsHistory .button-icon,
+.subviewbutton > image {
+  fill: currentColor !important;
+  fill-opacity: var(--toolbarbutton-icon-fill-opacity) !important;
+  -moz-context-properties: fill !important;
+}
+#appMenu-zoomReduce-button2 > .toolbarbutton-icon,
+#appMenu-zoomEnlarge-button2 > .toolbarbutton-icon {
+  stroke: var(--zoom-controls-bgcolor, var(--button-bgcolor, ButtonFace)) !important;
+  -moz-context-properties: fill, stroke !important;
+}
+#appMenu-zoomReduce-button2:not([disabled], [open], :active):is(:hover) > .toolbarbutton-icon,
+#appMenu-zoomEnlarge-button2:not([disabled], [open], :active):is(:hover) > .toolbarbutton-icon {
+  stroke: var(--button-hover-bgcolor) !important;
+}
+
+.subviewbutton[disabled="true"] > image {
+  /* Ghost icons when disabled */
+  opacity: 0.4;
+}

arch-config/.mozilla/firefox/default-release/chrome/src/icons/_library.scss

@@ -0,0 +1,66 @@
+/*= organizeButtonPopup ======================================================*/
+#newbookmark {
+  --menuitem-image: url("chrome://browser/skin/bookmark.svg");
+}
+#newfolder {
+  --menuitem-image: url("chrome://global/skin/icons/folder.svg");
+  @include Option("userChrome.icon.library") {
+    --menuitem-image: url("../icons/folder.svg");
+  }
+}
+#newseparator {
+  --menuitem-image: url("../icons/vertical-line.svg");
+}
+
+#orgUndo {
+  --menuitem-image: url("../icons/undo.svg");
+}
+#orgRedo {
+}
+
+#orgCut {
+  --menuitem-image: url("chrome://browser/skin/edit-cut.svg");
+}
+#orgCopy {
+  --menuitem-image: url("../icons/edit-copy.svg");
+}
+#orgPaste {
+  --menuitem-image: url("chrome://browser/skin/edit-paste.svg");
+}
+#orgDelete {
+  --menuitem-image: url("chrome://global/skin/icons/delete.svg");
+}
+
+#orgSelectAll {
+  --menuitem-image: url("../icons/select-all-on.svg");
+}
+
+#orgClose {
+  --menuitem-image: url("chrome://global/skin/icons/close.svg");
+}
+
+/*= viewMenuPopup ============================================================*/
+#viewColumns {
+  --menuitem-image: url("chrome://global/skin/icons/columnpicker.svg");
+}
+#viewSort {
+  --menuitem-image: url("../icons/text-sort-ascending.svg");
+}
+
+/*= maintenanceButtonPopup ===================================================*/
+#backupBookmarks {
+  --menuitem-image: url("chrome://devtools/skin/images/datastore.svg");
+}
+#fileRestoreMenu {
+}
+
+#fileImport {
+  --menuitem-image: url("chrome://browser/skin/save.svg");
+}
+#fileExport {
+  --menuitem-image: url("chrome://browser/skin/open.svg");
+}
+
+#browserImport {
+  --menuitem-image: url("chrome://browser/skin/import.svg");
+}

arch-config/.mozilla/firefox/default-release/chrome/src/icons/_panel.scss

@@ -0,0 +1,460 @@
+/*= Panel - Main =============================================================*/
+#appMenu-proton-addon-banners > .addon-banner-item > .toolbarbutton-icon {
+  display: -moz-inline-box !important;
+  margin-inline-start: var(--arrowpanel-menuicon-padding);
+  -moz-box-ordinal-group: 0 !important;
+}
+
+#appMenu-proton-update-banner::before {
+  content: url("../icons/whatsnew.svg");
+}
+#appMenu-fxa-status2::before {
+  /* Don't exist img tag */
+  content: url("chrome://browser/skin/fxa/avatar-empty.svg");
+}
+#appMenu-fxa-status2:is([fxastatus="signedin"], [fxastatus="unverified"], [fxastatus="login-failed"])::before {
+  display: none;
+}
+#appMenu-fxa-status2:is([fxastatus="signedin"], [fxastatus="unverified"], [fxastatus="login-failed"])
+  #appMenu-fxa-label2::before {
+  /* url("https://profile.accounts.firefox.com/v1/avatar/a") */
+  content: "";
+  border-radius: 50% !important;
+  background-size: 16px !important;
+  background-image: var(--avatar-image-url) !important;
+}
+
+@include Option("userChrome.icon.panel_full", "userChrome.icon.panel_photon") {
+  #appMenu-new-tab-button2 {
+    list-style-image: url("chrome://browser/skin/new-tab.svg");
+  }
+}
+@include Option("userChrome.icon.panel_photon") {
+  #appMenu-save-file-button2,
+  #appMenu-find-button2,
+  #appMenu-more-button2 {
+    padding-top: var(--arrowpanel-menuitemblank-padding) !important;
+    padding-bottom: var(--arrowpanel-menuitemblank-padding) !important;
+  }
+  #appMenu-zoom-controls2 {
+    padding-inline-start: var(--arrowpanel-menuimageblank-padding-horizontal) !important;
+  }
+}
+@include Option("userChrome.icon.panel_sparse") {
+  #appMenu-new-tab-button2,           /* Seperate */
+  #appMenu-passwords-button,          /* Seperate */
+  #appMenu-extensions-themes-button,
+  #appMenu-save-file-button2,         /* Seperate */
+  #appMenu-find-button2,
+  #appMenu-more-button2,              /* Seperate */
+  #appMenu-help-button2,
+  #appMenu-quit-button2               /* Seperate */ {
+    padding-top: var(--arrowpanel-menuitemblank-padding-block) !important;
+    padding-bottom: var(--arrowpanel-menuitemblank-padding-block) !important;
+  }
+  #appMenu-zoom-controls2 {
+    padding-inline-start: var(--arrowpanel-menuimageblank-padding-horizontal) !important;
+  }
+}
+#appMenu-new-window-button2 {
+  list-style-image: url("chrome://browser/skin/window.svg");
+}
+#appMenu-new-private-window-button2 {
+  list-style-image: url("chrome://browser/skin/privateBrowsing.svg");
+}
+
+#appMenu-bookmarks-button {
+  list-style-image: url("chrome://browser/skin/bookmark.svg");
+}
+#appMenu-history-button {
+  list-style-image: url("chrome://browser/skin/history.svg");
+}
+#appMenu-downloads-button {
+  list-style-image: url("chrome://browser/skin/downloads/downloads.svg");
+}
+@include Option("userChrome.icon.panel_full", "userChrome.icon.panel_photon") {
+  #appMenu-passwords-button {
+    list-style-image: url("chrome://browser/skin/login.svg");
+  }
+  #appMenu-extensions-themes-button {
+    list-style-image: url("chrome://mozapps/skin/extensions/extension.svg");
+  }
+}
+
+#appMenu-print-button2 {
+  list-style-image: url("chrome://global/skin/icons/print.svg");
+}
+@include Option("userChrome.icon.panel_full") {
+  #appMenu-save-file-button2 {
+    list-style-image: url("chrome://browser/skin/save.svg");
+  }
+  #appMenu-find-button2 {
+    list-style-image: url("chrome://global/skin/icons/search-glass.svg");
+  }
+  #appMenu-zoom-controls2::before {
+    content: url("../icons/screenshot.svg");
+  }
+}
+
+#appMenu-settings-button {
+  list-style-image: url("chrome://global/skin/icons/settings.svg");
+}
+@include Option("userChrome.icon.panel_full") {
+  #appMenu-more-button2 {
+    list-style-image: url("chrome://browser/skin/ion.svg");
+  }
+}
+@include Option("userChrome.icon.panel_full", "userChrome.icon.panel_photon") {
+  #appMenu-help-button2 {
+    list-style-image: url("chrome://global/skin/icons/help.svg");
+  }
+
+  #appMenu-quit-button2 {
+    list-style-image: url("../icons/quit.svg");
+  }
+}
+
+/*= Panel - Account ==========================================================*/
+#PanelUI-fxa-menu-connect-device-button .toolbarbutton-icon,
+#PanelUI-fxa-menu-account-signout-button .toolbarbutton-icon {
+  width: 16px !important;
+  height: 16px !important;
+}
+
+/* Default */
+#fxa-manage-account-button::before {
+  content: "";
+  display: -moz-inline-box;
+  width: 32px !important;
+  height: 32px !important;
+  border-radius: 50%;
+  background-size: 32px;
+  background-image: var(--avatar-image-url);
+  margin-inline-end: var(--arrowpanel-menuicon-padding);
+
+  @include Option("userChrome.icon.account_image_to_right") {
+    -moz-box-ordinal-group: 2 !important;
+  }
+}
+@include Option("userChrome.icon.account_label_to_right") {
+  #fxa-menu-header-title, #fxa-menu-header-description {
+    text-align: right;
+  }
+}
+
+.syncNowBtn {
+  visibility: visible !important;
+  -moz-box-ordinal-group: 1 !important;
+  margin-inline-end: var(--arrowpanel-menuicon-padding);
+}
+#PanelUI-fxa-menu-setup-sync-button {
+  list-style-image: url("chrome://browser/skin/sync.svg");
+}
+
+#PanelUI-fxa-menu-connect-device-button {
+  list-style-image: url("chrome://browser/skin/fxa/add-device.svg");
+}
+#PanelUI-fxa-menu-sendtab-button {
+  list-style-image: url("../icons/send-to-device.svg");
+}
+#PanelUI-fxa-menu-sync-prefs-button {
+  list-style-image: url("chrome://global/skin/icons/settings.svg");
+}
+#PanelUI-fxa-menu-account-signout-button {
+  list-style-image: url("../icons/sign-out.svg");
+}
+#PanelUI-remotetabs-view-managedevices::before {
+  /* Box */
+  content: "";
+  padding-inline-end: 16px;
+  padding-block: 1px;
+  margin-inline-end: var(--arrowpanel-menuicon-padding);
+
+  /* Color */
+  fill: currentColor;
+  fill-opacity: var(--toolbarbutton-icon-fill-opacity);
+  -moz-context-properties: fill;
+
+  background-size: 16px;
+  background-repeat: no-repeat;
+  background-position: left center;
+  background-image: url("chrome://global/skin/icons/settings.svg");
+}
+
+.PanelUI-remotetabs-notabsforclient-label {
+  margin-inline-start: calc(var(--arrowpanel-menuicon-padding) + var(--arrowpanel-menuitem-padding-inline)) !important;
+  padding-inline-start: var(--arrowpanel-menublank-padding) !important;
+}
+
+/* Change Separator */
+#PanelUI-fxa-menu::before {
+  content: "";
+  display: -moz-box;
+  border-bottom: 1px solid var(--panel-separator-color);
+  margin: var(--panel-separator-margin);
+  padding: 0;
+}
+#PanelUI-fxa-menu > :first-child {
+  -moz-box-ordinal-group: 0;
+}
+#PanelUI-sign-out-separator {
+  display: none;
+}
+.pageAction-sendToDevice-device.subviewbutton.sync-menuitem.sendtab-target[clientType=""], /* Legacy */
+  .sendToDevice-device.subviewbutton.sync-menuitem.sendtab-target[clientType=""] {
+  list-style-image: url("../icons/send-to-device.svg");
+}
+.pageAction-sendToDevice-device.subviewbutton.sync-menuitem.sendtab-target:not([clientType]), /* Legacy */
+  .sendToDevice-device.subviewbutton.sync-menuitem.sendtab-target:not([clientType]) {
+  list-style-image: url("chrome://global/skin/icons/settings.svg");
+}
+
+/*= Panel - Bookmark =========================================================*/
+#panelMenuBookmarkThisPage {
+  list-style-image: url("chrome://browser/skin/bookmark-hollow.svg");
+}
+panelMenuBookmarkThisPage[starred] {
+  list-style-image: url("chrome://browser/skin/bookmark.svg");
+}
+
+#panelMenu_searchBookmarks {
+  list-style-image: url("chrome://global/skin/icons/search-glass.svg");
+}
+#panelMenu_viewBookmarksToolbar {
+  list-style-image: url("chrome://browser/skin/bookmarks-toolbar.svg");
+}
+
+#panelMenu_showAllBookmarks {
+  list-style-image: url("chrome://browser/skin/bookmark-star-on-tray.svg");
+}
+
+/*= Panel - History ==========================================================*/
+#appMenuRecentlyClosedTabs {
+  list-style-image: url("chrome://browser/skin/tab.svg");
+}
+#appMenuRecentlyClosedWindows {
+  list-style-image: url("chrome://browser/skin/window.svg");
+}
+#appMenuRestoreSession {
+  list-style-image: url("../icons/restore-session.svg");
+}
+#appMenuClearRecentHistory {
+  list-style-image: url("chrome://browser/skin/forget.svg");
+}
+
+#PanelUI-historyMore {
+  list-style-image: url("chrome://browser/skin/history.svg");
+}
+
+#appMenu-library-recentlyClosedTabs {
+  list-style-image: url("../icons/movetowindow-16.svg");
+}
+#appMenu-library-recentlyClosedWindows {
+  list-style-image: url("../icons/restore-session.svg");
+}
+
+/*= Panel - More tools =======================================================*/
+#appmenu-moreTools-button {
+  list-style-image: url("chrome://browser/skin/customize.svg");
+}
+
+/* Web Developer Tools */
+#appmenu-developer-tools-view .subviewbutton:nth-child(1),
+#PanelUI-developer-tools-view .subviewbutton:nth-child(1) {
+  list-style-image: url("../icons/developer.svg");
+}
+/* Task Manager */
+#appmenu-developer-tools-view .subviewbutton:nth-child(2),
+#PanelUI-developer-tools-view .subviewbutton:nth-child(2) {
+  list-style-image: url("../icons/performance.svg");
+}
+/* Remote Debugging - Edge bug.svg */
+#appmenu-developer-tools-view .subviewbutton:nth-child(3),
+#PanelUI-developer-tools-view .subviewbutton:nth-child(3) {
+  list-style-image: url("../icons/bug.svg");
+}
+/* Browser Toolbox - Edge webdeveloper.svg */
+#appmenu-developer-tools-view .subviewbutton:nth-child(4),
+#PanelUI-developer-tools-view .subviewbutton:nth-child(4) {
+  list-style-image: url("../icons/window-dev-tools.svg");
+}
+/* Browser Content Toolbaox -  */
+#appmenu-developer-tools-view .subviewbutton:nth-child(5),
+#PanelUI-developer-tools-view .subviewbutton:nth-child(5) {
+  list-style-image: url("../icons/command-frames.svg");
+}
+/* Browser Console */
+#appmenu-developer-tools-view .subviewbutton:nth-last-child(5),
+#PanelUI-developer-tools-view .subviewbutton:nth-last-child(5) {
+  list-style-image: url("chrome://devtools/skin/images/command-console.svg");
+}
+/* Responsive Design Mode */
+#appmenu-developer-tools-view .subviewbutton:nth-last-child(4),
+#PanelUI-developer-tools-view .subviewbutton:nth-last-child(4) {
+  list-style-image: url("../icons/command-responsivemode.svg");
+}
+/* Eyedropper */
+#appmenu-developer-tools-view .subviewbutton:nth-last-child(3),
+#PanelUI-developer-tools-view .subviewbutton:nth-last-child(3) {
+  list-style-image: url("chrome://devtools/skin/images/command-eyedropper.svg");
+}
+/* Page Source - Edge file-search.svg */
+#appmenu-developer-tools-view .subviewbutton:nth-last-child(2),
+#PanelUI-developer-tools-view .subviewbutton:nth-last-child(2) {
+  list-style-image: url("../icons/document-search.svg");
+}
+/* Extensions for Devel */
+#appmenu-developer-tools-view .subviewbutton:nth-last-child(1),
+#PanelUI-developer-tools-view .subviewbutton:nth-last-child(1) {
+  list-style-image: url("chrome://devtools/skin/images/debugging-addons.svg");
+}
+#appmenu-developer-tools-view .subviewbutton:last-child {
+  margin-bottom: 6px !important;
+}
+
+/*= Panel - Help =============================================================*/
+#appMenu_menu_openHelp {
+  list-style-image: url("chrome://global/skin/icons/help.svg");
+}
+#appMenu_feedbackPage {
+  list-style-image: url("../icons/send.svg");
+}
+#appMenu_helpSafeMode {
+  list-style-image: url("chrome://devtools/skin/images/debugging-workers.svg");
+}
+#appMenu_troubleShooting {
+  list-style-image: url("chrome://global/skin/icons/more.svg");
+}
+#appMenu_help_reportSiteIssue {
+  list-style-image: url("chrome://global/skin/icons/lightbulb.svg");
+}
+#appMenu_menu_HelpPopup_reportPhishingtoolmenu {
+  list-style-image: url("chrome://global/skin/icons/warning.svg");
+}
+#appMenu_aboutName {
+  list-style-image: url("chrome://global/skin/icons/info.svg");
+}
+
+/*= Panel - Library ==========================================================*/
+#appMenu-library-bookmarks-button {
+  list-style-image: url("chrome://browser/skin/bookmark.svg");
+}
+#appMenu-library-history-button {
+  list-style-image: url("chrome://browser/skin/history.svg");
+}
+#appMenu-library-downloads-button {
+  list-style-image: url("chrome://browser/skin/downloads/downloads.svg");
+}
+
+/*= Panel - Downloads ========================================================*/
+#downloadsHistory {
+  list-style-image: url("chrome://browser/skin/downloads/downloads.svg");
+}
+#downloadsHistory .box-inherit.button-box {
+  display: -moz-inline-box !important;
+}
+
+/*= Toolbar - Overflow Menu ==================================================*/
+#overflowMenu-customize-button {
+  list-style-image: url("chrome://browser/skin/customize.svg");
+}
+
+/*= Tabbar - All Tab Menu ====================================================*/
+#allTabsMenu-undoCloseTab {
+  list-style-image: url("../icons/undo.svg");
+}
+#allTabsMenu-searchTabs {
+  list-style-image: url("chrome://global/skin/icons/search-glass.svg");
+}
+#allTabsMenu-containerTabsButton {
+  list-style-image: url("../icons/container-openin-16.svg");
+}
+
+#allTabsMenu-hiddenTabsButton {
+  list-style-image: url("../icons/password-hide.svg");
+}
+
+#allTabsMenu-containerTabsView .subviewbutton:last-child {
+  list-style-image: url("chrome://global/skin/icons/settings.svg");
+}
+
+/*= BMB_bookmarksPopup =======================================================*/
+#BMB_viewBookmarksSidebar {
+}
+#BMB_bookmarksShowAllTop,
+#BMB_bookmarksShowAll {
+  --menuitem-image: url("chrome://browser/skin/bookmark-star-on-tray.svg");
+}
+#BMB_bookmarksToolbar {
+  --menuitem-image: url("chrome://browser/skin/bookmarks-toolbar.svg");
+}
+
+@include OS($mac) {
+  #BMB_bookmarksShowAllTop {
+    list-style-image: url("chrome://browser/skin/bookmark-star-on-tray.svg") !important;
+  }
+  #BMB_bookmarksShowAllTop > .menu-iconic-left {
+    display: -moz-box !important;
+  }
+}
+
+/*= protections-popup ========================================================*/
+#protections-popup-settings-button > .protections-popup-settings-icon,
+#protections-popup-show-report-button > .protections-popup-show-report-icon {
+  -moz-context-properties: fill;
+  fill: currentColor;
+  margin-inline-end: 1em;
+}
+
+#protections-popup-settings-button > .protections-popup-settings-icon,
+#protections-popup-multiView .panel-subview-footer-button {
+  list-style-image: url("chrome://global/skin/icons/settings.svg");
+}
+
+#protections-popup-show-report-button > .protections-popup-show-report-icon {
+  /* chrome://browser/skin/controlcenter/dashboard.svg */
+  list-style-image: url("../icons/dashboard.svg");
+}
+
+/*= identity-popup ===========================================================*/
+#identity-popup-clear-sitedata-button,
+#identity-popup-more-info {
+  padding-inline: 5px !important;
+}
+
+#identity-popup-securityView-body {
+  margin-inline-start: 32px !important; /* Original: 10px */
+}
+
+#identity-popup-clear-sitedata-button {
+  list-style-image: url("../icons/broom.svg");
+}
+
+/*= sidebarMenu-popup ========================================================*/
+#identity-popup-more-info {
+  list-style-image: url("chrome://global/skin/icons/info.svg");
+}
+
+#sidebar-switcher-bookmarks {
+  list-style-image: url("chrome://browser/skin/bookmark.svg");
+}
+
+#sidebar-switcher-history {
+  list-style-image: url("chrome://browser/skin/history.svg");
+}
+
+#sidebar-switcher-tabs {
+  list-style-image: url("chrome://browser/skin/tab.svg");
+}
+
+#sidebar-reverse-position {
+  list-style-image: url("chrome://browser/skin/sidebars-right.svg");
+}
+#sidebar-box[positionend="true"] #sidebar-reverse-position {
+  /* Can't apply this. shadow dom */
+  list-style-image: url("chrome://browser/skin/sidebars.svg");
+}
+
+#sidebarMenu-popup > .subviewbutton[data-l10n-id="sidebar-menu-close"] {
+  list-style-image: url("chrome://global/skin/icons/close.svg");
+}

arch-config/.mozilla/firefox/default-release/chrome/src/icons/_tor_browser.scss

@@ -0,0 +1,23 @@
+@include Option("userChrome.icon.panel") {
+  #appMenuNewIdentity{
+    list-style-image: url("chrome://browser/skin/new_identity.svg");
+  }
+  #appMenuNewCircuit {
+    list-style-image: url("chrome://browser/skin/new_circuit.svg");
+  }
+  #appMenu_torBrowserUserManual {
+    list-style-image: url("chrome://browser/skin/onion.svg");
+  }
+}
+
+@include Option("userChrome.icon.menu") {
+  #menu_newIdentity {
+    --menuitem-image: url("chrome://browser/skin/new_identity.svg");
+  }
+  #menu_newCircuit {
+    --menuitem-image: url("chrome://browser/skin/new_circuit.svg");
+  }
+  #torBrowserUserManual {
+    --menuitem-image: url("chrome://browser/skin/onion.svg");
+  }
+}

arch-config/.mozilla/firefox/default-release/chrome/src/icons/_waterfox.scss

@@ -0,0 +1,14 @@
+@include Option("userChrome.icon.panel") {
+  #appMenu-restart-button {
+    list-style-image: url("../icons/refresh-cw.svg") !important;
+  }
+}
+@include Option("userChrome.icon.menu") {
+  #menu_FileRestartItem {
+    --menuitem-image: url("../icons/refresh-cw.svg");
+  }
+
+  menuitem.privatetab-icon {
+    --menuitem-image: url("../icons/private-favicon.svg");
+  }
+}

arch-config/.mozilla/firefox/default-release/chrome/src/icons/context_menu/_content_area.scss

@@ -0,0 +1,259 @@
+/*= contentAreaContextMenu ===================================================*/
+#context-viewsource-goToLine {
+  --menuitem-image: url("../icons/text-number-format.svg");
+}
+#context-viewsource-wrapLongLines {
+  /* checkbox */
+  /* --menuitem-image: url("../icons/arrow-sort-down-lines.svg"); */
+}
+
+#context-viewsource-highlightSyntax {
+  /* checkbox */
+  /* --menuitem-image: url("../icons/code.svg"); */
+}
+
+#spell-no-suggestions {
+  --menuitem-image: url("../icons/text-proofing-tools.svg");
+}
+#spell-add-to-dictionary {
+  --menuitem-image: url("../icons/book-add.svg");
+}
+#spell-undo-add-to-dictionary {
+  --menuitem-image: url("../icons/undo.svg");
+}
+
+#context-openlinkincurrent {
+  --menuitem-image: url("../icons/link-square.svg");
+}
+#context-openlinkincontainertab {
+  --menuitem-image: url("chrome://browser/skin/new-tab.svg");
+}
+#context-openlinkintab {
+  --menuitem-image: url("chrome://browser/skin/new-tab.svg");
+}
+#context-openlinkinusercontext-menu {
+  --menuitem-image: url("../icons/container-openin-16.svg");
+}
+#context-openlink {
+  --menuitem-image: url("chrome://browser/skin/window.svg");
+}
+#context-openlinkprivate {
+  --menuitem-image: url("chrome://browser/skin/privateBrowsing.svg");
+}
+
+#context-bookmarklink {
+  --menuitem-image: url("chrome://browser/skin/bookmark.svg");
+}
+#context-savelink {
+  --menuitem-image: url("chrome://browser/skin/save.svg");
+}
+#context-savelinktopocket {
+  --menuitem-image: url("../icons/pocket-outline.svg");
+}
+#context-copyemail {
+  --menuitem-image: url("chrome://browser/skin/mail.svg");
+}
+#context-copylink {
+  --menuitem-image: url("../icons/link.svg");
+}
+#context-sendlinktodevice {
+  --menuitem-image: url("../icons/send-to-device.svg");
+}
+
+#context-media-play {
+  --menuitem-image: url("chrome://global/skin/media/play-fill.svg");
+}
+#context-media-pause {
+  --menuitem-image: url("chrome://global/skin/media/pause-fill.svg");
+}
+#context-media-mute {
+  --menuitem-image: url("chrome://global/skin/media/audio-muted.svg");
+}
+#context-media-unmute {
+  --menuitem-image: url("chrome://global/skin/media/audio.svg");
+}
+#context-media-playbackrate {
+  --menuitem-image: url("../icons/time-picker.svg");
+}
+#context-media-loop {
+  /* checkbox */
+  /* --menuitem-image: url("../icons/arrow-repeat-all.svg"); */
+}
+#context-leave-dom-fullscreen {
+  --menuitem-image: url("chrome://global/skin/media/fullscreenExitButton.svg");
+}
+#context-video-fullscreen {
+  --menuitem-image: url("chrome://global/skin/media/fullscreenEnterButton.svg");
+}
+#context-media-hidecontrols {
+  --menuitem-image: url("../icons/eye-hide.svg");
+}
+#context-media-showcontrols {
+  --menuitem-image: url("../icons/eye-show.svg");
+}
+
+#context-viewvideo {
+  --menuitem-image: url("../icons/video.svg");
+}
+#context-video-pictureinpicture {
+  /* checkbox */
+  /* --menuitem-image: url("chrome://global/skin/media/picture-in-picture-open.svg"); */
+}
+
+#context-reloadimage {
+  --menuitem-image: url("../icons/image-arrow-counterclockwise.svg");
+}
+#context-viewimage {
+  --menuitem-image: url("../icons/image-add.svg");
+}
+#context-saveimage {
+  --menuitem-image: url("../icons/image.svg");
+}
+#context-video-saveimage {
+  --menuitem-image: url("../icons/video-snapshot.svg");
+}
+#context-savevideo {
+  --menuitem-image: url("../icons/video.svg");
+}
+#context-saveaudio {
+  --menuitem-image: url("chrome://global/skin/media/audio.svg");
+}
+#context-copyimage-contents {
+  --menuitem-image: url("../icons/image-copy.svg");
+}
+#context-copyimage,
+#context-copyvideourl,
+#context-copyaudiourl {
+  --menuitem-image: url("../icons/link.svg");
+}
+#context-sendimage,
+#context-sendvideo,
+#context-sendaudio {
+  --menuitem-image: url("chrome://browser/skin/mail.svg");
+}
+#context-viewimageinfo {
+  --menuitem-image: url("chrome://global/skin/icons/info.svg");
+}
+#context-viewimagedesc {
+  --menuitem-image: url("../icons/image-alt-text.svg");
+}
+#context-setDesktopBackground {
+  --menuitem-image: url("../icons/resize-image.svg");
+}
+#context-ctp-play {
+  --menuitem-image: url("chrome://global/skin/icons/plugin.svg");
+}
+#context-ctp-hide {
+  --menuitem-image: url("chrome://global/skin/icons/plugin-blocked.svg");
+}
+
+#context-savepage {
+  --menuitem-image: url("chrome://browser/skin/save.svg");
+}
+#context-pocket {
+  --menuitem-image: url("../icons/pocket-outline.svg");
+}
+#context-sendpagetodevice {
+  --menuitem-image: url("../icons/send-to-device.svg");
+}
+#fill-login {
+  --menuitem-image: url("../icons/password.svg");
+}
+#fill-login-generated-password {
+  --menuitem-image: url("chrome://browser/skin/login.svg");
+}
+#manage-saved-logins {
+  --menuitem-image: url("../icons/key-multiple.svg");
+}
+
+#context-undo {
+  --menuitem-image: url("../icons/undo.svg");
+}
+#context-redo {
+}
+
+#context-cut {
+  --menuitem-image: url("chrome://browser/skin/edit-cut.svg");
+}
+#context-copy {
+  --menuitem-image: url("../icons/edit-copy.svg");
+}
+#context-paste {
+  --menuitem-image: url("chrome://browser/skin/edit-paste.svg");
+}
+#context-delete {
+  --menuitem-image: url("chrome://global/skin/icons/delete.svg");
+}
+#context-selectall {
+  --menuitem-image: url("../icons/select-all-on.svg");
+}
+#context-print-selection {
+  --menuitem-image: url("chrome://global/skin/icons/print.svg");
+}
+
+#context-take-screenshot {
+  --menuitem-image: url("chrome://browser/skin/screenshot.svg");
+}
+
+#context-keywordfield {
+  --menuitem-image: url("chrome://browser/skin/bookmark.svg");
+}
+#context-searchselect,
+#context-searchselect-private {
+  --menuitem-image: url("chrome://global/skin/icons/search-glass.svg");
+}
+
+#frame {
+  --menuitem-image: url("../icons/command-frames.svg");
+}
+
+#spell-check-enabled {
+  /* checkbox */
+}
+#spell-add-dictionaries-main {
+  --menuitem-image: url("../icons/book-add.svg");
+}
+#spell-dictionaries {
+  --menuitem-image: url("../icons/book.svg");
+}
+
+#context-bidi-text-direction-toggle {
+  --menuitem-image: url("../icons/text-direction-horizontal-ltr.svg");
+}
+#context-bidi-page-direction-toggle {
+  --menuitem-image: url("../icons/document-landscape-split-hint.svg");
+}
+
+#context-viewpartialsource-selection,
+#context-viewsource {
+  --menuitem-image: url("../icons/document-search.svg");
+}
+#context-inspect-a11y {
+  --menuitem-image: url("chrome://devtools/skin/images/tool-accessibility.svg");
+}
+#context-inspect {
+  --menuitem-image: url("../icons/command-pick.svg");
+}
+
+#context-media-eme-learnmore {
+  /* iconic */
+}
+
+@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
+  #context-back {
+    --menuitem-image: url("chrome://browser/skin/back.svg");
+  }
+  #context-forward {
+    --menuitem-image: url("chrome://browser/skin/forward.svg");
+  }
+  #context-reload {
+    --menuitem-image: url("../icons/reload.svg");
+  }
+  #context-stop {
+    --menuitem-image: url("chrome://global/skin/icons/close.svg");
+  }
+
+  #context-bookmarkpage {
+    --menuitem-image: url("chrome://browser/skin/bookmark.svg");
+  }
+}

arch-config/.mozilla/firefox/default-release/chrome/src/icons/context_menu/_others.scss

@@ -0,0 +1,248 @@
+/*= blockedPopupOptions ======================================================*/
+#blockedPopupAllowSite {
+  --menuitem-image: url("chrome://global/skin/icons/check.svg");
+}
+#blockedPopupOptions > menuitem[oncommand="gPopupBlockerObserver.editPopupSettings();"] {
+  --menuitem-image: url("chrome://global/skin/icons/edit.svg");
+}
+#blockedPopupDontShowMessage {
+  /* checkbox */
+  --menuitem-image: url("chrome://global/skin/icons/blocked.svg");
+}
+
+/*= autohide-context =========================================================*/
+#autohide-context > menuitem[data-l10n-id="full-screen-autohide"] {
+  /* checkbox */
+}
+
+#autohide-context > menuitem[data-l10n-id="full-screen-exit"] {
+  --menuitem-image: url("chrome://browser/skin/fullscreen-exit.svg");
+}
+
+/*= pictureInPictureToggleContextMenu ========================================*/
+#pictureInPictureToggleContextMenu > menuitem[oncommand="PictureInPicture.hideToggle();"] {
+  --menuitem-image: url("../icons/eye-hide.svg");
+}
+
+/*= pageActionContextMenu ====================================================*/
+.pageActionContextMenuItem.extensionPinned.extensionUnpinned.manageExtensionItem {
+  --menuitem-image: url("chrome://global/skin/icons/settings.svg");
+}
+.pageActionContextMenuItem.extensionPinned.extensionUnpinned.removeExtensionItem {
+  --menuitem-image: url("chrome://global/skin/icons/delete.svg");
+}
+
+/*= customizationPanelItemContextMenu ========================================*/
+#customizationPanelItemContextMenuUnpin {
+  --menuitem-image: url("../icons/unpin-tab.svg");
+}
+.customize-context-removeFromPanel {
+  --menuitem-image: url("chrome://global/skin/icons/delete.svg");
+}
+
+/*= customizationPaletteItemContextMenu ======================================*/
+.customize-context-addToToolbar {
+  --menuitem-image: url("chrome://devtools/skin/images/dock-bottom.svg");
+}
+.customize-context-addToPanel {
+  --menuitem-image: url("chrome://browser/skin/menu.svg");
+}
+
+/*= customizationPanelContextMenu ============================================*/
+#customizationPanelContextMenu > menuitem[command="cmd_CustomizeToolbars"] {
+  --menuitem-image: url("chrome://browser/skin/customize.svg");
+}
+
+/*= downloads-button-autohide-panel ==========================================*/
+#downloads-button-autohide-checkbox {
+  /* checkbox */
+}
+
+/*= downloadsContextMenu =====================================================*/
+.downloadPauseMenuItem {
+  --menuitem-image: url("chrome://global/skin/media/pause-fill.svg");
+}
+.downloadResumeMenuItem {
+  --menuitem-image: url("chrome://global/skin/media/play-fill.svg");
+}
+.downloadUnblockMenuItem {
+  --menuitem-image: url("../icons/checkmark-circle.svg");
+}
+.downloadUseSystemDefaultMenuItem {
+  --menuitem-image: url("chrome://browser/skin/open.svg");
+}
+.downloadAlwaysUseSystemDefaultMenuItem {
+  /* checkbox */
+}
+.downloadShowMenuItem {
+  --menuitem-image: url("chrome://global/skin/icons/folder.svg");
+  @include Option("userChrome.icon.library") {
+    --menuitem-image: url("../icons/folder.svg");
+  }
+}
+
+#downloadsContextMenu > menuitem[command="downloadsCmd_openReferrer"] {
+  --menuitem-image: url("../icons/link-square.svg");
+}
+#downloadsContextMenu > menuitem[command="downloadsCmd_copyLocation"] {
+  --menuitem-image: url("../icons/link.svg");
+}
+
+.downloadDeleteFileMenuItem {
+  --menuitem-image: url("chrome://global/skin/icons/delete.svg");
+}
+.downloadRemoveFromHistoryMenuItem {
+  --menuitem-image: url("../icons/eraser.svg");
+}
+#downloadsContextMenu > menuitem[command="downloadsCmd_clearList"],
+#downloadsContextMenu > menuitem[command="downloadsCmd_clearDownloads"] {
+  --menuitem-image: url("../icons/broom.svg");
+}
+
+/*= SyncedTabsSidebarContext =================================================*/
+#syncedTabsOpenSelected {
+  --menuitem-image: url("../icons/link-square.svg");
+}
+#syncedTabsOpenSelectedInTab {
+  --menuitem-image: url("chrome://browser/skin/new-tab.svg");
+}
+#syncedTabsOpenSelectedInWindow {
+  --menuitem-image: url("chrome://browser/skin/window.svg");
+}
+#syncedTabsOpenSelectedInPrivateWindow {
+  --menuitem-image: url("chrome://browser/skin/privateBrowsing.svg");
+}
+
+#syncedTabsBookmarkSelected {
+  --menuitem-image: url("chrome://browser/skin/bookmark.svg");
+}
+#syncedTabsCopySelected {
+  --menuitem-image: url("../icons/link.svg");
+}
+
+#syncedTabsOpenAllInTabs {
+  --menuitem-image: url("../icons/movetowindow-16.svg");
+}
+#syncedTabsManageDevices {
+  --menuitem-image: url("chrome://global/skin/icons/settings.svg");
+}
+#syncedTabsRefresh {
+  --menuitem-image: url("chrome://browser/skin/sync.svg");
+}
+
+/*= SyncedTabsSidebarTabsFilterContext =======================================*/
+#SyncedTabsSidebarTabsFilterContext > menuitem[cmd="cmd_undo"] {
+  --menuitem-image: url("../icons/undo.svg");
+}
+#SyncedTabsSidebarTabsFilterContext > menuitem[cmd="cmd_cut"] {
+  --menuitem-image: url("chrome://browser/skin/edit-cut.svg");
+}
+#SyncedTabsSidebarTabsFilterContext > menuitem[cmd="cmd_copy"] {
+  --menuitem-image: url("../icons/edit-copy.svg");
+}
+#SyncedTabsSidebarTabsFilterContext > menuitem[cmd="cmd_paste"] {
+  --menuitem-image: url("chrome://browser/skin/edit-paste.svg");
+}
+#SyncedTabsSidebarTabsFilterContext > menuitem[cmd="cmd_delete"] {
+  --menuitem-image: url("chrome://global/skin/icons/delete.svg");
+}
+
+#SyncedTabsSidebarTabsFilterContext > menuitem[cmd="cmd_selectAll"] {
+  --menuitem-image: url("../icons/select-all-on.svg");
+}
+
+#syncedTabsRefreshFilter {
+  --menuitem-image: url("chrome://browser/skin/sync.svg");
+}
+
+/*= urlbar-input-container ===================================================*/
+#urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_undo"] {
+  --menuitem-image: url("../icons/undo.svg");
+}
+#urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_redo"] {
+}
+
+#urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_cut"] {
+  --menuitem-image: url("chrome://browser/skin/edit-cut.svg");
+}
+#urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_copy"] {
+  --menuitem-image: url("../icons/edit-copy.svg");
+}
+#urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_paste"] {
+  --menuitem-image: url("chrome://browser/skin/edit-paste.svg");
+}
+#paste-and-go {
+}
+#urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_delete"] {
+  --menuitem-image: url("chrome://global/skin/icons/delete.svg");
+}
+#urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_selectAll"] {
+  --menuitem-image: url("../icons/select-all-on.svg");
+}
+
+/*= textbox-contextmenu ======================================================*/
+/* Browser's Searchbar, Libray's Searchbar, Page Info */
+.textbox-contextmenu > menuitem[data-l10n-id="text-action-undo"] {
+  --menuitem-image: url("../icons/undo.svg");
+}
+.textbox-contextmenu > menuitem[data-l10n-id="text-action-redo"] {
+}
+
+.textbox-contextmenu > menuitem[data-l10n-id="text-action-cut"] {
+  --menuitem-image: url("chrome://browser/skin/edit-cut.svg");
+}
+.textbox-contextmenu > menuitem[data-l10n-id="text-action-copy"] {
+  --menuitem-image: url("../icons/edit-copy.svg");
+}
+.textbox-contextmenu > menuitem[data-l10n-id="text-action-paste"] {
+  --menuitem-image: url("chrome://browser/skin/edit-paste.svg");
+}
+.textbox-contextmenu > menuitem[data-l10n-id="text-action-delete"] {
+  --menuitem-image: url("chrome://global/skin/icons/delete.svg");
+}
+.textbox-contextmenu > menuitem[data-l10n-id="text-action-select-all"] {
+  --menuitem-image: url("../icons/select-all-on.svg");
+}
+
+/* Only searchbar */
+menuitem.searchbar-paste-and-search {
+}
+menuitem.searchbar-clear-history {
+  --menuitem-image: url("chrome://browser/skin/forget.svg");
+}
+
+/*= context_sendTabToDevicePopupMenu =========================================*/
+menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup)
+  > .sync-menuitem.sendtab-target[clientType="phone"] {
+  --menuitem-image: url("chrome://browser/skin/device-phone.svg");
+}
+
+menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup)
+  > .sync-menuitem.sendtab-target[clientType="tablet"] {
+  --menuitem-image: url("chrome://browser/skin/device-tablet.svg");
+}
+
+menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup)
+  > .sync-menuitem.sendtab-target[clientType="desktop"] {
+  --menuitem-image: url("chrome://browser/skin/device-desktop.svg");
+}
+
+menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup)
+  > .sync-menuitem.sendtab-target[clientType="tv"] {
+  --menuitem-image: url("chrome://browser/skin/device-tv.svg");
+}
+
+menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup)
+  > .sync-menuitem.sendtab-target[clientType="vr"] {
+  --menuitem-image: url("chrome://browser/skin/device-vr.svg");
+}
+
+menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup)
+  > .sync-menuitem.sendtab-target[clientType=""] {
+  --menuitem-image: url("../icons/send-to-device.svg");
+}
+
+menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup)
+  > .sync-menuitem.sendtab-target:not([clientType]) {
+  --menuitem-image: url("chrome://global/skin/icons/settings.svg");
+}

arch-config/.mozilla/firefox/default-release/chrome/src/icons/context_menu/_place.scss

@@ -0,0 +1,79 @@
+/*= placeContext =============================================================*/
+#placesContext_open {
+  --menuitem-image: url("../icons/link-square.svg");
+}
+#placesContext_openBookmarkContainer\:tabs,
+#placesContext_openBookmarkLinks\:tabs {
+  --menuitem-image: url("../icons/movetowindow-16.svg");
+}
+#placesContext_open\:newtab,
+#placesContext_openContainer\:tabs,
+#placesContext_openLinks\:tabs {
+  --menuitem-image: url("chrome://browser/skin/new-tab.svg");
+}
+#placesContext_open\:newwindow {
+  --menuitem-image: url("chrome://browser/skin/window.svg");
+}
+#placesContext_open\:newprivatewindow {
+  --menuitem-image: url("chrome://browser/skin/privateBrowsing.svg");
+}
+
+#placesContext_show_bookmark\:info,
+#placesContext_show\:info,
+#placesContext_show_folder\:info {
+  --menuitem-image: url("chrome://global/skin/icons/edit.svg");
+}
+#placesContext_deleteBookmark,
+#placesContext_deleteFolder,
+#placesContext_delete,
+#placesContext_delete_history {
+  --menuitem-image: url("chrome://global/skin/icons/delete.svg");
+}
+#placesContext_deleteHost {
+  --menuitem-image: url("../icons/eye-hide.svg");
+}
+#placesContext_sortBy\:name {
+  --menuitem-image: url("../icons/text-sort-ascending.svg");
+}
+
+#placesContext_cut {
+  --menuitem-image: url("chrome://browser/skin/edit-cut.svg");
+}
+#placesContext_copy {
+  --menuitem-image: url("../icons/edit-copy.svg");
+}
+#placesContext_paste_group {
+  --menuitem-image: url("chrome://browser/skin/edit-paste.svg");
+}
+
+#placesContext_new\:bookmark {
+  --menuitem-image: url("chrome://browser/skin/bookmark.svg");
+}
+#placesContext_new\:folder {
+  --menuitem-image: url("chrome://global/skin/icons/folder.svg");
+  @include Option("userChrome.icon.library") {
+    --menuitem-image: url("../icons/folder.svg");
+  }
+}
+#placesContext_new\:separator {
+  --menuitem-image: url("../icons/vertical-line.svg");
+}
+
+#placesContext_paste {
+  --menuitem-image: url("chrome://browser/skin/edit-paste.svg");
+}
+
+#placesContext_createBookmark {
+  --menuitem-image: url("chrome://browser/skin/bookmark.svg");
+}
+#show-other-bookmarks_PersonalToolbar {
+  /* checkbox */
+  /* --menuitem-image: url("../icons/star-line-horizontal.svg"); */
+}
+#placesContext_showAllBookmarks {
+  --menuitem-image: url("chrome://browser/skin/bookmark-star-on-tray.svg");
+}
+
+.openintabs-menuitem {
+  --menuitem-image: url("../icons/movetowindow-16.svg");
+}

arch-config/.mozilla/firefox/default-release/chrome/src/icons/context_menu/_tab_toolbar.scss

@@ -0,0 +1,124 @@
+/*= tabContextMenu ===========================================================*/
+#context_openANewTab {
+  --menuitem-image: url("chrome://browser/skin/new-tab.svg");
+}
+
+#context_reloadTab,
+#context_reloadSelectedTabs {
+  --menuitem-image: url("../icons/reload.svg");
+}
+#context_toggleMuteTab,
+#context_toggleMuteSelectedTabs {
+  --menuitem-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg");
+}
+#context_toggleMuteTab[muted],
+#context_toggleMuteSelectedTabs[muted] {
+  --menuitem-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg");
+}
+#context_pinTab,
+#context_pinSelectedTabs {
+  --menuitem-image: url("../icons/pin-tab.svg");
+}
+#context_unpinTab,
+#context_unpinSelectedTabs {
+  --menuitem-image: url("../icons/unpin-tab.svg");
+}
+#context_duplicateTab,
+#context_duplicateTabs {
+  --menuitem-image: url("../icons/notebook-subsection.svg");
+}
+
+#context_bookmarkTab,
+#context_bookmarkSelectedTabs {
+  --menuitem-image: url("chrome://browser/skin/bookmark.svg");
+}
+#context_moveTabOptions {
+  --menuitem-image: url("../icons/arrow-swap.svg");
+}
+#context_sendTabToDevice {
+  --menuitem-image: url("../icons/send-to-device.svg");
+}
+
+#context_sendTabToDevice:is([disabled="true"]) + #context_shareTabURL, /* Legacy */
+  #context_sendTabToDevice:is([disabled="true"]) + menuitem.share-tab-url-item {
+  /* At windows */
+  --menuitem-image: url("../icons/share.svg");
+}
+#context_reopenInContainer {
+  --menuitem-image: url("../icons/container-openin-16.svg");
+}
+#context_selectAllTabs {
+  --menuitem-image: url("../icons/tab-multiple.svg");
+}
+
+#context_closeTab {
+  --menuitem-image: url("chrome://global/skin/icons/close.svg");
+}
+#context_closeTabOptions {
+}
+#context_undoCloseTab {
+  --menuitem-image: url("../icons/undo.svg");
+}
+
+/*= new-tab-button-popup =====================================================*/
+#new-tab-button-popup > menuitem[command="Browser:NewUserContextTab"],
+.new-tab-popup > menuitem[command="Browser:NewUserContextTab"] {
+  --menuitem-image: url("../icons/container-openin-16.svg");
+}
+
+#new-tab-button-popup > menuitem[command="Browser:OpenAboutContainers"],
+.new-tab-popup > menuitem[command="Browser:OpenAboutContainers"] {
+  --menuitem-image: url("chrome://global/skin/icons/settings.svg");
+}
+
+/*= toolbar-context-menu =====================================================*/
+.customize-context-manageExtension {
+  --menuitem-image: url("chrome://global/skin/icons/settings.svg");
+}
+.customize-context-removeExtension {
+  --menuitem-image: url("chrome://global/skin/icons/delete.svg");
+}
+.customize-context-reportExtension {
+  --menuitem-image: url("../icons/send.svg");
+}
+
+.customize-context-moveToPanel {
+  --menuitem-image: url("chrome://browser/skin/pin-12.svg");
+}
+.toolbar-context-autohide-downloads-button {
+  --menuitem-image: url("../icons/password-hide.svg");
+}
+.customize-context-removeFromToolbar {
+  --menuitem-image: url("chrome://global/skin/icons/delete.svg");
+}
+#toolbar-context-openANewTab {
+  --menuitem-image: url("chrome://browser/skin/new-tab.svg");
+}
+
+#toolbar-context-reloadSelectedTab,
+#toolbar-context-reloadSelectedTabs {
+  --menuitem-image: url("../icons/reload.svg");
+}
+#toolbar-context-bookmarkSelectedTab,
+#toolbar-context-bookmarkSelectedTabs {
+  --menuitem-image: url("chrome://browser/skin/bookmark.svg");
+}
+#toolbar-context-selectAllTabs {
+  --menuitem-image: url("../icons/tab-multiple.svg");
+}
+#toolbar-context-undoCloseTab {
+  --menuitem-image: url("../icons/undo.svg");
+}
+
+#toggle_toolbar-menubar {
+  /* checkbox */
+  /* --menuitem-image: url("../icons/calendar-agenda.svg"); */
+}
+#toggle_PersonalToolbar {
+  /* Also placeContext */
+  --menuitem-image: url("chrome://browser/skin/bookmarks-toolbar.svg");
+}
+
+menuitem.viewCustomizeToolbar {
+  --menuitem-image: url("chrome://browser/skin/customize.svg");
+}

arch-config/.mozilla/firefox/default-release/chrome/src/leptonChrome.scss

@@ -0,0 +1,112 @@
+@use "utils/os" as *;
+@use "utils/option" as *;
+@use "utils/color_scheme" as *;
+@use "utils/theme" as *;
+@use "sass:selector";
+
+@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
+@namespace html "http://www.w3.org/1999/xhtml";
+
+/** Default Thme - Contrast ***************************************************/
+@include Option("userChrome.theme.built_in_contrast") {
+  @import "theme/built_in";
+}
+
+/** Compatibility Fixes *******************************************************/
+@import "compatibility/index";
+
+/** System Default Theme ******************************************************/
+@include Option("userChrome.theme.system_default") {
+  @import "theme/system_default_theme";
+}
+
+/** Fully Theme Mode **********************************************************/
+/* Default Themes
+     https://github.com/mozilla/gecko-dev/blob/master/toolkit/mozapps/extensions/default-theme/manifest.json
+     https://github.com/mozilla/gecko-dev/blob/master/browser/themes/addons/light/manifest.json
+     https://github.com/mozilla/gecko-dev/blob/master/browser/themes/addons/dark/manifest.json
+  */
+
+@include Option("userChrome.theme.proton_color") {
+  @import "theme/proton_color";
+  @include Option("userChrome.theme.proton_color.dark_blue_accent") {
+    @import "theme/dark_blue_accent";
+  }
+}
+@include Option("userChrome.theme.fully_color") {
+  @import "theme/fully_color";
+}
+
+/* Fully Dark Mode ************************************************************/
+@include Option("userChrome.theme.fully_dark") {
+  @import "theme/fully_dark";
+}
+
+/* Proton Theme Mode **********************************************************/
+@include Option("userChrome.theme.proton_chrome") {
+  @import "theme/proton_chrome";
+}
+
+/** Decoration ****************************************************************/
+@import "decoration/index";
+
+/** Rounding ******************************************************************/
+@import "rounding/index";
+
+/** Reduce Padding ************************************************************/
+@import "padding/index";
+
+/** Tab Bar UI ****************************************************************/
+@import "tabbar/index";
+
+/** Url View UI ***************************************************************/
+@import "urlview/index";
+
+/** Panel UI ******************************************************************/
+@import "panel/index";
+
+/** Fullscreen - Overlap toolbar **********************************************/
+@import "fullscreen/index";
+
+/** Library - Icons Replace ***************************************************/
+@include Option("userChrome.icon.library") {
+  @import "library/chrome";
+}
+
+/** Panel - Icons *************************************************************/
+@include Option("userChrome.icon.panel") {
+  @import "icons/layout_panel";
+  @import "icons/panel";
+}
+
+/** Menu - Icons Layout *******************************************************/
+@include Option("userChrome.icon.menu") {
+  @import "icons/layout_menu";
+  @import "icons/layout_bookmark_menu";
+
+  @include Option("userChrome.icon.context_menu") {
+    @import "icons/context_menu";
+  }
+  @include Option("userChrome.icon.global_menubar") {
+    @import "icons/global_menubar";
+  }
+  @include Option("userChrome.icon.global_menu") {
+    @import "icons/global_menu";
+  }
+}
+
+/** Libray Menu ***************************************************************/
+@include Option("userChrome.icon.library") {
+  @include Option("userChrome.icon.menu") {
+    @import "icons/library";
+  }
+}
+
+/*= Waterfox =================================================================*/
+@import "icons/waterfox";
+@include Option("userChrome.theme.fully_color") {
+  @import "theme/waterfox";
+}
+
+/*= Tor Browser ==============================================================*/
+@import "icons/tor_browser";

arch-config/.mozilla/firefox/default-release/chrome/src/leptonContent.scss

@@ -0,0 +1,31 @@
+@use "utils/os" as *;
+@use "utils/option" as *;
+@use "utils/color_scheme" as *;
+
+@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+/** Video player **************************************************************/
+@import "contents/video_player";
+
+/** Activity Stream ***********************************************************/
+@import "contents/activity_stream";
+
+/** Error Page - Restore illustrations ****************************************/
+@include Option("userContent.page.illustration") {
+  @import "contents/error_page";
+}
+
+/** Fully Dark Mode ***********************************************************/
+/*= Fully Dark Mode - Dark Mode Colors =======================================*/
+@include Option("userContent.page.proton_color") {
+  @import "contents/proton_color";
+}
+@include Option("userContent.page.dark_mode") {
+  @import "contents/dark_mode";
+}
+
+/** Fully Proton Mode *********************************************************/
+@include Option("userContent.page.proton") {
+  @import "contents/proton_contents";
+}

arch-config/.mozilla/firefox/default-release/chrome/src/library/_chrome.scss

@@ -0,0 +1,11 @@
+@import "standard_folder";
+@import "inbox";
+@import "default_override";
+@import "default_open";
+
+@-moz-document url("chrome://browser/content/places/places.xhtml")
+{
+  @include OS($linux) {
+    @import "menubar";
+  }
+}

arch-config/.mozilla/firefox/default-release/chrome/src/library/_contents.scss

@@ -0,0 +1,35 @@
+@-moz-document url("chrome://browser/content/places/places.xhtml")
+{
+  /** Library - Icons Replace *************************************************/
+  @include Option("userChrome.icon.library") {
+    @import "standard_folder";
+    @import "inbox";
+    @import "default_override";
+    @import "default_open";
+    @import "menubar";
+  }
+
+  /*= Context Menu ===========================================================*/
+  @include Option("userChrome.icon.context_menu") {
+    @import "contents_menu";
+  }
+
+  @include OS($linux) {
+    /*= Layout Fixes =========================================================*/
+    menupopup menu {
+      padding-block: 4px;
+    }
+
+    .menu-right {
+      width: 16px !important; /* Original: 1ex */
+      background-image: url("chrome://global/skin/icons/arrow-right.svg");
+      background-position: right center;
+    }
+
+    /*= Proton ===============================================================*/
+    @include Option("userContent.page.proton") {
+      @import "proton";
+      @import "proton_contents";
+    }
+  }
+}

arch-config/.mozilla/firefox/default-release/chrome/src/library/_contents_menu.scss

@@ -0,0 +1,132 @@
+menupopup menuitem:not([type="checkbox"], [type="radio"]),
+menupopup menu:not([type="checkbox"], [type="radio"]),
+#main-menubar > menu {
+  -moz-appearance: none !important; /* Linux: menulist */
+}
+
+#placesContext menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
+#placesContext menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
+menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem,
+menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu {
+  /* Color */
+  -moz-context-properties: fill, fill-opacity !important;
+  fill: currentColor !important;
+
+  /* Layout */
+  background-size: 16px !important;
+  background-repeat: no-repeat !important;
+  background-image: var(--menuitem-image);
+}
+
+/* For native context menus on macOS */
+@supports -moz-bool-pref("widget.macos.native-context-menus") {
+  :not(menu, #ContentSelectDropdown)
+    > menupopup
+    > menuitem:not(.menuitem-iconic, [type="checkbox"], [checked="true"], .in-menulist),
+  :not(menu, #ContentSelectDropdown)
+    > menupopup
+    > menu:not(.menu-iconic, [type="checkbox"], [checked="true"], .in-menulist) {
+    list-style-image: var(--menuitem-image) !important;
+  }
+}
+
+/* Padding */
+:root {
+  --context-menu-background-padding-default: 5px;
+  --context-menu-background-padding: var(--context-menu-background-padding-default);
+}
+#placesContext menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
+#placesContext menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
+menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem,
+menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu {
+  background-position: left var(--context-menu-background-padding) center !important;
+  padding-inline-start: var(--context-menu-background-padding) !important;
+}
+
+/* Padding - Windows */
+@include OS($win) {
+  /* Checkbox */
+  :root {
+    --context-menu-text-padding: calc(var(--menu-padding) + var(--context-menu-background-padding-default) + 16px);
+  }
+  :not(menu, #ContentSelectDropdown, #context-navigation)
+    > menupopup
+    > menuitem[type="checkbox"][checked="false"]
+    > .menu-iconic-left {
+    padding-inline-start: var(--context-menu-text-padding);
+  }
+}
+
+@include OS($win7) {
+  :root {
+    --context-menu-background-padding-default: 2px;
+  }
+}
+@include OS($win8) {
+  :root {
+    --context-menu-background-padding-default: 3px;
+  }
+}
+@include OS($win7, $win8) {
+  #placesContext menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
+  #placesContext menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
+  menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem,
+  menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu {
+    background-position: left var(--context-menu-background-padding) center !important;
+    padding-inline-start: 0 !important;
+  }
+}
+@include OS($win10) {
+  :root {
+    --context-menu-background-padding: 1em;
+    --context-menu-text-padding: 24px; /* 16px + 8px */
+    --menu-background-padding-default: calc(
+      var(--context-menu-background-padding) + var(--context-menu-text-padding)
+    );
+  }
+
+  #placesContext menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
+  #placesContext menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
+  menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem,
+  menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu {
+    padding-inline-start: var(--menu-background-padding-default) !important;
+    margin-left: 0 !important;
+  }
+}
+
+/* Padding - Linux */
+@include OS($linux) {
+  :root {
+    --context-menu-background-padding-default: 6px;
+  }
+}
+
+/* Padding - Mac */
+@include OS($mac) {
+  :root {
+    --context-menu-background-padding-default: 10px;
+    --context-menu-mac-padding: 21px;
+  }
+
+  /* context menu width */
+  #placesContext menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
+  #placesContext menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]) {
+    padding-inline-end: var(--context-menu-background-padding) !important;
+  }
+
+  /* text position */
+  #placesContext menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]) > .menu-text,
+  #placesContext menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]) > .menu-text {
+    padding-inline-start: var(--context-menu-mac-padding) !important;
+  }
+
+  /* Checkbox menuitem, None iconic menu */
+  #placesContext menuitem[type="checkbox"],
+  #placesContext menu:not(.menu-iconic) {
+    padding-inline-start: calc(var(--context-menu-background-padding) + var(--context-menu-mac-padding)) !important;
+  }
+}
+
+/* Icon lists */
+@import "../icons/context_menu/place";
+@import "../icons/library";

arch-config/.mozilla/firefox/default-release/chrome/src/library/_default_open.scss

@@ -0,0 +1,42 @@
+/*= Default Icon - Open ======================================================*/
+/* Query */
+:-moz-any(#PlacesToolbar, #BMB_bookmarksPopup, #bookmarksMenu)
+  .bookmark-item[container="true"][query="true"]:not([tagContainer])[open="true"]
+  > .menu-iconic-left
+  > .menu-iconic-icon {
+  transform: rotate(15deg) !important;
+}
+
+/* History */
+:-moz-any(#historyTree, #placesList, #placeContent) treechildren::-moz-tree-image(title, query, open, dayContainer),
+:-moz-any(#historyTree, #placesList, #placeContent)
+  treechildren::-moz-tree-image(query, open, OrganizerQuery_history____v) {
+  list-style-image: url("../icons/history-reverse.svg") !important;
+}
+
+/* Tag */
+:-moz-any(#PlacesToolbar, #BMB_bookmarksPopup, #bookmarksMenu)
+  .bookmark-item[container="true"][tagContainer="true"][open="true"],
+:-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(title, query, open, tagContainer),
+:-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(query, open, OrganizerQuery_tags_______v) {
+  list-style-image: url("../icons/tag-open.svg") !important;
+}
+
+/* Boomark */
+:-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(query, open, OrganizerQuery_allbms_____v) {
+  list-style-image: url("chrome://browser/skin/bookmark-hollow.svg") !important;
+}
+
+/* Bookmark Toolbar */
+#BMB_bookmarksPopup #BMB_bookmarksToolbar[open="true"],
+#bookmarksMenuPopup #bookmarksToolbarFolderMenu[open="true"],
+:-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent)
+  treechildren::-moz-tree-image(container, open, queryFolder_toolbar_____) {
+  list-style-image: url("../icons/bookmarksToolbar-open.svg") !important;
+}
+
+/* Bookmark Menu */
+:-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent)
+  treechildren::-moz-tree-image(container, open, queryFolder_menu________) {
+  list-style-image: url("../icons/bookmarksMenu-open.svg") !important; /* or bookmarksMenu-open2.svg" */
+}

arch-config/.mozilla/firefox/default-release/chrome/src/library/_default_override.scss

@@ -0,0 +1,42 @@
+/*= Default Icon - Override ===================================================*/
+/* https://github.com/mozilla/gecko-dev/blob/master/browser/themes/shared/places/tree-icons.css */
+
+/* Query */
+:-moz-any(#historyTree, #placesList, #placeContent) treechildren::-moz-tree-image(title, query) {
+  list-style-image: url("chrome://browser/skin/places/folder-smart.svg") !important;
+}
+
+/* History */
+:-moz-any(#historyTree, #placesList, #placeContent) treechildren::-moz-tree-image(title, query, dayContainer),
+:-moz-any(#historyTree, #placesList, #placeContent) treechildren::-moz-tree-image(query, OrganizerQuery_history____v) {
+  list-style-image: url("chrome://browser/skin/history.svg") !important;
+}
+
+/* Downloads */
+:-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(query, OrganizerQuery_downloads__v) {
+  list-style-image: url("chrome://browser/skin/downloads/downloads.svg") !important;
+}
+
+/* Tag */
+:-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(title, query, tagContainer),
+:-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(query, OrganizerQuery_tags_______v) {
+  list-style-image: url("chrome://browser/skin/places/tag.svg") !important;
+}
+
+/* Boomark */
+:-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(query, OrganizerQuery_allbms_____v) {
+  list-style-image: url("chrome://browser/skin/bookmark.svg") !important;
+}
+
+/* Bookmark Toolbar */
+#BMB_bookmarksPopup #BMB_bookmarksToolbar,       /* Original: Default folder icon */
+  #bookmarksMenuPopup #bookmarksToolbarFolderMenu, /* Original: Default folder icon */
+  :-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, queryFolder_toolbar_____) {
+  list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.svg") !important;
+}
+
+/* Bookmark Menu */
+:-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent)
+  treechildren::-moz-tree-image(container, queryFolder_menu________) {
+  list-style-image: url("chrome://browser/skin/places/bookmarksMenu.svg") !important;
+}

arch-config/.mozilla/firefox/default-release/chrome/src/library/_inbox.scss

@@ -0,0 +1,23 @@
+/*= Other Folder - Inbox Icon ================================================*/
+/* on Menus */
+#PlacesToolbar #OtherBookmarks,
+  #BMB_bookmarksPopup #BMB_unsortedBookmarks,
+  #bookmarksMenuPopup #menu_unsortedBookmarks,
+  /* Other Bookmarks -- in Sidebar, Library, Add/Edit Bookmark dialog */
+  :-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, OrganizerQuery_UnfiledBookmarks),
+  :-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, queryFolder_unfiled_____),
+  #editBMPanel_unfiledRootItem,
+  #editBMPanel_folderMenuList[selectedGuid="unfiled_____"] {
+  list-style-image: url("../icons/mail-inbox-all.svg") !important;
+}
+
+/* Other Folder - Open */
+#PlacesToolbar #OtherBookmarks[open="true"],
+#BMB_bookmarksPopup #BMB_unsortedBookmarks[open="true"],
+#bookmarksMenuPopup #menu_unsortedBookmarks[open="true"],
+:-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent)
+  treechildren::-moz-tree-image(container, open, OrganizerQuery_UnfiledBookmarks),
+:-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent)
+  treechildren::-moz-tree-image(container, open, queryFolder_unfiled_____) {
+  list-style-image: url("../icons/mail-inbox.svg") !important;
+}

arch-config/.mozilla/firefox/default-release/chrome/src/library/_menubar.scss

@@ -0,0 +1,45 @@
+/*= Menubar - Icons ==========================================================*/
+#organizeButton,
+#viewMenu,
+#maintenanceButton,
+#back-button,
+#forward-button,
+#clearDownloadsButton {
+  fill: currentColor !important;
+  -moz-context-properties: fill !important;
+}
+
+/* Add */
+#organizeButton {
+  list-style-image: url("chrome://global/skin/icons/settings.svg") !important;
+}
+#viewMenu {
+  list-style-image: url("../icons/sort.svg") !important;
+}
+#maintenanceButton {
+  list-style-image: url("../icons/import-export.svg") !important;
+}
+
+#clearDownloadsButton {
+  list-style-image: url("chrome://global/skin/icons/delete.svg") !important;
+}
+#clearDownloadsButton > .toolbarbutton-icon {
+  display: -moz-inline-box !important;
+  margin-top: 0;
+  margin-bottom: 0;
+  margin-inline-start: 0;
+  margin-inline-end: 2px;
+}
+
+/* Replace */
+#back-button {
+  list-style-image: url("chrome://browser/skin/back.svg") !important;
+}
+#forward-button {
+  list-style-image: url("chrome://browser/skin/forward.svg") !important;
+}
+
+#back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
+#forward-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
+  transform: scaleX(-1) !important;
+}

arch-config/.mozilla/firefox/default-release/chrome/src/library/_proton.scss

@@ -0,0 +1,386 @@
+:root {
+  --organizer-color: -moz-DialogText;
+  --organizer-deemphasized-color: GrayText;
+
+  --organizer-toolbar-background: -moz-Dialog;
+  --organizer-pane-background: -moz-Dialog;
+  --organizer-content-background: -moz-Dialog;
+
+  --organizer-hover-background: SelectedItem;
+  --organizer-hover-color: SelectedItemText;
+  --organizer-selected-background: SelectedItem;
+  --organizer-selected-color: SelectedItemText;
+  --organizer-outline-color: SelectedItem;
+
+  --organizer-separator-color: ThreeDDarkShadow;
+  --organizer-border-color: ThreeDShadow;
+
+  --organizer-toolbar-field-background: Field;
+  --organizer-toolbar-field-background-focused: Field;
+  --organizer-toolbar-field-border-color: ThreeDShadow;
+  --organizer-toolbar-field-focus-border-color: var(--organizer-outline-color);
+  --organizer-toolbar-field-focus-box-shadow: unset;
+  --organizer-pane-field-border-color: ThreeDShadow;
+}
+
+@include NotContrast {
+  :root {
+    --organizer-color: var(--in-content-page-color);
+    --organizer-deemphasized-color: var(--in-content-deemphasized-text);
+
+    --organizer-toolbar-background: rgb(249, 249, 251); /* --toolbar-bgcolor */
+    --organizer-pane-background: rgb(229, 229, 235); /* --lwt-accent-color */
+    --organizer-content-background: var(--in-content-page-background);
+
+    --organizer-hover-background: var(--in-content-button-background-hover);
+    --organizer-hover-color: var(--organizer-color);
+    --organizer-selected-background: var(--in-content-button-background-active);
+    --organizer-selected-color: var(--organizer-color);
+    --organizer-outline-color: var(--in-content-focus-outline-color);
+
+    --organizer-separator-color: var(--organizer-pane-field-border-color);
+    --organizer-border-color: var(--in-content-border-color);
+
+    --organizer-toolbar-field-background: rgb(240, 240, 244); /* --lwt-accent-color */
+    --organizer-toolbar-field-background-focused: Field;
+    --organizer-toolbar-field-border-color: transparent;
+    --organizer-toolbar-field-focus-border-color: color-mix(
+      in srgb,
+      var(--organizer-outline-color) 50%,
+      transparent
+    );
+    --organizer-toolbar-field-focus-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.23);
+    --organizer-pane-field-border-color: color-mix(in srgb, currentColor 41%, transparent);
+  }
+
+  @include Dark {
+    :root {
+      --organizer-color: rgb(251, 251, 254);
+      --organizer-deemphasized-color: rgb(191, 191, 201);
+
+      --organizer-toolbar-background: rgb(43, 42, 51);
+      --organizer-pane-background: rgb(35, 34, 43);
+      --organizer-content-background: rgb(28, 27, 34);
+
+      --organizer-hover-background: rgb(82, 82, 94);
+      --organizer-selected-background: rgb(91, 91, 102);
+
+      --organizer-toolbar-field-background: var(--in-content-page-background);
+      --organizer-toolbar-field-background-focused: rgb(66, 65, 77);
+      scrollbar-color: rgba(249, 249, 250, 0.4) rgba(20, 20, 25, 0.3);
+    }
+  }
+}
+
+/*- Toolbar & Menus ------------------------------------------------------*/
+#placesToolbar {
+  appearance: none !important;
+  background-color: var(--organizer-toolbar-background) !important;
+  color: var(--organizer-color) !important;
+  border-bottom: 1px solid var(--organizer-border-color) !important;
+  padding: 4px !important;
+  padding-inline-end: 6px !important;
+}
+
+#placesToolbar > toolbarbutton {
+  appearance: none !important;
+  padding: 5px !important;
+  border-radius: 4px !important;
+}
+
+#placesToolbar > toolbarbutton[disabled] {
+  opacity: 0.6 !important;
+}
+
+#placesToolbar > toolbarbutton:not([disabled]):hover {
+  background-color: var(--organizer-hover-background) !important;
+  color: var(--organizer-hover-color) !important;
+}
+
+#placesToolbar > toolbarbutton:not([disabled]):hover:active {
+  background-color: var(--organizer-selected-background) !important;
+}
+
+#placesToolbar > toolbarbutton > .toolbarbutton-icon,
+#placesMenu > menu > image,
+#placesMenu > menu > .menubar-text {
+  -moz-context-properties: fill !important;
+  fill: currentColor !important;
+}
+
+#placesMenu {
+  margin-inline-start: 6px !important;
+}
+
+#placesMenu > menu {
+  appearance: none !important;
+  color: var(--organizer-color) !important;
+  border-radius: 4px !important;
+  padding-block: 5px !important;
+  padding-inline-start: 5px !important;
+  margin-inline-end: 2px !important;
+}
+
+#placesMenu > menu[_moz-menuactive="true"],
+#placesMenu > menu:hover {
+  background-color: var(--organizer-hover-background) !important;
+  color: var(--organizer-hover-color) !important;
+}
+
+#placesMenu > menu:hover:active,
+#placesMenu > menu[open] {
+  background-color: var(--organizer-selected-background) !important;
+  color: var(--organizer-selected-color) !important;
+}
+
+#placesMenu > menu > .menubar-text {
+  margin-block: 0 !important; /* override menu.css */
+  padding-inline-end: 4px !important;
+}
+
+/*- Search Bar & Input ---------------------------------------------------*/
+#searchFilter,
+#detailsPane html|input {
+  appearance: none !important;
+  background-color: var(--organizer-toolbar-field-background) !important;
+  color: var(--organizer-color) !important;
+  border: 1px solid var(--organizer-toolbar-field-border-color) !important;
+  border-radius: 4px !important;
+  margin: 0 !important;
+  padding-block: 2px !important;
+  min-height: 24px !important;
+}
+
+#searchFilter[focused] {
+  box-shadow: var(--organizer-toolbar-field-focus-box-shadow) !important;
+  background-color: var(--organizer-toolbar-field-background-focused) !important;
+  border-color: transparent !important;
+  outline: 2px solid var(--organizer-toolbar-field-focus-border-color) !important;
+  outline-offset: -2px !important;
+}
+
+/*- Sidebar & Splitter ---------------------------------------------------*/
+#placesList {
+  background-color: var(--organizer-pane-background) !important;
+}
+
+#placesView > splitter {
+  border: 0 !important;
+  border-inline-end: 1px solid var(--organizer-border-color) !important;
+  min-width: 0 !important;
+  width: 3px !important;
+  background-color: transparent !important;
+  margin-inline-start: -3px !important;
+  position: relative !important;
+}
+
+/*- Downloads Pane -------------------------------------------------------*/
+#downloadsRichListBox, /* Legacy - FF v98 */
+#downloadsListBox {
+  color: var(--organizer-color) !important;
+  background-color: var(--organizer-content-background) !important;
+}
+
+#clearDownloadsButton:focus-visible {
+  outline: 2px solid var(--organizer-outline-color) !important;
+}
+
+richlistitem[selected="true"],
+richlistitem:hover {
+  background-color: var(--organizer-hover-background) !important;
+  color: var(--organizer-color) !important;
+}
+
+richlistbox:where(:focus) > richlistitem[selected="true"] {
+  background-color: var(--organizer-selected-background) !important;
+}
+
+/*- Tree -----------------------------------------------------------------*/
+#contentView treecol {
+  /* Use box-shadow to draw a bottom border instead of border-bottom
+     * because otherwise the items on contentView won't be perfectly
+     * aligned with the items on the sidebar. */
+  box-shadow: inset 0 -1px var(--organizer-border-color) !important;
+}
+
+tree {
+  background-color: var(--organizer-content-background) !important;
+  color: var(--organizer-color) !important;
+}
+
+treecol:not([hideheader="true"]),
+treecolpicker {
+  appearance: none !important;
+  border: none !important;
+  background-color: var(--in-content-button-background) !important;
+  color: var(--organizer-color, inherit) !important;
+  padding: 5px 10px !important;
+}
+
+treecol:not([hideheader="true"], [sortable="false"]):hover,
+treecolpicker:hover {
+  background-color: var(--organizer-hover-background) !important;
+  color: var(--organizer-color) !important;
+}
+
+treecol:not([hideheader="true"], [sortable="false"]):hover:active,
+treecolpicker:hover:active {
+  background-color: var(--organizer-selected-background) !important;
+}
+
+treecol:not([hideheader="true"], :first-child),
+treecolpicker {
+  padding-left: 10px !important;
+  border-inline-start-width: 1px !important;
+  border-inline-start-style: solid !important;
+  border-image: linear-gradient(
+      transparent 0%,
+      transparent 20%,
+      var(--organizer-border-color) 20%,
+      var(--organizer-border-color) 80%,
+      transparent 80%,
+      transparent 100%
+    )
+    1 1 !important;
+}
+
+treecol[sortDirection]:not([hideheader="true"]) > xul|*.treecol-sortdirection {
+  fill: currentColor !important;
+  width: 18px !important;
+  height: 18px !important;
+}
+
+treechildren::-moz-tree-row {
+  background-color: transparent !important;
+}
+
+treechildren::-moz-tree-row(hover) {
+  background-color: var(--organizer-hover-background) !important;
+}
+
+treechildren::-moz-tree-row(selected) {
+  background-color: var(--organizer-selected-background) !important;
+  color: var(--organizer-selected-color) !important;
+  border: 1px solid transparent !important;
+}
+
+treechildren::-moz-tree-image(hover),
+treechildren::-moz-tree-twisty(hover),
+treechildren::-moz-tree-cell-text(hover) {
+  color: var(--organizer-hover-color) !important;
+}
+
+treechildren::-moz-tree-image(selected),
+treechildren::-moz-tree-twisty(selected),
+treechildren::-moz-tree-cell-text(selected) {
+  color: var(--organizer-selected-color) !important;
+}
+
+treechildren::-moz-tree-separator {
+  height: 1px !important;
+  border-color: var(--organizer-separator-color) !important;
+}
+
+treechildren::-moz-tree-separator(hover) {
+  border-color: var(--organizer-hover-color) !important;
+}
+
+treechildren::-moz-tree-separator(selected) {
+  border-color: var(--organizer-selected-color) !important;
+}
+
+/*- Info Box -------------------------------------------------------------*/
+#detailsPane {
+  background-color: var(--organizer-pane-background) !important;
+  color: var(--organizer-color) !important;
+  padding: 5px !important;
+  border-top: 1px solid var(--organizer-border-color) !important;
+}
+
+#editBookmarkPanelRows .expander-up,
+#editBookmarkPanelRows .expander-down {
+  appearance: none !important;
+  min-width: 0 !important;
+  padding: 5px !important;
+  margin: 0 !important;
+  margin-inline-end: 4px !important;
+  border: 1px solid var(--organizer-pane-field-border-color) !important;
+  border-radius: 4px !important;
+  color: var(--organizer-color) !important;
+  background-color: var(--organizer-content-background) !important;
+  list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg");
+  -moz-context-properties: fill !important;
+  fill: currentColor !important;
+}
+
+#editBookmarkPanelRows .expander-up:hover,
+#editBookmarkPanelRows .expander-down:hover {
+  background-color: var(--organizer-hover-background) !important;
+  color: var(--organizer-hover-color) !important;
+}
+
+#editBookmarkPanelRows .expander-up:hover:active,
+#editBookmarkPanelRows .expander-down:hover:active {
+  background-color: var(--organizer-selected-background) !important;
+  color: var(--organizer-selected-color) !important;
+}
+
+#editBookmarkPanelRows .expander-up:focus-visible,
+#editBookmarkPanelRows .expander-down:focus-visible {
+  outline: 2px solid var(--organizer-outline-color) !important;
+  outline-offset: -1px !important;
+}
+
+#editBookmarkPanelRows .expander-up {
+  list-style-image: url("chrome://global/skin/icons/arrow-up-12.svg");
+}
+
+#editBookmarkPanelRows .expander-up > .button-box,
+#editBookmarkPanelRows .expander-down > .button-box {
+  padding: 0 !important;
+}
+
+#places input {
+  border: 1px solid var(--organizer-pane-field-border-color) !important;
+  border-radius: 4px !important;
+  background-color: var(--organizer-content-background) !important;
+  color: var(--organizer-color) !important;
+  min-height: 20px !important;
+  padding-inline: 4px !important;
+}
+
+#places input:focus {
+  outline: 2px solid var(--organizer-outline-color) !important;
+  outline-offset: -1px !important;
+}
+
+#places input:not(:read-write):focus {
+  outline: none !important;
+}
+
+.caption-label {
+  margin-inline-start: 8px !important;
+  color: var(--organizer-deemphasized-color) !important;
+}
+
+#editBMPanel_tagsSelectorRow > richlistbox {
+  appearance: none !important;
+  color: var(--organizer-color) !important;
+  background-color: var(--organizer-content-background) !important;
+  border: 1px solid var(--organizer-border-color) !important;
+  border-radius: 4px !important;
+}
+
+#editBMPanel_tagsSelectorRow > richlistbox > richlistitem {
+  border: 1px solid transparent !important;
+}
+
+#editBMPanel_tagsSelectorRow > richlistbox > richlistitem:hover {
+  background-color: var(--organizer-hover-background) !important;
+  color: var(--organizer-hover-color) !important;
+}
+
+#editBMPanel_tagsSelectorRow > richlistbox > richlistitem[selected] {
+  background-color: var(--organizer-selected-background) !important;
+  color: var(--organizer-selected-color) !important;
+}

arch-config/.mozilla/firefox/default-release/chrome/src/library/_proton_contents.scss

@@ -0,0 +1,182 @@
+/*- Radio Button ---------------------------------------------------------*/
+menuitem[type="radio"] {
+  /* margin-inline-start: 0 !important; */
+  appearance: none !important;
+}
+
+menuitem[type="radio"] > .menu-iconic-left > .menu-iconic-icon {
+  appearance: none !important;
+  width: 16px !important;
+  height: 16px !important;
+  padding: 0 !important;
+  border: 1px solid var(--in-content-box-border-color) !important;
+  border-radius: 100% !important;
+  margin-block: 2px !important; /* extend the vertical clicktarget */
+  margin-inline: 0 6px !important;
+  background-color: var(--in-content-button-background) !important;
+  background-position: center !important;
+  flex-shrink: 0 !important; /* avoid shrinking inside flex container */
+}
+
+menuitem[type="radio"]:not([disabled="true"]):hover > .menu-iconic-left > .menu-iconic-icon {
+  background-color: var(--in-content-button-background-hover) !important;
+  color: var(--in-content-button-text-color-hover) !important;
+}
+
+menuitem[type="radio"]:not([disabled="true"]):hover:active > .menu-iconic-left > .menu-iconic-icon {
+  background-color: var(--in-content-button-background-active) !important;
+}
+
+menuitem[type="radio"] > .menu-iconic-left[checked="true"] > .menu-iconic-icon {
+  -moz-context-properties: fill !important;
+  fill: currentColor !important;
+  color: var(--in-content-primary-button-text-color) !important;
+  background-color: var(--in-content-primary-button-background) !important;
+  background-image: url("chrome://global/skin/icons/radio.svg") !important;
+  border-color: transparent !important;
+
+  /* Style the button also when printing with "Print Backgrounds" unchecked */
+  color-adjust: exact !important;
+}
+
+menuitem[type="radio"]:not([disabled="true"])[checked="true"]:hover > .menu-iconic-left > .menu-iconic-icon {
+  background-color: var(--in-content-primary-button-background-hover) !important;
+  color: var(--in-content-primary-button-text-color-hover) !important;
+}
+
+menuitem[type="radio"]:not([disabled="true"])[checked="true"]:hover:active > .menu-iconic-left > .menu-iconic-icon {
+  background-color: var(--in-content-primary-button-background-active) !important;
+}
+
+menuitem[type="radio"] > .menu-iconic-text {
+  margin-inline: 0 8px !important;
+  padding-inline-start: 0 !important;
+}
+
+/* Disabled checkboxes, radios and labels */
+menuitem[type="radio"][disabled="true"],
+menuitem[type="checkbox"][disabled="true"] {
+  color: inherit !important;
+}
+
+menuitem[type="radio"][disabled="true"],
+menuitem[type="checkbox"][disabled="true"] {
+  opacity: 0.5 !important;
+}
+
+/*- Check Box ------------------------------------------------------------*/
+/* From checkbox.css */
+menuitem[type="checkbox"] {
+  appearance: none !important;
+  -moz-box-align: center !important;
+  margin: 0px 2px !important;
+}
+
+menuitem[type="checkbox"] > .menu-iconic-left > .menu-iconic-icon {
+  margin-inline-end: 2px !important;
+}
+menuitem[type="checkbox"] > .menu-iconic-text {
+  margin: 1px 0 !important;
+}
+
+menuitem[type="checkbox"][disabled="true"] {
+ opacity: 0.4 !important;
+}
+
+menuitem[type="checkbox"] > .menu-iconic-left > .menu-iconic-icon {
+  appearance: none !important;
+  color: var(--checkbox-border-color, ThreeDDarkShadow) !important;
+  background-color: var(--checkbox-unchecked-bgcolor, Field) !important;
+  border: 1px solid currentColor !important;
+  border-radius: 2px !important;
+  margin-inline-end: 6px !important;
+}
+
+menuitem[type="checkbox"] > .menu-iconic-left > .menu-iconic-icon {
+  height: 16px !important;
+  width: 16px !important;
+}
+
+menuitem[type="checkbox"]:not([disabled="true"]):hover > .menu-iconic-left > .menu-iconic-icon {
+  background-color: var(
+    --checkbox-unchecked-hover-bgcolor,
+    color-mix(in srgb, -moz-accent-color 4%, Field)
+  ) !important;
+}
+
+menuitem[type="checkbox"]:not([disabled="true"]):hover:active > .menu-iconic-left > .menu-iconic-icon {
+  background-color: var(
+    --checkbox-unchecked-active-bgcolor,
+    color-mix(in srgb, -moz-accent-color 8%, Field)
+  ) !important;
+}
+
+menuitem[type="checkbox"] > .menu-iconic-left[checked="true"] > .menu-iconic-icon {
+  border-color: var(--checkbox-checked-border-color, transparent) !important;
+  background-color: var(--checkbox-checked-bgcolor, -moz-accent-color) !important;
+  background-image: url("chrome://global/skin/icons/check.svg") !important;
+  background-position: center !important;
+  background-repeat: no-repeat !important;
+  -moz-context-properties: fill !important;
+  fill: currentColor !important;
+  color: var(--checkbox-checked-color, -moz-accent-color-foreground) !important;
+  /* Style the button also when printing with "Print Backgrounds" unchecked */
+  color-adjust: exact !important;
+}
+
+menuitem[type="checkbox"]:not([disabled="true"]):hover > .menu-iconic-left[checked="true"] > .menu-iconic-icon {
+  background-color: var(
+    --checkbox-checked-hover-bgcolor,
+    color-mix(in srgb, currentColor 12.5%, -moz-accent-color)
+  ) !important;
+}
+
+menuitem[type="checkbox"]:not([disabled="true"]):hover:active
+  > .menu-iconic-left[checked="true"]
+  > .menu-iconic-icon {
+  background-color: var(
+    --checkbox-checked-active-bgcolor,
+    color-mix(in srgb, currentColor 25%, -moz-accent-color)
+  ) !important;
+}
+
+menuitem[type="checkbox"]:focus > .menu-iconic-left > .menu-iconic-icon {
+  outline: 2px solid var(--focus-outline-color, -moz-accent-color) !important;
+  outline-offset: var(--focus-outline-offset, 2px) !important;
+}
+
+@include Contrast {
+  menuitem[type="checkbox"]:not([disabled="true"]) > .menu-iconic-left > .menu-iconic-icon {
+    /* color will set the border-color on the check due to how HCM works for in-content pages. */
+    color: var(--checkbox-checked-border-color, color-mix(in srgb, -moz-accent-color 4%, Field)) !important;
+  }
+
+  menuitem[type="checkbox"] > .menu-iconic-left[checked="true"] {
+   color: var(--checkbox-checked-border-color, currentColor) !important;
+   fill: var(--checkbox-checked-color, -moz-accent-color-foreground) !important;
+  }
+
+  menuitem[type="checkbox"]:not([disabled="true"]):hover:active
+    > .menu-iconic-left[checked="true"]
+    > .menu-iconic-icon,
+  menuitem[type="checkbox"]:not([disabled="true"]):hover > .menu-iconic-left[checked="true"] > .menu-iconic-icon {
+    color: var(--checkbox-checked-border-color-hover, -moz-accent-color-foreground) !important;
+    fill: var(--checkbox-checked-border-color-hover, -moz-accent-color-foreground) !important;
+  }
+}
+
+/* From common.css */
+menuitem[type="checkbox"] > .menu-iconic-left > .menu-iconic-icon {
+  margin-block: 2px !important;
+}
+
+/*- Menu Separtor --------------------------------------------------------*/
+menuseparator {
+  appearance: none !important;
+  min-width: 2px;
+  min-height: 0;
+  border-top: 1px solid var(--in-content-box-border-color, ThreeDDarkShadow);
+  border-bottom: none;
+  margin: var(--panel-separator-margin, 6px);
+  padding: 0;
+}

arch-config/.mozilla/firefox/default-release/chrome/src/library/_standard_folder.scss

@@ -0,0 +1,21 @@
+/*= Standard Folder - More Visible ===========================================*/
+/* on Toolbar and Menus */
+:-moz-any(#PlacesToolbar, #BMB_bookmarksPopup, #bookmarksMenu) .bookmark-item[container="true"]:not([query="true"], [tagContainer], [dayContainer]),
+  /* in Sidebar, Library, Add/Edit Bookmark dialog */
+  /* https://github.com/rillian/firefox/blob/1f88437d263f56bdede4f20f69ba9c7b62f57001/layout/style/nsCSSAnonBoxList.h#L85-L98 */
+  /* Need to overide!!, can not use :not() */
+  :-moz-any(#bookmarks-view, #historyTree, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(title, container),
+  #editBMPanel_folderMenuList:not([selectedGuid="toolbar_____"], [selectedGuid="menu________"]),
+  #editBMPanel_folderMenuList .folder-icon:not([id]),
+  /* Download Popup */
+  .downloadIconShow > .button-box > .button-icon {
+  list-style-image: url("../icons/folder.svg") !important;
+}
+
+/* Standard Folder - Open */
+:-moz-any(#PlacesToolbar, #BMB_bookmarksPopup, #bookmarksMenu)
+  .bookmark-item[container="true"]:not([query="true"], [tagContainer], [dayContainer])[open="true"],
+:-moz-any(#bookmarks-view, #historyTree, #editBMPanel_folderTree, #placesList, #placeContent)
+  treechildren::-moz-tree-image(title, container, open) {
+  list-style-image: url("../icons/folder-open.svg") !important;
+}

arch-config/.mozilla/firefox/default-release/chrome/src/padding/_bookmark_bar.scss

@@ -0,0 +1,3 @@
+:root[uidensity="compact"] #PersonalToolbar toolbarbutton {
+  margin-top: 0px; /* Original: 2px */
+}

arch-config/.mozilla/firefox/default-release/chrome/src/padding/_bookmark_menu.scss

@@ -0,0 +1,27 @@
+:root {
+  --bookmark-menu-padding: 3px;
+}
+:root[uidensity="compact"] {
+  --bookmark-menu-padding: 1.5px;
+}
+@include Option("userChrome.padding.menu_compact") {
+  :root {
+    --bookmark-menu-padding: 2px;
+  }
+  :root[uidensity=compact] {
+    --bookmark-menu-padding: 0px;
+  }
+}
+
+:root:not([uidensity="touch"]) #BMB_bookmarksPopup .subviewbutton,
+:root:not([uidensity="touch"]) #PlacesToolbar menupopup[placespopup] .bookmark-item,
+:root:not([uidensity="touch"]) #PlacesToolbar menupopup[placespopup] .openintabs-menuitem {
+  padding-block: var(--bookmark-menu-padding) !important;
+}
+
+@include Option("userChrome.padding.menu_compact", "userChrome.padding.bookmark_menu.compact") {
+  :root:not([uidensity="touch"]) #BMB_bookmarksPopup .bookmark-item,
+  :root:not([uidensity="touch"]) #PlacesToolbar menupopup[placespopup] .bookmark-item {
+    min-height: unset !important; /* Original: 24px */
+  }
+}

arch-config/.mozilla/firefox/default-release/chrome/src/padding/_drag_space.scss

@@ -0,0 +1,57 @@
+/* for Extra Drag Space */
+// https://searchfox.org/mozilla-esr78/search?q=--space-above-tabbar&path=&case=false&regexp=false
+:root {
+  --space-above-tabbar: 8px; /* If the option is not specified, it is equivalent to 0px. */
+}
+
+@mixin dragSpaceHeight {
+  :root[tabsintitlebar][sizemode="normal"] #toolbar-menubar[autohide="true"] {
+    @content;
+  }
+  @include Option("userChrome.padding.drag_space.maximized") {
+    :root[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"] {
+      @content;
+    }
+  }
+}
+@mixin dragSpacePadding {
+  /* Add extra space to titlebar for dragging */
+  :root[sizemode="normal"][chromehidden~="menubar"] #TabsToolbar > .toolbar-items,
+  :root[sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar > .toolbar-items {
+    @content;
+  }
+  @include Option("userChrome.padding.drag_space.maximized") {
+    :root[sizemode="maximized"][chromehidden~="menubar"] #TabsToolbar > .toolbar-items,
+    :root[sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar > .toolbar-items {
+      @content;
+    }
+  }
+}
+
+@include OS($win10) {
+  @include dragSpaceHeight {
+    height: calc(var(--tab-min-height) + var(--space-above-tabbar) - var(--tabs-navbar-shadow-size));
+  }
+}
+@include OS($win7, $win8, $linux) {
+  @include dragSpaceHeight {
+    height: calc(var(--tab-min-height) + var(--space-above-tabbar));
+  }
+}
+
+@include OS($mac) {
+  #TabsToolbar > .toolbar-items {
+    padding-top: var(--space-above-tabbar) !important;
+  }
+}
+@include OS($win7) {
+  /* Add 4px extra margin on top of the tabs toolbar on Windows 7. */
+  @include dragSpacePadding {
+    padding-top: calc(var(--space-above-tabbar) + 4px) !important;
+  }
+}
+@include OS($win8, $win10, $linux) {
+  @include dragSpacePadding {
+    padding-top: var(--space-above-tabbar) !important;
+  }
+}

arch-config/.mozilla/firefox/default-release/chrome/src/padding/_first_tab.scss

@@ -0,0 +1,9 @@
+/* for First Tab Space */
+:root {
+  --space-left-tabbar: 8px; /* If the option is not specified, it is equivalent to 0px. */
+}
+
+:root:not([tabsintitlebar]) #tabbrowser-tabs:not([positionpinnedtabs]),
+:root:is([sizemode="maximized"], [sizemode="fullscreen"]) #tabbrowser-tabs:not([positionpinnedtabs]) {
+  padding-inline-start: var(--space-left-tabbar) !important;
+}

arch-config/.mozilla/firefox/default-release/chrome/src/padding/_global_menubar.scss

@@ -0,0 +1,29 @@
+/* Vertical Align - Center & Height: 100%  */
+#main-menubar {
+  -moz-box-flex: 1 !important;
+}
+
+/* Rounding */
+#main-menubar > menu {
+  border-radius: 4px;
+}
+
+/* Menubar item padding */
+:root {
+  --global-menubar-padding: 2px;
+}
+:root[uidensity="compact"] {
+  --global-menubar-padding: 1px;
+}
+:root[uidensity="touch"] {
+  --global-menubar-padding: 4px;
+}
+#main-menubar > menu {
+  padding-block: var(--global-menubar-padding) !important;
+}
+
+/* Reduce items */
+#main-menubar > menu > menupopup menuitem,
+#main-menubar > menu > menupopup menu {
+  padding-block: var(--bookmark-menu-padding) !important;
+}

arch-config/.mozilla/firefox/default-release/chrome/src/padding/_index.scss

@@ -0,0 +1,79 @@
+/*= Tab Bar - Distribution padding, radius ===================================*/
+@import "tab_padding";
+
+/*= Tab Bar - Reduce Width, Show more tabs ===================================*/
+@include Option("userChrome.padding.first_tab") {
+  @import "first_tab";
+}
+
+@include Option("userChrome.padding.tabbar_width") {
+  @import "tabbar_width";
+}
+
+/*= Tab Bar - Reduce Height, Show more contents ==============================*/
+@include Option("userChrome.padding.drag_space") {
+  @import "drag_space";
+}
+
+@include Option("userChrome.padding.tabbar_height") {
+  @import "tabbar_height";
+}
+
+/*= Tool Bar - Button Padding ================================================*/
+@include Option("userChrome.padding.toolbar_button") {
+  @import "toolbar_button";
+}
+
+/*= Nav Bar - Reduce Width ===================================================*/
+@include Option("userChrome.padding.navbar_width") {
+  @import "nav_bar";
+}
+
+/*= URL Bar - Reduce Padding =================================================*/
+@include Option("userChrome.padding.urlbar") {
+  @import "url_bar";
+}
+@include Option("userChrome.padding.urlView_expanding") {
+  @import "urlview_expanding";
+}
+@include Option("userChrome.padding.urlView_result") {
+  @import "urlview_result";
+}
+
+/*= BookMark Bar - Reduce Height =============================================*/
+@include Option("userChrome.padding.bookmarkbar") {
+  @import "bookmark_bar";
+}
+
+/*= Info Bar - Reduce Padding ================================================*/
+@include Option("userChrome.padding.infobar") {
+  @import "info_bar";
+}
+
+/*= Menu - Reduce Padding ====================================================*/
+@include Option("userChrome.padding.menu") {
+  @import "menu";
+}
+
+/*= Bookmark Menu - Reduce Padding ===========================================*/
+@include Option("userChrome.padding.bookmark_menu") {
+  @import "bookmark_menu";
+}
+
+/*= Global Menu - Set Padding ================================================*/
+@include Option("userChrome.padding.global_menubar") {
+  @import "global_menubar";
+}
+
+/*= Panel - Reduce padding ===================================================*/
+@include Option("userChrome.padding.panel") {
+  @import "panel";
+}
+@include Option("userChrome.padding.panel_header") {
+  @import "panel_header";
+}
+
+/*= Popup Panel - Reduce padding =============================================*/
+@include Option("userChrome.padding.popup_panel") {
+  @import "popup_panel";
+}

arch-config/.mozilla/firefox/default-release/chrome/src/padding/_info_bar.scss

@@ -0,0 +1,44 @@
+:root:not([uidensity]) #tab-notification-deck {
+  --infobar-message-margin: 0 4px 3px;
+}
+:root[uidensity="compact"] #tab-notification-deck {
+  --infobar-message-margin: 0 4px 2px;
+}
+#tab-notification-deck notification-message[message-bar-type="infobar"]:not([style*="margin-top"]) {
+  margin: var(--infobar-message-margin, 0 4px 4px) !important;
+}
+
+:root:not([uidensity]) notification-message[message-bar-type="infobar"] {
+  --infobar-vertical-margin: 7px;
+  --infobar-button-vertical-margin: 3px;
+}
+:root[uidensity="compact"] notification-message[message-bar-type="infobar"] {
+  --infobar-vertical-margin: 6px;
+  --infobar-button-vertical-margin: 2px;
+}
+.infobar > .icon {
+  margin-block: var(--infobar-vertical-margin, 8px) !important; /* Original: 8px */
+}
+.notification-message {
+  padding-block: var(--infobar-vertical-margin, 8px) !important; /* Original: 8px */
+}
+.notification-button-container > .notification-button {
+  margin-block: var(--infobar-button-vertical-margin, 4px) !important; /* Original: 4px */
+}
+.notification-close {
+  margin: var(--infobar-button-vertical-margin, 4px) 8px !important; /* Original: 4px 8px */
+}
+
+/* Hard coded for compatibility - Disappearing phenomenon */
+.container.infobar::before {
+  content: "";
+  display: block;
+  width: 2px;
+  position: absolute;
+  background-image: linear-gradient(0, #9059ff 0%, #ff4aa2 52.08%, #ffbd4f 100%);
+  top: 0;
+  inset-inline-start: 0;
+  height: 100%;
+  border-start-start-radius: 4px;
+  border-end-start-radius: 4px;
+}

arch-config/.mozilla/firefox/default-release/chrome/src/padding/_menu.scss

@@ -0,0 +1,69 @@
+:root {
+  --menu-padding: 0.35em; /* Win7, 8: 0px */
+}
+:root[uidensity="compact"] {
+  --menu-padding: 0.25em;
+}
+:root[uidensity="touch"] {
+  --menu-padding: 0.5em;
+}
+@include Option("userChrome.padding.menu_compact") {
+  :root {
+    --menu-padding: 2px;
+  }
+  :root[uidensity=compact] {
+    --menu-padding: 0px;
+  }
+}
+
+menupopup:not(.in-menulist) > menuitem,
+menupopup > menu {
+  /* Original: 0.5em */
+  padding-block: var(--menu-padding) !important;
+}
+
+#ContentSelectDropdown > menupopup > menucaption,
+#ContentSelectDropdown > menupopup > menuitem {
+  padding-block: 0 !important;
+}
+
+@include OS($mac) {
+  :root:not([uidensity="touch"]) .menu-text,
+  :root:not([uidensity="touch"]) .menu-iconic-text {
+    padding-inline-end: 0 !important; /* Original: 2px */
+  }
+  :root:not([uidensity="touch"]) .menupopup-arrowscrollbox {
+    padding-block: 1px !important; /* Original: 4px*/
+  }
+  :root:not([uidensity="touch"]) #context-navigation:not([hidden]) {
+    padding: 0 0 1px !important; /* Original: 0 0 4px*/
+  }
+  :root:not([uidensity="touch"]) .menu-right {
+    margin-right: 6px !important; /* Original: 12px */
+  }
+}
+
+@include OS($win7, $win8) {
+  /* Remove border */
+  menupopup > menuitem,
+  menupopup > menu {
+    padding-block: calc(var(--menu-padding) - 2px) !important;
+  }
+
+  /* Make to original */
+  :root:not([uidensity="touch"]) #context-navigation:not([hidden]) {
+    padding: 0 0 4px !important;
+  }
+}
+
+@include OS($linux) {
+  menupopup > menu {
+    padding-inline-start: 0.5em;
+  }
+}
+
+/* Arrow Icon Align to Right */
+.bookmark-item.subviewbutton > .menu-right {
+  margin-inline-end: 0 !important;
+}
+

arch-config/.mozilla/firefox/default-release/chrome/src/padding/_nav_bar.scss

@@ -0,0 +1,4 @@
+#nav-bar:not([customizing]) toolbarspring {
+  min-width: 1px !important;
+  max-width: 100px !important;
+}

arch-config/.mozilla/firefox/default-release/chrome/src/padding/_panel.scss

@@ -0,0 +1,16 @@
+:root {
+  --arrowpanel-menuitem-margin: 0 var(--arrowpanel-menuicon-padding) !important; /* Original: 0 8px */
+  --arrowpanel-menuitem-padding-block: 5px !important; /* Original: 8px */
+  --arrowpanel-menuitem-padding-inline: 5px !important; /* Original: 8px */
+  --arrowpanel-menuitem-padding: var(--arrowpanel-menuitem-padding-block) var(--arrowpanel-menuitem-padding-inline) !important; /* Compatibility */
+  --arrowpanel-padding: 0.8em !important; /* Original: 16px or .cui-widget-panel, .cui-widget-panel::part(arrowcontent) => 4px 0 */
+}
+
+:root[uidensity="compact"] {
+  --arrowpanel-menuitem-padding-block: 3px !important;
+  --arrowpanel-menuitem-padding-inline: 3px !important;
+}
+:root[uidensity="touch"] {
+  --arrowpanel-menuitem-padding-block: 8px !important; /* Original: 8px */
+  --arrowpanel-menuitem-padding-inline: 8px !important; /* Original: 8px */
+}

arch-config/.mozilla/firefox/default-release/chrome/src/padding/_panel_header.scss

@@ -0,0 +1,4 @@
+.panel-header{
+  padding: unset !important;
+  padding-top: 4px !important;
+}

arch-config/.mozilla/firefox/default-release/chrome/src/padding/_popup_panel.scss

@@ -0,0 +1,51 @@
+#protections-popup-main-header-label {
+  height: unset !important; /* Original: 37.6px */
+}
+
+#identity-popup,
+#permission-popup,
+#protections-popup {
+  --vertical-section-padding: 0.8em; /* Original: 0.9em */
+}
+
+.protections-popup-footer-button,
+.protections-popup-category {
+  min-height: 24px; /* Original: 32px */
+  height: unset !important;
+}
+
+/** Popup panel - Compact mode  */
+/* Footer Button Height */
+:root[uidensity="compact"] .panel-footer.panel-footer-menulike > button {
+  padding: 3px 8px !important;
+}
+/* Footer Button Height */
+:root[uidensity="compact"] #protections-popup-trackersView-settings-button {
+  margin: 4px 8px 0 !important;
+}
+/* not cut off for Protection popup Footer on windows */
+:root[uidensity="compact"] #protections-popup-multiView #protections-popup-footer {
+  padding: 3px 0 10px !important;
+}
+/* Button and disabled category in Protection popup */
+:root[uidensity="compact"] #protections-popup-multiView .protections-popup-footer-button,
+:root[uidensity="compact"] #protections-popup-multiView .protections-popup-category {
+  height: 20px !important;
+  min-height: 20px !important;
+}
+/* Footer Button in Tracking Content Panel */
+:root[uidensity="compact"] #protections-popup-multiView .panel-footer.panel-footer-menulike {
+  margin: 0 0 3px !important;
+}
+/* Identity popup header padding */
+:root[uidensity="compact"] #identity-popup-multiView #identity-popup-mainView-panel-header {
+  padding: 2px 5px !important;
+}
+/* Text When There is no trackers */
+:root[uidensity="compact"] #protections-popup-no-trackers-found-description {
+  margin: 2em 4em !important;
+}
+/* Download Item margin */
+:root[uidensity="compact"] #downloadsListBox {
+  margin: 0 !important;
+}

arch-config/.mozilla/firefox/default-release/chrome/src/padding/_tab_padding.scss

@@ -0,0 +1,21 @@
+@include Option("userChrome.tab.lepton_like_padding", "userChrome.tab.photon_like_padding") {
+  :root {
+    // --tab-block-margin: New version of --proton-tab-block-margin
+    --proton-tab-block-margin: var(--tab-block-margin) !important; /* Original: 4px, Legacy */
+  }
+  :root[uidensity="touch"] {
+    /* Like Original */
+    --tab-block-margin: 4px !important;
+  }
+}
+
+@include Option("userChrome.tab.lepton_like_padding") {
+  :root {
+    --tab-block-margin: 2px !important; /* New version of --proton-tab-block-margin */
+  }
+}
+@include Option("userChrome.tab.photon_like_padding") {
+  :root {
+    --tab-block-margin: 0px !important;
+  }
+}

arch-config/.mozilla/firefox/default-release/chrome/src/padding/_tabbar_height.scss

@@ -0,0 +1,80 @@
+/* Toolbar Height */
+@include Option("userChrome.tab.lepton_like_padding") {
+  :root:not([uidensity]) #TabsToolbar {
+    --tab-min-height: 36px;
+  }
+  :root[uidensity="compact"] #TabsToolbar {
+    --tab-min-height: 32px;
+  }
+  :root[uidensity="touch"] #TabsToolbar {
+    --tab-min-height: 41px;
+  }
+}
+@include Option("userChrome.tab.photon_like_padding") {
+  :root:not([uidensity]) #TabsToolbar {
+    --tab-min-height: 32px;
+  }
+  :root[uidensity="compact"] #TabsToolbar {
+    --tab-min-height: 29px;
+  }
+  :root[uidensity="touch"] #TabsToolbar {
+    --tab-min-height: 41px;
+  }
+
+  /* Top Margin */
+  .tab-background,
+  .tab-content {
+    margin-top: 0 !important;
+  }
+}
+@include NotOption("userChrome.tab.lepton_like_padding") {
+  @include NotOption("userChrome.tab.photon_like_padding") {
+    :root:not([uidensity]) #TabsToolbar {
+      --tab-min-height: 36px; /* 38px -> 36px */
+    }
+    :root[uidensity="compact"] #TabsToolbar {
+      --tab-min-height: 29px; /* 36px -> 29px */
+    }
+  }
+}
+@include Option("userChrome.tab.connect_to_window") {
+  #TabsToolbar {
+    --toolbarbutton-inner-padding: calc((var(--tab-min-height) - 18px) / 2) !important; /* Prevent overflow pinned tab bottom margin */
+  }
+
+  :root:not([uidensity="compact"]) #tabbrowser-arrowscrollbox,
+  #tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"],
+  #tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"] .tab-stack,
+  #tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"] .tab-content {
+    max-height: var(--tab-min-height) !important; /* Force apply height */
+  }
+  :root[uidensity="compact"] #tabbrowser-arrowscrollbox {
+    height: var(--tab-min-height) !important;
+  }
+}
+
+/* Scroll Button - Size Fix */
+:root #tabbrowser-arrowscrollbox {
+  --scrollbtn-vertical-padding: 3px;
+  --scrollbtn-vertical-border: 2px;
+  --scrollbtn-border-radius: 7px;
+}
+#scrollbutton-up,
+#scrollbutton-down {
+  /* Original: var(--toolbarbutton-inner-padding) calc(var(--toolbarbutton-inner-padding) - 6px) = 9px */
+  /* https://github.com/mozilla/gecko-dev/blob/71b1259afd1cdaf41871ae675c2dadb967ea5b34/browser/themes/shared/toolbarbuttons.inc.css#L142 */
+  padding-top: var(--scrollbtn-vertical-padding, var(--toolbarbutton-inner-padding)) !important;
+  padding-bottom: var(--scrollbtn-vertical-padding, var(--toolbarbutton-inner-padding)) !important;
+
+  /* Original: 4px */
+  border-top-width: var(--scrollbtn-vertical-border, 4px) !important;
+  border-bottom-width: var(--scrollbtn-vertical-border, 4px) !important;
+  /* Original: calc(var(--tab-border-radius) + 4px) = 8px */
+  border-radius: var(--scrollbtn-border-radius, calc(var(--tab-border-radius) + 4px)) !important;
+}
+
+:root[tabsintitlebar]:not([uidensity="compact"]) #toolbar-menubar[autohide="true"] {
+  height: calc(
+    var(--tab-min-height) - var(--tabs-navbar-shadow-size) - 2px
+  ); /* Compact: 28px, Normal: 33px, Touch: 38px */
+}

arch-config/.mozilla/firefox/default-release/chrome/src/padding/_tabbar_width.scss

@@ -0,0 +1,87 @@
+/* Titlebar Space */
+.titlebar-spacer[type="pre-tabs"] {
+  width: 30px !important; /* Original: 40px */
+}
+.titlebar-spacer[type="post-tabs"] {
+  width: 25px !important; /* Original: 40px */
+}
+
+/* Tabbar Buttons */
+:root {
+  --newtab-button-minus-width-padding: 2px;
+  --newtab-button-width-padding: calc(var(--toolbarbutton-inner-padding) - var(--newtab-button-minus-width-padding));
+}
+#new-tab-button > .toolbarbutton-icon,
+#alltabs-button > .toolbarbutton-badge-stack {
+  /* Original: calc(2 * var(--toolbarbutton-inner-padding) + 16px) */
+  width: calc(2 * var(--newtab-button-width-padding) + 16px) !important;
+
+  /* Original: --toolbarbutton-inner-padding */
+  padding-left: var(--newtab-button-width-padding) !important;
+  padding-right: var(--newtab-button-width-padding) !important;
+}
+
+@include NotOption("userChrome.tab.photon_like_padding") {
+  #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs])
+    > #tabbrowser-arrowscrollbox
+    > .tabbrowser-tab[first-visible-unpinned-tab] {
+    margin-inline-start: 1px !important;
+  }
+}
+@include Option("userChrome.tab.photon_like_padding") {
+  #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs])
+    > #tabbrowser-arrowscrollbox
+    > .tabbrowser-tab[first-visible-unpinned-tab] {
+    margin-inline-start: 0 !important;
+  }
+}
+
+:root:not([uidensity="touch"]) #tabbrowser-arrowscrollbox {
+  --scrollbtn-inner-padding: 1px;
+  --scrollbtn-outer-padding: 3px;
+}
+#scrollbutton-up {
+  padding-left: var(--scrollbtn-inner-padding, 4px) !important; /* Original: 4px */
+  padding-right: var(--scrollbtn-outer-padding, 4px) !important;
+}
+#scrollbutton-down {
+  padding-left: var(--scrollbtn-outer-padding, 4px) !important; /* Original: 4px */
+  padding-right: var(--scrollbtn-inner-padding, 4px) !important;
+}
+
+:root:not([uidensity="touch"]) #new-tab-button,
+#alltabs-button {
+  --toolbarbutton-outer-padding: 1px; /* Original: 2px*/
+}
+
+/* Tab - Max Size */
+@include NotOption("userChrome.tab.photon_like_padding") {
+  :root {
+    --tab-max-width: 240px;
+  }
+}
+@include Option("userChrome.tab.photon_like_padding") {
+  :root {
+    --tab-max-width: 225px;
+  }
+}
+.tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]) {
+  max-width: var(--tab-max-width) !important; /* Original: 225px */
+}
+
+/* neighbouring tabs should "pinch" together */
+@include NotOption("userChrome.tab.photon_like_padding") {
+  @include Option("userChrome.tab.lepton_like_padding") {
+    .tabbrowser-tab {
+      padding-inline: 1px !important;
+    }
+  }
+  .tabbrowser-tab:not([last-visible-tab]) {
+    margin-inline-end: -0.5px !important;
+  }
+}
+@include Option("userChrome.tab.photon_like_padding") {
+  .tabbrowser-tab {
+    padding-inline: 0 !important;
+  }
+}

arch-config/.mozilla/firefox/default-release/chrome/src/padding/_toolbar_button.scss

@@ -0,0 +1,3 @@
+:root[uidensity="compact"] {
+  --toolbarbutton-outer-padding: 2px !important; /* Original: 3px, General is 2px */
+}

arch-config/.mozilla/firefox/default-release/chrome/src/padding/_url_bar.scss

@@ -0,0 +1,24 @@
+:root:not([uidensity="touch"]) #urlbar-container,
+:root:not([uidensity="touch"]) #search-container {
+  padding-block: 3px !important; /* Original: 4px */
+  margin-inline: 5px !important; /* Original: 5px */
+}
+:root:not([uidensity="compact"]) #urlbar-container,
+:root:not([uidensity="compact"]) #search-container {
+  padding-block: 2px !important;
+}
+
+/* spread menu */
+:root:not([uidensity]) .urlbarView-row {
+  padding-block: 1px !important; /* Original: 2px */
+}
+:root[uidensity="compact"] .urlbarView-row {
+  padding-block: 0px !important;
+}
+
+:root:not([uidensity]) #urlbar .search-one-offs:not([hidden]) {
+  padding-block: 8px !important; /* Original: 10px */
+}
+:root[uidensity="compact"] #urlbar .search-one-offs:not([hidden]) {
+  padding-block: 2px !important;
+}

arch-config/.mozilla/firefox/default-release/chrome/src/padding/_urlview_expanding.scss

@@ -0,0 +1,16 @@
+#urlbar[breakout][breakout-extend] {
+  top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important;
+  left: 0 !important;
+  width: 100% !important;
+}
+
+#urlbar[breakout][breakout-extend] > #urlbar-input-container {
+  height: var(--urlbar-height) !important;
+  padding-block: 0 !important;
+  padding-inline: 0 !important;
+}
+
+#urlbar[breakout][breakout-extend] > #urlbar-background {
+  animation-name: none !important;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, .05) !important;
+}

arch-config/.mozilla/firefox/default-release/chrome/src/padding/_urlview_result.scss

@@ -0,0 +1,8 @@
+.urlbarView {
+  margin-inline: 0 !important;
+  width: 100% !important;
+}
+
+.urlbarView-row {
+  padding-block: 0 !important;
+}

arch-config/.mozilla/firefox/default-release/chrome/src/panel/_full_width_padding.scss

@@ -0,0 +1,12 @@
+/* Original
+--arrowpanel-menuitem-margin: 0 8px;
+--arrowpanel-menuitem-padding-block: 8px;
+--arrowpanel-menuitem-padding-inline: 8px;
+--arrowpanel-menuitem-padding: var(--arrowpanel-menuitem-padding-block) var(--arrowpanel-menuitem-padding-inline);
+*/
+
+:root,
+:root:is([uidensity="compact"], [uidensity="touch"]) {
+  --arrowpanel-menuitem-margin: 0 !important;
+  --arrowpanel-menuitem-padding-inline: calc(var(--arrowpanel-menuitem-padding-block) + 8px) !important;
+}

arch-config/.mozilla/firefox/default-release/chrome/src/panel/_full_width_separator.scss

@@ -0,0 +1,9 @@
+/* Full width separators */
+:root {
+  /* Original
+--panel-separator-margin-vertical: 4px;
+--panel-separator-margin-horizontal: 8px;
+--panel-separator-margin: var(--panel-separator-margin-vertical) var(--panel-separator-margin-horizontal);
+ */
+  --panel-separator-margin-horizontal: 0 !important;
+}

arch-config/.mozilla/firefox/default-release/chrome/src/panel/_index.scss

@@ -0,0 +1,11 @@
+@include Option("userChrome.panel.remove_strip") {
+  @import "remove_strip";
+}
+
+@include Option("userChrome.panel.full_width_separator") {
+  @import "full_width_separator";
+}
+
+@include Option("userChrome.panel.full_width_padding") {
+  @import "full_width_padding";
+}

arch-config/.mozilla/firefox/default-release/chrome/src/panel/_remove_strip.scss

@@ -0,0 +1,3 @@
+#appMenu-fxa-separator {
+  --panel-separator-zap-gradient: none; /* Original: linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%) */
+}