The default bug view has changed. See this FAQ.

[10.7] Update LocationBar and SearchBar for Lion

RESOLVED FIXED in Firefox 9

Status

()

Firefox
Theme
RESOLVED FIXED
6 years ago
6 years ago

People

(Reporter: shorlander, Assigned: shorlander)

Tracking

(Blocks: 1 bug)

Trunk
Firefox 9
x86
Mac OS X
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment, 2 obsolete attachments)

(Assignee)

Description

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

- Lighter border
- Subtle dark inner gradient
- Subtle inner-shadow differences
(Assignee)

Comment 1

6 years ago
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.
Attachment #555748 - Flags: feedback?(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.
Attachment #555748 - Flags: feedback?(mstange) → feedback+
(Assignee)

Updated

6 years ago
Attachment #555748 - Flags: review?(dao)
Note to self: This gives search/text field cells the toolbar appearance on 10.7:
@implementation NSTextFieldCell(ToolbarAppearance)
- (BOOL)_isToolbarMode { return YES; }
@end
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 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?
(Assignee)

Comment 6

6 years ago
(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.
Depends on: 682541
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.
(Assignee)

Comment 8

6 years ago
Created attachment 556882 [details] [diff] [review]
Update Toolbar Textfields Styling for Lion - 02
Assignee: nobody → shorlander
Attachment #555748 - Attachment is obsolete: true
Status: NEW → ASSIGNED
Attachment #555748 - Flags: review?(dao)
Attachment #556882 - Flags: review?(dao)
(Assignee)

Updated

6 years ago
Summary: [10.7] Update Toolbar Textfields for Lion → [10.7] Update LocationBar and SearchBar for Lion
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)")

Updated

6 years ago
Attachment #556882 - Flags: review?(dao)
(Assignee)

Comment 10

6 years ago
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.
Attachment #556882 - Attachment is obsolete: true
Attachment #557252 - Flags: review?(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.
Attachment #557252 - Flags: review?(dao) → review+
(Assignee)

Comment 12

6 years ago
(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!
http://hg.mozilla.org/mozilla-central/rev/c8cd6f227ead
Status: ASSIGNED → RESOLVED
Last Resolved: 6 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 9

Updated

6 years ago
Attachment #557252 - Attachment is patch: true
You need to log in before you can comment on or make changes to this bug.