Closed Bug 397331 Opened 15 years ago Closed 15 years ago

Autocomplete dropmarker cleanup

Categories

(Firefox :: Address Bar, defect)

x86
All
defect
Not set
normal

Tracking

()

RESOLVED FIXED
Firefox 3 beta3

People

(Reporter: dao, Assigned: dao)

References

Details

(Keywords: perf, polish)

Attachments

(3 files, 9 obsolete files)

What I'd like to do is:

- Make the dropmarker visually less obtrusive (e.g. more Vista-like)
- Move the browser-specific style from autocomplete.css (toolkit) to browser.css
- Remove the Winstripe dropmarker binding
Attached image proposed appearance (obsolete) —
Attachment #282104 - Flags: ui-review?(beltzner)
Keywords: perf
Blocks: 397946
Attached patch patch (obsolete) — Splinter Review
Attached image urlbar-dropmarker.png (obsolete) —
Depends on: 398020
Why don't make it native again for Windows XP and earlier? For Vista your patch looks good. IIRC it is now possible (or it will possible in near future) to make OS specific CSS.
Blocks: 402018
Attachment #282104 - Attachment is obsolete: true
Attachment #282104 - Flags: ui-review?(beltzner)
Attached patch patch for second option (obsolete) — Splinter Review
Attachment #283166 - Attachment is obsolete: true
Attachment #283167 - Attachment is obsolete: true
Attached image screenshots of second option (obsolete) —
The Linux counterpart of this is bug 405210.
Depends on: 405210
Attachment #295859 - Attachment description: patch v2 (wip) → patch v2
Attachment #295859 - Flags: review?(mconnor)
Comment on attachment 295861 [details]
screenshots of second option

userChrome.css for this:

#urlbar[level="high"][pageproxystate="valid"] > .autocomplete-history-dropmarker ,
#urlbar[level="low"][pageproxystate="valid"] > .autocomplete-history-dropmarker {
  background-color: #F5F6BE !important; /* #F7F898; */
}

#urlbar > .autocomplete-history-dropmarker {
  -moz-binding: url(chrome://global/content/bindings/autocomplete.xml#history-dropmarker) !important;
  -moz-appearance: none !important;
  padding: 0 !important;
  background-color: transparent !important;
  border: none !important;
  list-style-image: url(chrome://global/skin/arrow/arrow-dn.gif) !important;
  -moz-image-region: auto !important;
}

#urlbar > .autocomplete-history-dropmarker > .dropmarker-icon {
  padding: 0 6px !important;
}

#urlbar > .autocomplete-history-dropmarker:hover > .dropmarker-icon {
  padding: 6px 4px 7px !important;
  background-image: url(chrome://browser/skin/tabbrowser/tab-active-bkgnd.png) !important;
  border: 2px solid !important;
  -moz-border-left-colors: threedlightshadow threedshadow !important;
  -moz-border-top-colors: threedlightshadow threedshadow !important;
  -moz-border-bottom-colors: threedlightshadow threedshadow !important;
  -moz-border-right-colors: threedlightshadow threedshadow !important;
  -moz-border-radius: 4px !important;
}

#urlbar > .autocomplete-history-dropmarker:active > .dropmarker-icon {
  -moz-border-left-colors: threedlightshadow threeddarkshadow !important;
  -moz-border-top-colors: threedlightshadow threeddarkshadow !important;
  -moz-border-bottom-colors: threedlightshadow threeddarkshadow !important;
  -moz-border-right-colors: threedlightshadow threeddarkshadow !important;
}
Keywords: uiwanted
Attached image screenshot of third option (obsolete) —
Comment on attachment 296995 [details]
screenshot of third option

userChrome.css:

#urlbar > .autocomplete-history-dropmarker {
  -moz-binding: url(chrome://global/content/bindings/autocomplete.xml#history-dropmarker) !important;
  -moz-appearance: toolbox ! important;
  outline: threedshadow solid 1px;
  -moz-margin-end: -1px !important;
  -moz-outline-radius-topright: 2px;
  -moz-outline-radius-bottomright: 2px;
  list-style-image: url(chrome://global/skin/arrow/arrow-dn.gif) !important;
  -moz-image-region: auto !important;
}
#urlbar > .autocomplete-history-dropmarker:hover {
  outline-color: threeddarkshadow;
}
Dao: what do you think of having the drop marker be inside of the text field, similar to the star?  It would have a white background normally but we would probably want it to pick up a button affordance on hover similar to IE7.  I sort of remember seeing this either mocked up or implemented at some point.

This would make the interface visually simpler, and create symmetry between the location bar and the search bar.
Not sure what IE7 does, but your description sounds like attachment 295861 [details] from above :)
>sounds like attachment 295861 [details] from above :)

Yep, what do you think of that as the initial state, and for the hover state we go with the toolbox styling, but perhaps inside of the location bar instead of caped on the end?

Attached image screenshot of fourth option (obsolete) —
(In reply to comment #13)
> Yep, what do you think of that as the initial state, and for the hover state we
> go with the toolbox styling, but perhaps inside of the location bar instead of
> caped on the end?

I think that's another valid approach. Not sure which one I like best, though.
Attachment #295859 - Flags: review?(mconnor)
Attachment #295861 - Attachment description: screenshots → screenshots of second option
Comment on attachment 297011 [details]
screenshot of fourth option

userChrome.css:

#urlbar[level="high"][pageproxystate="valid"] > .autocomplete-history-dropmarker ,
#urlbar[level="low"][pageproxystate="valid"] > .autocomplete-history-dropmarker {
  background-color: #F5F6BE !important;
}
#urlbar > .autocomplete-history-dropmarker {
  -moz-binding: url(chrome://global/content/bindings/autocomplete.xml#history-dropmarker) !important;
  -moz-appearance: none ! important;
  margin: 1px !important;
  padding: 0 !important;
  background-color: transparent !important;
  border: none !important;
  list-style-image: url(chrome://global/skin/arrow/arrow-dn.gif) !important;
  -moz-image-region: auto !important;
  height: auto !important;
  width: 15px !important;
}
#urlbar > .autocomplete-history-dropmarker:hover {
  -moz-appearance: toolbox ! important;
  outline: threedshadow solid 1px;
  -moz-outline-radius: 2px;
  -moz-outline-offset: -1px;
}
#urlbar > .autocomplete-history-dropmarker:active {
  outline-color: threeddarkshadow;
}
Attachment #295859 - Attachment description: patch v2 → patch for second option
Attachment #297011 - Flags: ui-review?(faaborg)
Attached patch patch for fourth option (obsolete) — Splinter Review
Comment on attachment 297011 [details]
screenshot of fourth option

I had a chance to talk to beltzner about this.  We both like the surface of the button matching the search engine button and the site button (using toolbox), but we think it will look better if hover state expands to fill the location bar, like the first proposal.
Here is the style that beltzner and I thought would look right, and also give us a visual simplicity win.
Alright.
Keywords: uiwanted
Attachment #297011 - Attachment is obsolete: true
Attachment #297011 - Flags: ui-review?(faaborg)
Attachment #297127 - Attachment is obsolete: true
Attachment #296995 - Attachment is obsolete: true
Attachment #295861 - Attachment is obsolete: true
Attachment #295859 - Attachment is obsolete: true
Attached patch patch (obsolete) — Splinter Review
Attachment #297262 - Flags: review?(mconnor)
Comment on attachment 297262 [details] [diff] [review]
patch

Seems like this shifts the dropmarker on hover at times. New patch coming later today.
Attachment #297262 - Attachment is obsolete: true
Attachment #297262 - Flags: review?(mconnor)
Attached patch patch v2Splinter Review
Attachment #297372 - Flags: review?(mano)
What's your plan for gnomestripe and pinstripe here? We should remove the toolkit rules together, if possible.
Gnomestripe's autocomplete.css is now using a native widget (bug 405210). We should probably have a look at pinstripe once the new theme has landed.
>We should probably have a look at pinstripe once the new theme has landed.

The current approach in proto of placing the drop marker inside of the field with no hover effect seems to fit nicely with platform conventions on OS X.
(In reply to comment #25)
> The current approach in proto of placing the drop marker inside of the field
> with no hover effect seems to fit nicely with platform conventions on OS X.

But does it fit better than |-moz-appearance: menulist-button|, generally and for all apps using autocomplete?
>But does it fit better than |-moz-appearance: menulist-button|, generally and
>for all apps using autocomplete?

By all apps do you mean all apps that have autocomplete on OS X, or all apps across all platforms?  If you mean autocomplete on OS X, I actually don't know of an instance of this type of drop down control in a text field.  For instance, Safari doesn't have one.
I mean on OS X, as pinstripe isn't meant to be used on other platforms.
>I mean on OS X, as pinstripe isn't meant to be used on other platforms.

Without any similar widgets in other apps to compare to, we can't really match platform conventions.  But I think the current approach of an arrow inside of the field with no hover state feels like other text field buttons in OS X, like the magnifying glass.  For instance, in Vista the magnifying glass turns into a button on hover.
Here's what we can do for gnomestripe :)
|-moz-appearance: menulist-button| is already part of dropmarker.css.
Attachment #297888 - Flags: review?(mano)
Comment on attachment 297372 [details] [diff] [review]
patch v2

r=mano
Attachment #297372 - Flags: review?(mano) → review+
Comment on attachment 297888 [details] [diff] [review]
gnomestripe patch

r=mano.
Attachment #297888 - Flags: review?(mano) → review+
Attachment #297372 - Flags: approval1.9?
Attachment #297888 - Flags: approval1.9?
Attachment #297372 - Flags: approval1.9? → approval1.9+
Attachment #297888 - Flags: approval1.9? → approval1.9+
Keywords: checkin-needed
Checking in browser/themes/winstripe/browser/browser.css;
/cvsroot/mozilla/browser/themes/winstripe/browser/browser.css,v  <--  browser.css
new revision: 1.148; previous revision: 1.147
done
Checking in toolkit/themes/winstripe/global/autocomplete.css;
/cvsroot/mozilla/toolkit/themes/winstripe/global/autocomplete.css,v  <--  autocomplete.css
new revision: 1.27; previous revision: 1.26
done
Checking in toolkit/themes/winstripe/global/globalBindings.xml;
/cvsroot/mozilla/toolkit/themes/winstripe/global/globalBindings.xml,v  <--  globalBindings.xml
new revision: 1.15; previous revision: 1.14
done
Checking in toolkit/themes/winstripe/global/jar.mn;
/cvsroot/mozilla/toolkit/themes/winstripe/global/jar.mn,v  <--  jar.mn
new revision: 1.40; previous revision: 1.39
done
Removing toolkit/themes/winstripe/global/icons/autocomplete-dropmark-arrow.png;
/cvsroot/mozilla/toolkit/themes/winstripe/global/icons/autocomplete-dropmark-arrow.png,v  <--  autocomplete-dropmark-arrow.png
new revision: delete; previous revision: 1.2
done
Removing toolkit/themes/winstripe/global/icons/autocomplete-dropmark-bkgnd-mid-bottom.png;
/cvsroot/mozilla/toolkit/themes/winstripe/global/icons/autocomplete-dropmark-bkgnd-mid-bottom.png,v  <--  autocomplete-dropmark-bkgnd-mid-bottom.png
new revision: delete; previous revision: 1.2
done
Removing toolkit/themes/winstripe/global/icons/autocomplete-dropmark-bkgnd-mid-top.png;
/cvsroot/mozilla/toolkit/themes/winstripe/global/icons/autocomplete-dropmark-bkgnd-mid-top.png,v  <--  autocomplete-dropmark-bkgnd-mid-top.png
new revision: delete; previous revision: 1.2
done
Removing toolkit/themes/winstripe/global/icons/autocomplete-dropmark-bkgnd.png;
/cvsroot/mozilla/toolkit/themes/winstripe/global/icons/autocomplete-dropmark-bkgnd.png,v  <--  autocomplete-dropmark-bkgnd.png
new revision: delete; previous revision: 1.2
done
Checking in toolkit/themes/gnomestripe/global/autocomplete.css;
/cvsroot/mozilla/toolkit/themes/gnomestripe/global/autocomplete.css,v  <--  autocomplete.css
new revision: 1.14; previous revision: 1.13
done
Status: ASSIGNED → RESOLVED
Closed: 15 years ago
Keywords: checkin-needed
OS: Windows XP → All
Resolution: --- → FIXED
Target Milestone: Firefox 3 → Firefox 3 M11
Depends on: 413312
Depends on: 413819
You need to log in before you can comment on or make changes to this bug.