Bug 580213 - Enhance the look of Form Assistant and Find-In-Page [r=mfinkle]

mobile/chrome/content/bindings.xml

@@ -1082,13 +1082,11 @@
 
   <binding id="content-navigator">
     <content pack="end">
-      <children includes="arrowscrollbox|vbox"/>
-      <xul:hbox class="panel-dark" pack="center">
-        <children includes="textbox"/>
-        <xul:button anonid="previous-button" class="button-dark" label="&contentNavigator.previous;" xbl:inherits="command=previous"/>
-        <xul:button anonid="next-button" class="button-dark" label="&contentNavigator.next;" xbl:inherits="command=next"/>
-        <xul:spacer flex="1"/>
-        <xul:toolbarbutton class="close-button" xbl:inherits="command=close"/>
+      <children includes="vbox"/>
+      <xul:hbox class="panel-dark" pack="end">
+        <children includes="textbox|arrowscrollbox"/>
+        <xul:toolbarbutton anonid="previous-button" class="button-image previous-button" xbl:inherits="command=previous"/>
+        <xul:toolbarbutton anonid="next-button" class="button-image next-button" xbl:inherits="command=next"/>
       </xul:hbox>
     </content>
 

mobile/chrome/content/browser-ui.js

@@ -1450,6 +1450,7 @@ var FindHelperUI = {
 
     // Listen for form assistant messages from content
     messageManager.addMessageListener("FindAssist:Show", this);
+    messageManager.addMessageListener("FindAssist:Hide", this);
 
     // Listen for events where form assistant should be closed
     document.getElementById("tabs").addEventListener("TabSelect", this, true);
@@ -1463,6 +1464,11 @@ var FindHelperUI = {
         if (json.rect)
           this._zoom(Rect.fromRect(json.rect));
         break;
+
+      case "FindAssist:Hide":
+        if (this._container.getAttribute("type") == this.type)
+          this.hide();
+        break;
     }
   },
 

mobile/chrome/content/browser.js

@@ -452,7 +452,7 @@ var Browser = {
         Browser.tabs[i].updateViewportSize();
 
       bv.commitBatchOperation();
-      
+
       let curEl = document.activeElement;
       if (curEl && curEl.scrollIntoView)
         curEl.scrollIntoView(false);

mobile/chrome/content/content.js

@@ -490,6 +490,7 @@ Content.prototype = {
           if (uri)
             sendAsyncMessage("Browser:OpenURI", { uri: uri });
         } else if (!this._formAssistant.open(element)) {
+          sendAsyncMessage("FindAssist:Hide", { });
           this._sendMouseEvent("mousedown", element, x, y);
           this._sendMouseEvent("mouseup", element, x, y);
         }

mobile/locales/en-US/chrome/browser.dtd

@@ -27,9 +27,6 @@
 <!ENTITY editBookmarkDone.label    "Done">
 <!ENTITY editBookmarkTags.label    "Add tags here">
 
-<!ENTITY contentNavigator.previous "Previous">
-<!ENTITY contentNavigator.next     "Next">
-
 <!ENTITY selectHelper.done         "Done">
 
 <!ENTITY addonsHeader.label        "Add-ons">

mobile/themes/core/browser.css

@@ -1136,20 +1136,55 @@ pageaction .pageaction-desc[value=""] {
   display: none;
 }
 
-#content-navigator > hbox,
 #select-buttons {
   padding: 4px 8px; /* row size & core spacing */
 }
 
-#content-navigator > hbox > button,
 #select-buttons > button {
   -moz-user-focus: ignore;
   -moz-user-select: none;
 }
 
+#content-navigator > hbox {
+  padding: 2px 0; /* half row size */
+}
+
+#content-navigator > hbox > textbox,
+#content-navigator > hbox > toolbarbutton {
+  margin: 2px 8px; /* half row size & core spacing */
+}
+
+#content-navigator > hbox > toolbarbutton.previous-button {
+  height: 64px;
+  margin-right: 4px;
+  list-style-image: url("chrome://browser/skin/images/previous-default-64.png");
+}
+
+#content-navigator > hbox > toolbarbutton.previous-button:not([disabled="true"]):hover:active {
+  list-style-image: url("chrome://browser/skin/images/previous-active-64.png");
+}
+
+#content-navigator > hbox > toolbarbutton.previous-button[disabled="true"] {
+  list-style-image: url("chrome://browser/skin/images/previous-disabled-64.png");
+}
+
+#content-navigator > hbox > toolbarbutton.next-button {
+  height: 64px;
+  margin-left: 4px;
+  list-style-image: url("chrome://browser/skin/images/next-default-64.png");
+}
+
+#content-navigator > hbox > toolbarbutton.next-button:not([disabled="true"]):hover:active {
+  list-style-image: url("chrome://browser/skin/images/next-active-64.png");
+}
+
+#content-navigator > hbox > toolbarbutton.next-button[disabled="true"] {
+  list-style-image: url("chrome://browser/skin/images/next-disabled-64.png");
+}
+
 #form-helper-autofill {
   padding: 4px 0; /* half core spacing & none (autorepeat arrows compensate) */
-  border-top: 2px solid #36373b;
+  color: black;
   background-color: rgb(235,235,235);
   background-image: -moz-linear-gradient(top, rgb(255,255,255) 0%, rgb(235,235,235) 90%);
 }

mobile/themes/core/jar.mn

@@ -111,6 +111,12 @@ chrome.jar:
   skin/images/buttondark-active-64.png      (images/buttondark-active-64.png)
   skin/images/toolbarbutton-default-64.png  (images/toolbarbutton-default-64.png)
   skin/images/toolbarbutton-active-64.png   (images/toolbarbutton-active-64.png)
+  skin/images/previous-default-64.png       (images/previous-default-64.png)
+  skin/images/next-default-64.png           (images/next-default-64.png)
+  skin/images/previous-active-64.png        (images/previous-active-64.png)
+  skin/images/next-active-64.png            (images/next-active-64.png)
+  skin/images/previous-disabled-64.png      (images/previous-disabled-64.png)
+  skin/images/next-disabled-64.png          (images/next-disabled-64.png)
   skin/images/lock-40.png                   (images/lock-40.png)
   skin/images/unlock-40.png                 (images/unlock-40.png)
   skin/images/close-default-40.png          (images/close-default-40.png)