Bug 1553448 - Improve appearance of card menu at about:addons r=mstriemer,jaws a=jcristau
authorRob Wu <rob@robwu.nl>
Tue, 28 May 2019 18:16:47 +0000
changeset 536588 e02a84026ffda1838ebef5370593b97d0280e900
parent 536587 0be946c9a8d8634914882a561249f15603091f3f
child 536589 cffb585dac48a6d9ce1143e81f035fc4178c0a30
push id2082
push userffxbld-merge
push dateMon, 01 Jul 2019 08:34:18 +0000
treeherdermozilla-release@2fb19d0466d2 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmstriemer, jaws, jcristau
bugs1553448
milestone68.0
Bug 1553448 - Improve appearance of card menu at about:addons r=mstriemer,jaws a=jcristau - Render "hidden" appearance via opacity. This fixes the reported regression, and also results in a desired fading of the icon (if any). - Set cursor to "default" avoid "pointer" cursor in menu items. - Let the "checked" icon adapt the color of the style sheet (e.g. to account for dark themes) instead of using the default black color. - Prevent clicks on non-button elements in the menu from expanding the card, e.g. when the user clicks on the triangle or separator. - Render menu item icon at the right in RTL locales. Differential Revision: https://phabricator.services.mozilla.com/D32145
toolkit/mozapps/extensions/content/aboutaddons.js
toolkit/mozapps/extensions/content/panel-item.css
toolkit/mozapps/extensions/content/panel-list.css
--- a/toolkit/mozapps/extensions/content/aboutaddons.js
+++ b/toolkit/mozapps/extensions/content/aboutaddons.js
@@ -343,21 +343,17 @@ class PanelList extends HTMLElement {
     }
   }
 
   get open() {
     return this.hasAttribute("open");
   }
 
   set open(val) {
-    if (val) {
-      this.setAttribute("open", "true");
-    } else {
-      this.removeAttribute("open");
-    }
+    this.toggleAttribute("open", val);
   }
 
   show(triggeringEvent) {
     this.triggeringEvent = triggeringEvent;
     this.open = true;
   }
 
   hide(triggeringEvent) {
@@ -453,16 +449,20 @@ class PanelList extends HTMLElement {
       case "resize":
       case "scroll":
       case "blur":
         this.hide();
         break;
       case "click":
         if (e.target.tagName == "PANEL-ITEM") {
           this.hide();
+        } else {
+          // Avoid falling through to the default click handler of the
+          // add-on card, which would expand the add-on card.
+          e.stopPropagation();
         }
         break;
       case "mousedown":
       case "focusin":
         // There will be a focusin after the mousedown that opens the panel
         // using the mouse. Ignore the first focusin event if it's on the
         // triggering target.
         if (this.triggeringEvent &&
@@ -504,33 +504,25 @@ class PanelItem extends HTMLElement {
     this.button = this.shadowRoot.querySelector("button");
   }
 
   get disabled() {
     return this.button.hasAttribute("disabled");
   }
 
   set disabled(val) {
-    if (val) {
-      this.button.setAttribute("disabled", "");
-    } else {
-      this.button.removeAttribute("disabled");
-    }
+    this.button.toggleAttribute("disabled", val);
   }
 
   get checked() {
     return this.hasAttribute("checked");
   }
 
   set checked(val) {
-    if (val) {
-      this.setAttribute("checked", "");
-    } else {
-      this.removeAttribute("checked");
-    }
+    this.toggleAttribute("checked", val);
   }
 }
 customElements.define("panel-item", PanelItem);
 
 class AddonOptions extends HTMLElement {
   connectedCallback() {
     if (this.children.length == 0) {
       this.render();
@@ -1154,18 +1146,17 @@ class AddonCard extends HTMLElement {
           }
           break;
         case "report":
           this.panel.hide();
           openAbuseReport({addonId: addon.id, reportEntryPoint: "menu"});
           break;
         default:
           // Handle a click on the card itself.
-          // Don't expand if expanded or a button was clicked.
-          if (!this.expanded && e.target.localName != "button") {
+          if (!this.expanded) {
             loadViewFn("detail", this.addon.id);
           }
           break;
       }
     } else if (e.type == "change") {
       let {name} = e.target;
       if (name == "autoupdate") {
         addon.applyBackgroundUpdates = e.target.value;
--- a/toolkit/mozapps/extensions/content/panel-item.css
+++ b/toolkit/mozapps/extensions/content/panel-item.css
@@ -1,8 +1,14 @@
+:host([checked]) {
+  --icon: url("chrome://global/skin/icons/check.svg");
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
 button {
   background-color: transparent;
   color: inherit;
   background-image: var(--icon);
   background-position: 16px center;
   background-repeat: no-repeat;
   background-size: 16px;
   border: none;
@@ -10,32 +16,36 @@ button {
   display: block;
   font-size: inherit;
   padding: 4px 40px;
   padding-inline-end: 12px;
   text-align: start;
   width: 100%;
 }
 
+button:dir(rtl) {
+  background-position: right 16px center;
+}
+
 :host([badged]) button::after {
   content: "";
   display: block;
   width: 5px;
   height: 5px;
   border-radius: 50%;
   background: var(--blue-50);
   position: absolute;
   top: 4px;
   left: 28px;
 }
 
-:host([checked]) {
-  --icon: url("chrome://global/skin/icons/check.svg");
-}
-
 button:focus,
-button:not([disabled]):hover {
+button:enabled:hover {
   background-color: var(--in-content-button-background);
 }
 
-button:not([disabled]):hover:active {
+button:enabled:hover:active {
   background-color: var(--in-content-button-background-hover);
 }
+
+button:disabled {
+  opacity: 0.4;
+}
--- a/toolkit/mozapps/extensions/content/panel-list.css
+++ b/toolkit/mozapps/extensions/content/panel-list.css
@@ -12,16 +12,17 @@
   border: 1px solid var(--in-content-box-border-color);
   border-radius: var(--panel-border-radius);
   padding: 6px 0;
   margin-bottom: 16px;
   box-shadow: var(--shadow-30);
   min-width: 12em;
   z-index: 1;
   white-space: nowrap;
+  cursor: default;
 }
 
 :host([valign="top"]) {
   bottom: 30px;
 }
 
 :host([valign="bottom"]) {
   top: 30px;