Fix: Icons - Windows Bookmark Padding #658

black7375 · Mar 7, 2023 · 1c9a000 · 1c9a000
1 parent 7d1a086
commit 1c9a000
Show file tree

Hide file tree

Showing 7 changed files with 113 additions and 68 deletions.
diff --git a/__tests__/native_menu.test.scss b/__tests__/native_menu.test.scss
@@ -15,6 +15,9 @@
         @include native_menu.Win10_NativeMenu {
           @include example;
         }
+        @include native_menu.Win10_NonNativeMenu {
+          @include example;
+        }
       }
       @include expect {
         @supports -moz-bool-pref("widget.macos.native-context-menus") or -moz-bool-pref("widget.gtk.native-context-menus") {
@@ -27,6 +30,9 @@
         @media not (-moz-windows-non-native-menus) {
           @include example;
         }
+        @media (-moz-windows-non-native-menus) {
+          @include example;
+        }
       }
     }
   }

diff --git a/css/leptonChrome.css b/css/leptonChrome.css
diff --git a/css/leptonContent.css b/css/leptonContent.css
diff --git a/src/icons/layout/_bookmark_menu.scss b/src/icons/layout/_bookmark_menu.scss
@@ -52,37 +52,21 @@ $_bookmarkToolbarMenus: selector.nest(
 
 //------------------------------------------------------------------------------
 
-/* Windows 7, 8 */
-@include OS($win7, $win8) {
-  /* Global Menu */
-  menupopup:is(#goPopup, #historyMenuPopup, #bookmarksMenuPopup) .bookmark-item {
-    padding-inline-start: 0 !important;
-  }
-
+/* Windows */
+@include OS($win) {
   /* Bookmark Popup - None icon menu */
-  #BMB_bookmarksPopup,
-  #PersonalToolbar {
-    --arrowpanel-menuicon-padding: 9px;
-  }
   @include _layoutBookmarkMenu() {
-    margin-inline: var(--arrowpanel-menuitem-padding-inline) !important;
-    background-position: var(--uc-menu-background-position) calc(var(--arrowpanel-menuicon-padding)) center !important;
-  }
-  @include _layoutBookmarkPopup() {
-    padding-inline-start: calc(var(--arrowpanel-menuicon-padding) + var(--context-menu-text-padding) + 2px) !important;
-  }
-  @include _layoutBookmarkToolbar() {
-    padding-inline-start: var(--arrowpanel-menuicon-padding) !important;
+    margin-inline: var(--arrowpanel-menuitem-margin-inline) !important;
+    padding-inline-start: var(--bookmark-menu-icon-text-padding) !important;
+    background-position: var(--uc-menu-background-position) var(--bookmark-menu-icon-background-padding) center !important;
   }
 }
 
-/* Windows */
-@include OS($win10) {
-  /* Bookmark Popup - None icon menu */
-  @include _layoutBookmarkMenu() {
-    margin-inline-start: var(--arrowpanel-menuitem-margin-inline) !important;
-    padding-inline-start: calc(var(--arrowpanel-menuitem-padding-inline) + var(--context-menu-text-padding)) !important;
-    background-position: var(--uc-menu-background-position) var(--arrowpanel-menuitem-padding-inline) center !important;
+/* Windows 7, 8 */
+@include OS($win7, $win8) {
+  /* Global Menu */
+  menupopup:is(#goPopup, #historyMenuPopup, #bookmarksMenuPopup) .bookmark-item {
+    padding-inline-start: 0 !important;
   }
 }
 

diff --git a/src/icons/layout/_menu.scss b/src/icons/layout/_menu.scss
@@ -79,6 +79,7 @@ $_layoutCommonMenus: (
 }
 
 /* Padding - Windows */
+@include _layout_root_win;
 @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
@@ -76,17 +76,32 @@ $_initialMenus: selector.append(
   padding-inline-start: var(--context-menu-background-padding) !important;
 }
 
+@mixin _layout_win_native_context_text_padding() {
+  --context-menu-text-padding: calc(1.45em + 8px);
+  --bookmark-menu-icon-align-padding: calc((1.45em - 16px) / 2 + 1px);
+}
+
+@mixin _layout_root_win() {
+  :root {
+    @include OS($win) {
+      --bookmark-menu-icon-text-padding: calc(var(--context-menu-text-padding) + var(--arrowpanel-menuitem-padding-inline));
+      --bookmark-menu-icon-background-padding: calc(var(--arrowpanel-menuitem-padding-inline) + var(--bookmark-menu-icon-align-padding));
+    }
+  }
+}
+
 @mixin _layout_root_win7_8() {
-  @include OS($win7) {
-    :root {
+  :root {
+    @include OS($win7, $win8) {
+      @include _layout_win_native_context_text_padding;
+    }
+    @include OS($win7) {
       --context-menu-background-padding-default: 2px;
       @media (-moz-windows-classic) {
         --context-menu-background-padding-default: -0.5px;
       }
     }
-  }
-  @include OS($win8) {
-    :root {
+    @include OS($win8) {
       --context-menu-background-padding-default: 3px;
     }
   }
@@ -99,13 +114,18 @@ $_initialMenus: selector.append(
 @mixin _layout_root_win10() {
   :root {
     --context-menu-background-padding: 1em;
-    --context-menu-text-padding: 24px; /* 16px + 8px */
+    --context-menu-text-padding: #{ 16px + 8px };
     --menu-background-padding-default: calc(var(--context-menu-background-padding) + var(--context-menu-text-padding));
+
+    @include Win10_NonNativeMenu() {
+      --bookmark-menu-icon-align-padding: 0px;
+    }
   }
   @include Win10_NativeMenu() {
     :root {
       --context-menu-background-padding: 3px;
       --menu-background-padding-default: 0px;
+      @include _layout_win_native_context_text_padding;
       @include Option("userChrome.compatibility.os.win11") {
         --context-menu-background-padding: 5px;
       }

diff --git a/src/utils/_native_menu.scss b/src/utils/_native_menu.scss
@@ -18,3 +18,9 @@
     @content;
   }
 }
+
+@mixin Win10_NonNativeMenu() {
+  @media (-moz-windows-non-native-menus) {
+    @content;
+  }
+}