Bug 582676 - Slow CSS selectors in mobile-browser/themes/core (pt 3) [r=mfinkle]
authorMatt Brubeck <mbrubeck@mozilla.com>
Fri, 30 Jul 2010 12:03:03 -0700
changeset 66419 9a362db982b71d399c4e07015b3c211589da096c
parent 66418 9e8c970cc961e2b7fb9e3907c0b5fa01c92b209a
child 66420 cb54c18ddcbecaff4d0a720ea2d674ffeb46fbee
push id1
push userroot
push dateTue, 26 Apr 2011 22:38:44 +0000
treeherdermozilla-beta@bfdb6e623a36 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmfinkle
bugs582676
Bug 582676 - Slow CSS selectors in mobile-browser/themes/core (pt 3) [r=mfinkle]
mobile/chrome/content/bindings.xml
mobile/chrome/content/browser-ui.js
mobile/chrome/content/browser.xul
mobile/chrome/content/prompt/alert.xul
mobile/chrome/content/prompt/confirm.xul
mobile/chrome/content/prompt/prompt.xul
mobile/chrome/content/prompt/promptPassword.xul
mobile/chrome/content/prompt/select.xul
mobile/components/PromptService.js
mobile/themes/core/browser.css
--- a/mobile/chrome/content/bindings.xml
+++ b/mobile/chrome/content/bindings.xml
@@ -1060,20 +1060,20 @@
         ]]>
       </handler>
     </handlers>
   </binding>
 
   <binding id="content-navigator">
     <content pack="end">
       <children includes="vbox"/>
-      <xul:hbox class="panel-dark" pack="end">
+      <xul:hbox class="content-navigator-box 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:toolbarbutton anonid="previous-button" class="content-navigator-item button-image previous-button" xbl:inherits="command=previous"/>
+        <xul:toolbarbutton anonid="next-button" class="content-navigator-item button-image next-button" xbl:inherits="command=next"/>
       </xul:hbox>
     </content>
 
     <implementation>
       <field name="_previousButton">
         document.getAnonymousElementByAttribute(this, "anonid", "previous-button");
       </field>
 
--- a/mobile/chrome/content/browser-ui.js
+++ b/mobile/chrome/content/browser-ui.js
@@ -1667,16 +1667,17 @@ var FormHelperUI = {
     while (autofill.hasChildNodes())
       autofill.removeChild(autofill.lastChild);
 
     let fragment = document.createDocumentFragment();
     for (let i = 0; i < aSuggestions.length; i++) {
       let value = aSuggestions[i];
       let button = document.createElement("label");
       button.setAttribute("value", value);
+      button.className = "form-helper-autofill-label";
       fragment.appendChild(button);
     }
     autofill.appendChild(fragment);
     autofill.collapsed = !aSuggestions.length;
   },
 
   /** Retrieve the autocomplete list from the autocomplete service for an element */
   _getAutocompleteSuggestions: function _formHelperGetAutocompleteSuggestions(aElement) {
@@ -2167,16 +2168,17 @@ var SharingUI = {
     this._dialog = importDialog(window, "chrome://browser/content/share.xul", null);
     document.getElementById("share-title").value = aTitle || aURL;
 
     BrowserUI.pushPopup(this, this._dialog);
 
     let bbox = document.getElementById("share-buttons-box");
     this._handlers.forEach(function(handler) {
       let button = document.createElement("button");
+      button.className = "prompt-button";
       button.setAttribute("label", handler.name);
       button.addEventListener("command", function() {
         handler.callback(aURL, aTitle);
         SharingUI.hide();
       }, false);
       bbox.appendChild(button);
     });
     this._dialog.waitForClose();
--- a/mobile/chrome/content/browser.xul
+++ b/mobile/chrome/content/browser.xul
@@ -274,18 +274,18 @@
             </vbox>
           </vbox>
         </scrollbox>
 
         <!-- popup for content navigator helper -->
         <vbox id="content-navigator" class="window-width" top="0" spacer="content-navigator-spacer">
           <arrowscrollbox id="form-helper-autofill" collapsed="true" align="center" flex="1" orient="horizontal"
                           onclick="FormHelperUI.doAutoComplete(event.target);"/>
-          <textbox id="select-helper-textbox" oncommand="SelectHelperUI.filter(this.value)" type="search" flex="1" hidden="true"/>
-          <textbox id="find-helper-textbox" oncommand="FindHelperUI.search(this.value)" oninput="FindHelperUI.updateCommands(this.value);" type="search" flex="1"/>
+          <textbox id="select-helper-textbox" class="content-navigator-item" oncommand="SelectHelperUI.filter(this.value)" type="search" flex="1" hidden="true"/>
+          <textbox id="find-helper-textbox" class="content-navigator-item" oncommand="FindHelperUI.search(this.value)" oninput="FindHelperUI.updateCommands(this.value);" type="search" flex="1"/>
         </vbox>
       </stack>
 
       <!-- Right toolbar -->
       <vbox class="panel-dark">
         <!-- Because of the stack + fixed position of the urlbar when it is in
              locked mode the event on the top-right part of the urlbar are
              swallow by this spacer, but not with the mousethrough attribute
@@ -494,17 +494,17 @@
         <description flex="1">&bookmarksHeader.label;</description>
         <toolbarbutton id="tool-bookmarks-close" class="urlbar-button button-image" command="cmd_close"/>
       </hbox>
       <placelist id="bookmark-items" type="bookmarks" flex="1" onopen="BookmarkList.openBookmark();" autoedit="true"/>
     </vbox>
 
     <!-- options dialog for select form field -->
     <vbox id="select-container" hidden="true" pack="center">
-      <spacer flex="1000"/>
+      <spacer id="select-spacer" flex="1000"/>
       <vbox id="select-container-inner" class="dialog-dark" flex="1">
         <scrollbox id="select-list" flex="1" orient="vertical"/>
         <hbox id="select-buttons" pack="center">
           <button id="select-buttons-done" class="button-dark" label="&selectHelper.done;" oncommand="SelectHelperUI.hide();"/>
         </hbox>
       </vbox>
       <spacer flex="1000"/>
     </vbox>
--- a/mobile/chrome/content/prompt/alert.xul
+++ b/mobile/chrome/content/prompt/alert.xul
@@ -27,11 +27,11 @@
 
     <button id="prompt-alert-checkbox" type="checkbox" class="button-checkbox" collapsed="true" pack="start" flex="1">
       <image class="button-image-icon"/>
       <description id="prompt-alert-checkbox-label" class="prompt-checkbox-label" flex="1"/>
     </button>
   </vbox>
 
   <hbox class="prompt-buttons">
-    <button id="prompt-button-ok" label="&ok.label;" command="cmd_ok"/>
+    <button id="prompt-button-ok" class="prompt-button" label="&ok.label;" command="cmd_ok"/>
   </hbox>
 </dialog>
--- a/mobile/chrome/content/prompt/confirm.xul
+++ b/mobile/chrome/content/prompt/confirm.xul
@@ -27,12 +27,12 @@
 
     <button id="prompt-confirm-checkbox" type="checkbox" class="button-checkbox" collapsed="true" pack="start" flex="1">
       <image class="button-image-icon"/>
       <description id="prompt-confirm-checkbox-label" class="prompt-checkbox-label" flex="1"/>
     </button>
   </vbox>
 
   <hbox id="prompt-confirm-buttons-box" class="prompt-buttons">
-    <button label="&ok.label;" command="cmd_ok"/>
-    <button label="&cancel.label;" command="cmd_cancel"/>
+    <button class="prompt-button" label="&ok.label;" command="cmd_ok"/>
+    <button class="prompt-button" label="&cancel.label;" command="cmd_cancel"/>
   </hbox>
 </dialog>
--- a/mobile/chrome/content/prompt/prompt.xul
+++ b/mobile/chrome/content/prompt/prompt.xul
@@ -29,12 +29,12 @@
 
     <button id="prompt-prompt-checkbox" type="checkbox" class="button-checkbox" collapsed="true" pack="start" flex="1">
       <image class="button-image-icon"/>
       <description id="prompt-prompt-checkbox-label" class="prompt-checkbox-label" flex="1"/>
     </button>
   </vbox>
 
   <hbox class="prompt-buttons">
-    <button label="&ok.label;" command="cmd_ok"/>
-    <button label="&cancel.label;" command="cmd_cancel"/>
+    <button class="prompt-button" label="&ok.label;" command="cmd_ok"/>
+    <button class="prompt-button" label="&cancel.label;" command="cmd_cancel"/>
   </hbox>
 </dialog>
--- a/mobile/chrome/content/prompt/promptPassword.xul
+++ b/mobile/chrome/content/prompt/promptPassword.xul
@@ -49,12 +49,12 @@
   
     <button id="prompt-password-checkbox" type="checkbox" class="button-checkbox" collapsed="true" pack="start" flex="1">
       <image class="button-image-icon"/>
       <description id="prompt-password-checkbox-label" class="prompt-checkbox-label" flex="1"/>
     </button>
   </vbox>
 
   <hbox class="prompt-buttons">
-    <button label="&ok.label;" command="cmd_ok"/>
-    <button label="&cancel.label;" command="cmd_cancel"/>
+    <button class="prompt-button" label="&ok.label;" command="cmd_ok"/>
+    <button class="prompt-button" label="&cancel.label;" command="cmd_cancel"/>
   </hbox>
 </dialog>
--- a/mobile/chrome/content/prompt/select.xul
+++ b/mobile/chrome/content/prompt/select.xul
@@ -24,12 +24,12 @@
     <scrollbox orient="vertical" class="prompt-message" flex="1">
       <description id="prompt-select-message"/>
     </scrollbox>
 
     <menulist id="prompt-select-list" class="button-dark"/>
   </vbox>
 
   <hbox class="prompt-buttons">
-    <button label="&ok.label;" command="cmd_ok"/>
-    <button label="&cancel.label;" command="cmd_cancel"/>
+    <button class="prompt-button" label="&ok.label;" command="cmd_ok"/>
+    <button class="prompt-button" label="&cancel.label;" command="cmd_cancel"/>
   </hbox>
 </dialog>
--- a/mobile/components/PromptService.js
+++ b/mobile/components/PromptService.js
@@ -369,16 +369,17 @@ Prompt.prototype = {
         break;
         case Ci.nsIPromptService.BUTTON_TITLE_IS_STRING :
           bTitle = titles[i];
         break;
       }
       
       if (bTitle) {
         let button = doc.createElement("button");
+        button.className = "prompt-button";
         this.setLabelForNode(button, bTitle);
         if (i == defaultButton) {
           button.setAttribute("command", "cmd_ok"); 
         }
         else {
           button.setAttribute("oncommand",
             "document.getElementById('prompt-confirm-dialog').PromptHelper.closeConfirm(" + i + ")");
         }
--- a/mobile/themes/core/browser.css
+++ b/mobile/themes/core/browser.css
@@ -854,38 +854,34 @@ box[type="documenttab"]:only-child .docu
 
 #identity-container[mode="verifiedIdentity"] > hbox > #identity-popup-icon {
   list-style-image: url("chrome://browser/skin/images/identityEV-64.png");
 }
 
 /* Popup Body Text */
 #identity-popup-content-box {
   -moz-padding-start: 8px; /* core spacing */
+  font-size: 18px !important;
+  white-space: pre-wrap;
 }
 
 /* let the text flow into a second row, if needed */
 #identity-popup-runBy-box {
   display: block;
 }
 
 #identity-popup-content-box.unknownIdentity > hbox > #identity-popup-connectedToLabel,
 #identity-popup-content-box.unknownIdentity > hbox > #identity-popup-runByLabel,
 #identity-popup-content-box.unknownIdentity > hbox > #identity-popup-content-host,
 #identity-popup-content-box.unknownIdentity > hbox > #identity-popup-content-owner,
 #identity-popup-content-box.verifiedIdentity > hbox > #identity-popup-connectedToLabel2,
 #identity-popup-content-box.verifiedDomain > hbox > #identity-popup-connectedToLabel2 {
   display: none;
 }
 
-#identity-popup-content-box > hbox > description,
-#identity-popup-content-box > hbox > label {
-  font-size: 18px !important;
-  white-space: pre-wrap;
-}
-
 #identity-popup-encryption-label,
 #identity-popup-content-verifier {
   font-size: 14px !important;
 }
 
 #identity-popup-content-host,
 #identity-popup-content-owner {
   font-weight: bold;
@@ -911,124 +907,124 @@ box[type="documenttab"]:only-child .docu
   border: none;
   padding: 0;
   -moz-user-focus: ignore;
   display: inline-block;
   -moz-border-radius-bottomleft: 8px;
   -moz-border-radius-bottomright: 8px;
 }
 
-.prompt-buttons > button,
+.prompt-button,
 pageaction {
   -moz-border-top-colors: rgb(235, 235, 235);
   -moz-border-right-colors: rgb(205, 205, 205);
   -moz-border-bottom-colors: rgb(205, 205, 205);
   -moz-border-left-colors: rgb(235, 235, 235);
   background-color: rgb(235,235,235);
   border-style: solid;
   border-width: 1px !important;
   height: 64px;
   width :100%;
 }
 
 /* Override buttons style */
-.prompt-buttons > button {
+.prompt-button {
   margin: 0;
   -moz-border-image: none !important;
 }
 
-.prompt-buttons > button > .button-box {
+.prompt-button > .button-box {
   padding: 0 4px 1px 3px !important;
 }
 
 @media (min-width: 500px) {
-  .prompt-buttons > button,
+  .prompt-button,
   pageaction {
     width: 50%;
   }
 
-  .prompt-buttons > button:nth-last-child(2):not(:nth-child(even)),
+  .prompt-button:nth-last-child(2):not(:nth-child(even)),
   pageaction:nth-last-child(2):not(:nth-child(even)) {
     background-image: -moz-linear-gradient(top, rgb(235,235,235) 0%, rgb(215,215,215) 90%);
     border-bottom: 1px solid #fff;
     -moz-border-radius-bottomleft: 8px;
   }
 
-  .prompt-buttons > button:first-child,
-  .prompt-buttons > button:nth-child(2),
+  .prompt-button:first-child,
+  .prompt-button:nth-child(2),
   pageaction:first-child,
   pageaction:nth-child(2) {
     background-image: -moz-linear-gradient(top, rgb(255,255,255) 0%, rgb(235,235,235) 90%) !important;
   }
 
-  .prompt-buttons > button:last-child:not(:nth-child(even)),
+  .prompt-button:last-child:not(:nth-child(even)),
   pageaction:last-child:not(:nth-child(even)) {
     border-bottom: 1px solid #fff;
     -moz-border-radius-bottomleft: 8px;
     -moz-border-radius-bottomright: 8px;
     width: 100%;
   }
 
-  .prompt-buttons > button:last-child:not(:nth-child(odd)),
+  .prompt-button:last-child:not(:nth-child(odd)),
   pageaction:last-child:not(:nth-child(odd)) {
     border-bottom: 1px solid #fff;
     -moz-border-radius-bottomright: 8px;
   }
 }
 
 @media (max-width: 499px) {
-  .prompt-buttons > button:last-child,
+  .prompt-button:last-child,
   pageaction:last-child {
     -moz-border-radius-bottomleft: 8px;
     -moz-border-radius-bottomright: 8px;
   }
 }
 
-.prompt-buttons > button:last-child,
+.prompt-button:last-child,
 pageaction:last-child {
   background-image: -moz-linear-gradient(top, rgb(235,235,235) 0%, rgb(215,215,215) 90%);
 }
 
-.prompt-buttons > button:first-child,
+.prompt-button:first-child,
 pageaction:first-child {
   background-image: -moz-linear-gradient(top, rgb(255,255,255) 0%, rgb(235,235,235) 90%);
 }
 
-.prompt-buttons > button:hover:active,
+.prompt-button:hover:active,
 pageaction:hover:active {
   background-image: none !important;
   background-color: #8db8d8 !important;
 }
 
-pageaction .pageaction-image {
+pageaction > hbox > .pageaction-image {
   width: 32px;
   height: 32px;
   -moz-margin-end: 8px;
 }
 
-pageaction:not([image]) .pageaction-image {
+pageaction:not([image]) > hbox >.pageaction-image {
   width: 0;
 }
 
-.prompt-buttons > button,
-pageaction .pageaction-title {
+.prompt-button,
+.pageaction-title {
   font-size: 24px !important;
   color: #414141 !important;
 }
 
-pageaction .pageaction-desc {
+.pageaction-desc {
   font-size: 14px !important;
   color: #414141;
 }
 
-pageaction:hover:active  .pageaction-desc {
+pageaction:hover:active > vbox > .pageaction-desc {
   color: white;
 }
 
-pageaction .pageaction-desc[value=""] {
+.pageaction-desc[value=""] {
   display: none;
 }
 
 /* Preferences window   ---------------------------------------------------- */
 .settings-title {
   font-weight: bold;
   color: black;
   background-color: lightgray;
@@ -1043,17 +1039,17 @@ pageaction .pageaction-desc[value=""] {
   min-height: 70px; /* row size */
   -moz-box-align: center;
 }
 
 .options-box {
   margin-left: 28px;  /* sized based on the 32px addon image */
 }
 
-.options-box setting:last-child .prefbox {
+.options-box > setting:last-child > .prefbox {
   border-bottom: 0;
 }
 
 /* XXX should be a richlistitem description.title */
 .preftitle {
   font-size: 24px !important;
 }
 
@@ -1083,17 +1079,18 @@ pageaction .pageaction-desc[value=""] {
 
 /* helperapp (save-as) popup ----------------------------------------------- */
 #helperapp-target {
   font-size: 18px !important;
 }
 
 /* navigator popup -------------------------------------------------------------- */
 #content-navigator,
-#content-navigator #select-buttons {
+#content-navigator > #select-container > #select-spacer,
+#content-navigator > #select-container > #select-container-inner > #select-buttons {
   display: none;
 }
 
 #content-navigator[type="find"],
 #content-navigator[type="form"] {
   display: -moz-box;
 }
 
@@ -1112,116 +1109,107 @@ pageaction .pageaction-desc[value=""] {
   -moz-border-radius-topleft: 8px;
   -moz-border-radius-topright: 8px;
   -moz-border-radius-bottomright: 0;
   -moz-border-radius-bottomleft: 0;
   padding: 8px 4px 8px 4px;
   -moz-box-flex: 0;
 }
 
-#content-navigator > #select-container > #select-container-inner > scrollbox {
+#content-navigator > #select-container > #select-container-inner > #select-list {
   min-height: 70px;
 }
 
-#content-navigator > #select-container > spacer {
-  display: none;
-}
-
 #select-buttons {
   padding: 4px 8px; /* row size & core spacing */
 }
 
-#select-buttons > button {
+#select-buttons-done {
   -moz-user-focus: ignore;
   -moz-user-select: none;
 }
 
-#content-navigator > hbox {
+.content-navigator-box {
   padding: 2px 0; /* half row size */
 }
 
-#content-navigator > hbox > textbox,
-#content-navigator > hbox > toolbarbutton {
+#content-navigator > hbox > .content-navigator-item {
   margin: 2px 8px; /* half row size & core spacing */
 }
 
-#content-navigator > hbox > toolbarbutton.previous-button {
+#content-navigator > hbox > .previous-button {
   height: 64px;
   margin-right: 0;
   list-style-image: url("chrome://browser/skin/images/previous-default-64.png");
 }
 
-#content-navigator > hbox > toolbarbutton.previous-button:not([disabled="true"]):hover:active {
+#content-navigator > hbox > .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"] {
+#content-navigator > hbox > .previous-button[disabled="true"] {
   list-style-image: url("chrome://browser/skin/images/previous-disabled-64.png");
 }
 
-#content-navigator > hbox > toolbarbutton.next-button {
+#content-navigator > hbox > .next-button {
   height: 64px;
   margin-left: 0;
   list-style-image: url("chrome://browser/skin/images/next-default-64.png");
 }
 
-#content-navigator > hbox > toolbarbutton.next-button:not([disabled="true"]):hover:active {
+#content-navigator > hbox > .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"] {
+#content-navigator > hbox > .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) */
   color: black;
   background-color: rgb(235,235,235);
   background-image: -moz-linear-gradient(top, rgb(255,255,255) 0%, rgb(235,235,235) 90%);
 }
 
-#form-helper-autofill .autorepeatbutton-down {
+#form-helper-autofill > .autorepeatbutton-down {
   list-style-image: url(images/arrowright-16.png);
 }
 
-#form-helper-autofill .autorepeatbutton-up {
+#form-helper-autofill > .autorepeatbutton-up {
   list-style-image: url(images/arrowleft-16.png);
 }
 
 /* force the autorepeat buttons to create a 'padding' when collapsed */
-#form-helper-autofill autorepeatbutton[collapsed="true"],
-#form-helper-autofill autorepeatbutton[disabled="true"] {
+#form-helper-autofill > autorepeatbutton[collapsed="true"],
+#form-helper-autofill > autorepeatbutton[disabled="true"] {
   visibility: hidden;
 }
 
-#form-helper-autofill > label {
+.form-helper-autofill-label {
   padding: 12px 8px; /* 12px helps get row size for the labels */
   margin: 0;
   border-color: transparent rgb(215,215,215) transparent rgb(255,255,255);
   border-style: solid;
   border-width: 1px;
 }
 
-#form-helper-autofill > label:first-child {
+.form-helper-autofill-label:first-child {
   padding-left: -moz-initial; /* the arrowscrollbox creates enough left padding */
   border-left: none;
 }
 
-#form-helper-autofill > label:last-child {
+.form-helper-autofill-label:last-child {
   border-right: none;
 }
 
-#form-helper-autofill > label:active {
+.form-helper-autofill-label:active {
   background-color: #8db8d8;
 }
 
-#form-helper-container #select-buttons {
-  display: none;
-}
-
 #select-container:not([hidden=true]) + #form-buttons {
   border-top: 0;
 }
 
 /* select popup ------------------------------------------------------------ */
 #stack > #select-container {
   padding: 32px;
 }