From f0a1c2fd947f2caf0e41e60c0aa3792a4a24a313 Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Fri, 17 Jun 2022 10:10:07 +0900
Subject: [PATCH 01/13] Clean: Refactoring - contents/activity_stream

---
 css/leptonContent.css              |  8 +---
 src/contents/_activity_stream.scss | 60 +++++++++++++++---------------
 2 files changed, 30 insertions(+), 38 deletions(-)

diff --git a/css/leptonContent.css b/css/leptonContent.css
index e94b872a..8221f933 100644
--- a/css/leptonContent.css
+++ b/css/leptonContent.css
@@ -289,7 +289,6 @@
     .top-site-outer .tile {
       overflow: hidden;
     }
-
     .top-site-outer .tile .icon-wrapper {
       width: 100% !important;
       /* Original: 48px */
@@ -311,7 +310,6 @@
       button.close-button {
         transition: background 1.5s var(--animation-easing-function);
       }
-
       .top-site-outer:hover,
       #searchSubmit:hover,
       button.icon:hover,
@@ -344,7 +342,6 @@
       display: flex;
       flex-wrap: wrap;
     }
-
     .body-wrapper.on > .discovery-stream.ds-layout {
       flex-basis: 100%;
     }
@@ -367,7 +364,6 @@
       --newtab-search-dropdown-color: var(--newtab-search-background-color) !important;
       --newtab-element-hover-color: color-mix(in srgb, currentColor 9%, transparent) !important;
     }
-
     @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
       #root {
         /* Default Dark Mode */
@@ -375,6 +371,7 @@
         /* Same as dark theme's --panel-background */
       }
     }
+
     .activity-stream[lwt-sidebar]:not([style*="--newtab-background-color: rgba(43, 42, 51, 1);"]) #root {
       /* Light weight theme */
       --newtab-search-background-color: var(--lwt-sidebar-background-color);
@@ -431,18 +428,15 @@
     .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;
     }
diff --git a/src/contents/_activity_stream.scss b/src/contents/_activity_stream.scss
index 6593ce1d..3a0acf32 100644
--- a/src/contents/_activity_stream.scss
+++ b/src/contents/_activity_stream.scss
@@ -31,11 +31,11 @@
   @include Option("userContent.newTab.full_icon") {
     .top-site-outer .tile {
       overflow: hidden;
-    }
 
-    .top-site-outer .tile .icon-wrapper {
-      width: 100% !important; /* Original: 48px */
-      height: 100% !important; /* Original: 48px */
+      .icon-wrapper {
+        width: 100% !important; /* Original: 48px */
+        height: 100% !important; /* Original: 48px */
+      }
     }
   }
 
@@ -52,12 +52,9 @@
       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);
+        &:hover {
+          transition: background 0.5s var(--animation-easing-function);
+        }
       }
 
       /* Search Bar */
@@ -83,10 +80,10 @@
     .body-wrapper.on {
       display: flex;
       flex-wrap: wrap;
-    }
 
-    .body-wrapper.on > .discovery-stream.ds-layout {
-      flex-basis: 100%;
+      > .discovery-stream.ds-layout {
+        flex-basis: 100%;
+      }
     }
 
     .body-wrapper.on > .collapsible-section[data-section-id="topstories"],
@@ -107,14 +104,13 @@
       --newtab-search-dropdown-header-color: var(--newtab-search-background-color) !important;
       --newtab-search-dropdown-color: var(--newtab-search-background-color) !important;
       --newtab-element-hover-color: color-mix(in srgb, currentColor 9%, transparent) !important;
-    }
 
-    @include Dark {
-      #root {
+      @include Dark {
         /* Default Dark Mode */
         --newtab-search-background-color: rgba(66, 65, 77, 1); /* Same as dark theme's --panel-background */
       }
     }
+
     .activity-stream[lwt-sidebar]:not([style*="--newtab-background-color: rgba(43, 42, 51, 1);"]) #root {
       /* Light weight theme */
       --newtab-search-background-color: var(--lwt-sidebar-background-color);
@@ -169,24 +165,26 @@
       background: var(--newtab-search-background-color) !important;
     }
 
-    .contentSearchSuggestionTable .contentSearchSuggestionRow.selected,
-    .contentSearchSuggestionTable .contentSearchSettingsButton:hover {
-      color: var(--newtab-text-primary-color) !important;
-    }
+    .contentSearchSuggestionTable {
+      .contentSearchSuggestionRow.selected,
+      .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;
-    }
+      .contentSearchSuggestionRow.selected,
+      .contentSearchSettingsButton:hover,
+      .contentSearchOneOffItem.selected {
+        background: var(--newtab-element-hover-color) !important;
+      }
 
-    .contentSearchSuggestionTable .contentSearchSuggestionRow.selected:active,
-    .contentSearchSuggestionTable .contentSearchOneOffItem:active {
-      background: var(--newtab-element-active-color) !important;
-    }
+      .contentSearchSuggestionRow.selected:active,
+      .contentSearchOneOffItem:active {
+        background: var(--newtab-element-active-color) !important;
+      }
 
-    .contentSearchSuggestionTable .contentSearchSuggestionRow.selected .historyIcon {
-      fill: var(--newtab-icon-secondary-color) !important;
+      .contentSearchSuggestionRow.selected .historyIcon {
+        fill: var(--newtab-icon-secondary-color) !important;
+      }
     }
   }
 }

From 49c42d6cbdd3815ab6deb2d5a3747eab021041a9 Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Fri, 17 Jun 2022 10:39:25 +0900
Subject: [PATCH 02/13] Clean: Refactoring - contents/error_page

---
 src/contents/_error_page.scss | 78 ++++++++++++++++++++---------------
 1 file changed, 44 insertions(+), 34 deletions(-)

diff --git a/src/contents/_error_page.scss b/src/contents/_error_page.scss
index b17bc957..aac860c4 100644
--- a/src/contents/_error_page.scss
+++ b/src/contents/_error_page.scss
@@ -32,6 +32,41 @@
   }
 }
 
+
+//-- Mixin ---------------------------------------------------------------------
+@mixin _backgroundImage($imgURL, $important: false) {
+  background-image: url($imgURL) if($important, !important, null);
+  @content;
+}
+
+@mixin _errorContainerImage($imgURL) {
+  #errorPageContainer {
+    @include _backgroundImage($imgURL) {
+      @content;
+    }
+  }
+}
+
+@mixin _errorDescriptionImage($imgURL) {
+  .description-wrapper {
+    @include _backgroundImage($imgURL) {
+      @content;
+    }
+  }
+}
+
+@mixin _errorTitleImage($imgURL) {
+  @media (min-width: 970px) {
+    .title {
+      @include _backgroundImage($imgURL, true) {
+        @content;
+      }
+    }
+  }
+}
+
+//------------------------------------------------------------------------------
+
 @-moz-document url-prefix("about:neterror?e=connectionFailure"),
   url-prefix("about:neterror?e=netInterrupt"),
   url-prefix("about:neterror?e=netTimeout"),
@@ -39,66 +74,41 @@
   url-prefix("about:neterror?e=netOffline"),
   url("about:restartrequired"), url("chrome://browser/content/aboutRestartRequired.xhtml")
 {
-  #errorPageContainer {
-    background-image: url("../icons/error-connection-failure.svg");
-  }
+  @include _errorContainerImage("../icons/error-connection-failure.svg");
 }
 @-moz-document url-prefix("about:neterror?e=dnsNotFound") {
-  #errorPageContainer {
-    background-image: url("../icons/error-server-not-found.svg");
-  }
+  @include _errorContainerImage("../icons/error-server-not-found.svg");
 }
 @-moz-document url-prefix("about:neterror?e=malformedURI") {
-  #errorPageContainer {
-    background-image: url("chrome://browser/skin/illustrations/error-malformed-url.svg");
-  }
+  @include _errorContainerImage("chrome://browser/skin/illustrations/error-malformed-url.svg");
 }
 @-moz-document url-prefix("about:neterror?e=clockSkewError"),
   url-prefix("about:neterror?e=nssFailure") {
-  #errorPageContainer {
-    background-image: url("../icons/blue-berror.svg");
+  @include _errorContainerImage("../icons/blue-berror.svg") {
     background-size: 18.5em;
   }
 }
 
 @-moz-document url("about:sessionrestore"), url("chrome://browser/content/aboutSessionRestore.xhtml")
 {
-  .description-wrapper {
-    background-image: url("../icons/error-session-restore.svg");
-  }
+  @include _errorDescriptionImage("../icons/error-session-restore.svg");
 }
 
 @-moz-document url-prefix("about:neterror?e=fileNotFound") {
-  @media (min-width: 970px) {
-    .title {
-      background-image: url("chrome://global/skin/icons/info.svg") !important;
-    }
-  }
+  @include _errorTitleImage("chrome://global/skin/icons/info.svg");
 
   #text-container {
     padding-inline-start: 0;
   }
 }
 @-moz-document url-prefix("about:tabcrashed") {
-  @media (min-width: 970px) {
-    .title {
-      background-image: url("chrome://browser/skin/tab-crashed.svg") !important;
-    }
-  }
+  @include _errorTitleImage("chrome://browser/skin/tab-crashed.svg");
 }
 @-moz-document url("about:robots"), url("chrome://browser/content/aboutRobots.xhtml")
 {
-  @media (min-width: 970px) {
-    .title {
-      background-image: url("chrome://browser/content/aboutRobots-icon.png") !important;
-    }
-  }
+  @include _errorTitleImage("chrome://browser/content/aboutRobots-icon.png");
 }
 @-moz-document url("about:welcomeBack"), url("chrome://browser/content/aboutWelcomeBack.xhtml")
 {
-  @media (min-width: 970px) {
-    .title {
-      background-image: url("../icons/welcome-back.svg") !important;
-    }
-  }
+  @include _errorTitleImage("../icons/welcome-back.svg");
 }

From 4828606ab91ddb9e7ab5e4231146cdb8eeb65dff Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Fri, 17 Jun 2022 15:10:00 +0900
Subject: [PATCH 03/13] Clean: Refactoring - contents/video_player

---
 css/leptonContent.css           |  32 ++-----
 src/contents/_video_player.scss | 165 +++++++++++++++++---------------
 2 files changed, 96 insertions(+), 101 deletions(-)

diff --git a/css/leptonContent.css b/css/leptonContent.css
index 8221f933..b19f69ad 100644
--- a/css/leptonContent.css
+++ b/css/leptonContent.css
@@ -7,13 +7,16 @@
     --controlBar-height: 40px;
     /* Original: 40px, Replace to this value */
   }
-
   #controlsContainer .touch {
     --button-size: 48px !important;
     /* Original: 40px */
     --controlBar-height: 52px;
     /* Original: 52px */
   }
+  #controlsContainer .controlBar {
+    height: var(--controlBar-height) !important;
+    /* Original: 40px */
+  }
 
   .videocontrols[inDOMFullscreen] #controlsContainer {
     --button-size: 64px !important;
@@ -25,19 +28,12 @@
     --controlBar-height: 64px;
     /* Original: 40px */
   }
-
   .videocontrols[inDOMFullscreen] #controlsContainer .touch {
     --button-size: 72px !important;
     /* Original: 40px */
     --controlBar-height: 64px;
     /* Original: 52px */
   }
-
-  #controlsContainer .controlBar {
-    height: var(--controlBar-height) !important;
-    /* Original: 40px */
-  }
-
   .videocontrols[inDOMFullscreen] #controlsContainer .controlBar {
     padding-bottom: 8px !important;
   }
@@ -56,12 +52,6 @@
     box-shadow: 0 5px 10px -3px var(--box-shadow1), 0 3px 16px 2px var(--box-shadow2), 0 8px 12px 1px var(--box-shadow3);
     /* Or: 0 2px 15px rgba(0,0,0,.1); */
   }
-
-  video {
-    --duration-color: #eee;
-    --media-background: linear-gradient(transparent, rgba(26, 26, 26, 0.85));
-  }
-
   @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
     audio {
       --box-shadow1: rgba(249, 249, 250, 0.12);
@@ -69,6 +59,11 @@
       --box-shadow3: rgba(82, 82, 94, 0.04);
     }
   }
+
+  video {
+    --duration-color: #eee;
+    --media-background: linear-gradient(transparent, rgba(26, 26, 26, 0.85));
+  }
   @media (prefers-contrast) {
     video {
       --duration-color: #929292;
@@ -77,10 +72,10 @@
       /* Like Original */
     }
   }
+
   #controlsContainer .controlBar {
     background: var(--media-background) !important;
   }
-
   #controlsContainer .duration {
     color: var(--duration-color) !important;
     /* Original: #929292 */
@@ -161,7 +156,6 @@
       padding-inline: var(--controlBar-padding-inline) !important;
       /* Original: 9px */
     }
-
     #controlsContainer .scrubberStack {
       /* Vertical */
       order: var(--scrubberStack-order);
@@ -172,7 +166,6 @@
       width: var(--scrubberStack-twoline-width, var(--scrubberStack-width));
       margin-inline: var(--scrubberStack-margin-inline) !important;
     }
-
     #controlsContainer .positionDurationBox {
       flex-grow: var(--positionDurationBox-flex-grow);
       margin-left: var(--positionDurationBox-margin-left);
@@ -192,7 +185,6 @@
   #controlsContainer .fullscreenButton {
     background-image: url("../icons/enter-fullscreen.svg") !important;
   }
-
   #controlsContainer .fullscreenButton[fullscreened] {
     background-image: url("../icons/exit-fullscreen.svg") !important;
   }
@@ -209,11 +201,9 @@
     cursor: pointer;
     opacity: 0.65 !important;
   }
-
   #controlsContainer .controlsSpacerStack:hover > .clickToPlay {
     opacity: 0.85 !important;
   }
-
   #controlsContainer .controlsSpacerStack:hover > .clickToPlay:hover {
     opacity: 1 !important;
     fill: #48a0f7 !important;
@@ -228,13 +218,11 @@
       transition: transform 350ms ease;
       opacity: 1 !important;
     }
-
     #controlsContainer .controlBar[hidden] {
       transform: translateY(100%);
       transition: transform 350ms ease-in-out, opacity 1s ease 100ms !important;
       opacity: 0 !important;
     }
-
     #controlsContainer .controlBar[hidden] .progressBar,
     #controlsContainer .controlBar[hidden] .bufferBar {
       display: unset !important;
diff --git a/src/contents/_video_player.scss b/src/contents/_video_player.scss
index 8e41ac59..01cbd68d 100644
--- a/src/contents/_video_player.scss
+++ b/src/contents/_video_player.scss
@@ -3,26 +3,28 @@
   #controlsContainer {
     // --button-size: 32px !important; /* Original: 30px */ Disabled for issue #404
     --controlBar-height: 40px; /* Original: 40px, Replace to this value */
+    .touch {
+      --button-size: 48px !important; /* Original: 40px */
+      --controlBar-height: 52px; /* Original: 52px */
+    }
+    .controlBar {
+      height: var(--controlBar-height) !important; /* Original: 40px */
+    }
   }
-  #controlsContainer .touch {
-    --button-size: 48px !important; /* Original: 40px */
-    --controlBar-height: 52px; /* Original: 52px */
-  }
-  .videocontrols[inDOMFullscreen] #controlsContainer {
-    --button-size: 64px !important; /* Original: 30px */
-    --track-size: 6px !important; /* Original: 5px, Touch: 7px */
-    --thumb-size: 15px !important; /* Original: 13px, Touch: 16px */
-    --controlBar-height: 64px; /* Original: 40px */
-  }
-  .videocontrols[inDOMFullscreen] #controlsContainer .touch {
-    --button-size: 72px !important; /* Original: 40px */
-    --controlBar-height: 64px; /* Original: 52px */
-  }
-  #controlsContainer .controlBar {
-    height: var(--controlBar-height) !important; /* Original: 40px */
-  }
-  .videocontrols[inDOMFullscreen] #controlsContainer .controlBar {
-    padding-bottom: 8px !important;
+  .videocontrols[inDOMFullscreen] {
+    #controlsContainer {
+      --button-size: 64px !important; /* Original: 30px */
+      --track-size: 6px !important; /* Original: 5px, Touch: 7px */
+      --thumb-size: 15px !important; /* Original: 13px, Touch: 16px */
+      --controlBar-height: 64px; /* Original: 40px */
+      .touch {
+        --button-size: 72px !important; /* Original: 40px */
+        --controlBar-height: 64px; /* Original: 52px */
+      }
+      .controlBar {
+        padding-bottom: 8px !important;
+      }
+    }
   }
 }
 
@@ -39,30 +41,30 @@
     box-shadow: 0 5px 10px -3px var(--box-shadow1), 0 3px 16px 2px var(--box-shadow2),
                 0 8px 12px  1px var(--box-shadow3);
     /* Or: 0 2px 15px rgba(0,0,0,.1); */
-  }
-  video {
-    --duration-color: #eee;
-    --media-background: linear-gradient(transparent, rgba(26,26,26,.85));
-  }
 
-  @include Dark {
-    audio {
+    @include Dark {
       --box-shadow1: rgba(249, 249, 250, 0.12);
       --box-shadow2: rgba(91, 91, 102, 0.12);
       --box-shadow3: rgba(82, 82, 94, 0.04);
     }
   }
-  @include Contrast {
-    video {
+  video {
+    --duration-color: #eee;
+    --media-background: linear-gradient(transparent, rgba(26,26,26,.85));
+
+    @include Contrast {
       --duration-color: #929292; /* Like Original */
       --media-background: rgba(26,26,26,.8); /* Like Original */
     }
   }
-  #controlsContainer .controlBar {
-    background: var(--media-background) !important;
-  }
-  #controlsContainer .duration {
-    color: var(--duration-color) !important; /* Original: #929292 */
+
+  #controlsContainer {
+    .controlBar {
+      background: var(--media-background) !important;
+    }
+    .duration {
+      color: var(--duration-color) !important; /* Original: #929292 */
+    }
   }
 
   @include Option("userContent.player.ui.twoline") {
@@ -138,28 +140,30 @@
       transform:scale(1);
     }
 
-    #controlsContainer .controlBar {
-      flex-wrap: var(--controlBar-flex-wrap);
-      justify-content: var(--controlBar-justify-content);
-      align-content: var(--controlBar-align-content);
-      height: calc(var(--controlBar-height) + var(--controlBar-twoline-more-height, var(--thumb-size))) !important;
-      padding-inline: var(--controlBar-padding-inline) !important; /* Original: 9px */
-    }
-    #controlsContainer .scrubberStack {
-      /* Vertical */
-      order: var(--scrubberStack-order);
-      height: var(--scrubberStack-height, var(--thumb-size)) !important;
-      transform: var(--scrubberStack-transform, translateY(calc(var(--thumb-size) / 2)));
-
-      /* Horizontal */
-      flex-basis: var(--scrubberStack-flex-basis, calc(var(--scrubberStack-width) - 18px)) !important;
-      width: var(--scrubberStack-twoline-width, var(--scrubberStack-width));
-      margin-inline: var(--scrubberStack-margin-inline) !important;
-    }
-    #controlsContainer .positionDurationBox {
-      flex-grow: var(--positionDurationBox-flex-grow);
-      margin-left: var(--positionDurationBox-margin-left);
-      text-align: var(--positionDurationBox-text-align) !important;
+    #controlsContainer {
+      .controlBar {
+        flex-wrap: var(--controlBar-flex-wrap);
+        justify-content: var(--controlBar-justify-content);
+        align-content: var(--controlBar-align-content);
+        height: calc(var(--controlBar-height) + var(--controlBar-twoline-more-height, var(--thumb-size))) !important;
+        padding-inline: var(--controlBar-padding-inline) !important; /* Original: 9px */
+      }
+      .scrubberStack {
+        /* Vertical */
+        order: var(--scrubberStack-order);
+        height: var(--scrubberStack-height, var(--thumb-size)) !important;
+        transform: var(--scrubberStack-transform, translateY(calc(var(--thumb-size) / 2)));
+
+        /* Horizontal */
+        flex-basis: var(--scrubberStack-flex-basis, calc(var(--scrubberStack-width) - 18px)) !important;
+        width: var(--scrubberStack-twoline-width, var(--scrubberStack-width));
+        margin-inline: var(--scrubberStack-margin-inline) !important;
+      }
+      .positionDurationBox {
+        flex-grow: var(--positionDurationBox-flex-grow);
+        margin-left: var(--positionDurationBox-margin-left);
+        text-align: var(--positionDurationBox-text-align) !important;
+      }
     }
 
     #playButton {
@@ -174,9 +178,9 @@
 @include Option("userContent.player.icon") {
   #controlsContainer .fullscreenButton {
     background-image: url("../icons/enter-fullscreen.svg") !important;
-  }
-  #controlsContainer .fullscreenButton[fullscreened] {
-    background-image: url("../icons/exit-fullscreen.svg") !important;
+    &[fullscreened] {
+      background-image: url("../icons/exit-fullscreen.svg") !important;
+    }
   }
 }
 
@@ -189,16 +193,18 @@
 
 /* Click to play UI */
 @include Option("userContent.player.click_to_play") {
-  #controlsContainer .clickToPlay {
-    cursor: pointer;
-    opacity: 0.65 !important;
-  }
-  #controlsContainer .controlsSpacerStack:hover > .clickToPlay {
-    opacity: 0.85 !important;
-  }
-  #controlsContainer .controlsSpacerStack:hover > .clickToPlay:hover {
-    opacity: 1 !important;
-    fill: #48a0f7 !important; /* color as .scrubber */
+  #controlsContainer {
+    .clickToPlay {
+      cursor: pointer;
+      opacity: 0.65 !important;
+    }
+    .controlsSpacerStack:hover > .clickToPlay {
+      opacity: 0.85 !important;
+      &:hover {
+        opacity: 1 !important;
+        fill: #48a0f7 !important; /* color as .scrubber */
+      }
+    }
   }
 }
 
@@ -209,17 +215,18 @@
     #controlsContainer .controlBar {
       transition: transform 350ms ease;
       opacity: 1 !important;
-    }
-    #controlsContainer .controlBar[hidden] {
-      transform: translateY(100%);
-      transition: transform 350ms ease-in-out, opacity 1s ease 100ms !important;
-      opacity: 0 !important;
-    }
-    #controlsContainer .controlBar[hidden] .progressBar,
-    #controlsContainer .controlBar[hidden] .bufferBar {
-      display: unset !important;
-      opacity: 0.55;
-      transition: opacity 150ms ease 50ms;
+      &[hidden] {
+        transform: translateY(100%);
+        transition: transform 350ms ease-in-out, opacity 1s ease 100ms !important;
+        opacity: 0 !important;
+
+        .progressBar,
+        .bufferBar {
+          display: unset !important;
+          opacity: 0.55;
+          transition: opacity 150ms ease 50ms;
+        }
+      }
     }
 
     /* Two line Control Bar */

From e3d5519a34846ad1e5874374bd81506141b26bef Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Sat, 25 Jun 2022 18:52:32 +0900
Subject: [PATCH 04/13] Fix: Proton - Contents field border

---
 css/leptonContent.css                           | 8 ++------
 src/contents/proton_contents/_field_border.scss | 8 ++------
 2 files changed, 4 insertions(+), 12 deletions(-)

diff --git a/css/leptonContent.css b/css/leptonContent.css
index 95327424..53e442d3 100644
--- a/css/leptonContent.css
+++ b/css/leptonContent.css
@@ -1993,17 +1993,13 @@
   @supports -moz-bool-pref("userContent.page.field_border") {
     @media (prefers-reduced-motion: no-preference) {
       @-moz-document url-prefix("about:") {
+        html|input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):not(#newtab-search-text):hover,
+        html|textarea:hover,
         xul|search-textbox:hover {
           border-color: var(--in-content-focus-outline-color) !important;
           transition: border-color 0.5s var(--animation-easing-function);
         }
       }
-      @-moz-document url-prefix("about:config") {
-        #about-config-search:hover {
-          border-color: var(--in-content-focus-outline-color) !important;
-          transition: border-color 0.5s var(--animation-easing-function);
-        }
-      }
     }
   }
   /*= View Source ==============================================================*/
diff --git a/src/contents/proton_contents/_field_border.scss b/src/contents/proton_contents/_field_border.scss
index 65877e0b..3b60cc42 100644
--- a/src/contents/proton_contents/_field_border.scss
+++ b/src/contents/proton_contents/_field_border.scss
@@ -1,12 +1,8 @@
 @-moz-document url-prefix("about:") {
+  html|input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):not(#newtab-search-text):hover,
+  html|textarea:hover,
   xul|search-textbox:hover {
     border-color: var(--in-content-focus-outline-color) !important;
     transition: border-color 0.5s var(--animation-easing-function);
   }
 }
-@-moz-document url-prefix("about:config") {
-  #about-config-search:hover {
-    border-color: var(--in-content-focus-outline-color) !important;
-    transition: border-color 0.5s var(--animation-easing-function);
-  }
-}

From bd6dd60b9246a6e1f59bedd156668e5e0b1a72bd Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Tue, 28 Jun 2022 03:06:48 +0900
Subject: [PATCH 05/13] Fix: Icons - Place tag contextmenu icons

---
 css/leptonChrome.css               | 6 ++++++
 css/leptonContent.css              | 6 ++++++
 src/icons/context_menu/_place.scss | 4 ++++
 3 files changed, 16 insertions(+)

diff --git a/css/leptonChrome.css b/css/leptonChrome.css
index 741b72bf..9ddf186a 100644
--- a/css/leptonChrome.css
+++ b/css/leptonChrome.css
@@ -6821,6 +6821,10 @@
       --menuitem-image: url("chrome://browser/skin/new-tab.svg");
     }
 
+    #placesContext_open\:newcontainertab {
+      --menuitem-image: url("../icons/container-openin-16.svg");
+    }
+
     #placesContext_open\:newwindow {
       --menuitem-image: url("chrome://browser/skin/window.svg");
     }
@@ -6866,10 +6870,12 @@
       --menuitem-image: url("chrome://browser/skin/bookmark.svg");
     }
 
+    #placesContext_showInFolder,
     #placesContext_new\:folder {
       --menuitem-image: url("chrome://global/skin/icons/folder.svg");
     }
     @supports -moz-bool-pref("userChrome.icon.library") {
+      #placesContext_showInFolder,
       #placesContext_new\:folder {
         --menuitem-image: url("../icons/folder.svg");
       }
diff --git a/css/leptonContent.css b/css/leptonContent.css
index 53e442d3..285dcabe 100644
--- a/css/leptonContent.css
+++ b/css/leptonContent.css
@@ -2486,6 +2486,10 @@
         --menuitem-image: url("chrome://browser/skin/new-tab.svg");
       }
 
+      #placesContext_open\:newcontainertab {
+        --menuitem-image: url("../icons/container-openin-16.svg");
+      }
+
       #placesContext_open\:newwindow {
         --menuitem-image: url("chrome://browser/skin/window.svg");
       }
@@ -2531,10 +2535,12 @@
         --menuitem-image: url("chrome://browser/skin/bookmark.svg");
       }
 
+      #placesContext_showInFolder,
       #placesContext_new\:folder {
         --menuitem-image: url("chrome://global/skin/icons/folder.svg");
       }
       @supports -moz-bool-pref("userChrome.icon.library") {
+        #placesContext_showInFolder,
         #placesContext_new\:folder {
           --menuitem-image: url("../icons/folder.svg");
         }
diff --git a/src/icons/context_menu/_place.scss b/src/icons/context_menu/_place.scss
index cef867ec..b6e6d56f 100644
--- a/src/icons/context_menu/_place.scss
+++ b/src/icons/context_menu/_place.scss
@@ -11,6 +11,9 @@
 #placesContext_openLinks\:tabs {
   --menuitem-image: url("chrome://browser/skin/new-tab.svg");
 }
+#placesContext_open\:newcontainertab {
+  --menuitem-image: url("../icons/container-openin-16.svg");
+}
 #placesContext_open\:newwindow {
   --menuitem-image: url("chrome://browser/skin/window.svg");
 }
@@ -49,6 +52,7 @@
 #placesContext_new\:bookmark {
   --menuitem-image: url("chrome://browser/skin/bookmark.svg");
 }
+#placesContext_showInFolder,
 #placesContext_new\:folder {
   --menuitem-image: url("chrome://global/skin/icons/folder.svg");
   @include Option("userChrome.icon.library") {

From 05bbeb43e20368ee410a42f410080117ea4d0bb3 Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Tue, 28 Jun 2022 04:34:11 +0900
Subject: [PATCH 06/13] Clean: Icons - Layout menu of chrome, content

---
 css/leptonChrome.css               |  1 +
 css/leptonContent.css              |  8 +--
 src/icons/_layout_menu.scss        | 72 +++++++----------------
 src/icons/_layout_menu_common.scss | 91 ++++++++++++++++++++++++++++++
 src/leptonContent.scss             |  1 +
 src/library/_contents_menu.scss    | 73 +++++++-----------------
 6 files changed, 135 insertions(+), 111 deletions(-)
 create mode 100644 src/icons/_layout_menu_common.scss

diff --git a/css/leptonChrome.css b/css/leptonChrome.css
index 9ddf186a..8464ee4a 100644
--- a/css/leptonChrome.css
+++ b/css/leptonChrome.css
@@ -6059,6 +6059,7 @@
       list-style-image: var(--menuitem-image, url("../icons/blank.svg")) !important;
     }
   }
+
   /* Padding */
   :root {
     --context-menu-background-padding-default: 5px;
diff --git a/css/leptonContent.css b/css/leptonContent.css
index 87005bd8..2afd5b60 100644
--- a/css/leptonContent.css
+++ b/css/leptonContent.css
@@ -2313,9 +2313,8 @@
     }
     /*= Context Menu ===========================================================*/
     @supports -moz-bool-pref("userChrome.icon.context_menu") {
-      menupopup menuitem:not([type="checkbox"], [type="radio"]),
-      menupopup menu:not([type="checkbox"], [type="radio"]),
-      #main-menubar > menu {
+      menupopup menuitem:not([type="checkbox"][checked="true"], [type="radio"]),
+      menupopup menu:not([type="checkbox"][checked="true"], [type="radio"]) {
         -moz-appearance: none !important;
         /* Linux: menulist */
       }
@@ -2341,9 +2340,10 @@
         :not(menu, #ContentSelectDropdown)
           > menupopup
           > menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]) {
-          list-style-image: var(--menuitem-image) !important;
+          list-style-image: var(--menuitem-image, url("../icons/blank.svg")) !important;
         }
       }
+
       /* Padding */
       :root {
         --context-menu-background-padding-default: 5px;
diff --git a/src/icons/_layout_menu.scss b/src/icons/_layout_menu.scss
index d5efe3ac..dd32f911 100644
--- a/src/icons/_layout_menu.scss
+++ b/src/icons/_layout_menu.scss
@@ -1,3 +1,5 @@
+@import "./layout_menu_common";
+
 //-- Mixin ---------------------------------------------------------------------
 // Items
 $_iconNoneCommon: ".in-menulist, [checked=\"true\"]";
@@ -57,41 +59,25 @@ $_layoutCommonMenus: (
 }
 
 //------------------------------------------------------------------------------
-#{selector.append(
-   "menupopup menuitem, menupopup menu",
-   ":not([type=\"checkbox\"][checked=\"true\"], [type=\"radio\"])"
-)},
+#{$_initialMenus},
 #{$_globalMenus} {
-  -moz-appearance: none !important; /* Linux: menulist */
+  @include _initial_menus;
 }
 
 /* Icon */
 @include _layoutInitIconMenus {
-  /* Color */
-  -moz-context-properties: fill, fill-opacity !important;
-  fill: currentColor !important;
-
-  /* Layout */
-  background-size: 16px !important;
-  background-repeat: no-repeat !important;
-  background-image: var(--menuitem-image);
+  @include _layout_icon_menus;
 }
 
 /* For native context menus */
-@include NativeMenu {
-  #{$_nestedPopupIconMenus} {
-    list-style-image: var(--menuitem-image, url("../icons/blank.svg")) !important;
-  }
+#{$_nestedPopupIconMenus} {
+  @include _layout_icon_native_menus;
 }
 
 /* Padding */
-:root {
-  --context-menu-background-padding-default: 5px;
-  --context-menu-background-padding: var(--context-menu-background-padding-default);
-}
+@include _layout_root_padding;
 @include _layoutInitPaddingMenus {
-  background-position: left var(--context-menu-background-padding) center !important;
-  padding-inline-start: var(--context-menu-background-padding) !important;
+  @include _layout_init_padding;
 }
 
 /* Menubar */
@@ -128,67 +114,47 @@ $_layoutCommonMenus: (
 //   }
 // }
 
-@include OS($win7) {
-  :root {
-    --context-menu-background-padding-default: 2px;
-  }
-}
-@include OS($win8) {
-  :root {
-    --context-menu-background-padding-default: 3px;
-  }
-}
+@include _layout_root_win7_8;
 @include OS($win7, $win8) {
   @include _layoutIconMenus {
-    background-position: left var(--context-menu-background-padding) center !important;
-    padding-inline-start: 0 !important;
+    @include _layout_init_win7_8();
   }
 }
 @include OS($win10) {
-  :root {
-    --context-menu-background-padding: 1em;
-    --context-menu-text-padding: 24px; /* 16px + 8px */
-    --menu-background-padding-default: calc(var(--context-menu-background-padding) + var(--context-menu-text-padding));
-  }
+  @include _layout_root_win10;
 
   @include _layoutIconMenus {
-    padding-inline-start: var(--menu-background-padding-default) !important;
-    margin-left: 0 !important;
+    @include _layout_init_win10;
   }
 }
 
 /* Padding - Linux */
 @include OS($linux) {
-  :root {
-    --context-menu-background-padding-default: 6px;
-  }
+  @include _layout_root_linux;
 
   #{$_globalMenus} > .menubar-text {
-    padding-inline-start: 3px;
+    @include _layout_init_linux;
   }
 }
 
 /* Padding - Mac */
 @include OS($mac) {
-  :root {
-    --context-menu-background-padding-default: 10px;
-    --context-menu-mac-padding: 21px;
-  }
+  @include _layout_root_mac;
 
   /* context menu width */
   #{$_nestedPopupPaddingMenus},
   #blockedPopupDontShowMessage {
-    padding-inline-end: var(--context-menu-background-padding) !important;
+    @include _layout_init_mac_width;
   }
 
   /* text position */
   #{selector.nest($_nestedPopupPadding, "menuitem > .menu-text, menu > .menu-text")} {
-    padding-inline-start: var(--context-menu-mac-padding) !important;
+    @include _layout_init_mac_text;
   }
 
   /* Checkbox menuitem, None iconic menu */
   #{selector.nest($_nestedPopupPadding, "menuitem[checked=\"true\"], menu:not(.menu-iconic)")} {
-    padding-inline-start: calc(var(--context-menu-background-padding) + var(--context-menu-mac-padding)) !important;
+    @include _layout_init_mac_others;
   }
 
   /* Global Menu */
diff --git a/src/icons/_layout_menu_common.scss b/src/icons/_layout_menu_common.scss
new file mode 100644
index 00000000..35e449f2
--- /dev/null
+++ b/src/icons/_layout_menu_common.scss
@@ -0,0 +1,91 @@
+$_initialMenus: selector.append(
+  "menupopup menuitem, menupopup menu",
+  ":not([type=\"checkbox\"][checked=\"true\"], [type=\"radio\"])"
+);
+@mixin _initial_menus() {
+  -moz-appearance: none !important; /* Linux: menulist */
+}
+
+// Icon
+@mixin _layout_icon_menus() {
+  /* Color */
+  -moz-context-properties: fill, fill-opacity !important;
+  fill: currentColor !important;
+
+  /* Layout */
+  background-size: 16px !important;
+  background-repeat: no-repeat !important;
+  background-image: var(--menuitem-image);
+}
+
+@mixin _layout_icon_native_menus() {
+  @include NativeMenu {
+    list-style-image: var(--menuitem-image, url("../icons/blank.svg")) !important;
+  }
+}
+
+// Padding
+@mixin _layout_root_padding() {
+  :root {
+    --context-menu-background-padding-default: 5px;
+    --context-menu-background-padding: var(--context-menu-background-padding-default);
+  }
+}
+@mixin _layout_init_padding() {
+  background-position: left var(--context-menu-background-padding) center !important;
+  padding-inline-start: var(--context-menu-background-padding) !important;
+}
+
+@mixin _layout_root_win7_8() {
+  @include OS($win7) {
+    :root {
+      --context-menu-background-padding-default: 2px;
+    }
+  }
+  @include OS($win8) {
+    :root {
+      --context-menu-background-padding-default: 3px;
+    }
+  }
+}
+@mixin _layout_init_win7_8() {
+  background-position: left var(--context-menu-background-padding) center !important;
+  padding-inline-start: 0 !important;
+}
+
+@mixin _layout_root_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));
+  }
+}
+@mixin _layout_init_win10() {
+  padding-inline-start: var(--menu-background-padding-default) !important;
+  margin-left: 0 !important;
+}
+
+@mixin _layout_root_linux() {
+  :root {
+    --context-menu-background-padding-default: 6px;
+  }
+}
+@mixin _layout_init_linux() {
+  padding-inline-start: 3px;
+}
+
+@mixin _layout_root_mac() {
+  :root {
+    --context-menu-background-padding-default: 10px;
+    --context-menu-mac-padding: 21px;
+  }
+}
+@mixin _layout_init_mac_width() {
+  padding-inline-end: var(--context-menu-background-padding) !important;
+}
+@mixin _layout_init_mac_text() {
+  padding-inline-start: var(--context-menu-mac-padding) !important;
+}
+@mixin _layout_init_mac_others() {
+  padding-inline-start: calc(var(--context-menu-background-padding) + var(--context-menu-mac-padding)) !important;
+}
diff --git a/src/leptonContent.scss b/src/leptonContent.scss
index b9496841..780b42bf 100644
--- a/src/leptonContent.scss
+++ b/src/leptonContent.scss
@@ -3,6 +3,7 @@
 @use "utils/color_scheme" as *;
 @use "utils/native_menu" as *;
 @use "utils/proton_elements" as Proton;
+@use "sass:selector";
 
 @namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 @namespace html url("http://www.w3.org/1999/xhtml");
diff --git a/src/library/_contents_menu.scss b/src/library/_contents_menu.scss
index 59ed236a..e3b3e3fa 100644
--- a/src/library/_contents_menu.scss
+++ b/src/library/_contents_menu.scss
@@ -1,8 +1,4 @@
-menupopup menuitem:not([type="checkbox"], [type="radio"]),
-menupopup menu:not([type="checkbox"], [type="radio"]),
-#main-menubar > menu {
-  -moz-appearance: none !important; /* Linux: menulist */
-}
+@import "../icons/layout_menu_common";
 
 //-- Mixin ---------------------------------------------------------------------
 @function _library_iconTargetSelector($target: "menu") {
@@ -35,32 +31,23 @@ $_library_menuSelector: _library_iconTargetSelector("menu");
 
 //------------------------------------------------------------------------------
 
+#{$_initialMenus} {
+  @include _initial_menus;
+}
+
 @include _library_contextMenu {
-  /* Color */
-  -moz-context-properties: fill, fill-opacity !important;
-  fill: currentColor !important;
-
-  /* Layout */
-  background-size: 16px !important;
-  background-repeat: no-repeat !important;
-  background-image: var(--menuitem-image);
+  @include _layout_icon_menus;
 }
 
 /* For native context menus */
-@include NativeMenu {
-  @include _library_nativeContextMenu {
-    list-style-image: var(--menuitem-image) !important;
-  }
+@include _library_nativeContextMenu {
+  @include _layout_icon_native_menus;
 }
 
 /* Padding */
-:root {
-  --context-menu-background-padding-default: 5px;
-  --context-menu-background-padding: var(--context-menu-background-padding-default);
-}
+@include _layout_root_padding;
 @include _library_contextMenu {
-  background-position: left var(--context-menu-background-padding) center !important;
-  padding-inline-start: var(--context-menu-background-padding) !important;
+  @include _layout_init_padding;
 }
 
 /* Padding - Windows */
@@ -77,66 +64,44 @@ $_library_menuSelector: _library_iconTargetSelector("menu");
   }
 }
 
-@include OS($win7) {
-  :root {
-    --context-menu-background-padding-default: 2px;
-  }
-}
-@include OS($win8) {
-  :root {
-    --context-menu-background-padding-default: 3px;
-  }
-}
+@include _layout_root_win7_8;
 @include OS($win7, $win8) {
   @include _library_contextMenu {
-    background-position: left var(--context-menu-background-padding) center !important;
-    padding-inline-start: 0 !important;
+    @include _layout_init_win7_8();
   }
 }
 @include OS($win10) {
-  :root {
-    --context-menu-background-padding: 1em;
-    --context-menu-text-padding: 24px; /* 16px + 8px */
-    --menu-background-padding-default: calc(
-      var(--context-menu-background-padding) + var(--context-menu-text-padding)
-    );
-  }
+  @include _layout_root_win10;
 
   @include _library_contextMenu {
-    padding-inline-start: var(--menu-background-padding-default) !important;
-    margin-left: 0 !important;
+    @include _layout_init_win10;
   }
 }
 
 /* Padding - Linux */
 @include OS($linux) {
-  :root {
-    --context-menu-background-padding-default: 6px;
-  }
+  @include _layout_root_linux;
 }
 
 /* Padding - Mac */
 @include OS($mac) {
-  :root {
-    --context-menu-background-padding-default: 10px;
-    --context-menu-mac-padding: 21px;
-  }
+  @include _layout_root_mac;
 
   /* context menu width */
   #placesContext #{$_library_menuitemSelector},
   #placesContext #{$_library_menuSelector} {
-    padding-inline-end: var(--context-menu-background-padding) !important;
+    @include _layout_init_mac_width;
 
     > .menu-text {
       /* text position */
-      padding-inline-start: var(--context-menu-mac-padding) !important;
+      @include _layout_init_mac_text;
     }
   }
 
   /* Checkbox menuitem, None iconic menu */
   #placesContext menuitem[type="checkbox"],
   #placesContext menu:not(.menu-iconic) {
-    padding-inline-start: calc(var(--context-menu-background-padding) + var(--context-menu-mac-padding)) !important;
+    @include _layout_init_mac_others;
   }
 }
 

From f866a9110934bd9e5d03c6d97e7603db2afc2f1d Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Tue, 28 Jun 2022 05:00:38 +0900
Subject: [PATCH 07/13] Fix: Icons - Contents's checkbox align

---
 css/leptonContent.css              | 52 +++++++++---------------------
 src/icons/_layout_menu.scss        | 18 -----------
 src/icons/_layout_menu_common.scss | 25 ++++++++++++++
 src/library/_contents_menu.scss    | 36 ++++-----------------
 4 files changed, 47 insertions(+), 84 deletions(-)

diff --git a/css/leptonContent.css b/css/leptonContent.css
index 2afd5b60..1aa053f8 100644
--- a/css/leptonContent.css
+++ b/css/leptonContent.css
@@ -2319,8 +2319,8 @@
         /* Linux: menulist */
       }
 
-      #placesContext menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
-      #placesContext menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
+      #placesContext menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
+      #placesContext menu:not(.menu-iconic, .in-menulist, [checked="true"]),
       menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem,
       menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu {
         /* Color */
@@ -2336,10 +2336,8 @@
       @supports -moz-bool-pref("widget.macos.native-context-menus") or -moz-bool-pref("widget.gtk.native-context-menus") {
         :not(menu, #ContentSelectDropdown)
           > menupopup
-          > menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
-        :not(menu, #ContentSelectDropdown)
-          > menupopup
-          > menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]) {
+          > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
+        :not(menu, #ContentSelectDropdown) > menupopup > menu:not(.menu-iconic, .in-menulist, [checked="true"]) {
           list-style-image: var(--menuitem-image, url("../icons/blank.svg")) !important;
         }
       }
@@ -2350,8 +2348,8 @@
         --context-menu-background-padding: var(--context-menu-background-padding-default);
       }
 
-      #placesContext menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
-      #placesContext menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
+      #placesContext menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
+      #placesContext menu:not(.menu-iconic, .in-menulist, [checked="true"]),
       menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem,
       menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu {
         background-position: left var(--context-menu-background-padding) center !important;
@@ -2359,26 +2357,6 @@
       }
 
       /* Padding - Windows */
-      @media (-moz-os-version: windows-win7),
-        (-moz-platform: windows-win7),
-        (-moz-os-version: windows-win8),
-        (-moz-platform: windows-win8),
-        (-moz-os-version: windows-win10),
-        (-moz-platform: windows-win10) {
-        /* Checkbox */
-        :root {
-          --context-menu-text-padding: calc(
-            var(--menu-padding) + var(--context-menu-background-padding-default) + 16px
-          );
-        }
-
-        :not(menu, #ContentSelectDropdown, #context-navigation)
-          > menupopup
-          > menuitem[type="checkbox"][checked="false"]
-          > .menu-iconic-left {
-          padding-inline-start: var(--context-menu-text-padding);
-        }
-      }
       @media (-moz-os-version: windows-win7), (-moz-platform: windows-win7) {
         :root {
           --context-menu-background-padding-default: 2px;
@@ -2393,8 +2371,8 @@
         (-moz-platform: windows-win7),
         (-moz-os-version: windows-win8),
         (-moz-platform: windows-win8) {
-        #placesContext menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
-        #placesContext menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
+        #placesContext menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
+        #placesContext menu:not(.menu-iconic, .in-menulist, [checked="true"]),
         menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem,
         menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu {
           background-position: left var(--context-menu-background-padding) center !important;
@@ -2411,8 +2389,8 @@
           );
         }
 
-        #placesContext menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
-        #placesContext menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
+        #placesContext menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
+        #placesContext menu:not(.menu-iconic, .in-menulist, [checked="true"]),
         menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem,
         menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu {
           padding-inline-start: var(--menu-background-padding-default) !important;
@@ -2433,18 +2411,18 @@
         }
 
         /* context menu width */
-        #placesContext menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
-        #placesContext menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]) {
+        #placesContext menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
+        #placesContext menu:not(.menu-iconic, .in-menulist, [checked="true"]) {
           padding-inline-end: var(--context-menu-background-padding) !important;
         }
-        #placesContext menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]) > .menu-text,
-        #placesContext menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]) > .menu-text {
+        #placesContext menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]) > .menu-text,
+        #placesContext menu:not(.menu-iconic, .in-menulist, [checked="true"]) > .menu-text {
           /* text position */
           padding-inline-start: var(--context-menu-mac-padding) !important;
         }
 
         /* Checkbox menuitem, None iconic menu */
-        #placesContext menuitem[type="checkbox"],
+        #placesContext menuitem[checked="true"],
         #placesContext menu:not(.menu-iconic) {
           padding-inline-start: calc(
             var(--context-menu-background-padding) + var(--context-menu-mac-padding)
diff --git a/src/icons/_layout_menu.scss b/src/icons/_layout_menu.scss
index dd32f911..57e89223 100644
--- a/src/icons/_layout_menu.scss
+++ b/src/icons/_layout_menu.scss
@@ -1,11 +1,6 @@
 @import "./layout_menu_common";
 
 //-- Mixin ---------------------------------------------------------------------
-// Items
-$_iconNoneCommon: ".in-menulist, [checked=\"true\"]";
-$_iconMenuitem: "menuitem:not(.menuitem-iconic, .bookmark-item, #{$_iconNoneCommon})";
-$_iconMenu: "menu:not(.menu-iconic, #{$_iconNoneCommon})";
-
 // Components
 $_nestedPopupIcon: ":not(menu, #ContentSelectDropdown) > menupopup >";
 $_nestedPopupPadding: ":not(menu, #ContentSelectDropdown, #context-navigation) > menupopup >";
@@ -101,19 +96,6 @@ $_layoutCommonMenus: (
 }
 
 /* Padding - Windows */
-// @include OS($win) {
-//   /* Checkbox */
-//   :root {
-//     --context-menu-text-padding: calc(var(--menu-padding) + var(--context-menu-background-padding-default) + 16px);
-//   }
-//   :not(menu, #ContentSelectDropdown, #context-navigation)
-//     > menupopup
-//     > menuitem[type="checkbox"]:not([checked="true"])
-//     > .menu-iconic-left {
-//     padding-inline-start: var(--context-menu-text-padding);
-//   }
-// }
-
 @include _layout_root_win7_8;
 @include OS($win7, $win8) {
   @include _layoutIconMenus {
diff --git a/src/icons/_layout_menu_common.scss b/src/icons/_layout_menu_common.scss
index 35e449f2..30e557e6 100644
--- a/src/icons/_layout_menu_common.scss
+++ b/src/icons/_layout_menu_common.scss
@@ -1,3 +1,14 @@
+//-- Variables -----------------------------------------------------------------
+// Items
+// .menu-iconic, .menuitem-iconic: Alreay exist, not target.
+// .in-menulist: Not a range because it is a select menu of web content.
+// [checked="true"]: There should be a check mark instead of an icon.
+$_iconNoneCommon: ".in-menulist, [checked=\"true\"]";
+$_iconMenuitem: "menuitem:not(.menuitem-iconic, .bookmark-item, #{$_iconNoneCommon})";
+$_iconMenu: "menu:not(.menu-iconic, #{$_iconNoneCommon})";
+
+//-- Mixin ---------------------------------------------------------------------
+// Init Menu
 $_initialMenus: selector.append(
   "menupopup menuitem, menupopup menu",
   ":not([type=\"checkbox\"][checked=\"true\"], [type=\"radio\"])"
@@ -89,3 +100,17 @@ $_initialMenus: selector.append(
 @mixin _layout_init_mac_others() {
   padding-inline-start: calc(var(--context-menu-background-padding) + var(--context-menu-mac-padding)) !important;
 }
+
+// Checkbox
+// @include OS($win) {
+//   /* Checkbox */
+//   :root {
+//     --context-menu-text-padding: calc(var(--menu-padding) + var(--context-menu-background-padding-default) + 16px);
+//   }
+//   :not(menu, #ContentSelectDropdown, #context-navigation)
+//     > menupopup
+//     > menuitem[type="checkbox"]:not([checked="true"])
+//     > .menu-iconic-left {
+//     padding-inline-start: var(--context-menu-text-padding);
+//   }
+// }
diff --git a/src/library/_contents_menu.scss b/src/library/_contents_menu.scss
index e3b3e3fa..f45e968e 100644
--- a/src/library/_contents_menu.scss
+++ b/src/library/_contents_menu.scss
@@ -1,18 +1,9 @@
 @import "../icons/layout_menu_common";
 
 //-- Mixin ---------------------------------------------------------------------
-@function _library_iconTargetSelector($target: "menu") {
-  // .menu-iconic, .menuitem-iconic: Alreay exist, not target.
-  // .in-menulist: Not a range because it is a select menu of web content.
-  // [type="checkbox"], [checked="true"]: There should be a check mark instead of an icon.
-  @return "#{$target}:not(.#{$target}-iconic, .in-menulist, [type=\"checkbox\"], [checked=\"true\"])";
-}
-$_library_menuitemSelector: _library_iconTargetSelector("menuitem");
-$_library_menuSelector: _library_iconTargetSelector("menu");
-
 @mixin _library_contextMenu {
-  #placesContext #{$_library_menuitemSelector},
-  #placesContext #{$_library_menuSelector},
+  #placesContext #{$_iconMenuitem},
+  #placesContext #{$_iconMenu},
   menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem,
   menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu {
     @content;
@@ -21,10 +12,10 @@ $_library_menuSelector: _library_iconTargetSelector("menu");
 @mixin _library_nativeContextMenu {
   :not(menu, #ContentSelectDropdown)
     > menupopup
-    > #{$_library_menuitemSelector},
+    > #{$_iconMenuitem},
   :not(menu, #ContentSelectDropdown)
     > menupopup
-    > #{$_library_menuSelector} {
+    > #{$_iconMenu} {
     @content;
   }
 }
@@ -51,19 +42,6 @@ $_library_menuSelector: _library_iconTargetSelector("menu");
 }
 
 /* Padding - Windows */
-@include OS($win) {
-  /* Checkbox */
-  :root {
-    --context-menu-text-padding: calc(var(--menu-padding) + var(--context-menu-background-padding-default) + 16px);
-  }
-  :not(menu, #ContentSelectDropdown, #context-navigation)
-    > menupopup
-    > menuitem[type="checkbox"][checked="false"]
-    > .menu-iconic-left {
-    padding-inline-start: var(--context-menu-text-padding);
-  }
-}
-
 @include _layout_root_win7_8;
 @include OS($win7, $win8) {
   @include _library_contextMenu {
@@ -88,8 +66,8 @@ $_library_menuSelector: _library_iconTargetSelector("menu");
   @include _layout_root_mac;
 
   /* context menu width */
-  #placesContext #{$_library_menuitemSelector},
-  #placesContext #{$_library_menuSelector} {
+  #placesContext #{$_iconMenuitem},
+  #placesContext #{$_iconMenu} {
     @include _layout_init_mac_width;
 
     > .menu-text {
@@ -99,7 +77,7 @@ $_library_menuSelector: _library_iconTargetSelector("menu");
   }
 
   /* Checkbox menuitem, None iconic menu */
-  #placesContext menuitem[type="checkbox"],
+  #placesContext menuitem[checked="true"],
   #placesContext menu:not(.menu-iconic) {
     @include _layout_init_mac_others;
   }

From 000b76e1ecd832ca8b3af2b2e04619aa6a34425d Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Tue, 28 Jun 2022 05:16:43 +0900
Subject: [PATCH 08/13] Clean: Icons - Layout variables

---
 src/icons/_layout_menu.scss        | 24 +-----------------------
 src/icons/_layout_menu_common.scss | 24 ++++++++++++++++++++++++
 src/library/_contents_menu.scss    | 16 +++-------------
 3 files changed, 28 insertions(+), 36 deletions(-)

diff --git a/src/icons/_layout_menu.scss b/src/icons/_layout_menu.scss
index 57e89223..fb0be852 100644
--- a/src/icons/_layout_menu.scss
+++ b/src/icons/_layout_menu.scss
@@ -2,29 +2,6 @@
 
 //-- Mixin ---------------------------------------------------------------------
 // Components
-$_nestedPopupIcon: ":not(menu, #ContentSelectDropdown) > menupopup >";
-$_nestedPopupPadding: ":not(menu, #ContentSelectDropdown, #context-navigation) > menupopup >";
-$_iconMenuPopup: "menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)";
-
-$_nestedPopupIconMenus: selector.nest(
-  $_nestedPopupIcon,
-  "#{$_iconMenuitem}, #{$_iconMenu}"
-);
-$_nestedPopupPaddingMenus: selector.nest(
-  $_nestedPopupPadding,
-  "#{$_iconMenuitem}, #{$_iconMenu}"
-);
-$_iconMenuPopupMenus: selector.nest(
-  $_iconMenuPopup,
-  "#{$_iconMenuitem}, #{$_iconMenu}"
-);
-
-$_globalMenus: "#main-menubar > menu";
-$_libraryMenuitem: "menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem";
-$_libraryMenu: "menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu";
-$_sendTabMenuitem: "menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup, #context-sendlinktodevice-popup) > menuitem";
-$_otherIconMenu: ".openintabs-menuitem, #blockedPopupDontShowMessage, #BMB_viewBookmarksToolbar";
-
 $_layoutCommonMenus: (
   $_iconMenuPopupMenus,
   $_libraryMenuitem,
@@ -54,6 +31,7 @@ $_layoutCommonMenus: (
 }
 
 //------------------------------------------------------------------------------
+
 #{$_initialMenus},
 #{$_globalMenus} {
   @include _initial_menus;
diff --git a/src/icons/_layout_menu_common.scss b/src/icons/_layout_menu_common.scss
index 30e557e6..737b5e73 100644
--- a/src/icons/_layout_menu_common.scss
+++ b/src/icons/_layout_menu_common.scss
@@ -7,6 +7,30 @@ $_iconNoneCommon: ".in-menulist, [checked=\"true\"]";
 $_iconMenuitem: "menuitem:not(.menuitem-iconic, .bookmark-item, #{$_iconNoneCommon})";
 $_iconMenu: "menu:not(.menu-iconic, #{$_iconNoneCommon})";
 
+// Components
+$_nestedPopupIcon: ":not(menu, #ContentSelectDropdown) > menupopup >";
+$_nestedPopupPadding: ":not(menu, #ContentSelectDropdown, #context-navigation) > menupopup >";
+$_iconMenuPopup: "menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)";
+
+$_nestedPopupIconMenus: selector.nest(
+  $_nestedPopupIcon,
+  "#{$_iconMenuitem}, #{$_iconMenu}"
+);
+$_nestedPopupPaddingMenus: selector.nest(
+  $_nestedPopupPadding,
+  "#{$_iconMenuitem}, #{$_iconMenu}"
+);
+$_iconMenuPopupMenus: selector.nest(
+  $_iconMenuPopup,
+  "#{$_iconMenuitem}, #{$_iconMenu}"
+);
+
+$_globalMenus: "#main-menubar > menu";
+$_libraryMenuitem: "menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem";
+$_libraryMenu: "menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu";
+$_sendTabMenuitem: "menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup, #context-sendlinktodevice-popup) > menuitem";
+$_otherIconMenu: ".openintabs-menuitem, #blockedPopupDontShowMessage, #BMB_viewBookmarksToolbar";
+
 //-- Mixin ---------------------------------------------------------------------
 // Init Menu
 $_initialMenus: selector.append(
diff --git a/src/library/_contents_menu.scss b/src/library/_contents_menu.scss
index f45e968e..659104c7 100644
--- a/src/library/_contents_menu.scss
+++ b/src/library/_contents_menu.scss
@@ -4,18 +4,8 @@
 @mixin _library_contextMenu {
   #placesContext #{$_iconMenuitem},
   #placesContext #{$_iconMenu},
-  menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem,
-  menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu {
-    @content;
-  }
-}
-@mixin _library_nativeContextMenu {
-  :not(menu, #ContentSelectDropdown)
-    > menupopup
-    > #{$_iconMenuitem},
-  :not(menu, #ContentSelectDropdown)
-    > menupopup
-    > #{$_iconMenu} {
+  #{$_libraryMenuitem},
+  #{$_libraryMenu} {
     @content;
   }
 }
@@ -31,7 +21,7 @@
 }
 
 /* For native context menus */
-@include _library_nativeContextMenu {
+#{$_nestedPopupIconMenus} {
   @include _layout_icon_native_menus;
 }
 

From bfcd1e91c6170d14365c23e8175e476b4adea87e Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Wed, 29 Jun 2022 01:03:53 +0900
Subject: [PATCH 09/13] Clean: Icons - Separated downloads

---
 css/leptonChrome.css                   | 112 ++++++++++++-------------
 src/icons/_context_menu.scss           |   1 +
 src/icons/context_menu/_downloads.scss |  49 +++++++++++
 src/icons/context_menu/_others.scss    |  50 -----------
 4 files changed, 106 insertions(+), 106 deletions(-)
 create mode 100644 src/icons/context_menu/_downloads.scss

diff --git a/css/leptonChrome.css b/css/leptonChrome.css
index 8464ee4a..88fce5a2 100644
--- a/css/leptonChrome.css
+++ b/css/leptonChrome.css
@@ -6806,6 +6806,62 @@
         --menuitem-image: url("chrome://browser/skin/bookmark.svg");
       }
     }
+    /*= downloadsContextMenu =====================================================*/
+    .downloadPauseMenuItem {
+      --menuitem-image: url("chrome://global/skin/media/pause-fill.svg");
+    }
+
+    .downloadResumeMenuItem {
+      --menuitem-image: url("chrome://global/skin/media/play-fill.svg");
+    }
+
+    .downloadUnblockMenuItem {
+      --menuitem-image: url("../icons/checkmark-circle.svg");
+    }
+
+    .downloadUseSystemDefaultMenuItem {
+      --menuitem-image: url("chrome://browser/skin/open.svg");
+    }
+
+    .downloadAlwaysUseSystemDefaultMenuItem {
+      /* checkbox */
+      --menuitem-image: url("../icons/folder-globe.svg");
+    }
+
+    .downloadAlwaysOpenSimilarFilesMenuItem {
+      /* checkbox */
+      --menuitem-image: url("../icons/fluid.svg");
+    }
+
+    .downloadShowMenuItem {
+      --menuitem-image: url("chrome://global/skin/icons/folder.svg");
+    }
+    @supports -moz-bool-pref("userChrome.icon.library") {
+      .downloadShowMenuItem {
+        --menuitem-image: url("../icons/folder.svg");
+      }
+    }
+
+    #downloadsContextMenu > menuitem[command="downloadsCmd_openReferrer"] {
+      --menuitem-image: url("../icons/link-square.svg");
+    }
+    #downloadsContextMenu > menuitem[command="downloadsCmd_copyLocation"] {
+      --menuitem-image: url("../icons/link.svg");
+    }
+
+    .downloadDeleteFileMenuItem {
+      --menuitem-image: url("chrome://global/skin/icons/delete.svg");
+    }
+
+    .downloadRemoveFromHistoryMenuItem {
+      --menuitem-image: url("../icons/eraser.svg");
+    }
+
+    #downloadsContextMenu > menuitem[command="downloadsCmd_clearList"],
+    #downloadsContextMenu > menuitem[command="downloadsCmd_clearDownloads"] {
+      --menuitem-image: url("../icons/broom.svg");
+    }
+
     /*= placeContext =============================================================*/
     #placesContext_open {
       --menuitem-image: url("../icons/link-square.svg");
@@ -6973,62 +7029,6 @@
       --menuitem-image: url("../icons/eye-tracking-off.svg");
     }
 
-    /*= downloadsContextMenu =====================================================*/
-    .downloadPauseMenuItem {
-      --menuitem-image: url("chrome://global/skin/media/pause-fill.svg");
-    }
-
-    .downloadResumeMenuItem {
-      --menuitem-image: url("chrome://global/skin/media/play-fill.svg");
-    }
-
-    .downloadUnblockMenuItem {
-      --menuitem-image: url("../icons/checkmark-circle.svg");
-    }
-
-    .downloadUseSystemDefaultMenuItem {
-      --menuitem-image: url("chrome://browser/skin/open.svg");
-    }
-
-    .downloadAlwaysUseSystemDefaultMenuItem {
-      /* checkbox */
-      --menuitem-image: url("../icons/folder-globe.svg");
-    }
-
-    .downloadAlwaysOpenSimilarFilesMenuItem {
-      /* checkbox */
-      --menuitem-image: url("../icons/fluid.svg");
-    }
-
-    .downloadShowMenuItem {
-      --menuitem-image: url("chrome://global/skin/icons/folder.svg");
-    }
-    @supports -moz-bool-pref("userChrome.icon.library") {
-      .downloadShowMenuItem {
-        --menuitem-image: url("../icons/folder.svg");
-      }
-    }
-
-    #downloadsContextMenu > menuitem[command="downloadsCmd_openReferrer"] {
-      --menuitem-image: url("../icons/link-square.svg");
-    }
-    #downloadsContextMenu > menuitem[command="downloadsCmd_copyLocation"] {
-      --menuitem-image: url("../icons/link.svg");
-    }
-
-    .downloadDeleteFileMenuItem {
-      --menuitem-image: url("chrome://global/skin/icons/delete.svg");
-    }
-
-    .downloadRemoveFromHistoryMenuItem {
-      --menuitem-image: url("../icons/eraser.svg");
-    }
-
-    #downloadsContextMenu > menuitem[command="downloadsCmd_clearList"],
-    #downloadsContextMenu > menuitem[command="downloadsCmd_clearDownloads"] {
-      --menuitem-image: url("../icons/broom.svg");
-    }
-
     /*= SyncedTabsSidebarContext =================================================*/
     #syncedTabsOpenSelected {
       --menuitem-image: url("../icons/link-square.svg");
diff --git a/src/icons/_context_menu.scss b/src/icons/_context_menu.scss
index 4fb60ca2..df54e0ff 100644
--- a/src/icons/_context_menu.scss
+++ b/src/icons/_context_menu.scss
@@ -1,5 +1,6 @@
 /** Context Menu - Icons ******************************************************/
 @import "context_menu/tab_toolbar.scss";
 @import "context_menu/content_area.scss";
+@import "context_menu/downloads";
 @import "context_menu/place";
 @import "context_menu/others";
diff --git a/src/icons/context_menu/_downloads.scss b/src/icons/context_menu/_downloads.scss
new file mode 100644
index 00000000..63b0b564
--- /dev/null
+++ b/src/icons/context_menu/_downloads.scss
@@ -0,0 +1,49 @@
+/*= downloadsContextMenu =====================================================*/
+.downloadPauseMenuItem {
+  --menuitem-image: url("chrome://global/skin/media/pause-fill.svg");
+}
+.downloadResumeMenuItem {
+  --menuitem-image: url("chrome://global/skin/media/play-fill.svg");
+}
+.downloadUnblockMenuItem {
+  --menuitem-image: url("../icons/checkmark-circle.svg");
+}
+.downloadUseSystemDefaultMenuItem {
+  --menuitem-image: url("chrome://browser/skin/open.svg");
+}
+.downloadAlwaysUseSystemDefaultMenuItem {
+  /* checkbox */
+  --menuitem-image: url("../icons/folder-globe.svg");
+}
+.downloadAlwaysOpenSimilarFilesMenuItem {
+  /* checkbox */
+  --menuitem-image: url("../icons/fluid.svg");
+}
+.downloadShowMenuItem {
+  --menuitem-image: url("chrome://global/skin/icons/folder.svg");
+  @include Option("userChrome.icon.library") {
+    --menuitem-image: url("../icons/folder.svg");
+  }
+}
+
+#downloadsContextMenu > menuitem {
+  &[command="downloadsCmd_openReferrer"] {
+    --menuitem-image: url("../icons/link-square.svg");
+  }
+  &[command="downloadsCmd_copyLocation"] {
+    --menuitem-image: url("../icons/link.svg");
+  }
+}
+
+.downloadDeleteFileMenuItem {
+  --menuitem-image: url("chrome://global/skin/icons/delete.svg");
+}
+.downloadRemoveFromHistoryMenuItem {
+  --menuitem-image: url("../icons/eraser.svg");
+}
+#downloadsContextMenu > menuitem {
+  &[command="downloadsCmd_clearList"],
+  &[command="downloadsCmd_clearDownloads"] {
+    --menuitem-image: url("../icons/broom.svg");
+  }
+}
diff --git a/src/icons/context_menu/_others.scss b/src/icons/context_menu/_others.scss
index 262b58dc..2f55da56 100644
--- a/src/icons/context_menu/_others.scss
+++ b/src/icons/context_menu/_others.scss
@@ -62,56 +62,6 @@
   --menuitem-image: url("../icons/eye-tracking-off.svg");
 }
 
-/*= downloadsContextMenu =====================================================*/
-.downloadPauseMenuItem {
-  --menuitem-image: url("chrome://global/skin/media/pause-fill.svg");
-}
-.downloadResumeMenuItem {
-  --menuitem-image: url("chrome://global/skin/media/play-fill.svg");
-}
-.downloadUnblockMenuItem {
-  --menuitem-image: url("../icons/checkmark-circle.svg");
-}
-.downloadUseSystemDefaultMenuItem {
-  --menuitem-image: url("chrome://browser/skin/open.svg");
-}
-.downloadAlwaysUseSystemDefaultMenuItem {
-  /* checkbox */
-  --menuitem-image: url("../icons/folder-globe.svg");
-}
-.downloadAlwaysOpenSimilarFilesMenuItem {
-  /* checkbox */
-  --menuitem-image: url("../icons/fluid.svg");
-}
-.downloadShowMenuItem {
-  --menuitem-image: url("chrome://global/skin/icons/folder.svg");
-  @include Option("userChrome.icon.library") {
-    --menuitem-image: url("../icons/folder.svg");
-  }
-}
-
-#downloadsContextMenu > menuitem {
-  &[command="downloadsCmd_openReferrer"] {
-    --menuitem-image: url("../icons/link-square.svg");
-  }
-  &[command="downloadsCmd_copyLocation"] {
-    --menuitem-image: url("../icons/link.svg");
-  }
-}
-
-.downloadDeleteFileMenuItem {
-  --menuitem-image: url("chrome://global/skin/icons/delete.svg");
-}
-.downloadRemoveFromHistoryMenuItem {
-  --menuitem-image: url("../icons/eraser.svg");
-}
-#downloadsContextMenu > menuitem {
-  &[command="downloadsCmd_clearList"],
-  &[command="downloadsCmd_clearDownloads"] {
-    --menuitem-image: url("../icons/broom.svg");
-  }
-}
-
 /*= SyncedTabsSidebarContext =================================================*/
 #syncedTabsOpenSelected {
   --menuitem-image: url("../icons/link-square.svg");

From 80c25b7b72b7df2d7ec8c704ac18f5c831afed3f Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Wed, 29 Jun 2022 02:42:01 +0900
Subject: [PATCH 10/13] Fix: Icons - Library contents menu

---
 css/leptonChrome.css                   |  22 +++--
 css/leptonContent.css                  | 121 ++++++++++++++++++++-----
 src/contents/_proton_color.scss        |   1 +
 src/icons/_layout_menu_common.scss     |   4 +-
 src/icons/context_menu/_downloads.scss |   2 +
 src/library/_contents_menu.scss        |  17 ++--
 6 files changed, 129 insertions(+), 38 deletions(-)

diff --git a/css/leptonChrome.css b/css/leptonChrome.css
index 88fce5a2..5e0f1a97 100644
--- a/css/leptonChrome.css
+++ b/css/leptonChrome.css
@@ -6034,8 +6034,9 @@
     menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
   menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
     menu:not(.menu-iconic, .in-menulist, [checked="true"]),
-  menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem,
-  menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu,
+  menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup)
+    > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
+  menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu:not(.menu-iconic, .in-menulist, [checked="true"]),
   menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup, #context-sendlinktodevice-popup)
     > menuitem,
   .openintabs-menuitem,
@@ -6078,8 +6079,9 @@
     menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
   menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
     menu:not(.menu-iconic, .in-menulist, [checked="true"]),
-  menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem,
-  menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu,
+  menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup)
+    > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
+  menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu:not(.menu-iconic, .in-menulist, [checked="true"]),
   menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup, #context-sendlinktodevice-popup)
     > menuitem,
   .openintabs-menuitem,
@@ -6135,8 +6137,9 @@
       menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
     menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
       menu:not(.menu-iconic, .in-menulist, [checked="true"]),
-    menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem,
-    menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu,
+    menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup)
+      > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
+    menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu:not(.menu-iconic, .in-menulist, [checked="true"]),
     menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup, #context-sendlinktodevice-popup)
       > menuitem,
     .openintabs-menuitem,
@@ -6166,8 +6169,9 @@
       menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
     menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
       menu:not(.menu-iconic, .in-menulist, [checked="true"]),
-    menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem,
-    menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu,
+    menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup)
+      > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
+    menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu:not(.menu-iconic, .in-menulist, [checked="true"]),
     menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup, #context-sendlinktodevice-popup)
       > menuitem,
     .openintabs-menuitem,
@@ -6842,9 +6846,11 @@
       }
     }
 
+    #downloadsContextMenu > menuitem.downloadOpenReferrerMenuItem,
     #downloadsContextMenu > menuitem[command="downloadsCmd_openReferrer"] {
       --menuitem-image: url("../icons/link-square.svg");
     }
+    #downloadsContextMenu > menuitem.downloadCopyLocationMenuItem,
     #downloadsContextMenu > menuitem[command="downloadsCmd_copyLocation"] {
       --menuitem-image: url("../icons/link.svg");
     }
diff --git a/css/leptonContent.css b/css/leptonContent.css
index 1aa053f8..f9ff1c62 100644
--- a/css/leptonContent.css
+++ b/css/leptonContent.css
@@ -540,6 +540,7 @@
 /*= Fully Dark Mode - Dark Mode Colors =======================================*/
 @supports -moz-bool-pref("userContent.page.proton_color") {
   @-moz-document url-prefix("about:"),
+               url-prefix("chrome://browser/content/places/places.xhtml"),
                url-prefix("https://addons.mozilla.org"),
                url-prefix("https://support.mozilla.org"),
                url-prefix("https://accounts.firefox.com"),
@@ -2319,10 +2320,13 @@
         /* Linux: menulist */
       }
 
-      #placesContext menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
-      #placesContext menu:not(.menu-iconic, .in-menulist, [checked="true"]),
-      menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem,
-      menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu {
+      menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)
+        menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
+      menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)
+        menu:not(.menu-iconic, .in-menulist, [checked="true"]),
+      menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup)
+        > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
+      menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu:not(.menu-iconic, .in-menulist, [checked="true"]) {
         /* Color */
         -moz-context-properties: fill, fill-opacity !important;
         fill: currentColor !important;
@@ -2348,10 +2352,13 @@
         --context-menu-background-padding: var(--context-menu-background-padding-default);
       }
 
-      #placesContext menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
-      #placesContext menu:not(.menu-iconic, .in-menulist, [checked="true"]),
-      menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem,
-      menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu {
+      menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)
+        menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
+      menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)
+        menu:not(.menu-iconic, .in-menulist, [checked="true"]),
+      menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup)
+        > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
+      menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu:not(.menu-iconic, .in-menulist, [checked="true"]) {
         background-position: left var(--context-menu-background-padding) center !important;
         padding-inline-start: var(--context-menu-background-padding) !important;
       }
@@ -2371,10 +2378,13 @@
         (-moz-platform: windows-win7),
         (-moz-os-version: windows-win8),
         (-moz-platform: windows-win8) {
-        #placesContext menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
-        #placesContext menu:not(.menu-iconic, .in-menulist, [checked="true"]),
-        menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem,
-        menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu {
+        menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)
+          menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
+        menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)
+          menu:not(.menu-iconic, .in-menulist, [checked="true"]),
+        menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup)
+          > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
+        menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu:not(.menu-iconic, .in-menulist, [checked="true"]) {
           background-position: left var(--context-menu-background-padding) center !important;
           padding-inline-start: 0 !important;
         }
@@ -2389,10 +2399,13 @@
           );
         }
 
-        #placesContext menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
-        #placesContext menu:not(.menu-iconic, .in-menulist, [checked="true"]),
-        menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem,
-        menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu {
+        menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)
+          menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
+        menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)
+          menu:not(.menu-iconic, .in-menulist, [checked="true"]),
+        menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup)
+          > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
+        menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu:not(.menu-iconic, .in-menulist, [checked="true"]) {
           padding-inline-start: var(--menu-background-padding-default) !important;
           margin-left: 0 !important;
         }
@@ -2411,25 +2424,89 @@
         }
 
         /* context menu width */
-        #placesContext menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
-        #placesContext menu:not(.menu-iconic, .in-menulist, [checked="true"]) {
+        menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)
+          menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
+        menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)
+          menu:not(.menu-iconic, .in-menulist, [checked="true"]) {
           padding-inline-end: var(--context-menu-background-padding) !important;
         }
-        #placesContext menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]) > .menu-text,
-        #placesContext menu:not(.menu-iconic, .in-menulist, [checked="true"]) > .menu-text {
+        menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)
+          menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"])
+          > .menu-text,
+        menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)
+          menu:not(.menu-iconic, .in-menulist, [checked="true"])
+          > .menu-text {
           /* text position */
           padding-inline-start: var(--context-menu-mac-padding) !important;
         }
 
         /* Checkbox menuitem, None iconic menu */
-        #placesContext menuitem[checked="true"],
-        #placesContext menu:not(.menu-iconic) {
+        menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu) menuitem[checked="true"],
+        menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu) menu:not(.menu-iconic) {
           padding-inline-start: calc(
             var(--context-menu-background-padding) + var(--context-menu-mac-padding)
           ) !important;
         }
       }
       /* Icon lists */
+      /*= downloadsContextMenu =====================================================*/
+      .downloadPauseMenuItem {
+        --menuitem-image: url("chrome://global/skin/media/pause-fill.svg");
+      }
+
+      .downloadResumeMenuItem {
+        --menuitem-image: url("chrome://global/skin/media/play-fill.svg");
+      }
+
+      .downloadUnblockMenuItem {
+        --menuitem-image: url("../icons/checkmark-circle.svg");
+      }
+
+      .downloadUseSystemDefaultMenuItem {
+        --menuitem-image: url("chrome://browser/skin/open.svg");
+      }
+
+      .downloadAlwaysUseSystemDefaultMenuItem {
+        /* checkbox */
+        --menuitem-image: url("../icons/folder-globe.svg");
+      }
+
+      .downloadAlwaysOpenSimilarFilesMenuItem {
+        /* checkbox */
+        --menuitem-image: url("../icons/fluid.svg");
+      }
+
+      .downloadShowMenuItem {
+        --menuitem-image: url("chrome://global/skin/icons/folder.svg");
+      }
+      @supports -moz-bool-pref("userChrome.icon.library") {
+        .downloadShowMenuItem {
+          --menuitem-image: url("../icons/folder.svg");
+        }
+      }
+
+      #downloadsContextMenu > menuitem.downloadOpenReferrerMenuItem,
+      #downloadsContextMenu > menuitem[command="downloadsCmd_openReferrer"] {
+        --menuitem-image: url("../icons/link-square.svg");
+      }
+      #downloadsContextMenu > menuitem.downloadCopyLocationMenuItem,
+      #downloadsContextMenu > menuitem[command="downloadsCmd_copyLocation"] {
+        --menuitem-image: url("../icons/link.svg");
+      }
+
+      .downloadDeleteFileMenuItem {
+        --menuitem-image: url("chrome://global/skin/icons/delete.svg");
+      }
+
+      .downloadRemoveFromHistoryMenuItem {
+        --menuitem-image: url("../icons/eraser.svg");
+      }
+
+      #downloadsContextMenu > menuitem[command="downloadsCmd_clearList"],
+      #downloadsContextMenu > menuitem[command="downloadsCmd_clearDownloads"] {
+        --menuitem-image: url("../icons/broom.svg");
+      }
+
       /*= placeContext =============================================================*/
       #placesContext_open {
         --menuitem-image: url("../icons/link-square.svg");
diff --git a/src/contents/_proton_color.scss b/src/contents/_proton_color.scss
index c7dfaa89..8db37ae3 100644
--- a/src/contents/_proton_color.scss
+++ b/src/contents/_proton_color.scss
@@ -1,4 +1,5 @@
 @-moz-document url-prefix("about:"),
+               url-prefix("chrome://browser/content/places/places.xhtml"),
                url-prefix("https://addons.mozilla.org"),
                url-prefix("https://support.mozilla.org"),
                url-prefix("https://accounts.firefox.com"),
diff --git a/src/icons/_layout_menu_common.scss b/src/icons/_layout_menu_common.scss
index 737b5e73..3d3a92c5 100644
--- a/src/icons/_layout_menu_common.scss
+++ b/src/icons/_layout_menu_common.scss
@@ -26,8 +26,8 @@ $_iconMenuPopupMenus: selector.nest(
 );
 
 $_globalMenus: "#main-menubar > menu";
-$_libraryMenuitem: "menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem";
-$_libraryMenu: "menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu";
+$_libraryMenuitem: "menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > #{$_iconMenuitem}";
+$_libraryMenu: "menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > #{$_iconMenu}";
 $_sendTabMenuitem: "menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup, #context-sendlinktodevice-popup) > menuitem";
 $_otherIconMenu: ".openintabs-menuitem, #blockedPopupDontShowMessage, #BMB_viewBookmarksToolbar";
 
diff --git a/src/icons/context_menu/_downloads.scss b/src/icons/context_menu/_downloads.scss
index 63b0b564..957853db 100644
--- a/src/icons/context_menu/_downloads.scss
+++ b/src/icons/context_menu/_downloads.scss
@@ -27,9 +27,11 @@
 }
 
 #downloadsContextMenu > menuitem {
+  &.downloadOpenReferrerMenuItem,
   &[command="downloadsCmd_openReferrer"] {
     --menuitem-image: url("../icons/link-square.svg");
   }
+  &.downloadCopyLocationMenuItem,
   &[command="downloadsCmd_copyLocation"] {
     --menuitem-image: url("../icons/link.svg");
   }
diff --git a/src/library/_contents_menu.scss b/src/library/_contents_menu.scss
index 659104c7..a7a127df 100644
--- a/src/library/_contents_menu.scss
+++ b/src/library/_contents_menu.scss
@@ -1,9 +1,14 @@
 @import "../icons/layout_menu_common";
 
 //-- Mixin ---------------------------------------------------------------------
+$_placesPopupSet: "menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)";
+$_placesPopupSetMenus: selector.nest(
+  $_placesPopupSet,
+  "#{$_iconMenuitem}, #{$_iconMenu}"
+);
+
 @mixin _library_contextMenu {
-  #placesContext #{$_iconMenuitem},
-  #placesContext #{$_iconMenu},
+  #{$_placesPopupSetMenus},
   #{$_libraryMenuitem},
   #{$_libraryMenu} {
     @content;
@@ -56,8 +61,7 @@
   @include _layout_root_mac;
 
   /* context menu width */
-  #placesContext #{$_iconMenuitem},
-  #placesContext #{$_iconMenu} {
+  #{$_placesPopupSetMenus} {
     @include _layout_init_mac_width;
 
     > .menu-text {
@@ -67,12 +71,13 @@
   }
 
   /* Checkbox menuitem, None iconic menu */
-  #placesContext menuitem[checked="true"],
-  #placesContext menu:not(.menu-iconic) {
+  #{$_placesPopupSet} menuitem[checked="true"],
+  #{$_placesPopupSet} menu:not(.menu-iconic) {
     @include _layout_init_mac_others;
   }
 }
 
 /* Icon lists */
+@import "../icons/context_menu/downloads";
 @import "../icons/context_menu/place";
 @import "../icons/library";

From d3c6ade4b451ae092d8da4372dfae813d179c501 Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Wed, 29 Jun 2022 03:21:42 +0900
Subject: [PATCH 11/13] Fix: Icons - Library contents popup's checkbox

---
 css/leptonContent.css           | 18 ++++++++++++++++++
 src/library/_contents_menu.scss | 12 ++++++++++++
 2 files changed, 30 insertions(+)

diff --git a/css/leptonContent.css b/css/leptonContent.css
index f9ff1c62..f67b2107 100644
--- a/css/leptonContent.css
+++ b/css/leptonContent.css
@@ -2415,6 +2415,24 @@
         :root {
           --context-menu-background-padding-default: 6px;
         }
+
+        /* Contextmenu Checkbox Unset */
+        menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu) menuitem[type="checkbox"] {
+          margin-inline: 0 !important;
+        }
+        menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)
+          menuitem[type="checkbox"]
+          > .menu-iconic-left
+          > .menu-iconic-icon {
+          margin-inline-end: 0 !important;
+        }
+        menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)
+          menuitem[type="checkbox"]:not([checked="true"])
+          > .menu-iconic-left
+          > .menu-iconic-icon {
+          border: none !important;
+          background-color: unset !important;
+        }
       }
       /* Padding - Mac */
       @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
diff --git a/src/library/_contents_menu.scss b/src/library/_contents_menu.scss
index a7a127df..cd407cb1 100644
--- a/src/library/_contents_menu.scss
+++ b/src/library/_contents_menu.scss
@@ -54,6 +54,18 @@ $_placesPopupSetMenus: selector.nest(
 /* Padding - Linux */
 @include OS($linux) {
   @include _layout_root_linux;
+
+  /* Contextmenu Checkbox Unset */
+  #{$_placesPopupSet} menuitem[type="checkbox"] {
+    margin-inline: 0 !important;
+    > .menu-iconic-left > .menu-iconic-icon {
+      margin-inline-end: 0 !important;
+    }
+    &:not([checked="true"]) > .menu-iconic-left > .menu-iconic-icon {
+      border: none !important;
+      background-color: unset !important;
+    }
+  }
 }
 
 /* Padding - Mac */

From 1f0c437273fb728f9ae15284704f779c092e68d2 Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Wed, 29 Jun 2022 03:44:49 +0900
Subject: [PATCH 12/13] Fix: Icons - `about:downloads` context menu

---
 css/leptonContent.css                         | 1511 +++++++++--------
 src/contents/_context_menu.scss               |   14 +
 src/contents/_downloads.scss                  |    4 -
 .../_layout_menu_contents.scss}               |    5 -
 src/leptonContent.scss                        |    5 +
 src/library/_contents.scss                    |    5 -
 6 files changed, 777 insertions(+), 767 deletions(-)
 create mode 100644 src/contents/_context_menu.scss
 rename src/{library/_contents_menu.scss => icons/_layout_menu_contents.scss} (94%)

diff --git a/css/leptonContent.css b/css/leptonContent.css
index f67b2107..3a1b4d41 100644
--- a/css/leptonContent.css
+++ b/css/leptonContent.css
@@ -2312,818 +2312,432 @@
         transform: scaleX(-1) !important;
       }
     }
-    /*= Context Menu ===========================================================*/
-    @supports -moz-bool-pref("userChrome.icon.context_menu") {
-      menupopup menuitem:not([type="checkbox"][checked="true"], [type="radio"]),
-      menupopup menu:not([type="checkbox"][checked="true"], [type="radio"]) {
-        -moz-appearance: none !important;
-        /* Linux: menulist */
+    @media (-moz-gtk-csd-available) {
+      /*= Layout Fixes =========================================================*/
+      menupopup menu {
+        padding-block: 4px;
       }
 
-      menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)
-        menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
-      menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)
-        menu:not(.menu-iconic, .in-menulist, [checked="true"]),
-      menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup)
-        > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
-      menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu:not(.menu-iconic, .in-menulist, [checked="true"]) {
-        /* Color */
-        -moz-context-properties: fill, fill-opacity !important;
-        fill: currentColor !important;
-        /* Layout */
-        background-size: 16px !important;
-        background-repeat: no-repeat !important;
-        background-image: var(--menuitem-image);
+      .menu-right {
+        width: 16px !important;
+        /* Original: 1ex */
+        background-image: url("chrome://global/skin/icons/arrow-right.svg");
+        background-position: right center;
       }
 
-      /* For native context menus */
-      @supports -moz-bool-pref("widget.macos.native-context-menus") or -moz-bool-pref("widget.gtk.native-context-menus") {
-        :not(menu, #ContentSelectDropdown)
-          > menupopup
-          > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
-        :not(menu, #ContentSelectDropdown) > menupopup > menu:not(.menu-iconic, .in-menulist, [checked="true"]) {
-          list-style-image: var(--menuitem-image, url("../icons/blank.svg")) !important;
+      /*= Proton ===============================================================*/
+      @supports -moz-bool-pref("userContent.page.proton") {
+        :root {
+          --organizer-color: -moz-DialogText;
+          --organizer-deemphasized-color: GrayText;
+          --organizer-toolbar-background: -moz-Dialog;
+          --organizer-pane-background: -moz-Dialog;
+          --organizer-content-background: -moz-Dialog;
+          --organizer-hover-background: SelectedItem;
+          --organizer-hover-color: SelectedItemText;
+          --organizer-selected-background: SelectedItem;
+          --organizer-selected-color: SelectedItemText;
+          --organizer-outline-color: SelectedItem;
+          --organizer-separator-color: ThreeDDarkShadow;
+          --organizer-border-color: ThreeDShadow;
+          --organizer-toolbar-field-background: Field;
+          --organizer-toolbar-field-background-focused: Field;
+          --organizer-toolbar-field-border-color: ThreeDShadow;
+          --organizer-toolbar-field-focus-border-color: var(--organizer-outline-color);
+          --organizer-toolbar-field-focus-box-shadow: unset;
+          --organizer-pane-field-border-color: ThreeDShadow;
+        }
+        @media not all and (prefers-contrast) {
+          :root {
+            --organizer-color: var(--in-content-page-color);
+            --organizer-deemphasized-color: var(--in-content-deemphasized-text);
+            --organizer-toolbar-background: rgb(249, 249, 251);
+            /* --toolbar-bgcolor */
+            --organizer-pane-background: rgb(229, 229, 235);
+            /* --lwt-accent-color */
+            --organizer-content-background: var(--in-content-page-background);
+            --organizer-hover-background: var(--in-content-button-background-hover);
+            --organizer-hover-color: var(--organizer-color);
+            --organizer-selected-background: var(--in-content-button-background-active);
+            --organizer-selected-color: var(--organizer-color);
+            --organizer-outline-color: var(--in-content-focus-outline-color);
+            --organizer-separator-color: var(--organizer-pane-field-border-color);
+            --organizer-border-color: var(--in-content-border-color);
+            --organizer-toolbar-field-background: rgb(240, 240, 244);
+            /* --lwt-accent-color */
+            --organizer-toolbar-field-background-focused: Field;
+            --organizer-toolbar-field-border-color: transparent;
+            --organizer-toolbar-field-focus-border-color: color-mix(
+              in srgb,
+              var(--organizer-outline-color) 50%,
+              transparent
+            );
+            --organizer-toolbar-field-focus-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.23);
+            --organizer-pane-field-border-color: color-mix(in srgb, currentColor 41%, transparent);
+          }
+          @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
+            :root {
+              --organizer-color: rgb(251, 251, 254);
+              --organizer-deemphasized-color: rgb(191, 191, 201);
+              --organizer-toolbar-background: rgb(43, 42, 51);
+              --organizer-pane-background: rgb(35, 34, 43);
+              --organizer-content-background: rgb(28, 27, 34);
+              --organizer-hover-background: rgb(82, 82, 94);
+              --organizer-selected-background: rgb(91, 91, 102);
+              --organizer-toolbar-field-background: var(--in-content-page-background);
+              --organizer-toolbar-field-background-focused: rgb(66, 65, 77);
+              scrollbar-color: rgba(249, 249, 250, 0.4) rgba(20, 20, 25, 0.3);
+            }
+          }
         }
-      }
-
-      /* Padding */
-      :root {
-        --context-menu-background-padding-default: 5px;
-        --context-menu-background-padding: var(--context-menu-background-padding-default);
-      }
-
-      menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)
-        menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
-      menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)
-        menu:not(.menu-iconic, .in-menulist, [checked="true"]),
-      menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup)
-        > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
-      menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu:not(.menu-iconic, .in-menulist, [checked="true"]) {
-        background-position: left var(--context-menu-background-padding) center !important;
-        padding-inline-start: var(--context-menu-background-padding) !important;
-      }
 
-      /* Padding - Windows */
-      @media (-moz-os-version: windows-win7), (-moz-platform: windows-win7) {
-        :root {
-          --context-menu-background-padding-default: 2px;
+        /*- Toolbar & Menus ------------------------------------------------------*/
+        #placesToolbar {
+          appearance: none !important;
+          background-color: var(--organizer-toolbar-background) !important;
+          color: var(--organizer-color) !important;
+          border-bottom: 1px solid var(--organizer-border-color) !important;
+          padding: 4px !important;
+          padding-inline-end: 6px !important;
         }
-      }
-      @media (-moz-os-version: windows-win8), (-moz-platform: windows-win8) {
-        :root {
-          --context-menu-background-padding-default: 3px;
-        }
-      }
-      @media (-moz-os-version: windows-win7),
-        (-moz-platform: windows-win7),
-        (-moz-os-version: windows-win8),
-        (-moz-platform: windows-win8) {
-        menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)
-          menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
-        menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)
-          menu:not(.menu-iconic, .in-menulist, [checked="true"]),
-        menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup)
-          > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
-        menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu:not(.menu-iconic, .in-menulist, [checked="true"]) {
-          background-position: left var(--context-menu-background-padding) center !important;
-          padding-inline-start: 0 !important;
+        #placesToolbar > toolbarbutton {
+          appearance: none !important;
+          padding: 5px !important;
+          border-radius: 4px !important;
         }
-      }
-      @media (-moz-os-version: windows-win10), (-moz-platform: 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)
-          );
-        }
-
-        menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)
-          menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
-        menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)
-          menu:not(.menu-iconic, .in-menulist, [checked="true"]),
-        menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup)
-          > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
-        menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu:not(.menu-iconic, .in-menulist, [checked="true"]) {
-          padding-inline-start: var(--menu-background-padding-default) !important;
-          margin-left: 0 !important;
-        }
-      }
-      /* Padding - Linux */
-      @media (-moz-gtk-csd-available) {
-        :root {
-          --context-menu-background-padding-default: 6px;
+        #placesToolbar > toolbarbutton[disabled] {
+          opacity: 0.6 !important;
+        }
+        #placesToolbar > toolbarbutton:not([disabled]):hover {
+          background-color: var(--organizer-hover-background) !important;
+          color: var(--organizer-hover-color) !important;
+        }
+        #placesToolbar > toolbarbutton:not([disabled]):hover:active {
+          background-color: var(--organizer-selected-background) !important;
+        }
+
+        #placesToolbar > toolbarbutton > .toolbarbutton-icon,
+        #placesMenu > menu > image,
+        #placesMenu > menu > .menubar-text {
+          -moz-context-properties: fill !important;
+          fill: currentColor !important;
         }
 
-        /* Contextmenu Checkbox Unset */
-        menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu) menuitem[type="checkbox"] {
-          margin-inline: 0 !important;
+        #placesMenu {
+          margin-inline-start: 6px !important;
         }
-        menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)
-          menuitem[type="checkbox"]
-          > .menu-iconic-left
-          > .menu-iconic-icon {
-          margin-inline-end: 0 !important;
+        #placesMenu > menu {
+          appearance: none !important;
+          color: var(--organizer-color) !important;
+          border-radius: 4px !important;
+          padding-block: 5px !important;
+          padding-inline-start: 5px !important;
+          margin-inline-end: 2px !important;
         }
-        menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)
-          menuitem[type="checkbox"]:not([checked="true"])
-          > .menu-iconic-left
-          > .menu-iconic-icon {
-          border: none !important;
-          background-color: unset !important;
+        #placesMenu > menu[_moz-menuactive="true"],
+        #placesMenu > menu:hover {
+          background-color: var(--organizer-hover-background) !important;
+          color: var(--organizer-hover-color) !important;
         }
-      }
-      /* Padding - Mac */
-      @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
-        :root {
-          --context-menu-background-padding-default: 10px;
-          --context-menu-mac-padding: 21px;
-        }
-
-        /* context menu width */
-        menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)
-          menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
-        menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)
-          menu:not(.menu-iconic, .in-menulist, [checked="true"]) {
-          padding-inline-end: var(--context-menu-background-padding) !important;
-        }
-        menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)
-          menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"])
-          > .menu-text,
-        menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)
-          menu:not(.menu-iconic, .in-menulist, [checked="true"])
-          > .menu-text {
-          /* text position */
-          padding-inline-start: var(--context-menu-mac-padding) !important;
-        }
-
-        /* Checkbox menuitem, None iconic menu */
-        menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu) menuitem[checked="true"],
-        menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu) menu:not(.menu-iconic) {
-          padding-inline-start: calc(
-            var(--context-menu-background-padding) + var(--context-menu-mac-padding)
-          ) !important;
+        #placesMenu > menu:hover:active,
+        #placesMenu > menu[open] {
+          background-color: var(--organizer-selected-background) !important;
+          color: var(--organizer-selected-color) !important;
+        }
+        #placesMenu > menu > .menubar-text {
+          margin-block: 0 !important;
+          /* override menu.css */
+          padding-inline-end: 4px !important;
         }
-      }
-      /* Icon lists */
-      /*= downloadsContextMenu =====================================================*/
-      .downloadPauseMenuItem {
-        --menuitem-image: url("chrome://global/skin/media/pause-fill.svg");
-      }
-
-      .downloadResumeMenuItem {
-        --menuitem-image: url("chrome://global/skin/media/play-fill.svg");
-      }
 
-      .downloadUnblockMenuItem {
-        --menuitem-image: url("../icons/checkmark-circle.svg");
-      }
+        /*- Search Bar & Input ---------------------------------------------------*/
+        #searchFilter,
+        #detailsPane html|input {
+          appearance: none !important;
+          background-color: var(--organizer-toolbar-field-background) !important;
+          color: var(--organizer-color) !important;
+          border: 1px solid var(--organizer-toolbar-field-border-color) !important;
+          border-radius: 4px !important;
+          margin: 0 !important;
+          padding-block: 2px !important;
+          min-height: 24px !important;
+        }
 
-      .downloadUseSystemDefaultMenuItem {
-        --menuitem-image: url("chrome://browser/skin/open.svg");
-      }
+        #searchFilter[focused] {
+          box-shadow: var(--organizer-toolbar-field-focus-box-shadow) !important;
+          background-color: var(--organizer-toolbar-field-background-focused) !important;
+          border-color: transparent !important;
+          outline: 2px solid var(--organizer-toolbar-field-focus-border-color) !important;
+          outline-offset: -2px !important;
+        }
 
-      .downloadAlwaysUseSystemDefaultMenuItem {
-        /* checkbox */
-        --menuitem-image: url("../icons/folder-globe.svg");
-      }
+        /*- Sidebar & Splitter ---------------------------------------------------*/
+        #placesList {
+          background-color: var(--organizer-pane-background) !important;
+        }
 
-      .downloadAlwaysOpenSimilarFilesMenuItem {
-        /* checkbox */
-        --menuitem-image: url("../icons/fluid.svg");
-      }
+        #placesView > splitter {
+          border: 0 !important;
+          border-inline-end: 1px solid var(--organizer-border-color) !important;
+          min-width: 0 !important;
+          width: 3px !important;
+          background-color: transparent !important;
+          margin-inline-start: -3px !important;
+          position: relative !important;
+        }
 
-      .downloadShowMenuItem {
-        --menuitem-image: url("chrome://global/skin/icons/folder.svg");
-      }
-      @supports -moz-bool-pref("userChrome.icon.library") {
-        .downloadShowMenuItem {
-          --menuitem-image: url("../icons/folder.svg");
+        /*- Downloads Pane -------------------------------------------------------*/
+        #downloadsRichListBox,
+        #downloadsListBox {
+          color: var(--organizer-color) !important;
+          background-color: var(--organizer-content-background) !important;
         }
-      }
 
-      #downloadsContextMenu > menuitem.downloadOpenReferrerMenuItem,
-      #downloadsContextMenu > menuitem[command="downloadsCmd_openReferrer"] {
-        --menuitem-image: url("../icons/link-square.svg");
-      }
-      #downloadsContextMenu > menuitem.downloadCopyLocationMenuItem,
-      #downloadsContextMenu > menuitem[command="downloadsCmd_copyLocation"] {
-        --menuitem-image: url("../icons/link.svg");
-      }
+        #clearDownloadsButton:focus-visible {
+          outline: 2px solid var(--organizer-outline-color) !important;
+        }
 
-      .downloadDeleteFileMenuItem {
-        --menuitem-image: url("chrome://global/skin/icons/delete.svg");
-      }
+        richlistitem[selected="true"],
+        richlistitem:hover {
+          background-color: var(--organizer-hover-background) !important;
+          color: var(--organizer-color) !important;
+        }
 
-      .downloadRemoveFromHistoryMenuItem {
-        --menuitem-image: url("../icons/eraser.svg");
-      }
+        richlistbox:where(:focus) > richlistitem[selected="true"] {
+          background-color: var(--organizer-selected-background) !important;
+        }
 
-      #downloadsContextMenu > menuitem[command="downloadsCmd_clearList"],
-      #downloadsContextMenu > menuitem[command="downloadsCmd_clearDownloads"] {
-        --menuitem-image: url("../icons/broom.svg");
-      }
-
-      /*= placeContext =============================================================*/
-      #placesContext_open {
-        --menuitem-image: url("../icons/link-square.svg");
-      }
-
-      #placesContext_openBookmarkContainer\:tabs,
-      #placesContext_openBookmarkLinks\:tabs {
-        --menuitem-image: url("../icons/movetowindow-16.svg");
-      }
-
-      #placesContext_open\:newtab,
-      #placesContext_openContainer\:tabs,
-      #placesContext_openLinks\:tabs {
-        --menuitem-image: url("chrome://browser/skin/new-tab.svg");
-      }
-
-      #placesContext_open\:newcontainertab {
-        --menuitem-image: url("../icons/container-openin-16.svg");
-      }
-
-      #placesContext_open\:newwindow {
-        --menuitem-image: url("chrome://browser/skin/window.svg");
-      }
-
-      #placesContext_open\:newprivatewindow {
-        --menuitem-image: url("chrome://browser/skin/privateBrowsing.svg");
-      }
-
-      #placesContext_show_bookmark\:info,
-      #placesContext_show\:info,
-      #placesContext_show_folder\:info {
-        --menuitem-image: url("chrome://global/skin/icons/edit.svg");
-      }
-
-      #placesContext_deleteBookmark,
-      #placesContext_deleteFolder,
-      #placesContext_delete,
-      #placesContext_delete_history {
-        --menuitem-image: url("chrome://global/skin/icons/delete.svg");
-      }
-
-      #placesContext_deleteHost {
-        --menuitem-image: url("../icons/eye-hide.svg");
-      }
-
-      #placesContext_sortBy\:name {
-        --menuitem-image: url("../icons/text-sort-ascending.svg");
-      }
-
-      #placesContext_cut {
-        --menuitem-image: url("chrome://browser/skin/edit-cut.svg");
-      }
-
-      #placesContext_copy {
-        --menuitem-image: url("../icons/edit-copy.svg");
-      }
-
-      #placesContext_paste_group {
-        --menuitem-image: url("chrome://browser/skin/edit-paste.svg");
-      }
-
-      #placesContext_new\:bookmark {
-        --menuitem-image: url("chrome://browser/skin/bookmark.svg");
-      }
+        /*- Tree -----------------------------------------------------------------*/
+        #contentView treecol {
+          /* Use box-shadow to draw a bottom border instead of border-bottom
+             * because otherwise the items on contentView won't be perfectly
+             * aligned with the items on the sidebar. */
+          box-shadow: inset 0 -1px var(--organizer-border-color) !important;
+        }
 
-      #placesContext_showInFolder,
-      #placesContext_new\:folder {
-        --menuitem-image: url("chrome://global/skin/icons/folder.svg");
-      }
-      @supports -moz-bool-pref("userChrome.icon.library") {
-        #placesContext_showInFolder,
-        #placesContext_new\:folder {
-          --menuitem-image: url("../icons/folder.svg");
+        tree {
+          background-color: var(--organizer-content-background) !important;
+          color: var(--organizer-color) !important;
         }
-      }
 
-      #placesContext_new\:separator {
-        --menuitem-image: url("../icons/vertical-line.svg");
-      }
+        treecol:not([hideheader="true"]),
+        treecolpicker {
+          appearance: none !important;
+          border: none !important;
+          background-color: var(--in-content-button-background) !important;
+          color: var(--organizer-color, inherit) !important;
+          padding: 5px 10px !important;
+        }
 
-      #placesContext_paste {
-        --menuitem-image: url("chrome://browser/skin/edit-paste.svg");
-      }
+        treecol:not([hideheader="true"], [sortable="false"]):hover,
+        treecolpicker:hover {
+          background-color: var(--organizer-hover-background) !important;
+          color: var(--organizer-color) !important;
+        }
+        treecol:not([hideheader="true"], [sortable="false"]):hover:active,
+        treecolpicker:hover:active {
+          background-color: var(--organizer-selected-background) !important;
+        }
 
-      #placesContext_createBookmark {
-        --menuitem-image: url("chrome://browser/skin/bookmark.svg");
-      }
+        treecol:not([hideheader="true"], :first-child),
+        treecolpicker {
+          padding-left: 10px !important;
+          border-inline-start-width: 1px !important;
+          border-inline-start-style: solid !important;
+          border-image: linear-gradient(
+              transparent 0%,
+              transparent 20%,
+              var(--organizer-border-color) 20%,
+              var(--organizer-border-color) 80%,
+              transparent 80%,
+              transparent 100%
+            )
+            1 1 !important;
+        }
 
-      #show-other-bookmarks_PersonalToolbar {
-        /* checkbox */
-        --menuitem-image: url("../icons/star-line-horizontal.svg");
-      }
+        treecol[sortDirection]:not([hideheader="true"]) > xul|*.treecol-sortdirection {
+          fill: currentColor !important;
+          width: 18px !important;
+          height: 18px !important;
+        }
 
-      #placesContext_showAllBookmarks {
-        --menuitem-image: url("chrome://browser/skin/bookmark-star-on-tray.svg");
-      }
+        treechildren::-moz-tree-row {
+          background-color: transparent !important;
+        }
+        treechildren::-moz-tree-row(hover) {
+          background-color: var(--organizer-hover-background) !important;
+        }
+        treechildren::-moz-tree-row(selected) {
+          background-color: var(--organizer-selected-background) !important;
+          color: var(--organizer-selected-color) !important;
+          border: 1px solid transparent !important;
+        }
+        treechildren::-moz-tree-image(hover),
+        treechildren::-moz-tree-twisty(hover),
+        treechildren::-moz-tree-cell-text(hover) {
+          color: var(--organizer-hover-color) !important;
+        }
+        treechildren::-moz-tree-image(selected),
+        treechildren::-moz-tree-twisty(selected),
+        treechildren::-moz-tree-cell-text(selected) {
+          color: var(--organizer-selected-color) !important;
+        }
+        treechildren::-moz-tree-separator {
+          height: 1px !important;
+          border-color: var(--organizer-separator-color) !important;
+        }
+        treechildren::-moz-tree-separator(hover) {
+          border-color: var(--organizer-hover-color) !important;
+        }
+        treechildren::-moz-tree-separator(selected) {
+          border-color: var(--organizer-selected-color) !important;
+        }
 
-      .openintabs-menuitem {
-        --menuitem-image: url("../icons/movetowindow-16.svg");
-      }
+        /*- Info Box -------------------------------------------------------------*/
+        #detailsPane {
+          background-color: var(--organizer-pane-background) !important;
+          color: var(--organizer-color) !important;
+          padding: 5px !important;
+          border-top: 1px solid var(--organizer-border-color) !important;
+        }
 
-      /*= organizeButtonPopup ======================================================*/
-      #newbookmark {
-        --menuitem-image: url("chrome://browser/skin/bookmark.svg");
-      }
+        #editBookmarkPanelRows .expander-up,
+        #editBookmarkPanelRows .expander-down {
+          appearance: none !important;
+          min-width: 0 !important;
+          padding: 5px !important;
+          margin: 0 !important;
+          margin-inline-end: 4px !important;
+          border: 1px solid var(--organizer-pane-field-border-color) !important;
+          border-radius: 4px !important;
+          color: var(--organizer-color) !important;
+          background-color: var(--organizer-content-background) !important;
+          -moz-context-properties: fill !important;
+          fill: currentColor !important;
+        }
+        #editBookmarkPanelRows .expander-up:hover,
+        #editBookmarkPanelRows .expander-down:hover {
+          background-color: var(--organizer-hover-background) !important;
+          color: var(--organizer-hover-color) !important;
+        }
+        #editBookmarkPanelRows .expander-up:hover:active,
+        #editBookmarkPanelRows .expander-down:hover:active {
+          background-color: var(--organizer-selected-background) !important;
+          color: var(--organizer-selected-color) !important;
+        }
+        #editBookmarkPanelRows .expander-up:focus-visible,
+        #editBookmarkPanelRows .expander-down:focus-visible {
+          outline: 2px solid var(--organizer-outline-color) !important;
+          outline-offset: -1px !important;
+        }
+        #editBookmarkPanelRows .expander-up > .button-box,
+        #editBookmarkPanelRows .expander-down > .button-box {
+          padding: 0 !important;
+        }
 
-      #newfolder {
-        --menuitem-image: url("chrome://global/skin/icons/folder.svg");
-      }
-      @supports -moz-bool-pref("userChrome.icon.library") {
-        #newfolder {
-          --menuitem-image: url("../icons/folder.svg");
+        #editBookmarkPanelRows .expander-up {
+          list-style-image: url("chrome://global/skin/icons/arrow-up-12.svg");
+        }
+        #editBookmarkPanelRows .expander-down {
+          list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg");
         }
-      }
 
-      #newseparator {
-        --menuitem-image: url("../icons/vertical-line.svg");
-      }
+        #places input {
+          border: 1px solid var(--organizer-pane-field-border-color) !important;
+          border-radius: 4px !important;
+          background-color: var(--organizer-content-background) !important;
+          color: var(--organizer-color) !important;
+          min-height: 20px !important;
+          padding-inline: 4px !important;
+        }
+        #places input:focus {
+          outline: 2px solid var(--organizer-outline-color) !important;
+          outline-offset: -1px !important;
+        }
+        #places input:not(:read-write):focus {
+          outline: none !important;
+        }
 
-      #orgUndo {
-        --menuitem-image: url("../icons/undo.svg");
-      }
+        .caption-label {
+          margin-inline-start: 8px !important;
+          color: var(--organizer-deemphasized-color) !important;
+        }
 
-      #orgCut {
-        --menuitem-image: url("chrome://browser/skin/edit-cut.svg");
-      }
-
-      #orgCopy {
-        --menuitem-image: url("../icons/edit-copy.svg");
-      }
-
-      #orgPaste {
-        --menuitem-image: url("chrome://browser/skin/edit-paste.svg");
-      }
-
-      #orgDelete {
-        --menuitem-image: url("chrome://global/skin/icons/delete.svg");
-      }
-
-      #orgSelectAll {
-        --menuitem-image: url("../icons/select-all-on.svg");
-      }
-
-      #orgClose {
-        --menuitem-image: url("chrome://global/skin/icons/close.svg");
-      }
-
-      /*= viewMenuPopup ============================================================*/
-      #viewColumns {
-        --menuitem-image: url("chrome://global/skin/icons/columnpicker.svg");
-      }
-
-      #viewSort {
-        --menuitem-image: url("../icons/text-sort-ascending.svg");
-      }
-
-      /*= maintenanceButtonPopup ===================================================*/
-      #backupBookmarks {
-        --menuitem-image: url("chrome://devtools/skin/images/datastore.svg");
-      }
-
-      #fileImport {
-        --menuitem-image: url("chrome://browser/skin/save.svg");
-      }
-
-      #fileExport {
-        --menuitem-image: url("chrome://browser/skin/open.svg");
-      }
-
-      #browserImport {
-        --menuitem-image: url("chrome://browser/skin/import.svg");
-      }
-    }
-    @media (-moz-gtk-csd-available) {
-      /*= Layout Fixes =========================================================*/
-      menupopup menu {
-        padding-block: 4px;
-      }
-
-      .menu-right {
-        width: 16px !important;
-        /* Original: 1ex */
-        background-image: url("chrome://global/skin/icons/arrow-right.svg");
-        background-position: right center;
-      }
-
-      /*= Proton ===============================================================*/
-      @supports -moz-bool-pref("userContent.page.proton") {
-        :root {
-          --organizer-color: -moz-DialogText;
-          --organizer-deemphasized-color: GrayText;
-          --organizer-toolbar-background: -moz-Dialog;
-          --organizer-pane-background: -moz-Dialog;
-          --organizer-content-background: -moz-Dialog;
-          --organizer-hover-background: SelectedItem;
-          --organizer-hover-color: SelectedItemText;
-          --organizer-selected-background: SelectedItem;
-          --organizer-selected-color: SelectedItemText;
-          --organizer-outline-color: SelectedItem;
-          --organizer-separator-color: ThreeDDarkShadow;
-          --organizer-border-color: ThreeDShadow;
-          --organizer-toolbar-field-background: Field;
-          --organizer-toolbar-field-background-focused: Field;
-          --organizer-toolbar-field-border-color: ThreeDShadow;
-          --organizer-toolbar-field-focus-border-color: var(--organizer-outline-color);
-          --organizer-toolbar-field-focus-box-shadow: unset;
-          --organizer-pane-field-border-color: ThreeDShadow;
-        }
-        @media not all and (prefers-contrast) {
-          :root {
-            --organizer-color: var(--in-content-page-color);
-            --organizer-deemphasized-color: var(--in-content-deemphasized-text);
-            --organizer-toolbar-background: rgb(249, 249, 251);
-            /* --toolbar-bgcolor */
-            --organizer-pane-background: rgb(229, 229, 235);
-            /* --lwt-accent-color */
-            --organizer-content-background: var(--in-content-page-background);
-            --organizer-hover-background: var(--in-content-button-background-hover);
-            --organizer-hover-color: var(--organizer-color);
-            --organizer-selected-background: var(--in-content-button-background-active);
-            --organizer-selected-color: var(--organizer-color);
-            --organizer-outline-color: var(--in-content-focus-outline-color);
-            --organizer-separator-color: var(--organizer-pane-field-border-color);
-            --organizer-border-color: var(--in-content-border-color);
-            --organizer-toolbar-field-background: rgb(240, 240, 244);
-            /* --lwt-accent-color */
-            --organizer-toolbar-field-background-focused: Field;
-            --organizer-toolbar-field-border-color: transparent;
-            --organizer-toolbar-field-focus-border-color: color-mix(
-              in srgb,
-              var(--organizer-outline-color) 50%,
-              transparent
-            );
-            --organizer-toolbar-field-focus-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.23);
-            --organizer-pane-field-border-color: color-mix(in srgb, currentColor 41%, transparent);
-          }
-          @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
-            :root {
-              --organizer-color: rgb(251, 251, 254);
-              --organizer-deemphasized-color: rgb(191, 191, 201);
-              --organizer-toolbar-background: rgb(43, 42, 51);
-              --organizer-pane-background: rgb(35, 34, 43);
-              --organizer-content-background: rgb(28, 27, 34);
-              --organizer-hover-background: rgb(82, 82, 94);
-              --organizer-selected-background: rgb(91, 91, 102);
-              --organizer-toolbar-field-background: var(--in-content-page-background);
-              --organizer-toolbar-field-background-focused: rgb(66, 65, 77);
-              scrollbar-color: rgba(249, 249, 250, 0.4) rgba(20, 20, 25, 0.3);
-            }
-          }
-        }
-
-        /*- Toolbar & Menus ------------------------------------------------------*/
-        #placesToolbar {
+        #editBMPanel_tagsSelectorRow > richlistbox {
           appearance: none !important;
-          background-color: var(--organizer-toolbar-background) !important;
           color: var(--organizer-color) !important;
-          border-bottom: 1px solid var(--organizer-border-color) !important;
-          padding: 4px !important;
-          padding-inline-end: 6px !important;
-        }
-        #placesToolbar > toolbarbutton {
-          appearance: none !important;
-          padding: 5px !important;
+          background-color: var(--organizer-content-background) !important;
+          border: 1px solid var(--organizer-border-color) !important;
           border-radius: 4px !important;
         }
-        #placesToolbar > toolbarbutton[disabled] {
-          opacity: 0.6 !important;
+        #editBMPanel_tagsSelectorRow > richlistbox > richlistitem {
+          border: 1px solid transparent !important;
         }
-        #placesToolbar > toolbarbutton:not([disabled]):hover {
+        #editBMPanel_tagsSelectorRow > richlistbox > richlistitem:hover {
           background-color: var(--organizer-hover-background) !important;
           color: var(--organizer-hover-color) !important;
         }
-        #placesToolbar > toolbarbutton:not([disabled]):hover:active {
+        #editBMPanel_tagsSelectorRow > richlistbox > richlistitem[selected] {
           background-color: var(--organizer-selected-background) !important;
+          color: var(--organizer-selected-color) !important;
         }
 
-        #placesToolbar > toolbarbutton > .toolbarbutton-icon,
-        #placesMenu > menu > image,
-        #placesMenu > menu > .menubar-text {
-          -moz-context-properties: fill !important;
-          fill: currentColor !important;
-        }
-
-        #placesMenu {
-          margin-inline-start: 6px !important;
+        /*- Radio Button ---------------------------------------------------------*/
+        menuitem[type="radio"] {
+          /* margin-inline-start: 0 !important; */
+          appearance: none !important;
         }
-        #placesMenu > menu {
+        menuitem[type="radio"] > .menu-iconic-left > .menu-iconic-icon {
           appearance: none !important;
-          color: var(--organizer-color) !important;
-          border-radius: 4px !important;
-          padding-block: 5px !important;
-          padding-inline-start: 5px !important;
-          margin-inline-end: 2px !important;
+          width: 16px !important;
+          height: 16px !important;
+          border: 1px solid var(--in-content-box-border-color) !important;
+          border-radius: 100% !important;
+          padding: 0 !important;
+          margin-inline: 0 6px !important;
+          margin-block: 2px !important;
+          /* extend the vertical clicktarget */
+          background-color: var(--in-content-button-background) !important;
+          background-position: center !important;
+          flex-shrink: 0 !important;
+          /* avoid shrinking inside flex container */
         }
-        #placesMenu > menu[_moz-menuactive="true"],
-        #placesMenu > menu:hover {
-          background-color: var(--organizer-hover-background) !important;
-          color: var(--organizer-hover-color) !important;
+        menuitem[type="radio"] > .menu-iconic-left[checked="true"] > .menu-iconic-icon {
+          -moz-context-properties: fill !important;
+          fill: currentColor !important;
+          color: var(--in-content-primary-button-text-color) !important;
+          background-color: var(--in-content-primary-button-background) !important;
+          background-image: url("chrome://global/skin/icons/radio.svg") !important;
+          border-color: transparent !important;
+          /* Style the button also when printing with "Print Backgrounds" unchecked */
+          color-adjust: exact !important;
         }
-        #placesMenu > menu:hover:active,
-        #placesMenu > menu[open] {
-          background-color: var(--organizer-selected-background) !important;
-          color: var(--organizer-selected-color) !important;
+        menuitem[type="radio"]:not([disabled="true"]):hover > .menu-iconic-left > .menu-iconic-icon {
+          background-color: var(--in-content-button-background-hover) !important;
+          color: var(--in-content-button-text-color-hover) !important;
         }
-        #placesMenu > menu > .menubar-text {
-          margin-block: 0 !important;
-          /* override menu.css */
-          padding-inline-end: 4px !important;
+        menuitem[type="radio"]:not([disabled="true"]):hover:active > .menu-iconic-left > .menu-iconic-icon {
+          background-color: var(--in-content-button-background-active) !important;
         }
-
-        /*- Search Bar & Input ---------------------------------------------------*/
-        #searchFilter,
-        #detailsPane html|input {
-          appearance: none !important;
-          background-color: var(--organizer-toolbar-field-background) !important;
-          color: var(--organizer-color) !important;
-          border: 1px solid var(--organizer-toolbar-field-border-color) !important;
-          border-radius: 4px !important;
-          margin: 0 !important;
-          padding-block: 2px !important;
-          min-height: 24px !important;
+        menuitem[type="radio"]:not([disabled="true"])[checked="true"]:hover > .menu-iconic-left > .menu-iconic-icon {
+          background-color: var(--in-content-primary-button-background-hover) !important;
+          color: var(--in-content-primary-button-text-color-hover) !important;
         }
-
-        #searchFilter[focused] {
-          box-shadow: var(--organizer-toolbar-field-focus-box-shadow) !important;
-          background-color: var(--organizer-toolbar-field-background-focused) !important;
-          border-color: transparent !important;
-          outline: 2px solid var(--organizer-toolbar-field-focus-border-color) !important;
-          outline-offset: -2px !important;
+        menuitem[type="radio"]:not([disabled="true"])[checked="true"]:hover:active
+          > .menu-iconic-left
+          > .menu-iconic-icon {
+          background-color: var(--in-content-primary-button-background-active) !important;
         }
-
-        /*- Sidebar & Splitter ---------------------------------------------------*/
-        #placesList {
-          background-color: var(--organizer-pane-background) !important;
+        menuitem[type="radio"] > .menu-iconic-text {
+          margin-inline: 0 8px !important;
+          padding-inline-start: 0 !important;
         }
 
-        #placesView > splitter {
-          border: 0 !important;
-          border-inline-end: 1px solid var(--organizer-border-color) !important;
-          min-width: 0 !important;
-          width: 3px !important;
-          background-color: transparent !important;
-          margin-inline-start: -3px !important;
-          position: relative !important;
-        }
-
-        /*- Downloads Pane -------------------------------------------------------*/
-        #downloadsRichListBox,
-        #downloadsListBox {
-          color: var(--organizer-color) !important;
-          background-color: var(--organizer-content-background) !important;
-        }
-
-        #clearDownloadsButton:focus-visible {
-          outline: 2px solid var(--organizer-outline-color) !important;
-        }
-
-        richlistitem[selected="true"],
-        richlistitem:hover {
-          background-color: var(--organizer-hover-background) !important;
-          color: var(--organizer-color) !important;
-        }
-
-        richlistbox:where(:focus) > richlistitem[selected="true"] {
-          background-color: var(--organizer-selected-background) !important;
-        }
-
-        /*- Tree -----------------------------------------------------------------*/
-        #contentView treecol {
-          /* Use box-shadow to draw a bottom border instead of border-bottom
-             * because otherwise the items on contentView won't be perfectly
-             * aligned with the items on the sidebar. */
-          box-shadow: inset 0 -1px var(--organizer-border-color) !important;
-        }
-
-        tree {
-          background-color: var(--organizer-content-background) !important;
-          color: var(--organizer-color) !important;
-        }
-
-        treecol:not([hideheader="true"]),
-        treecolpicker {
-          appearance: none !important;
-          border: none !important;
-          background-color: var(--in-content-button-background) !important;
-          color: var(--organizer-color, inherit) !important;
-          padding: 5px 10px !important;
-        }
-
-        treecol:not([hideheader="true"], [sortable="false"]):hover,
-        treecolpicker:hover {
-          background-color: var(--organizer-hover-background) !important;
-          color: var(--organizer-color) !important;
-        }
-        treecol:not([hideheader="true"], [sortable="false"]):hover:active,
-        treecolpicker:hover:active {
-          background-color: var(--organizer-selected-background) !important;
-        }
-
-        treecol:not([hideheader="true"], :first-child),
-        treecolpicker {
-          padding-left: 10px !important;
-          border-inline-start-width: 1px !important;
-          border-inline-start-style: solid !important;
-          border-image: linear-gradient(
-              transparent 0%,
-              transparent 20%,
-              var(--organizer-border-color) 20%,
-              var(--organizer-border-color) 80%,
-              transparent 80%,
-              transparent 100%
-            )
-            1 1 !important;
-        }
-
-        treecol[sortDirection]:not([hideheader="true"]) > xul|*.treecol-sortdirection {
-          fill: currentColor !important;
-          width: 18px !important;
-          height: 18px !important;
-        }
-
-        treechildren::-moz-tree-row {
-          background-color: transparent !important;
-        }
-        treechildren::-moz-tree-row(hover) {
-          background-color: var(--organizer-hover-background) !important;
-        }
-        treechildren::-moz-tree-row(selected) {
-          background-color: var(--organizer-selected-background) !important;
-          color: var(--organizer-selected-color) !important;
-          border: 1px solid transparent !important;
-        }
-        treechildren::-moz-tree-image(hover),
-        treechildren::-moz-tree-twisty(hover),
-        treechildren::-moz-tree-cell-text(hover) {
-          color: var(--organizer-hover-color) !important;
-        }
-        treechildren::-moz-tree-image(selected),
-        treechildren::-moz-tree-twisty(selected),
-        treechildren::-moz-tree-cell-text(selected) {
-          color: var(--organizer-selected-color) !important;
-        }
-        treechildren::-moz-tree-separator {
-          height: 1px !important;
-          border-color: var(--organizer-separator-color) !important;
-        }
-        treechildren::-moz-tree-separator(hover) {
-          border-color: var(--organizer-hover-color) !important;
-        }
-        treechildren::-moz-tree-separator(selected) {
-          border-color: var(--organizer-selected-color) !important;
-        }
-
-        /*- Info Box -------------------------------------------------------------*/
-        #detailsPane {
-          background-color: var(--organizer-pane-background) !important;
-          color: var(--organizer-color) !important;
-          padding: 5px !important;
-          border-top: 1px solid var(--organizer-border-color) !important;
-        }
-
-        #editBookmarkPanelRows .expander-up,
-        #editBookmarkPanelRows .expander-down {
-          appearance: none !important;
-          min-width: 0 !important;
-          padding: 5px !important;
-          margin: 0 !important;
-          margin-inline-end: 4px !important;
-          border: 1px solid var(--organizer-pane-field-border-color) !important;
-          border-radius: 4px !important;
-          color: var(--organizer-color) !important;
-          background-color: var(--organizer-content-background) !important;
-          -moz-context-properties: fill !important;
-          fill: currentColor !important;
-        }
-        #editBookmarkPanelRows .expander-up:hover,
-        #editBookmarkPanelRows .expander-down:hover {
-          background-color: var(--organizer-hover-background) !important;
-          color: var(--organizer-hover-color) !important;
-        }
-        #editBookmarkPanelRows .expander-up:hover:active,
-        #editBookmarkPanelRows .expander-down:hover:active {
-          background-color: var(--organizer-selected-background) !important;
-          color: var(--organizer-selected-color) !important;
-        }
-        #editBookmarkPanelRows .expander-up:focus-visible,
-        #editBookmarkPanelRows .expander-down:focus-visible {
-          outline: 2px solid var(--organizer-outline-color) !important;
-          outline-offset: -1px !important;
-        }
-        #editBookmarkPanelRows .expander-up > .button-box,
-        #editBookmarkPanelRows .expander-down > .button-box {
-          padding: 0 !important;
-        }
-
-        #editBookmarkPanelRows .expander-up {
-          list-style-image: url("chrome://global/skin/icons/arrow-up-12.svg");
-        }
-        #editBookmarkPanelRows .expander-down {
-          list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg");
-        }
-
-        #places input {
-          border: 1px solid var(--organizer-pane-field-border-color) !important;
-          border-radius: 4px !important;
-          background-color: var(--organizer-content-background) !important;
-          color: var(--organizer-color) !important;
-          min-height: 20px !important;
-          padding-inline: 4px !important;
-        }
-        #places input:focus {
-          outline: 2px solid var(--organizer-outline-color) !important;
-          outline-offset: -1px !important;
-        }
-        #places input:not(:read-write):focus {
-          outline: none !important;
-        }
-
-        .caption-label {
-          margin-inline-start: 8px !important;
-          color: var(--organizer-deemphasized-color) !important;
-        }
-
-        #editBMPanel_tagsSelectorRow > richlistbox {
-          appearance: none !important;
-          color: var(--organizer-color) !important;
-          background-color: var(--organizer-content-background) !important;
-          border: 1px solid var(--organizer-border-color) !important;
-          border-radius: 4px !important;
-        }
-        #editBMPanel_tagsSelectorRow > richlistbox > richlistitem {
-          border: 1px solid transparent !important;
-        }
-        #editBMPanel_tagsSelectorRow > richlistbox > richlistitem:hover {
-          background-color: var(--organizer-hover-background) !important;
-          color: var(--organizer-hover-color) !important;
-        }
-        #editBMPanel_tagsSelectorRow > richlistbox > richlistitem[selected] {
-          background-color: var(--organizer-selected-background) !important;
-          color: var(--organizer-selected-color) !important;
-        }
-
-        /*- Radio Button ---------------------------------------------------------*/
-        menuitem[type="radio"] {
-          /* margin-inline-start: 0 !important; */
-          appearance: none !important;
-        }
-        menuitem[type="radio"] > .menu-iconic-left > .menu-iconic-icon {
-          appearance: none !important;
-          width: 16px !important;
-          height: 16px !important;
-          border: 1px solid var(--in-content-box-border-color) !important;
-          border-radius: 100% !important;
-          padding: 0 !important;
-          margin-inline: 0 6px !important;
-          margin-block: 2px !important;
-          /* extend the vertical clicktarget */
-          background-color: var(--in-content-button-background) !important;
-          background-position: center !important;
-          flex-shrink: 0 !important;
-          /* avoid shrinking inside flex container */
-        }
-        menuitem[type="radio"] > .menu-iconic-left[checked="true"] > .menu-iconic-icon {
-          -moz-context-properties: fill !important;
-          fill: currentColor !important;
-          color: var(--in-content-primary-button-text-color) !important;
-          background-color: var(--in-content-primary-button-background) !important;
-          background-image: url("chrome://global/skin/icons/radio.svg") !important;
-          border-color: transparent !important;
-          /* Style the button also when printing with "Print Backgrounds" unchecked */
-          color-adjust: exact !important;
-        }
-        menuitem[type="radio"]:not([disabled="true"]):hover > .menu-iconic-left > .menu-iconic-icon {
-          background-color: var(--in-content-button-background-hover) !important;
-          color: var(--in-content-button-text-color-hover) !important;
-        }
-        menuitem[type="radio"]:not([disabled="true"]):hover:active > .menu-iconic-left > .menu-iconic-icon {
-          background-color: var(--in-content-button-background-active) !important;
-        }
-        menuitem[type="radio"]:not([disabled="true"])[checked="true"]:hover > .menu-iconic-left > .menu-iconic-icon {
-          background-color: var(--in-content-primary-button-background-hover) !important;
-          color: var(--in-content-primary-button-text-color-hover) !important;
-        }
-        menuitem[type="radio"]:not([disabled="true"])[checked="true"]:hover:active
-          > .menu-iconic-left
-          > .menu-iconic-icon {
-          background-color: var(--in-content-primary-button-background-active) !important;
-        }
-        menuitem[type="radio"] > .menu-iconic-text {
-          margin-inline: 0 8px !important;
-          padding-inline-start: 0 !important;
-        }
-
-        /* Disabled checkboxes, radios and labels */
-        menuitem[type="radio"][disabled="true"],
-        menuitem[type="checkbox"][disabled="true"] {
-          color: inherit !important;
-          opacity: 0.5 !important;
+        /* Disabled checkboxes, radios and labels */
+        menuitem[type="radio"][disabled="true"],
+        menuitem[type="checkbox"][disabled="true"] {
+          color: inherit !important;
+          opacity: 0.5 !important;
         }
 
         /*- Check Box ------------------------------------------------------------*/
@@ -3228,6 +2842,397 @@
     }
   }
 }
+/** Menu - Icons Layout *******************************************************/
+@supports -moz-bool-pref("userChrome.icon.menu") {
+  @-moz-document url("chrome://browser/content/places/places.xhtml"),
+               url("about:downloads") {
+    menupopup menuitem:not([type="checkbox"][checked="true"], [type="radio"]),
+    menupopup menu:not([type="checkbox"][checked="true"], [type="radio"]) {
+      -moz-appearance: none !important;
+      /* Linux: menulist */
+    }
+
+    menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)
+      menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
+    menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)
+      menu:not(.menu-iconic, .in-menulist, [checked="true"]),
+    menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup)
+      > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
+    menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu:not(.menu-iconic, .in-menulist, [checked="true"]) {
+      /* Color */
+      -moz-context-properties: fill, fill-opacity !important;
+      fill: currentColor !important;
+      /* Layout */
+      background-size: 16px !important;
+      background-repeat: no-repeat !important;
+      background-image: var(--menuitem-image);
+    }
+
+    /* For native context menus */
+    @supports -moz-bool-pref("widget.macos.native-context-menus") or -moz-bool-pref("widget.gtk.native-context-menus") {
+      :not(menu, #ContentSelectDropdown)
+        > menupopup
+        > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
+      :not(menu, #ContentSelectDropdown) > menupopup > menu:not(.menu-iconic, .in-menulist, [checked="true"]) {
+        list-style-image: var(--menuitem-image, url("../icons/blank.svg")) !important;
+      }
+    }
+
+    /* Padding */
+    :root {
+      --context-menu-background-padding-default: 5px;
+      --context-menu-background-padding: var(--context-menu-background-padding-default);
+    }
+
+    menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)
+      menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
+    menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)
+      menu:not(.menu-iconic, .in-menulist, [checked="true"]),
+    menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup)
+      > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
+    menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu:not(.menu-iconic, .in-menulist, [checked="true"]) {
+      background-position: left var(--context-menu-background-padding) center !important;
+      padding-inline-start: var(--context-menu-background-padding) !important;
+    }
+
+    /* Padding - Windows */
+    @media (-moz-os-version: windows-win7), (-moz-platform: windows-win7) {
+      :root {
+        --context-menu-background-padding-default: 2px;
+      }
+    }
+    @media (-moz-os-version: windows-win8), (-moz-platform: windows-win8) {
+      :root {
+        --context-menu-background-padding-default: 3px;
+      }
+    }
+    @media (-moz-os-version: windows-win7),
+      (-moz-platform: windows-win7),
+      (-moz-os-version: windows-win8),
+      (-moz-platform: windows-win8) {
+      menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)
+        menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
+      menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)
+        menu:not(.menu-iconic, .in-menulist, [checked="true"]),
+      menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup)
+        > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
+      menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu:not(.menu-iconic, .in-menulist, [checked="true"]) {
+        background-position: left var(--context-menu-background-padding) center !important;
+        padding-inline-start: 0 !important;
+      }
+    }
+    @media (-moz-os-version: windows-win10), (-moz-platform: 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)
+        );
+      }
+
+      menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)
+        menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
+      menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)
+        menu:not(.menu-iconic, .in-menulist, [checked="true"]),
+      menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup)
+        > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
+      menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu:not(.menu-iconic, .in-menulist, [checked="true"]) {
+        padding-inline-start: var(--menu-background-padding-default) !important;
+        margin-left: 0 !important;
+      }
+    }
+    /* Padding - Linux */
+    @media (-moz-gtk-csd-available) {
+      :root {
+        --context-menu-background-padding-default: 6px;
+      }
+
+      /* Contextmenu Checkbox Unset */
+      menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu) menuitem[type="checkbox"] {
+        margin-inline: 0 !important;
+      }
+      menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)
+        menuitem[type="checkbox"]
+        > .menu-iconic-left
+        > .menu-iconic-icon {
+        margin-inline-end: 0 !important;
+      }
+      menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)
+        menuitem[type="checkbox"]:not([checked="true"])
+        > .menu-iconic-left
+        > .menu-iconic-icon {
+        border: none !important;
+        background-color: unset !important;
+      }
+    }
+    /* Padding - Mac */
+    @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
+      :root {
+        --context-menu-background-padding-default: 10px;
+        --context-menu-mac-padding: 21px;
+      }
+
+      /* context menu width */
+      menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)
+        menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
+      menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)
+        menu:not(.menu-iconic, .in-menulist, [checked="true"]) {
+        padding-inline-end: var(--context-menu-background-padding) !important;
+      }
+      menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)
+        menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"])
+        > .menu-text,
+      menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)
+        menu:not(.menu-iconic, .in-menulist, [checked="true"])
+        > .menu-text {
+        /* text position */
+        padding-inline-start: var(--context-menu-mac-padding) !important;
+      }
+
+      /* Checkbox menuitem, None iconic menu */
+      menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu) menuitem[checked="true"],
+      menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu) menu:not(.menu-iconic) {
+        padding-inline-start: calc(var(--context-menu-background-padding) + var(--context-menu-mac-padding)) !important;
+      }
+    }
+    /*= Context Menu ===========================================================*/
+    @supports -moz-bool-pref("userChrome.icon.context_menu") {
+      /* Icon lists */
+      /*= downloadsContextMenu =====================================================*/
+      .downloadPauseMenuItem {
+        --menuitem-image: url("chrome://global/skin/media/pause-fill.svg");
+      }
+
+      .downloadResumeMenuItem {
+        --menuitem-image: url("chrome://global/skin/media/play-fill.svg");
+      }
+
+      .downloadUnblockMenuItem {
+        --menuitem-image: url("../icons/checkmark-circle.svg");
+      }
+
+      .downloadUseSystemDefaultMenuItem {
+        --menuitem-image: url("chrome://browser/skin/open.svg");
+      }
+
+      .downloadAlwaysUseSystemDefaultMenuItem {
+        /* checkbox */
+        --menuitem-image: url("../icons/folder-globe.svg");
+      }
+
+      .downloadAlwaysOpenSimilarFilesMenuItem {
+        /* checkbox */
+        --menuitem-image: url("../icons/fluid.svg");
+      }
+
+      .downloadShowMenuItem {
+        --menuitem-image: url("chrome://global/skin/icons/folder.svg");
+      }
+      @supports -moz-bool-pref("userChrome.icon.library") {
+        .downloadShowMenuItem {
+          --menuitem-image: url("../icons/folder.svg");
+        }
+      }
+
+      #downloadsContextMenu > menuitem.downloadOpenReferrerMenuItem,
+      #downloadsContextMenu > menuitem[command="downloadsCmd_openReferrer"] {
+        --menuitem-image: url("../icons/link-square.svg");
+      }
+      #downloadsContextMenu > menuitem.downloadCopyLocationMenuItem,
+      #downloadsContextMenu > menuitem[command="downloadsCmd_copyLocation"] {
+        --menuitem-image: url("../icons/link.svg");
+      }
+
+      .downloadDeleteFileMenuItem {
+        --menuitem-image: url("chrome://global/skin/icons/delete.svg");
+      }
+
+      .downloadRemoveFromHistoryMenuItem {
+        --menuitem-image: url("../icons/eraser.svg");
+      }
+
+      #downloadsContextMenu > menuitem[command="downloadsCmd_clearList"],
+      #downloadsContextMenu > menuitem[command="downloadsCmd_clearDownloads"] {
+        --menuitem-image: url("../icons/broom.svg");
+      }
+
+      /*= placeContext =============================================================*/
+      #placesContext_open {
+        --menuitem-image: url("../icons/link-square.svg");
+      }
+
+      #placesContext_openBookmarkContainer\:tabs,
+      #placesContext_openBookmarkLinks\:tabs {
+        --menuitem-image: url("../icons/movetowindow-16.svg");
+      }
+
+      #placesContext_open\:newtab,
+      #placesContext_openContainer\:tabs,
+      #placesContext_openLinks\:tabs {
+        --menuitem-image: url("chrome://browser/skin/new-tab.svg");
+      }
+
+      #placesContext_open\:newcontainertab {
+        --menuitem-image: url("../icons/container-openin-16.svg");
+      }
+
+      #placesContext_open\:newwindow {
+        --menuitem-image: url("chrome://browser/skin/window.svg");
+      }
+
+      #placesContext_open\:newprivatewindow {
+        --menuitem-image: url("chrome://browser/skin/privateBrowsing.svg");
+      }
+
+      #placesContext_show_bookmark\:info,
+      #placesContext_show\:info,
+      #placesContext_show_folder\:info {
+        --menuitem-image: url("chrome://global/skin/icons/edit.svg");
+      }
+
+      #placesContext_deleteBookmark,
+      #placesContext_deleteFolder,
+      #placesContext_delete,
+      #placesContext_delete_history {
+        --menuitem-image: url("chrome://global/skin/icons/delete.svg");
+      }
+
+      #placesContext_deleteHost {
+        --menuitem-image: url("../icons/eye-hide.svg");
+      }
+
+      #placesContext_sortBy\:name {
+        --menuitem-image: url("../icons/text-sort-ascending.svg");
+      }
+
+      #placesContext_cut {
+        --menuitem-image: url("chrome://browser/skin/edit-cut.svg");
+      }
+
+      #placesContext_copy {
+        --menuitem-image: url("../icons/edit-copy.svg");
+      }
+
+      #placesContext_paste_group {
+        --menuitem-image: url("chrome://browser/skin/edit-paste.svg");
+      }
+
+      #placesContext_new\:bookmark {
+        --menuitem-image: url("chrome://browser/skin/bookmark.svg");
+      }
+
+      #placesContext_showInFolder,
+      #placesContext_new\:folder {
+        --menuitem-image: url("chrome://global/skin/icons/folder.svg");
+      }
+      @supports -moz-bool-pref("userChrome.icon.library") {
+        #placesContext_showInFolder,
+        #placesContext_new\:folder {
+          --menuitem-image: url("../icons/folder.svg");
+        }
+      }
+
+      #placesContext_new\:separator {
+        --menuitem-image: url("../icons/vertical-line.svg");
+      }
+
+      #placesContext_paste {
+        --menuitem-image: url("chrome://browser/skin/edit-paste.svg");
+      }
+
+      #placesContext_createBookmark {
+        --menuitem-image: url("chrome://browser/skin/bookmark.svg");
+      }
+
+      #show-other-bookmarks_PersonalToolbar {
+        /* checkbox */
+        --menuitem-image: url("../icons/star-line-horizontal.svg");
+      }
+
+      #placesContext_showAllBookmarks {
+        --menuitem-image: url("chrome://browser/skin/bookmark-star-on-tray.svg");
+      }
+
+      .openintabs-menuitem {
+        --menuitem-image: url("../icons/movetowindow-16.svg");
+      }
+    }
+    @supports -moz-bool-pref("userChrome.icon.global_menu") {
+      /*= organizeButtonPopup ======================================================*/
+      #newbookmark {
+        --menuitem-image: url("chrome://browser/skin/bookmark.svg");
+      }
+
+      #newfolder {
+        --menuitem-image: url("chrome://global/skin/icons/folder.svg");
+      }
+      @supports -moz-bool-pref("userChrome.icon.library") {
+        #newfolder {
+          --menuitem-image: url("../icons/folder.svg");
+        }
+      }
+
+      #newseparator {
+        --menuitem-image: url("../icons/vertical-line.svg");
+      }
+
+      #orgUndo {
+        --menuitem-image: url("../icons/undo.svg");
+      }
+
+      #orgCut {
+        --menuitem-image: url("chrome://browser/skin/edit-cut.svg");
+      }
+
+      #orgCopy {
+        --menuitem-image: url("../icons/edit-copy.svg");
+      }
+
+      #orgPaste {
+        --menuitem-image: url("chrome://browser/skin/edit-paste.svg");
+      }
+
+      #orgDelete {
+        --menuitem-image: url("chrome://global/skin/icons/delete.svg");
+      }
+
+      #orgSelectAll {
+        --menuitem-image: url("../icons/select-all-on.svg");
+      }
+
+      #orgClose {
+        --menuitem-image: url("chrome://global/skin/icons/close.svg");
+      }
+
+      /*= viewMenuPopup ============================================================*/
+      #viewColumns {
+        --menuitem-image: url("chrome://global/skin/icons/columnpicker.svg");
+      }
+
+      #viewSort {
+        --menuitem-image: url("../icons/text-sort-ascending.svg");
+      }
+
+      /*= maintenanceButtonPopup ===================================================*/
+      #backupBookmarks {
+        --menuitem-image: url("chrome://devtools/skin/images/datastore.svg");
+      }
+
+      #fileImport {
+        --menuitem-image: url("chrome://browser/skin/save.svg");
+      }
+
+      #fileExport {
+        --menuitem-image: url("chrome://browser/skin/open.svg");
+      }
+
+      #browserImport {
+        --menuitem-image: url("chrome://browser/skin/import.svg");
+      }
+    }
+  }
+}
 /** Download Panel ************************************************************/
 @-moz-document url-prefix("about:downloads") {
   @media (prefers-reduced-motion: no-preference) {
diff --git a/src/contents/_context_menu.scss b/src/contents/_context_menu.scss
new file mode 100644
index 00000000..63b5e164
--- /dev/null
+++ b/src/contents/_context_menu.scss
@@ -0,0 +1,14 @@
+@-moz-document url("chrome://browser/content/places/places.xhtml"),
+               url("about:downloads") {
+  @import "../icons/layout_menu_contents";
+
+  /*= Context Menu ===========================================================*/
+  @include Option("userChrome.icon.context_menu") {
+    /* Icon lists */
+    @import "../icons/context_menu/downloads";
+    @import "../icons/context_menu/place";
+  }
+  @include Option("userChrome.icon.global_menu") {
+    @import "../icons/library";
+  }
+}
diff --git a/src/contents/_downloads.scss b/src/contents/_downloads.scss
index 4c25254e..8f12cce4 100644
--- a/src/contents/_downloads.scss
+++ b/src/contents/_downloads.scss
@@ -4,8 +4,4 @@
       @import "../decoration/download_panel";
     }
   }
-
-  @include Option("userChrome.icon.context_menu") {
-    // TODO
-  }
 }
diff --git a/src/library/_contents_menu.scss b/src/icons/_layout_menu_contents.scss
similarity index 94%
rename from src/library/_contents_menu.scss
rename to src/icons/_layout_menu_contents.scss
index cd407cb1..4c383a07 100644
--- a/src/library/_contents_menu.scss
+++ b/src/icons/_layout_menu_contents.scss
@@ -88,8 +88,3 @@ $_placesPopupSetMenus: selector.nest(
     @include _layout_init_mac_others;
   }
 }
-
-/* Icon lists */
-@import "../icons/context_menu/downloads";
-@import "../icons/context_menu/place";
-@import "../icons/library";
diff --git a/src/leptonContent.scss b/src/leptonContent.scss
index 780b42bf..cc96c6da 100644
--- a/src/leptonContent.scss
+++ b/src/leptonContent.scss
@@ -33,5 +33,10 @@
   @import "contents/proton_contents";
 }
 
+/** Menu - Icons Layout *******************************************************/
+@include Option("userChrome.icon.menu") {
+  @import "contents/context_menu";
+}
+
 /** Download Panel ************************************************************/
 @import "contents/downloads";
diff --git a/src/library/_contents.scss b/src/library/_contents.scss
index 57340eb1..5987c71f 100644
--- a/src/library/_contents.scss
+++ b/src/library/_contents.scss
@@ -6,11 +6,6 @@
     @import "menubar";
   }
 
-  /*= Context Menu ===========================================================*/
-  @include Option("userChrome.icon.context_menu") {
-    @import "contents_menu";
-  }
-
   @include OS($linux) {
     /*= Layout Fixes =========================================================*/
     menupopup menu {

From fee42a56f1777204d6824f06679200236820498d Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Thu, 30 Jun 2022 01:50:23 +0900
Subject: [PATCH 13/13] Clean: build

---
 css/leptonContent.css | 2 --
 1 file changed, 2 deletions(-)

diff --git a/css/leptonContent.css b/css/leptonContent.css
index 3a1b4d41..b346bde5 100644
--- a/css/leptonContent.css
+++ b/css/leptonContent.css
@@ -3255,6 +3255,4 @@
       }
     }
   }
-  @supports -moz-bool-pref("userChrome.icon.context_menu") {
-  }
 }