Bug 1001324 - The Downloads Panel footer should use the same style as the application menu. r=adw
authorPaolo Amadini <paolo.mozmail@amadzone.org>
Fri, 05 Aug 2016 17:26:45 +0100
changeset 308494 204a7ba2fba4bd74e715065492262cc6ffa8f8cf
parent 308493 6140083fa3c90e1bce6646785584e177e9cf665d
child 308495 6a5f939e29dec24277cc20696887e7c2eb1e2358
push id80347
push userkwierso@gmail.com
push dateSun, 07 Aug 2016 07:17:22 +0000
treeherdermozilla-inbound@d42aacfe34af [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersadw
bugs1001324
milestone51.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 1001324 - The Downloads Panel footer should use the same style as the application menu. r=adw 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;