From 506fc7e0187a6c4a14f629c1d88178e0086a7cde Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Wed, 10 Nov 2021 12:06:41 +0900
Subject: [PATCH 01/14] Fix: Decoration - Update banner pointer type

---
 userChrome.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/userChrome.css b/userChrome.css
index ff47851..0bc923c 100644
--- a/userChrome.css
+++ b/userChrome.css
@@ -2427,6 +2427,7 @@
   }
 
   /*= Cursor Types ===========================================================*/
+  #appMenu-proton-update-banner,
   #appMenu-fxa-status2:not([fxastatus]) > #appMenu-fxa-label2,
   #appMenu-zoomReduce-button2,
   #appMenu-zoomReset-button2,

From 9a591b01492a6ff4b901896d1d9645d1f2f6a547 Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Wed, 10 Nov 2021 13:57:50 +0900
Subject: [PATCH 02/14] Fix: Prevent `#tabs-newtab-button`'s corner rounding
 flashing

There is a performance improvement by not reloading the background image every time.
(Just fill color)
---
 userChrome.css | 28 +++++++++++++++++-----------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/userChrome.css b/userChrome.css
index 0bc923c..304ade0 100644
--- a/userChrome.css
+++ b/userChrome.css
@@ -2467,14 +2467,16 @@
   toolbarbutton,
   stack,
   vbox,
-  .toolbarbutton-icon {
+  .toolbarbutton-icon,
+  #tabs-newtab-button > .toolbarbutton-icon {
     transition: background-color 1s var(--animation-easing-function) !important;
   }
   button:hover,
   toolbarbutton:hover,
   stack:hover,
   vbox:hover,
-  .toolbarbutton-icon:hover {
+  .toolbarbutton-icon:hover,
+  #tabs-newtab-button:hover > .toolbarbutton-icon {
     transition: background-color 0.25s var(--animation-easing-function) !important;
   }
   @media (-moz-gtk-csd-available) {
@@ -3279,6 +3281,19 @@
     /* Size */
     -moz-box-align: stretch !important;
     padding-top: var(--tab-block-margin) !important;
+
+    /* Corner Rounding Image */
+    --newtab-position: calc((var(--tab-corner-rounding) / 2) * -1);
+    background-image: url("./icons/tab-bottom-corner-left.svg"), url("./icons/tab-bottom-corner-right.svg");
+    background-repeat: no-repeat;
+    background-position: left var(--newtab-position) bottom var(--tabs-navbar-original-shadow-size),
+      right var(--newtab-position) bottom var(--tabs-navbar-original-shadow-size);
+    background-size: var(--tab-corner-rounding);
+
+    /* Corner Rounding Color */
+    fill: none !important;
+    fill-opacity: var(--toolbarbutton-icon-fill-opacity) !important;
+    -moz-context-properties: fill, fill-opacity !important;
   }
 
   #tabs-newtab-button > .toolbarbutton-icon {
@@ -3289,15 +3304,6 @@
   #tabs-newtab-button:hover {
     /* Color */
     fill: var(--toolbarbutton-hover-background) !important;
-    -moz-context-properties: fill !important;
-
-    /* Corner Image */
-    --newtab-position: calc((var(--tab-corner-rounding) / 2) * -1);
-    background-image: url("./icons/tab-bottom-corner-left.svg"), url("./icons/tab-bottom-corner-right.svg");
-    background-repeat: no-repeat;
-    background-position: left var(--newtab-position) bottom var(--tabs-navbar-original-shadow-size),
-      right var(--newtab-position) bottom var(--tabs-navbar-original-shadow-size);
-    background-size: var(--tab-corner-rounding);
   }
 
   #tabs-newtab-button .toolbarbutton-icon {

From 541ea7ef43e92d135f6332559465f4ad22a15b3e Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Wed, 10 Nov 2021 15:36:04 +0900
Subject: [PATCH 03/14] Fix: Unselected Tab - Divide line for animation

---
 userChrome.css | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/userChrome.css b/userChrome.css
index 304ade0..39bf945 100644
--- a/userChrome.css
+++ b/userChrome.css
@@ -3217,8 +3217,8 @@
     position: absolute;
   }
 
-  .tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-child) .tab-background::before,
-  #tabs-newtab-button:not(:hover, [open])::before {
+  .tab-background::before,
+  #tabs-newtab-button::before {
     /* Box Model */
     content: "";
     display: block;
@@ -3233,13 +3233,14 @@
     height: 20px;
 
     /* Bar Color */
-    opacity: var(--tab-separator-opacity);
+    opacity: 0;
     transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */
     background-color: var(--toolbarseparator-color);
   }
-  #tabs-newtab-button:is(:hover, [open])::before {
-    content: "";
-    position: absolute;
+
+  .tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-child) .tab-background::before,
+  #tabs-newtab-button:not(:hover, [open])::before {
+    opacity: var(--tab-separator-opacity);
   }
 
   #navigator-toolbox:not([movingtab])

From 3fa949982cde6d5c05e3832030fa6e0ce887ada2 Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Thu, 11 Nov 2021 10:36:01 +0900
Subject: [PATCH 04/14] Fix: Menu - List combo box's padding #227

---
 userChrome.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/userChrome.css b/userChrome.css
index 39bf945..f80927d 100644
--- a/userChrome.css
+++ b/userChrome.css
@@ -2919,7 +2919,7 @@
   :root[uidensity="touch"] {
     --menu-padding: 0.5em;
   }
-  menupopup > menuitem,
+  menupopup:not(.in-menulist) > menuitem,
   menupopup > menu {
     /* Original: 0.5em */
     padding-block: var(--menu-padding) !important;

From b64d90f3f0e7bca461dd76e35df9b3e8fded98f3 Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Thu, 11 Nov 2021 13:52:50 +0900
Subject: [PATCH 05/14] Fix: New Tab Button - Windows10 accent color in
 titlebar compatibility

---
 userChrome.css | 28 +++++++++++++++++++---------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/userChrome.css b/userChrome.css
index f80927d..07e582b 100644
--- a/userChrome.css
+++ b/userChrome.css
@@ -3292,22 +3292,32 @@
     background-size: var(--tab-corner-rounding);
 
     /* Corner Rounding Color */
-    fill: none !important;
-    fill-opacity: var(--toolbarbutton-icon-fill-opacity) !important;
-    -moz-context-properties: fill, fill-opacity !important;
+    fill: transparent !important;
+    -moz-context-properties: fill !important;
   }
 
-  #tabs-newtab-button > .toolbarbutton-icon {
-    border-radius: var(--tab-border-radius) var(--tab-border-radius) 0 0 !important; /* Original: var(--tab-border-radius) */
-  }
-
-  /* Coner Rounding */
+  /* Corner Rounding Color */
   #tabs-newtab-button:hover {
-    /* Color */
     fill: var(--toolbarbutton-hover-background) !important;
   }
+  #tabs-newtab-button:hover:active {
+    fill: var(--toolbarbutton-active-background) !important;
+  }
+  @media (-moz-windows-accent-color-in-titlebar) {
+    :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover,
+    :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover {
+      fill: color-mix(in srgb, -moz-accent-color-foreground 10%, transparent) !important; /* Hardcorded for compatibility */
+    }
+    :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover:active,
+    :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover:active {
+      fill: color-mix(in srgb, -moz-accent-color-foreground 15%, transparent) !important; /* Hardcorded for compatibility */
+    }
+  }
 
+  /* '+'Icon */
   #tabs-newtab-button .toolbarbutton-icon {
+    border-radius: var(--tab-border-radius) var(--tab-border-radius) 0 0 !important; /* Original: var(--tab-border-radius) */
+
     padding: calc(var(--toolbarbutton-inner-padding) - (var(--tab-block-margin) / 4)) var(--toolbarbutton-inner-padding)
       calc(var(--toolbarbutton-inner-padding) + (var(--tab-block-margin) / 4) + var(--tabs-navbar-original-shadow-size)) !important;
     -moz-context-properties: fill, fill-opacity;

From 291f014f088bec5533f90838cfb8d2a610d72ac6 Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Fri, 12 Nov 2021 09:00:15 +0900
Subject: [PATCH 06/14] Fix: Animate - Remove menu, menuitem hover effect #268

---
 userChrome.css | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/userChrome.css b/userChrome.css
index 07e582b..922f336 100644
--- a/userChrome.css
+++ b/userChrome.css
@@ -2485,14 +2485,12 @@
     }
   }
 
-  menu,
-  menuitem,
   .subviewbutton {
-    /* treechildren::-moz-tree-row: Can't apply */
+    /* treechildren::-moz-tree-row: Can't apply
+       menu, menuitem is not apply.
+     */
     transition: background-color 0.5s var(--animation-easing-function) !important;
   }
-  menu:hover,
-  menuitem:hover,
   .subviewbutton:hover {
     transition: background-color 0.1s var(--animation-easing-function) !important;
   }

From 71dbd965e171d7740804d03526e17f198d385a8c Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Fri, 12 Nov 2021 09:38:44 +0900
Subject: [PATCH 07/14] Fix: Animate - Reduced motion preferences #268

---
 userChrome.css | 470 +++++++++++++++++++++++++++----------------------
 1 file changed, 255 insertions(+), 215 deletions(-)

diff --git a/userChrome.css b/userChrome.css
index 922f336..020c395 100644
--- a/userChrome.css
+++ b/userChrome.css
@@ -2384,46 +2384,48 @@
   }
 
   /** Decoration **************************************************************/
-  /*= 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);
-  }
+  @media (prefers-reduced-motion: no-preference) {
+    /*= 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;
-  }
+    /*= 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);
-  }
+    /* 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);
+    }
 
-  /*= Downloads Panel ========================================================*/
-  /* Accent Color for downloaded item */
-  #downloadsListBox .download-state[exists] .downloadDetails {
-    color: var(--button-primary-bgcolor);
-  }
-  #downloadsListBox .download-state[exists] .downloadDetails.downloadDetailsHover {
-    color: var(--button-primary-hover-bgcolor);
-  }
+    /*= Downloads Panel ======================================================*/
+    /* Accent Color for downloaded item */
+    #downloadsListBox .download-state[exists] .downloadDetails {
+      color: var(--button-primary-bgcolor);
+    }
+    #downloadsListBox .download-state[exists] .downloadDetails.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);
-  }
-  #downloadsListBox .download-state:not([exists], [state="0"]) .downloadTypeIcon {
-    filter: grayscale(100%) !important;
+    /* 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);
+    }
+    #downloadsListBox .download-state:not([exists], [state="0"]) .downloadTypeIcon {
+      filter: grayscale(100%) !important;
+    }
   }
 
   /*= Cursor Types ===========================================================*/
@@ -2462,180 +2464,184 @@
   */
 
   /*= Animate ================================================================*/
-  /*- Background Color -------------------------------------------------------*/
-  button,
-  toolbarbutton,
-  stack,
-  vbox,
-  .toolbarbutton-icon,
-  #tabs-newtab-button > .toolbarbutton-icon {
-    transition: background-color 1s var(--animation-easing-function) !important;
-  }
-  button:hover,
-  toolbarbutton:hover,
-  stack:hover,
-  vbox:hover,
-  .toolbarbutton-icon:hover,
-  #tabs-newtab-button:hover > .toolbarbutton-icon {
-    transition: background-color 0.25s var(--animation-easing-function) !important;
-  }
-  @media (-moz-gtk-csd-available) {
-    .tabbrowser-tab:is([visuallyselected], [multiselected], [selected]) .tab-background:not(:-moz-lwtheme) {
-      transition: background-image 0.25s var(--animation-easing-function) !important;
+  @media (prefers-reduced-motion: no-preference) {
+    /*- Background Color -----------------------------------------------------*/
+    button,
+    toolbarbutton,
+    stack,
+    vbox,
+    .toolbarbutton-icon,
+    #tabs-newtab-button > .toolbarbutton-icon {
+      transition: background-color 1s var(--animation-easing-function) !important;
+    }
+    button:hover,
+    toolbarbutton:hover,
+    stack:hover,
+    vbox:hover,
+    .toolbarbutton-icon:hover,
+    #tabs-newtab-button:hover > .toolbarbutton-icon {
+      transition: background-color 0.25s var(--animation-easing-function) !important;
+    }
+    @media (-moz-gtk-csd-available) {
+      .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
+    .subviewbutton {
+      /* treechildren::-moz-tree-row: Can't apply
        menu, menuitem is not apply.
      */
-    transition: background-color 0.5s var(--animation-easing-function) !important;
-  }
-  .subviewbutton: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;
-    max-width: var(--tab-max-width, 240px);
-  }
-  #tabbrowser-tabs:not([movingtab]) .tabbrowser-tab[pinned] {
-    transition: -moz-box-flex 0.2s var(--animation-easing-function),
-      margin-inline-start 0.2s var(--animation-easing-function) !important;
-  }
-
-  #tabbrowser-tabs:not([movingtab]) .tab-content {
-    transition: padding-inline 0.2s var(--animation-easing-function),
-      /* Unloaded Tab */ opacity 0.5s var(--animation-easing-function) !important;
-  }
-  #tabbrowser-tabs:not([movingtab]) .tab-content::before,
-  #tabbrowser-tabs:not([movingtab]) .tab-content::after {
-    transition: width 0.2s var(--animation-easing-function), transform 0.2s var(--animation-easing-function) !important;
-  }
-  #tabbrowser-tabs:not([movingtab]) .tab-content .tab-label-container {
-    transition: width 0.3s var(--animation-easing-function) !important;
-  }
-  #tabbrowser-tabs:not([movingtab]) .tab-content .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;
-  }
-  #urlbar-background:hover,
-  #searchbar: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;
-  }
-  #tracking-protection-icon-container:hover,
-  #identity-icon-box:hover,
-  #identity-permission-box:hover,
-  #notification-popup-box:hover,
-  #page-action-buttons > .urlbar-page-action:hover {
-    transition: background-color 1.25s var(--animation-easing-function) !important;
-  }
-
-  /*- Border - Other Fields --------------------------------------------------*/
-  #search-box:hover,
-  xul|search-textbox.tabsFilter:hover,
-  #editBMPanel_namePicker:hover,
-  #editBMPanel_tagsField:hover,
-  .findbar-container .findbar-textbox:hover {
-    transition: border-color 1s var(--animation-easing-function) !important;
-  }
-  #search-box:hover,
-  xul|search-textbox.tabsFilter:hover,
-  #editBMPanel_namePicker:hover,
-  #editBMPanel_tagsField:hover,
-  .findbar-container .findbar-textbox:hover {
-    transition: border-color 0.5s var(--animation-easing-function) !important;
-  }
-
-  /*- Sidebar ----------------------------------------------------------------*/
-  #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;
-  }
-  #sidebar-box[hidden="true"] {
-    display: -moz-box !important;
-    margin-inline-start: -18em;
-    opacity: 0;
-    visibility: collapse;
-    transition-delay: 0s, 0s, 0.25s !important;
-  }
-
-  /*- 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%;
+      transition: background-color 0.5s var(--animation-easing-function) !important;
+    }
+    .subviewbutton:hover {
+      transition: background-color 0.1s var(--animation-easing-function) !important;
     }
 
-    .item.client.closed .item-tabs-list {
-      display: flex !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;
+      max-width: var(--tab-max-width, 240px);
+    }
+    #tabbrowser-tabs:not([movingtab]) .tabbrowser-tab[pinned] {
+      transition: -moz-box-flex 0.2s var(--animation-easing-function),
+        margin-inline-start 0.2s var(--animation-easing-function) !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%);
+    #tabbrowser-tabs:not([movingtab]) .tab-content {
+      transition: padding-inline 0.2s var(--animation-easing-function),
+        /* Unloaded Tab */ opacity 0.5s var(--animation-easing-function) !important;
+    }
+    #tabbrowser-tabs:not([movingtab]) .tab-content::before,
+    #tabbrowser-tabs:not([movingtab]) .tab-content::after {
+      transition: width 0.2s var(--animation-easing-function), transform 0.2s var(--animation-easing-function) !important;
+    }
+    #tabbrowser-tabs:not([movingtab]) .tab-content .tab-label-container {
+      transition: width 0.3s var(--animation-easing-function) !important;
+    }
+    #tabbrowser-tabs:not([movingtab]) .tab-content .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;
+    }
+    #urlbar-background:hover,
+    #searchbar: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;
+    }
+    #tracking-protection-icon-container:hover,
+    #identity-icon-box:hover,
+    #identity-permission-box:hover,
+    #notification-popup-box:hover,
+    #page-action-buttons > .urlbar-page-action:hover {
+      transition: background-color 1.25s var(--animation-easing-function) !important;
+    }
+
+    /*- Border - Other Fields ------------------------------------------------*/
+    #search-box:hover,
+    xul|search-textbox.tabsFilter:hover,
+    #editBMPanel_namePicker:hover,
+    #editBMPanel_tagsField:hover,
+    .findbar-container .findbar-textbox:hover {
+      transition: border-color 1s var(--animation-easing-function) !important;
+    }
+    #search-box:hover,
+    xul|search-textbox.tabsFilter:hover,
+    #editBMPanel_namePicker:hover,
+    #editBMPanel_tagsField:hover,
+    .findbar-container .findbar-textbox:hover {
+      transition: border-color 0.5s var(--animation-easing-function) !important;
+    }
+
+    /*- Sidebar --------------------------------------------------------------*/
+    #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;
+    }
+    #sidebar-box[hidden="true"] {
+      display: -moz-box !important;
+      margin-inline-start: -18em;
       opacity: 0;
-      max-height: 0;
+      visibility: collapse;
+      transition-delay: 0s, 0s, 0.25s !important;
     }
-  }
 
-  /*- 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 {
+    /*- 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;
+      }
+
+      #template-container .item.client.closed .item-twisty-container {
+        transform: rotate(-90deg);
+        background-image: url("chrome://global/skin/icons/arrow-down-12.svg") !important;
+      }
+
+      #template-container .item.client.closed .item-twisty-container:dir(rtl) {
+        transform: rotate(90deg);
+        background-image: url("chrome://global/skin/icons/arrow-down-12.svg") !important;
+      }
+    }
+
+    /*- Arrow - Edit Bookmark Popup ------------------------------------------*/
+    #editBookmarkPanelRows .expander-up .button-icon,
+    #editBookmarkPanelRows .expander-down .button-icon {
       transition: transform 0.1s var(--animation-easing-function) !important;
     }
-
-    #template-container .item.client.closed .item-twisty-container {
-      transform: rotate(-90deg);
-      background-image: url("chrome://global/skin/icons/arrow-down-12.svg") !important;
+    #editBookmarkPanelRows .expander-up {
+      list-style-image: url("chrome://global/skin/icons/arrow-down.svg") !important;
     }
-
-    #template-container .item.client.closed .item-twisty-container:dir(rtl) {
-      transform: rotate(90deg);
-      background-image: url("chrome://global/skin/icons/arrow-down-12.svg") !important;
+    #editBookmarkPanelRows .expander-up .button-icon {
+      transform: rotate(180deg);
     }
   }
 
-  /*- 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;
-  }
-  #editBookmarkPanelRows .expander-up .button-icon {
-    transform: rotate(180deg);
-  }
-
   /** Reduce Padding **********************************************************/
   /*= Root - Reduce Padding ==================================================*/
   :root {
@@ -3232,7 +3238,6 @@
 
     /* Bar Color */
     opacity: 0;
-    transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */
     background-color: var(--toolbarseparator-color);
   }
 
@@ -3262,6 +3267,14 @@
     opacity: 0 !important;
   }
 
+  /* Animate */
+  @media (prefers-reduced-motion: no-preference) {
+    .tab-background::before,
+    #tabs-newtab-button::before {
+      transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */
+    }
+  }
+
   /* Latest Tab & New tab margin */
   #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab[last-visible-tab] {
     margin-inline-end: 1px !important;
@@ -3304,11 +3317,19 @@
   @media (-moz-windows-accent-color-in-titlebar) {
     :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover,
     :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover {
-      fill: color-mix(in srgb, -moz-accent-color-foreground 10%, transparent) !important; /* Hardcorded for compatibility */
+      fill: color-mix(
+        in srgb,
+        -moz-accent-color-foreground 10%,
+        transparent
+      ) !important; /* Hardcorded for compatibility */
     }
     :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover:active,
     :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover:active {
-      fill: color-mix(in srgb, -moz-accent-color-foreground 15%, transparent) !important; /* Hardcorded for compatibility */
+      fill: color-mix(
+        in srgb,
+        -moz-accent-color-foreground 15%,
+        transparent
+      ) !important; /* Hardcorded for compatibility */
     }
   }
 
@@ -3358,16 +3379,23 @@
   #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;
+  /* Animate */
+  @media (prefers-reduced-motion: no-preference) {
+    /* Fade out */
+    #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([visuallyselected]) .tab-close-button {
+      transition: opacity 0.1s var(--animation-easing-function) !important;
+    }
+
+    /* Fade in */
+    #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:hover .tab-close-button {
+      transition: opacity 0.25s var(--animation-easing-function) !important;
+    }
   }
 
   /* Closed Button's icon thicker */
@@ -3427,9 +3455,6 @@
     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 */
@@ -3439,13 +3464,22 @@
     fill-opacity: 0.8 !important;
     opacity: 1 !important;
   }
-  .tab-label-container > .tab-label {
-    transition: transform 0.25s var(--animation-easing-function);
-  }
   .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) .tab-label {
     transform: translateX(4px);
   }
 
+  /* Animate */
+  @media (prefers-reduced-motion: no-preference) {
+    .tab-icon-overlay:not([crashed]),
+    .tab-icon-overlay[pinned][crashed][selected] {
+      transition: 0.1s var(--animation-easing-function);
+    }
+
+    .tab-label-container > .tab-label {
+      transition: transform 0.25s var(--animation-easing-function);
+    }
+  }
+
   /* None exist favicon - Size bigger */
   .tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing], [crashed]) {
     transform: translateX(-0.5px) translateY(-1px);
@@ -3547,27 +3581,33 @@
     content: "";
     display: block;
     position: absolute !important;
+    transform: translate(9px, 12px) !important;
 
     /* Shape */
-    border-bottom: 2px solid color-mix(in srgb, var(--identity-icon-color) 75%, transparent);
+    border-bottom: 2px solid var(--identity-icon-color);
     width: 25%;
-
-    /* Animate */
-    transition: 0.15s var(--animation-easing-function) !important;
-    transform: translate(9px, 12px) !important;
+    opacity: 0.75;
   }
   .tabbrowser-tab[visuallyselected]:not([pinned]) .tab-content::before {
     width: calc(100% - 30px);
-    border-color: var(--identity-icon-color);
+    opacity: 1;
   }
   #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab[visuallyselected]:not([pinned]) .tab-content::before {
     width: calc(100% - 33px);
   }
 
+  /* Animate */
+  @media (prefers-reduced-motion: no-preference) {
+    .tab-content:not([titlechanged])::before {
+      transition: 0.15s var(--animation-easing-function) !important;
+      transition-property: width, opacity;
+    }
+  }
+
   /* Pinned Tab */
   .tabbrowser-tab[pinned] .tab-content::before {
-    width: 16px;
     transform: translateY(12px) !important;
+    width: 16px;
   }
 
   /* Pinned Tab - Titlechanged Indicator override */

From f32f335e9aa6aee7457b5bb55efe6d0c156e2a91 Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Sat, 13 Nov 2021 22:18:28 +0900
Subject: [PATCH 08/14] Fix: typo

---
 userChrome.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/userChrome.css b/userChrome.css
index 020c395..ff73def 100644
--- a/userChrome.css
+++ b/userChrome.css
@@ -27,7 +27,7 @@
     border-radius: 4px;
   }
 
-  /*= Identity Poup Icon Crop ================================================*/
+  /*= Identity Popup Icon Crop ===============================================*/
   .identity-popup-security-connection.identity-button {
     padding-block: 1px !important;
   }
@@ -3012,7 +3012,7 @@
     padding-block: var(--bookmark-menu-padding) !important;
   }
 
-  /*= Poup Panel - Reduce padding ============================================*/
+  /*= Popup Panel - Reduce padding ===========================================*/
   #protections-popup-main-header-label {
     height: unset !important; /* Original: 37.6px */
   }
@@ -4479,7 +4479,7 @@
   }
 
   /*= Bookmark Menu - Layout =================================================*/
-  /* #goPoup, #bookmarksMenuPopup: looks like global menu
+  /* #goPopup, #bookmarksMenuPopup: looks like global menu
    * #BMB_bookmarksPopup: looks like arrow panel
    */
 

From d46d6063aec9cab255e155ccb9ab40a8d1aef505 Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Sun, 14 Nov 2021 18:17:59 +0900
Subject: [PATCH 09/14] Fix: Animate - Reduceed motion at contents #268

---
 userContent.css | 58 +++++++++++++++++++++++++------------------------
 1 file changed, 30 insertions(+), 28 deletions(-)

diff --git a/userContent.css b/userContent.css
index d4766c7..91e9c0d 100644
--- a/userContent.css
+++ b/userContent.css
@@ -32,36 +32,38 @@
     }
 
     /** Activity Stream - Animate *********************************************/
-    :root {
-      --animation-easing-function: cubic-bezier(0.07, 0.95, 0, 1);
-    }
+    @media (prefers-reduced-motion: no-preference) {
+      :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);
-    }
+      /* 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);
-    }
-    .search-wrapper .search-inner-wrapper:hover input {
-      border-color: var(--newtab-primary-action-background) !important;
-      transition: border-color 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);
+      }
+      .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 - Home Search Bar looks like proton *******************/

From da0c075ed787afbc7a5a4af29a3d6a2ce8c877be Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Mon, 15 Nov 2021 01:17:27 +0900
Subject: [PATCH 10/14] Fix: System Default Theme - Windows10 border color

---
 userChrome.css | 24 ++++++++++++++++++------
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/userChrome.css b/userChrome.css
index ff73def..4a7b6f0 100644
--- a/userChrome.css
+++ b/userChrome.css
@@ -282,9 +282,10 @@
       --win-hover-active-bgcolor: #c2c2c2; /* also button-bgcolor */
       --win-field-bgcolor: #ffffff;
       --win-component-bgcolor: #f2f2f2;
+      --win-border-color: #8a8a8a;
+      --win-tab-seperator-color: #a3a3a3;
       --win-sidebar-bgcolor: #e6e6e6;
       --win-sidebar-hover-bgcolor: #cfcfcf;
-      --win-sidebar-border-color: #8a8a8a;
       --win-sidebar-button-hover-bgcolor: #b8b8b8;
       --win-sidebar-button-hover-active-bgcolor: #a3a3a3;
       --win-button-border: #747474;
@@ -308,9 +309,10 @@
         --win-hover-active-bgcolor: #454545; /* also button-bgcolor */
         --win-field-bgcolor: #373737;
         --win-component-bgcolor: #171717;
+        --win-border-color: #5b5b5b;
+        --win-tab-seperator-color: #555555;
         --win-sidebar-bgcolor: #1f1f1f;
         --win-sidebar-hover-bgcolor: #353535;
-        --win-sidebar-border-color: #5b5b5b;
         --win-sidebar-button-hover-bgcolor: #353535;
         --win-sidebar-button-hover-active-bgcolor: #4c4c4c;
         --win-button-border: #8f8f8f;
@@ -359,10 +361,7 @@
       --menu-border-color: var(--win-bgcolor) !important;
       --lwt-accent-color: var(--win-bgcolor) !important;
       --toolbar-field-border-color: var(--win-bgcolor) !important;
-      --arrowpanel-border-color: var(--win-bgcolor) !important;
       --chrome-content-separator-color: var(--win-bgcolor) !important;
-      --toolbarseparator-color: var(--win-bgcolor) !important;
-      --panel-separator-color: var(--win-bgcolor) !important;
 
       /* Component Background Color */
       --menu-background-color: var(--win-component-bgcolor) !important;
@@ -371,6 +370,9 @@
       --arrowpanel-background: var(--win-component-bgcolor) !important;
       --autocomplete-popup-background: var(--win-component-bgcolor) !important;
 
+      /* Seperator */
+      --toolbarseparator-color: var(--win-tab-seperator-color) !important;
+
       /* Field Backround Color */
       --input-bgcolor: var(--win-field-bgcolor) !important;
       --toolbar-field-background-color: var(--win-field-bgcolor) !important;
@@ -447,6 +449,16 @@
       --panelview-toolbarbutton-focus-box-shadow: inset 0 0 0 2px var(--focus-outline-color) !important;
     }
 
+    /*- Separator ------------------------------------------------------------*/
+    :root:not(:-moz-lwtheme) {
+      --arrowpanel-border-color: var(--win-bgcolor) !important;
+      --panel-separator-color: var(--win-bgcolor) !important;
+    }
+    :root[lwt-default-theme-in-dark-mode] {
+      --arrowpanel-border-color: var(--win-border-color) !important;
+      --panel-separator-color: var(--win-border-color) !important;
+    }
+
     /*- Menu -----------------------------------------------------------------*/
     html#main-window menupopup:not(:-moz-lwtheme) {
       --menu-color: var(--win-text-color) !important;
@@ -474,7 +486,7 @@
     :root[lwt-default-theme-in-dark-mode] #sidebar-box {
       --sidebar-background-color: var(--win-sidebar-bgcolor) !important;
       --sidebar-text-color: var(--win-text-color) !important;
-      --sidebar-border-color: var(--win-sidebar-border-color) !important;
+      --sidebar-border-color: var(--win-border-color) !important;
     }
     @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
       .sidebar-panel[style="--newtab-background-color: rgba(43, 42, 51, 1); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"],

From ee8a08cdaa6b518fc7323b5c6133fff399d17340 Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Mon, 15 Nov 2021 09:17:58 +0900
Subject: [PATCH 11/14] Fix: Fully Theme - Bookmark popup field color #269

---
 userChrome.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/userChrome.css b/userChrome.css
index 4a7b6f0..29d028d 100644
--- a/userChrome.css
+++ b/userChrome.css
@@ -1073,6 +1073,7 @@
   #editBMPanel_namePicker,
   #editBMPanel_tagsField {
     --input-bgcolor: var(--arrowpanel-background, Field);
+    --input-color: var(--arrowpanel-color, FieldText)
   }
 
   /*== Sidebar - Field Color =================================================*/

From d54a5a0b3d1b5acab2838208283efa7c387b6672 Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Mon, 15 Nov 2021 12:00:53 +0900
Subject: [PATCH 12/14] Fix: Proton - Linux's library popup download pane,
 input fields

---
 userChrome.css | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/userChrome.css b/userChrome.css
index 29d028d..b622652 100644
--- a/userChrome.css
+++ b/userChrome.css
@@ -2159,8 +2159,9 @@
         padding-inline-end: 4px !important;
       }
 
-      /*- Search Bar ---------------------------------------------------------*/
-      #searchFilter {
+      /*- Search Bar & Input -------------------------------------------------*/
+      #searchFilter,
+      #detailsPane html|input {
         appearance: none !important;
         background-color: var(--organizer-toolbar-field-background) !important;
         color: var(--organizer-color) !important;
@@ -2204,6 +2205,16 @@
         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

From 28e84906fcf0cd5bb2ef79f3afdfb3bd0b433c57 Mon Sep 17 00:00:00 2001
From: black7375 <black7375@users.noreply.github.com>
Date: Mon, 15 Nov 2021 06:40:46 +0000
Subject: [PATCH 13/14] Clean: Prettified Code!

---
 userChrome.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/userChrome.css b/userChrome.css
index b622652..0d68065 100644
--- a/userChrome.css
+++ b/userChrome.css
@@ -1073,7 +1073,7 @@
   #editBMPanel_namePicker,
   #editBMPanel_tagsField {
     --input-bgcolor: var(--arrowpanel-background, Field);
-    --input-color: var(--arrowpanel-color, FieldText)
+    --input-color: var(--arrowpanel-color, FieldText);
   }
 
   /*== Sidebar - Field Color =================================================*/

From 29e0b15560a3d0b5fa88db1bfb467244dbf75b5e Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Mon, 15 Nov 2021 16:17:49 +0900
Subject: [PATCH 14/14] Fix: Menu Poup - Nightly compatibility `#goPopup` ->
 `#historyMenuPopup`

---
 userChrome.css | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/userChrome.css b/userChrome.css
index 0d68065..38d28e9 100644
--- a/userChrome.css
+++ b/userChrome.css
@@ -1021,7 +1021,7 @@
 
   /* Default theme color preservation */
   :root[lwtheme-mozlightdark] menupopup:not(#BMB_bookmarksPopup, [placespopup="true"]),
-  :root[lwtheme-mozlightdark] menupopup:is(#goPopup, #bookmarksMenuPopup) {
+  :root[lwtheme-mozlightdark] menupopup:is(#goPopup, #historyMenuPopup, #bookmarksMenuPopup) {
     --menu-color: var(--toolbar-color, var(--in-content-page-color)) !important;
     --arrowpanel-background: var(
       --toolbar-bgcolor,
@@ -4330,9 +4330,9 @@
     > menupopup
     > menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
   #main-menubar > menu,
-  menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
+  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, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
+  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,
@@ -4366,9 +4366,9 @@
   }
   :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, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
+  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, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
+  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,
@@ -4422,9 +4422,9 @@
     :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, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
+    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, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
+    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,
@@ -4448,9 +4448,9 @@
     :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, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
+    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, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
+    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,
@@ -4503,7 +4503,7 @@
   }
 
   /*= Bookmark Menu - Layout =================================================*/
-  /* #goPopup, #bookmarksMenuPopup: looks like global menu
+  /* #goPopup(Legacy of historyMenuPoup), #historyMenuPopup, #bookmarksMenuPopup: looks like global menu
    * #BMB_bookmarksPopup: looks like arrow panel
    */
 
@@ -4522,7 +4522,7 @@
   /* Windows 7, 8 */
   @media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8) {
     /* Global Menu */
-    menupopup:is(#goPopup, #bookmarksMenuPopup) .bookmark-item {
+    menupopup:is(#goPopup, #historyMenuPopup, #bookmarksMenuPopup) .bookmark-item {
       padding-inline-start: 0 !important;
     }
 
@@ -4566,7 +4566,7 @@
   /* Linux */
   @media (-moz-gtk-csd-available) {
     /* Global Menu */
-    menupopup:is(#goPopup, #bookmarksMenuPopup) .bookmark-item {
+    menupopup:is(#goPopup, #historyMenuPopup, #bookmarksMenuPopup) .bookmark-item {
       padding-inline-start: var(--context-menu-background-padding) !important;
     }