Bug 1282662 - Part 2: Implement the detail description in hover button case.; r=Paolo

MozReview-Commit-ID: G3L0sULmRLD

--HG--
extra : rebase_source : adcc3455504ec506482d74f51032a6f123ebd2d2

browser/components/downloads/content/download.xml

@@ -55,6 +55,28 @@
           <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 />

browser/components/downloads/content/downloads.js

@@ -1037,6 +1037,16 @@ const DownloadsView = {
    * 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;
@@ -1044,6 +1054,9 @@ const DownloadsView = {
   },
 
   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

browser/locales/en-US/chrome/browser/downloads/downloads.dtd

@@ -89,6 +89,30 @@
      -->
 <!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.

browser/themes/shared/downloads/allDownloadsViewOverlay.inc.css

@@ -61,7 +61,10 @@
 }
 
 .downloadDetailsNormal,
-.downloadDetailsHover {
+.downloadDetailsHover,
+.downloadOpenFile,
+.downloadShowMoreInfo,
+.downloadButtonLabels {
   display: none;
 }
 

browser/themes/shared/downloads/downloads.inc.css

@@ -232,12 +232,48 @@ richlistitem[type="download"]:last-child {
   margin: 4px 0 calc(1em / var(--downloads-item-font-size-factor) - 1em);
 }
 
-@item@:hover > .downloadMainArea > .downloadContainer > .downloadDetailsNormal,
-@item@:not(:hover) > .downloadMainArea > .downloadContainer > .downloadDetailsHover,
+/* 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 {
+  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;
 }