bug 452074: re-theme fennec UI, r=mfinkle, images by Madhava Enros <madhava@mozilla.com> and Sean Martell <sean@braincreations.com>

mobile/chrome/content/browser-ui.js

@@ -172,7 +172,7 @@ var BrowserUI = {
 
   _dragData :  { dragging : false, sY : 0, sTop : 0 },
 
-  _scrollToolbar : function(aEvent) {
+  _scrollToolbar : function bui_scrollToolbar(aEvent) {
     if (this._dragData.dragging && Browser.content.scrollY == 0) {
       let toolbar = document.getElementById("toolbar-main");
       let browser = document.getElementById("browser");
@@ -685,6 +685,7 @@ var BrowserUI = {
       case "cmd_closeTab":
       case "cmd_addons":
       case "cmd_actions":
+      case "cmd_prefs":
         isSupported = true;
         break;
       default:
@@ -765,6 +766,9 @@ var BrowserUI = {
       case "cmd_actions":
         this.show(PANELMODE_ADDONS);
         break;
+      case "cmd_prefs":
+        //XXX
+        break;
     }
   }
 };

mobile/chrome/content/browser.xul

@@ -194,26 +194,28 @@
             <image id="urlbar-favicon" src=""/>
           </stack>
         </box>
-        <description id="urlbar-caption" crop="end" flex="1"/>
-        <textbox id="urlbar-edit"
-                 type="autocomplete"
-                 autocompletesearch="history"
-                 enablehistory="false"
-                 maxrows="6"
-                 completeselectedindex="true"
-                 minresultsforpopup="0"
-                 flex="1"
-                 hidden="true"
-                 autocompletepopup="popup_autocomplete"
-                 ontextentered="BrowserUI.goToURI();"
-                 clickSelectsAll="true"/>
+        <hbox id="urlbar-editarea" flex="1">
+          <description id="urlbar-caption" crop="end" flex="1"/>
+          <textbox id="urlbar-edit"
+                   type="autocomplete"
+                   autocompletesearch="history"
+                   enablehistory="false"
+                   maxrows="6"
+                   completeselectedindex="true"
+                   minresultsforpopup="0"
+                   flex="1"
+                   hidden="true"
+                   autocompletepopup="popup_autocomplete"
+                   ontextentered="BrowserUI.goToURI();"
+                   clickSelectsAll="true"/>
+        </hbox>
         <hbox id="urlbar-icons">
           <toolbarbutton id="tool-reload" class="urlbar-icon-button" command="cmd_reload"/>
           <toolbarbutton id="tool-stop" class="urlbar-icon-button" command="cmd_stop"/>
           <toolbarbutton id="tool-go" class="urlbar-icon-button" command="cmd_go"/>
         </hbox>
       </hbox>
-      <toolbarbutton id="tool-bookmarks" class="browser-control-button" command="cmd_bookmarks"/>
+      <toolbarbutton id="tool-bookmarks" class="urlbar-icon-button" command="cmd_bookmarks"/>
     </toolbar>
 
     <vbox id="browser-controls" style="-moz-stack-sizing: ignore; width: 80px;" top="60" left="0">
@@ -221,11 +223,15 @@
       <toolbarbutton id="tool-forward" class="browser-control-button" command="cmd_forward"/>
       <toolbarbutton id="tool-star" class="browser-control-button" command="cmd_star"/>
       <toolbarbutton id="tool-actions" class="browser-control-button" command="cmd_actions"/>
+      <toolbarbutton id="tool-prefs" class="browser-control-button" command="cmd_prefs"/>
     </vbox>
 
     <vbox id="tab-list-container" style="-moz-stack-sizing: ignore;" top="60" left="0">
       <richlistbox id="tab-list" onselect="BrowserUI.selectTab(this.selectedItem);"/>
-      <button id="newtab-button" label="+" command="cmd_newTab"/>
+      <hbox>
+        <toolbarbutton id="newtab-button" command="cmd_newTab"/>
+        <toolbarbutton id="retrievetab-button" command=""/>
+      </hbox>
     </vbox>
 
     <vbox id="urllist-container" hidden="true" style="-moz-stack-sizing: ignore;" top="60" left="0">

mobile/chrome/jar.mn

@@ -35,6 +35,20 @@ classic.jar:
   images/toolbar.png                   (skin/images/toolbar.png)
   images/mono-toolbar.png              (skin/images/mono-toolbar.png)
   images/toolbar-background.png        (skin/images/toolbar-background.png)
+  images/addressbar_endcap_r_off.png   (skin/images/addressbar_endcap_r_off.png)
+  images/addressbar_endcap_l_off.png   (skin/images/addressbar_endcap_l_off.png)
+  images/addressbar_endcap_r_on.png    (skin/images/addressbar_endcap_r_on.png)
+  images/addressbar_endcap_l_on.png    (skin/images/addressbar_endcap_l_on.png)
+  images/addressbar_middle.png         (skin/images/addressbar_middle.png)
+  images/titlebar.png                  (skin/images/titlebar.png)
+  images/left_sidebar_top.png          (skin/images/left_sidebar_top.png)
+  images/left_sidebar_middle.png       (skin/images/left_sidebar_middle.png)
+  images/left_sidebar_bottom.png       (skin/images/left_sidebar_bottom.png)
+  images/left_buttons.png              (skin/images/left_buttons.png)
+  images/right_sidebar_top.png         (skin/images/right_sidebar_top.png)
+  images/right_sidebar_middle.png      (skin/images/right_sidebar_middle.png)
+  images/right_sidebar_bottom.png      (skin/images/right_sidebar_bottom.png)
+  images/right_buttons.png             (skin/images/right_buttons.png)
 
 @AB_CD@.jar:
 % locale browser @AB_CD@ %

mobile/chrome/skin/browser.css

@@ -92,68 +92,108 @@ toolbarbutton[open="true"] {
   background-image: url("chrome://browser/skin/images/toolbar-background.png");
   background-repeat: repeat-x;
   background-position: top left;
-  padding: 8px;
+  padding: 4px 12px;
   border: none;
 }
 
 toolbarbutton.urlbar-icon-button {
-  list-style-image: url("chrome://browser/skin/images/toolbar.png");
+  list-style-image: url("chrome://browser/skin/images/titlebar.png");
+  -moz-padding-start: 24px !important;
 }
 
 #tool-reload {
-  -moz-image-region: rect(6px 302px 32px 275px);
+  -moz-image-region: rect(0px 222px 24px 198px);
 }
 
 #tool-stop {
-  -moz-image-region: rect(7px 336px 32px 311px);
+  -moz-image-region: rect(0px 246px 24px 222px);
 }
 
 #tool-go {
-  -moz-image-region: rect(7px 368px 32px 346px);
+  -moz-image-region: rect(0px 198px 24px 174px);
+}
+
+#tool-bookmarks {
+  -moz-image-region: rect(0px 174px 48px 126px);
+}
+
+#tool-bookmarks:hover:active {
+  -moz-image-region: rect(48px 174px 96px 126px);
 }
 
 #browser-controls {
-  background-color: rgb(123,125,123);
+  background: url("images/right_sidebar_middle.png") transparent top left repeat-y;
 }
 
 toolbarbutton.browser-control-button {
-  list-style-image: url("chrome://browser/skin/images/toolbar.png");
+  list-style-image: url("chrome://browser/skin/images/right_buttons.png");
 }
 
 #tool-star {
-  -moz-image-region: rect(2px 151px 39px 113px);
+  -moz-image-region: rect(0px 48px 48px 0px);
+}
+
+#tool-star:hover:active {
+  -moz-image-region: rect(0px 96px 48px 48px);
 }
 
 #tool-star[starred="true"] {
-  -moz-image-region: rect(121px 151px 158px 113px);
+  /*XXX no image yet
+  -moz-image-region: rect(0px 144px 48px 96px);
+  */
+  -moz-image-region: rect(0px 48px 48px 0px);
 }
 
 #tool-back {
-  -moz-image-region: rect(0px 58px 58px 0px);
+  -moz-image-region: rect(48px 64px 112px 0px);
+  padding-bottom: 0px !important;
+}
+
+#tool-back:hover:active:not([disabled="true")]) {
+  -moz-image-region: rect(48px 128px 112px 64px);
   padding-bottom: 0px !important;
 }
 
 #tool-back[disabled="true"] {
-  -moz-image-region: rect(58px 58px 116px 0px);
+  -moz-image-region: rect(48px 64px 112px 0px);
+  /*XXX no image yet
+  -moz-image-region: rect(48px 192px 112px 128px);
+  */
   padding-bottom: 0px !important;
 }
 
 #tool-forward {
-  -moz-image-region: rect(0px 108px 37px 60px);
+  -moz-image-region: rect(112px 48px 160px 0px);
+  padding-top: 0px !important;
+}
+
+#tool-forward:hover:active:not([disabled="true")]) {
+  -moz-image-region: rect(112px 96px 160px 48px);
   padding-top: 0px !important;
 }
 
 #tool-forward[disabled="true"] {
-  -moz-image-region: rect(58px 108px 95px 60px);
+  -moz-image-region: rect(112px 48px 160px 0px);
+/*XXX no image yet
+  -moz-image-region: rect(112px 144px 160px 96px);
+*/
   padding-top: 0px !important;
 }
 
-#tool-bookmarks {
-  -moz-image-region: rect(1px 190px 37px 160px);
+#tool-actions {
+  -moz-image-region: rect(160px 48px 208px 0px);
 }
 
-#tool-actions {
-  -moz-image-region: rect(0px 242px 45px 197px);
+#tool-actions:hover:active {
+  -moz-image-region: rect(160px 96px 208px 48px);
+}
+
+#tool-prefs {
+  -moz-image-region: rect(208px 48px 256px 0px);
+}
+
+#tool-prefs:hover:active {
+  -moz-image-region: rect(208px 96px 256px 48px);
 }
 
 .tool-search {
@@ -177,18 +217,35 @@ toolbarbutton.browser-control-button {
 }
 
 #urlbar-container {
-  background-color: rgba(207,207,207,0.9);
-  border: 1px solid rgba(255,255,255,0.9);
-  -moz-border-radius: 10px;
+  background-color: transparent;
   color: #000;
-  padding: 2px !important;
   -moz-box-orient: horizontal;
   -moz-box-align: center;
 }
 
-#toolbar-main[mode="edit"] > #urlbar-container {
-  background-color: rgba(247,247,247,0.9);
-  border-color: rgba(0,0,0,0.9);
+#identity-box {
+  min-height: 49px;
+  min-width: 65px;
+  background: url("images/addressbar_endcap_l_off.png") transparent top right no-repeat;
+}
+
+#identity-box:hover:active {
+  background: url("images/addressbar_endcap_l_on.png") transparent top right no-repeat;
+}
+
+/* favicon images are 16x16 */
+#urlbar-image-stack {
+  max-width: 24px;
+  max-height: 24px;
+  min-width: 24px;
+  min-height: 24px;
+  margin: 12px 2px 2px 12px;
+}
+
+#urlbar-editarea {
+  min-height: 49px;
+  -moz-box-align: center;
+  background: url("images/addressbar_middle.png") transparent top left repeat-x;
 }
 
 #urlbar-caption {
@@ -199,22 +256,20 @@ toolbarbutton.browser-control-button {
   -moz-appearance: none !important;
   padding: 0px !important;
   border: none !important;
-  background-color: rgba(247,247,247,0.9);
-}
-
-/* favicon images are 16x16 */
-#urlbar-image-stack {
-  width: 36px;
-  height: 36px;
-  margin: 2px 2px 2px 12px;
+  background-color: transparent;
 }
 
 /* urlbar toolbuttons images are 36x36 */
 #urlbar-icons {
-  height: 36px;
+  min-height: 49px;
+  min-width: 65px;
   -moz-box-align: center;
+  background: url("images/addressbar_endcap_r_off.png") transparent top left no-repeat;
 }
 
+#urlbar-icons:hover:active {
+  background: url("images/addressbar_endcap_r_on.png") transparent top left no-repeat;
+}
 
 /* URL List */
 #urllist-container {
@@ -250,14 +305,16 @@ toolbarbutton.browser-control-button {
 /* tab list */
 
 #tab-list-container {
-  background-color: rgb(123,125,123);
+  background: url("images/left_sidebar_middle.png") transparent top left repeat-y;
+  min-width: 132px;
 }
 
 #tab-list {
   -moz-appearance: none;
   margin: 0;
   padding: 4px;
-  background-color: rgb(123,125,123);
+  -moz-padding-end: 12px;
+  background-color: transparent;
 }
 
 richlistitem[type="documenttab"] {
@@ -273,8 +330,23 @@ richlistitem[type="documenttab"][selected="true"] {
 }
 
 #newtab-button {
-  -moz-appearance: none;
-  background-color: rgba(207,207,207,0.9);
+  list-style-image: url("images/left_buttons.png");
+  -moz-image-region: rect(0px 48px 48px 0px);
+}
+
+#newtab-button:hover:active {
+  list-style-image: url("images/left_buttons.png");
+  -moz-image-region: rect(0px 96px 48px 48px);
+}
+
+#retrievetab-button {
+  list-style-image: url("images/left_buttons.png");
+  -moz-image-region: rect(48px 48px 96px 0px);
+}
+
+#retrievetab-button:hover:active {
+  list-style-image: url("images/left_buttons.png");
+  -moz-image-region: rect(48px 96px 96px 48px);
 }
 
 /* autocomplete */