Bug 885242 - Part 2 - Simplify markup in browser.xul, do some cleanup elsewhere. r=mbrubeck
authorJonathan Wilde <jwilde@jwilde.me>
Wed, 17 Jul 2013 23:05:40 -0700
changeset 139716 4e70887b953f2c5ebc5b439b3b7b0a5e6f726b9d
parent 139715 28e87c73927d10de2f895488e15aa91dbcc1f040
child 139717 de4581ec96812969af37ab11ede72b535ff2c317
push id31467
push userhello@jwilde.me
push dateWed, 24 Jul 2013 08:45:46 +0000
treeherdermozilla-inbound@c64f2402e12e [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,27 +4,30 @@
 
 // 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);
+
+    Elements.progress.addEventListener("transitionend", this, true);
+    Elements.tabList.addEventListener("TabSelect", this, true);
 
     let urlBar = document.getElementById("urlbar-edit");
-    urlBar.addEventListener("input", this._onUrlBarInput, false);
+    urlBar.addEventListener("input", this, false);
 
     return this;
   },
 
   receiveMessage: function receiveMessage(aMessage) {
     let json = aMessage.json;
     let tab = Browser.getTabForBrowser(aMessage.target);
 
@@ -57,31 +60,44 @@ const WebProgress = {
       case "Content:SecurityChange": {
         this._securityChange(json, tab);
         this._progressStep();
         break;
       }
     }
   },
 
+  handleEvent: function handleEvent(aEvent) {
+    switch (aEvent.type) {
+      case "transitionend":
+        this._progressTransEnd(aEvent);
+        break;
+      case "TabSelect":
+        this._onTabSelect(aEvent);
+        break;
+      case "input":
+        this._onUrlBarInput(aEvent);
+        break;
+    }
+  },
+
   _securityChange: function _securityChange(aJson, aTab) {
     let state = aJson.state;
     let nsIWebProgressListener = Ci.nsIWebProgressListener;
 
     if (state & nsIWebProgressListener.STATE_IDENTITY_EV_TOPLEVEL) {
       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) {
@@ -198,29 +214,27 @@ const WebProgress = {
 
   _progressStop: function _progressStop(aJson, aTab) {
     this._progressActive = false;
     // 'Whoosh out' and fade
     Elements.progress.style.width = "100%";
     Elements.progress.setAttribute("fade", true);
   },
 
-  _progressTransEnd: function _progressTransEnd(data) {
+  _progressTransEnd: function _progressTransEnd(aEvent) {
     if (!Elements.progress.hasAttribute("fade"))
       return;
     // Close out fade finished, reset
-    if (data.propertyName == "opacity") {
+    if (aEvent.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
@@ -242,62 +242,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"/>
       </hbox>
@@ -332,22 +333,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
@@ -322,22 +322,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;
@@ -509,40 +503,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;
@@ -566,19 +560,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);
 }