Merge branch 'master' into photon-style

2026-03-15 03:11:00 -07:00 · 2021-09-13 11:48:45 +09:00 · 2021-09-13 11:48:45 +09:00 · 237cc22202
commit 237cc22202
parent 5296cc2d54 13a40d2932
11 changed files with 387 additions and 134 deletions
--- a/.github/ISSUE_TEMPLATE/feature_request.md
+++ b/.github/ISSUE_TEMPLATE/feature_request.md
@ -7,14 +7,14 @@ assignees: ''

 ---

-**Is your feature request related to a problem? Please describe.**
-A clear and concise description of what the problem is. Ex. I don't like this design that [...]
+**Is your feature request related to a problem?**
+<!-- A clear and concise description of what the problem is. Ex. I don't like this design that [...] -->

-**Describe the solution you'd like**
-A clear and concise description of what you want to happen.
+**The solution I'd like**
+<!-- A clear and concise description of what you want to happen. -->

-**Describe alternatives you've considered**
-A clear and concise description of any alternative solutions or features you've considered.
+**Alternatives I've considered**
+<!-- A clear and concise description of any alternative solutions or features you've considered. -->

 **Additional context**
-Add any other context or screenshots about the feature request here.
+<!-- Add any other context or screenshots about the feature request here. -->
--- a/.github/workflows/format.yml
+++ b/.github/workflows/format.yml
@ -17,14 +17,11 @@ jobs:
    steps:
      - name: Checkout
        uses: actions/checkout@v2
-        with:
-          # Make sure the actual branch is checked out when running on pull requests
-          ref: ${{ github.head_ref }}

      - name: Prettify code
        uses: creyD/prettier_action@v3.3
        with:
          # This part is also where you can pass other options, for example:
-          prettier_options: --write **/*.{css}
+          prettier_options: --write .
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@ -13,7 +13,7 @@ jobs:
            branch: "master"
          - name: "Lepton-Photon-Style"
            branch: "photon-style"
-          - name: "Lepton-Prton-Style"
+          - name: "Lepton-Proton-Style"
            branch: "proton-style"
    steps:
      - uses: actions/checkout@v2
@ -29,7 +29,7 @@ jobs:
          BRANCH=${{ matrix.branch }}
          TAGVER=${GITHUB_REF#refs/*/}

-          echo -e "\[Info\]\nVer=${TAGVER}\nBranch=${BRANCH}" > LEPTON
+          echo -e "[Info]\nVer=${TAGVER}\nBranch=${BRANCH}" > LEPTON

      - name: Release Structure
        run: |
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@ -9,6 +9,9 @@
  - [Environment](#environment)
  - [Your First Contribution](#your-first-contribution)
  - [Contribution Targets](#contribution-targets)
+  - [Project Structure](#project-structure)
+    - [Icon files](#icon-files)
+    - [Meta Info files](#meta-info-files)
 - [Rules](#rules)
  - [Version](#version)
  - [Branch](#branch)
@ -18,7 +21,7 @@
  - [Commit Message](#commit-message)
  - [Pull request](#pull-request)
  - [License](#license)
-  - [References](#references)
+- [References](#references)

 <!-- markdown-toc end -->

@ -46,7 +49,7 @@ You can configure it as follows:
 git clone https://github.com/black7375/Firefox-UI-Fix.git
 cd ./Firefox-UI-Fix

-## install dependencies
+## checkout branch
 git checkout <BRANCH_NAME>
 ```

@ -61,6 +64,7 @@ The following documents may be helpful:
 - [Wiki:Tips](https://github.com/black7375/Firefox-UI-Fix/wiki/Tips)

 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)

@ -104,6 +108,65 @@ We love your input! We want to make contributing to this project as easy and tra
 - 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
+
 ## Rules

 ### Version
@ -113,6 +176,8 @@ Milestone, The versioning scheme we use is [SemVer](https://semver.org/). (Maint
 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.
@ -136,7 +201,7 @@ Development: New Features.
 ### Coding style

 - **Indent:** 2 spaces for indentation rather than tabs.
- **Columns:** Fit `80`~`100` columns as much as possible.
+- **Columns:** Fit `80`~`100` columns as much as possible. (Auto formatting is using 120 to avoid the worst case)

 ### Commit

--- a/icons/pin-tab.svg
+++ b/icons/pin-tab.svg
@ -1,6 +1,6 @@
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M14.707 13.293L11.414 10l2.293-2.293a1 1 0 0 0 0-1.414A4.384 4.384 0 0 0 10.586 5h-.172A2.415 2.415 0 0 1 8 2.586V2a1 1 0 0 0-1.707-.707l-5 5A1 1 0 0 0 2 8h.586A2.415 2.415 0 0 1 5 10.414v.169a4.036 4.036 0 0 0 1.337 3.166 1 1 0 0 0 1.37-.042L10 11.414l3.293 3.293a1 1 0 0 0 1.414-1.414zm-7.578-1.837A2.684 2.684 0 0 1 7 10.583v-.169a4.386 4.386 0 0 0-1.292-3.121 4.414 4.414 0 0 0-1.572-1.015l2.143-2.142a4.4 4.4 0 0 0 1.013 1.571A4.384 4.384 0 0 0 10.414 7h.172a2.4 2.4 0 0 1 .848.152z"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity" >
+  <path d="M14.707 13.293L11.414 10l2.293-2.293a1 1 0 0 0 0-1.414A4.384 4.384 0 0 0 10.586 5h-.172A2.415 2.415 0 0 1 8 2.586V2a1 1 0 0 0-1.707-.707l-5 5A1 1 0 0 0 2 8h.586A2.415 2.415 0 0 1 5 10.414v.169a4.036 4.036 0 0 0 1.337 3.166 1 1 0 0 0 1.37-.042L10 11.414l3.293 3.293a1 1 0 0 0 1.414-1.414zm-7.578-1.837A2.684 2.684 0 0 1 7 10.583v-.169a4.386 4.386 0 0 0-1.292-3.121 4.414 4.414 0 0 0-1.572-1.015l2.143-2.142a4.4 4.4 0 0 0 1.013 1.571A4.384 4.384 0 0 0 10.414 7h.172a2.4 2.4 0 0 1 .848.152z"/>
+</svg>
--- a/icons/unpin-tab.svg
+++ b/icons/unpin-tab.svg
@ -1,6 +1,6 @@
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M11.414 10l2.293-2.293a1 1 0 0 0 0-1.414 4.418 4.418 0 0 0-.8-.622L11.425 7.15h.008l-4.3 4.3v-.017l-1.48 1.476a3.865 3.865 0 0 0 .692.834 1 1 0 0 0 1.37-.042L10 11.414l3.293 3.293a1 1 0 0 0 1.414-1.414zm3.293-8.707a1 1 0 0 0-1.414 0L9.7 4.882A2.382 2.382 0 0 1 8 2.586V2a1 1 0 0 0-1.707-.707l-5 5A1 1 0 0 0 2 8h.586a2.382 2.382 0 0 1 2.3 1.7l-3.593 3.593a1 1 0 1 0 1.414 1.414l12-12a1 1 0 0 0 0-1.414zm-9 6a4.414 4.414 0 0 0-1.571-1.015l2.143-2.142a4.4 4.4 0 0 0 1.013 1.571 4.191 4.191 0 0 0 .9.684l-1.8 1.8a4.2 4.2 0 0 0-.684-.898z"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M11.414 10l2.293-2.293a1 1 0 0 0 0-1.414 4.418 4.418 0 0 0-.8-.622L11.425 7.15h.008l-4.3 4.3v-.017l-1.48 1.476a3.865 3.865 0 0 0 .692.834 1 1 0 0 0 1.37-.042L10 11.414l3.293 3.293a1 1 0 0 0 1.414-1.414zm3.293-8.707a1 1 0 0 0-1.414 0L9.7 4.882A2.382 2.382 0 0 1 8 2.586V2a1 1 0 0 0-1.707-.707l-5 5A1 1 0 0 0 2 8h.586a2.382 2.382 0 0 1 2.3 1.7l-3.593 3.593a1 1 0 1 0 1.414 1.414l12-12a1 1 0 0 0 0-1.414zm-9 6a4.414 4.414 0 0 0-1.571-1.015l2.143-2.142a4.4 4.4 0 0 0 1.013 1.571 4.191 4.191 0 0 0 .9.684l-1.8 1.8a4.2 4.2 0 0 0-.684-.898z"/>
+</svg>
--- a/install.ps1
+++ b/install.ps1
@ -138,8 +138,8 @@ function Copy-Auto() {
  }

  if ( Test-Path -Path "${target}" ) {
-    Write-Host "${target} alreay exist."
-    Write-Host "Now Backup.."
+    Write-Host "${target} already exists."
+    Write-Host "Now making a backup.."
    Copy-Auto "${target}" "${target}.bak"
    Remove-Item "${target}" -Recurse -Force
    Write-Host ""
@ -162,8 +162,8 @@ function Move-Auto() {
  }

  if ( Test-Path -Path "${target}" ) {
-    Write-Host "${target} alreay exist."
-    Write-Host "Now Backup.."
+    Write-Host "${target} already exists."
+    Write-Host "Now making a backup.."
    Move-Auto "${target}" "${target}.bak"
    Write-Host ""
  }
--- a/install.sh
+++ b/install.sh
@ -123,8 +123,8 @@ autocp() {
  fi

  if [ -e "${target}" ]; then
-    echo "${target} alreay exist."
-    echo "Now Backup.."
+    echo "${target} already exists."
+    echo "Now making a backup.."
    autocp "${target}" "${target}.bak"
    rm -rf "${target}"
    echo ""
@ -143,8 +143,8 @@ automv() {
  fi

  if [ -e "${target}" ]; then
-    echo "${target} alreay exist."
-    echo "Now Backup.."
+    echo "${target} already exists."
+    echo "Now making a backup.."
    automv "${target}" "${target}.bak"
    echo ""
  fi
--- a/user.js
+++ b/user.js
@ -5,6 +5,9 @@ user_pref("toolkit.legacyUserProfileCustomizations.stylesheets", true);
 // Proton Enabled #127
 user_pref("browser.proton.enabled", true);

+// Proton Tooltip
+user_pref("browser.proton.places-tooltip.enabled", true);
+
 // Fill SVG Color
 user_pref("svg.context-properties.content.enabled", true);

--- a/userChrome.css
+++ b/userChrome.css
@ -1,3 +1,6 @@
+@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+@namespace html url("http://www.w3.org/1999/xhtml");
+
@media (-moz-proton) {
  /** Default Thme - Contrast *************************************************/
  /*= Lightmode - Color darker ===============================================*/
@ -26,7 +29,7 @@

  /*= Identity Poup Icon Crop ================================================*/
  .identity-popup-security-connection.identity-button {
-    padding-block: 1px;
+    padding-block: 1px !important;
  }

  /*= Zoom in button's plus icon horizontal rate =============================*/
@ -70,7 +73,8 @@
    --tabs-border-color: rgba(0, 0, 0, 0.3);
  }

-  /** Windows 7, 8 - Compatibility ********************************************/
+  /** OS - Compatibility ******************************************************/
+  /*= Windows 7, 8 - Tab Bar Background ***************************************/
  @media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8) {
    /* Header Color */
    :root:not([lwtheme-image]) #navigator-toolbox:-moz-lwtheme {
@ -89,6 +93,33 @@
    }
  }

+  /*= Windows 7, 8 - Menu Active Color =======================================*/
+  @media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8) {
+    menupopup > menu,
+    menupopup > menuitem {
+      border: 1px solid transparent;
+    }
+    menu[_moz-menuactive="true"],
+    menuitem[_moz-menuactive="true"] {
+      background-color: color-mix(in srgb, -moz-menuhover 5%, transparent);
+      border-color: color-mix(in srgb, -moz-menuhover 60%, transparent);
+    }
+    menu[_moz-menuactive="true"][disabled="disabled"],
+    menuitem[_moz-menuactive="true"][disabled="true"] {
+      background-color: transparent;
+      border-color: transparent;
+    }
+  }
+
+  /*= Linux- Global Menubar Active Color =====================================*/
+  @media (-moz-gtk-csd-available) {
+    #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 */
+    }
+  }
+
  /** System Default Theme ****************************************************/
  /*= Common - URL Bar focus color ===========================================*/
  @media (-moz-windows-accent-color-in-titlebar), (-moz-gtk-csd-available) {
@ -534,15 +565,16 @@
  }

  /* File moved or missing */
-  #downloadsListBox .download-state:not([exists]) .downloadTarget {
+  #downloadsListBox .download-state:not([exists], [state="0"]) .downloadTarget {
    text-decoration: line-through;
    text-decoration-color: color-mix(in srgb, currentColor 65%, transparent);
  }
-  #downloadsListBox .download-state:not([exists]) .downloadTypeIcon {
+  #downloadsListBox .download-state:not([exists], [state="0"]) .downloadTypeIcon {
    filter: grayscale(100%) !important;
  }

  /*= Cursor Types ===========================================================*/
+  #appMenu-fxa-status2:not([fxastatus]) > #appMenu-fxa-label2,
  #appMenu-zoomReduce-button2,
  #appMenu-zoomReset-button2,
  #appMenu-zoomEnlarge-button2,
@ -557,6 +589,7 @@
  #BMB_bookmarksShowAll,
  #import-button,
  menuitem.openintabs-menuitem,
+  #downloadsListBox .downloadButton,
  #downloadsListBox .download-state[exists],
  #downloadsListBox .download-state[exists] .downloadDetails,
  #downloadsHistory {
@ -669,6 +702,18 @@
  }

  /*= Tab Bar - Reduce Height, Show more contents ============================*/
+  /* for Extra Drag Space */
+  :root {
+    --space-above-tabbar: 0px; /* If you want drag space, set to 8px */
+  }
+  :root[tabsintitlebar][sizemode="normal"] #toolbar-menubar[autohide="true"] {
+    height: calc(var(--tab-min-height) + var(--space-above-tabbar));
+  }
+  :root[sizemode="normal"][chromehidden~="menubar"] #TabsToolbar > .toolbar-items,
+  :root[sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar > .toolbar-items {
+    padding-top: var(--space-above-tabbar) !important;
+  }
+
  /* Toolbar Height */
  #TabsToolbar {
    --tab-min-height: 33px !important;
@ -719,16 +764,10 @@
  }

  /* Pinned Tab - Titlechanged Indicator position fix */
-  :root:not([uidensity="touch"])
-    .tabbrowser-tab:is([image], [pinned])
-    > .tab-stack
-    > .tab-content[attention]:not([selected="true"]),
-  :root:not([uidensity="touch"])
-    .tabbrowser-tab
-    > .tab-stack
-    > .tab-content[pinned][titlechanged]:not([selected="true"]) {
+  .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
+  .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
    /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */
-    background-position-y: bottom calc(4.5px + var(--tabs-navbar-shadow-size)) !important;
+    background-position-y: bottom calc(2.5px + var(--tabs-navbar-shadow-size)) !important;
  }
  :root[uidensity="compact"]
    .tabbrowser-tab:is([image], [pinned])
@ -738,27 +777,39 @@
    /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */
    background-position-y: bottom calc(0.5px + var(--tabs-navbar-shadow-size)) !important;
  }
+  :root[uidensity="touch"]
+    .tabbrowser-tab:is([image], [pinned])
+    > .tab-stack
+    > .tab-content[attention]:not([selected="true"]),
+  :root[uidensity="touch"] .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
+    /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */
+    background-position-y: bottom calc(4.5px + var(--tabs-navbar-shadow-size)) !important;
+  }

  /*= URL Bar - Reduce Padding ===============================================*/
  :root:not([uidensity="touch"]) #urlbar-container,
-  #search-container {
-    padding-block: 2px; /* Original: 4px */
-    margin-inline: 5px; /* Original: 5px */
+  :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; /* Original: 2px */
+    padding-block: 1px !important; /* Original: 2px */
  }
  :root[uidensity="compact"] .urlbarView-row {
-    padding-block: 0px;
+    padding-block: 0px !important;
  }

  :root:not([uidensity]) #urlbar .search-one-offs:not([hidden]) {
-    padding-block: 8px; /* Original: 10px */
+    padding-block: 8px !important; /* Original: 10px */
  }
  :root[uidensity="compact"] #urlbar .search-one-offs:not([hidden]) {
-    padding-block: 2px;
+    padding-block: 2px !important;
  }

  /*= BookMark Bar - Reduce Height ===========================================*/
@ -854,25 +905,39 @@

  /*= Bookmark Menu - Reduce Padding =========================================*/
  :root {
-    --bookmark-menu-padding: 0.2em;
-    --bookmark-seperator-margin: 1px 0.5em;
+    --bookmark-menu-padding: 3px;
  }
  :root[uidensity="compact"] {
-    --bookmark-menu-padding: 1px;
-    --bookmark-seperator-margin: 0px 0.5em;
+    --bookmark-menu-padding: 1.5px;
  }

-  :root:not([uidensity="touch"]) menupopup > menuitem.bookmark-item,
-  :root:not([uidensity="touch"]) menupopup > menuitem.openintabs-menuitem {
+  :root:not([uidensity="touch"]) #BMB_bookmarksPopup .subviewbutton,
+  :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;
  }
-  :root:not([uidensity="touch"]) menupopup > .bookmarks-actions-menuseparator {
-    margin: var(--bookmark-seperator-margin) !important;
-  }

  /*= Global Menu - Set Padding ==============================================*/
+  /* Prevent layout shifts */
+  @media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8), (-moz-os-version: windows-win10) {
+    #toolbar-menubar {
+      display: flex !important;
+      flex-direction: row;
+      justify-content: space-between;
+    }
+    #toolbar-menubar > spacer {
+      order: 1000; /* as Original's -moz-box-ordinal-group: 1000 */
+      flex: 1; /* Fill row */
+    }
+    #toolbar-menubar > .titlebar-buttonbox-container {
+      order: 1000; /* as Original's -moz-box-ordinal-group: 1000 */
+    }
+  }
+
  /* Vertical Align - Center & Height: 100%  */
-  #menubar-items {
+  #menubar-items,
+  #main-menubar {
    display: flex !important;
  }

@ -1165,8 +1230,19 @@
    display: -moz-inline-box !important;
  }

-  #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([visuallyselected], :hover) .tab-close-button {
+  #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([visuallyselected]) .tab-close-button {
    visibility: collapse !important;
+    opacity: 0;
+
+    /* Animation - Fade out */
+    transition: opacity 0.1s var(--animation-easing-function) !important;
+  }
+  #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:hover .tab-close-button {
+    visibility: visible !important;
+    opacity: 1;
+
+    /* Animation - Fade in */
+    transition: opacity 0.25s var(--animation-easing-function) !important;
  }

  /* Closed Button's icon thicker */
@ -1225,6 +1301,9 @@
    border-radius: 10px !important;
    width: 17px !important;
    height: 17px !important;
+
+    /* Animation */
+    transition: 0.1s var(--animation-easing-function);
  }
  .tab-icon-overlay:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) {
    /* Color */
@ -1243,19 +1322,10 @@
    top: 0 !important;
    inset-inline-end: 0 !important;
    margin-inline-end: 5.5px !important;
-    padding: 2px 0 !important;
+    padding: 0 !important;
  }
-  .tabbrowser-tab:not([image])
-    .tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) {
-    box-sizing: content-box;
-    padding: 3px 0;
-
-    border-radius: 0 !important;
-  }
-  .tabbrowser-tab:not([image])
-    .tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]):hover {
-    padding: 0;
-    border-radius: 10px !important;
+  .tabbrowser-tab:not([image]):is([soundplaying], [muted], [activemedia-blocked]) .tab-icon-image:not([pinned]) {
+    opacity: 0 !important; /* Favicon hidden */
  }

  /* Busy - Show */
@ -1296,12 +1366,19 @@
  }

  /** PictureInPicture Tab - Show PIP Icon ************************************/
-  .tab-icon-sound[pictureinpicture]:not([pinned]) {
+  #tabbrowser-tabs:not([closebuttons="activetab"]) .tabbrowser-tab[pictureinpicture]:not([pinned]) .tab-content::after,
+  #tabbrowser-tabs[closebuttons="activetab"]
+    .tabbrowser-tab[pictureinpicture]:not([pinned], :hover)
+    .tab-content::after {
+    content: "";
+  }
+  .tabbrowser-tab[pictureinpicture]:not([pinned]) .tab-content::after {
    /* Shape */
    display: -moz-inline-box !important;
    width: 14px;
    height: 14px;
-    -moz-box-ordinal-group: 2 !important;
+    background-size: 14px;
+    -moz-box-ordinal-group: 1 !important;

    /* Color */
    fill: currentColor;
@ -1309,24 +1386,27 @@
    -moz-context-properties: fill;

    /* Icon */
-    list-style-image: url("chrome://global/skin/media/picture-in-picture-open.svg");
+    background-image: url("chrome://global/skin/media/picture-in-picture-open.svg");
  }
-  .tab-icon-sound[pictureinpicture]:not([pinned])[selected] {
+  .tabbrowser-tab[pictureinpicture]:not([pinned])[selected] .tab-content::after {
    opacity: 0.95;
  }

  /* Close Button's position */
  .tabbrowser-tab[pictureinpicture]:not([pinned]) .tab-close-button {
-    margin-left: 7px !important;
    -moz-box-ordinal-group: 2 !important;
  }
-  .tabbrowser-tab[pictureinpicture]:not([pinned]):hover .tab-close-button {
-    margin-left: 0px !important;
+  #tabbrowser-tabs:not([closebuttons="activetab"]) .tabbrowser-tab[pictureinpicture]:not([pinned]) .tab-close-button {
+    margin-left: 7px !important;
+  }
+  #tabbrowser-tabs:not([closebuttons="activetab"])
+    .tabbrowser-tab[pictureinpicture]:not([pinned]):hover
+    .tab-close-button {
+    margin-left: 2px !important;
  }

  /** Container Tab - Color line at icon's bottom *****************************/
-  .tabbrowser-tab:not([pinned]) .tab-content::before,
-  .tabbrowser-tab[pinned][busy] .tab-content::before {
+  .tab-content:not([titlechanged])::before {
    /* Box Model */
    content: "";
    display: block;
@ -1337,33 +1417,23 @@
    width: 25%;

    /* Animate */
-    transition: 0.2s !important;
-    transform: translateY(10px) !important;
+    transition: 0.15s var(--animation-easing-function) !important;
+    transform: translate(9px, 12px) !important;
  }
  .tabbrowser-tab[visuallyselected]:not([pinned]) .tab-content::before {
-    width: 75%;
+    width: calc(100% - 30px);
+  }
+  #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab[visuallyselected]:not([pinned]) .tab-content::before {
+    width: calc(100% - 33px);
  }

  /* Pinned Tab */
-  .tabbrowser-tab[pinned] .tab-icon-image,
-  .tab-sharing-icon-overlay {
-    box-sizing: content-box;
-    padding: 3px 0;
-
-    border-bottom: 2px solid var(--identity-icon-color);
-  }
-
-  /* Pinned Tab - Busy */
-  .tabbrowser-tab[pinned][busy] .tab-content::before {
+  .tabbrowser-tab[pinned] .tab-content::before {
    width: 16px;
+    transform: translateY(12px) !important;
  }

  /* Pinned Tab - Titlechanged Indicator override */
-  .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]) .tab-icon-image,
-  .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) .tab-icon-image {
-    border-bottom: 2px solid transparent !important;
-  }
-
  .tabbrowser-tab:is([image], [pinned])[usercontextid] > .tab-stack > .tab-content[attention]:not([selected="true"]),
  .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
    /* Original: radial-gradient(circle, var(--attention-icon-color), var(--attention-icon-color) 2px, transparent 2px); */
@ -1830,44 +1900,54 @@
    list-style-image: url("chrome://browser/skin/customize.svg");
  }

-  #appmenu-developer-tools-view .subviewbutton:nth-child(1) {
-    /* Web Developer Tools */
+  /* Web Developer Tools */
+  #appmenu-developer-tools-view .subviewbutton:nth-child(1),
+  #PanelUI-developer-tools-view .subviewbutton:nth-child(1) {
    list-style-image: url("chrome://browser/skin/developer.svg");
  }
-  #appmenu-developer-tools-view .subviewbutton:nth-child(2) {
-    /* Task Manager */
+  /* 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");
  }
-  #appmenu-developer-tools-view .subviewbutton:nth-child(3) {
-    /* Remote Debugging - Edge bug.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");
  }
-  #appmenu-developer-tools-view .subviewbutton:nth-child(4) {
-    /* Browser Toolbox - Edge webdeveloper.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/webdeveloper.svg");
  }
-  #appmenu-developer-tools-view .subviewbutton:nth-child(5) {
-    /* Browser Content Toolbaox -  */
+  /* 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");
  }
-  #appmenu-developer-tools-view .subviewbutton:nth-last-child(5) {
-    /* Browser Console */
+  /* 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");
  }
-  #appmenu-developer-tools-view .subviewbutton:nth-last-child(4) {
-    /* Responsive Design Mode */
+  /* 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");
  }
-  #appmenu-developer-tools-view .subviewbutton:nth-last-child(3) {
-    /* Eyedropper */
+  /* 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");
  }
-  #appmenu-developer-tools-view .subviewbutton:nth-last-child(2) {
-    /* Page Source - Edge file-search.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/search-file.svg");
  }
-  #appmenu-developer-tools-view .subviewbutton:nth-last-child(1) {
-    /* Extensions for Devel */
+  /* 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 {
@ -1951,6 +2031,15 @@
    --menuitem-image: url("chrome://browser/skin/bookmarks-toolbar.svg");
  }

+  @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
+    #BMB_bookmarksShowAllTop {
+      list-style-image: url("chrome://browser/skin/bookmark-star-on-tray.svg") !important;
+    }
+    #BMB_bookmarksShowAllTop > .menu-conic-left {
+      display: -moz-box !important;
+    }
+  }
+
  /*= identity-popup =========================================================*/
  #identity-popup-clear-sitedata-button,
  #identity-popup-more-info {
@ -2057,7 +2146,7 @@

  @media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8) {
    :root {
-      --context-menu-background-padding-default: 3px;
+      --context-menu-background-padding-default: 2px;
    }
    :not(menu, #ContentSelectDropdown, #context-navigation)
      > menupopup
@ -2077,6 +2166,7 @@
  @media (-moz-os-version: windows-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)
      );
@ -2096,17 +2186,16 @@
      padding-inline-start: var(--menu-background-padding-default) !important;
      margin-left: 0 !important;
    }
-    menupopup:is(#BMB_bookmarksPopup, [placespopup="true"]) > menuitem:not(.menuitem-iconic, [disabled="true"]),
-    menupopup:is(#BMB_bookmarksPopup, [placespopup="true"]) > menu:not(.menu-iconic) {
-      margin-inline: var(--arrowpanel-menuicon-padding) !important;
-      padding-inline-start: calc(
-        var(--menu-background-padding-default) - var(--arrowpanel-menuicon-padding)
-      ) !important;
-      background-position: left calc(var(--arrowpanel-menuitem-padding) + 1px) center !important;
+  }
+
+  /* Padding - Linux */
+  @media (-moz-gtk-csd-available) {
+    :root {
+      --context-menu-background-padding-default: 6px;
    }
  }

-  /* Padding Mac */
+  /* Padding - Mac */
  @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
    :root {
      --context-menu-background-padding-default: 10px;
@ -2137,6 +2226,102 @@
    }
  }

+  /*= Bookmark Menu - Layout =================================================*/
+  /* #goPoup, #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);
+  }
+
+  /* Windows 7, 8 */
+  @media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8) {
+    /* Global Menu */
+    menupopup:is(#goPopup, #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) !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 */
+  @media (-moz-os-version: windows-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) !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 */
+  @media (-moz-gtk-csd-available) {
+    /* Global Menu */
+    menupopup:is(#goPopup, #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) + 1px) !important;
+    }
+  }
+
+  @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
+    /* Bookmark Popup - As Arrow Panel */
+    #PersonalToolbar menupopup menuitem,
+    #PersonalToolbar menupopup menu {
+      padding-inline: calc(var(--arrowpanel-menuicon-padding) + var(--arrowpanel-menuitem-padding)) !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) + 3px) !important;
+    }
+  }
+
  /** Context Menu - Icons ****************************************************/
  /*= tabContextMenu =========================================================*/
  #context_openANewTab {
@ -2512,7 +2697,7 @@
    --menuitem-image: url("chrome://devtools/skin/images/tool-accessibility.svg");
  }
  #context-inspect {
-    --menuitem-image: url("chrome://devtools/skin/images/command-pick.sv"g);
+    --menuitem-image: url("chrome://devtools/skin/images/command-pick.svg");
  }

  #context-media-eme-learnmore {
@ -2526,6 +2711,8 @@
    #context-forward {
      --menuitem-image: url("chrome://browser/skin/forward.svg");
    }
+    #context_reloadTab,
+    #context_reloadSelectedTabs,
    #context-reload {
      --menuitem-image: url("chrome://browser/skin/reload.svg");
    }
--- a/userContent.css
+++ b/userContent.css
@ -354,6 +354,7 @@
      /* Basic */
      .Page-content,
      .SecondaryHero,
+      body,
      main[aria-label="Content"] {
        color: var(--in-content-page-color) !important;
        background: var(--in-content-page-background) !important;
@ -483,6 +484,7 @@
      .AddonsCard-list,
      .Card-footer,
      .StaticAddonCard,
+      .blogpost-nav,
      .blogpost-nav * {
        background: var(--in-content-table-background) !important;
      }
@ -828,8 +830,7 @@
                 url-prefix("about:checkerboard"),
                 url-prefix("about:sync-log"),
                 url-prefix("about:memory"),
-                 regexp("^[file:///].*[^(html|svg|pdf|json)]$")
-  {
+                 regexp("^((file:\/\/\/)|(chrome:\/\/)).*\/$") {
    /* Base */
    html,
    body {
@ -1058,10 +1059,10 @@

  /*= Directory View =========================================================*/
  @-moz-document url-prefix("about:sync-log"),
-                 regexp("^[file:///].*[^(html|svg|pdf|json)]$")
-  {
+                 regexp("^((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;