Bug 590742 - Incorporate new CSS for Tab Candy appearance polish [r+a=dietrich]
authorMichael Yoshitaka Erlewine <mitcho@mitcho.com>
Mon, 06 Sep 2010 11:36:55 -0400
changeset 52087 d0394b66e5d3d53e78559016a914373e27c4d046
parent 52086 1cf731410dc21fbcb199e274e50201fe031e1c29
child 52088 c3e21097bb7824784ef7b3bf55fe253e66d96711
push id15533
push userdietrich@mozilla.com
push dateMon, 06 Sep 2010 16:17:33 +0000
treeherdermozilla-central@d0394b66e5d3 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs590742
milestone2.0b6pre
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 590742 - Incorporate new CSS for Tab Candy appearance polish [r+a=dietrich]
browser/base/content/tabview/tabitems.js
browser/base/content/tabview/tabview.css
browser/themes/gnomestripe/browser/tabview/tabview.css
browser/themes/pinstripe/browser/tabview/tabview.css
browser/themes/winstripe/browser/tabview/grain.png
browser/themes/winstripe/browser/tabview/tabview.css
--- a/browser/base/content/tabview/tabitems.js
+++ b/browser/base/content/tabview/tabitems.js
@@ -54,17 +54,17 @@ window.TabItem = function(tab) {
 
   this.tab = tab;
   // register this as the tab's tabItem
   this.tab.tabItem = this;
 
   // ___ set up div
   var $div = iQ('<div>')
     .addClass('tab')
-    .html("<div class='thumb'><div class='thumb-shadow'></div>" +
+    .html("<div class='thumb'>" +
           "<img class='cached-thumb' style='display:none'/><canvas/></div>" +
           "<div class='favicon'><img/></div>" +
           "<span class='tab-title'>&nbsp;</span>"
     )
     .appendTo('body');
 
   this.canvasSizeForced = false;
   this.isShowingCachedData = false;
@@ -484,27 +484,24 @@ window.TabItem.prototype = Utils.extend(
       this.resizable(false);
     }
   },
 
   // ----------
   // Function: makeActive
   // Updates this item to visually indicate that it's active.
   makeActive: function() {
-   iQ(this.container).find("canvas").addClass("focus");
-   iQ(this.container).find("img.cached-thumb").addClass("focus");
-
+   iQ(this.container).addClass("focus");
   },
 
   // ----------
   // Function: makeDeactive
   // Updates this item to visually indicate that it's not active.
   makeDeactive: function() {
-   iQ(this.container).find("canvas").removeClass("focus");
-   iQ(this.container).find("img.cached-thumb").removeClass("focus");
+   iQ(this.container).removeClass("focus");
   },
 
   // ----------
   // Function: zoomIn
   // Allows you to select the tab and zoom in on it, thereby bringing you
   // to the tab in Firefox to interact with.
   // Parameters:
   //   isNewBlankTab - boolean indicates whether it is a newly opened blank tab.
--- a/browser/base/content/tabview/tabview.css
+++ b/browser/base/content/tabview/tabview.css
@@ -47,20 +47,16 @@ body {
 }
 
 .thumb {
   position: relative;
   width: 100%;
   height: 100%;
 }
 
-.thumb-shadow {
-  position: absolute;
-}
-
 .favicon {
   position: absolute;
 }
 
 .close {
   position: absolute;
   cursor: pointer;
 }
@@ -68,18 +64,17 @@ body {
 .expander {
   position: absolute;
 }
 
 .tab-title {
   position: absolute;
 }
 
-.stacked .tab-title,
-.stacked .thumb-shadow {
+.stacked .tab-title {
   display: none;
 }
 
 .stack-trayed .tab-title {
   display: block !important;
 }
 
 /* Tab: Zooming
--- a/browser/themes/gnomestripe/browser/tabview/tabview.css
+++ b/browser/themes/gnomestripe/browser/tabview/tabview.css
@@ -1,62 +1,61 @@
 /* This file is for platform-specific CSS for TabView, and is loaded after the
   platform-independent tabview.css, to allow overwriting.
 */
 
 body {
-  background-color: transparent;  
   font-family: Tahoma, sans-serif !important;
   color: rgba(0,0,0,0.4);
   font-size: 12px;
   line-height: 16px;
 }
 
 #bg {
   background: -moz-linear-gradient(top,#C4C4C4,#9E9E9E);
 }
 
 /* Tabs
 ----------------------------------*/
 
 .tab {
   padding: 4px 6px 6px 4px;
-  border: 1px solid rgba(230,230,230,1);
-  background-color: rgba(245,245,245,1);
+  background-color: #D7D7D7;
   -moz-border-radius: 0.4em;
-  -moz-box-shadow: inset rgba(255, 255, 255, 0.6) 0 0 0 2px;
+  -moz-box-shadow: 0 1px 0 #FFFFFF inset,
+                   0 -1px 1px rgba(255, 255, 255, 0.4) inset,
+                   1px 0 1px rgba(255, 255, 255, 0.4) inset,
+                   -1px 0 1px rgba(255, 255, 255, 0.4) inset,
+                   0 1px 2px rgba(0, 0, 0, 0.4);
   cursor: pointer;
   margin: 4px;
 }
 
 .tab canvas,
 .cached-thumb {
   border: 1px solid rgba(0,0,0,0.2);
 }
 
-.thumb-shadow {
-  border-bottom: 5px solid rgba(0,0,0,0.05);
-  margin-right: -12px;
-  bottom: 2px;
-  width: 94.5%;
+.thumb {
+  -moz-box-shadow: 1px 2px 0 rgba(0, 0, 0, 0.2);
 }
 
 .favicon {
-  background-color: rgba(245,245,245,1);
+  background-color: #D7D7D7;
   -moz-border-radius-bottomright: 0.4em;
   -moz-box-shadow:
-    inset rgba(255, 255, 255, 0.6) 0 -2px 0px,
-    inset rgba(255, 255, 255, 0.6) -2px 0px 0px;
+    0 -1px 0 rgba(225, 225, 225, 0.8) inset,
+    -1px 0 0 rgba(225, 225, 225, 0.8) inset;
   padding: 4px 6px 6px 4px;
   top: 4px;
   left: 4px;
-  border-right: 1px solid rgba(0,0,0,0.2);
-  border-bottom: 1px solid rgba(0,0,0,0.2);
-  height: 17px;
-  width: 17px;
+  border-right: 1px solid rgba(0, 0, 0, 0.3);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+  height: 16px;
+  width: 16px;
 }
 
 .favicon img {
   border: none;
   width: 16px;
   height: 16px;
 }
 
@@ -69,28 +68,35 @@ body {
   background: url("moz-icon://stock/gtk-close?size=menu") no-repeat;
 }
 
 .close:hover {
   opacity: 1.0;
 }
 
 .expander {
-  bottom: 6px;
+  bottom: 8px;
   right: 6px;
   width: 16px;
   height: 16px;
   background: url(chrome://global/skin/icons/resizer.png) no-repeat;
   opacity: 0.2;
 }
 
 .expander:hover {
   opacity: 1.0;
 }
 
+.close:hover,
+.expander:hover {
+  -moz-transition-property: opacity;
+  -moz-transition-duration: 0.5s;
+  -moz-transition-timing-function: ease-out;
+}
+
 .favicon img:hover, 
 .close img:hover, 
 .expander img:hover {
   opacity: 1;
   border: none;
 }
 
 .tab-title {
--- a/browser/themes/pinstripe/browser/tabview/tabview.css
+++ b/browser/themes/pinstripe/browser/tabview/tabview.css
@@ -1,109 +1,113 @@
 /* This file is for platform-specific CSS for TabView, and is loaded after the
   platform-independent tabview.css, to allow overwriting.
 */
 
 body {
   background-color: transparent;  
   font-family: Tahoma, sans-serif !important;
-  color: rgba(0,0,0,0.4);
+  color: rgba(0, 0, 0, 0.6);
   font-size: 12px;
   line-height: 16px;
 }
 
 #bg {
   background: -moz-linear-gradient(top,#C4C4C4,#9E9E9E);
 }
 
 /* Tabs
 ----------------------------------*/
 
 .tab {
   padding: 4px 6px 6px 4px;
-  border: 1px solid rgba(230,230,230,1);
-  background-color: rgba(245,245,245,1);
+  background-color: #D7D7D7;
   -moz-border-radius: 0.4em;
-  -moz-box-shadow: inset rgba(255, 255, 255, 0.6) 0 0 0 2px;
+  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
+  border: 1px solid rgba(255, 255, 255, 0.5);
   cursor: pointer;
-  margin: 4px;
+  margin: 8px;
 }
 
 .tab canvas,
 .cached-thumb {
-  border: 1px solid rgba(0,0,0,0.2);
+  border: 1px solid rgba(0, 0, 0, 0.3);
 }
 
-.thumb-shadow {
-  border-bottom: 5px solid rgba(0,0,0,0.05);
-  margin-right: -12px;
-  bottom: 2px;
-  width: 94.5%;
+.thumb {
+  -moz-box-shadow: 1px 2px 0 rgba(0, 0, 0, 0.2);
 }
 
 .favicon {
-  background-color: rgba(245,245,245,1);
+  background-color: #D7D7D7;
   -moz-border-radius-bottomright: 0.4em;
   -moz-box-shadow:
-    inset rgba(255, 255, 255, 0.6) 0 -2px 0px,
-    inset rgba(255, 255, 255, 0.6) -2px 0px 0px;
+    0 -1px 0 rgba(225, 225, 225, 0.8) inset,
+    -1px 0 0 rgba(225, 225, 225, 0.8) inset;
   padding: 4px 6px 6px 4px;
   top: 4px;
   left: 4px;
-  border-right: 1px solid rgba(0,0,0,0.2);
-  border-bottom: 1px solid rgba(0,0,0,0.2);
-  height: 17px;
-  width: 17px;
+  border-right: 1px solid rgba(0, 0, 0, 0.3);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+  height: 16px;
+  width: 16px;
 }
 
 .favicon img {
   border: none;
   width: 16px;
   height: 16px;
 }
 
 .close {
   top: 6px;
   right: 6px;
   width: 16px;
   height: 16px;
+  background: url(chrome://global/skin/icons/closetab.png) no-repeat;
+  -moz-transition-property: opacity;
+  -moz-transition-duration: 0.5s;
+  -moz-transition-timing-function: ease-out;
   opacity: 0.2;
-  background: url(chrome://global/skin/icons/closetab.png) no-repeat;
-}
-
-.close:hover {
-  opacity: 1.0;
 }
 
 .expander {
-  bottom: 6px;
+  bottom: 8px;
   right: 6px;
   width: 16px;
   height: 16px;
   background: url(chrome://global/skin/icons/resizer.png) no-repeat;
+  -moz-transition-property: opacity;
+  -moz-transition-duration: 0.5s;
+  -moz-transition-timing-function: ease-out;
   opacity: 0.2;
 }
 
+.close:hover,
 .expander:hover {
+  -moz-transition-property: opacity;
+  -moz-transition-duration: 0.5s;
+  -moz-transition-timing-function: ease-out;
   opacity: 1.0;
 }
 
 .favicon img:hover, 
 .close img:hover, 
 .expander img:hover {
   opacity: 1;
   border: none;
 }
 
 .tab-title {
-  top: 100%;
+  bottom: -20px;
   text-align: center;
   width: 94.5%;
   white-space: nowrap;
   overflow: hidden;
+	text-shadow: 0 1px rgba(255, 255, 255, 0.6);
 }
 
 .stacked {
   padding: 0;
 }
 
 .stacked .thumb {
   -moz-box-shadow: rgba(0,0,0,.2) 1px 1px 6px;
@@ -114,60 +118,69 @@ body {
   color: #EEE;
   font-size: 11px;
 }
 
 .stack-trayed .thumb {
   -moz-box-shadow: none !important;
 }
 
-.focus {
-  -moz-box-shadow:  rgba(54,79,225,1) 0px 0px 5px -1px !important;
+.tab.focus {
+  -moz-box-shadow: 0 0 8px -moz-mac-menuselect/*#0060D6*/;
+  border: 1px solid rgba(255, 255, 255, 0.6);
 }
 
 /* Tab: Zooming
 ----------------------------------*/
 
 .front .tab-title, 
 .front .close, 
 .front .favicon, 
 .front .expander, 
 .front .thumb-shadow {
   display: none;
 }
 
-.front .focus {
+.front .thumb {
   -moz-box-shadow: none !important;
 }
 
+.front.focus {
+  -moz-box-shadow: none !important;
+  border: none !important;
+}
+
 /* Tab GroupItem
 ----------------------------------*/
 
 .tabInGroupItem {
-  border: none;
-  -moz-box-shadow: none !important;
+  -moz-box-shadow: none;
+  border-color: transparent;
+  background-color: transparent;
+}
+
+.tabInGroupItem .favicon {
+  background-color: #EBEBEB;
 }
 
 .groupItem {
   cursor: move;
-  border: 1px solid rgba(230,230,230,1);
-  background-color: rgba(248,248,248,1);
+  background-color: #EBEBEB;
   -moz-border-radius: 0.4em;
-  -moz-box-shadow:
-    inset rgba(255, 255, 255, 0.6) 0 0 0 2px,
-    rgba(0,0,0,0.2) 1px 1px 4px;
+  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
+  border: 1px solid rgba(255, 255, 255, 0.5);
 }
 
 .groupItem.activeGroupItem {
   -moz-box-shadow:
     rgba(0,0,0,0.6) 1px 1px 8px;
 }
 
 .phantom {
-  border: 1px solid rgba(190,190,190,1);
+  border: 1px solid rgba(255, 255, 255, 0.5);
 }
 
 .overlay {
   background-color: rgba(0,0,0,.7) !important;
   -moz-box-shadow: 3px 3px 8px rgba(0,0,0,.5);
   -moz-border-radius: 0.4em;
   /*
   border: 1px solid rgba(230,230,230,1);
@@ -336,9 +349,9 @@ input.defaultName {
 }
 
 .iq-resizable-se {
   cursor: se-resize;
   width: 12px;
   height: 12px;
   right: 1px;
   bottom: 1px;
-}
\ No newline at end of file
+}
new file mode 100644
index 0000000000000000000000000000000000000000..2c0608a27909177db37d4b5d877caace344b16fe
GIT binary patch
literal 1865
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
Tql=Xs-OtV2-H%=3x;f?_o9O~J
--- a/browser/themes/winstripe/browser/tabview/tabview.css
+++ b/browser/themes/winstripe/browser/tabview/tabview.css
@@ -1,109 +1,113 @@
 /* This file is for platform-specific CSS for TabView, and is loaded after the
   platform-independent tabview.css, to allow overwriting.
 */
 
 body {
-  background-color: transparent;  
   font-family: Tahoma, sans-serif !important;
-  color: rgba(0,0,0,0.4);
-  font-size: 12px;
+  color: rgba(0, 0, 0, 0.6);
+  font-size: 13px;
   line-height: 16px;
 }
 
 #bg {
-  background: -moz-linear-gradient(top,#F1F5FB,#EDF4FB);
+  background: url("chrome://browser/skin/tabview/grain.png") repeat scroll center top, -moz-linear-gradient(center top , #CCD9EA, #C7D5E7) repeat scroll 0 0 transparent;
 }
 
 /* Tabs
 ----------------------------------*/
 
 .tab {
   padding: 4px 6px 6px 4px;
-  border: 1px solid rgba(230,230,230,1);
-  background-color: rgba(245,245,245,1);
+  background-color: #E0EAF5;
   -moz-border-radius: 0.4em;
-  -moz-box-shadow: inset rgba(255, 255, 255, 0.6) 0 0 0 2px;
+  -moz-box-shadow:
+    0 1px 0 #FFFFFF inset,
+    0 -1px 1px rgba(255, 255, 255, 0.8) inset,
+    1px 0 1px rgba(255, 255, 255, 0.8) inset,
+    -1px 0 1px rgba(255, 255, 255, 0.8) inset,
+    0 1px 2px rgba(4, 38, 60, 0.4);
   cursor: pointer;
   margin: 4px;
 }
 
 .tab canvas,
 .cached-thumb {
-  border: 1px solid rgba(0,0,0,0.2);
+  border: 1px solid rgba(73, 99, 119, 0.3);
 }
 
-.thumb-shadow {
-  border-bottom: 5px solid rgba(0,0,0,0.05);
-  margin-right: -12px;
-  bottom: 2px;
-  width: 94.5%;
+.thumb {
+  -moz-box-shadow: 1px 2px 0 rgba(0, 0, 0, 0.1);
 }
 
 .favicon {
-  background-color: rgba(245,245,245,1);
+  background-color: #E0EAF5;
   -moz-border-radius-bottomright: 0.4em;
-  -moz-box-shadow:
-    inset rgba(255, 255, 255, 0.6) 0 -2px 0px,
-    inset rgba(255, 255, 255, 0.6) -2px 0px 0px;
   padding: 4px 6px 6px 4px;
   top: 4px;
   left: 4px;
-  border-right: 1px solid rgba(0,0,0,0.2);
-  border-bottom: 1px solid rgba(0,0,0,0.2);
+  border-right: 1px solid rgba(73, 99, 119, 0.3);
+  border-bottom: 1px solid rgba(73, 99, 119, 0.3);
   height: 17px;
   width: 17px;
 }
 
 .favicon img {
   border: none;
   width: 16px;
   height: 16px;
 }
 
 .close {
   top: 6px;
   right: 6px;
   width: 16px;
   height: 16px;
+  background: url(chrome://global/skin/icons/Close.gif) no-repeat;
+  -moz-transition-property: opacity;
+  -moz-transition-duration: 0.5s;
+  -moz-transition-timing-function: ease-out;
   opacity: 0.2;
-  background: url(chrome://global/skin/icons/Close.gif) no-repeat;
-}
-
-.close:hover {
-  opacity: 1.0;
 }
 
 .expander {
   bottom: 6px;
   right: 6px;
   width: 16px;
   height: 16px;
   background: url(chrome://global/skin/icons/resizer.png) no-repeat;
+  -moz-transition-property: opacity;
+  -moz-transition-duration: 0.5s;
+  -moz-transition-timing-function: ease-out;
   opacity: 0.2;
 }
 
+.close:hover,
 .expander:hover {
+  -moz-transition-property: opacity;
+  -moz-transition-duration: 0.5s;
+  -moz-transition-timing-function: ease-out;
   opacity: 1.0;
 }
 
 .favicon img:hover, 
 .close img:hover, 
 .expander img:hover {
   opacity: 1;
   border: none;
 }
 
 .tab-title {
-  top: 100%;
+  bottom: -20px;
   text-align: center;
   width: 94.5%;
   white-space: nowrap;
   overflow: hidden;
+  text-shadow: 0 1px rgba(255, 255, 255, 0.6);
 }
 
 .stacked {
   padding: 0;
 }
 
 .stacked .thumb {
   -moz-box-shadow: rgba(0,0,0,.2) 1px 1px 6px;
@@ -114,60 +118,74 @@ body {
   color: #EEE;
   font-size: 11px;
 }
 
 .stack-trayed .thumb {
   -moz-box-shadow: none !important;
 }
 
-.focus {
-  -moz-box-shadow:  rgba(54,79,225,1) 0px 0px 5px -1px !important;
+.tab.focus {
+  -moz-box-shadow:
+    0 1px 0 #FFFFFF inset,
+    0 -1px 1px #FFFFFF inset,
+    1px 0 1px #FFFFFF inset,
+    -1px 0 1px #FFFFFF inset,
+    0 0 8px #007ECE;
 }
 
 /* Tab: Zooming
 ----------------------------------*/
 
 .front .tab-title, 
 .front .close, 
 .front .favicon, 
 .front .expander, 
 .front .thumb-shadow {
   display: none;
 }
 
-.front .focus {
+.front .thumb {
+  -moz-box-shadow: none !important;
+}
+
+.front.focus {
   -moz-box-shadow: none !important;
 }
 
 /* Tab GroupItem
 ----------------------------------*/
 
 .tabInGroupItem {
-  border: none;
-  -moz-box-shadow: none !important;
+  -moz-box-shadow: none;
+  background-color: #E0EAF5;
+}
+
+.tabInGroupItem .favicon {
+  background-color: #E0EAF5;
 }
 
 .groupItem {
   cursor: move;
-  border: 1px solid rgba(230,230,230,1);
-  background-color: rgba(248,248,248,1);
+  background-color: #E0EAF5;
   -moz-border-radius: 0.4em;
   -moz-box-shadow:
-    inset rgba(255, 255, 255, 0.6) 0 0 0 2px,
-    rgba(0,0,0,0.2) 1px 1px 4px;
+    0 1px 0 #FFFFFF inset,
+    0 -1px 1px rgba(255, 255, 255, 0.8) inset,
+    1px 0 1px rgba(255, 255, 255, 0.8) inset,
+    -1px 0 1px rgba(255, 255, 255, 0.8) inset,
+    0 1px 4px rgba(4, 38, 60, 0.6);
 }
 
 .groupItem.activeGroupItem {
   -moz-box-shadow:
     rgba(0,0,0,0.6) 1px 1px 8px;
 }
 
 .phantom {
-  border: 1px solid rgba(190,190,190,1);
 }
 
 .overlay {
   background-color: rgba(0,0,0,.7) !important;
   -moz-box-shadow: 3px 3px 8px rgba(0,0,0,.5);
   -moz-border-radius: 0.4em;
   /*
   border: 1px solid rgba(230,230,230,1);