Bug 1560359 - Simplify the markup for menuitems in the menu on about:logins. r=sfoster
authorJared Wein <jwein@mozilla.com>
Wed, 03 Jul 2019 03:34:35 +0000
changeset 540710 2bfbb6633d3a12f097cab9f1c40f54288395d27c
parent 540709 a47da25dc19653b7a19d54119589dbc340c34420
child 540711 f9bbfd8ef2b0cce32506daebfa787bdb00d8eb8c
push id11529
push userarchaeopteryx@coole-files.de
push dateThu, 04 Jul 2019 15:22:33 +0000
treeherdermozilla-beta@ebb510a784b8 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerssfoster
bugs1560359
milestone69.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1560359 - Simplify the markup for menuitems in the menu on about:logins. r=sfoster Differential Revision: https://phabricator.services.mozilla.com/D35829
browser/components/aboutlogins/content/aboutLogins.html
browser/components/aboutlogins/content/common.css
browser/components/aboutlogins/content/components/login-list-item.css
browser/components/aboutlogins/content/components/menu-button.css
browser/components/aboutlogins/content/components/menu-button.js
--- a/browser/components/aboutlogins/content/aboutLogins.html
+++ b/browser/components/aboutlogins/content/aboutLogins.html
@@ -142,25 +142,21 @@
     </template>
 
     <template id="menu-button-template">
       <link rel="stylesheet" href="chrome://global/skin/in-content/common.css">
       <link rel="stylesheet" href="chrome://browser/content/aboutlogins/common.css">
       <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>
 
     <template id="copy-to-clipboard-button-template">
       <link rel="stylesheet" href="chrome://global/skin/in-content/common.css">
       <link rel="stylesheet" href="chrome://browser/content/aboutlogins/components/copy-to-clipboard-button.css">
       <button class="copy-button">
         <span class="copied-button-text"></span>
--- a/browser/components/aboutlogins/content/common.css
+++ b/browser/components/aboutlogins/content/common.css
@@ -1,12 +1,18 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * 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;
 }
 
 .alternate-button:hover {
   background-color: var(--in-content-button-background-hover);
 }
 
--- a/browser/components/aboutlogins/content/components/login-list-item.css
+++ b/browser/components/aboutlogins/content/components/login-list-item.css
@@ -6,21 +6,16 @@
   display: block;
   padding: 10px;
   padding-inline-end: 18px;
   padding-inline-start: 14px;
   border-inline-start: 4px solid transparent;
   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);
 }
 
 :host(:hover:active) {
   background-color: var(--in-content-box-background-active);
 }
 
--- a/browser/components/aboutlogins/content/components/menu-button.css
+++ b/browser/components/aboutlogins/content/components/menu-button.css
@@ -25,40 +25,39 @@
   margin: 0;
   padding: 5px 0;
   background-color: var(--in-content-box-background);
   border: 1px solid var(--in-content-box-border-color);
   border-radius: 2px;
   box-shadow: var(--shadow-10);
   min-width: max-content;
   list-style-type: none;
+  display: flex;
+  flex-direction: column;
 }
 
 .menu:dir(rtl) {
   right: auto;
   left: 0;
 }
 
-.menuitem {
-  display: flex;
-}
-
 .menuitem-button {
   padding: 4px 8px;
   /* 32px = 8px (padding) + 16px (icon) + 8px (padding) */
   padding-inline-start: 32px;
   background-repeat: no-repeat;
   background-position: left 8px center;
   background-size: 16px;
   margin: 0;
   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) {
   background-position: right 8px center;
 }
 
 .menuitem-import {
   background-image: url("chrome://browser/skin/save.svg");
@@ -66,12 +65,8 @@
 
 .menuitem-preferences {
   background-image: url("chrome://browser/skin/settings.svg");
 }
 
 .menuitem-feedback {
   background-image: url("chrome://browser/content/aboutlogins/icons/feedback.svg");
 }
-
-:host(:not(.Win32)) .windows-only {
-  display: none;
-}
--- a/browser/components/aboutlogins/content/components/menu-button.js
+++ b/browser/components/aboutlogins/content/components/menu-button.js
@@ -9,21 +9,21 @@ export default class MenuButton extends 
     if (this.shadowRoot) {
       return;
     }
 
     let MenuButtonTemplate = document.querySelector("#menu-button-template");
     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");
     this._menuButton = this.shadowRoot.querySelector(".menu-button");
 
     this._menuButton.addEventListener("click", this);
 
     super.connectedCallback();