diff --git a/browser/metro/base/content/ContentAreaObserver.js b/browser/metro/base/content/ContentAreaObserver.js
index ab77eb28cee6..15b0161226ec 100644
--- a/browser/metro/base/content/ContentAreaObserver.js
+++ b/browser/metro/base/content/ContentAreaObserver.js
@@ -5,7 +5,7 @@
/*
* ContentAreaObserver manages tracking the viewable area within the browser.
* It also handles certain tasks like positioning of input elements within
- * content when the viewable area changes.
+ * content when the viewable area changes.
*
* ContentAreaObserver creates styles that content can apply and also fires
* events when things change. The 'width' and 'height' properties of the
@@ -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";
- contextAppBar.style.bottom = keyboardHeight + "px";
- findBar.style.bottom = keyboardHeight + "px";
+ Elements.navbar.style.bottom = keyboardHeight + "px";
+ Elements.contextappbar.style.bottom = keyboardHeight + "px";
+ Elements.findbar.style.bottom = keyboardHeight + "px";
},
/*
diff --git a/browser/metro/base/content/browser-ui.js b/browser/metro/base/content/browser-ui.js
index d21f72037bbe..28511d0d1330 100644
--- a/browser/metro/base/content/browser-ui.js
+++ b/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() {
diff --git a/browser/metro/base/content/browser.xul b/browser/metro/base/content/browser.xul
index 618da0e0ba68..c52fe87b469e 100644
--- a/browser/metro/base/content/browser.xul
+++ b/browser/metro/base/content/browser.xul
@@ -250,15 +250,6 @@
-
-
-
-
-
-
-
-
-
@@ -356,6 +347,15 @@
+
+
+
+
+
+
+
+
+
diff --git a/browser/metro/base/content/helperui/FindHelperUI.js b/browser/metro/base/content/helperui/FindHelperUI.js
index 40540335d32f..5c9d2c92abc2 100644
--- a/browser/metro/base/content/helperui/FindHelperUI.js
+++ b/browser/metro/base/content/helperui/FindHelperUI.js
@@ -42,8 +42,8 @@ var FindHelperUI = {
},
init: function findHelperInit() {
- this._textbox = document.getElementById("find-helper-textbox");
- this._container = Elements.contentNavigator;
+ this._textbox = document.getElementById("findbar-textbox");
+ this._container = Elements.findbar;
this._cmdPrevious = document.getElementById(this.commands.previous);
this._cmdNext = document.getElementById(this.commands.next);
diff --git a/browser/metro/theme/platform.css b/browser/metro/theme/platform.css
index 0745793b1e58..064c6686987d 100644
--- a/browser/metro/theme/platform.css
+++ b/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,
-#content-navigator > .next-button,
-#content-navigator > .close-button {
+#findbar > .previous-button,
+#findbar > .next-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;
}