Bug 387646 - Endcap cleanup. r+a=mconnor

browser/base/content/browser.xul

@@ -216,85 +216,65 @@
       <toolbaritem id="urlbar-container" align="center" flex="400" persist="width"
                    title="&locationItem.title;" class="chromeclass-location">
         <hbox id="urlbar-button-box" flex="1">
-            <textbox id="urlbar" flex="1"
-                     chromedir="&locale.dir;"
-                     type="autocomplete"
-                     autocompletesearch="history" 
-                     autocompletepopup="PopupAutoComplete"
-                     completeselectedindex="true"
-                     tabscrolling="true"
-                     showcommentcolumn="true"
-                     showimagecolumn="true" 
-                     enablehistory="true"
-                     maxrows="10"
-                     newlines="stripsurroundingwhitespace"
-                     oninput="gBrowser.userTypedValue = this.value"
-                     ontextentered="return handleURLBarCommand(param);"
-                     ontextreverted="return handleURLBarRevert();">
-              <deck id="page-proxy-deck" onclick="PageProxyClickHandler(event);">
-                <image id="page-proxy-button"
-                        ondraggesture="PageProxyDragGesture(event);"
-                        tooltiptext="&proxyIcon.tooltip;"/>
-                <image id="page-proxy-favicon" validate="never"
-                        ondraggesture="PageProxyDragGesture(event);"
-                        onload="this.parentNode.selectedIndex = 1;
-                                event.stopPropagation();"
-                        onerror="gBrowser.addToMissedIconCache(this.src);
-                                 this.removeAttribute('src');
-                                 this.parentNode.selectedIndex = 0;"
-                        tooltiptext="&proxyIcon.tooltip;"/>
-              </deck>
-              <hbox id="urlbar-icons">
-                <button type="menu"
-                        style="-moz-user-focus: none"
-                        class="plain"
-                        id="feed-button"
-                        chromedir="&locale.dir;"
-                        onclick="return FeedHandler.onFeedButtonClick(event);">
-                  <menupopup position="after_end"
-                             onpopupshowing="return FeedHandler.buildFeedList(this);"
-                             oncommand="return FeedHandler.subscribeToFeed(null, event);"
-                             onclick="checkForMiddleClick(this, event);"/>
-                </button>
-                <image id="lock-icon" onclick="if (event.button == 0) displaySecurityInfo(); event.stopPropagation();"/>
+          <textbox id="urlbar" flex="1"
+                   chromedir="&locale.dir;"
+                   type="autocomplete"
+                   autocompletesearch="history" 
+                   autocompletepopup="PopupAutoComplete"
+                   completeselectedindex="true"
+                   tabscrolling="true"
+                   showcommentcolumn="true"
+                   showimagecolumn="true" 
+                   enablehistory="true"
+                   maxrows="10"
+                   newlines="stripsurroundingwhitespace"
+                   oninput="gBrowser.userTypedValue = this.value"
+                   ontextentered="return handleURLBarCommand(param);"
+                   ontextreverted="return handleURLBarRevert();">
+            <deck id="page-proxy-deck" onclick="PageProxyClickHandler(event);">
+              <image id="page-proxy-button"
+                     ondraggesture="PageProxyDragGesture(event);"
+                     tooltiptext="&proxyIcon.tooltip;"/>
+              <image id="page-proxy-favicon" validate="never"
+                     ondraggesture="PageProxyDragGesture(event);"
+                     onload="this.parentNode.selectedIndex = 1;
+                             event.stopPropagation();"
+                     onerror="gBrowser.addToMissedIconCache(this.src);
+                              this.removeAttribute('src');
+                              this.parentNode.selectedIndex = 0;"
+                     tooltiptext="&proxyIcon.tooltip;"/>
+            </deck>
+            <hbox id="urlbar-icons">
+              <button type="menu"
+                      style="-moz-user-focus: none"
+                      class="plain"
+                      id="feed-button"
+                      chromedir="&locale.dir;"
+                      onclick="return FeedHandler.onFeedButtonClick(event);">
+                <menupopup position="after_end"
+                           onpopupshowing="return FeedHandler.buildFeedList(this);"
+                           oncommand="return FeedHandler.subscribeToFeed(null, event);"
+                           onclick="checkForMiddleClick(this, event);"/>
+              </button>
+              <image id="lock-icon" onclick="if (event.button == 0) displaySecurityInfo(); event.stopPropagation();"/>
 #ifdef MOZ_SAFE_BROWSING
-                <image id="safebrowsing-urlbar-icon" tooltiptext="&safeb.urlbaricon.tooltip;"
-                       level="safe"
-                       onclick="goDoCommand('safebrowsing-show-warning')" />
+              <image id="safebrowsing-urlbar-icon" tooltiptext="&safeb.urlbaricon.tooltip;"
+                     level="safe"
+                     onclick="goDoCommand('safebrowsing-show-warning')"/>
 #endif
-              </hbox>
-            </textbox>
-            <stack id="go-button-stack">
-              <vbox>
-                <!-- These image segments allow the button to stretch nicely
-                     in larger urlbars. -->
-                <image id="go-button-top"
-                       class="go-button-background"
-                       chromedir="&locale.dir;" />
-                <image flex="1"
-                       id="go-button-mid-top"
-                       class="go-button-background"
-                       chromedir="&locale.dir;" />
-                <image flex="1"
-                       id="go-button-mid-bottom"
-                      class="go-button-background"
-                      chromedir="&locale.dir;" />
-                <image id="go-button-bottom"
-                       class="go-button-background"
-                       chromedir="&locale.dir;" />
-              </vbox>
-							
-              <hbox>
-                <toolbarbutton id="star-button" onclick="if (event.button == 0) PlacesStarButton.onClick(event);"/>
-                <toolbarbutton id="go-button"
-                               chromedir="&locale.dir;"
-                               label="&goEndCap.label;"
-                               onclick="handleURLBarCommand(event);"
-                               ondragover="nsDragAndDrop.dragOver(event, goButtonObserver);"
-                               ondragdrop="nsDragAndDrop.drop(event, goButtonObserver);"
-                               ondragexit="nsDragAndDrop.dragExit(event, goButtonObserver);"
-                               tooltiptext="&goEndCap.tooltip;"/>
-              </hbox>
+            </hbox>
+          </textbox>
+          <stack id="go-button-stack">
+            <hbox>
+              <toolbarbutton id="star-button" onclick="if (event.button == 0) PlacesStarButton.onClick(event);"/>
+              <toolbarbutton id="go-button" chromedir="&locale.dir;"
+                             label="&goEndCap.label;"
+                             onclick="handleURLBarCommand(event);"
+                             ondragover="nsDragAndDrop.dragOver(event, goButtonObserver);"
+                             ondragdrop="nsDragAndDrop.drop(event, goButtonObserver);"
+                             ondragexit="nsDragAndDrop.dragExit(event, goButtonObserver);"
+                             tooltiptext="&goEndCap.tooltip;"/>
+            </hbox>
           </stack>
         </hbox>
       </toolbaritem>

browser/components/search/content/search.xml

@@ -102,21 +102,8 @@
           </xul:textbox>
         </xul:hbox>
 
-        <xul:stack class="search-go-button-stack">
-          <xul:vbox>
-            <!-- These image segments allow the button's gradient to stretch
-                 nicely in larger urlbars. -->
-            <xul:image class="search-go-button-top search-go-button-bkgnd"
-                       chromedir="&locale.dir;"/>
-            <xul:image flex="1"
-                       class="search-go-button-mid-top search-go-button-bkgnd"
-                       chromedir="&locale.dir;"/>
-            <xul:image flex="1"
-                       class="search-go-button-mid-bottom search-go-button-bkgnd"
-                       chromedir="&locale.dir;"/>
-            <xul:image class="search-go-button-bottom search-go-button-bkgnd"
-                       chromedir="&locale.dir;"/>
-          </xul:vbox>
+        <xul:stack class="search-go-button-stack endcap">
+          <xul:box class="endcap-box" chromedir="&locale.dir;"/>
           <xul:toolbarbutton class="search-go-button"
                              anonid="search-go-button"
                              chromedir="&locale.dir;"

browser/themes/winstripe/browser/browser.css

@@ -1001,6 +1001,40 @@ statusbarpanel#statusbar-display {
   border-top: 1px solid GrayText;
 }
 
+/* ::::: endcaps ::::: */
+
+.endcap {
+  padding: 2px 0px 2px 0px;
+}
+
+.endcap-box {
+  -moz-border-top-colors: #96969D;
+  -moz-border-right-colors: #96969D;
+  -moz-border-bottom-colors: #96969D;
+  -moz-border-radius: 0 4px 4px 0;
+  border: 1px solid;
+  border-left: none;
+  background-image: url("chrome://browser/skin/endcap-bkgnd.png");
+  background-repeat: repeat-x;
+  background-position: 50% 50%;
+}
+
+toolbar:not([mode="text"]) .endcap:hover > .endcap-box {
+  background-image: url("chrome://browser/skin/endcap-bkgnd-hover.png");
+}
+
+.endcap-box[chromedir="rtl"] {
+  -moz-border-radius: 4px 0 0 4px;
+  -moz-border-left-colors: #96969D;
+  border-left: 1px solid;
+  border-right: none;
+}
+
+toolbar[mode="text"] .endcap-box {
+  border: none;
+  background-image: none;
+}
+
 /* ::::: go button ::::: */
 
 /* In text icon mode, the Go button scales independently of the location bar,
@@ -1014,31 +1048,49 @@ toolbar[mode="text"] #urlbar-button-box {
   -moz-box-align: center;
 }
 
-toolbar[mode="text"] #go-button {
-  -moz-margin-start: 5px;
+#go-button {
+  -moz-appearance: none;
+  list-style-image: url("chrome://browser/skin/Go-arrow.png");
+  -moz-image-region: rect(0px 25px 22px 0px);
+  border: none;
+  padding: 0;
 }
 
-toolbar[mode="text"] #go-button,
-toolbar[mode="text"] #go-button-stack .go-button-background {
-  list-style-image: none;
-  background-image: none;
+#go-button[chromedir="rtl"] {
+  list-style-image: url("chrome://browser/skin/Go-arrow-rtl.png");
+}
+
+toolbar[mode="text"] #go-button {
+  -moz-appearance: toolbarbutton;
+  -moz-margin-start: 5px;
+  padding: 3px;
 }
 
 toolbar[mode="text"] #go-button-stack {
   padding: 0;
 }
 
-#go-button-stack {
-  padding: 2px 0px 2px 0px;
+#go-button > .toolbarbutton-icon {
+  margin: 0;
+}
+
+#go-button:hover {
+  -moz-image-region: rect(0px 50px 22px 25px);
+}
+
+#go-button:hover:active {
+  -moz-image-region: rect(0px 100px 22px 75px);
+}
+
+#go-button[disabled="true"] {
+  -moz-image-region: rect(0px 75px 22px 50px);
 }
 
 toolbar:not([mode="text"]) #go-button,
-#palette-box #go-button {
-  -moz-appearance: none;
-  list-style-image: url("chrome://browser/skin/Go-arrow.png");
-  -moz-image-region: rect(0px 25px 22px 0px);
-  border: none;
-  padding: 0;
+toolbar:not([mode="text"]) .search-go-button,
+toolbarpaletteitem:not([place="toolbar"]) #go-button,
+toolbarpaletteitem:not([place="toolbar"]) .search-go-button {
+  -moz-binding: url(chrome://global/content/bindings/toolbarbutton.xml#toolbarbutton-image);
 }
 
 /* star button */
@@ -1055,129 +1107,12 @@ toolbar:not([mode="text"]) #star-button[starred="true"],
   list-style-image: url("chrome://browser/skin/places/pageStarred.png");
 }
 
-#go-button[chromedir="rtl"] {
-  list-style-image: url("chrome://browser/skin/Go-arrow-rtl.png");
-}
-
-#go-button-top {
-  list-style-image: url("chrome://browser/skin/Go-bkgnd.png");
-  -moz-image-region: rect(0px, 25px, 10px, 0px);
-  height: 10px;
-}
-
-/* GTK does not stretch image regions properly, so use background
-   images instead.  See bugs 351764 and 254659. */
-#go-button-mid-top {
-  background-image: url("chrome://browser/skin/Go-mid-top.png");
-}
-
-#go-button-mid-bottom {
-  background-image: url("chrome://browser/skin/Go-mid-bottom.png");
-}
-
-#go-button-bottom {
-  list-style-image: url("chrome://browser/skin/Go-bkgnd.png");
-  -moz-image-region: rect(12px, 25px, 22px, 0px);
-  height: 10px;
-}
-
-#go-button-top[chromedir="rtl"],
-#go-button-bottom[chromedir="rtl"] {
-  list-style-image: url("chrome://browser/skin/Go-bkgnd-rtl.png");
-}
-
-#go-button-mid-top[chromedir="rtl"] {
-  background-image: url("chrome://browser/skin/Go-mid-top-rtl.png");
-}
-
-#go-button-mid-bottom[chromedir="rtl"] {
-  background-image: url("chrome://browser/skin/Go-mid-bottom-rtl.png");
-}
-
-#go-button-stack:hover #go-button-top {
-  -moz-image-region: rect(0px, 50px, 10px, 25px);
-}
-
-#go-button-stack:hover #go-button-mid-top,
-#go-button-stack:hover #go-button-mid-bottom {
-  background-position: -25px 0px;
-}
-
-#go-button-stack:hover #go-button-bottom {
-  -moz-image-region: rect(12px, 50px, 22px, 25px);
-}
-
-/* Disabled images are not used. */
-#go-button-stack[disabled="true"] #go-button-top {
-  -moz-image-region: rect(0px, 75px, 10px, 50px) !important;
-}
-
-#go-button-stack[disabled="true"] #go-button-mid-top,
-#go-button-stack[disabled="true"] #go-button-mid-bottom {
-  background-position: -50px 0px;
-}
-
-#go-button-stack[disabled="true"] #go-button-bottom {
-  -moz-image-region: rect(12px, 75px, 22px, 50px) !important;
-}
-
-
-#go-button-stack:hover:active #go-button-top {
-  -moz-image-region: rect(0px, 100px, 10px, 75px);
-}
-
-#go-button-stack:hover:active #go-button-mid-top,
-#go-button-stack:hover:active #go-button-mid-bottom {
-  background-position: -75px;
-}
-
-#go-button-stack:hover:active #go-button-bottom {
-  -moz-image-region: rect(12px, 100px, 22px, 75px);
-}
-
-
-toolbar[mode="text"] #go-button-top,
-toolbar[mode="text"] #go-button-mid-top,
-toolbar[mode="text"] #go-button-mid-bottom,
-toolbar[mode="text"] #go-button-bottom {
-  display: none;
-}
-
-toolbar[mode="text"] #go-button > .toolbarbutton-text {
-  display: -moz-box !important;
-  -moz-margin-start: 4px !important;
-}
-
-/* Not used. */
-#go-button:not([disabled="true"]):hover {
-  -moz-image-region: rect(0px 50px 22px 25px);
-}
-
-#go-button[disabled="true"] {
-  -moz-image-region: rect(0px 75px 22px 50px);
-}
-
-#go-button:not([disabled="true"]):hover:active {
-  -moz-image-region: rect(0px 100px 22px 75px);
-}
-
-#go-button > .toolbarbutton-icon {
-  margin: 0;
-}
-
-toolbar:not([mode="text"]) #go-button,
-toolbar:not([mode="text"]) .search-go-button,
-toolbarpaletteitem:not([place="toolbar"]) #go-button,
-toolbarpaletteitem:not([place="toolbar"]) .search-go-button {
-  -moz-binding: url(chrome://global/content/bindings/toolbarbutton.xml#toolbarbutton-image);
-}
+/* ::::: content area ::::: */
 
 #sidebar {
   background-color: Window;
 }
 
-/* ::::: content area ::::: */
-
 #status-bar {
   border-top: none;
 }

browser/themes/winstripe/browser/jar.mn

@@ -2,6 +2,8 @@ classic.jar:
 % skin browser classic/1.0 %skin/classic/browser/
 *       skin/classic/browser/browser.css                        (browser.css)
         skin/classic/browser/browser.xml
+        skin/classic/browser/endcap-bkgnd.png
+        skin/classic/browser/endcap-bkgnd-hover.png
 *       skin/classic/browser/engineManager.css                  (engineManager.css)
         skin/classic/browser/Info.png
         skin/classic/browser/pageInfo.css
@@ -20,21 +22,9 @@ classic.jar:
         skin/classic/browser/Toolbar-small.png
         skin/classic/browser/Go-arrow.png
         skin/classic/browser/Go-arrow-rtl.png
-        skin/classic/browser/Go-bkgnd.png
-        skin/classic/browser/Go-bkgnd-rtl.png
-        skin/classic/browser/Go-mid-top.png
-        skin/classic/browser/Go-mid-top-rtl.png
-        skin/classic/browser/Go-mid-bottom.png
-        skin/classic/browser/Go-mid-bottom-rtl.png
 *       skin/classic/browser/searchbar.css                      (searchbar.css)
         skin/classic/browser/Search-glass.png
         skin/classic/browser/Search-glass-rtl.png
-        skin/classic/browser/Search-bkgnd.png
-        skin/classic/browser/Search-bkgnd-rtl.png
-        skin/classic/browser/Search-mid-top.png
-        skin/classic/browser/Search-mid-top-rtl.png
-        skin/classic/browser/Search-mid-bottom.png
-        skin/classic/browser/Search-mid-bottom-rtl.png
         skin/classic/browser/Search-provider-bkgnd.png
         skin/classic/browser/Search-provider-mid-top.png
         skin/classic/browser/Search-provider-mid-bottom.png

browser/themes/winstripe/browser/searchbar.css

@@ -1,11 +1,13 @@
-/* *** winstripe *** */
-
 %ifdef MOZ_WIDGET_GTK2
 #searchbar {
   -moz-margin-start: 3px;
 }
 %endif
 
+.searchbar-box {
+  -moz-padding-end: 5px;
+}
+
 .searchbar-textbox {
   min-height: 22px;
   width: 4em;
@@ -133,7 +135,8 @@ toolbar[mode="text"] .searchbar-box {
 
 .search-go-button {
   list-style-image: url("chrome://browser/skin/Search-glass.png");
-  border: 0px !important;
+  -moz-image-region: rect(0px 25px 22px 0px);
+  border: 0px;
   padding: 0px;
   -moz-appearance: none;
 }
@@ -142,110 +145,6 @@ toolbar[mode="text"] .searchbar-box {
   list-style-image: url("chrome://browser/skin/Search-glass-rtl.png");
 }
 
-.search-go-button-stack {
-  padding: 2px 0px 2px 0px;
-  -moz-padding-end: 5px;
-}
-
-toolbar[mode="text"] .search-go-button {
-  -moz-margin-start: 5px;
-  padding: 3px;
-  -moz-appearance: toolbarbutton;
-}
-
-toolbar[mode="text"] .search-go-button-stack {
-  padding: 0px;
-}
-
-toolbar[mode="text"] .search-go-button,
-toolbar[mode="text"] .search-go-button-stack .search-go-button-bkgnd {
-  background-image: none;
-  list-style-image: none;
-  width: auto;
-}
-
-.search-go-button-top {
-  list-style-image: url("chrome://browser/skin/Search-bkgnd.png");
-  -moz-image-region: rect(0px, 25px, 10px, 0px);
-  height: 10px;
-}
-
-/* GTK does not stretch image regions properly, so use background
-   images instead.  See bugs 351764 and 254659. */
-.search-go-button-mid-top {
-  background-image: url("chrome://browser/skin/Search-mid-top.png");
-}
-
-.search-go-button-mid-bottom {
-  background-image: url("chrome://browser/skin/Search-mid-bottom.png");
-}
-
-.search-go-button-bottom {
-  list-style-image: url("chrome://browser/skin/Search-bkgnd.png");
-  -moz-image-region: rect(12px, 25px, 22px, 0px);
-  height: 10px;
-}
-
-.search-go-button-top[chromedir="rtl"],
-.search-go-button-bottom[chromedir="rtl"] {
-  list-style-image: url("chrome://browser/skin/Search-bkgnd-rtl.png");
-}
-
-.search-go-button-mid-top[chromedir="rtl"] {
-  background-image: url("chrome://browser/skin/Search-mid-top-rtl.png");
-}
-
-.search-go-button-mid-bottom[chromedir="rtl"] {
-  background-image: url("chrome://browser/skin/Search-mid-bottom-rtl.png");
-}
-
-.search-go-button-stack:hover .search-go-button-top {
-  -moz-image-region: rect(0px, 50px, 10px, 25px);
-}
-
-.search-go-button-stack:hover .search-go-button-mid-top,
-.search-go-button-stack:hover .search-go-button-mid-bottom  {
-  background-position: -25px 0px;
-}
-
-.search-go-button-stack:hover .search-go-button-bottom {
-  -moz-image-region: rect(12px, 50px, 22px, 25px);
-}
-
-
-/* Disabled images are not used. */
-.search-go-button-stack[disabled="true"] .search-go-button-top {
-  -moz-image-region: rect(0px, 75px, 10px, 50px);
-}
-
-.search-go-button-stack[disabled="true"] .search-go-button-mid-top,
-.search-go-button-stack[disabled="true"] .search-go-button-mid-bottom {
-  background-position: -50px 0px;
-}
-
-.search-go-button-stack[disabled="true"] .search-go-button-bottom {
-  -moz-image-region: rect(12px, 75px, 22px, 50px);
-}
-
-
-.search-go-button-stack:hover:active .search-go-button-top {
-  -moz-image-region: rect(0px, 100px, 10px, 75px);
-}
-
-.search-go-button-stack:hover:active .search-go-button-mid-top,
-.search-go-button-stack:hover:active .search-go-button-mid-bottom {
-  background-position: -75px 0px;
-}
-
-.search-go-button-stack:hover:active .search-go-button-bottom {
-  -moz-image-region: rect(12px, 100px, 22px, 75px);
-}
-
-
-.search-go-button {
-  -moz-image-region: rect(0px 25px 22px 0px);
-}
-
 .search-go-button:hover {
   -moz-image-region: rect(0px 50px 22px 25px);
 }
@@ -258,8 +157,24 @@ toolbar[mode="text"] .search-go-button-stack .search-go-button-bkgnd {
   -moz-image-region: rect(0px, 100px, 22px, 75px);
 }
 
+toolbar[mode="text"] .search-go-button {
+  -moz-margin-start: 5px;
+  padding: 3px;
+  -moz-appearance: toolbarbutton;
+}
+
+toolbar[mode="text"] .search-go-button-stack {
+  padding: 0px;
+}
+
+toolbar[mode="text"] .search-go-button {
+  background-image: none;
+  list-style-image: none;
+  width: auto;
+}
+
 .search-go-button > .toolbarbutton-icon {
-  margin: 0px !important;
+  margin: 0px;
 }
 
 .searchbar-engine-menuitem[selected="true"] > .menu-iconic-text {