Bug 1282662 - Part 2: Implement the detail description in hover button case.; r?paolo draft
authorSean Lee <selee@mozilla.com>
Wed, 21 Dec 2016 22:50:07 +0800
changeset 479950 cc814b3361b798e9f3b0f7d91d88ff17f1c56d4e
parent 479949 036beaa822961b25ccc38582a674c2bcdf320d38
child 544823 32c3bd812fee1e3f8a15b3e1076f1bb5956e9487
push id44402
push userbmo:selee@mozilla.com
push dateTue, 07 Feb 2017 14:42:47 +0000
reviewerspaolo
bugs1282662
milestone54.0a1
Bug 1282662 - Part 2: Implement the detail description in hover button case.; r?paolo MozReview-Commit-ID: G3L0sULmRLD
browser/components/downloads/content/download.xml
browser/components/downloads/content/downloads.js
browser/locales/en-US/chrome/browser/downloads/downloads.dtd
browser/themes/shared/downloads/allDownloadsViewOverlay.inc.css
browser/themes/shared/downloads/downloads.inc.css
--- a/browser/components/downloads/content/download.xml
+++ b/browser/components/downloads/content/download.xml
@@ -50,16 +50,38 @@
                            crop="end"
                            xbl:inherits="value=status"/>
           <xul:description class="downloadDetails downloadDetailsHover"
                            crop="end"
                            xbl:inherits="value=hoverStatus"/>
           <xul:description class="downloadDetails downloadDetailsFull"
                            crop="end"
                            xbl:inherits="value=fullStatus,tooltiptext=fullStatus"/>
+          <xul:description class="downloadDetails downloadOpenFile"
+                           crop="end"
+                           value="&openFile.label;"/>
+          <xul:description class="downloadDetails downloadShowMoreInfo"
+                           crop="end"
+                           value="&showMoreInformation.label;"/>
+          <xul:stack class="downloadButtonLabels">
+            <xul:description class="downloadDetails downloadShow"
+                             crop="end"
+#ifdef XP_MACOSX
+                             value="&cmd.showMac.label;"
+#else
+                             value="&cmd.show.label;"
+#endif
+                             />
+            <xul:description class="downloadDetails downloadCancel"
+                             crop="end"
+                             value="&cancelDownload.label;"/>
+            <xul:description class="downloadDetails downloadRetry"
+                             crop="end"
+                             value="&retryDownload.label;"/>
+          </xul:stack>
         </xul:vbox>
       </xul:hbox>
       <xul:toolbarseparator />
       <xul:stack class="downloadButtonArea">
         <xul:button class="downloadButton downloadCancel downloadIconCancel"
                     tooltiptext="&cmd.cancel.label;"
                     oncommand="DownloadsView.onDownloadCommand(event, 'downloadsCmd_cancel');"/>
         <xul:button class="downloadButton downloadRetry downloadIconRetry"
--- a/browser/components/downloads/content/downloads.js
+++ b/browser/components/downloads/content/downloads.js
@@ -1032,23 +1032,36 @@ const DownloadsView = {
     DownloadsCommon.log("Context menu has hidden.");
     this.contextMenuOpen = false;
   },
 
   /**
    * Mouse listeners to handle selection on hover.
    */
   onDownloadMouseOver(aEvent) {
+    if (aEvent.originalTarget.classList.contains("downloadButton")) {
+      aEvent.target.classList.add("downloadHoveringButton");
+
+      let button = aEvent.originalTarget;
+      let tooltip = button.getAttribute("tooltiptext");
+      if (tooltip) {
+        button.setAttribute("aria-label", tooltip);
+        button.removeAttribute("tooltiptext");
+      }
+    }
     if (!(this.contextMenuOpen || this.subViewOpen) &&
         aEvent.target.parentNode == this.richListBox) {
       this.richListBox.selectedItem = aEvent.target;
     }
   },
 
   onDownloadMouseOut(aEvent) {
+    if (aEvent.originalTarget.classList.contains("downloadButton")) {
+      aEvent.target.classList.remove("downloadHoveringButton");
+    }
     if (!(this.contextMenuOpen || this.subViewOpen) &&
         aEvent.target.parentNode == this.richListBox) {
       // If the destination element is outside of the richlistitem, clear the
       // selection.
       let element = aEvent.relatedTarget;
       while (element && element != aEvent.target) {
         element = element.parentNode;
       }
--- a/browser/locales/en-US/chrome/browser/downloads/downloads.dtd
+++ b/browser/locales/en-US/chrome/browser/downloads/downloads.dtd
@@ -84,16 +84,40 @@
 <!ENTITY cmd.chooseUnblock.label          "Remove File or Allow Download">
 <!-- LOCALIZATION NOTE (cmd.chooseOpen.tooltip):
      This is the tooltip of the action button shown when uncommon downloads are
      blocked.This opens a dialog where the user can choose whether to open the
      file or remove the download. Opening is the default option.
      -->
 <!ENTITY cmd.chooseOpen.label             "Open or Remove File">
 
+<!-- LOCALIZATION NOTE (showMoreInformation.label):
+     Displayed when hovering a blocked download, indicates that it's possible to
+     show more information for user to take the next action.
+     -->
+<!ENTITY showMoreInformation.label        "Show more information">
+
+<!-- LOCALIZATION NOTE (openFile.label):
+     Displayed when hovering a complete download, indicates that it's possible to
+     open the file using an app available in the system.
+     -->
+<!ENTITY openFile.label                   "Open File">
+
+<!-- LOCALIZATION NOTE (retryDownload.label):
+     Displayed when hovering a download which is able to be retried by users,
+     indicates that it's possible to download this file again.
+     -->
+<!ENTITY retryDownload.label              "Retry Download">
+
+<!-- LOCALIZATION NOTE (cancelDownload.label):
+     Displayed when hovering a download which is able to be cancelled by users,
+     indicates that it's possible to cancel and stop the download.
+     -->
+<!ENTITY cancelDownload.label             "Cancel Download">
+
 <!-- LOCALIZATION NOTE (blocked.label):
      Shown as a tag before the file name for some types of blocked downloads.
      Note: This string doesn't exist in the UI yet.  See bug 1053890.
      -->
 <!ENTITY blocked.label                    "BLOCKED">
 
 <!-- LOCALIZATION NOTE (learnMore.label):
      Shown as a text link for some types of blocked downloads, for example
--- a/browser/themes/shared/downloads/allDownloadsViewOverlay.inc.css
+++ b/browser/themes/shared/downloads/allDownloadsViewOverlay.inc.css
@@ -56,17 +56,20 @@
   opacity: 0.7;
   font-size: 95%;
   /* Use calc() to keep the height consistent with .downloadTarget, so that the
      progress bar can be vertically centered. */
   margin: 4px 0 calc(1em / 0.95 - 1em);
 }
 
 .downloadDetailsNormal,
-.downloadDetailsHover {
+.downloadDetailsHover,
+.downloadOpenFile,
+.downloadShowMoreInfo,
+.downloadButtonLabels {
   display: none;
 }
 
 .downloadButton {
   -moz-appearance: none;
   -moz-box-align: center;
   background: transparent;
   min-width: 0;
--- a/browser/themes/shared/downloads/downloads.inc.css
+++ b/browser/themes/shared/downloads/downloads.inc.css
@@ -227,19 +227,55 @@ richlistitem[type="download"]:last-child
 #downloadsSummaryDetails,
 .downloadDetails {
   opacity: var(--downloads-item-details-opacity);
   /* Use calc() to keep the height consistent with .downloadTarget, so that the
      progress bar can be vertically centered. */
   margin: 4px 0 calc(1em / var(--downloads-item-font-size-factor) - 1em);
 }
 
+/* The following rules control which message is shown under the name of the
+   download, using a set of elements that share the class ".downloadDetails".
+   At any given time, only one of these elements is displayed. We use a set of
+   rules to hide the elements that shouldn't be displayed in each case. */
+
+/* The full status message is only displayed in the Downloads View. */
+.downloadDetailsFull {
+  display: none;
+}
+
+/* When hovering the mouse pointer over the item, instead of the normal message
+   we display a more detailed one. */
 @item@:hover > .downloadMainArea > .downloadContainer > .downloadDetailsNormal,
-@item@:not(:hover) > .downloadMainArea > .downloadContainer > .downloadDetailsHover,
-.downloadDetailsFull {
+@item@:not(:hover) > .downloadMainArea > .downloadContainer > .downloadDetailsHover {
+  display: none;
+}
+
+/* When hovering the action button in particular, instead of the usual hover
+   message we display the command associated with the button. */
+@item@.downloadHoveringButton > .downloadMainArea > .downloadContainer > .downloadDetailsHover,
+@item@:not(.downloadHoveringButton) > .downloadMainArea > .downloadContainer > .downloadButtonLabels {
+  display: none;
+}
+
+/* When hovering the main area of a finished download whose target exists,
+   instead of the usual hover message we display the "Open File" command. */
+@itemFinished@[exists] > .downloadMainArea:hover > .downloadContainer > .downloadDetailsHover,
+@itemNotFinished@ > .downloadMainArea > .downloadContainer > .downloadOpenFile,
+@item@:not([exists]) > .downloadMainArea > .downloadContainer > .downloadOpenFile,
+.downloadMainArea:not(:hover) > .downloadContainer > .downloadOpenFile {
+  display: none;
+}
+
+/* When hovering items blocked by Application Reputation, instead of the other
+   hover messages we display the "Show more information" label. */
+@item@[verdict] > .downloadMainArea > .downloadContainer > .downloadDetailsHover,
+@item@[verdict] > .downloadMainArea > .downloadContainer > .downloadButtonLabels,
+@item@:not([verdict]) > .downloadMainArea > .downloadContainer > .downloadShowMoreInfo,
+@item@:not(:hover) > .downloadMainArea > .downloadContainer > .downloadShowMoreInfo {
   display: none;
 }
 
 @item@[verdict] > toolbarseparator {
   visibility: hidden;
 }
 
 .downloadButton {