Bug 608637 - Panorama exit button should perhaps reflect the number of groups as well [r=dao, a=beltzner]
authorRaymond Lee <raymond@raysquare.com>
Wed, 24 Nov 2010 01:28:02 +0800
changeset 58275 d6e9599f18bf28431add961995fd97ebb7e9e6bc
parent 58274 dcc94ba87c5cb46fe3cf8f02b571c120f1b47c3d
child 58276 fa69cf56d15bfc04871444f9b7bdfc972e03c612
push id1
push usershaver@mozilla.com
push dateTue, 04 Jan 2011 17:58:04 +0000
reviewersdao, beltzner
bugs608637
milestone2.0b8pre
Bug 608637 - Panorama exit button should perhaps reflect the number of groups as well [r=dao, a=beltzner]
browser/base/content/tabview/search.js
browser/base/content/tabview/tabview.html
browser/base/content/tabview/ui.js
browser/themes/gnomestripe/browser/tabview/tabview.css
browser/themes/pinstripe/browser/tabview/tabview.css
browser/themes/winstripe/browser/tabview/tabview.css
--- a/browser/base/content/tabview/search.js
+++ b/browser/base/content/tabview/search.js
@@ -514,17 +514,16 @@ function performSearch() {
   matcher.doSearch(TabHandlers.onMatch, TabHandlers.onUnmatch, TabHandlers.onOther);
 }
 
 function ensureSearchShown(event){
   var $search = iQ("#search");
   var $searchbox = iQ("#searchbox");
   iQ("#searchbutton").css({ opacity: 1 });
 
-
   if (!isSearchEnabled()) {
     $search.show();
     var mainWindow = gWindow.document.getElementById("main-window");
     mainWindow.setAttribute("activetitlebarcolor", "#717171");       
 
     // Marshal the focusing, otherwise you end up with
     // a race condition where only sometimes would the
     // first keystroke be registered by the search box.
--- a/browser/base/content/tabview/tabview.html
+++ b/browser/base/content/tabview/tabview.html
@@ -5,17 +5,17 @@
   <title>&nbsp;</title>
   <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
   <link rel="stylesheet" href="tabview.css" type="text/css"/>
   <link rel="stylesheet" href="chrome://browser/skin/tabview/tabview.css" type="text/css"/>
 </head>
 
 <body transparent="true">
   <div id="content">
-    <input id="exit-button" type="image" alt=""/>
+    <input id="exit-button" type="image" alt="" groups="0" />
     <div id="actions">
       <input id="searchbutton" type="button"/>
     </div>
     <div id="bg" />
   </div>
   
   <div id="search">
     <input id="searchbox" type="text"/>
--- a/browser/base/content/tabview/ui.js
+++ b/browser/base/content/tabview/ui.js
@@ -795,20 +795,23 @@ let UI = {
     if (!this._isTabViewVisible()) {
       var index = this._reorderTabItemsOnShow.indexOf(groupItem);
       if (index == -1)
         this._reorderTabItemsOnShow.push(groupItem);
     }
   },
   
   // ----------
-  updateTabButton: function UI__updateTabButton(){
+  updateTabButton: function UI__updateTabButton() {
     let groupsNumber = gWindow.document.getElementById("tabviewGroupsNumber");
+    let exitButton = document.getElementById("exit-button");
     let numberOfGroups = GroupItems.groupItems.length;
+
     groupsNumber.setAttribute("groups", numberOfGroups);
+    exitButton.setAttribute("groups", numberOfGroups);
   },
 
   // ----------
   // Function: getClosestTab
   // Convenience function to get the next tab closest to the entered position
   getClosestTab: function UI_getClosestTab(tabCenter) {
     let cl = null;
     let clDist;
--- a/browser/themes/gnomestripe/browser/tabview/tabview.css
+++ b/browser/themes/gnomestripe/browser/tabview/tabview.css
@@ -509,17 +509,35 @@ html[dir=rtl] .iq-resizable-se {
 #exit-button {
   cursor: default;
   top: 0;
   right: 0;
   width: 16px;
   height: 16px;
   -moz-margin-end: 7px;
   margin-top: 7px;
-  background: -moz-image-rect(url(chrome://browser/skin/tabview/tabview.png), 0, 16, 16, 0) no-repeat scroll;
+  background-image: -moz-image-rect(url(chrome://browser/skin/tabview/tabview.png), 0, 80, 16, 64);
+  background-attachment: scroll;
+  background-repeat: no-repeat;
+}
+
+#exit-button[groups="0"] {
+  background-image: -moz-image-rect(url(chrome://browser/skin/tabview/tabview.png), 0, 16, 16, 0);
+}
+
+#exit-button[groups="1"] {
+  background-image: -moz-image-rect(url(chrome://browser/skin/tabview/tabview.png), 0, 32, 16, 16);
+}
+
+#exit-button[groups="2"] {
+  background-image: -moz-image-rect(url(chrome://browser/skin/tabview/tabview.png), 0, 48, 16, 32);
+}
+
+#exit-button[groups="3"] {
+  background-image: -moz-image-rect(url(chrome://browser/skin/tabview/tabview.png), 0, 64, 16, 48);
 }
 
 html[dir=rtl] #exit-button {
   right: auto;
   left: 0;
 }
 
 /* Search
--- a/browser/themes/pinstripe/browser/tabview/tabview.css
+++ b/browser/themes/pinstripe/browser/tabview/tabview.css
@@ -501,17 +501,35 @@ html[dir=rtl] .iq-resizable-se {
 #exit-button {
   cursor: default;
   top: 0;
   right: 1px;
   width: 20px;
   height: 20px;
   -moz-margin-end: 2px;
   margin-top: 2px;
-  background: -moz-image-rect(url(chrome://browser/skin/tabview/tabview.png), 0, 20, 20, 0) no-repeat scroll;
+  background-image: -moz-image-rect(url(chrome://browser/skin/tabview/tabview.png), 0, 100, 20, 80);
+  background-attachment: scroll;
+  background-repeat: no-repeat;
+}
+
+#exit-button[groups="0"] {
+  background-image: -moz-image-rect(url(chrome://browser/skin/tabview/tabview.png), 0, 20, 20, 0);
+}
+
+#exit-button[groups="1"] {
+  background-image: -moz-image-rect(url(chrome://browser/skin/tabview/tabview.png), 0, 40, 20, 20);
+}
+
+#exit-button[groups="2"] {
+  background-image: -moz-image-rect(url(chrome://browser/skin/tabview/tabview.png), 0, 60, 20, 40);
+}
+
+#exit-button[groups="3"] {
+  background-image: -moz-image-rect(url(chrome://browser/skin/tabview/tabview.png), 0, 80, 20, 60);
 }
 
 html[dir=rtl] #exit-button {
   right: auto;
   left: 0;
 }
 
 /* Search
--- a/browser/themes/winstripe/browser/tabview/tabview.css
+++ b/browser/themes/winstripe/browser/tabview/tabview.css
@@ -528,17 +528,35 @@ html[dir=rtl] .iq-resizable-se {
 #exit-button {
   cursor: default;
   top: 1px;
   right: 0;
   width: 18px;
   height: 18px;
   -moz-margin-end: 3px;
   margin-top: 3px;
-  background: -moz-image-rect(url(chrome://browser/skin/tabview/tabview.png), 0, 18, 18, 0) no-repeat scroll;
+  background-image: -moz-image-rect(url(chrome://browser/skin/tabview/tabview.png), 0, 90, 18, 72);
+  background-attachment: scroll;
+  background-repeat: no-repeat;
+}
+
+#exit-button[groups="0"] {
+  background-image: -moz-image-rect(url(chrome://browser/skin/tabview/tabview.png), 0, 18, 18, 0);
+}
+
+#exit-button[groups="1"] {
+  background-image: -moz-image-rect(url(chrome://browser/skin/tabview/tabview.png), 0, 36, 18, 18);
+}
+
+#exit-button[groups="2"] {
+  background-image: -moz-image-rect(url(chrome://browser/skin/tabview/tabview.png), 0, 54, 18, 36);
+}
+
+#exit-button[groups="3"] {
+  background-image: -moz-image-rect(url(chrome://browser/skin/tabview/tabview.png), 0, 72, 18, 54);
 }
 
 html[dir=rtl] #exit-button {
   right: auto;
   left: 0;
 }
 
 /* Search