From 10f90ac8e9c8bf69ee7312b5168763626a3ec56e Mon Sep 17 00:00:00 2001 From: Vivien Nicolas <21@vingtetun.org> Date: Wed, 2 Jun 2010 12:04:01 +0200 Subject: [PATCH] Bug 567472 - content.css performance issues [r=mfinkle,dbaron] --- mobile/chrome/content/content.css | 143 +++++++++++++++--------------- 1 file changed, 73 insertions(+), 70 deletions(-) diff --git a/mobile/chrome/content/content.css b/mobile/chrome/content/content.css index e7eb8ee649fb..527589e555a8 100644 --- a/mobile/chrome/content/content.css +++ b/mobile/chrome/content/content.css @@ -36,8 +36,11 @@ * * ***** END LICENSE BLOCK ***** */ +@namespace url("http://www.w3.org/1999/xhtml"); +@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + /* make clicking on links stand out a bit (bug 532206) */ -html *:not(embed):focus, *:focus > font { +* > *:not(embed):focus, * > *:focus > font { outline: 2px solid #8db8d8 !important; /* XXX How do I preserve mac focusring without blowing focus color on other platforms? @@ -45,22 +48,22 @@ html *:not(embed):focus, *:focus > font { */ } -html *|*:link:focus, *|*:visited:focus { +*:link:focus, *:visited:focus { outline-offset: -2px; } /* Style the scrollbars */ -scrollbar { +xul|scrollbar { -moz-appearance: none !important; display: none !important; } -scrollbarbutton { +xul|scrollbarbutton { -moz-appearance: none !important; display: none !important; } -thumb { +xul|thumb { min-width: 10px !important; -moz-appearance: none !important; background-color: gray !important; @@ -76,83 +79,83 @@ select[size="1"] scrollbarbutton { } /* Override inverse OS themes */ -html select, -html button, -html textarea, -html input:not([type="image"]) { +select, +textarea, +button, +* > input:not([type="image"]) { -moz-border-radius: 3px; } -html select[size], -html select[multiple], -html select[size][multiple], -html textarea, -html input:not([type="image"]) { +select[size], +select[multiple], +select[size][multiple], +textarea, +* > input:not([type="image"]) { border-style: solid; border-color: #7d7d7d; color: #414141; background: white -moz-linear-gradient(top, rgba(115,115,115,0.5) 0, rgba(215,215,215,0.5) 3px, rgba(255,255,255,0.2) 16px); } -html select:not([size]):not([multiple]), -html select[size="0"], -html select[size="1"], -html input[type="button"], -html input[type="submit"], -html input[type="reset"], -html button { +select:not([size]):not([multiple]), +select[size="0"], +select[size="1"], +* > input[type="button"], +* > input[type="submit"], +* > input[type="reset"], +button { border-style: solid; border-color: #7d7d7d; color: #414141; background: white -moz-linear-gradient(top, rgba(255,255,255,0.2) 0, rgba(215,215,215,0.5) 18px, rgba(115,115,115,0.5) 100%); } -html input[type="checkbox"] { +input[type="checkbox"] { background: white -moz-linear-gradient(top, rgba(115,115,115,0.5) 0, rgba(215,215,215,0.5) 2px, rgba(255,255,255,0.2) 6px); } -html input[type="radio"] { +input[type="radio"] { background: -moz-radial-gradient(6px 6px, cover, rgba(255,255,255,0.2) 3px, rgba(195,195,195,0.5) 5px, rgba(115,115,115,0.5) 100%); } -html select { +select { border-width: 1px; padding: 1px; } -html select:not([size]):not([multiple]), -html select[size="0"], -html select[size="1"] { +select:not([size]):not([multiple]), +select[size="0"], +select[size="1"] { padding: 0 1px 0 1px; } -html input:not([type="image"]) { +* > input:not([type="image"]) { border-width: 1px; padding: 1px; } -html textarea { +textarea { border-width: 1px; padding: 2px 1px 2px 1px; } -html input[type="button"], -html input[type="submit"], -html input[type="reset"], -html button { +input[type="button"], +input[type="submit"], +input[type="reset"], +button { border-width: 1px; padding: 0 7px 0 7px; } -html input[type="radio"], -html input[type="checkbox"] { +input[type="radio"], +input[type="checkbox"] { max-width: 14px; max-height: 14px; border: 1px solid #a7a7a7 !important; padding: 2px 1px 2px 1px; } -html select input[type="button"] { +select input[type="button"] { border-width: 0px !important; -moz-border-radius: 0; -moz-background-size: 100% 90%; @@ -165,59 +168,59 @@ html select input[type="button"] { -moz-binding: url("chrome://browser/content/bindings.xml#select-button"); } -html select input[type="button"] > svg { +select input[type="button"] > svg { margin-left: -3px; margin-top: 6px; } -html select[size]:focus, -html select[multiple]:focus, -html select[size][multiple]:focus, -html input[type="file"]:focus > input[type="text"], -html textarea:focus, -html input:not([type="image"]):focus { +select[size]:focus, +select[multiple]:focus, +select[size][multiple]:focus, +textarea:focus, +input[type="file"]:focus > input[type="text"], +* > input:not([type="image"]):focus { outline: 0px !important; border-style: solid; border-color: rgb(94,128,153); background: white -moz-linear-gradient(top, rgba(27,113,177,0.5) 0, rgba(198,225,246,0.2) 3px, rgba(255,255,255,0.2) 16px); } -html select:not([size]):not([multiple]):focus, -html select[size="0"]:focus, -html select[size="1"]:focus, -html input[type="button"]:focus, -html input[type="submit"]:focus, -html input[type="reset"]:focus, -html button:focus { +select:not([size]):not([multiple]):focus, +select[size="0"]:focus, +select[size="1"]:focus, +input[type="button"]:focus, +input[type="submit"]:focus, +input[type="reset"]:focus, +button:focus { outline: 0px !important; border-style: solid; border-color: rgb(94,128,153); background: white -moz-linear-gradient(top, rgba(255,255,255,0.2) 0, rgba(198,225,256,0.2) 18px, rgba(27,113,177,0.5) 100%); } -html input[type="checkbox"]:focus, -html input[type="radio"]:focus { +input[type="checkbox"]:focus, +input[type="radio"]:focus { border-color: #99c6e0 !important; } -html input[type="checkbox"]:focus { +input[type="checkbox"]:focus { background: white -moz-linear-gradient(top, rgba(27,113,177,0.5) 0, rgba(198,225,246,0.2) 2px, rgba(255,255,255,0.2) 6px); } -html input[type="radio"]:focus { +input[type="radio"]:focus { background: -moz-radial-gradient(6px 6px, cover, rgba(255,255,255,0.2) 3px, rgba(198,225,246,0.2) 5px, rgba(27,113,177,0.5) 100%); } /* we need to be specific for selects because the above rules are specific too */ -html textarea[disabled], -html select[size][disabled], -html select[multiple][disabled], -html select[size][multiple][disabled], -html select:not([size]):not([multiple])[disabled], -html select[size="0"][disabled], -html select[size="1"][disabled], -html button[disabled], -html input:not([type="image"])[disabled] { +textarea[disabled], +select[size][disabled], +select[multiple][disabled], +select[size][multiple][disabled], +select:not([size]):not([multiple])[disabled], +select[size="0"][disabled], +select[size="1"][disabled], +button[disabled], +* > input:not([type="image"])[disabled] { color: rgba(0,0,0,0.3); border-color: rgba(125,125,125,0.4); border-style: solid; @@ -225,21 +228,21 @@ html input:not([type="image"])[disabled] { background: transparent -moz-linear-gradient(top, rgba(185,185,185,0.4) 0, rgba(235,235,235,0.4) 3px, rgba(255,255,255,0.4) 100%); } -html input[type="button"][disabled], -html input[type="submit"][disabled], -html input[type="reset"][disabled], -html button[disabled="true"] { +input[type="button"][disabled], +input[type="submit"][disabled], +input[type="reset"][disabled], +button[disabled="true"] { padding: 0 7px 0 7px; background: transparent -moz-linear-gradient(top, rgba(255,255,255,0.4) 0, rgba(235,235,235,0.4) 3px, rgba(185,185,185,0.4) 100%); } -html input[type="checkbox"][disabled], -html input[type="radio"][disabled] { +input[type="checkbox"][disabled], +input[type="radio"][disabled] { border:1px solid rgba(125,125,125,0.4) !important; } -html select[disabled] input[type="button"] { +select[disabled] input[type="button"] { opacity: 0.6; padding: 1px 7px 1px 7px; }