Last Comment Bug 681974 - [10.7] Update LocationBar and SearchBar for Lion
: [10.7] Update LocationBar and SearchBar for Lion
Status: RESOLVED FIXED
:
Product: Firefox
Classification: Client Software
Component: Theme (show other bugs)
: Trunk
: x86 Mac OS X
: -- normal (vote)
: Firefox 9
Assigned To: Stephen Horlander [:shorlander]
:
: Dão Gottwald [:dao]
Mentors:
Depends on: 682541
Blocks: 667456
  Show dependency treegraph
 
Reported: 2011-08-25 09:01 PDT by Stephen Horlander [:shorlander]
Modified: 2011-09-10 08:15 PDT (History)
3 users (show)
See Also:
Crash Signature:
(edit)
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---


Attachments
Update Toolbar Textfields Styling for Lion - 01 (5.10 KB, patch)
2011-08-25 09:05 PDT, Stephen Horlander [:shorlander]
mstange: feedback+
Details | Diff | Splinter Review
Update Toolbar Textfields Styling for Lion - 02 (2.27 KB, patch)
2011-08-30 09:40 PDT, Stephen Horlander [:shorlander]
no flags Details | Diff | Splinter Review
Update Toolbar Textfields Styling for Lion - 03 (2.79 KB, patch)
2011-08-31 11:11 PDT, Stephen Horlander [:shorlander]
dao+bmo: review+
Details | Diff | Splinter Review

Description Stephen Horlander [:shorlander] 2011-08-25 09:01:33 PDT
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] 2011-08-25 09:05:20 PDT
Created attachment 555748 [details] [diff] [review]
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] 2011-08-25 09:46:15 PDT
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] 2011-08-26 08:31:00 PDT
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] 2011-08-26 08:37:32 PDT
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] 2011-08-26 08:51:04 PDT
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] 2011-08-26 12:20:21 PDT
(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] 2011-08-27 03:48:50 PDT
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] 2011-08-30 09:40:48 PDT
Created attachment 556882 [details] [diff] [review]
Update Toolbar Textfields Styling for Lion - 02
Comment 9 Dão Gottwald [:dao] 2011-08-30 11:03:53 PDT
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] 2011-08-31 11:11:58 PDT
Created attachment 557252 [details] [diff] [review]
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] 2011-08-31 11:16:20 PDT
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] 2011-08-31 11:53:47 PDT
(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] 2011-09-03 02:59:03 PDT
http://hg.mozilla.org/mozilla-central/rev/c8cd6f227ead

Note You need to log in before you can comment on or make changes to this bug.