Bug 1352199 - Invert the SVG loading throbber for selected tabs on compact themes. r?dao draft
authorJared Wein <jwein@mozilla.com>
Fri, 31 Mar 2017 17:38:24 -0400
changeset 554549 024588da8ee7c6fe33b1893b40f1cbea3b20babd
parent 554514 ad6c7869a82a943ec19a37091531b48cd1200091
child 554555 d20b55eff991827428f04176c294de97a2dd006f
push id51978
push userbmo:jaws@mozilla.com
push dateFri, 31 Mar 2017 21:38:40 +0000
reviewersdao
bugs1352199
milestone55.0a1
Bug 1352199 - Invert the SVG loading throbber for selected tabs on compact themes. r?dao MozReview-Commit-ID: 9MI50Medh0P
browser/themes/shared/compacttheme.inc.css
browser/themes/shared/compacttheme/loading-inverted.png
browser/themes/shared/compacttheme/loading-inverted@2x.png
browser/themes/shared/jar.inc.mn
browser/themes/shared/tabbrowser/loading.svg
browser/themes/shared/tabs.inc.css
--- a/browser/themes/shared/compacttheme.inc.css
+++ b/browser/themes/shared/compacttheme.inc.css
@@ -297,23 +297,17 @@ window:not([chromehidden~="toolbar"]) #u
 }
 
 .tabbrowser-tab[visuallyselected] {
   color: var(--tab-selection-color) !important; /* Override color: inherit */
   background-color: var(--tab-selection-background-color);
 }
 
 .tab-throbber[selected][progress] {
-  list-style-image: url("chrome://browser/skin/compacttheme/loading-inverted.png");
-}
-
-@media (min-resolution: 1.1dppx) {
-  .tab-throbber[selected][progress] {
-    list-style-image: url("chrome://browser/skin/compacttheme/loading-inverted@2x.png");
-  }
+  fill: #fff;
 }
 
 .tab-icon-sound[soundplaying],
 .tab-icon-sound[muted] {
   filter: url(chrome://global/skin/filters.svg#fill) !important; /* removes drop-shadow filter */
 }
 
 /* Don't need space for the tab curves (66px - 30px) */
deleted file mode 100644
index b9ee1a75df9748ff7e2924b144d2b1d3447fc0b7..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 852c4eee94052f539fae8feea7e8253de360f6b8..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
--- a/browser/themes/shared/jar.inc.mn
+++ b/browser/themes/shared/jar.inc.mn
@@ -135,13 +135,11 @@
   skin/classic/browser/panic-panel/icons.png                   (../shared/panic-panel/icons.png)
   skin/classic/browser/panic-panel/icons@2x.png                (../shared/panic-panel/icons@2x.png)
   skin/classic/browser/privatebrowsing/aboutPrivateBrowsing.css (../shared/privatebrowsing/aboutPrivateBrowsing.css)
   skin/classic/browser/privatebrowsing/check.svg               (../shared/privatebrowsing/check.svg)
   skin/classic/browser/privatebrowsing/favicon.svg             (../shared/privatebrowsing/favicon.svg)
   skin/classic/browser/privatebrowsing/private-browsing.svg    (../shared/privatebrowsing/private-browsing.svg)
   skin/classic/browser/privatebrowsing/tracking-protection-off.svg (../shared/privatebrowsing/tracking-protection-off.svg)
   skin/classic/browser/privatebrowsing/tracking-protection.svg (../shared/privatebrowsing/tracking-protection.svg)
-  skin/classic/browser/compacttheme/loading-inverted.png (../shared/compacttheme/loading-inverted.png)
-  skin/classic/browser/compacttheme/loading-inverted@2x.png (../shared/compacttheme/loading-inverted@2x.png)
   skin/classic/browser/compacttheme/urlbar-history-dropmarker.svg (../shared/compacttheme/urlbar-history-dropmarker.svg)
   skin/classic/browser/urlbar-star.svg                         (../shared/urlbar-star.svg)
   skin/classic/browser/urlbar-tab.svg                          (../shared/urlbar-tab.svg)
--- a/browser/themes/shared/tabbrowser/loading.svg
+++ b/browser/themes/shared/tabbrowser/loading.svg
@@ -9,12 +9,12 @@
     </radialGradient>
 
     <mask id="myMask">
       <rect width="16" height="16" fill="#fff"/>
       <path d="M11.8,9.3A4,4,0,1,1,5.2,5.2L1.6,1.6a9,9,0,1,0,14.9,9.2Z" fill="url(#radialGradient)"/>
     </mask>
   </defs>
 
-  <path fill="#0077ff" fill-opacity=".15" d="M8,0A8,8,0,0,0,0,8a8,8,0,0,0,8,8,8,8,0,0,0,8-8A8,8,0,0,0,8,0ZM8,13A5,5,0,0,1,3,8,5,5,0,0,1,8,3a5,5,0,0,1,5,5A5,5,0,0,1,8,13Z"/>
-  <path mask="url(#myMask)" fill="#0090ff" d="M8,3a5,5,0,0,1,5,5h0a1.5,1.5,0,0,0,3,0h0a8,8,0,1,0-.8,3.5l-2.7-1.3A5,5,0,1,1,8,3Z"/>
+  <path fill="context-fill" fill-opacity=".15" d="M8,0A8,8,0,0,0,0,8a8,8,0,0,0,8,8,8,8,0,0,0,8-8A8,8,0,0,0,8,0ZM8,13A5,5,0,0,1,3,8,5,5,0,0,1,8,3a5,5,0,0,1,5,5A5,5,0,0,1,8,13Z"/>
+  <path mask="url(#myMask)" fill="context-fill" d="M8,3a5,5,0,0,1,5,5h0a1.5,1.5,0,0,0,3,0h0a8,8,0,1,0-.8,3.5l-2.7-1.3A5,5,0,1,1,8,3Z"/>
 
 </svg>
--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@@ -201,16 +201,17 @@
   */
   fill: currentColor;
 }
 
 .tab-throbber[progress] {
   list-style-image: url("chrome://browser/skin/tabbrowser/loading.svg");
   animation-duration: 800ms;
   animation-name: tab-throbber-loading;
+  fill: #0077ff;
 }
 
 .tab-label {
   margin-inline-end: 0;
   margin-inline-start: 0;
 }
 
 .tab-close-button {