559034 - [Mac] New location bar style

Status: RESOLVED FIXED

(Firefox :: Theme, defect)

Description

[Markus Stange [:mstange]]

Attachment: v1

Comment 1

[Markus Stange [:mstange]]

Tryserver build for bug 547787, bug 559033 and this bug (without the most recent improvements) is here: https://build.mozilla.org/tryserver-builds/[e-mail]-try-1b696f29214e/try-1b696f29214e-macosx.dmg

Comment 2

[Markus Stange [:mstange]]

Oh, the #restore-button changes slipped into this patch instead of bug 559033.

Comment 3

[Dão Gottwald [:dao]]

Comment on attachment 438741 [details] [diff] [review]
v1

>+  background-image: -moz-linear-gradient(top, #588EC6, #3C68AE), -moz-linear-gradient(top, #4F6598, #344985);

I don't understand what this is meant to do, since both gradients are opaque...

Please fix the interaction with bug 559033.

Comment 4

[Markus Stange [:mstange]]

The first one is the inner gradient and the second the gradient in the border. I'm using a 1px solid transparent border and different background-clipping for the two background layers.

Comment 5

[Dão Gottwald [:dao]]

How about using an actual semi-transparent border or inset box shadow?

Comment 6

[Markus Stange [:mstange]]

Then I'd have to figure out the right alpha values; just specifying the color values from the mockup seemed simpler to me. But sure, I can change it if you want me to.

Comment 7

[Dão Gottwald [:dao]]

Please also maintain a button appearance for the identity button in the unknown-identity case. If there's consensus that the button appearance isn't needed in that case, we should remove it on all platforms in a separate bug.

Comment 8

[Markus Stange [:mstange]]

Attachment: v2

Comment 9

[Dão Gottwald [:dao]]

Comment on attachment 451905 [details] [diff] [review]
v2

>+.autocomplete-history-dropmarker {
>+  -moz-margin-end: 3px;
>+}

This is probably meant to be #urlbar > .autocomplete-history-dropmarker.

Why is it that the location bar and the search bar don't share any code anymore? Ideally I think they'd use the same basic textbox styling but with different radii.

Comment 10

[Markus Stange [:mstange]]

Attachment: v3

(In reply to comment #9)
> (From update of attachment 451905 [details] [diff] [review])
> >+.autocomplete-history-dropmarker {
> >+  -moz-margin-end: 3px;
> >+}
> 
> This is probably meant to be #urlbar > .autocomplete-history-dropmarker.

Fixed

> Why is it that the location bar and the search bar don't share any code
> anymore? Ideally I think they'd use the same basic textbox styling but with
> different radii.

They still share some code, but it's not much:
.searchbar-textbox,
#urlbar {
  font: icon;
  width: 7em;
  min-width: 7em;
  -moz-appearance: none;
  border: 0;
  -moz-box-shadow: 0 1px rgba(255, 255, 255, 0.2);
  margin: 0 4px;
}

The big difference is that the identity button no longer needs to smoothly connect with the border of the URL bar.
The searchbar (and the old urlbar) works like this: .searchbar-textbox has a dark background that works as the border, the engine button is on top of that, and on top of the engine button is the white rounded text field. The white fill can't go directly on .searchbar-textbox because then there would be white behind the engine button, and that would show through in its anti-aliased curve.
Since the new urlbar doesn't have that problem we can put the white background directly on #urlbar, and do away with this:

-#urlbar > .autocomplete-textbox-container > .textbox-input-box,
-#urlbar-icons,
-#urlbar > .autocomplete-history-dropmarker {
-  background: -moz-linear-gradient(#D6D6D6, #D6D6D6 1px, #F7F7F7 1px, #F7F7F7 2px, #FFF 2px, #FFF);
-}

Comment 11

[Stephen Horlander [:shorlander]]

(In reply to comment #9)
> The big difference is that the identity button no longer needs to smoothly
> connect with the border of the URL bar.
> The searchbar (and the old urlbar) works like this: .searchbar-textbox has a
> dark background that works as the border, the engine button is on top of that,
> and on top of the engine button is the white rounded text field. The white fill
> can't go directly on .searchbar-textbox because then there would be white
> behind the engine button, and that would show through in its anti-aliased
> curve.
> Since the new urlbar doesn't have that problem we can put the white background
> directly on #urlbar, and do away with this:

At this point would it be more or less complex to remove the search selector button? Which we want to do at some point anyway.

https://wiki.mozilla.org/images/6/69/Firefox-4-Mockup-i06-(OSX)-(TabsTop).png

Comment 12

[Markus Stange [:mstange]]

(In reply to comment #11)
> At this point would it be more or less complex to remove the search selector
> button? Which we want to do at some point anyway.
> 
> https://wiki.mozilla.org/images/6/69/Firefox-4-Mockup-i06-(OSX)-(TabsTop).png

Oh! Less complex, probably. I only need the dropmarker image (in both normal and pressed form, if they're different).

Comment 13

[Stephen Horlander [:shorlander]]

There isn't a pressed form of the dropmarker.

Comment 14

[Markus Stange [:mstange]]

Comment on attachment 451989 [details] [diff] [review]
v3

I'll make the searchbar style change, so you can have your shared code :)

Comment 15

[Markus Stange [:mstange]]

Attachment: v4

Comment 16

[Markus Stange [:mstange]]

Attachment: v5

Fix searchbar.css... I hadn't removed the %include after I turned off preprocessing for it.

Comment 17

[Dão Gottwald [:dao]]

Comment on attachment 452041 [details] [diff] [review]
v5

>+#urlbar > .autocomplete-history-dropmarker {
>+  -moz-margin-end: 3px;
>+}
>+
> #wrapper-urlbar-container[place="palette"] {
>   max-width: 20em;
> }
> 
> #wrapper-urlbar-container #identity-icon-labels,
> #wrapper-urlbar-container .autocomplete-history-dropmarker > .dropmarker-icon {
>   display: none;
> }
> 
> #wrapper-urlbar-container .autocomplete-history-dropmarker {
>-  width: 10px;
>+  width: 0;
> }

Looks like you just want to hide .autocomplete-history-dropmarker rather than the icon, and the textbox should have a padding-end.

>+.searchbar-engine-button[addengines="true"] {
>+  background: transparent url(chrome://browser/skin/Search-addengines.png) no-repeat right center;
>+}
[...]
>-.searchbar-engine-button[addengines="true"] > .button-box {
>-  background: transparent url(chrome://browser/skin/Search-addengines.png) no-repeat right center;
> }
> 
> .searchbar-textbox:-moz-locale-dir(rtl) .searchbar-engine-button[addengines="true"] > .button-box {
>   background-position: left center;
> }

This seems to break rtl.

Comment 18

[Markus Stange [:mstange]]

Attachment: v6

Comment 19

[Dão Gottwald [:dao]]

So you removed

+#urlbar > .autocomplete-history-dropmarker {
+  -moz-margin-end: 3px;
+}

and added

+#wrapper-urlbar-container #urlbar {
+  -moz-padding-end: 3px;
 }

Shouldn't the urlbar *always* have this padding, just like the dropmarker always had the margin?

Comment 20

[Markus Stange [:mstange]]

Attachment: v7

Good thing you're paying more attention than I am.

Comment 21

[Dão Gottwald [:dao]]

Comment on attachment 452455 [details] [diff] [review]
v7

>+              -moz-linear-gradient(top, rgba(0,0,0,.5), rgba(0,0,0,.2));

Please remove "top, " throughout this patch.

> #wrapper-urlbar-container #identity-icon-labels,
>-#wrapper-urlbar-container .autocomplete-history-dropmarker > .dropmarker-icon {
>+#wrapper-urlbar-container .autocomplete-history-dropmarker {
>   display: none;
> }

I think the child selector would be appropriate here. Maybe use the universal selector where the chain gets too long.

Comment 22

[Markus Stange [:mstange]]

Attachment: v8

Ready for landing.

Comment 23

[Markus Stange [:mstange]]

Attachment: v8

updated to trunk

Comment 24

[Markus Stange [:mstange]]

http://hg.mozilla.org/mozilla-central/rev/8864df07eda6