Bug 582676 - Slow CSS selectors in mobile-browser/themes/core (pt 3) [r=mfinkle]
--- 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;
}