Bug 1509388 - Part 1 - Don't use a toolbarbutton element for the download-subview-toolbarbutton binding. r=Gijs
authorPaolo Amadini <paolo.mozmail@amadzone.org>
Thu, 13 Dec 2018 18:47:28 +0000
changeset 511441 fe181f5f1a96
parent 511440 c8f0ee812c88
child 511442 60ca811184a3
push id1953
push userffxbld-merge
push dateMon, 11 Mar 2019 12:10:20 +0000
treeherdermozilla-release@9c35dcbaa899 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersGijs
bugs1509388
milestone66.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 1509388 - Part 1 - Don't use a toolbarbutton element for the download-subview-toolbarbutton binding. r=Gijs Download items in the Downloads Subview of the Library Panel are implemented using a XBL binding that is associated to a "toolbarbutton" element, but inherits from "button-base" in order to avoid the display="xul:button" of the "toolbarbutton" binding. This is because the item contains an inner button, and using a button CSS frame for the outer element would break hover behavior and mouse events. This changes the binding so it doesn't use a "toolbarbutton" element, which is a different way to avoid the outer button CSS frame, and eventually allows removing support for the "display" attribute in XBL. Differential Revision: https://phabricator.services.mozilla.com/D14572
browser/components/customizableui/PanelMultiView.jsm
browser/components/downloads/DownloadsSubview.jsm
browser/components/downloads/content/download.xml
browser/themes/shared/customizableui/panelUI.inc.css
--- a/browser/components/customizableui/PanelMultiView.jsm
+++ b/browser/components/customizableui/PanelMultiView.jsm
@@ -1392,17 +1392,17 @@ var PanelView = class extends Associated
    * enabled later may not be navigable.
    */
   get _navigableElements() {
     if (this.__navigableElements) {
       return this.__navigableElements;
     }
 
     let navigableElements = Array.from(this.node.querySelectorAll(
-      ":-moz-any(button,toolbarbutton,menulist,.text-link):not([disabled])"));
+      ":-moz-any(button,toolbarbutton,menulist,.text-link,.navigable):not([disabled])"));
     return this.__navigableElements = navigableElements.filter(element => {
       // Set the "tabindex" attribute to make sure the element is focusable.
       if (!element.hasAttribute("tabindex")) {
         element.setAttribute("tabindex", "0");
       }
       if (element.hasAttribute("disabled")) {
         return false;
       }
--- a/browser/components/downloads/DownloadsSubview.jsm
+++ b/browser/components/downloads/DownloadsSubview.jsm
@@ -360,21 +360,21 @@ class DownloadsSubview extends Downloads
   }
 }
 
 DownloadsSubview.Button = class extends DownloadsViewUI.DownloadElementShell {
   constructor(download, document) {
     super();
     this.download = download;
 
-    this.element = document.createElement("toolbarbutton");
+    this.element = document.createElement("hbox");
     this.element._shell = this;
 
-    this.element.classList.add("subviewbutton", "subviewbutton-iconic", "download",
-      "download-state");
+    this.element.classList.add("subviewbutton", "subviewbutton-iconic",
+      "download", "download-state", "navigable");
 
     let hover = event => {
       if (event.originalTarget.classList.contains("action-button")) {
         this.element.classList.toggle("downloadHoveringButton",
                                       event.type == "mouseover");
       }
     };
     this.element.addEventListener("mouseover", hover);
--- a/browser/components/downloads/content/download.xml
+++ b/browser/components/downloads/content/download.xml
@@ -7,18 +7,17 @@
    - You can obtain one at http://mozilla.org/MPL/2.0/. -->
 
 <!DOCTYPE bindings SYSTEM "chrome://browser/locale/downloads/downloads.dtd">
 
 <bindings id="downloadBindings"
           xmlns="http://www.mozilla.org/xbl"
           xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
           xmlns:xbl="http://www.mozilla.org/xbl">
-  <binding id="download-subview-toolbarbutton"
-           extends="chrome://global/content/bindings/button.xml#button-base">
+  <binding id="download-subview-toolbarbutton">
     <content>
       <xul:image class="toolbarbutton-icon" validate="always" xbl:inherits="src=image"/>
       <xul:vbox class="toolbarbutton-text" flex="1">
         <xul:label crop="end" xbl:inherits="value=label"/>
         <xul:label class="status-text status-full" crop="end" xbl:inherits="value=status"/>
         <xul:label class="status-text status-open" crop="end" xbl:inherits="value=openLabel"/>
         <xul:label class="status-text status-retry" crop="end" xbl:inherits="value=retryLabel"/>
         <xul:label class="status-text status-show" crop="end" xbl:inherits="value=showLabel"/>
--- a/browser/themes/shared/customizableui/panelUI.inc.css
+++ b/browser/themes/shared/customizableui/panelUI.inc.css
@@ -1052,26 +1052,28 @@ panelmultiview .toolbaritem-combined-but
 }
 
 panelview .toolbarbutton-1 {
   margin-top: 6px;
 }
 
 panelview .toolbarbutton-1@buttonStateHover@,
 toolbarbutton.subviewbutton@buttonStateHover@,
+.navigable.subviewbutton@buttonStateHover@,
 menu.subviewbutton@menuStateHover@,
 menuitem.subviewbutton@menuStateHover@,
 .widget-overflow-list .toolbarbutton-1@buttonStateHover@,
 .toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton@buttonStateHover@ {
   color: inherit;
   background-color: var(--arrowpanel-dimmed);
 }
 
 panelview .toolbarbutton-1@buttonStateActive@,
 toolbarbutton.subviewbutton@buttonStateActive@,
+.navigable.subviewbutton@buttonStateActive@,
 menu.subviewbutton@menuStateActive@,
 menuitem.subviewbutton@menuStateActive@,
 .widget-overflow-list .toolbarbutton-1@buttonStateActive@,
 .toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton@buttonStateActive@ {
   color: inherit;
   background-color: var(--arrowpanel-dimmed-further);
   box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset;
 }