Bug 1375893 - Update pinned-tab highlight/glow style for Photon. r=dao
authorJustin Dolske <dolske@mozilla.com>
Thu, 29 Jun 2017 15:27:31 -0700
changeset 366759 b8e1f6c6ebd6813d5f3cba758f5956703df6eb8e
parent 366758 84a1f64cc8d7bcf668922bd1ebc4d0aff4c43566
child 366760 d7d6193f31a35c82d54877de472e293112713d67
push id92050
push userjdolske@mozilla.com
push dateThu, 29 Jun 2017 22:28:11 +0000
treeherdermozilla-inbound@b8e1f6c6ebd6 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao
bugs1375893
milestone56.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 1375893 - Update pinned-tab highlight/glow style for Photon. r=dao
browser/themes/shared/compacttheme.inc.css
browser/themes/shared/jar.inc.mn
browser/themes/shared/tabbrowser/indicator-tab-attention.svg
browser/themes/shared/tabs.inc.css
--- a/browser/themes/shared/compacttheme.inc.css
+++ b/browser/themes/shared/compacttheme.inc.css
@@ -32,17 +32,19 @@
   --chrome-selection-background-color: #5675B9;
 
   /* Tabs */
   --tab-background-color: #272b35;
   --tab-hover-background-color: #07090a;
   --tab-selection-color: #f5f7fa;
   --tab-selection-background-color: #5675B9;
   --tab-selection-box-shadow: none;
+%ifndef MOZ_PHOTON_THEME
   --pinned-tab-glow: radial-gradient(22px at center calc(100% - 2px), rgba(76,158,217,0.9) 13%, rgba(0,0,0,0.4) 16%, transparent 70%);
+%endif
 
   /* Url and search bars */
   --url-and-searchbar-background-color: #171B1F;
   --urlbar-separator-color: #5F6670;
   --urlbar-dropmarker-url: url("chrome://browser/skin/compacttheme/urlbar-history-dropmarker.svg");
   --urlbar-dropmarker-region: rect(0px, 11px, 14px, 0px);
   --urlbar-dropmarker-hover-region: rect(0, 22px, 14px, 11px);
   --urlbar-dropmarker-active-region: rect(0px, 33px, 14px, 22px);
@@ -79,17 +81,19 @@ toolbar:-moz-lwtheme-brighttext  {
   --chrome-selection-color: #f5f7fa;
   --chrome-selection-background-color: #4c9ed9;
 
   --tab-background-color: #E3E4E6;
   --tab-hover-background-color: #D7D8DA;
   --tab-selection-color: #f5f7fa;
   --tab-selection-background-color: #4c9ed9;
   --tab-selection-box-shadow: none;
+%ifndef MOZ_PHOTON_THEME
   --pinned-tab-glow: radial-gradient(22px at center calc(100% - 2px), rgba(76,158,217,0.9) 13%, transparent 16%);
+%endif
 }
 
 %ifndef MOZ_PHOTON_THEME
 /* Override the lwtheme-specific styling for toolbar buttons */
 :root:-moz-lwtheme-darktext,
 toolbar:-moz-lwtheme-darktext {
   --toolbarbutton-hover-background: #eaeaea;
   --toolbarbutton-hover-boxshadow: none;
@@ -319,19 +323,23 @@ window:not([chromehidden~="toolbar"]) #u
 .tabbrowser-tab {
   /* We normally rely on other tab elements for pointer events, but this
      theme hides those so we need it set here instead */
   pointer-events: auto;
 }
 
 .tabbrowser-tab:-moz-any([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
 .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
+%ifdef MOZ_PHOTON_THEME
+  background-position: center bottom -4px;
+%else
   background-image: var(--pinned-tab-glow);
   background-position: center;
   background-size: 100%;
+%endif
 }
 
 .tabbrowser-tab[image] > .tab-stack > .tab-content[attention]:not([pinned]):not([selected="true"]) {
   background-position: left bottom var(--tab-toolbar-navbar-overlap);
   background-size: 34px 100%;
 }
 
 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]):hover,
--- a/browser/themes/shared/jar.inc.mn
+++ b/browser/themes/shared/jar.inc.mn
@@ -176,16 +176,17 @@
   skin/classic/browser/search-indicator-badge-add@2x.png       (../shared/search/search-indicator-badge-add@2x.png)
   skin/classic/browser/search-indicator-magnifying-glass.svg   (../shared/search/search-indicator-magnifying-glass.svg)
   skin/classic/browser/search-arrow-go.svg                     (../shared/search/search-arrow-go.svg)
   skin/classic/browser/gear.svg                                (../shared/search/gear.svg)
   skin/classic/browser/sidebar/close.svg                       (../shared/sidebar/close.svg)
   skin/classic/browser/tabbrowser/connecting.png               (../shared/tabbrowser/connecting.png)
   skin/classic/browser/tabbrowser/connecting@2x.png            (../shared/tabbrowser/connecting@2x.png)
   skin/classic/browser/tabbrowser/crashed.svg                  (../shared/tabbrowser/crashed.svg)
+  skin/classic/browser/tabbrowser/indicator-tab-attention.svg  (../shared/tabbrowser/indicator-tab-attention.svg)
   skin/classic/browser/tabbrowser/pendingpaint.png             (../shared/tabbrowser/pendingpaint.png)
   skin/classic/browser/tabbrowser/tab-audio-playing.svg        (../shared/tabbrowser/tab-audio-playing.svg)
   skin/classic/browser/tabbrowser/tab-audio-muted.svg          (../shared/tabbrowser/tab-audio-muted.svg)
   skin/classic/browser/tabbrowser/tab-audio-blocked.svg        (../shared/tabbrowser/tab-audio-blocked.svg)
   skin/classic/browser/tabbrowser/tab-audio-small.svg          (../shared/tabbrowser/tab-audio-small.svg)
   skin/classic/browser/tabbrowser/tab-overflow-indicator.png   (../shared/tabbrowser/tab-overflow-indicator.png)
   skin/classic/browser/toolbarbutton-dropdown-arrow.png        (../shared/toolbarbutton-dropdown-arrow.png)
   skin/classic/browser/toolbarbutton-dropdown-arrow-inverted.png (../shared/toolbarbutton-dropdown-arrow-inverted.png)
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/tabbrowser/indicator-tab-attention.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
+  <circle r="6" cy="6" cx="6" fill-opacity=".2" fill="#00C8D7" />
+  <circle r="4" cy="6" cx="6" fill-opacity=".6" fill="#00C8D7"  />
+  <circle r="2" cy="6" cx="6" fill="#00FEFF" />
+</svg>
\ No newline at end of file
--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@@ -466,20 +466,25 @@
 /* Pinned tab separators need position: absolute when positioned (during overflow). */
 #tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned]::before {
   height: 100%;
   position: absolute;
 }
 
 .tabbrowser-tab:-moz-any([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
 .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
+%ifdef MOZ_PHOTON_THEME
+  background-image: url(chrome://browser/skin/tabbrowser/indicator-tab-attention.svg);
+  background-position: center bottom -3px;
+%else
   background-image: radial-gradient(farthest-corner at center bottom, rgb(255,255,255) 3%, rgba(186,221,251,0.75) 20%, rgba(127,179,255,0.25) 40%, transparent 70%);
   background-position: center bottom var(--tab-toolbar-navbar-overlap);
+  background-size: 85% 100%;
+%endif
   background-repeat: no-repeat;
-  background-size: 85% 100%;
 }
 
 .tabbrowser-tab[image] > .tab-stack > .tab-content[attention]:not([pinned]):not([selected="true"]) {
   background-position: left bottom var(--tab-toolbar-navbar-overlap);
   background-size: 34px 100%;
 }
 
 .tab-label[attention]:not([selected="true"]) {