some more changes to make the new downloads button and view in Firefox 20+ work correctly

diff --git a/LCARStrek/browser/downloads/allDownloadsViewOverlay.css b/LCARStrek/browser/downloads/allDownloadsViewOverlay.css
new file mode 100644 (file)
index 0000000..94c370b
--- /dev/null
+++ b/LCARStrek/browser/downloads/allDownloadsViewOverlay.css
@@ -0,0 +1,110 @@
+/* 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/. */
+
+#downloadsRichListBox {
+  /** The default listbox appearance comes with an unwanted margin. **/
+  -moz-appearance: none;
+  margin: 0;
+  border: none;
+}
+
+#downloadsRichListBox > richlistitem.download {
+  height: 6em;
+  padding: 5px 8px;
+}
+
+.downloadTypeIcon {
+  -moz-margin-end: 8px;
+  -moz-margin-start: 8px;
+  /* Prevent flickering when changing states. */
+  min-height: 32px;
+  min-width: 32px;
+}
+
+.blockedIcon {
+  list-style-image: url("chrome://global/skin/icons/alert-error.gif");
+}
+
+.downloadTarget {
+  margin-bottom: 3px;
+  cursor: inherit;
+}
+
+.downloadDetails {
+  opacity: 0.7;
+  font-size: 95%;
+  cursor: inherit;
+}
+
+.downloadButton {
+  background: transparent;
+  min-width: 0;
+  min-height: 0;
+  margin: 3px;
+  border: none;
+  padding: 5px;
+  list-style-image: url("chrome://browser/skin/downloads/buttons.png");
+}
+
+/*** Highlighted list items ***/
+
+richlistitem.download:not([selected]):hover {
+  border-radius: 3px;
+  background-color: #794900;
+  color: #FFCF00;
+  cursor: pointer;
+}
+
+/*** Button icons ***/
+
+.downloadButton.downloadCancel {
+  -moz-image-region: rect(0px, 16px, 16px, 0px);
+}
+
+richlistitem.download:hover > .downloadButton.downloadCancel,
+richlistitem.download:hover > .downloadButton.downloadCancel:hover,
+richlistitem.download:hover > .downloadButton.downloadCancel:active {
+   -moz-image-region: rect(0px, 32px, 16px, 16px);
+}
+
+.downloadButton.downloadShow {
+  -moz-image-region: rect(16px, 16px, 32px, 0px);
+}
+
+richlistitem.download:hover > .downloadButton.downloadShow,
+richlistitem.download:hover > .downloadButton.downloadShow:hover,
+richlistitem.download:hover > .downloadButton.downloadShow:active {
+   -moz-image-region: rect(16px, 32px, 32px, 16px);
+}
+
+.downloadButton.downloadRetry {
+  -moz-image-region: rect(32px, 16px, 48px, 0px);
+}
+
+richlistitem.download:hover > .downloadButton.downloadRetry,
+richlistitem.download:hover > .downloadButton.downloadRetry:hover,
+richlistitem.download:hover > .downloadButton.downloadRetry:active {
+   -moz-image-region: rect(32px, 32px, 48px, 16px);
+}
+
+richlistitem.download[selected] > .downloadButton.downloadCancel,
+richlistitem.download[selected]:hover > .downloadButton.downloadCancel,
+richlistitem.download[selected]:hover > .downloadButton.downloadCancel:hover,
+richlistitem.download[selected]:hover > .downloadButton.downloadCancel:active {
+  -moz-image-region: rect(0px, 32px, 16px, 16px);
+}
+
+richlistitem.download[selected] > .downloadButton.downloadShow,
+richlistitem.download[selected]:hover > .downloadButton.downloadShow,
+richlistitem.download[selected]:hover > .downloadButton.downloadShow:hover,
+richlistitem.download[selected]:hover > .downloadButton.downloadShow:active {
+  -moz-image-region: rect(16px, 32px, 32px, 16px);
+}
+
+richlistitem.download[selected] > .downloadButton.downloadRetry,
+richlistitem.download[selected]:hover > .downloadButton.downloadRetry,
+richlistitem.download[selected]:hover > .downloadButton.downloadRetry:hover,
+richlistitem.download[selected]:hover > .downloadButton.downloadRetry:active {
+  -moz-image-region: rect(32px, 32px, 48px, 16px);
+}

diff --git a/LCARStrek/browser/downloads/contentAreaDownloadsView.css b/LCARStrek/browser/downloads/contentAreaDownloadsView.css
new file mode 100644 (file)
index 0000000..68ae5f7
--- /dev/null
+++ b/LCARStrek/browser/downloads/contentAreaDownloadsView.css
@@ -0,0 +1,27 @@
+/* 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/. */
+
+@import url("chrome://global/skin/inContentUI.css");
+
+#contentAreaDownloadsView {
+  margin: 0;
+  padding: 0;
+}
+
+.downloadButton {
+  box-shadow: none;
+}
+
+.downloadButton:not([disabled="true"]):hover:active,
+.downloadButton:not([disabled]):hover:active {
+  background: transparent;
+  border: none;
+  box-shadow: none;
+}
+
+#downloadsListEmptyDescription {
+  margin: 1em;
+  text-align: center;
+  color: #8050B0;
+}

diff --git a/LCARStrek/browser/downloads/download-notification.png b/LCARStrek/browser/downloads/download-notification-finish.png
similarity index 100%
rename from LCARStrek/browser/downloads/download-notification.png
rename to LCARStrek/browser/downloads/download-notification-finish.png

diff --git a/LCARStrek/browser/downloads/download-notification-start.png b/LCARStrek/browser/downloads/download-notification-start.png
new file mode 100644 (file)
index 0000000..a1fbe8a
Binary files /dev/null and b/LCARStrek/browser/downloads/download-notification-start.png differ

diff --git a/LCARStrek/browser/downloads/download-summary.png b/LCARStrek/browser/downloads/download-summary.png
new file mode 100644 (file)
index 0000000..6d7fafa
Binary files /dev/null and b/LCARStrek/browser/downloads/download-summary.png differ

diff --git a/LCARStrek/browser/downloads/downloads.css b/LCARStrek/browser/downloads/downloads.css
index a6c13292f47a5d44b38c63ea0a43b8683f002b66..b7d846ef95aad98ad004f210f68a1450535a51be 100644 (file)
--- a/LCARStrek/browser/downloads/downloads.css
+++ b/LCARStrek/browser/downloads/downloads.css
@@ -4,11 +4,6 @@
 
 /*** Panel and outer controls ***/
 
-#downloadsPanel > .panel-arrowcontainer > .panel-arrowcontent {
-  /* Avoid that the arrow overlaps the selection on first item */
-  padding-top: 5px;
-}
-
 #downloadsPanel > .panel-arrowcontainer > .panel-arrowcontent {
   padding: 0;
 }
@@ -24,13 +19,17 @@
 }
 
 #downloadsHistory {
-  background: transparent;
-  color: #9C9CFF;
   cursor: pointer;
+  margin: 4px !important;
+}
+
+#downloadsPanel[keyfocus] > #downloadsFooter > #downloadsHistory:focus {
+  outline: 1px #008484 dotted;
+  outline-offset: -1px;
 }
 
 #downloadsHistory > .button-box {
-  margin: 1em;
+  border: none;
 }
 
 /*** Downloads Summary and List items ***/
@@ -45,16 +44,20 @@ richlistitem[type="download"] {
 #downloadsSummary {
   padding: 8px 38px 8px 12px;
   cursor: pointer;
+  -moz-user-focus: normal;
+}
+
+#downloadsPanel[keyfocus] > #downloadsFooter > #downloadsSummary:focus {
+  outline: 1px #008484 dotted;
+  outline-offset: -5px;
 }
 
 #downloadsSummary > .downloadTypeIcon {
-  height: 24px;
-  width: 24px;
-  list-style-image: url("chrome://mozapps/skin/downloads/downloadIcon.png");
+  list-style-image: url("chrome://browser/skin/downloads/download-summary.png");
 }
 
 #downloadsSummaryDescription {
-  color: -moz-nativehyperlinktext;
+  color: #3333FF;
 }
 
 richlistitem[type="download"] {
@@ -85,35 +88,64 @@ richlistitem[type="download"]:first-child {
   list-style-image: url("chrome://global/skin/icons/alert-error.gif");
 }
 
+/* We hold .downloadTarget, .downloadProgress and .downloadDetails inside of
+   a vbox with class .downloadContainer. We set the font-size of the entire
+   container to 90% 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
+      .downloadTarget and .downloadProgress.
+
+   Finally, since we want .downloadTarget's font-size to be at 100% of the
+   font-size of .downloadContainer's parent, we use calc to go from the
+   smaller font-size back to the original font-size.
+ */
+#downloadsSummaryDetails,
+.downloadContainer {
+  font-size: 90%;
+}
+
+#downloadsSummaryDescription,
 .downloadTarget {
   margin-bottom: 6px;
   cursor: inherit;
 }
 
+.downloadTarget {
+  font-size: calc(100%/0.9);
+}
+
+#downloadsSummaryDetails,
 .downloadDetails {
   opacity: 0.6;
-  font-size: 90%;
   cursor: inherit;
 }
 
 .downloadButton {
-  -moz-appearance: none;
   min-width: 0;
   min-height: 0;
-  margin: 6px;
-  border: none;
+  margin: 3px;
+/*  border: none; */
   background: transparent;
   padding: 5px;
   list-style-image: url("chrome://browser/skin/downloads/buttons.png");
 }
 
 .downloadButton > .button-box {
+  border: 1px solid transparent;
   padding: 0;
 }
 
+#downloadsPanel[keyfocus] .downloadButton:focus > .button-box {
+  border: 1px dotted #008484;
+}
+
 /*** Highlighted list items ***/
 
-richlistitem[type="download"][state="1"]:hover {
+#downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"]:hover {
+  border-radius: 3px;
   background-color: #794900;
   color: #FFCF00;
   cursor: pointer;
@@ -124,24 +156,27 @@ richlistitem[type="download"][state="1"]:hover {
 .downloadButton.downloadCancel {
   -moz-image-region: rect(0px, 16px, 16px, 0px);
 }
-.downloadButton.downloadCancel:hover,
-.downloadButton.downloadCancel:active {
+richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel,
+richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel:hover,
+richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel:active {
   -moz-image-region: rect(0px, 32px, 16px, 16px);
 }
 
 .downloadButton.downloadShow {
   -moz-image-region: rect(16px, 16px, 32px, 0px);
 }
-.downloadButton.downloadShow:hover,
-.downloadButton.downloadShow:active {
+richlistitem[type="download"]:hover > stack > .downloadButton.downloadShow,
+richlistitem[type="download"]:hover > stack > .downloadButton.downloadShow:hover,
+richlistitem[type="download"]:hover > stack > .downloadButton.downloadShow:active {
   -moz-image-region: rect(16px, 32px, 32px, 16px);
 }
 
 .downloadButton.downloadRetry {
   -moz-image-region: rect(32px, 16px, 48px, 0px);
 }
-.downloadButton.downloadRetry:hover,
-.downloadButton.downloadRetry:active {
+richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry,
+richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry:hover,
+richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry:active {
   -moz-image-region: rect(32px, 32px, 48px, 16px);
 }
 
@@ -170,10 +205,18 @@ richlistitem[type="download"][state="1"]:hover {
                               18, 108, 36, 90) center no-repeat;
 }
 
+#downloads-indicator-icon:-moz-lwtheme-brighttext {
+/*  background: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"),
+                              0, 108, 18, 90) center no-repeat;*/
+}
+
 #downloads-indicator[attention] > #downloads-indicator-anchor > #downloads-indicator-icon {
   background-image: url("chrome://browser/skin/downloads/download-glow.png");
 }
 
+/* In the next few rules, we use :not([counter]) as a shortcut that is
+   equivalent to -moz-any([progress], [paused]). */
+
 #downloads-indicator:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
   background: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"),
                               0, 108, 18, 90) center no-repeat;
@@ -190,34 +233,47 @@ richlistitem[type="download"][state="1"]:hover {
                               18, 108, 36, 90) center no-repeat;
 }
 
-/*** Event notification ***/
+/*** Download notifications ***/
 
 #downloads-indicator-notification {
   opacity: 0;
-  background: url("chrome://browser/skin/downloads/download-notification.png")
-              center no-repeat;
   background-size: 16px;
+  background-position: center;
+  background-repeat: no-repeat;
 }
 
-@keyframes downloadsIndicatorNotificationRight {
+@keyframes downloadsIndicatorNotificationStartRight {
   from { opacity: 0; transform: translate(-128px, 128px) scale(8); }
   20%  { opacity: .85; animation-timing-function: ease-out; }
   to   { opacity: 0; transform: translate(0) scale(1); }
 }
 
-@keyframes downloadsIndicatorNotificationLeft {
+@keyframes downloadsIndicatorNotificationStartLeft {
   from { opacity: 0; transform: translate(128px, 128px) scale(8); }
   20%  { opacity: .85; animation-timing-function: ease-out; }
   to   { opacity: 0; transform: translate(0) scale(1); }
 }
 
-#downloads-indicator[notification] > #downloads-indicator-anchor > #downloads-indicator-notification {
-  animation-name: downloadsIndicatorNotificationRight;
+#downloads-indicator[notification="start"] > #downloads-indicator-anchor > #downloads-indicator-notification {
+  background-image: url("chrome://browser/skin/downloads/download-notification-start.png");
+  animation-name: downloadsIndicatorNotificationStartRight;
   animation-duration: 1s;
 }
 
-#downloads-indicator[notification]:-moz-locale-dir(rtl) > #downloads-indicator-anchor > #downloads-indicator-notification {
-  animation-name: downloadsIndicatorNotificationLeft;
+#downloads-indicator[notification="start"]:-moz-locale-dir(rtl) > #downloads-indicator-anchor > #downloads-indicator-notification {
+  animation-name: downloadsIndicatorNotificationStartLeft;
+}
+
+@keyframes downloadsIndicatorNotificationFinish {
+  from { opacity: 0; transform: scale(1); }
+  20%  { opacity: .65; animation-timing-function: ease-in; }
+  to   { opacity: 0; transform: scale(8); }
+}
+
+#downloads-indicator[notification="finish"] > #downloads-indicator-anchor > #downloads-indicator-notification {
+  background-image: url("chrome://browser/skin/downloads/download-notification-finish.png");
+  animation-name: downloadsIndicatorNotificationFinish;
+  animation-duration: 1s;
 }
 
 /*** Progress bar and text ***/
@@ -231,6 +287,12 @@ richlistitem[type="download"][state="1"]:hover {
   text-align: center;
 }
 
+#downloads-indicator-counter:-moz-lwtheme-brighttext {
+/*  color: white;
+  text-shadow: 0 0 1px rgba(0,0,0,.7),
+               0 1px 1.5px rgba(0,0,0,.5);*/
+}
+
 #downloads-indicator-progress {
   width: 16px;
   height: 5px;
@@ -240,7 +302,6 @@ richlistitem[type="download"][state="1"]:hover {
   margin-bottom: 2px;
   border-radius: 2px;
   background-color: #795900;
-  /*border: 1px solid #FFCF00;*/
 }
 
 #downloads-indicator-progress > .progress-bar {
@@ -254,7 +315,7 @@ richlistitem[type="download"][state="1"]:hover {
 #downloads-indicator-progress > .progress-remainder {
   min-width: 0;
   min-height: 0;
-  background-color: #000000;
+  background-color: #A09090;
   border-radius: 0 2px 2px 0;
 }
 
@@ -263,5 +324,5 @@ richlistitem[type="download"][state="1"]:hover {
 }
 
 #downloads-indicator[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-remainder {
-  background-color: #000000;
+  background-color: #404048;
 }

diff --git a/LCARStrek/browser/places/organizer.css b/LCARStrek/browser/places/organizer.css
index 42b39149af82d43a8dc44a3b97fe2ee0f1412f92..dd730927df713aaaa5ef0aa715902c001ada16c1 100644 (file)
--- a/LCARStrek/browser/places/organizer.css
+++ b/LCARStrek/browser/places/organizer.css
@@ -64,6 +64,7 @@
 
 #placesMenu > .toolbar-box > .toolbar-holder {
   background-color: transparent;
+  -moz-padding-end: 0;
 }
 
 /* organize, view and maintenance buttons icons */
@@ -116,3 +117,20 @@
 #infoBoxExpanderLabel {
   -moz-padding-start: 2px;
 }
+
+/**
+ * Downloads pane
+ */
+
+#clearDownloadsButton > .toolbarbutton-icon {
+  display: none;
+}
+
+#clearDownloadsButton {
+  padding: 0;
+  border: none;
+  height: 24px; /* match back/forward buttons */
+  border-radius: 0;
+  -moz-padding-start: 5px;
+  -moz-padding-end: 5px;
+}

diff --git a/LCARStrek/global/scrollbars.css b/LCARStrek/global/scrollbars.css
index ea96140a47e3e7719970a8934f82e06799fde1cf..845837f4d6644309dc8b160fabc5d601324d2b79 100644 (file)
--- a/LCARStrek/global/scrollbars.css
+++ b/LCARStrek/global/scrollbars.css
@@ -22,7 +22,7 @@ scrollbar {
 
 slider {
   height: 13px;
-  background-color: #202024;
+  background-color: #404048; /* #202024;*/
 }
 
 slider[orient="vertical"] {