Bug 950058 - Split each download item so that all of the right part of it activates the action. draft
authorRex Lee <rexboy@mozilla.com>
Mon, 26 Sep 2016 18:39:01 +0800
changeset 423561 d32a5b522f2ec52d596d4529eba990dbf9c7523a
parent 420379 c8a660c5f105e60ad536ddde0c3edd637ab5b7c1
child 533487 f6b3482a62b1ac36983e9f6d6a373adf1bc913f4
push id31944
push userbmo:rexboy@mozilla.com
push dateTue, 11 Oct 2016 12:25:22 +0000
bugs950058
milestone52.0a1
Bug 950058 - Split each download item so that all of the right part of it activates the action. MozReview-Commit-ID: BdRkcrfCMnd
browser/components/downloads/content/download.xml
browser/components/downloads/content/downloads.css
browser/themes/linux/downloads/downloads.css
browser/themes/osx/downloads/downloads.css
browser/themes/shared/downloads/allDownloadsViewOverlay.inc.css
browser/themes/shared/downloads/downloads.inc.css
browser/themes/windows/downloads/downloads.css
--- a/browser/components/downloads/content/download.xml
+++ b/browser/components/downloads/content/download.xml
@@ -11,49 +11,53 @@
 <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"
            extends="chrome://global/content/bindings/richlistbox.xml#richlistitem">
     <content orient="horizontal"
-             align="center"
              onclick="DownloadsView.onDownloadClick(event);">
-      <xul:stack>
-        <xul:image class="downloadTypeIcon"
-                   validate="always"
-                   xbl:inherits="src=image"/>
-        <xul:image class="downloadBlockedBadge" />
-      </xul:stack>
-      <xul:vbox pack="center"
+      <xul:hbox class="downloadMainArea"
                 flex="1"
-                class="downloadContainer"
-                style="width: &downloadDetails.width;">
-        <!-- We're letting localizers put a min-width in here primarily
-             because of the downloads summary at the bottom of the list of
-             download items. An element in the summary has the same min-width
-             on a description, and we don't want the panel to change size if the
-             summary isn't being displayed, so we ensure that items share the
-             same minimum width.
-             -->
-        <xul:description class="downloadTarget"
-                         crop="center"
-                         style="min-width: &downloadsSummary.minWidth2;"
-                         xbl:inherits="value=displayName,tooltiptext=displayName"/>
-        <xul:progressmeter anonid="progressmeter"
-                           class="downloadProgress"
-                           min="0"
-                           max="100"
-                           xbl:inherits="mode=progressmode,value=progress"/>
-        <xul:description class="downloadDetails"
-                         crop="end"
-                         xbl:inherits="value=status,tooltiptext=statusTip"/>
-      </xul:vbox>
-      <xul:stack>
+                align="center">
+        <xul:stack>
+          <xul:image class="downloadTypeIcon"
+                     validate="always"
+                     xbl:inherits="src=image"/>
+          <xul:image class="downloadBlockedBadge" />
+        </xul:stack>
+        <xul:vbox pack="center"
+                  flex="1"
+                  class="downloadContainer"
+                  style="width: &downloadDetails.width;">
+          <!-- We're letting localizers put a min-width in here primarily
+               because of the downloads summary at the bottom of the list of
+               download items. An element in the summary has the same min-width
+               on a description, and we don't want the panel to change size if the
+               summary isn't being displayed, so we ensure that items share the
+               same minimum width.
+               -->
+          <xul:description class="downloadTarget"
+                           crop="center"
+                           style="min-width: &downloadsSummary.minWidth2;"
+                           xbl:inherits="value=displayName,tooltiptext=displayName"/>
+          <xul:progressmeter anonid="progressmeter"
+                             class="downloadProgress"
+                             min="0"
+                             max="100"
+                             xbl:inherits="mode=progressmode,value=progress"/>
+          <xul:description class="downloadDetails"
+                           crop="end"
+                           xbl:inherits="value=status,tooltiptext=statusTip"/>
+        </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"
                     tooltiptext="&cmd.retry.label;"
                     oncommand="DownloadsView.onDownloadCommand(event, 'downloadsCmd_retry');"/>
         <xul:button class="downloadButton downloadShow downloadIconShow"
 #ifdef XP_MACOSX
--- a/browser/components/downloads/content/downloads.css
+++ b/browser/components/downloads/content/downloads.css
@@ -109,18 +109,22 @@ richlistitem.download button {
 
 .download-state:not(:-moz-any([state="-1"],/* Starting (initial) */
                               [state="0"], /* Downloading        */
                               [state="1"], /* Finished           */
                               [state="4"], /* Paused             */
                               [state="5"]) /* Starting (queued)  */)
                                            .downloadShowMenuItem,
 
-.download-state[state="7"]                 .downloadCommandsSeparator
+.download-state[state="7"]                 .downloadCommandsSeparator,
 
+.download-state:-moz-any(    [state="6"], /* Blocked (parental) */
+                             [state="7"], /* Scanning           */
+                             [state="9"]) /* Blocked (policy)   */
+                                          toolbarseparator
 {
   display: none;
 }
 
 /*** Visibility of download buttons ***/
 
 .download-state:not(:-moz-any([state="-1"],/* Starting (initial) */
                               [state="5"], /* Starting (queued)  */
--- a/browser/themes/linux/downloads/downloads.css
+++ b/browser/themes/linux/downloads/downloads.css
@@ -11,18 +11,16 @@
   outline: 1px -moz-dialogtext dotted;
   outline-offset: -5px;
 }
 
 /*** List items and similar elements in the summary ***/
 
 :root {
   --downloads-item-height: 6em;
-  --downloads-item-border-top-color: hsla(0,0%,100%,.2);
-  --downloads-item-border-bottom-color: hsla(0,0%,0%,.15);
   --downloads-item-font-size-factor: 0.9;
   --downloads-item-target-margin-bottom: 7px;
   --downloads-item-details-margin-top: 1px;
   --downloads-item-details-opacity: 0.6;
 }
 
 .downloadButton:focus > .button-box {
   outline: 1px -moz-dialogtext dotted;
@@ -30,33 +28,23 @@
 
 /*** Highlighted list items ***/
 
 @keyfocus@ @itemFocused@ {
   outline: 1px -moz-dialogtext dotted;
   outline-offset: -1px;
 }
 
-@notKeyfocus@ @itemFinished@[exists]:hover,
 @item@[showingsubview] {
-  border-radius: 3px;
-  border-top: 1px solid hsla(0,0%,100%,.3);
-  border-bottom: 1px solid hsla(0,0%,0%,.2);
   background-color: Highlight;
   background-image: linear-gradient(hsla(0,0%,100%,.1), transparent);
   color: HighlightText;
   cursor: pointer;
 }
 
-@notKeyfocus@ @itemFinished@[exists][verdict="Malware"]:hover,
-@item@[showingsubview][verdict="Malware"] {
-  background-color: hsl(4, 82%, 47%);
-  color: white;
-}
-
 /*** Button icons ***/
 
 .downloadButton.downloadIconCancel {
   -moz-image-region: rect(0px, 16px, 16px, 0px);
 }
 @item@:hover .downloadButton.downloadIconCancel {
   -moz-image-region: rect(0px, 32px, 16px, 16px);
 }
--- a/browser/themes/osx/downloads/downloads.css
+++ b/browser/themes/osx/downloads/downloads.css
@@ -15,53 +15,44 @@
   outline: 2px -moz-mac-focusring solid;
   outline-offset: -2px;
 }
 
 /*** List items and similar elements in the summary ***/
 
 :root {
   --downloads-item-height: 7em;
-  --downloads-item-border-top-color: hsla(0,0%,100%,.07);
-  --downloads-item-border-bottom-color: hsla(0,0%,0%,.2);
   --downloads-item-font-size-factor: 0.95;
   --downloads-item-target-margin-bottom: 6px;
   --downloads-item-details-margin-top: 0;
   --downloads-item-details-opacity: 0.7;
 }
 
 .downloadButton:focus > .button-box {
   outline: 2px -moz-mac-focusring solid;
   outline-offset: -2px;
 }
 
 /*** Highlighted list items ***/
 
-@keyfocus@ @itemFocused@,
-@notKeyfocus@ @itemFinished@[exists]:hover,
 @item@[showingsubview] {
-  border-radius: 3px;
-  border-top: 1px solid hsla(0,0%,100%,.2);
-  border-bottom: 1px solid hsla(0,0%,0%,.4);
   background-color: Highlight;
   color: HighlightText;
 }
 
+@keyfocus@ @itemFocused@ {
+  outline: 2px -moz-mac-focusring solid;
+  outline-offset: -2px;
+}
+
 @item@[showingsubview] {
   transition: background-color var(--panelui-subview-transition-duration),
               color var(--panelui-subview-transition-duration);
 }
 
-@keyfocus@ @itemFocused@[verdict="Malware"],
-@notKeyfocus@ @itemFinished@[exists][verdict="Malware"]:hover,
-@item@[showingsubview][verdict="Malware"] {
-  background-color: hsl(4, 82%, 47%);
-  color: white;
-}
-
 @notKeyfocus@ @itemFinished@[exists]:hover {
   cursor: pointer;
 }
 
 /*** Button icons ***/
 
 .downloadButton.downloadIconCancel {
   -moz-image-region: rect(0px, 16px, 16px, 0px);
--- a/browser/themes/shared/downloads/allDownloadsViewOverlay.inc.css
+++ b/browser/themes/shared/downloads/allDownloadsViewOverlay.inc.css
@@ -60,29 +60,34 @@
 @item@[verdict="PotentiallyUnwanted"] .downloadBlockedBadge {
   background-image: url("chrome://browser/skin/warning.svg");
 }
 
 @item@[verdict="Uncommon"] .downloadBlockedBadge {
   background-image: url("chrome://browser/skin/info.svg");
 }
 
+@item@ > toolbarseparator {
+  display: none;
+}
+
 .downloadTarget {
   margin-bottom: 3px;
   cursor: inherit;
 }
 
 .downloadDetails {
   opacity: 0.7;
   font-size: 95%;
   cursor: inherit;
 }
 
 .downloadButton {
   -moz-appearance: none;
+  -moz-box-align: center;
   background: transparent;
   min-width: 0;
   min-height: 0;
   margin: 3px;
   border: none;
   padding: 5px;
   list-style-image: url("chrome://browser/skin/downloads/buttons.png");
 }
--- a/browser/themes/shared/downloads/downloads.inc.css
+++ b/browser/themes/shared/downloads/downloads.inc.css
@@ -20,17 +20,17 @@
 
 #downloadsPanel > .panel-arrowcontainer > .panel-arrowcontent,
 #downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack > .panel-subviews {
   padding: 0;
 }
 
 #downloadsListBox {
   background: transparent;
-  padding: 4px;
+  padding: 0;
   color: inherit;
   -moz-appearance: none;
   margin: 0;
   border: none;
 }
 
 #emptyDownloads {
   padding: 16px 25px;
@@ -40,17 +40,18 @@
   text-align: center;
 }
 
 .downloadsPanelFooter {
   background-color: var(--arrowpanel-dimmed);
   border-top: 1px solid var(--panel-separator-color);
 }
 
-.downloadsPanelFooter toolbarseparator {
+.downloadsPanelFooter toolbarseparator,
+@item@ > toolbarseparator {
   margin: 0;
   border: 0;
   min-width: 0;
   border-left: 1px solid var(--panel-separator-color);
   -moz-appearance: none;
 }
 
 .downloadsPanelFooterButton {
@@ -103,16 +104,21 @@
 #downloadsPanel[hasdownloads] #downloadsFooterButtons:not(.downloadsHideDropmarker) > #downloadsHistory {
   padding-inline-start: 68px;
 }
 
 toolbarseparator.downloadsDropmarkerSplitter {
   margin: 7px 0;
 }
 
+@item@ > toolbarseparator {
+  margin: 10px 0;
+}
+
+@item@:hover > toolbarseparator,
 #downloadsFooter:hover toolbarseparator.downloadsDropmarkerSplitter,
 #downloadsFooter[showingdropdown] toolbarseparator {
   margin: 0;
 }
 
 .downloadsDropmarker {
   padding: 0 21px;
 }
@@ -163,28 +169,28 @@ toolbarseparator.downloadsDropmarkerSpli
 richlistitem[type="download"] {
   height: var(--downloads-item-height);
   padding-inline-end: 0;
   color: inherit;
 }
 
 richlistitem[type="download"] {
   margin: 0;
-  border-top: 1px solid var(--downloads-item-border-top-color);
-  border-bottom: 1px solid var(--downloads-item-border-bottom-color);
+  border-bottom: 1px solid var(--panel-separator-color);
   background: transparent;
-  padding: 8px;
-}
-
-richlistitem[type="download"]:first-child {
-  border-top: 1px solid transparent;
+  padding: 0;
 }
 
 richlistitem[type="download"]:last-child {
-  border-bottom: 1px solid transparent;
+  border-bottom: none;
+}
+
+richlistitem[type="download"] > .downloadMainArea {
+  padding-inline-end: 0;
+  padding: 8px;
 }
 
 .downloadTypeIcon {
   margin-top: 8px;
   margin-inline-end: 12px;
   margin-bottom: 8px;
   margin-inline-start: 0;
   width: 32px;
@@ -203,16 +209,20 @@ richlistitem[type="download"]:last-child
 @item@[verdict="PotentiallyUnwanted"] .downloadBlockedBadge {
   background-image: url("chrome://browser/skin/warning.svg");
 }
 
 @item@[verdict="Uncommon"] .downloadBlockedBadge {
   background-image: url("chrome://browser/skin/info.svg");
 }
 
+@item@[verdict="Malware"] {
+  color: #aa1b08;
+}
+
 /* We hold .downloadTarget, .downloadProgress and .downloadDetails inside of
    a vbox with class .downloadContainer. We set the font-size of the entire
    container to --downloads-item-font-size-factor because:
 
    1) This is the size that we want .downloadDetails to be
    2) The container's width is set by localizers by &downloadDetails.width;,
       which is a ch unit. Since this is the value that should control the
       panel width, we apply it to the outer container to constrain
@@ -239,31 +249,59 @@ richlistitem[type="download"]:last-child
 
 #downloadsSummaryDetails,
 .downloadDetails {
   margin-top: var(--downloads-item-details-margin-top);
   opacity: var(--downloads-item-details-opacity);
   cursor: inherit;
 }
 
+@item@[state="8"] > toolbarseparator {
+  visibility: hidden;
+}
+
 .downloadButton {
   -moz-appearance: none;
-  min-width: 0;
-  min-height: 0;
-  margin: 3px;
+  min-width: 58px;
+  height: var(--downloads-item-height);
+  margin: 0;
   border: none;
   background: transparent;
-  padding: 5px;
+  padding: 8px;
   list-style-image: url("chrome://browser/skin/downloads/buttons.png");
 }
 
-.downloadButton > .button-box {
-  padding: 0;
+@itemFinished@[exists]:hover .downloadMainArea,
+@item@:hover .downloadButton,
+@item@[verdict]:hover {
+  background-color: var(--arrowpanel-dimmed);
+}
+
+@item@ .downloadButton:hover,
+@itemFinished@[exists] .downloadMainArea:hover {
+  background-color: var(--arrowpanel-dimmed-further);
 }
 
+@item@ .downloadButton:hover:active,
+@itemFinished@[exists] .downloadMainArea:hover:active {
+  background-color: var(--arrowpanel-dimmed-even-further);
+}
+
+@item@[verdict] .downloadButton,
+@item@[verdict] .downloadButton:hover,
+@item@[verdict] .downloadButton:hover:active {
+  background-color: transparent;
+}
+
+@notKeyfocus@ @item@[verdict="Malware"]:hover,
+@notKeyfocus@ @item@[verdict="Malware"]:hover:active,
+@item@[showingsubview][verdict="Malware"] {
+  background-color: #aa1b08;
+  color: white;
+}
 
 /*** Blocked subview ***/
 
 #downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype=main] > .panel-subviews {
   /* When the main view is showing, the shadow on the left edge of the subview is
      barely visible on the right edge of the main view, so set it to none. */
   box-shadow: none;
 }
--- a/browser/themes/windows/downloads/downloads.css
+++ b/browser/themes/windows/downloads/downloads.css
@@ -54,104 +54,44 @@
 @keyfocus@ #downloadsSummary:focus {
   outline-offset: -5px;
 }
 
 /*** List items and similar elements in the summary ***/
 
 :root {
   --downloads-item-height: 7em;
-  --downloads-item-border-top-color: hsla(0,0%,100%,.3);
-  --downloads-item-border-bottom-color: hsla(220,18%,51%,.25);
   --downloads-item-font-size-factor: 0.9;
   --downloads-item-target-margin-bottom: 6px;
   --downloads-item-details-margin-top: 0;
   --downloads-item-details-opacity: 0.6;
 }
 
-@media (-moz-windows-default-theme) and (-moz-os-version: windows-vista),
-       (-moz-windows-default-theme) and (-moz-os-version: windows-win7) {
-  richlistitem[type="download"] {
-    border: 1px solid transparent;
-    border-bottom: 1px solid hsl(213,40%,90%);
-  }
-}
-
 .downloadButton > .button-box {
   border: 1px solid transparent;
 }
 
 @keyfocus@ .downloadButton:focus > .button-box {
   border: 1px dotted ThreeDDarkShadow;
 }
 
 /*** Highlighted list items ***/
 
 @keyfocus@ @itemFocused@ {
   outline: 1px -moz-dialogtext dotted;
   outline-offset: -1px;
 }
 
-@notKeyfocus@ @itemFinished@[exists]:hover {
-  background-color: hsla(210,4%,10%,.08);
-  outline: 1px solid hsla(210,4%,10%,.1);
-  outline-offset: -1px;
-  cursor: pointer;
-}
-
-@notKeyfocus@ @itemFinished@[exists]:hover:active {
-  background-color: hsla(210,4%,10%,.15);
-  outline: 1px solid hsla(210,4%,10%,.15);
-  box-shadow: 0 1px 0 0 hsla(210,4%,10%,.05) inset;
-}
-
 @item@[showingsubview] {
   background-color: Highlight;
   color: HighlightText;
   transition: background-color var(--panelui-subview-transition-duration),
               color var(--panelui-subview-transition-duration);
 }
 
-@notKeyfocus@ @itemFinished@[exists][verdict="Malware"]:hover,
-@notKeyfocus@ @itemFinished@[exists][verdict="Malware"]:hover:active,
-@item@[showingsubview][verdict="Malware"] {
-  background-color: hsl(4, 82%, 47%);
-  color: white;
-}
-
-@media (-moz-os-version: windows-xp),
-       (-moz-os-version: windows-vista),
-       (-moz-os-version: windows-win7) {
-  @notKeyfocus@ @itemFinished@[exists]:hover {
-    border-radius: 3px;
-    outline: 0;
-    border-top: 1px solid hsla(0,0%,100%,.2);
-    border-bottom: 1px solid hsla(0,0%,0%,.2);
-    background-color: Highlight;
-    color: HighlightText;
-  }
-
-  @notKeyfocus@ @itemFinished@[exists]:hover:active {
-    background-color: Highlight;
-    outline: 0;
-    box-shadow: none;
-  }
-}
-
-@media (-moz-windows-default-theme) and (-moz-os-version: windows-vista),
-       (-moz-windows-default-theme) and (-moz-os-version: windows-win7) {
-  @notKeyfocus@ @itemFinished@[exists]:hover {
-    border: 1px solid hsl(213,45%,65%);
-    box-shadow: 0 0 0 1px hsla(0,0%,100%,.5) inset,
-                0 1px 0 hsla(0,0%,100%,.3) inset;
-    background-image: linear-gradient(hsl(212,86%,92%), hsl(212,91%,86%));
-    color: black;
-  }
-}
-
 /*** Button icons ***/
 
 .downloadButton.downloadIconCancel {
   -moz-image-region: rect(0px, 16px, 16px, 0px);
 }
 @item@:hover .downloadButton.downloadIconCancel {
   -moz-image-region: rect(0px, 32px, 16px, 16px);
 }