Closed
Bug 477827
Opened 16 years ago
Closed 16 years ago
Use inset box shadows instead of border images for the toolbar buttons in the Add-ons Manager, Page Info dialog and Error Console
Categories
(Toolkit :: Themes, defect)
Tracking
()
VERIFIED
FIXED
mozilla1.9.2a1
People
(Reporter: mstange, Assigned: mstange)
References
Details
(Keywords: memory-footprint)
Attachments
(1 file, 3 obsolete files)
(deleted),
patch
|
mossop
:
review+
|
Details | Diff | Splinter Review |
Just because we can.
Attachment #361541 -
Flags: review?(dao)
Comment 1•16 years ago
|
||
Comment on attachment 361541 [details] [diff] [review]
fix v1
>+#topStackBar {
>+ display: -moz-box;
This doesn't seem right for the Add-ons manager.
I don't see why that stack even exists in Page Info...
> #viewGroup > * {
[...]
>+ border: none;
>+ border-left: 1px solid rgba(0, 0, 0, 0.8);
> #viewGroup > radio[selected=true],
> #viewGroup > toolbarbutton[checked=true] {
[...]
>+ border: none;
>+ border-left: 1px solid rgba(0, 0, 0, 0.8);
Isn't that redundant?
Assignee | ||
Comment 2•16 years ago
|
||
(In reply to comment #1)
> (From update of attachment 361541 [details] [diff] [review])
> >+#topStackBar {
> >+ display: -moz-box;
>
> This doesn't seem right for the Add-ons manager.
> I don't see why that stack even exists in Page Info...
I don't see why it exists in the Add-ons manager either. From reading extensions.js it seems that at all times only one of #viewGroup or #progressBox is visible, so #topStackBar could just be a vbox there.
Or even better, we could just remove the stacks and style the windowdragbox instead. Do you want me to do that?
> > #viewGroup > * {
> [...]
> >+ border: none;
> >+ border-left: 1px solid rgba(0, 0, 0, 0.8);
>
> > #viewGroup > radio[selected=true],
> > #viewGroup > toolbarbutton[checked=true] {
> [...]
> >+ border: none;
> >+ border-left: 1px solid rgba(0, 0, 0, 0.8);
>
> Isn't that redundant?
toolbarbutton.css sets left and right borders for checked toolbarbuttons. This reverses it. I agree that it looks redundant; should I use !important on the first border declaration? Or do you have a better idea?
Comment 3•16 years ago
|
||
(In reply to comment #2)
> I don't see why it exists in the Add-ons manager either. From reading
> extensions.js it seems that at all times only one of #viewGroup or #progressBox
> is visible, so #topStackBar could just be a vbox there.
Seems like it should be a deck, so that extensions.js can just do progressBox.parentNode.selectedPanel = progressBox; and viewGroup.parentNode.selectedPanel = viewGroup; instead of the current mess.
> Or even better, we could just remove the stacks and style the windowdragbox
> instead. Do you want me to do that?
Not sure if windowdragbox should be styled. Couldn't there be multiple windowdragboxes? In that case, you should probably use an id or class.
> toolbarbutton.css sets left and right borders for checked toolbarbuttons. This
> reverses it. I agree that it looks redundant; should I use !important on the
> first border declaration? Or do you have a better idea?
Hm, sucks that toolbarbutton.css takes precedence here. !important seems slightly better, I think, although it won't be obvious why that stuff is needed either way.
Assignee | ||
Comment 4•16 years ago
|
||
(In reply to comment #3)
> > toolbarbutton.css sets left and right borders for checked toolbarbuttons. This
> > reverses it. I agree that it looks redundant; should I use !important on the
> > first border declaration? Or do you have a better idea?
>
> Hm, sucks that toolbarbutton.css takes precedence here.
I was wrong. toolbarbutton.css doesn't take precedence here, the additional border rules are unnecessary. I don't know why I thought they were necessary.
Assignee | ||
Comment 5•16 years ago
|
||
(In reply to comment #3)
> (In reply to comment #2)
> > I don't see why it exists in the Add-ons manager either. From reading
> > extensions.js it seems that at all times only one of #viewGroup or #progressBox
> > is visible, so #topStackBar could just be a vbox there.
>
> Seems like it should be a deck, so that extensions.js can just do
> progressBox.parentNode.selectedPanel = progressBox; and
> viewGroup.parentNode.selectedPanel = viewGroup; instead of the current mess.
That makes sense... but I can't find a way of centering the radiogroup in the deck while at the same time giving progressBox full width. Is it possible without introducing another wrapper box?
The code I removed in bug 456214 applied a "radiogroup-wrapper" binding to the radiogroup which provided another wrapper. Should I resurrect that binding?
Comment 6•16 years ago
|
||
Wrapping the radio group in a box seems fine, I wouldn't use a binding for that.
Updated•16 years ago
|
Attachment #361541 -
Flags: review?(dao)
Assignee | ||
Comment 7•16 years ago
|
||
Attachment #361541 -
Attachment is obsolete: true
Attachment #364895 -
Flags: review?(dao)
Assignee | ||
Updated•16 years ago
|
Attachment #364895 -
Flags: review?(dtownsend)
Assignee | ||
Comment 8•16 years ago
|
||
Comment on attachment 364895 [details] [diff] [review]
v2
Mossop, could you review the extensions.js/.xul changes?
Comment 9•16 years ago
|
||
Comment on attachment 364895 [details] [diff] [review]
v2
Also, it would be nice if Enn could review the change in WindowDraggingUtils.jsm.
Attachment #364895 -
Flags: review?(enndeakin)
Comment 10•16 years ago
|
||
I think viewGroup should be a class, and would you mind fixing winstripe and gnomestripe to use topBar instead of viewSelector?
Assignee | ||
Comment 11•16 years ago
|
||
(In reply to comment #10)
> I think viewGroup should be a class,
Why? Seems to me like lots of changes without obvious gain.
> and would you mind fixing winstripe and
> gnomestripe to use topBar instead of viewSelector?
I can do that, but would that change anything? Can I do it in a follow-up bug?
Comment 12•16 years ago
|
||
(In reply to comment #11)
> (In reply to comment #10)
> > I think viewGroup should be a class,
>
> Why?
Because you're adding viewGroupWrapper as a class, and it seems like they should be consistent.
Should be a simple search-and-replace, right?
> > and would you mind fixing winstripe and
> > gnomestripe to use topBar instead of viewSelector?
>
> I can do that, but would that change anything? Can I do it in a follow-up bug?
Yeah, you could drop the viewSelector class instead of carrying it around. Could be done as a follow-up, but would also be quite easy to integrate here.
Comment 13•16 years ago
|
||
Oh, the viewGroup id is used in extensions.js and pageInfo.js, so you can't just make it a class.
Assignee | ||
Comment 14•16 years ago
|
||
OK, I removed class="viewSelector".
Attachment #364895 -
Attachment is obsolete: true
Attachment #365639 -
Flags: review?(dao)
Attachment #364895 -
Flags: review?(enndeakin)
Attachment #364895 -
Flags: review?(dtownsend)
Attachment #364895 -
Flags: review?(dao)
Assignee | ||
Comment 15•16 years ago
|
||
Comment on attachment 365639 [details] [diff] [review]
v3
requesting review from Mossop on the extensions.js/.xul changes
Attachment #365639 -
Flags: review?(dtownsend)
Assignee | ||
Updated•16 years ago
|
Attachment #365639 -
Flags: review?(enndeakin)
Assignee | ||
Comment 16•16 years ago
|
||
Comment on attachment 365639 [details] [diff] [review]
v3
requesting review from Enn on the WindowDraggingUtils.jsm change
Updated•16 years ago
|
Attachment #365639 -
Flags: review?(dao) → review+
Comment 17•16 years ago
|
||
Comment on attachment 365639 [details] [diff] [review]
v3
>--- a/browser/base/content/pageinfo/pageInfo.xul
>+++ b/browser/base/content/pageinfo/pageInfo.xul
>+ <windowdragbox id="topBar" class="viewGroupWrapper" orient="vertical">
remove orient="vertical"
>--- a/toolkit/mozapps/extensions/content/extensions.xul
>+++ b/toolkit/mozapps/extensions/content/extensions.xul
>+ <windowdragbox orient="vertical" id="topBar">
here too
>--- a/toolkit/themes/gnomestripe/mozapps/extensions/extensions.css
>+++ b/toolkit/themes/gnomestripe/mozapps/extensions/extensions.css
> /* View buttons */
>-.viewSelector {
>+#topBar {
> -moz-appearance: listbox;
>- margin: 8px 8px 0 8px;
>- padding: 0;
>+ margin: 8px 8px 0;
> }
/* View buttons resp. Progress box */
>--- a/toolkit/themes/winstripe/mozapps/extensions/extensions.css
>+++ b/toolkit/themes/winstripe/mozapps/extensions/extensions.css
> /* View buttons */
>-.viewSelector {
>+#topBar {
> border-bottom: 2px groove ThreeDFace;
>- margin: 0px;
> -moz-padding-start: 10px;
> background-color: -moz-Field;
> color: -moz-FieldText;
> }
same here
Thanks!
Assignee | ||
Comment 18•16 years ago
|
||
(In reply to comment #17)
> remove orient="vertical"
> here too
That breaks the centering.
> /* View buttons resp. Progress box */
OK, I'll do that on checkin.
Comment 19•16 years ago
|
||
(In reply to comment #18)
> > remove orient="vertical"
>
> That breaks the centering.
You probably want to use -moz-box-pack: center; and make <vbox class="viewGroupWrapper"> an hbox.
Assignee | ||
Comment 20•16 years ago
|
||
OK, that works when I also add flex="1" to the deck. What advantages does this approach have over orient="vertical"?
Comment 21•16 years ago
|
||
It's more straightforward.
Updated•16 years ago
|
Attachment #365639 -
Flags: review?(dtownsend) → review-
Comment 22•16 years ago
|
||
Comment on attachment 365639 [details] [diff] [review]
v3
This breaks when using the pill button. Currently it hides the entire pane selector area, with this patch it hides the selector but leaves a big gap still.
I'm part inclined to say that the pill button shouldn't actually do anything, but I think since it already does we should keep that behaviour.
Updated•16 years ago
|
Attachment #365639 -
Flags: review?(enndeakin) → review+
Comment 23•16 years ago
|
||
Comment on attachment 365639 [details] [diff] [review]
v3
The WindowDraggingUtils.jsm change is OK. I didn't look at the rest of the patch.
Assignee | ||
Comment 24•16 years ago
|
||
(In reply to comment #22)
> (From update of attachment 365639 [details] [diff] [review])
> This breaks when using the pill button.
Good catch!
> I'm part inclined to say that the pill button shouldn't actually do anything,
> but I think since it already does we should keep that behaviour.
Keeping the exact behaviour is a little tricky with the <deck> approach.
Would it be acceptable to move class="chromeclass-toolbar" to the deck or the windowdragbox, so that the progress box is hidden, too? That's the easiest solution I can think of.
Comment 25•16 years ago
|
||
(In reply to comment #24)
> (In reply to comment #22)
> > (From update of attachment 365639 [details] [diff] [review] [details])
> > This breaks when using the pill button.
>
> Good catch!
>
> > I'm part inclined to say that the pill button shouldn't actually do anything,
> > but I think since it already does we should keep that behaviour.
>
> Keeping the exact behaviour is a little tricky with the <deck> approach.
> Would it be acceptable to move class="chromeclass-toolbar" to the deck or the
> windowdragbox, so that the progress box is hidden, too? That's the easiest
> solution I can think of.
That sounds fine I think. I'm mainly concerned with it not looking ugly when someone tries that.
Assignee | ||
Comment 26•16 years ago
|
||
moved class="chromeclass-toolbar" to the windowdragbox + addressed comment 17
Attachment #365639 -
Attachment is obsolete: true
Attachment #369782 -
Flags: review?(dtownsend)
Updated•16 years ago
|
Attachment #369782 -
Flags: review?(dtownsend) → review+
Comment 27•16 years ago
|
||
Comment on attachment 369782 [details] [diff] [review]
v4
I think this is ok, though I had to unbitrot it to get it to apply.
Assignee | ||
Comment 28•16 years ago
|
||
Status: ASSIGNED → RESOLVED
Closed: 16 years ago
Resolution: --- → FIXED
Comment 29•15 years ago
|
||
Verified fixed by inspecting the elements with DOMi.
Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.2a1pre) Gecko/20090526 Minefield/3.6a1pre ID:20090526031623
Status: RESOLVED → VERIFIED
Target Milestone: --- → mozilla1.9.2a1
You need to log in
before you can comment on or make changes to this bug.
Description
•