Bug 1553448 - Improve appearance of card menu at about:addons r=mstriemer,jaws

- 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

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

toolkit/mozapps/extensions/content/aboutaddons.js

@@ -349,11 +349,7 @@ class PanelList extends HTMLElement {
   }
 
   set open(val) {
-    if (val) {
-      this.setAttribute("open", "true");
-    } else {
-      this.removeAttribute("open");
-    }
+    this.toggleAttribute("open", val);
   }
 
   show(triggeringEvent) {
@@ -459,6 +455,10 @@ class PanelList extends HTMLElement {
       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":
@@ -510,11 +510,7 @@ class PanelItem extends HTMLElement {
   }
 
   set disabled(val) {
-    if (val) {
-      this.button.setAttribute("disabled", "");
-    } else {
-      this.button.removeAttribute("disabled");
-    }
+    this.button.toggleAttribute("disabled", val);
   }
 
   get checked() {
@@ -522,11 +518,7 @@ class PanelItem extends HTMLElement {
   }
 
   set checked(val) {
-    if (val) {
-      this.setAttribute("checked", "");
-    } else {
-      this.removeAttribute("checked");
-    }
+    this.toggleAttribute("checked", val);
   }
 }
 customElements.define("panel-item", PanelItem);
@@ -1164,8 +1156,7 @@ class AddonCard extends HTMLElement {
           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;

toolkit/mozapps/extensions/content/panel-item.css

@@ -1,3 +1,9 @@
+:host([checked]) {
+  --icon: url("chrome://global/skin/icons/check.svg");
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
 button {
   background-color: transparent;
   color: inherit;
@@ -15,6 +21,10 @@ button {
   width: 100%;
 }
 
+button:dir(rtl) {
+  background-position: right 16px center;
+}
+
 :host([badged]) button::after {
   content: "";
   display: block;
@@ -27,15 +37,15 @@ button {
   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;
+}

toolkit/mozapps/extensions/content/panel-list.css

@@ -17,6 +17,7 @@
   min-width: 12em;
   z-index: 1;
   white-space: nowrap;
+  cursor: default;
 }
 
 :host([valign="top"]) {