Bug 1001324 - The Downloads Panel footer should use the same style as the application menu. r=adw, a=ritu
authorPaolo Amadini <paolo.mozmail@amadzone.org>
Fri, 05 Aug 2016 17:26:45 +0100
changeset 347755 2d7fe7b749885dce85a312448ab8f30d955d78e7
parent 347754 2065ffb539e10304f2e02007791f8ae045144da5
child 347756 dd4b4df3eb2ac6f1e5812db4d55dbbdbfd2d7827
push id6389
push userraliiev@mozilla.com
push dateMon, 19 Sep 2016 13:38:22 +0000
treeherdermozilla-beta@01d67bfe6c81 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersadw, ritu
bugs1001324
milestone50.0a2
Bug 1001324 - The Downloads Panel footer should use the same style as the application menu. r=adw, a=ritu MozReview-Commit-ID: JFM2gmpqyNL
browser/components/downloads/content/downloadsOverlay.xul
browser/themes/linux/downloads/downloads.css
browser/themes/osx/downloads/downloads.css
browser/themes/shared/downloads/downloads.inc.css
browser/themes/windows/downloads/downloads.css
--- a/browser/components/downloads/content/downloadsOverlay.xul
+++ b/browser/components/downloads/content/downloadsOverlay.xul
@@ -122,17 +122,18 @@
                        onmouseout="DownloadsView.onDownloadMouseOut(event);"
                        oncontextmenu="DownloadsView.onDownloadContextMenu(event);"
                        ondragstart="DownloadsView.onDownloadDragStart(event);"/>
           <description id="emptyDownloads"
                        mousethrough="always">
              &downloadsPanelEmpty.label;
           </description>
           <spacer flex="1"/>
-          <vbox id="downloadsFooter">
+          <vbox id="downloadsFooter"
+                class="downloadsPanelFooter">
             <hbox id="downloadsSummary"
                   align="center"
                   orient="horizontal"
                   onkeydown="DownloadsSummary.onKeyDown(event);"
                   onclick="DownloadsSummary.onClick(event);">
               <image class="downloadTypeIcon" />
               <vbox id="downloadsSummaryChildBox">
                 <description id="downloadsSummaryDescription"
@@ -143,38 +144,40 @@
                                max="100"
                                mode="normal" />
                 <description id="downloadsSummaryDetails"
                              style="width: &downloadDetails.width;"
                              crop="end"/>
               </vbox>
             </hbox>
             <button id="downloadsHistory"
-                    class="plain"
+                    class="plain downloadsPanelFooterButton"
                     label="&downloadsHistory.label;"
                     accesskey="&downloadsHistory.accesskey;"
                     oncommand="DownloadsPanel.showDownloadsHistory();"/>
           </vbox>
         </panelview>
 
         <panelview id="downloadsPanel-blockedSubview"
                    orient="vertical"
                    flex="1">
           <description id="downloadsPanel-blockedSubview-title"/>
           <description id="downloadsPanel-blockedSubview-details1"/>
           <description id="downloadsPanel-blockedSubview-details2"/>
           <spacer flex="1"/>
           <hbox id="downloadsPanel-blockedSubview-buttons"
+                class="downloadsPanelFooter"
                 align="stretch">
             <button id="downloadsPanel-blockedSubview-openButton"
-                    class="plain"
+                    class="plain downloadsPanelFooterButton"
                     command="downloadsCmd_chooseOpen"
                     flex="1"/>
+            <toolbarseparator/>
             <button id="downloadsPanel-blockedSubview-deleteButton"
-                    class="plain"
+                    class="plain downloadsPanelFooterButton"
                     oncommand="DownloadsBlockedSubview.confirmBlock();"
                     default="true"
                     flex="1"/>
           </hbox>
         </panelview>
 
       </panelmultiview>
 
--- a/browser/themes/linux/downloads/downloads.css
+++ b/browser/themes/linux/downloads/downloads.css
@@ -1,33 +1,19 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 %include ../../shared/downloads/downloads.inc.css
 
 /*** Panel and outer controls ***/
 
-#downloadsFooter,
-#downloadsPanel-blockedSubview-buttons {
-  border-top: 1px solid ThreeDShadow;
-  background-image: linear-gradient(hsla(0,0%,0%,.15), hsla(0,0%,0%,.08) 6px);
-}
-
-#downloadsHistory,
-#downloadsPanel-blockedSubview-openButton {
-  color: -moz-nativehyperlinktext;
-}
-
 @keyfocus@ #downloadsSummary:focus,
-@keyfocus@ #downloadsHistory:focus > .button-box {
+@keyfocus@ .downloadsPanelFooterButton:focus {
   outline: 1px -moz-dialogtext dotted;
-}
-
-@keyfocus@ #downloadsSummary:focus {
   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);
--- a/browser/themes/osx/downloads/downloads.css
+++ b/browser/themes/osx/downloads/downloads.css
@@ -5,55 +5,22 @@
 %include ../../shared/downloads/downloads.inc.css
 
 /*** Panel and outer controls ***/
 
 #downloadsPanel {
   margin-top: -1px;
 }
 
-#downloadsFooter,
-#downloadsPanel-blockedSubview-buttons {
-  background: #e5e5e5;
-  border-top: 1px solid hsla(0,0%,0%,.1);
-  box-shadow: 0 -1px hsla(0,0%,100%,.5) inset, 0 1px 1px hsla(0,0%,0%,.03) inset;
-}
-
-#downloadsFooter,
-#downloadsPanel-multiView .panel-subviews {
-  border-bottom-left-radius: 4px;
-  border-bottom-right-radius: 4px;
-}
-
-#downloadsHistory,
-#downloadsPanel-blockedSubview-buttons > button {
-  color: #808080;
-}
-
 @keyfocus@ #downloadsSummary:focus,
-@keyfocus@ #downloadsHistory:focus,
-@keyfocus@ #downloadsPanel-blockedSubview-buttons > button:focus {
+@keyfocus@ .downloadsPanelFooterButton:focus {
   outline: 2px -moz-mac-focusring solid;
   outline-offset: -2px;
 }
 
-@keyfocus@ #downloadsSummary:focus,
-@keyfocus@ #downloadsHistory:focus {
-  -moz-outline-radius-bottomleft: 4px;
-  -moz-outline-radius-bottomright: 4px;
-}
-
-@keyfocus@ #downloadsPanel-blockedSubview-deleteButton:-moz-locale-dir(ltr):focus {
-  -moz-outline-radius-bottomright: 4px;
-}
-
-@keyfocus@ #downloadsPanel-blockedSubview-deleteButton:-moz-locale-dir(rtl):focus {
-  -moz-outline-radius-bottomleft: 4px;
-}
-
 /*** 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;
--- a/browser/themes/shared/downloads/downloads.inc.css
+++ b/browser/themes/shared/downloads/downloads.inc.css
@@ -8,16 +8,21 @@
 %define notKeyfocus #downloadsPanel:not([keyfocus])
 %define item richlistitem[type="download"]
 %define itemFinished @item@[state="1"]
 %define itemNotFinished @item@:not([state="1"])
 %define itemFocused #downloadsListBox:focus > @item@[selected]
 
 /*** Panel and outer controls ***/
 
+#downloadsPanel > .panel-arrowcontainer > .panel-arrowcontent {
+  overflow: hidden;
+  display: block;
+}
+
 #downloadsPanel > .panel-arrowcontainer > .panel-arrowcontent,
 #downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack > .panel-subviews {
   padding: 0;
 }
 
 #downloadsListBox {
   background: transparent;
   padding: 4px;
@@ -26,16 +31,62 @@
 
 #emptyDownloads {
   padding: 10px 20px;
   /* The panel can be wider than this description after the blocked subview is
      shown, so center the text. */
   text-align: center;
 }
 
+.downloadsPanelFooter {
+  background-color: hsla(210,4%,10%,.07);
+  border-top: 1px solid hsla(210,4%,10%,.14);
+}
+
+.downloadsPanelFooter > toolbarseparator {
+  margin: 0;
+  border: 0;
+  min-width: 0;
+  border-left: 1px solid hsla(210,4%,10%,.14);
+  -moz-appearance: none !important;
+}
+
+.downloadsPanelFooterButton {
+  -moz-appearance: none;
+  background-color: transparent;
+  color: black;
+  margin: 0;
+  padding: 0;
+  min-height: 40px;
+}
+
+.downloadsPanelFooterButton:hover {
+  outline: 1px solid hsla(210,4%,10%,.07);
+  background-color: hsla(210,4%,10%,.07);
+}
+
+.downloadsPanelFooterButton:hover:active {
+  outline: 1px solid hsla(210,4%,10%,.12);
+  background-color: hsla(210,4%,10%,.12);
+  box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
+}
+
+.downloadsPanelFooterButton[default] {
+  background-color: #0996f8;
+  color: white;
+}
+
+.downloadsPanelFooterButton[default]:hover {
+  background-color: #0675d3;
+}
+
+.downloadsPanelFooterButton[default]:hover:active {
+  background-color: #0568ba;
+}
+
 #downloadsSummary {
   --summary-padding-end: 38px;
   --summary-padding-start: 12px;
   padding: 8px var(--summary-padding-end) 8px var(--summary-padding-start);
   cursor: pointer;
   -moz-user-focus: normal;
 }
 
@@ -60,25 +111,16 @@
   }
 }
 %endif
 
 #downloadsSummaryDescription {
   color: -moz-nativehyperlinktext;
 }
 
-#downloadsHistory {
-  background: transparent;
-  cursor: pointer;
-}
-
-#downloadsHistory > .button-box {
-  margin: 1em;
-}
-
 /*** List items and similar elements in the summary ***/
 
 #downloadsSummary,
 richlistitem[type="download"] {
   height: var(--downloads-item-height);
   padding-inline-end: 0;
   color: inherit;
 }
@@ -226,25 +268,8 @@ richlistitem[type="download"]:last-child
 }
 
 #downloadsPanel-blockedSubview-title,
 #downloadsPanel-blockedSubview-details1,
 #downloadsPanel-blockedSubview-details2 {
   -moz-margin-start: 64px;
   -moz-margin-end: 16px;
 }
-
-#downloadsPanel-blockedSubview-buttons {
-  height: 41px;
-  cursor: pointer;
-}
-
-#downloadsPanel-blockedSubview-buttons > button {
-  -moz-appearance: none;
-  padding: 0;
-  margin: 0;
-  background-color: transparent;
-}
-
-#downloadsPanel-blockedSubview-buttons > button[default] {
-  background-color: Highlight;
-  color: HighlightText;
-}
--- a/browser/themes/windows/downloads/downloads.css
+++ b/browser/themes/windows/downloads/downloads.css
@@ -1,86 +1,66 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 %include ../../shared/downloads/downloads.inc.css
 
 /*** Panel and outer controls ***/
 
-#downloadsFooter,
-#downloadsPanel-blockedSubview-openButton {
+#downloadsSummary {
   background-color: hsla(210,4%,10%,.04);
   box-shadow: 0 1px 0 hsla(210,4%,10%,.08) inset;
   transition-duration: 150ms;
   transition-property: background-color;
 }
 
-#downloadsFooter:hover,
-#downloadsPanel-blockedSubview-openButton:hover {
+#downloadsSummary:hover {
   background-color: hsla(210,4%,10%,.05);
 }
 
-#downloadsFooter:hover:active,
-#downloadsPanel-blockedSubview-openButton:hover:active {
+#downloadsSummary:hover:active {
   background-color: hsla(210,4%,10%,.1);
   box-shadow: 0 2px 0 0 hsla(210,4%,10%,.1) inset;
 }
 
 @media (-moz-os-version: windows-xp),
        (-moz-os-version: windows-vista),
        (-moz-os-version: windows-win7) {
-  #downloadsHistory,
-  #downloadsPanel-blockedSubview-buttons > button {
-    color: -moz-nativehyperlinktext;
-  }
-
   @media (-moz-windows-default-theme) {
-    #downloadsFooter,
-    #downloadsPanel-multiView .panel-subviews {
-      border-bottom-left-radius: 3px;
-      border-bottom-right-radius: 3px;
-      transition-duration: 0s;
-    }
-
-    #downloadsFooter,
-    #downloadsFooter:hover,
-    #downloadsFooter:hover:active,
-    #downloadsPanel-blockedSubview-openButton,
-    #downloadsPanel-blockedSubview-openButton:hover,
-    #downloadsPanel-blockedSubview-openButton:hover:active {
+    #downloadsSummary,
+    #downloadsSummary:hover,
+    #downloadsSummary:hover:active {
       background-color: #f1f5fb;
       box-shadow: 0px 1px 2px rgb(204,214,234) inset;
+      transition-duration: 0s;
+      cursor: pointer;
     }
 
     @media (-moz-os-version: windows-xp) {
-      #downloadsFooter,
-      #downloadsFooter:hover,
-      #downloadsFooter:hover:active,
-      #downloadsPanel-blockedSubview-openButton,
-      #downloadsPanel-blockedSubview-openButton:hover,
-      #downloadsPanel-blockedSubview-openButton:hover:active {
+      #downloadsSummary,
+      #downloadsSummary:hover,
+      #downloadsSummary:hover:active {
         background-color: hsla(216,45%,88%,.98);
       }
     }
   }
 }
 
 @keyfocus@ #downloadsSummary:focus,
-@keyfocus@ #downloadsHistory:focus {
+@keyfocus@ .downloadsPanelFooterButton:focus {
   outline: 1px -moz-dialogtext dotted;
   outline-offset: -1px;
 }
 
 @keyfocus@ #downloadsSummary:focus {
   outline-offset: -5px;
 }
 
-#downloadsHistory > .button-box,
-#downloadsPanel-blockedSubview-buttons > button > .button-box {
+.downloadsPanelFooterButton > .button-box {
   /* Hide the border so we don't display an inner focus ring. */
   border: none;
 }
 
 /*** List items and similar elements in the summary ***/
 
 :root {
   --downloads-item-height: 7em;