Bug 950058 - Split each download item so that all of the right part of it activates the action. r=paolo
authorRex Lee <rexboy@mozilla.com>
Thu, 13 Oct 2016 11:23:16 +0100
changeset 317861 2c20fcfa07f7c66c075ada0e9554749c1f3dfd3e
parent 317860 4e4969c65834d0a4ec5f3b9c01fc01b6f2d6dc8e
child 317862 49b4e3cb8e7ef37490ab29e3d5446fb932032142
push id33170
push usercbook@mozilla.com
push dateFri, 14 Oct 2016 10:37:07 +0000
treeherderautoland@0d101ebfd95c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspaolo
bugs950058
milestone52.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 950058 - Split each download item so that all of the right part of it activates the action. r=paolo MozReview-Commit-ID: KXSBrWjOzYQ
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
@@ -13,17 +13,18 @@ richlistitem[type="download"]:not([selec
   -moz-user-focus: none;
 }
 
 .downloadsHideDropmarker > #downloadsFooterButtonsSplitter,
 .downloadsHideDropmarker > #downloadsFooterDropmarker {
   display: none;
 }
 
-richlistitem[type="download"].download-state[state="1"]:not([exists]) .downloadShow {
+richlistitem[type="download"].download-state[state="1"]:not([exists]) > .downloadButtonArea,
+richlistitem[type="download"].download-state[state="1"]:not([exists]) > toolbarseparator {
   display: none;
 }
 
 #downloadsSummary:not([inprogress]) > vbox > #downloadsSummaryProgress,
 #downloadsSummary:not([inprogress]) > vbox > #downloadsSummaryDetails,
 #downloadsFooter:not([showingsummary]) #downloadsSummary {
   display: none;
 }
@@ -157,16 +158,21 @@ richlistitem.download button {
 
 .download-state:not(:-moz-any([state="2"], /* Failed             */
                               [state="3"]) /* Canceled           */)
                                            .downloadRetry,
 
 .download-state:not(          [state="1"]  /* Finished           */)
                                            .downloadShow,
 
+.download-state:-moz-any(     [state="6"], /* Blocked (parental) */
+                              [state="7"], /* Scanning           */
+                              [state="9"]) /* Blocked (policy)   */
+                                           > toolbarseparator,
+
 /* The "show blocked info" button is shown only in the downloads panel. */
 .downloadShowBlockedInfo
 {
   display: none;
 }
 
 /*** Downloads panel ***/
 
@@ -212,17 +218,17 @@ richlistitem.download button {
   transform: translateX(-101%);
 }
 
 /** When the subview is showing... **/
 
 /* Hide the buttons of all downloads except the one that triggered the
    subview. */
 #downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="subview"] .download-state:not([showingsubview]) .downloadButton {
-  display: none;
+  visibility: hidden;
 }
 #downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="subview"] .download-state[showingsubview] .downloadButton {
   display: inline;
 }
 
 /* For the download that triggered the subview, move its button farther to the
    right by removing padding so that a minimum amount of the main view's right
    edge needs to be shown. */
--- 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,16 @@
 
 /*** 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,51 +15,36 @@
   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;
 }
 
+@item@[verdict="Malware"] {
+  color: #aa1b08;
+}
+
 /*** 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;
-}
-
-@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;
+@keyfocus@ @itemFocused@ {
+  outline: 2px -moz-mac-focusring solid;
+  outline-offset: -2px;
 }
 
 @notKeyfocus@ @itemFinished@[exists]:hover {
   cursor: pointer;
 }
 
 /*** Button icons ***/
 
--- 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,27 @@ 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: 8px;
 }
 
 .downloadTypeIcon {
   margin-top: 8px;
   margin-inline-end: 12px;
   margin-bottom: 8px;
   margin-inline-start: 0;
   width: 32px;
@@ -239,31 +244,60 @@ richlistitem[type="download"]:last-child
 
 #downloadsSummaryDetails,
 .downloadDetails {
   margin-top: var(--downloads-item-details-margin-top);
   opacity: var(--downloads-item-details-opacity);
   cursor: inherit;
 }
 
+@item@[verdict] > toolbarseparator {
+  visibility: hidden;
+}
+
 .downloadButton {
   -moz-appearance: none;
-  min-width: 0;
-  min-height: 0;
-  margin: 3px;
+  min-width: 58px;
+  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@:not([verdict]):hover > .downloadButtonArea {
+  background-color: var(--arrowpanel-dimmed);
+}
+
+@itemFinished@[exists] .downloadMainArea:hover,
+@item@:not([verdict]) > .downloadButtonArea:hover,
+@item@[verdict]:hover {
+  background-color: var(--arrowpanel-dimmed-further);
 }
 
+@itemFinished@[exists] > .downloadMainArea:hover:active,
+@item@:not([verdict]) > .downloadButtonArea:hover:active,
+@item@[verdict]:hover:active {
+  background-color: var(--arrowpanel-dimmed-even-further);
+}
+
+@item@[showingsubview] {
+  background-color: Highlight;
+  color: HighlightText;
+  transition: background-color var(--panelui-subview-transition-duration),
+              color var(--panelui-subview-transition-duration);
+}
+
+@item@[verdict="Malware"]:hover,
+@item@[verdict="Malware"]:hover:active,
+@item@[verdict="Malware"][showingsubview] {
+  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,43 @@
 @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;
 }
 
+@media (-moz-windows-default-theme) {
+  @item@[verdict="Malware"] {
+    color: #aa1b08;
+  }
+}
+
 /*** 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);
 }