Update firefox look to photon again

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

@@ -12,6 +12,7 @@
   - [Project Structure](#project-structure)
     - [Icon files](#icon-files)
     - [Meta Info files](#meta-info-files)
+  - [Restrictions](#restrictions)
 - [Rules](#rules)
   - [Version](#version)
   - [Branch](#branch)
@@ -167,6 +168,27 @@ Path=<Full PATH>
 - 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

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

@@ -1,6 +1,6 @@
     This is at least a partial credits-file of people that have contributed to the 'Firefox-UI-Fix' project.
     It is sorted by name.
-        The fields are: name (N), email (E), web-address(W), license(L).
+        The fields are: name (N), email (E), web-address(W), Copyright(C), license(L).
     Thanks,
 
                  black7375
@@ -9,70 +9,88 @@
 
 N: Compact Mode Firefox Css
 W: https://github.com/Godiesc/compactmodefirefoxcss
+C: Copyright (c) 2021 Godiesc
 L: MPL 2.0
 
 N: EdgeFox
 W: https://github.com/23Bluemaster23/EdgeFox
+C: Copyright (c) 2021 23Bluemaster23
+L: Unspecified License (Copyright holder approved)
 
 N: EdgeTabSeparater.userChrome.css
 W: https://gist.github.com/mmis1000/08d8de4bbe70c04423f0b966bcc286b1
+C: Copyright (c) 2021 Mmis1000 <mmis10002@gmail.com>
 L: MIT
 
 N: firefox-csshacks
 W: https://github.com/MrOtherGuy/firefox-csshacks
+C: Copyright (c) 2018 MrOtherGuy
 L: MPL 2.0
 
 N: Fluent UI System Icons
 W: https://github.com/microsoft/fluentui-system-icons
+C: Copyright (c) 2020 Microsoft Corporation
 L: MIT
 
 N: gecko-dev
-W: https://hg.mozilla.org/
+W: https://hg.mozilla.org/mozilla-central/
+C: Copyright (c) 1998–2021 The Mozilla Foundation
 L: MPL 2.0
 
 N: MaterialFox
 W: https://github.com/muckSponge/MaterialFox
+C: Copyright (c) 2018 muckSponge
 L: MIT
 
 N: Multi-Account-Containers
 W: https://github.com/mozilla/multi-account-containers
+C: Copyright (c) 1998–2021 The Mozilla Foundation
 L: MPL 2.0
 
 N: PS-Menu
 W: https://github.com/chrisseroka/ps-menu
+C: Copyright (c) 2016 chrisseroka
 L: MIT
 
 N: Quantum Nox Firefox Dark Full Theme
 W: https://github.com/Izheil/Quantum-Nox-Firefox-Dark-Full-Theme
+C: Copyright (c) 2017 Izheil
 L: MPL 2.0
 
 N: quietfox
 W: https://github.com/coekuss/quietfox
+C: Copyright (c) 2019 coekuss
 L: MIT
 
 N: ShadowFox
 W: https://github.com/overdodactyl/ShadowFox
+C: Copyright (c) 2017 overdodactyl
 L: MIT
 
 N: SVG Repo
 E: info@svgrepo.com
 W: https://www.svgrepo.com
+C: Copyright (c) 2017 svgrepo.com
 L: CC0
 
 N: uc.css.js
 W: https://github.com/aminomancer/uc.css.js
+C: Copyright (c) 2019 aminomancer
 L: CC BY-NC-SA 4.0
 
 N: userChrome.csshacks
 W: https://gist.github.com/DCzajkowski/baaf7bc81aae5278d690eaae951a823b
+C: Copyright (c) 2021 Dariusz Czajkowski
 L: CC0
 
 N: userChrome.css
 W: https://gist.github.com/Dragoner7/ec2319e5038a6b4722d3e692713f9471
+C: Copyright (c) 2021 Dragoner7
 L: MPL 2.0
 
 N: userChrome.org
 W: https://www.userchrome.org/what-is-userchrome-css.html
+C: Copyright (c) 2021 Jefferson Scher
 L: CC BY 4.0
 
 ----------
@@ -126,9 +144,12 @@ W: https://github.com/Jonta
 N: mamen
 W: https://www.mamen.at
 
-N: Tatsuyuki Ishi
+N: MarNicGit
-E: ishitatsuyuki@gmail.com
+W: https://github.com/MarNicGit
-W: https://github.com/ishitatsuyuki
+
+N: ph3b3
+E: phoebeleong8@gmail.com
+W: https://phoebe-leong.github.io/
 
 N: Rahul Ramkumar
 E: rahulram226@gmail.com
@@ -149,3 +170,7 @@ 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.2.0
+Ver=v4.2.3
-Branch=proton-style
+Branch=photon-style

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

@@ -1,4 +1,4 @@
-* Lepton (old name: Proton Fix)
+* Lepton (old name: Proton Fix) - Photon Stlyed
   :PROPERTIES:
   :TOC:      :include all
   :END:
@@ -6,7 +6,7 @@
 
 *Table of Contents*
 :CONTENTS:
-- [[#lepton-old-name-proton-fix][Lepton (old name: Proton Fix)]]
+- [[#lepton-old-name-proton-fix---photon-stlyed][Lepton (old name: Proton Fix) - Photon Stlyed]]
   - [[#introduction][Introduction]]
   - [[#installation-guide][Installation Guide]]
   - [[#why-proton][WHY Proton?]]
@@ -23,13 +23,15 @@
   Proton's [[#why-proton][overall feel is good]], but there were a few things I [[#why-not-proton][didn't like]] and wanted to improve. \\
   That's why this project was born, and Lepton to denote light theme layer.
 
+  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*      |                               |      | |
   | [[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://user-images.githubusercontent.com/25581533/127980993-5c532856-0c1c-4548-b310-9495df246d16.png]]
+  [[https://user-images.githubusercontent.com/25581533/120091976-41ea4e00-c0ff-11eb-88ca-a204cfcebe72.png]]
 
- (Lepton's design :arrow_up:)
+  (Lepton's Photon styled design :arrow_up:)
 
   - *Color*
     - Default light/dark theme contrast enhancement
@@ -39,7 +41,7 @@
     - Windows system theme support
     - Windows7 compatibility
   - *Icons*
-    - Panel
+    - Panel: like Photon
     - Context Menu
     - Global Menu
     - Library's open context
@@ -50,10 +52,15 @@
     - Density
     - Others...
   - *Tab Design*
+    - General:
+      - Connect with toolbar(Buttons like tabs): like Photon
+    - Selected:
+      - Context Line: like Photon
+      - Bottom Rounding: Natural
     - MultiSelected
       - Adjust Color: Easily recognizable.
     - Unselect:
-      - Divide Line: React to hover like chrome
+      - Divide Line: like Photon
     - Clipped:
       - Clearer Text: Adjusted clipped gradation
       - Closed Button: Visible on hover
@@ -61,7 +68,9 @@
       - Remove Second Label
       - Show Favicon: Always show favicon
     - Container Tab:
-      - Highlight line position: Displayed tab side.
+      - Highlight line position: Displayed under tab.
+  - *Button Design*
+    - New tab: like Photon
   - *Activity Stream Design*
     - Search Bar:
       - Focused Shadow: Same as the accent color
@@ -107,8 +116,8 @@
   4. Restart Firefox
      - Click the =Clear startup cache...= at the top of =about:support=
 
-  If you prefer Connected Tab, see [[https://github.com/black7375/Firefox-UI-Fix][Original Lepton]].\\
+  If you prefer Proton(89 or above), see [[https://github.com/black7375/Firefox-UI-Fix][Original Lepton]].\\
-  If you prefer Photon, see [[https://github.com/black7375/Firefox-UI-Fix/tree/photon-style][Lepton's photon-style]].
+  If you prefer Proton tab shape, see [[https://github.com/black7375/Firefox-UI-Fix/tree/proton-style][Lepton's proton-style]].
 
 ** WHY Proton?
    I think a lot has improved.
@@ -137,8 +146,8 @@
    - :warning: Address bar 3-point menu, screenshot moves to toolbar (can't fix)
 
 ** Padding Comparisons
-  [[https://user-images.githubusercontent.com/25581533/120262626-8c97d180-c289-11eb-87a6-68e285d6d77c.png]]
+  [[https://user-images.githubusercontent.com/25581533/120262929-38412180-c28a-11eb-8680-e278403873e4.png]]
-  [[https://user-images.githubusercontent.com/25581533/120253257-6ae11f00-c276-11eb-93cf-393f9845f30b.png]]
+  [[https://user-images.githubusercontent.com/25581533/120263320-0086a980-c28b-11eb-8b58-acde49dd80ee.png]]
   [[https://user-images.githubusercontent.com/25581533/118402352-1e33fc00-b659-11eb-89fc-3cb38207fe39.png]]
   [[https://user-images.githubusercontent.com/25581533/124066951-0eb21c00-da29-11eb-9ac4-c6b82a268c6f.png]]
 

arch-config/.mozilla/firefox/default-release/chrome/icons/tab-bottom-corner-left.svg

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg stroke-width="1.2" width="16" height="16" preserveAspectRatio="xMidYMid meet" viewBox="0 0 17 16" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
   <path d="M0 17 L0 16 A16 16 0 0 0 16 0 L 18 0 L 18 17 Z" fill="context-fill"></path>
-  <path d="M0 16 A16 16 0 0 0 16 0" stroke="context-stroke" fill="transparent"></path>
+  <path d="M0 16 A16 16 0 0 0 16 0" stroke="context-stroke" stroke-width="0.5" fill="transparent"></path>
 </svg>

arch-config/.mozilla/firefox/default-release/chrome/icons/tab-bottom-corner-right.svg

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg transform="scale(-1,1)" stroke-width="1.2" width="16" height="16" preserveAspectRatio="xMidYMid meet" viewBox="0 0 17 16" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
   <path d="M0 17 L0 16 A16 16 0 0 0 16 0 L 18 0 L 18 17 Z" fill="context-fill"></path>
-  <path d="M0 16 A16 16 0 0 0 16 0" stroke="context-stroke" fill="transparent"></path>
+  <path d="M0 16 A16 16 0 0 0 16 0" stroke="context-stroke" stroke-width="0.5" fill="transparent"></path>
 </svg>

arch-config/.mozilla/firefox/default-release/chrome/userChrome.css

@@ -368,7 +368,7 @@
     --card-shadow-hover: var(--card-shadow), 0 0 0 5px var(--card-outline-color);
   }
 
-  @media (-moz-toolbar-prefers-color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
     :host,
     :root {
       /* Keep these in sync with layout/base/PresShell.cpp, and plaintext.css */
@@ -502,7 +502,7 @@
       --menu-border-color: #cfcfd8;
       --menuitem-hover-background-color: #e0e0e6;
     }
-    @media (-moz-toolbar-prefers-color-scheme: dark) {
+    @media (prefers-color-scheme: dark) {
       :root {
         --menu-border-color: rgba(107, 107, 107, 0.3);
         --menu-color: #fbfbfe;
@@ -560,7 +560,7 @@
   /*= Downloads ==============================================================*/
   @-moz-document url("chrome://mozapps/content/downloads/unknownContentType.xhtml")
   {
-    @media (-moz-toolbar-prefers-color-scheme: dark) {
+    @media (prefers-color-scheme: dark) {
       :root {
         --in-content-page-background: #42414d;
       }
@@ -612,7 +612,7 @@
     button:-moz-focusring,
     xul|menulist:-moz-focusring,
     xul|checkbox:-moz-focusring > .checkbox-check, /* :not([native]) to win specificity over checkbox.css */
-    xul|radio[focused="true"] {
+    xul|radio[focused="true"]:-moz-focusring {
       box-shadow: none !important;
       outline: 2px solid var(--in-content-focus-outline-color) !important;
       outline-offset: 2px !important;
@@ -890,7 +890,7 @@
     }
 
     dropmarker::part(icon) {
-      list-style-image: url(chrome://global/skin/icons/arrow-down.svg) !important;
+      list-style-image: url("chrome://global/skin/icons/arrow-down.svg") !important;
       -moz-context-properties: fill !important;
       fill: currentColor !important;
     }
@@ -1074,7 +1074,11 @@
   #downloadsListBox .downloadButton,
   #downloadsListBox .download-state[exists],
   #downloadsListBox .download-state[exists] .downloadDetails,
-  #downloadsHistory {
+  #downloadsHistory,
+  #protections-popup-settings-button,
+  #protections-popup-show-report-button,
+  #identity-popup-clear-sitedata-button,
+  #identity-popup-more-info {
     cursor: pointer !important;
   }
 
@@ -1089,6 +1093,9 @@
   /*= Root - Reduce Padding ==================================================*/
   :root {
     /* Tab Bar */
+    --proton-tab-block-margin: 0px !important; /* Original: 4px, Legacy */
+    --tab-block-margin: 0px !important; /* New version of --proton-tab-block-margin */
+    --tab-border-radius: 0px !important; /* Original: 4px */
     --inline-tab-padding: 6px !important; /* Original: 8px */
 
     /* Panel */
@@ -1116,7 +1123,25 @@
     --arrowpanel-menuitem-padding: 8px !important; /* Original: 8px */
   }
 
+  /* Fix Tab bar button radious */
+  #TabsToolbar .toolbarbutton-1 > .toolbarbutton-icon,
+  #TabsToolbar .toolbarbutton-1 > .toolbarbutton-text,
+  #TabsToolbar .toolbarbutton-1 > .toolbarbutton-badge-stack,
+  .tab-close-button {
+    --tab-border-radius: 4px !important;
+  }
+
   /*= Tab Bar - Reduce Width, Show more tabs =================================*/
+  /* for First Tab Space */
+  :root {
+    --space-left-tabbar: 0px; /* If you want drag space, set to 8px */
+  }
+  :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;
+  }
+
+  /* Titlebar Space */
   .titlebar-spacer[type="pre-tabs"] {
     width: 30px !important; /* Original: 40px */
   }
@@ -1124,6 +1149,7 @@
     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));
@@ -1141,7 +1167,7 @@
   #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs])
     > #tabbrowser-arrowscrollbox
     > .tabbrowser-tab[first-visible-unpinned-tab] {
-    margin-inline-start: 1px !important;
+    margin-inline-start: 0 !important;
   }
 
   :root:not([uidensity="touch"]) #tabbrowser-arrowscrollbox {
@@ -1164,16 +1190,12 @@
 
   /* Tab - Max Size */
   .tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]) {
-    max-width: 240px !important; /* Original: 225px */
+    max-width: 225px !important;
   }
 
   /* neighbouring tabs should "pinch" together */
   .tabbrowser-tab {
-    padding-inline: 1px !important;
+    padding-inline: 0 !important;
-  }
-
-  .tabbrowser-tab:not([last-visible-tab]) {
-    margin-inline-end: -0.5px !important;
   }
 
   /*= Tab Bar - Reduce Height, Show more contents ============================*/
@@ -1190,15 +1212,26 @@
   }
 
   /* Toolbar Height */
-  :root:not([uidensity="touch"]) #TabsToolbar {
+  #TabsToolbar {
-    --toolbarbutton-inner-padding: 9px; /* Original: calc((var(--tab-min-height) - 16px) / 2) = 10px */
+    --tab-min-height: 33px !important;
-  }
+    --toolbarbutton-inner-padding: unset !important;
-
-  :root:not([uidensity]) #TabsToolbar {
-    --tab-min-height: 36px !important; /* 38px -> 36px */
   }
   :root[uidensity="compact"] #TabsToolbar {
-    --tab-min-height: 29px !important; /* 36px -> 29px */
+    --tab-min-height: 29px !important;
+  }
+  :root[uidensity="touch"] #TabsToolbar {
+    --tab-min-height: 41px !important;
+  }
+  #tabbrowser-tabs,
+  #tabbrowser-arrowscrollbox,
+  #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] {
+    min-height: var(--tab-min-height) !important;
+  }
+
+  /* Top Margin */
+  .tab-background,
+  .tab-content {
+    margin-top: 0 !important;
   }
 
   /* Scroll Button - Size Fix */
@@ -1479,7 +1512,46 @@
     margin: 0 !important;
   }
 
-  /** Multi Selected Color - More Contrast ************************************/
+  /** Tab Bar - Connect to window *********************************************/
+  .tab-background {
+    border-radius: var(--tab-border-radius) var(--tab-border-radius) 0px 0px !important;
+    margin-bottom: 0px !important;
+  }
+
+  .tab-content {
+    margin-top: var(--tab-block-margin);
+  }
+
+  .tab-stack {
+    margin-top: 0px !important;
+    margin-bottom: 0px !important;
+  }
+
+  /* Remove line at Toolbar's top */
+  #tabbrowser-tabs {
+    z-index: 1 !important;
+  }
+  #tabbrowser-arrowscrollbox[overflowing] .tabbrowser-tab[pinned]:is([visuallyselected], [multiselected]) {
+    overflow: hidden;
+  }
+
+  /** Selected Tab - Color like toolbar ***************************************/
+  :root:not(:-moz-lwtheme) {
+    /* Fix for windows's system default theme. Using --toolbar-bgcolor fallback */
+    --tab-selected-bgcolor: unset !important; /* Original: rgb(255,255,255); */
+  }
+  #tabbrowser-tabs:not([movingtab])
+    > #tabbrowser-arrowscrollbox
+    > .tabbrowser-tab
+    > .tab-stack
+    > .tab-background[selected="true"]:-moz-lwtheme {
+    /* Original: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none)
+ */
+    background-image: linear-gradient(transparent, transparent),
+      linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) !important;
+  }
+
+  /* Multi Selected Color */
   #tabbrowser-tabs:not([movingtab])
     > #tabbrowser-arrowscrollbox
     > .tabbrowser-tab
@@ -1499,73 +1571,134 @@
     opacity: 0.15;
   }
 
+  /** Selected Tab - Photon like contextline **********************************/
+  :root[lwtheme-mozlightdark] #tabbrowser-tabs {
+    --tab-line-color: rgb(10, 132, 255) !important;
+  }
+  @media (-moz-gtk-csd-available) {
+    :root[lwtheme-mozlightdark]:not(:-moz-lwtheme) #tabbrowser-tabs {
+      --tab-line-color: Highlight !important; /* -moz-accent-color */
+    }
+  }
+
+  .tab-context-line {
+    display: -moz-inline-box !important;
+    height: 2px !important;
+    border-radius: var(--tab-border-radius, 4px) var(--tab-border-radius, 4px) 0 0 !important;
+  }
+
+  .tabbrowser-tab:is([selected], [multiselected]) .tab-context-line {
+    /* Photon like color
+       Default: var(--tab-line-color, rgb(10, 132, 255))
+       Automatic: color-mix(in srgb, var(--button-primary-bgcolor) 80%, transparent) */
+    background-color: var(--tab-line-color, rgb(10, 132, 255)) !important;
+  }
+
+  .tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background > .tab-context-line {
+    background-color: rgba(0, 0, 0, 0.2) !important;
+    opacity: 1 !important;
+    transform: none !important;
+  }
+  #TabsToolbar[brighttext]
+    .tabbrowser-tab:hover:not([selected="true"], [multiselected])
+    > .tab-stack
+    > .tab-background
+    > .tab-context-line {
+    background-color: rgba(255, 255, 255, 0.2) !important;
+  }
+
+  /* Prevent identitiy color flashing */
+  .tabbrowser-tab[usercontextid] .tab-context-line {
+    --identity-icon-color: none;
+  }
+  :root:not([customizing="true"]) #TabsToolbar[brighttext] tab[visuallyselected] > stack::before,
+  :root:not([customizing="true"]) #TabsToolbar[brighttext] tab[visuallyselected] > stack::after {
+    /* As Selected Tab - Box Shadow */
+    stroke: var(--toolbar-color) !important;
+  }
+
+  /* Animation */
+  .tabbrowser-tab:not([selected="true"], [multiselected]) .tab-context-line {
+    opacity: 0 !important;
+    transform: scaleX(0) !important;
+  }
+  .tabbrowser-tab:not([selected="true"], [multiselected]) .tab-context-line {
+    transition: transform 250ms var(--animation-easing-function), opacity 250ms var(--animation-easing-function) !important; /* --animation-easing-function: cubic-bezier(.07, .95, 0, 1); */
+  }
+
+  /* Remove side's background color border */
+  #TabsToolbar[brighttext]
+    #tabbrowser-tabs:not([noshadowfortests])
+    .tabbrowser-tab:is([visuallyselected="true"], [multiselected])
+    > .tab-stack
+    > .tab-background:-moz-lwtheme {
+    --tabs-border-color: rgba(0, 0, 0, 0.3) !important;
+    box-shadow: 0 0 1px var(--tabs-border-color) !important; /* Original: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)) */
+  }
+  #TabsToolbar:not([brighttext])
+    #tabbrowser-tabs:not([noshadowfortests])
+    .tabbrowser-tab:is([visuallyselected="true"], [multiselected])
+    > .tab-stack
+    > .tab-background {
+    box-shadow: 0 0 1px var(--tabs-border-color), 0 0 4px rgba(128, 128, 142, 0.5) !important; /* Original: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)), 0 0 4px rgba(128,128,142,0.5) */
+  }
+
+  /* Container Tab */
+  .tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
+    margin: unset !important;
+  }
+
   /** Unselected Tab - Divide line ********************************************/
-  #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab[first-visible-unpinned-tab] .tab-background::before,
+  .tabbrowser-tab[first-visible-tab]::before,
-  .tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-child) .tab-background::before,
+  .tabbrowser-tab::after,
-  #tabbrowser-arrowscrollbox:not([overflowing])
+  #tabbrowser-tabs[movingtab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[visuallyselected]::before {
-    .tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab]
-    .tab-background::after {
-    /* Box Model */
     content: "";
     display: block;
-    position: absolute;
+  }
-    top: 50%;
+  .tabbrowser-tab::before,
-
+  .tabbrowser-tab::after {
-    /* Bar shape */
+    --tab-divide-line: 1px solid var(--lwt-background-tab-separator-color, currentColor);
-    width: 1px;
+    border-left: var(--tab-divide-line) !important;
-    height: 20px;
+    margin-block: 5px 4px !important;
-
+    opacity: 0.3 !important;
-    /* Bar Color */
+  }
-    opacity: var(--tab-separator-opacity);
+  .tabbrowser-tab::before {
-    transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */
+    margin-inline-start: -1px !important;
-    background-color: color-mix(
-      in srgb,
-      currentColor 20%,
-      transparent
-    ) !important; /*  Replace var(--toolbarseparator-color) - Hard coded for compatibility */
   }
 
-  .tab-background::before {
+  .tabbrowser-tab[first-visible-tab]::before,
-    transform: translateX(-2.5px) translateY(calc(-50% + 1px)) !important;
+  :root[tabsintitlebar]:not([extradragspace]) #toolbar-menubar[autohide="true"] + #TabsToolbar .tabbrowser-tab::after,
-  }
+  .tabbrowser-tab:hover::after,
-  .tabbrowser-tab[last-visible-tab] .tab-background::after {
+  #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[beforehovered]::after,
-    right: 0;
+  .tabbrowser-tab[multiselected]::after,
-    transform: translateX(1.5px) translateY(calc(-50% + 1px)) !important;
+  #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[before-multiselected]::after {
-  }
+    margin-top: var(--tabs-top-border-width) !important;
-  #tabs-newtab-button:is(:hover, [open])::before {
+    margin-bottom: 0 !important;
-    content: "";
-    position: absolute;
   }
 
-  #navigator-toolbox:not([movingtab])
+  /* Selected - Hide */
-    .tabbrowser-tab:is([visuallyselected], [multiselected], :hover)
+  .tabbrowser-tab[first-visible-tab][visuallyselected]::before,
-    + .tabbrowser-tab:not([visuallyselected])
+  #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[beforeselected-visible]::after,
-    .tab-background::before,
+  #tabbrowser-tabs[movingtab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[visuallyselected]::before,
-  #navigator-toolbox:not([movingtab])
+  .tabbrowser-tab[visuallyselected]::after {
-    .tabbrowser-tab[first-visible-unpinned-tab]:is([visuallyselected], [multiselected], :hover)
+    border-color: var(--tabs-border-color) !important;
-    .tab-background::before,
+    margin-top: 0 !important;
-  #navigator-toolbox:not([movingtab])
+    margin-bottom: 0 !important;
-    #tabbrowser-arrowscrollbox[overflowing]
+    opacity: 1 !important;
-    tab.tabbrowser-tab[first-visible-unpinned-tab]
-    .tab-background::before {
-    opacity: 0 !important;
   }
 
-  /* Latest Tab & New tab margin */
+  /** New tab button - Smaller button *****************************************/
-  #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab[last-visible-tab] {
+  #tabs-newtab-button > .toolbarbutton-icon {
-    margin-inline-end: 1px !important;
+    margin-left: 1px;
-  }
 
-  /* New tab button - Smaller button ******************************************/
+    /* Origianl: calc((var(--tab-min-height) - 16px) / 2) = 10px */
-  :root:not([uidensity="touch"]) #tabs-newtab-button > .toolbarbutton-icon {
+    --toolbarbutton-inner-padding: 6px;
-    --toolbarbutton-inner-padding: calc((var(--tab-min-height) - 16px) / 2 - 1px);
-  }
-
-  :root:not([uidensity="compact"]) #tabs-newtab-button > .toolbarbutton-icon {
-    margin-left: 2px;
   }
   :root[uidensity="compact"] #tabs-newtab-button > .toolbarbutton-icon {
-    margin-left: 1px;
+    --toolbarbutton-inner-padding: 4px; /* Photon: 6px */
+  }
+  :root[uidensity="touch"] #tabs-newtab-button > .toolbarbutton-icon {
+    --toolbarbutton-inner-padding: 9px; /* Photon: 9px */
   }
 
   /** Clipped tabs - Letters cleary *******************************************/
@@ -1657,9 +1790,10 @@
   .tab-icon-overlay:not([crashed]),
   .tab-icon-overlay[pinned][crashed][selected] {
     /* Position */
-    top: -3.5px !important;
+    top: 0 !important;
     inset-inline-end: -9px !important;
     z-index: 1 !important;
+    transform: translateX(-0.5px) translateY(-6px);
 
     /* Shape */
     padding: 1.5px !important;
@@ -1684,7 +1818,7 @@
 
   /* None exist favicon - Size bigger */
   .tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing], [crashed]) {
-    top: 0 !important;
+    transform: translateX(-0.5px) translateY(-1px);
     inset-inline-end: 0 !important;
     margin-inline-end: 5.5px !important;
     padding: 0 !important;
@@ -1701,10 +1835,9 @@
 
   /* Busy - Overlay Position */
   .tabbrowser-tab:not([pinned])[busy] .tab-icon-overlay:is([soundplaying], [muted], [activemedia-blocked]) {
-    transform: translateX(-0.5px) translateY(-2.5px);
+    transform: translateX(-0.5px) translateY(-6px);
   }
   .tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing], [crashed])[busy] {
-    top: -3.5px !important;
     inset-inline-end: -9px !important;
     margin-inline-end: 9.5px !important;
     padding: 1.5px !important;
@@ -1771,10 +1904,6 @@
   }
 
   /** Container Tab - Color line at icon's bottom *****************************/
-  .tab-context-line {
-    display: none;
-  }
-
   .tab-content:not([titlechanged])::before {
     /* Box Model */
     content: "";
@@ -1782,7 +1911,7 @@
     position: absolute !important;
 
     /* Shape */
-    border-bottom: 2px solid var(--identity-icon-color);
+    border-bottom: 2px solid color-mix(in srgb, var(--identity-icon-color) 75%, transparent);
     width: 25%;
 
     /* Animate */
@@ -1791,6 +1920,7 @@
   }
   .tabbrowser-tab[visuallyselected]:not([pinned]) .tab-content::before {
     width: calc(100% - 30px);
+    border-color: var(--identity-icon-color);
   }
   #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab[visuallyselected]:not([pinned]) .tab-content::before {
     width: calc(100% - 33px);
@@ -1991,6 +2121,30 @@
   :root {
     --arrowpanel-menublank-padding: calc(var(--arrowpanel-menuicon-padding) * 2 + 8px) !important;
     --arrowpanel-menuimageblank-padding: calc(var(--arrowpanel-menuitem-padding) - 2px) !important;
+
+    /* Blank Menu Left Padding */
+    --arrowpanel-menuimageblank-padding-horizontal: calc(var(--arrowpanel-menublank-padding) - 3px);
+    --arrowpanel-menuitemblank-padding: calc(var(--arrowpanel-menuitem-padding) + 1px);
+  }
+  :root[uidensity="compact"] {
+    --arrowpanel-menuimageblank-padding-horizontal: calc(var(--arrowpanel-menublank-padding) - 5px);
+  }
+  :root[uidensity="touch"] {
+    --arrowpanel-menuimageblank-padding-horizontal: calc(var(--arrowpanel-menublank-padding));
+  }
+  :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) - 2px) !important;
+
+    /* Blank Menu Left Padding */
+    --arrowpanel-menuimageblank-padding-horizontal: calc(
+      var(--arrowpanel-menuicon-paddingx2) + var(--arrowpanel-menuitem-padding)
+    );
+    --arrowpanel-menuitemblank-padding: calc(var(--arrowpanel-menuitem-padding) + 1px);
   }
 
   #downloadsHistory .button-text,
@@ -2085,9 +2239,22 @@
     background-image: var(--avatar-image-url) !important;
   }
 
-  #appMenu-new-tab-button2 {
+  #appMenu-new-tab-button2,           /* Seperate */
-    list-style-image: url("chrome://browser/skin/new-tab.svg");
+  #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-inline-start: var(--arrowpanel-menuimageblank-padding-horizontal) !important;
+    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;
+  }
+
   #appMenu-new-window-button2 {
     list-style-image: url("chrome://browser/skin/window.svg");
   }
@@ -2104,39 +2271,14 @@
   #appMenu-downloads-button {
     list-style-image: url("chrome://browser/skin/downloads/downloads.svg");
   }
-  #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");
   }
-  #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");
   }
-  #appMenu-more-button2 {
-    list-style-image: url("chrome://browser/skin/ion.svg");
-  }
-  #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,
@@ -2750,7 +2892,8 @@
   }
 
   /*= new-tab-button-popup ===================================================*/
-  #new-tab-button-popup > menuitem[command="Browser:OpenAboutContainers"] {
+  #new-tab-button-popup > menuitem[command="Browser:OpenAboutContainers"],
+  .new-tab-popup > menuitem[command="Browser:OpenAboutContainers"] {
     --menuitem-image: url("chrome://global/skin/icons/settings.svg");
   }
 
@@ -3167,8 +3310,7 @@
     --menuitem-image: url("chrome://browser/skin/bookmark-star-on-tray.svg");
   }
 
-  menupopup[context="placesContext"] > .openintabs-menuitem,
+  .openintabs-menuitem {
-  menuitem.openintabs-menuitem.subviewbutton {
     --menuitem-image: url("./icons/movetowindow-16.svg");
   }
 
@@ -3322,6 +3464,37 @@
     --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("chrome://global/skin/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("chrome://browser/skin/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");
+  }
+
   /** Global Menu *************************************************************/
   /*= main-menubar ===========================================================*/
   #file-menu {
@@ -3376,13 +3549,13 @@
     --menuitem-image: url("chrome://browser/skin/save.svg");
   }
   #menu_sendLink {
-    --menuitem-image: url(chrome://browser/skin/mail.svg);
+    --menuitem-image: url("chrome://browser/skin/mail.svg");
   }
 
   #menu_printPreview {
   }
   #menu_print {
-    --menuitem-image: url(chrome://global/skin/icons/print.svg);
+    --menuitem-image: url("chrome://global/skin/icons/print.svg");
   }
 
   #menu_importFromAnotherBrowser {
@@ -3554,7 +3727,8 @@
   #sync-reauthitem {
   }
 
-  #webDeveloperMenu {
+  #webDeveloperMenu, /* Legacy */
+  #browserToolsMenu {
     --menuitem-image: url("chrome://browser/skin/developer.svg");
   }
   #menu_pageInfo {

arch-config/.mozilla/firefox/default-release/chrome/userContent.css

@@ -14,6 +14,9 @@
         0.5
       ) !important; /* Original: #B5D3FF, Better color-mix(in srgb, #B5D3FF 70%, transparent) */
       --newtab-focus-border-selected: rgba(0, 221, 255, 0.5) !important; /* Original: #B5D3FF */
+
+      /* For Nightly */
+      --newtab-primary-action-background: var(--newtab-focus-border) !important;
     }
 
     /** Activity Stream - Web Site Icon: full size ****************************/
@@ -37,7 +40,7 @@
       --newtab-element-hover-color: color-mix(in srgb, currentColor 9%, transparent) !important;
     }
 
-    @media (-moz-toolbar-prefers-color-scheme: dark) {
+    @media (prefers-color-scheme: dark) {
       #root {
         /* Default Dark Mode */
         --newtab-search-background-color: rgba(66, 65, 77, 1); /* Same as dark theme's --panel-background */
@@ -70,7 +73,7 @@
     }
 
     #contentSearchSettingsButton::before {
-      content: url(chrome://global/skin/icons/settings.svg) !important;
+      content: url("chrome://global/skin/icons/settings.svg") !important;
       display: -moz-inline-box;
 
       /* Color */
@@ -87,12 +90,40 @@
     #contentSearchSettingsButton {
       cursor: pointer;
     }
+
+    /*- Fix Color For Nightly ------------------------------------------------*/
+    .contentSearchSuggestionTable,
+    .contentSearchHeaderRow,
+    .contentSearchHeader {
+      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;
+    }
   }
 
   /** Error Page - Restore illustrations **************************************/
   @-moz-document url-prefix("about:neterror"),
   url("about:restartrequired"), url("chrome://browser/content/aboutRestartRequired.xhtml"),
-  url("about:sessionrestore"),  url(chrome://browser/content/aboutSessionRestore.xhtml)
+  url("about:sessionrestore"),  url("chrome://browser/content/aboutSessionRestore.xhtml")
   {
     /* Illustrations Position */
     #errorPageContainer,
@@ -153,7 +184,7 @@
     }
   }
 
-  @-moz-document url("about:sessionrestore"), url(chrome://browser/content/aboutSessionRestore.xhtml)
+  @-moz-document url("about:sessionrestore"), url("chrome://browser/content/aboutSessionRestore.xhtml")
   {
     .description-wrapper {
       background-image: url("./icons/error-session-restore.svg");
@@ -303,7 +334,7 @@
     --card-shadow-hover: var(--card-shadow), 0 0 0 5px var(--card-outline-color);
   }
 
-  @media (-moz-toolbar-prefers-color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
     :host,
     :root {
       /* Keep these in sync with layout/base/PresShell.cpp, and plaintext.css */

arch-config/.mozilla/firefox/default-release/user.js

@@ -11,6 +11,9 @@ user_pref("browser.proton.places-tooltip.enabled", true);
 // Fill SVG Color
 user_pref("svg.context-properties.content.enabled", true);
 
+// CSS Color Mix - 88 Above
+user_pref("layout.css.color-mix.enabled", true);
+
 // CSS Blur Filter - 88 Above
 user_pref("layout.css.backdrop-filter.enabled", true);