582676 - Slow CSS selectors in mobile-browser/themes/core

Status: VERIFIED FIXED

Description

[Matt Brubeck (:mbrubeck)]

All of our CSS files, especially platform.css, contain many rules that violate the guidelines in https://developer.mozilla.org/en/writing_efficient_css

Comment 1

[Matt Brubeck (:mbrubeck)]

Created attachment 461019 [details] [diff] [review]
part 1: dialogs, misc platform.css

Since I was already mucking with the dialog styles for bug 582706...

- Removed close buttons from content/prompt/*.xul.  The styles were using slow selectors, and we don't actually display the buttons ever.

- All <dialog> elements in Fennec are loaded by importDialog which always adds a .modal-block container, so ".modal-block dialog" is redundant.

- Clean up some miscellaneous descendant selectors.

Comment 2

[Mark Finkle (:mfinkle) (use needinfo?)]

Comment on attachment 461019 [details] [diff] [review]
part 1: dialogs, misc platform.css


>diff -r 95ec6d359a5a themes/core/platform.css

>-dialog .prompt-header {
>+.prompt-header {

>-dialog .prompt-title {
>+.prompt-title {

>-  dialog .prompt-header {
>+  .prompt-header {

>-  dialog .prompt-title {
>+  .prompt-title {

>-dialog .prompt-message {
>+.prompt-message {
>   margin-top: 8px;

>-dialog .button-checkbox {
>+.prompt-header > .button-checkbox {

I'm a little worried about collisions from add-ons on these. I'd rather add the direct lineage as needed and keep them a bit more explicit and not so general purpose.

Comment 3

[Matt Brubeck (:mbrubeck)]

Created attachment 461233 [details] [diff] [review]
part 1: dialogs, v2

Use more specific selectors for dialog parts.

Comment 4

[Matt Brubeck (:mbrubeck)]

pushed part 1: http://hg.mozilla.org/mobile-browser/rev/ec0920b0e0ad

Comment 5

[Matt Brubeck (:mbrubeck)]

Created attachment 461559 [details] [diff] [review]
part 2: select-list, context menu

Also makes the sharing popup title use the same font size as the context menu title.

Comment 6

[Mark Finkle (:mfinkle) (use needinfo?)]

Comment on attachment 461559 [details] [diff] [review]
part 2: select-list, context menu

As I mentioned before, we just need to be careful we don't end up with a too general class name for some of these selectors. Add-ons could also be using short simple class names too and break us.

These changes look OK. "context-command" is getting close to the edge though.

Comment 7

[Matt Brubeck (:mbrubeck)]

Created attachment 461607 [details] [diff] [review]
part 3: content-navigator, buttons

Comment 8

[Matt Brubeck (:mbrubeck)]

Part 2 pushed: http://hg.mozilla.org/mobile-browser/rev/f058076d4162

Comment 9

[Mark Finkle (:mfinkle) (use needinfo?)]

Comment on attachment 461607 [details] [diff] [review]
part 3: content-navigator, buttons


>     <!-- options dialog for select form field -->
>     <vbox id="select-container" hidden="true" pack="center">
>-      <spacer flex="1000"/>
>+      <spacer flex="1000" id="select-spacer"/>

id before flex, please

>diff -r f058076d4162 chrome/content/prompt/alert.xul

>   <hbox class="prompt-buttons">
>-    <button id="prompt-button-ok" label="&ok.label;" command="cmd_ok"/>
>+    <button class="prompt-button" id="prompt-button-ok" label="&ok.label;" command="cmd_ok"/>

id before name, please


r+ with nits

Comment 10

[Matt Brubeck (:mbrubeck)]

part 3: http://hg.mozilla.org/mobile-browser/rev/7fc14c9eaf30

Comment 11

[Fabrice Desré]

 
> As I mentioned before, we just need to be careful we don't end up with a too
> general class name for some of these selectors. Add-ons could also be using
> short simple class names too and break us.

 That's true, and this is documented in the mobile add-ons guide in the wiki  (https://wiki.mozilla.org/Mobile/Fennec/Extensions/BestPractices#Conflicts). I guess we are fine with the current patch

Comment 12

[Matt Brubeck (:mbrubeck)]

Created attachment 469634 [details] [diff] [review]
part 4: documenttab

This one is short and sweet.

Comment 13

[Matt Brubeck (:mbrubeck)]

Comment on attachment 469634 [details] [diff] [review]
part 4: documenttab

Pushed part 4: http://hg.mozilla.org/mobile-browser/rev/d3aa21520dd2

Comment 14

[Anna (Waverley)]

Can someone please verify this or provide me some steps to reproduce so that I can validate it ?

Comment 15

[Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please)]

you can mark it as verified

Comment 16

[Anna (Waverley)]

VERIFIED FIXED on:

Build ID: Mozilla/5.0 (Maemo; Linux armv7l; rv:6.0a1) Gecko/20110510
Firefox/6.0a1 Fennec/6.0a1

Mozilla /5.0 (Android;Linux armv7l;rv:6.0a1) Gecko/20110515 Firefox/6.0a1 Fennec/6.0a1 


Mozilla /5.0 (Android;Linux armv7l;rv:5.0a1) Gecko/20110515 Firefox/5.0a2 Fennec/5.0a2 

Devices: Nokia N900(Maemo GTK), HTC Desire Z (Android 2.2)