681974 - [10.7] Update LocationBar and SearchBar for Lion

Status: RESOLVED FIXED

(Firefox :: Theme, defect)

Description

[Stephen Horlander [:shorlander]]

Textfields on unified toolbars in Lion have a slightly different appearance consisting of:

- Lighter border
- Subtle dark inner gradient
- Subtle inner-shadow differences

Comment 1

[Stephen Horlander [:shorlander]]

Attachment: Update Toolbar Textfields Styling for Lion - 01

This is just a CSS patch. I am not sure if you had something different in mind like drawing the toolbar buttons in bug 667480.

Comment 2

[Markus Stange [:mstange]]

Comment on attachment 555748 [details] [diff] [review]
Update Toolbar Textfields Styling for Lion - 01

I think the main browser toolbar text fields should definitely stay in CSS. Maybe we can draw the Places manager search field with -moz-appearance / CoreUI in the future, but I don't know yet whether that will work out, so let's do it the CSS way for now.

Comment 3

[Markus Stange [:mstange]]

Note to self: This gives search/text field cells the toolbar appearance on 10.7:
@implementation NSTextFieldCell(ToolbarAppearance)
- (BOOL)_isToolbarMode { return YES; }
@end

Comment 4

[Markus Stange [:mstange]]

And this is how to draw them with CoreUI:
(gdb) po $rdx
{
    focus = 0;
    "is.flipped" = 1;
    kCUIVariantKey = kCUIVariantTextFieldRoundToolbar;
    size = regular;
    state = normal;
    widget = textfieldround;
}

Comment 5

[Dão Gottwald [:dao]]

Comment on attachment 555748 [details] [diff] [review]
Update Toolbar Textfields Styling for Lion - 01

>+  #searchFilter > .textbox-input-box {
>+    -moz-padding-start: 15px;
>+    background: url("chrome://global/skin/icons/search-textbox.png") left no-repeat;
>+  }

Why is this on the inner box rather than the textbox?

Comment 6

[Stephen Horlander [:shorlander]]

(In reply to Dão Gottwald [:dao] from comment #5)
> Comment on attachment 555748 [details] [diff] [review]
> Update Toolbar Textfields Styling for Lion - 01
> 
> >+  #searchFilter > .textbox-input-box {
> >+    -moz-padding-start: 15px;
> >+    background: url("chrome://global/skin/icons/search-textbox.png") left no-repeat;
> >+  }
> 
> Why is this on the inner box rather than the textbox?

Putting it directly on the textbox makes the background-positioning more fiddly and less rtl friendly.

Comment 7

[Markus Stange [:mstange]]

I've attached a patch in bug 682541 that makes -moz-appearance: searchfield automatically turn on the toolbar style when on a toolbar / statusbar. With that patch, the Places window part of the patch here will be unnecessary.

Comment 8

[Stephen Horlander [:shorlander]]

Attachment: Update Toolbar Textfields Styling for Lion - 02

Comment 9

[Dão Gottwald [:dao]]

Comment on attachment 556882 [details] [diff] [review]
Update Toolbar Textfields Styling for Lion - 02

>--- a/browser/themes/pinstripe/browser/browser.css
>+++ b/browser/themes/pinstripe/browser/browser.css

>+@media (-moz-mac-lion-theme) {

>+  #urlbar:-moz-window-inactive,
>+  .searchbar-textbox:-moz-window-inactive {
>+    border-color: @toolbarTextfieldBorderColorLion@;
>+  }

Rather than overriding it, can you change the original :-moz-window-inactive rule to exclude lion? ("@media not all and (-moz-mac-lion-theme)")

Comment 10

[Stephen Horlander [:shorlander]]

Attachment: Update Toolbar Textfields Styling for Lion - 03

(In reply to Dão Gottwald [:dao] from comment #9)
> Rather than overriding it, can you change the original :-moz-window-inactive
> rule to exclude lion? ("@media not all and (-moz-mac-lion-theme)")

Updated patch with this change.

Comment 11

[Dão Gottwald [:dao]]

Comment on attachment 557252 [details] [diff] [review]
Update Toolbar Textfields Styling for Lion - 03

>+@media (-moz-mac-lion-theme) {
>+  #urlbar,
>+  .searchbar-textbox {
>+    background-image: @toolbarTextfieldBackgroundLion@;
>+    border-color: @toolbarTextfieldBorderColorLion@;
>+    box-shadow: @toolbarTextfieldShadowLion@;
>+  }
>+}

Please move this up, right after '#urlbar, .searchbar-textbox {}', before '@media not all and (-moz-mac-lion-theme) {'.

>--- a/toolkit/themes/pinstripe/global/shared.inc
>+++ b/toolkit/themes/pinstripe/global/shared.inc

>+%define toolbarTextfieldBorderColorLion hsla(0,0%,0%,.35) hsla(0,0%,0%,.25) hsla(0,0%,0%,.15)
>+%define toolbarTextfieldBackgroundLion -moz-linear-gradient(hsl(0,0%,97%), hsl(0,0%,100%))
>+%define toolbarTextfieldShadowLion 0 1px 0 hsla(0,0%,100%,.2), inset 0 0 1px hsla(0,0%,0%,.05), inset 0 1px 2px hsla(0,0%,0%,.1)

There's actually no reason to share this stuff when it's used only once.

Comment 12

[Stephen Horlander [:shorlander]]

(In reply to Dão Gottwald [:dao] from comment #11)
> Please move this up, right after '#urlbar, .searchbar-textbox {}', before
> '@media not all and (-moz-mac-lion-theme) {'.
> 
> There's actually no reason to share this stuff when it's used only once.

Yeah I guess there isn't anything else that would use this.

I will make these changes before I push. Thanks!

Comment 13

[Marco Bonardo [:mak] (Away Apr 25 - May 5)]

http://hg.mozilla.org/mozilla-central/rev/c8cd6f227ead