Bug 1298276 - Change the hover behavior in summary section with downloading files., r=paolo draft
authorSean Lee <selee@mozilla.com>
Thu, 18 Aug 2016 14:45:57 +0800
changeset 407499 211e80e6d5a2c532e69bd1a41dd3278cc751f9a1
parent 406450 1a5b53a831e5a6c20de1b081c774feb3ff76756c
child 529889 97a9573ea1d89d8e63764fde2b7a39a36e6672cf
push id27980
push userbmo:selee@mozilla.com
push dateTue, 30 Aug 2016 14:59:28 +0000
reviewerspaolo
bugs1298276
milestone51.0a1
Bug 1298276 - Change the hover behavior in summary section with downloading files., r=paolo MozReview-Commit-ID: 1hKBRXOBH6c
browser/components/downloads/content/downloads.css
browser/components/downloads/content/downloads.js
browser/components/downloads/content/downloadsOverlay.xul
browser/themes/shared/downloads/downloads.inc.css
--- a/browser/components/downloads/content/downloads.css
+++ b/browser/components/downloads/content/downloads.css
@@ -19,21 +19,33 @@ richlistitem[type="download"]:not([selec
 }
 
 richlistitem[type="download"].download-state[state="1"]:not([exists]) .downloadShow {
   display: none;
 }
 
 #downloadsSummary:not([inprogress]) > vbox > #downloadsSummaryProgress,
 #downloadsSummary:not([inprogress]) > vbox > #downloadsSummaryDetails,
-#downloadsFooter[showingsummary] > #downloadsFooterButtons,
-#downloadsFooter:not([showingsummary]) > #downloadsSummary {
+#downloadsFooter:not([showingsummary]) #downloadsSummary {
   display: none;
 }
 
+#downloadsFooter[showingdropdown] > stack > #downloadsSummary,
+#downloadsFooter[showingsummary] > stack:hover > #downloadsSummary,
+#downloadsFooter[showingsummary]:not([showingdropdown]) > stack:not(:hover) > #downloadsFooterButtons {
+  /* If we used "visibility: hidden;" then the mouseenter event of
+     #downloadsHistory wouldn't be triggered immediately, and the hover styling
+     of the button would not apply until the mouse is moved again.
+
+     "-moz-user-focus: ignore;" prevents the elements with "opacity: 0;" from
+     being focused with the keyboard. */
+  opacity: 0;
+  -moz-user-focus: ignore;
+}
+
 /*** Downloads View ***/
 
 /**
  * The downloads richlistbox may list thousands of items, and it turns out
  * XBL binding attachment, and even more so detachment, is a performance hog.
  * This hack makes sure we don't apply any binding to inactive items (inactive
  * items are history downloads that haven't been in the visible area).
  * We can do this because the richlistbox implementation does not interact
--- a/browser/components/downloads/content/downloads.js
+++ b/browser/components/downloads/content/downloads.js
@@ -377,24 +377,25 @@ const DownloadsPanel = {
 
   onFooterPopupShowing(aEvent) {
     let itemClearList = document.getElementById("downloadsDropdownItemClearList");
     if (DownloadsCommon.getData(window).canRemoveFinished) {
       itemClearList.removeAttribute("hidden");
     } else {
       itemClearList.setAttribute("hidden", "true");
     }
+    DownloadsViewController.updateCommands();
 
-    document.getElementById("downloadsFooterButtonsSplitter").classList
-      .add("downloadsDropmarkerSplitterExtend");
+    document.getElementById("downloadsFooter")
+      .setAttribute("showingdropdown", true);
   },
 
   onFooterPopupHidden(aEvent) {
-    document.getElementById("downloadsFooterButtonsSplitter").classList
-      .remove("downloadsDropmarkerSplitterExtend");
+    document.getElementById("downloadsFooter")
+      .removeAttribute("showingdropdown");
   },
 
   //////////////////////////////////////////////////////////////////////////////
   //// Related operations
 
   /**
    * Shows or focuses the user interface dedicated to downloads history.
    */
--- a/browser/components/downloads/content/downloadsOverlay.xul
+++ b/browser/components/downloads/content/downloadsOverlay.xul
@@ -124,61 +124,63 @@
                        ondragstart="DownloadsView.onDownloadDragStart(event);"/>
           <description id="emptyDownloads"
                        mousethrough="always">
              &downloadsPanelEmpty.label;
           </description>
           <spacer flex="1"/>
           <vbox id="downloadsFooter"
                 class="downloadsPanelFooter">
-            <hbox id="downloadsSummary"
-                  align="center"
-                  orient="horizontal"
-                  onkeydown="DownloadsSummary.onKeyDown(event);"
-                  onclick="DownloadsSummary.onClick(event);">
-              <image class="downloadTypeIcon" />
-              <vbox pack="center"
-                    class="downloadContainer"
-                    style="width: &downloadDetails.width;">
-                <description id="downloadsSummaryDescription"
-                             style="min-width: &downloadsSummary.minWidth2;"/>
-                <progressmeter id="downloadsSummaryProgress"
-                               class="downloadProgress"
-                               min="0"
-                               max="100"
-                               mode="normal" />
-                <description id="downloadsSummaryDetails"
-                             crop="end"/>
-              </vbox>
-            </hbox>
-            <hbox id="downloadsFooterButtons">
-              <button id="downloadsHistory"
-                      class="plain downloadsPanelFooterButton"
-                      label="&downloadsHistory.label;"
-                      accesskey="&downloadsHistory.accesskey;"
-                      flex="1"
-                      oncommand="DownloadsPanel.showDownloadsHistory();"/>
-              <toolbarseparator id="downloadsFooterButtonsSplitter"
-                      class="downloadsDropmarkerSplitter"/>
-              <button id="downloadsFooterDropmarker"
-                      class="plain downloadsPanelFooterButton downloadsDropmarker"
-                      type="menu">
-                <menupopup id="downloadSubPanel"
-                           onpopupshowing="DownloadsPanel.onFooterPopupShowing(event);"
-                           onpopuphidden="DownloadsPanel.onFooterPopupHidden(event);"
-                           position="after_end">
-                  <menuitem id="downloadsDropdownItemClearList"
-                            command="downloadsCmd_clearList"
-                            label="&cmd.clearList2.label;"/>
-                  <menuitem id="downloadsDropdownItemOpenDownloadsFolder"
-                            oncommand="DownloadsPanel.openDownloadsFolder();"
-                            label="&openDownloadsFolder.label;"/>
-                </menupopup>
-              </button>
-            </hbox>
+            <stack>
+              <hbox id="downloadsSummary"
+                    align="center"
+                    orient="horizontal"
+                    onkeydown="DownloadsSummary.onKeyDown(event);"
+                    onclick="DownloadsSummary.onClick(event);">
+                <image class="downloadTypeIcon" />
+                <vbox pack="center"
+                      class="downloadContainer"
+                      style="width: &downloadDetails.width;">
+                  <description id="downloadsSummaryDescription"
+                               style="min-width: &downloadsSummary.minWidth2;"/>
+                  <progressmeter id="downloadsSummaryProgress"
+                                 class="downloadProgress"
+                                 min="0"
+                                 max="100"
+                                 mode="normal" />
+                  <description id="downloadsSummaryDetails"
+                               crop="end"/>
+                </vbox>
+              </hbox>
+              <hbox id="downloadsFooterButtons">
+                <button id="downloadsHistory"
+                        class="plain downloadsPanelFooterButton"
+                        label="&downloadsHistory.label;"
+                        accesskey="&downloadsHistory.accesskey;"
+                        flex="1"
+                        oncommand="DownloadsPanel.showDownloadsHistory();"/>
+                <toolbarseparator id="downloadsFooterButtonsSplitter"
+                        class="downloadsDropmarkerSplitter"/>
+                <button id="downloadsFooterDropmarker"
+                        class="plain downloadsPanelFooterButton downloadsDropmarker"
+                        type="menu">
+                  <menupopup id="downloadSubPanel"
+                             onpopupshowing="DownloadsPanel.onFooterPopupShowing(event);"
+                             onpopuphidden="DownloadsPanel.onFooterPopupHidden(event);"
+                             position="after_end">
+                    <menuitem id="downloadsDropdownItemClearList"
+                              command="downloadsCmd_clearList"
+                              label="&cmd.clearList2.label;"/>
+                    <menuitem id="downloadsDropdownItemOpenDownloadsFolder"
+                              oncommand="DownloadsPanel.openDownloadsFolder();"
+                              label="&openDownloadsFolder.label;"/>
+                  </menupopup>
+                </button>
+              </hbox>
+            </stack>
           </vbox>
         </panelview>
 
         <panelview id="downloadsPanel-blockedSubview"
                    orient="vertical"
                    flex="1">
           <description id="downloadsPanel-blockedSubview-title"/>
           <description id="downloadsPanel-blockedSubview-details1"/>
--- a/browser/themes/shared/downloads/downloads.inc.css
+++ b/browser/themes/shared/downloads/downloads.inc.css
@@ -89,17 +89,17 @@
   padding-left: 58px !important;
 }
 
 toolbarseparator.downloadsDropmarkerSplitter {
   margin: 7px 0;
 }
 
 #downloadsFooter:hover toolbarseparator.downloadsDropmarkerSplitter,
-#downloadsFooter toolbarseparator.downloadsDropmarkerSplitterExtend {
+#downloadsFooter[showingdropdown] toolbarseparator {
   margin: 0;
 }
 
 .downloadsDropmarker {
   padding: 0 19px !important;
 }
 
 .downloadsDropmarker > .button-box > hbox {