Bug 337292: rework search bar so that flex doesn't break the background on Mac, patch by Joe Hughes, r=gavin, r+a181=mconnor

git-svn-id: svn://10.0.0.236/branches/MOZILLA_1_8_BRANCH@196287 18797224-902f-48f8-a5cc-f745e15eee43

mozilla/browser/components/search/content/search.xml

@@ -57,36 +57,43 @@
   <binding id="searchbar"
            extends="chrome://browser/content/search/search.xml#searchbar-base">
     <content>
-      <xul:stringbundle src="chrome://browser/locale/search.properties"/>
-      <xul:textbox class="searchbar-textbox"
-                   type="autocomplete"
-                   flex="1"
-                   autocompletepopup="PopupAutoComplete"
-                   autocompletesearch="form-history"
-                   autocompletesearchparam="searchbar-history"
-                   completeselectedindex="true"
-                   tabscrolling="true"
-                   xbl:inherits="disableautocomplete,searchengine,src">
-        <xul:image align="center" class="searchbar-engine-image" xbl:inherits="src"/>
-        <xul:hbox class="search-go-button-container"> 
+      <xul:stringbundle src="chrome://browser/locale/search.properties"
+                        anonid="searchbar-stringbundle"/>
+      <xul:box class="searchbar-left" flex="1">
+        <xul:box class="searchbar-right" flex="1">
+          <xul:textbox class="searchbar-textbox"
+                       anonid="searchbar-textbox"
+                       type="autocomplete"
+                       flex="1"
+                       autocompletepopup="PopupAutoComplete"
+                       autocompletesearch="form-history"
+                       autocompletesearchparam="searchbar-history"
+                       completeselectedindex="true"
+                       tabscrolling="true"
+                       xbl:inherits="disableautocomplete,searchengine,src">
+            <xul:image align="center" class="searchbar-engine-image" 
+                       xbl:inherits="src"/>
+            <xul:hbox class="search-go-button-container"> 
 # XXX We'd like to add a context="_child" property to this toolbarbutton, but doing
 # so causes the context menu to show up for the textbox too, and subsequently crashes
 # the app on shutdown.  See bug 336662.
-          <xul:toolbarbutton class="search-go-button"
-                             type="menu-button"
-                             anonid="searchbar-dropmarker"
-                             xbl:inherits="src">
-            <xul:menupopup anonid="searchbar-popup"
-                           class="searchbar-popup"
-                           position="after_end">
-              <xul:menuseparator/>
-              <xul:menuitem anonid="open-engine-manager"
-                            label="&cmd_engineManager.label;"
-                            accesskey="&cmd_engineManager.accesskey;"/>
-            </xul:menupopup>
-          </xul:toolbarbutton>
-        </xul:hbox>
-      </xul:textbox>
+              <xul:toolbarbutton class="search-go-button"
+                                 type="menu-button"
+                                 anonid="searchbar-dropmarker"
+                                 xbl:inherits="src">
+                <xul:menupopup anonid="searchbar-popup"
+                               class="searchbar-popup"
+                               position="after_end">
+                  <xul:menuseparator/>
+                  <xul:menuitem anonid="open-engine-manager"
+                                label="&cmd_engineManager.label;"
+                                accesskey="&cmd_engineManager.accesskey;"/>
+                </xul:menupopup>
+              </xul:toolbarbutton>
+            </xul:hbox>
+          </xul:textbox>
+        </xul:box>
+      </xul:box>
     </content>
     <implementation implements="nsIObserver">
 
@@ -124,8 +131,8 @@
         this._textbox.mController.input = null;
       ]]></destructor>
 
-      <field name="_stringBundle">document.getAnonymousNodes(this)[0];</field>
-      <field name="_textbox">document.getAnonymousNodes(this)[1];</field>
+      <field name="_stringBundle">document.getAnonymousElementByAttribute(this, "anonid", "searchbar-stringbundle");</field>
+      <field name="_textbox">document.getAnonymousElementByAttribute(this, "anonid", "searchbar-textbox");</field>
       <field name="_popup">null</field>
       <field name="_ss">null</field>
       <field name="_engines">null</field>
@@ -400,7 +407,7 @@
           }
           
           var newTab = textBox._prefBranch.getBoolPref("browser.search.openintab");
-          textBox.parentNode.doSearch(textValue, ((aEvent && aEvent.altKey) ^ newTab));
+          this.doSearch(textValue, ((aEvent && aEvent.altKey) ^ newTab));
         ]]></body>
       </method>
 
@@ -449,7 +456,7 @@
       extends="chrome://global/content/bindings/autocomplete.xml#autocomplete">
     <implementation>
       <constructor><![CDATA[
-        if (this.parentNode.parentNode.parentNode.localName ==
+        if (this._getParentSearchbar().parentNode.parentNode.localName ==
             "toolbarpaletteitem")
           return;
         setTimeout(function(a) { a.initialize(); }, 0, this);
@@ -463,12 +470,13 @@
         } catch (ex) { }
       ]]></destructor>
 
-      <field name="_stringBundle">this.parentNode._stringBundle</field>
+      <field name="_stringBundle"/>
       <field name="_formHistSvc"/>
       <field name="_prefBranch"/>
 
       <method name="initialize">
         <body><![CDATA[
+          this._stringBundle = this._getParentSearchbar()._stringBundle;
           this._formHistSvc =
                    Components.classes["@mozilla.org/satchel/form-history;1"]
                              .getService(Components.interfaces.nsIFormHistory2);
@@ -513,12 +521,18 @@
         </body>
       </method>
 
-      <!-- Returns the main searchbox element.  This is abstracted in
-           case the structure of this control gets more complicated.
+      <!-- Returns the closest parent that is a searchbar element.
+           If no searchbar element is found, returns null.
       -->
       <method name="_getParentSearchbar">
         <body><![CDATA[
-          return this.parentNode;
+          var searchbar = this.parentNode;
+          while (searchbar) {
+            if (searchbar.nodeName == "searchbar")
+              break;
+            searchbar = searchbar.parentNode;
+          }
+          return searchbar;
         ]]></body>
       </method>
 
@@ -601,11 +615,11 @@
     <handlers>
       <handler event="keypress" keycode="vk_up" modifiers="accel"
                phase="capturing"
-               action="this.parentNode.selectEngine(event, false);"/>
+               action="this._getParentSearchbar().selectEngine(event, false);"/>
 
       <handler event="keypress" keycode="vk_down" modifiers="accel"
                phase="capturing"
-               action="this.parentNode.selectEngine(event, true);"/>
+               action="this._getParentSearchbar().selectEngine(event, true);"/>
 
       <handler event="keypress" keycode="vk_down" modifiers="alt"
                phase="capturing"

mozilla/browser/themes/pinstripe/browser/jar.mn

@@ -20,7 +20,9 @@ classic.jar:
   skin/classic/browser/pageInfo.css
   skin/classic/browser/Popup-blocked.png
   skin/classic/browser/searchbar.css
-  skin/classic/browser/search-bar-background.png
+  skin/classic/browser/search-bar-background-left.png
+  skin/classic/browser/search-bar-background-mid.png
+  skin/classic/browser/search-bar-background-right.png
   skin/classic/browser/Search-bar.png
   skin/classic/browser/Search.png
   skin/classic/browser/Search-add-engines.png

mozilla/browser/themes/pinstripe/browser/searchbar.css

@@ -1,6 +1,7 @@
 .searchbar-textbox {
-  background: url("chrome://browser/skin/search-bar-background.png") no-repeat;
-  margin: 4px 3px 4px 3px;
+  background: url("chrome://browser/skin/search-bar-background-mid.png") repeat-x;
+  
+  margin: 4px 11px 4px 11px;
   -moz-appearance: none;
   font: icon;
   height: 22px !important;
@@ -8,10 +9,20 @@
   border: none !important;
 }
 
+.searchbar-left {
+  background: url("chrome://browser/skin/search-bar-background-left.png") no-repeat left center;
+  margin-left: 3px;
+}
+
+.searchbar-right {
+  background: url("chrome://browser/skin/search-bar-background-right.png") no-repeat right center;
+  margin-right: 3px;
+}
+
 .searchbar-engine-image {
   width: 16px;
   height: 16px;
-  margin: 3px 3px 3px 10px;
+  margin: 3px 3px 3px 0px;
   list-style-image: url("chrome://browser/skin/Search-bar.png");
 }
 
@@ -21,9 +32,9 @@
 
 .autocomplete-textbox-container {
   border: none;
-  padding-right: 6px;
+  padding-right: 0px;
   height: 21px !important;
-  margin: 0px;
+  margin: 0px -5px 0px -1px;
 }
 
 .search-go-button {