625974 - Gradients in the address bar should be changed to borders on Mac for speed

Status: RESOLVED FIXED

(Firefox :: Theme, defect)

Description

[Patrick Walton (:pcwalton)]

When resizing the window, I see a lot of time spent drawing the gradients in the UI bar. These gradients can be borders instead, which render a lot quicker.

With this patch and the Mac events patch in bug 625454, resizing about:blank is noticeably faster in Firefox than in Chrome for me.

Comment 1

[Brendan Eich [:brendan]]

Are these so small the gradient isn't visible?

/be

Comment 2

[Patrick Walton (:pcwalton)]

Attachment: Proposed patch.

Proposed patch attached.

Comment 3

[Patrick Walton (:pcwalton)]

(In reply to comment #1)
> Are these so small the gradient isn't visible?
> 
> /be

They're one pixel wide and ~20 pixels tall. I can't tell the difference.

Comment 4

[Markus Stange [:mstange]]

+  border-top: 1px solid rgba(98, 98, 98, 1.0);
+  border-right: 1px solid rgba(120, 120, 120, 1.0);
+  border-left: 1px solid rgba(120, 120, 120, 1.0);
+  border-bottom: 1px solid rgba(140, 140, 140, 1.0);
+  -moz-border-left-colors: none;
+  -moz-border-right-colors: none;
+  -moz-border-top-colors: none;
+  -moz-border-bottom-colors: none;

I think the border shorthand resets -moz-border-*-colors now, so this could be:

  border: 1px solid;
  border-top-color: rgb(98, 98, 98);
  border-right-color: rgb(120, 120, 120);
  border-left-color: rgb(120, 120, 120);
  border-bottom-color: rgb(140, 140, 140);

For opaque colors the #RRGGBB notation is more common in this file, but that probably doesn't matter.

Comment 5

[Dão Gottwald [:dao]]

Comment on attachment 505216 [details] [diff] [review]
Proposed patch.

>+  border-top: 1px solid rgba(98, 98, 98, 1.0);
>+  border-right: 1px solid rgba(120, 120, 120, 1.0);
>+  border-left: 1px solid rgba(120, 120, 120, 1.0);
>+  border-bottom: 1px solid rgba(140, 140, 140, 1.0);
>+  -moz-border-left-colors: none;
>+  -moz-border-right-colors: none;
>+  -moz-border-top-colors: none;
>+  -moz-border-bottom-colors: none;

Replace with:
  border: 1px solid;
  border-color: rgb(98,98,98) rgb(120,120,120) rgb(140,140,140);

Also add background-clip: padding-box; here for the corners to look right in focused state.

> #urlbar:-moz-window-inactive,
> .searchbar-textbox:-moz-window-inactive {
>-  background-image: -moz-linear-gradient(#D6D6D6, #D6D6D6 1px, #F7F7F7 1px, #F7F7F7 2px, #FFF 2px, #FFF),
>-                    -moz-linear-gradient(@toolbarbuttonInactiveBorderColor@, @toolbarbuttonInactiveBorderColor@);
>+  border: 1px solid @toolbarbuttonInactiveBorderColor@;

border-color: @toolbarbuttonInactiveBorderColor@;

> #urlbar[focused="true"],
> .searchbar-textbox[focused="true"] {
>-  background-color: -moz-mac-focusring;
>-  background-image: -moz-linear-gradient(#D6D6D6, #D6D6D6 1px, #F7F7F7 1px, #F7F7F7 2px, #FFF 2px, #FFF),
>-                    -moz-linear-gradient(rgba(0,0,0,.1), rgba(0,0,0,.1));
>+  border: 1px solid -moz-mac-focusring;

border-color: -moz-mac-focusring;

r=me with these changes.

Comment 6

[Stephen Horlander [:shorlander]]

Comment on attachment 505216 [details] [diff] [review]
Proposed patch.

This looks good with the changes Dão suggested.

Comment 7

[Patrick Walton (:pcwalton)]

Attachment: Proposed patch, version 2.

Patch version 2 addresses review comments. Requesting approval2.0 for this small, low-risk CSS change.

Comment 8

[Paul O'Shannessy [:zpao] (not bugmail, email directly)]

Pushed http://hg.mozilla.org/mozilla-central/rev/b9e2c6e0f2ad