Open
Bug 426727
Opened 17 years ago
Updated 2 years ago
Use consistent appearance for selected richlistitems
Categories
(Toolkit :: Themes, enhancement)
Toolkit
Themes
Tracking
()
NEW
People
(Reporter: faaborg, Unassigned)
References
(Blocks 2 open bugs)
Details
(Keywords: polish, Whiteboard: [polish-easy][polish-visual][polish-p1][needs ui-r faaborg])
Attachments
(2 files, 4 obsolete files)
(deleted),
patch
|
rflint
:
review+
|
Details | Diff | Splinter Review |
(deleted),
image/png
|
Details |
We need to decide what gradients to use on selected richlist view items:
-location bar autocomplete
-download manager
-addons manager
These interfaces should all reference the same file for consistency, we will likely want to do something with white and black with an alpha mixed with the highlight color to create a nice 3D feel. I personally think the download manager gradient in Firefox 1 was one of the nicest visual aspects of the application.
Flags: blocking-firefox3?
Reporter | ||
Updated•17 years ago
|
Blocks: vista-theme
Comment 1•17 years ago
|
||
This CSS does wonders for the autocomplete richlist item, though I'm not sure we want to depend on a PNG that's located in /extensions (used for the download manager) for that.
.autocomplete-richlistitem[selected=true] {
background-image: url(chrome://mozapps/skin/extensions/itemEnabledFader.png) ! important;
background-color: highlight ! important;
}
On Vista, I'd still rather we use the -moz-appearance: menuItem.
Doesn't block, but I might try to do this myself tonight.
Assignee: nobody → beltzner
Flags: wanted-firefox3+
Flags: blocking-firefox3?
Flags: blocking-firefox3-
Reporter | ||
Comment 2•17 years ago
|
||
>This CSS does wonders for the autocomplete richlist item
I find it impossible to see with two line items, and pretty difficult to see with larger items in the download manager. Also we are kind of inverting our light source compared to every other texture and icon in the app.
>On Vista, I'd still rather we use the -moz-appearance: menuItem.
Totally agree, or just use a png that matches -moz-appearance: menuItem
Reporter | ||
Comment 3•17 years ago
|
||
>and pretty difficult to see with larger items in the download manager.
sorry, meant addons manager.
Reporter | ||
Updated•16 years ago
|
Whiteboard: [polish-easy][polish-visual] → [polish-easy][polish-visual][polish-high-visibility]
Reporter | ||
Comment 4•16 years ago
|
||
this bug is eligible for bug 462081
Comment 5•16 years ago
|
||
Following userchrome.css hack does the trick pretty well (See attachment). Maybe we could use something similar.
/*:::::::::::::::::::::::: Autocomplete ::::::::::::::::::::::::::*/
.autocomplete-richlistbox > richlistitem
{
border: none !important;
}
.ac-comment
{
font-size: 125% !important;
}
.autocomplete-richlistitem:not([selected="true"])
{
margin: 0px 3px 0px 3px !important;
}
.autocomplete-richlistitem[selected=true] {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAIAAAASmSbdAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAB3RJTUUH2AofCxIS92uF8AAAAAd0RVh0QXV0aG9yAKmuzEgAAAAMdEVYdERlc2NyaXB0aW9uABMJISMAAAAKdEVYdENvcHlyaWdodACsD8w6AAAADnRFWHRDcmVhdGlvbiB0aW1lADX3DwkAAAAJdEVYdFNvZnR3YXJlAF1w%2FzoAAAALdEVYdERpc2NsYWltZXIAt8C0jwAAAAh0RVh0V2FybmluZwDAG%2BaHAAAAB3RFWHRTb3VyY2UA9f%2BD6wAAAAh0RVh0Q29tbWVudAD2zJa%2FAAAABnRFWHRUaXRsZQCo7tInAAAAL0lEQVQImWN49e0v038GBiYGJIzOZ%2FiPKf4fjxyKWXjk%2FzP8x2svTC%2ByHLq9UAwAMpcVLv4KFmYAAAAASUVORK5CYII%3D") repeat-x center !important;
background-color: highlight ! important;
border: 1px solid #99DEFD !important;
margin: -1px 2px -1px 2px !important;
color: black !important;
-moz-border-radius: 4px !important;
}
Reporter | ||
Updated•16 years ago
|
Summary: Use gradients on selected items in richlist views on XP and Vista → Use consistent apperance on selected items in richlist views
Reporter | ||
Comment 7•16 years ago
|
||
Expanding bug to all platforms.
OS: Windows XP → All
Hardware: PC → All
Comment 8•16 years ago
|
||
This should be doable with css when bug 479220 is fixed. Maybe there should be a new -moz-appearance type (i.e. -moz-richlistbox)?
Updated•16 years ago
|
Assignee: beltzner → dao
Blocks: 420237
Component: Theme → Themes
Flags: wanted-firefox3+
Flags: blocking-firefox3-
Product: Firefox → Toolkit
QA Contact: theme → themes
Updated•16 years ago
|
Severity: normal → enhancement
OS: All → Windows Vista
Comment 9•16 years ago
|
||
Attachment #345698 -
Attachment is obsolete: true
Updated•16 years ago
|
Summary: Use consistent apperance on selected items in richlist views → Use consistent appearance on selected items in richlist views
Comment 10•16 years ago
|
||
Attachment #381451 -
Attachment is obsolete: true
Attachment #381534 -
Flags: review?(rflint)
Reporter | ||
Comment 11•16 years ago
|
||
This bug's priority relative to the set of other polish bugs is:
P1 - Polish issue that appears in the main window, or is something that the user may encounter several times a day.
Impacts the primary UI in terms of the awesome bar (which the user encounters several times a day), and a number of secondary interfaces as well.
Whiteboard: [polish-easy][polish-visual][polish-high-visibility] → [polish-easy][polish-visual][polish-p1]
Comment 12•15 years ago
|
||
updated to trunk
Attachment #381534 -
Attachment is obsolete: true
Attachment #389090 -
Flags: review?(rflint)
Attachment #381534 -
Flags: review?(rflint)
Updated•15 years ago
|
Attachment #389090 -
Flags: ui-review?(faaborg)
Comment 13•15 years ago
|
||
Comment on attachment 389090 [details] [diff] [review]
patch
tryserver builds:
https://build.mozilla.org/tryserver-builds/dgottwald@mozilla.com-try-cb0054ae5b61/
Updated•15 years ago
|
Summary: Use consistent appearance on selected items in richlist views → Use consistent appearance for selected richlistitems
Comment 14•15 years ago
|
||
Attachment #389090 -
Attachment is obsolete: true
Attachment #390713 -
Flags: ui-review?(faaborg)
Attachment #390713 -
Flags: review?(rflint)
Attachment #389090 -
Flags: ui-review?(faaborg)
Attachment #389090 -
Flags: review?(rflint)
Comment 15•15 years ago
|
||
Comment on attachment 390713 [details] [diff] [review]
patch
>diff --git a/toolkit/themes/winstripe/mozapps/extensions/extensions-aero.css
>+richlistitem[isDisabled="true"][selected="true"]:-moz-system-metric(windows-default-theme) {
Should probably get a follow up on file for making the EM set @disabled in addition to/in lieu of @isDisabled so we can pick up aero's disabled item styling (or expose the disabled style to CSS).
Attachment #390713 -
Flags: review?(rflint) → review+
Reporter | ||
Comment 16•15 years ago
|
||
Still in the process of trying this out on all the platforms, but so far the one thing I've noticed is the error console potentially hard coding a color that didn't get updated along with the rest of the richlist views.
Comment 17•15 years ago
|
||
(In reply to comment #16)
The error console doesn't use richlistbox or richlistitems, and fixing that would automatically include this fix.
Comment 18•15 years ago
|
||
Reopened bug 418598 to fix Error console.
Comment 19•15 years ago
|
||
Does this remove the border from unselected richlistitems? I suspect that would be an unwanted change, I'll attach a screenshot of what I saw with this patch applied.
No longer blocks: 305206
Comment 20•15 years ago
|
||
Here's the screenshot, notice that there's no bottom border for the unselected richlistitems. This is on trunk/Vista.
Comment 21•15 years ago
|
||
(In reply to comment #20)
> notice that there's no bottom border for the unselected richlistitems.
That's expected. See for instance your own work in bug 445639 :)
Comment 22•15 years ago
|
||
That patch had a hover effect in it that visually distinguished the various richlistitems, IMHO that should be the desired effect, at least on Windows. Windows Explorer uses a similar technique...
Comment 23•15 years ago
|
||
The menuitem appearance is the closest thing we have, but it lacks a distinct hover state. I'm all for implementing what Explorer does in widget:windows. Any volunteers?
Reporter | ||
Comment 24•15 years ago
|
||
Really sorry about the lag on the ui-review. I'm not finally back in the office and I can get you a review if post some tryserver builds, since I want to check this out on all platforms.
Reporter | ||
Comment 25•15 years ago
|
||
sorry, mean "now finally back", !"not finally back"
Reporter | ||
Comment 26•15 years ago
|
||
We need to test this out on windows 7 since I think the original patch was meant to match Vista.
Comment 27•15 years ago
|
||
Requesting to Block Bug 544820. This is an easy patch. Can we land this along with all the theme changes taking place on trunk right now?
Comment 28•14 years ago
|
||
Would be nice to see this last-of-the-mohicans (yes, I know there are more, but this one is from the first few) polish-p1 patch go in... :)
Whiteboard: [polish-easy][polish-visual][polish-p1] → [polish-easy][polish-visual][polish-p1][needs ui-r faaborg]
Reporter | ||
Comment 29•14 years ago
|
||
Some new color values for windows 7 (in case we can't extract them):
outline color="#aeccf1"
gradient top color="#fafbfd"
gradient bottom color="#ebf3fd"
Updated•14 years ago
|
blocking2.0: --- → ?
Updated•14 years ago
|
blocking2.0: ? → ---
Reporter | ||
Comment 30•14 years ago
|
||
Comment on attachment 390713 [details] [diff] [review]
patch
it would be great if we could get this landed at some point. sorry for the long delay in ui-review (updated my searches to include all products). Can you attach a screen shot at some point for a quick ui-review?
Overall goal is to match the Windows highlight (not the classic theme highlight color, but the gradient they use in explorer, traditional menus, and the start menu).
The colors I sampled came to:
outline: color="#7a9fcb"
gradient top color="#dceafc" (100%)
gradient bottom color="#c1dbfc" (100%)
Attachment #390713 -
Flags: ui-review?(faaborg)
Reporter | ||
Comment 31•14 years ago
|
||
sorry, those values were for downclick selected, here is the more common hover state:
selected hover
outline color="#b8d6fb"
gradient top color="#fafbfd" (100%)
gradient bottom color="#ebf3fd" (100%)
Updated•11 years ago
|
Assignee: dao → nobody
Comment 32•10 years ago
|
||
This currently does not look great on win8+. This would fix that:
.autocomplete-richlistitem[selected="true"] {
background: #D1E8FF !important;
outline: 1px solid #66A7E8 !important;
-moz-outline-radius: 0px !important;
background-clip: content-box !important;
}
Comment 33•10 years ago
|
||
I just realized I made the same mistake as Faaborg, and used the colors of the selected state. :P
Here it is again, but this time with the colors of the hover state:
.autocomplete-richlistitem[selected="true"] {
background: #E5F3FB !important;
outline: 1px solid #70C0E7 !important;
-moz-outline-radius: 0px !important;
background-clip: content-box !important;
}
Updated•2 years ago
|
Severity: normal → S3
You need to log in
before you can comment on or make changes to this bug.
Description
•