From a1dc5c3de8b3ec6fabe018dfd78748b91ab144bb Mon Sep 17 00:00:00 2001
From: Mark Finkle <mfinkle@mozilla.com>
Date: Fri, 29 May 2009 01:58:30 -0400
Subject: [PATCH] Bug 494551: Use images for buttons in main chrome UI (widget
 part), r=gavin

---
 mobile/chrome/content/CanvasBrowser.js |  2 +-
 mobile/chrome/content/WidgetStack.js   | 13 ++++++++++
 mobile/chrome/content/browser-ui.js    | 32 +++++++++++++++++------
 mobile/chrome/content/browser.js       |  2 +-
 mobile/chrome/content/browser.xul      | 35 +++++++++++++-------------
 mobile/chrome/content/tabs.xml         |  8 +++---
 6 files changed, 60 insertions(+), 32 deletions(-)

diff --git a/mobile/chrome/content/CanvasBrowser.js b/mobile/chrome/content/CanvasBrowser.js
index 3fb1f612930c..c454ea9e0cfe 100644
--- a/mobile/chrome/content/CanvasBrowser.js
+++ b/mobile/chrome/content/CanvasBrowser.js
@@ -518,7 +518,7 @@ CanvasBrowser.prototype = {
     if (needToPanToTop) {
       ws.beginUpdateBatch();
       this._needToPanToTop = false;
-      ws.panTo(0, -60);
+      ws.panTo(0, -BrowserUI.toolbarH);
     }
     // Adjust the zoomLevel to fit the page contents in our window
     // width
diff --git a/mobile/chrome/content/WidgetStack.js b/mobile/chrome/content/WidgetStack.js
index d94a2836edb3..ba2309103b61 100644
--- a/mobile/chrome/content/WidgetStack.js
+++ b/mobile/chrome/content/WidgetStack.js
@@ -473,6 +473,19 @@ WidgetStack.prototype = {
     state.widget.setAttribute("top", y);
   },
 
+  // moveUnfrozenTo: move an unfrozen, pannable widget with id wid to x, y in
+  // the stack. should only be used on unfrozen widgets when a dynamic change
+  // in position needs to be made. we basically remove, adjust and re-add
+  // the widget
+  moveUnfrozenTo: function (wid, x, y) {
+    delete this._widgetState[wid];
+    let widget = document.getElementById(wid);
+    if (x) widget.setAttribute("left", x);
+    if (y) widget.setAttribute("top", y);
+    this._addNewWidget(widget);
+    this._updateWidgets();
+  },
+
   // we're relying on viewportBounds and viewingRect having the same origin
   get viewportVisibleRect () {
     let rect = this._viewportBounds.intersect(this._viewingRect);
diff --git a/mobile/chrome/content/browser-ui.js b/mobile/chrome/content/browser-ui.js
index 1f744024ab61..5a238319b812 100644
--- a/mobile/chrome/content/browser-ui.js
+++ b/mobile/chrome/content/browser-ui.js
@@ -189,15 +189,31 @@ var BrowserUI = {
     document.getElementById("panel-items").selectedPanel = document.getElementById(id);
   },
 
+  get toolbarH() {
+    if (!this._toolbarH) {
+      let toolbar = document.getElementById("toolbar-main");
+      this._toolbarH = toolbar.boxObject.height;
+    }
+    return this._toolbarH;
+  },
+
+  _initControls : false,
   sizeControls : function(windowW, windowH) {
     let toolbar = document.getElementById("toolbar-main");
-    if (!this._toolbarH)
-      this._toolbarH = toolbar.boxObject.height;
+    let tabs = document.getElementById("tabs-container");
+    let controls = document.getElementById("browser-controls");
+    if (!this._initControls) {
+      this._initControls = true;
+      ws.moveUnfrozenTo("toolbar-main", null, -this.toolbarH)
+      ws.moveUnfrozenTo("tabs-container", -tabs.boxObject.width, this.toolbarH)
+      ws.moveUnfrozenTo("browser-controls", null, this.toolbarH)
+    }
 
     toolbar.width = windowW;
 
     let popup = document.getElementById("popup_autocomplete");
-    popup.height = windowH - this._toolbarH;
+    popup.top = this.toolbarH;
+    popup.height = windowH - this.toolbarH;
     popup.width = windowW;
 
     // notification box
@@ -207,9 +223,9 @@ var BrowserUI = {
     document.getElementById("findbar-container").width = windowW;
 
     // sidebars
-    let sideBarHeight = windowH - this._toolbarH;
-    document.getElementById("browser-controls").height = sideBarHeight;
-    document.getElementById("tabs-container").height = sideBarHeight;
+    let sideBarHeight = windowH - this.toolbarH;
+    controls.height = sideBarHeight;
+    tabs.height = sideBarHeight;
 
     // bookmark editor
     let bmkeditor = document.getElementById("bookmark-container");
@@ -267,7 +283,7 @@ var BrowserUI = {
         break;
 
       case TOOLBARSTATE_LOADING:
-        ws.panTo(0, -60);
+        ws.panTo(0, -this.toolbarH);
         this.showToolbar();
         icons.setAttribute("mode", "loading");
         this._favicon.src = "";
@@ -411,7 +427,7 @@ var BrowserUI = {
 
   newTab : function newTab() {
     Browser.addTab("about:blank", true);
-    ws.panTo(0, -60);
+    ws.panTo(0, -this.toolbarH);
     this.showToolbar(URLBAR_EDIT);
   },
 
diff --git a/mobile/chrome/content/browser.js b/mobile/chrome/content/browser.js
index 70ccda81d3aa..a9a49f9f02a7 100644
--- a/mobile/chrome/content/browser.js
+++ b/mobile/chrome/content/browser.js
@@ -358,7 +358,7 @@ var Browser = {
     this._canvasBrowser.setCurrentBrowser(this.selectedBrowser, firstTab);
     document.getElementById("tabs").selectedItem = tab.content;
 
-    ws.panTo(0, -60, true);
+    ws.panTo(0, -BrowserUI.toolbarH);
 
     if (!firstTab) {
       let webProgress = this.selectedBrowser.webProgress;
diff --git a/mobile/chrome/content/browser.xul b/mobile/chrome/content/browser.xul
index cdc01ed815df..a9850776ddac 100644
--- a/mobile/chrome/content/browser.xul
+++ b/mobile/chrome/content/browser.xul
@@ -220,12 +220,12 @@
     <!-- end: Browser View -->
 
     <!-- begin: left bar -->
-    <vbox id="tabs-container" class="panel-dark" style="-moz-stack-sizing: ignore; width: 132px; height: 420px;"
-          left="-132" top="60"
+    <vbox id="tabs-container" class="panel-dark" style="-moz-stack-sizing: ignore;"
+          left="0" top="0"
           constraint="ignore-y,vp-relative">
       <richlistbox id="tabs" onselect="BrowserUI.selectTab(this.selectedItem);" onmouseup="BrowserUI.hideTabs();" onclosetab="BrowserUI.closeTab(this);"/>
       <hbox id="tabs-controls">
-        <toolbarbutton id="newtab-button" class="button-dark" command="cmd_newTab"/>
+        <toolbarbutton id="newtab-button" class="button-image" command="cmd_newTab"/>
       </hbox>
     </vbox>
     <!-- barrier to the right of the left sidebar -->
@@ -237,19 +237,18 @@
     <!-- barrier to the left of the right bar -->
     <spacer style="-moz-stack-sizing: ignore; width: 1px; height: 1px;" barriertype="vertical" size="30" left="800" constraint="vp-relative"/>
     <vbox id="browser-controls" class="panel-dark" style="-moz-stack-sizing: ignore;"
-          left="800" top="60"
-          width="68" height="420"
+          left="800" top="0"
           constraint="ignore-y,vp-relative">
-      <toolbarbutton id="tool-star" class="browser-control-button button-dark" command="cmd_star"/>
-      <toolbarbutton id="tool-back" class="browser-control-button button-dark" command="cmd_back"/>
-      <toolbarbutton id="tool-forward" class="browser-control-button button-dark" command="cmd_forward"/>
+      <toolbarbutton id="tool-star" class="browser-control-button button-image" command="cmd_star"/>
+      <toolbarbutton id="tool-back" class="browser-control-button button-image" command="cmd_back"/>
+      <toolbarbutton id="tool-forward" class="browser-control-button button-image" command="cmd_forward"/>
       <toolbarspring/>
-      <toolbarbutton id="tool-panel-open" class="page-button button-dark" command="cmd_panel"/>
+      <toolbarbutton id="tool-panel-open" class="page-button button-image" command="cmd_panel"/>
     </vbox>
     <!-- end: right bar -->
 
     <!-- begin: Main Toolbar -->
-    <toolbar id="toolbar-main" class="panel-dark" style="-moz-stack-sizing: ignore; width: 800px; height: 60px" top="-60" left="0" constraint="ignore-x,vp-relative">
+    <toolbar id="toolbar-main" class="panel-dark" style="-moz-stack-sizing: ignore; width: 800px;" top="0" left="0" constraint="ignore-x,vp-relative">
       <hbox id="urlbar-container" flex="1">
         <box id="identity-box"
              onclick="getIdentityHandler().handleIdentityButtonEvent(event);"
@@ -279,7 +278,7 @@
           <toolbarbutton id="tool-go" class="urlbar-cap-button" command="cmd_go"/>
         </hbox>
       </hbox>
-      <toolbarbutton id="tool-bookmarks" class="urlbar-button button-dark" command="cmd_bookmarks"/>
+      <toolbarbutton id="tool-bookmarks" class="urlbar-button button-image" command="cmd_bookmarks"/>
     </toolbar>
     <!-- end: Main Toolbar -->
 
@@ -299,10 +298,10 @@
     <hbox id="panel-container" hidden="true" class="panel-dark" style="-moz-stack-sizing: ignore;" top="0" left="0">
       <vbox id="panel-controls" oncommand="BrowserUI.switchPane(event.target.getAttribute('linkedpanel'));">
         <toolbarspring/>
-        <toolbarbutton id="tool-addons" type="radio" group="1" class="panel-button button-dark" linkedpanel="addons-container"/>
-        <toolbarbutton id="tool-downloads" type="radio" group="1" class="panel-button button-dark" linkedpanel="downloads-container"/>
-        <toolbarbutton id="tool-preferences" type="radio" group="1" checked="true" class="panel-button button-dark" linkedpanel="prefs-container"/>
-        <toolbarbutton id="tool-panel-close" type="check" checked="true" class="page-button button-dark" command="cmd_panel"/>
+        <toolbarbutton id="tool-addons" type="radio" group="1" class="panel-button button-image" linkedpanel="addons-container"/>
+        <toolbarbutton id="tool-downloads" type="radio" group="1" class="panel-button button-image" linkedpanel="downloads-container"/>
+        <toolbarbutton id="tool-preferences" type="radio" group="1" checked="true" class="panel-button button-image" linkedpanel="prefs-container"/>
+        <toolbarbutton id="tool-panel-close" type="check" checked="true" class="page-button button-image" command="cmd_panel"/>
       </vbox>
       <deck id="panel-items" selectedIndex="2" flex="1">
         <vbox id="addons-container" flex="1">
@@ -383,7 +382,7 @@
       </deck>
     </hbox>
 
-    <vbox id="popup_autocomplete" class="panel-dark" hidden="true" style="-moz-stack-sizing: ignore;" top="60" left="0" constraint="ignore-x,vp-relative">
+    <vbox id="popup_autocomplete" class="panel-dark" hidden="true" style="-moz-stack-sizing: ignore;" top="72" left="0" constraint="ignore-x,vp-relative">
       <arrowscrollbox id="autocomplete_navbuttons"
                       align="center"
                       flex="1"
@@ -398,7 +397,7 @@
         <description flex="1">&bookmarksHeader.label;</description>
         <toolbarbutton id="tool-bookmarks-manage" class="urlbar-button show-text button-dark" type="check" autocheck="true" label="&bookmarksManage.label;"
                        oncommand="BookmarkList.toggleManage();"/>
-        <toolbarbutton id="tool-bookmarks-close" class="urlbar-button button-dark" type="check" checked="true"
+        <toolbarbutton id="tool-bookmarks-close" class="urlbar-button button-image" type="check" checked="true"
                        oncommand="BookmarkList.close();"/>
       </hbox>
       <placelist id="bookmark-items" type="bookmarks" flex="1"
@@ -409,7 +408,7 @@
     <vbox id="folder-container" class="panel-dark" hidden="true" style="-moz-stack-sizing: ignore;" top="0" left="0">
       <hbox id="folder-header" style="height: 60px">
         <description flex="1">&foldersHeader.label;</description>
-        <toolbarbutton id="tool-folders-close" class="urlbar-button button-dark" type="check" checked="true"
+        <toolbarbutton id="tool-folders-close" class="urlbar-button button-image" type="check" checked="true"
                        oncommand="FolderPicker.close()"/>
       </hbox>
       <placetree id="folder-items" type="bookmarks" mode="folders" flex="1" onselect="FolderPicker.moveItem();"/>
diff --git a/mobile/chrome/content/tabs.xml b/mobile/chrome/content/tabs.xml
index 83937803964b..ad6d767a5053 100644
--- a/mobile/chrome/content/tabs.xml
+++ b/mobile/chrome/content/tabs.xml
@@ -11,8 +11,8 @@
            extends="chrome://global/content/bindings/richlistbox.xml#richlistitem">
     <content>
       <xul:stack anonid="page" class="documenttab-container" flex="1">
-        <html:canvas anonid="canvas" class="documenttab-canvas" width="80" height="60"/>
-        <xul:vbox align="start">
+        <html:canvas anonid="canvas" class="documenttab-canvas" left="8" width="100" height="75"/>
+        <xul:vbox left="0" top="28">
           <xul:image anonid="close" class="documenttab-close"/>
         </xul:vbox>
       </xul:stack>
@@ -30,8 +30,8 @@
         <parameter name="srcCanvas"/>
         <body>
           <![CDATA[
-            const tabWidth = 80;
-            const tabHeight = 60;
+            const tabWidth = 100;
+            const tabHeight = 75;
             let canvas = document.getAnonymousElementByAttribute(this, "anonid", "canvas");
 
             let domWin = browser.contentWindow;