Bug 1893114 - Remove unneeded gap on some context menupopups. r=aleca

Differential Revision: https://phabricator.services.mozilla.com/D208441

--HG--
extra : moz-landing-system : lando

calendar/base/content/calendar-context-menus-and-tooltips.inc.xhtml

@@ -564,8 +564,6 @@
               command="cmd_paste"/>
     <menuseparator id="calendar-menuseparator-beforemarkcompleted"/>
     <menuitem id="calendar-context-markcompleted"
-              type="checkbox"
-              autocheck="false"
               label="&calendar.context.markcompleted.label;"
               accesskey="&calendar.context.markcompleted.accesskey;"
               command="calendar_toggle_completed_command"/>

mail/components/im/content/imAccounts.xhtml

@@ -22,6 +22,7 @@
     <link rel="localization" href="chat/accounts.ftl" />
     <link rel="stylesheet" href="chrome://global/skin/global.css" />
     <link rel="stylesheet" href="chrome://messenger/skin/messenger.css" />
+    <link rel="stylesheet" href="chrome://messenger/skin/contextMenu.css" />
     <link rel="stylesheet" href="chrome://messenger/skin/imRichlistbox.css" />
     <link rel="stylesheet" href="chrome://messenger/skin/imAccounts.css" />
     <link rel="stylesheet" href="chrome://messenger/skin/chat.css" />

mail/themes/linux/mail/contextMenu.css

@@ -5,12 +5,15 @@
 @import url("chrome://messenger/skin/shared/contextMenu.css");
 
 menupopup {
+
   & > menuitem:is([type="checkbox"],[type="radio"]) .menu-iconic-icon {
     appearance: none;
   }
 
-  & > menu > .menu-text,
-  & menuitem:not(:is([type="checkbox"],[type="radio"])) > .menu-text {
+  &[needsgutter] >
+    :is(menu,menuitem:not(:is([type="checkbox"],[type="radio"]))) > .menu-text,
+  menubar > menu &:not([needsgutter]) >
+    :is(menu:not(.menu-iconic),menuitem:not(.menuitem-iconic)) > .menu-text {
     /* Align with the checkbox and radio menuitems. */
     padding-inline-start: 21px;
   }

mail/themes/osx/mail/contextMenu.css

@@ -12,11 +12,15 @@ menupopup {
     margin: 1px;
   }
 
+  & > :is(menu, menuitem)[disabled="true"][_moz-menuactive="true"] {
+    background-color: transparent !important;
+  }
+
   & > menu::after {
     line-height: 0;
   }
 
-  & > :is(menu, menuitem) > .menu-text {
+  &[needsgutter] > :is(menu, menuitem) > .menu-text {
     margin-inline-start: 21px;
   }
 
@@ -68,6 +72,24 @@ menupopup {
   }
 }
 
+.menu-right,
+.menu-accel-container {
+  margin-inline-end: 0;
+}
+
+.menu-accel-container {
+  opacity: 0.5;
+
+  menupopup[type="arrow"] & {
+    margin-inline-end: 0;
+  }
+
+  menuitem:not([disabled="true"]):hover &,
+  menuitem:not([disabled="true"]):focus & {
+    opacity: 1;
+  }
+}
+
 /* Only show the system checkmark on main window menu */
 #windowPopup > menuitem[checked="true"] {
   list-style-image: none;

mail/themes/osx/mail/messenger.css

@@ -184,11 +184,6 @@ toolbarbutton > menupopup menuitem {
   }
 }
 
-menupopup menu[disabled="true"][_moz-menuactive="true"],
-menupopup menuitem[disabled="true"][_moz-menuactive="true"] {
-  background-color: transparent !important;
-}
-
 menulist > menupopup menu .menu-right,
 toolbarbutton > menupopup menu .menu-right {
   appearance: none;
@@ -443,24 +438,6 @@ legend {
   font-weight: bold;
 }
 
-.menu-right,
-.menu-accel-container {
-  margin-inline-end: 0;
-}
-
-.menu-accel-container {
-  opacity: 0.5;
-
-  menupopup[type="arrow"] & {
-    margin-inline-end: 0;
-  }
-
-  menuitem:not([disabled="true"]):hover &,
-  menuitem:not([disabled="true"]):focus & {
-    opacity: 1;
-  }
-}
-
 /* UI Density customization */
 
 treechildren::-moz-tree-row {

mail/themes/shared/mail/primaryToolbar.css

@@ -170,8 +170,7 @@
   fill-opacity: var(--toolbarbutton-icon-fill-opacity);
 }
 
-#button-getAllNewMsg,
-#menu_getnewmsgs_all_accounts {
+#button-getAllNewMsg {
   list-style-image: var(--icon-download);
 }
 

mail/themes/windows/mail/contextMenu.css

@@ -15,11 +15,26 @@ menupopup {
     }
   }
 
-  &[needsgutter] menu:not([icon], .menu-iconic),
-  &[needsgutter] menuitem:not([checked="true"], [icon], .menuitem-iconic) {
+  & > :is(menu, menuitem) {
+    padding-block: var(--menuitem-vertical-padding);
+  }
+
+  menulist > & > :is(menu, menuitem) {
+    padding-inline-end: 5px;
+  }
+
+  &[needsgutter] > menu:not([icon], .menu-iconic),
+  &[needsgutter] > menuitem:not([checked="true"], [icon], .menuitem-iconic),
+  menubar > menu
+    &:not([needsgutter]) > :is(menu:not(.menu-iconic),menuitem:not(.menuitem-iconic)) {
     padding-inline-start: 32px;
   }
 
+  /* Override menu.css rule. */
+  &:not([needsgutter]) > menuitem:not([checked="true"], [icon], .menuitem-iconic) {
+    padding-inline-start: 8px;
+  }
+
   & > :is(menu, menuitem):not([needsgutter]) >
     menuitem:not([icon], .menuitem-iconic) {
     padding-inline-start: 1em;

mail/themes/windows/mail/messenger.css

@@ -8,38 +8,6 @@
 
 @import url("chrome://messenger/skin/shared/messenger.css");
 
-/* UI Density customization */
-:root {
-  --menuitem-vertical-padding: 3px;
-  &[uidensity="compact"] {
-    --menuitem-vertical-padding: 1px;
-  }
-
-  &[uidensity="touch"] {
-    --menuitem-vertical-padding: 8px;
-  }
-}
-
-menupopup > menu,
-menupopup > menuitem {
-  padding-block: var(--menuitem-vertical-padding);
-}
-
-menulist > menupopup > menu,
-menulist > menupopup > menuitem {
-  padding-inline-end: 5px;
-}
-
-menulist > menupopup:not([needsgutter]) > menu:not([icon], .menu-iconic),
-menulist > menupopup:not([needsgutter]) > menuitem:not([icon], .menuitem-iconic) {
-  padding-inline-start: 1em;
-}
-
-menupopup:not([needsgutter]) > menu:not([icon], .menu-iconic),
-menupopup:not([needsgutter]) > menuitem:not([checked="true"], [icon], .menuitem-iconic) {
-  padding-inline-start: 32px;
-}
-
 .folderMenuItem > .menu-iconic-left,
 .menuitem-iconic > .menu-iconic-left {
   display: flex;

mail/themes/windows/mail/variables.css

@@ -12,70 +12,79 @@
   --row-grouped-header-bg-color: -moz-dialog;
   --row-grouped-header-bg-color-selected: var(--selected-item-color);
   --panel-separator-color: ThreeDLightShadow;
-}
 
-@media not (prefers-contrast) {
-  :root {
+  /* UI Density customization */
+  --menuitem-vertical-padding: 3px;
+
+  &[uidensity="compact"] {
+    --menuitem-vertical-padding: 1px;
+  }
+
+  &[uidensity="touch"] {
+    --menuitem-vertical-padding: 8px;
+  }
+
+  @media not (prefers-contrast) {
     --toolbar-non-lwt-bgimage: none;
     --panel-separator-color: hsla(210, 4%, 10%, 0.14);
     --autocomplete-popup-url-color: hsl(210, 77%, 47%);
   }
-}
 
-@media (prefers-color-scheme: dark) {
-  :root[lwtheme] {
-    --autocomplete-popup-highlight-color: var(--lwt-text-color);
-    --dark-lwt-highlight-color: #0a84ff;
+  @media (prefers-color-scheme: dark) {
+    &[lwtheme] {
+      --autocomplete-popup-highlight-color: var(--lwt-text-color);
+      --dark-lwt-highlight-color: #0a84ff;
+    }
+
+    &[lwtheme]:not([lwt-tree]) menupopup {
+      --panel-background: var(--arrowpanel-background) !important;
+      --panel-color: var(--arrowpanel-color) !important;
+      --panel-border-color: var(--arrowpanel-border-color) !important;
+      --menu-color: var(--arrowpanel-color) !important;
+      --menu-disabled-color: color-mix(in srgb, var(--arrowpanel-color) 35%, transparent) !important;
+      --menuitem-hover-background-color: color-mix(in srgb, var(--arrowpanel-color) 13%, transparent) !important;
+    }
   }
 
-  :root[lwtheme]:not([lwt-tree]) menupopup {
-    --panel-background: var(--arrowpanel-background) !important;
-    --panel-color: var(--arrowpanel-color) !important;
-    --panel-border-color: var(--arrowpanel-border-color) !important;
-    --menu-color: var(--arrowpanel-color) !important;
-    --menu-disabled-color: color-mix(in srgb, var(--arrowpanel-color) 35%, transparent) !important;
-    --menuitem-hover-background-color: color-mix(in srgb, var(--arrowpanel-color) 13%, transparent) !important;
-  }
-}
+  @media (prefers-contrast) {
+    &:not([lwtheme]) {
+      --lwt-tabs-border-color: ThreeDShadow;
+      --item-focus-selected-border-color: SelectedItemText;
+      --new-folder-color: Highlight;
+      --menuitem-vertical-padding: 3px;
+      --arrowpanel-dimmed: SelectedItem;
+      --arrowpanel-dimmed-further: SelectedItem;
+      --toolbar-field-focus-border-color: SelectedItem;
 
-@media (prefers-contrast) {
-  :root:not([lwtheme]) {
-    --lwt-tabs-border-color: ThreeDShadow;
-    --item-focus-selected-border-color: SelectedItemText;
-    --new-folder-color: Highlight;
-    --menuitem-vertical-padding: 3px;
-    --arrowpanel-dimmed: SelectedItem;
-    --arrowpanel-dimmed-further: SelectedItem;
-    --toolbar-field-focus-border-color: SelectedItem;
+      & .themeable-full,
+      & .themeable-brighttext,
+      & #navigation-toolbox > toolbar,
+      & #todaypane-new-event-button,
+      & #CardViewBox {
+        --toolbarbutton-hover-background: SelectedItem;
+        --toolbarbutton-hover-bordercolor: SelectedItemText !important;
+        --toolbarbutton-active-background: SelectedItem;
+        --toolbarbutton-active-bordercolor: SelectedItemText;
+        --toolbarbutton-checked-background: SelectedItem;
+        --toolbarbutton-icon-fill-attention: SelectedItem;
+      }
 
-    & .themeable-full,
-    & .themeable-brighttext,
-    & #navigation-toolbox > toolbar,
-    & #todaypane-new-event-button,
-    & #CardViewBox {
-      --toolbarbutton-hover-background: SelectedItem;
-      --toolbarbutton-hover-bordercolor: SelectedItemText !important;
-      --toolbarbutton-active-background: SelectedItem;
-      --toolbarbutton-active-bordercolor: SelectedItemText;
-      --toolbarbutton-checked-background: SelectedItem;
-      --toolbarbutton-icon-fill-attention: SelectedItem;
-    }
+      & .toolbarbutton-1.message-header-view-button {
+        --toolbarbutton-header-bordercolor: WindowText;
+        --toolbarbutton-active-bordercolor: WindowText;
+      }
 
-    & .toolbarbutton-1.message-header-view-button {
-      --toolbarbutton-header-bordercolor: WindowText;
-      --toolbarbutton-active-bordercolor: WindowText;
-    }
+      & .toolbarbutton-1:not(.qfb-tag-button):hover,
+      & #calendar-add-task-button:hover,
+      & #todaypane-new-event-button:hover,
+      & .toolbarbutton-1[checked="true"],
+      & .toolbarbutton-menubutton-button:hover {
+        color: SelectedItemText !important;
+      }
 
-    & .toolbarbutton-1:not(.qfb-tag-button):hover,
-    & #calendar-add-task-button:hover,
-    & #todaypane-new-event-button:hover,
-    & .toolbarbutton-1[checked="true"],
-    & .toolbarbutton-menubutton-button:hover {
-      color: SelectedItemText !important;
-    }
-
-    & menulist {
-      --toolbarbutton-hover-background: ButtonFace;
+      & menulist {
+        --toolbarbutton-hover-background: ButtonFace;
+      }
     }
   }
 }