Bug 1568337 - Update about:logins meatball menu to match the spec. r=jaws
authorTim Nguyen <ntim.bugs@gmail.com>
Wed, 24 Jul 2019 00:36:31 +0000
changeset 483936 fd3a24e14d5419476b93fc3ca63d0b119108aae4
parent 483935 72699e27e033a5a1ee8cd26176f0703f69387c95
child 483937 c46264666567f04920f6a41a0ccf2535606bdb1d
push id90710
push userntim.bugs@gmail.com
push dateWed, 24 Jul 2019 01:19:09 +0000
treeherderautoland@fd3a24e14d54 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws
bugs1568337
milestone70.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 1568337 - Update about:logins meatball menu to match the spec. r=jaws Differential Revision: https://phabricator.services.mozilla.com/D39112
browser/components/aboutlogins/content/aboutLogins.html
browser/components/aboutlogins/content/components/menu-button.css
browser/components/aboutlogins/content/icons/faq.svg
browser/components/aboutlogins/content/icons/feedback.svg
browser/components/aboutlogins/content/icons/mobile.svg
browser/components/aboutlogins/jar.mn
--- a/browser/components/aboutlogins/content/aboutLogins.html
+++ b/browser/components/aboutlogins/content/aboutLogins.html
@@ -142,16 +142,18 @@
     <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 ghost-button" data-l10n-id="menu"></button>
       <ul class="menu" role="menu" hidden>
         <button role="menuitem" class="menuitem-button menuitem-import ghost-button" hidden data-supported-platforms="Win32" data-event-name="AboutLoginsImport" data-l10n-id="menu-menuitem-import"></button>
         <button role="menuitem" class="menuitem-button menuitem-preferences ghost-button" data-event-name="AboutLoginsOpenPreferences" data-l10n-id="menu-menuitem-preferences"></button>
+        <hr role="separator" class="menuitem-separator"></hr>
         <button role="menuitem" class="menuitem-button menuitem-feedback ghost-button" data-event-name="AboutLoginsOpenFeedback" data-l10n-id="menu-menuitem-feedback"></button>
         <button role="menuitem" class="menuitem-button menuitem-faq ghost-button" data-event-name="AboutLoginsOpenFAQ" data-l10n-id="menu-menuitem-faq"></button>
+        <hr role="separator" class="menuitem-separator"></hr>
         <button role="menuitem" class="menuitem-button menuitem-mobile menuitem-mobile-android ghost-button" data-event-name="AboutLoginsOpenMobileAndroid" data-l10n-id="menu-menuitem-download-android"></button>
         <button role="menuitem" class="menuitem-button menuitem-mobile menuitem-mobile-ios ghost-button" data-event-name="AboutLoginsOpenMobileIos" data-l10n-id="menu-menuitem-download-iphone"></button>
       </ul>
     </template>
   </body>
 </html>
--- a/browser/components/aboutlogins/content/components/menu-button.css
+++ b/browser/components/aboutlogins/content/components/menu-button.css
@@ -21,71 +21,62 @@
 .menu {
   position: absolute;
   top: 30px;
   inset-inline-end: 0;
   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);
+  border-radius: 5px;
+  box-shadow: var(--shadow-30);
   min-width: max-content;
   list-style-type: none;
   display: flex;
   flex-direction: column;
 }
 
 .menuitem-button {
-  padding: 4px 8px;
+  padding: 2px 8px;
   /* 32px = 8px (padding) + 16px (icon) + 8px (padding) */
   padding-inline-start: 32px;
   background-repeat: no-repeat;
   background-position: left 8px center;
   background-size: 16px;
+  -moz-context-properties: fill;
+  fill: currentColor;
+
+  /* Override common.inc.css properties */
   margin: 0;
   border-radius: 0;
-  /* Override common.inc.css box-shadow on these buttons */
-  box-shadow: none !important;
   text-align: start;
-  -moz-context-properties: fill;
-  fill: currentColor;
+  min-height: initial;
 }
 
 .menuitem-button:dir(rtl) {
   background-position: right 8px center;
 }
 
+.menuitem-separator {
+  border-top-width: 2px;
+  margin-block: 5px;
+  width: 100%;
+}
+
 .menuitem-import {
   background-image: url("chrome://browser/skin/save.svg");
 }
 
 .menuitem-preferences {
   background-image: url("chrome://browser/skin/settings.svg");
 }
 
 .menuitem-feedback {
-  background-image: url("chrome://browser/content/aboutlogins/icons/feedback.svg");
+  background-image: url("chrome://browser/skin/notification-icons/desktop-notification.svg");
 }
 
 .menuitem-faq {
-  background-image: url("chrome://browser/content/aboutlogins/icons/faq.svg");
+  background-image: url("chrome://global/skin/icons/help.svg");
 }
 
 .menuitem-mobile {
-  background-image: url("chrome://browser/content/aboutlogins/icons/mobile.svg");
-}
-
-.menuitem-mobile-android {
-  position: relative;
-  margin-top: 6px;
+  background-image: url("chrome://browser/skin/device-phone.svg");
 }
-
-.menuitem-mobile-android::after {
-  content: "";
-  position: absolute;
-  width: 100%;
-  background-color: var(--in-content-button-background);
-  height: 2px;
-  display: block;
-  top: -5px;
-  inset-inline-start: 0;
-}
deleted file mode 100644
--- a/browser/components/aboutlogins/content/icons/faq.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<!-- 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/. -->
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-    <path fill="context-fill" fill-rule="evenodd" d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zM8 2.719a2.925 2.925 0 0 0-3.115 3.114.948.948 0 1 0 1.896 0c0-1.083.65-1.218 1.219-1.218a1.197 1.197 0 0 1 1.224.806c.1.457-.142.92-.574 1.1a2.966 2.966 0 0 0-1.598 2.562v.365a.948.948 0 0 0 1.896 0v-.4c.048-.393.298-.732.66-.893a2.857 2.857 0 0 0 1.447-3.232A3.074 3.074 0 0 0 8 2.72zm0 8.26a1.354 1.354 0 1 0 0 2.708 1.354 1.354 0 0 0 0-2.708z"/>
-</svg>
deleted file mode 100644
--- a/browser/components/aboutlogins/content/icons/feedback.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="14" viewBox="0 0 16 14">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0-1h16v16H0z"/>
-        <path fill="context-fill" fill-rule="nonzero" d="M14.929 2.984c-.715-.878-1.685-1.572-2.911-2.08C10.792.393 9.452.14 8 .14S5.208.394 3.982.903c-1.226.51-2.196 1.203-2.91 2.08C.356 3.863 0 4.819 0 5.855c0 .893.27 1.73.808 2.51.539.779 1.275 1.434 2.21 1.964a5.7 5.7 0 0 1-.232.678c-.09.214-.17.39-.241.527a3.624 3.624 0 0 1-.29.455 4.657 4.657 0 0 1-.277.353 142.3 142.3 0 0 0-.657.728l-.062.076-.054.08c-.03.044-.043.073-.04.085a.237.237 0 0 1-.018.089c-.015.048-.013.083.005.107v.009a.455.455 0 0 0 .143.246.358.358 0 0 0 .24.093h.045a6.733 6.733 0 0 0 1.018-.196 9.757 9.757 0 0 0 4.107-2.161c.447.048.878.071 1.295.071 1.452 0 2.792-.254 4.018-.763 1.226-.51 2.196-1.202 2.91-2.08C15.643 7.847 16 6.89 16 5.855c0-1.036-.357-1.993-1.071-2.871zm-1.457 4.948c-.575.645-1.35 1.158-2.326 1.538-.976.38-2.025.57-3.146.57-.335 0-.693-.022-1.072-.065l-.47-.05-.355.312a8.138 8.138 0 0 1-2.268 1.403c.253-.443.446-.913.578-1.41l.222-.788-.717-.41c-.715-.405-1.269-.885-1.662-1.44-.393-.555-.59-1.14-.59-1.752 0-.749.288-1.446.862-2.092.575-.645 1.35-1.158 2.326-1.538A8.591 8.591 0 0 1 8 1.64c1.122 0 2.17.19 3.146.57.976.38 1.75.893 2.326 1.538.574.646.861 1.343.861 2.092 0 .75-.287 1.447-.861 2.092z"/>
-    </g>
-</svg>
deleted file mode 100644
--- a/browser/components/aboutlogins/content/icons/mobile.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<!-- 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/. -->
-<svg xmlns="http://www.w3.org/2000/svg" width="12" height="16" viewBox="0 0 12 16">
-	<path fill="context-fill" fill-rule="evenodd" d="M10,0H2A2,2,0,0,0,0,2V14a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V2A2,2,0,0,0,10,0ZM7,15H5V14H7Zm3-2.5a.5.5,0,0,1-.5.5h-7a.5.5,0,0,1-.5-.5V2.5A.5.5,0,0,1,2.5,2h7a.5.5,0,0,1,.5.5Z" />
-</svg>
--- a/browser/components/aboutlogins/jar.mn
+++ b/browser/components/aboutlogins/jar.mn
@@ -11,19 +11,16 @@ browser.jar:
   content/browser/aboutlogins/components/login-item.js         (content/components/login-item.js)
   content/browser/aboutlogins/components/login-list.css        (content/components/login-list.css)
   content/browser/aboutlogins/components/login-list.js         (content/components/login-list.js)
   content/browser/aboutlogins/components/login-list-item.js    (content/components/login-list-item.js)
   content/browser/aboutlogins/components/menu-button.css       (content/components/menu-button.css)
   content/browser/aboutlogins/components/menu-button.js        (content/components/menu-button.js)
   content/browser/aboutlogins/icons/delete.svg        (content/icons/delete.svg)
   content/browser/aboutlogins/icons/edit.svg          (content/icons/edit.svg)
-  content/browser/aboutlogins/icons/faq.svg           (content/icons/faq.svg)
   content/browser/aboutlogins/icons/favicon.svg       (content/icons/favicon.svg)
-  content/browser/aboutlogins/icons/feedback.svg      (content/icons/feedback.svg)
   content/browser/aboutlogins/icons/hide-password.svg (content/icons/hide-password.svg)
-  content/browser/aboutlogins/icons/mobile.svg        (content/icons/mobile.svg)
   content/browser/aboutlogins/icons/show-password.svg (content/icons/show-password.svg)
   content/browser/aboutlogins/aboutLogins.css   (content/aboutLogins.css)
   content/browser/aboutlogins/aboutLogins.js    (content/aboutLogins.js)
   content/browser/aboutlogins/aboutLogins.html  (content/aboutLogins.html)
   content/browser/aboutlogins/aboutLoginsUtils.js (content/aboutLoginsUtils.js)
   content/browser/aboutlogins/common.css        (content/common.css)