Bug 885242 - Part 2 - Simplify markup in browser.xul, do some cleanup elsewhere. r=mbrubeck
☠☠ backed out by 9d6e68dbef7b ☠ ☠
authorJonathan Wilde <jwilde@jwilde.me>
Wed, 17 Jul 2013 23:05:40 -0700
changeset 138975 eb45f94edb1f3d44bb6120873b87959462327f48
parent 138974 0b27487d68140732929b69c31dc38d2dc874159a
child 138976 9563a9ea0ce21650d8ff8d0eec9567e3905d362e
push id31191
push userhello@jwilde.me
push dateThu, 18 Jul 2013 07:29:41 +0000
treeherdermozilla-inbound@ba3297faeb61 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmbrubeck
bugs885242
milestone25.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 885242 - Part 2 - Simplify markup in browser.xul, do some cleanup elsewhere. r=mbrubeck
browser/metro/base/content/WebProgress.js
browser/metro/base/content/browser.xul
browser/metro/theme/browser.css
--- a/browser/metro/base/content/WebProgress.js
+++ b/browser/metro/base/content/WebProgress.js
@@ -4,16 +4,18 @@
 
 // Progress heartbeat timer duration (ms)
 const kHeartbeatDuration = 1000;
 // Start and end progress screen css margins as percentages
 const kProgressMarginStart = 30;
 const kProgressMarginEnd = 70;
 
 const WebProgress = {
+  get _identityBox() { return document.getElementById("identity-box"); },
+
   _progressActive: false,
 
   init: function init() {
     messageManager.addMessageListener("Content:StateChange", this);
     messageManager.addMessageListener("Content:LocationChange", this);
     messageManager.addMessageListener("Content:SecurityChange", this);
     Elements.progress.addEventListener("transitionend", this._progressTransEnd, true);
     Elements.tabList.addEventListener("TabSelect", this._onTabSelect, true);
@@ -70,18 +72,17 @@ const WebProgress = {
       aTab._identityState = "verifiedIdentity";
     } else if (state & nsIWebProgressListener.STATE_IS_SECURE) {
       aTab._identityState = "verifiedDomain";
     } else {
       aTab._identityState = "";
     }
 
     if (aTab == Browser.selectedTab) {
-      let identityBox = document.getElementById("identity-box-inner");
-      identityBox.className = aTab._identityState;
+      this._identityBox.className = aTab._identityState;
     }
   },
 
   _locationChange: function _locationChange(aJson, aTab) {
     let spec = aJson.location;
     let location = spec.split("#")[0]; // Ignore fragment identifier changes.
 
     if (aTab == Browser.selectedTab) {
@@ -209,18 +210,16 @@ const WebProgress = {
     // Close out fade finished, reset
     if (data.propertyName == "opacity") {
       Elements.progress.style.width = "0px";
       Elements.progressContainer.setAttribute("collapsed", true);
     }
   },
 
   _onTabSelect: function(aEvent) {
-    let identityBox = document.getElementById("identity-box-inner");
     let tab = Browser.getTabFromChrome(aEvent.originalTarget);
-    identityBox.className = tab._identityState || "";
+    this._identityBox.className = tab._identityState || "";
   },
 
   _onUrlBarInput: function(aEvent) {
-    let identityBox = document.getElementById("identity-box-inner");
-    Browser.selectedTab._identityState = identityBox.className = "";
+    Browser.selectedTab._identityState = this._identityBox.className = "";
   },
 };
--- a/browser/metro/base/content/browser.xul
+++ b/browser/metro/base/content/browser.xul
@@ -244,62 +244,63 @@
       </stack>
     </vbox>
 
     <html:div id="overlay-back" class="overlay-button"
               observes="cmd_back"></html:div>
     <html:div id="overlay-plus" class="overlay-button"
               observes="cmd_back"></html:div>
 
-    <!-- Navbar -->
+    <!-- Navigation bar -->
     <appbar id="navbar" mousethrough="never" observes="bcast_windowState">
       <hbox id="progress-container" layer="true">
         <hbox id="progress-control" />
       </hbox>
 
       <vbox id="toolbar-autocomplete" flex="1">
         <!-- Autocomplete -->
         <scrollbox flex="1">
           <hbox id="urlbar-autocomplete" observes="bcast_windowState"/>
         </scrollbox>
 
-        <!-- Main Toolbar -->
-        <toolbar id="toolbar" observes="bcast_windowState" flex="1">
+        <!-- Main toolbar -->
+        <toolbar id="toolbar" flex="1">
           <observes element="bcast_windowState" attribute="*"/>
           <observes element="bcast_urlbarState" attribute="*"/>
 
-          <toolbarbutton id="back-button" class="appbar-primary" command="cmd_back"/>
-          <toolbarbutton id="forward-button" class="appbar-primary" command="cmd_forward"/>
+          <toolbarbutton id="back-button" class="appbar-primary"
+                         command="cmd_back"/>
+          <toolbarbutton id="forward-button" class="appbar-primary"
+                         command="cmd_forward"/>
 
-          <hbox id="urlbar-container" flex="1" observes="bcast_urlbarState">
-            <hbox id="urlbar" flex="1">
-              <box id="identity-box" role="button">
-                <hbox id="identity-box-inner" align="center" mousethrough="always">
-                  <image id="identity-icon"/>
-                </hbox>
-              </box>
+          <hbox id="urlbar" flex="1" observes="bcast_urlbarState">
+            <box id="identity-box" align="center" role="button">
+              <image id="identity-icon"/>
+            </box>
 
-              <textbox id="urlbar-edit"
-                       type="url"
-                       class="uri-element"
-                       autocompletesearch="history"
-                       autocompletepopup="urlbar-autocomplete"
-                       completeselectedindex="true"
-                       placeholder="&urlbar.emptytext;"
-                       flex="1"/>
-            </hbox>
+            <textbox id="urlbar-edit" type="url" flex="1"
+                     autocompletesearch="history"
+                     autocompletepopup="urlbar-autocomplete"
+                     completeselectedindex="true"
+                     placeholder="&urlbar.emptytext;"/>
 
-            <toolbarbutton id="reload-button" oncommand="CommandUpdater.doCommand(event.shiftKey ? 'cmd_forceReload' : 'cmd_reload');"/>
+            <toolbarbutton id="reload-button" oncommand="
+              CommandUpdater.doCommand(event.shiftKey ? 'cmd_forceReload'
+                                                      : 'cmd_reload');"/>
             <toolbarbutton id="stop-button" command="cmd_stop"/>
           </hbox>
 
-          <toolbarbutton id="download-button" class="appbar-secondary" oncommand="Appbar.onDownloadButton()"/>
-          <toolbarbutton id="star-button" class="appbar-primary" type="checkbox" oncommand="Appbar.onStarButton()"/>
-          <toolbarbutton id="pin-button" class="appbar-primary" type="checkbox" oncommand="Appbar.onPinButton()"/>
-          <toolbarbutton id="menu-button" class="appbar-primary" oncommand="Appbar.onMenuButton(event)"/>
+          <toolbarbutton id="download-button" class="appbar-secondary"
+                         oncommand="Appbar.onDownloadButton()"/>
+          <toolbarbutton id="star-button" class="appbar-primary" type="checkbox"
+                         oncommand="Appbar.onStarButton()"/>
+          <toolbarbutton id="pin-button" class="appbar-primary" type="checkbox"
+                         oncommand="Appbar.onPinButton()"/>
+          <toolbarbutton id="menu-button" class="appbar-primary"
+                         oncommand="Appbar.onMenuButton(event)"/>
         </toolbar>
       </vbox>
     </appbar>
 
     <vbox id="panel-container" hidden="true" class="window-width window-height meta" observes="bcast_windowState">
       <hbox id="panel-header">
         <toolbarbutton id="panel-close-button" command="cmd_panel"/>
 
@@ -346,22 +347,24 @@
           </vbox>
 
           <richlistbox id="console-box" class="panel-list console-box" flex="1" onkeypress="ConsolePanelView.onConsoleBoxKeyPress(event)" oncontextmenu="ConsolePanelView.onContextMenu(event);"/>
         </vbox>
       </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"/>
+    <appbar id="findbar" class="window-width" pack="start">
+      <textbox id="findbar-textbox" type="search"
+               oncommand="FindHelperUI.search(this.value)"
+               oninput="FindHelperUI.updateCommands(this.value); "/>
+      <button class="previous-button" command="cmd_findPrevious"/>
+      <button class="next-button" command="cmd_findNext"/>
       <spacer flex="1"/>
-      <button id="findbar-close" class="findbar-item close-button" command="cmd_findClose"/>
+      <button id="findbar-close" class="close-button" command="cmd_findClose"/>
     </appbar>
 
     <!-- Context button bar -->
     <appbar id="contextappbar">
       <toolbar id="contextualactions-tray" labelled="true" flex="1">
         <toolbarbutton id="delete-selected-button" class="appbar-secondary"
                        modifies-noun="true" hidden="true" fade="true"
                        oncommand="Appbar.dispatchContextualAction('delete')"/>
--- a/browser/metro/theme/browser.css
+++ b/browser/metro/theme/browser.css
@@ -325,22 +325,16 @@ documenttab[selected] .documenttab-selec
   height: @scroller_thickness@;
   min-width: @scroller_minimum@;
 }
 
 #browsers[input="imprecise"] browser {
   overflow: hidden;
 }
 
-/* helperapp (save-as) popup */
-
-#helperapp-target {
-  font-size: @font_small@ !important;
-}
-
 /* overlay buttons */
 
 .overlay-button {
   position: fixed;
   top: 50%;
   margin-top: -65px;
   width: 118px;
   height: 118px;
@@ -512,40 +506,40 @@ documenttab[selected] .documenttab-selec
   }
 
   #toolbar > #forward-button {
     list-style-image: url(chrome://browser/skin/images/appbar-forward@1.4x.png);
   }
 }
 
 /* URL bar */
-#urlbar-container {
+#urlbar {
   border: @metro_border_thick@ solid @urlbar_border_color@;
   margin: 0 @toolbar_horizontal_spacing@;
   padding: 0;
   background-color: @field_background_color@;
   overflow: hidden;
 }
 
-#urlbar-container[mode="edit"] {
+#urlbar[mode="edit"] {
   border-color: @metro_orange@;
 }
 
 /* Identity widget */
 #identity-icon {
   margin: 0;
   padding: 0 @metro_spacing_snormal@;
   list-style-image: url("chrome://browser/skin/images/identity-icons-generic.png");
 }
 
-#identity-box-inner.verifiedDomain > #identity-icon {
+#identity-box.verifiedDomain > #identity-icon {
   list-style-image: url("chrome://browser/skin/images/identity-icons-https.png");
 }
 
-#identity-box-inner.verifiedIdentity > #identity-icon {
+#identity-box.verifiedIdentity > #identity-icon {
   list-style-image: url("chrome://browser/skin/images/identity-icons-https-ev.png");
 }
 
 /* Main URL textbox */
 #urlbar-edit {
   margin: 0 !important;
   min-height: @urlbar_edit_height@;
   -moz-appearance: none !important;
@@ -569,19 +563,19 @@ documenttab[selected] .documenttab-selec
 #reload-button {
   list-style-image: url(chrome://browser/skin/images/appbar-reload.png);
 }
 
 #stop-button {
   list-style-image: url(chrome://browser/skin/images/appbar-stop.png);
 }
 
-#toolbar[mode="loading"] > #urlbar-container > #reload-button,
-#toolbar:-moz-any([mode="edit"], [mode="view"]) > #urlbar-container > #stop-button,
-#toolbar[viewstate="snapped"] > #urlbar-container ~ toolbarbutton {
+#urlbar[mode="loading"] > #reload-button,
+#urlbar:-moz-any([mode="edit"], [mode="view"]) > #stop-button,
+#toolbar[viewstate="snapped"] > #urlbar ~ toolbarbutton {
   visibility: collapse;
 }
 
 /* Page-Specific */
 
 #pin-button {
   list-style-image: url(chrome://browser/skin/images/appbar-pin.png);
 }