Bug 892705 - Change - Move findbar on visually top of urlbar, clean up naming. r=mbrubeck

browser/metro/base/content/ContentAreaObserver.js

@@ -171,13 +171,10 @@ var ContentAreaObserver = {
 
   updateAppBarPosition: function updateAppBarPosition(aForceDown) {
     // Adjust the app and find bar position above the soft keyboard
-    let navBar = document.getElementById("navbar");
-    let contextAppBar = document.getElementById("contextappbar");
-    let findBar = document.getElementById("content-navigator");
     let keyboardHeight = aForceDown ? 0 : MetroUtils.keyboardHeight;
-    navBar.style.bottom = keyboardHeight + "px";
+    Elements.navbar.style.bottom = keyboardHeight + "px";
-    contextAppBar.style.bottom = keyboardHeight + "px";
+    Elements.contextappbar.style.bottom = keyboardHeight + "px";
-    findBar.style.bottom = keyboardHeight + "px";
+    Elements.findbar.style.bottom = keyboardHeight + "px";
   },
 
   /*

browser/metro/base/content/browser-ui.js

@@ -43,10 +43,10 @@ let Elements = {};
   ["browsers",           "browsers"],
   ["navbar",             "navbar"],
   ["contextappbar",      "contextappbar"],
+  ["findbar",            "findbar"],
   ["contentViewport",    "content-viewport"],
   ["progress",           "progress-control"],
   ["progressContainer",  "progress-container"],
-  ["contentNavigator",   "content-navigator"],
 ].forEach(function (aElementGlobal) {
   let [name, id] = aElementGlobal;
   XPCOMUtils.defineLazyGetter(Elements, name, function() {

browser/metro/base/content/browser.xul

@@ -250,15 +250,6 @@
     <html:div id="overlay-plus" class="overlay-button"
               observes="cmd_back"></html:div>
 
-    <!-- popup for content navigator helper -->
-    <appbar id="content-navigator" class="window-width content-navigator-box" orient="horizontal" pack="start">
-      <textbox id="find-helper-textbox" class="search-bar content-navigator-item" oncommand="FindHelperUI.search(this.value)" oninput="FindHelperUI.updateCommands(this.value);" type="search"/>
-      <button class="content-navigator-item previous-button" command="cmd_findPrevious"/>
-      <button class="content-navigator-item next-button" command="cmd_findNext"/>
-      <spacer flex="1"/>
-      <button class="content-navigator-item close-button" command="cmd_findClose"/>
-    </appbar>
-
     <!-- Navbar -->
     <appbar id="navbar" mousethrough="never" observes="bcast_windowState">
       <hbox id="progress-container" layer="true">
@@ -356,6 +347,15 @@
       </deck>
     </vbox>
 
+    <!-- Find bar -->
+    <appbar id="findbar" class="window-width findbar-box" orient="horizontal" pack="start">
+      <textbox id="findbar-textbox" class="search-bar findbar-item" oncommand="FindHelperUI.search(this.value)" oninput="FindHelperUI.updateCommands(this.value);" type="search"/>
+      <button class="findbar-item previous-button" command="cmd_findPrevious"/>
+      <button class="findbar-item next-button" command="cmd_findNext"/>
+      <spacer flex="1"/>
+      <button class="findbar-item close-button" command="cmd_findClose"/>
+    </appbar>
+
     <!-- Context button bar -->
     <appbar id="contextappbar">
       <toolbar id="contextualactions-tray" flex="1">

browser/metro/base/content/helperui/FindHelperUI.js

@@ -42,8 +42,8 @@ var FindHelperUI = {
   },
 
   init: function findHelperInit() {
-    this._textbox = document.getElementById("find-helper-textbox");
+    this._textbox = document.getElementById("findbar-textbox");
-    this._container = Elements.contentNavigator;
+    this._container = Elements.findbar;
 
     this._cmdPrevious = document.getElementById(this.commands.previous);
     this._cmdNext = document.getElementById(this.commands.next);

browser/metro/theme/platform.css

@@ -665,19 +665,19 @@ arrowbox {
 
 /* Find bar ------------------------------------------------------------- */
 
-#content-navigator {
+#findbar {
   background-color: @metro_orange@;
   padding: 0;
   pointer-events: none;
 }
 
-#content-navigator > toolbar {
+#findbar > toolbar {
   min-height: @findbar_height@ !important;
 }
 
-#content-navigator > .previous-button,
+#findbar > .previous-button,
-#content-navigator > .next-button,
+#findbar > .next-button,
-#content-navigator > .close-button {
+#findbar > .close-button {
   list-style-image: url(chrome://browser/skin/images/appbar-icons.png);
   min-width: @touch_button_small@ !important; /* button size */
   min-height: @touch_button_small@ !important; /* button size */
@@ -689,46 +689,46 @@ arrowbox {
   margin: 0 @margin_normal@ !important;
 }
 
-#content-navigator > .close-button {
+#findbar > .close-button {
   -moz-margin-start: 0;
   -moz-image-region: rect(0px, 480px, 40px, 440px);
 }
 
-#content-navigator > .close-button:hover {
+#findbar > .close-button:hover {
   -moz-image-region: rect(40px, 480px, 80px, 440px);
 }
 
-#content-navigator > .close-button:active {
+#findbar > .close-button:active {
   -moz-image-region: rect(80px, 480px, 120px, 440px);
 }
 
-#content-navigator > .previous-button {
+#findbar > .previous-button {
   -moz-margin-end: 0;
   -moz-image-region: rect(0px, 400px, 40px, 360px);
 }
 
-#content-navigator > .previous-button:hover {
+#findbar > .previous-button:hover {
   -moz-image-region: rect(40px, 400px, 80px, 360px);
 }
 
-#content-navigator > .previous-button:active{
+#findbar > .previous-button:active{
   -moz-image-region: rect(80px, 400px, 120px, 360px);
 }
 
-#content-navigator > .next-button {
+#findbar > .next-button {
   -moz-margin-start: 0;
   -moz-image-region: rect(0px, 440px, 40px, 400px);
 }
 
-#content-navigator > .next-button:hover {
+#findbar > .next-button:hover {
   -moz-image-region: rect(40px, 440px, 80px, 400px);
 }
 
-#content-navigator > .next-button:active {
+#findbar > .next-button:active {
   -moz-image-region: rect(80px, 440px, 120px, 400px);
 }
 
-#find-helper-textbox {
+#findbar-textbox {
   pointer-events: auto;
   -moz-margin-end: 0;
   border: none !important;
@@ -742,18 +742,18 @@ arrowbox {
 
 /* Override the default box ordering and make the find textbox appear to the
    right of the icon */
-#find-helper-textbox input {
+#findbar-textbox input {
   -moz-box-ordinal-group: 2
 }
 
-#find-helper-textbox deck {
+#findbar-textbox deck {
   margin-right: @margin_normal@;
 }
 
-#find-helper-textbox[status="1"] { /* Ci.nsITypeAheadFind.FIND_NOTFOUND */
+#findbar-textbox[status="1"] { /* Ci.nsITypeAheadFind.FIND_NOTFOUND */
   background: rgb(255,200,200);
 }
 
-#find-helper-textbox:hover:active {
+#findbar-textbox:hover:active {
   background: #8db8d8;
 }