Bug 1560359 - Simplify the markup for menuitems in the menu on about:logins. r=sfoster

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

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

browser/components/aboutlogins/content/aboutLogins.html

@@ -147,15 +147,11 @@
       <link rel="stylesheet" href="chrome://browser/content/aboutlogins/components/menu-button.css">
       <button class="menu-button alternate-button"></button>
       <ul class="menu" role="menu" hidden>
-        <li role="menuitem" class="menuitem windows-only">
-          <button class="menuitem-button menuitem-import alternate-button" data-event-name="AboutLoginsImport"></button>
+        <button role="menuitem" class="menuitem-button menuitem-import alternate-button" hidden data-supported-platforms="Win32" data-event-name="AboutLoginsImport"></button>
+        <button role="menuitem" class="menuitem-button menuitem-preferences alternate-button" data-event-name="AboutLoginsOpenPreferences"></button>
         </li>
         <li role="menuitem" class="menuitem">
           <button class="menuitem-button menuitem-feedback alternate-button" data-event-name="AboutLoginsOpenFeedback"></button>
-        </li>
-        <li role="menuitem" class="menuitem">
-          <button class="menuitem-button menuitem-preferences alternate-button" data-event-name="AboutLoginsOpenPreferences"></button>
-        </li>
       </ul>
     </template>
 

browser/components/aboutlogins/content/common.css

@@ -2,6 +2,12 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
+/* [hidden] isn't applying to elements in Shadow DOM. */
+:host([hidden]),
+[hidden] {
+  display: none !important;
+}
+
 .alternate-button {
   background-color: transparent;
 }

browser/components/aboutlogins/content/components/login-list-item.css

@@ -11,11 +11,6 @@
   border-bottom: 1px solid var(--in-content-box-border-color);
 }
 
-/* [hidden] isn't applying to elements in Shadow DOM. */
-:host([hidden]) {
-  display: none;
-}
-
 :host(:hover) {
   background-color: var(--in-content-box-background-hover);
 }

browser/components/aboutlogins/content/components/menu-button.css

@@ -30,6 +30,8 @@
   box-shadow: var(--shadow-10);
   min-width: max-content;
   list-style-type: none;
+  display: flex;
+  flex-direction: column;
 }
 
 .menu:dir(rtl) {
@@ -37,10 +39,6 @@
   left: 0;
 }
 
-.menuitem {
-  display: flex;
-}
-
 .menuitem-button {
   padding: 4px 8px;
   /* 32px = 8px (padding) + 16px (icon) + 8px (padding) */
@@ -52,8 +50,9 @@
   border-radius: 0;
   /* Override common.inc.css box-shadow on these buttons */
   box-shadow: none !important;
-  flex-grow: 1;
   text-align: start;
+  -moz-context-properties: fill;
+  fill: currentColor;
 }
 
 .menuitem-button:dir(rtl) {
@@ -71,7 +70,3 @@
 .menuitem-feedback {
   background-image: url("chrome://browser/content/aboutlogins/icons/feedback.svg");
 }
-
-:host(:not(.Win32)) .windows-only {
-  display: none;
-}

browser/components/aboutlogins/content/components/menu-button.js

@@ -14,11 +14,11 @@ export default class MenuButton extends ReflectedFluentElement {
     this.attachShadow({mode: "open"})
         .appendChild(MenuButtonTemplate.content.cloneNode(true));
 
-    if (navigator.platform == "Win32") {
-      // We can't add navigator.platform in all cases
-      // because some platforms, such as Ubuntu 64-bit,
-      // use "Linux x86_64" which is an invalid className.
-      this.classList.add(navigator.platform);
+    for (let menuitem of this.shadowRoot.querySelectorAll(".menuitem-button[data-supported-platforms]")) {
+      let supportedPlatforms = menuitem.dataset.supportedPlatforms.split(",").map(platform => platform.trim());
+      if (supportedPlatforms.includes(navigator.platform)) {
+        menuitem.hidden = false;
+      }
     }
 
     this._menu = this.shadowRoot.querySelector(".menu");