397331 - Autocomplete dropmarker cleanup

Status: RESOLVED FIXED

(Firefox :: Address Bar, defect)

Description

[Dão Gottwald [:dao]]

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

Comment 1

[Dão Gottwald [:dao]]

Attachment: proposed appearance

Comment 2

[Dão Gottwald [:dao]]

Attachment: patch

Comment 3

[Dão Gottwald [:dao]]

Attachment: urlbar-dropmarker.png

Comment 4

[Jonathan Haas]

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.

Comment 5

[Dão Gottwald [:dao]]

Attachment: patch for second option

Comment 6

[Dão Gottwald [:dao]]

Attachment: screenshots of second option

Comment 7

[Dão Gottwald [:dao]]

The Linux counterpart of this is bug 405210.

Comment 8

[Dão Gottwald [:dao]]

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;
}

Comment 9

[Dão Gottwald [:dao]]

Attachment: screenshot of third option

Comment 10

[Dão Gottwald [:dao]]

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;
}

Comment 11

[Alex Faaborg [:faaborg] (Firefox UX)]

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.

Comment 12

[Dão Gottwald [:dao]]

Not sure what IE7 does, but your description sounds like attachment 295861 [details] from above :)

Comment 13

[Alex Faaborg [:faaborg] (Firefox UX)]

>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?

Comment 14

[Dão Gottwald [:dao]]

Attachment: screenshot of fourth option

(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.

Comment 15

[Dão Gottwald [:dao]]

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;
}

Comment 16

[Dão Gottwald [:dao]]

Attachment: patch for fourth option

Comment 17

[Alex Faaborg [:faaborg] (Firefox UX)]

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.

Comment 18

[Alex Faaborg [:faaborg] (Firefox UX)]

Attachment: Mockup of a combination of option 1 and 4

Here is the style that beltzner and I thought would look right, and also give us a visual simplicity win.

Comment 19

[Dão Gottwald [:dao]]

Alright.

Comment 20

[Dão Gottwald [:dao]]

Attachment: patch

Comment 21

[Dão Gottwald [:dao]]

Comment on attachment 297262 [details] [diff] [review]
patch

Seems like this shifts the dropmarker on hover at times. New patch coming later today.

Comment 22

[Dão Gottwald [:dao]]

Attachment: patch v2

Comment 23

[Asaf Romano (gone)]

What's your plan for gnomestripe and pinstripe here? We should remove the toolkit rules together, if possible.

Comment 24

[Dão Gottwald [:dao]]

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.

Comment 25

[Alex Faaborg [:faaborg] (Firefox UX)]

>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.

Comment 26

[Dão Gottwald [:dao]]

(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?

Comment 27

[Alex Faaborg [:faaborg] (Firefox UX)]

>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.

Comment 28

[Dão Gottwald [:dao]]

I mean on OS X, as pinstripe isn't meant to be used on other platforms.

Comment 29

[Alex Faaborg [:faaborg] (Firefox UX)]

>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.

Comment 30

[Dão Gottwald [:dao]]

Attachment: gnomestripe patch

Here's what we can do for gnomestripe :)
|-moz-appearance: menulist-button| is already part of dropmarker.css.

Comment 31

[Asaf Romano (gone)]

Comment on attachment 297372 [details] [diff] [review]
patch v2

r=mano

Comment 32

[Asaf Romano (gone)]

Comment on attachment 297888 [details] [diff] [review]
gnomestripe patch

r=mano.

Comment 33

[Reed Loden [:reed]]

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