Closed Bug 553673 Opened 14 years ago Closed 14 years ago

Border and glow doesn't fade to hovered state on toolbar button hover, only background

Categories

(Firefox :: Theme, defect)

x86
Windows XP
defect
Not set
trivial

Tracking

()

RESOLVED FIXED
Firefox 3.7a4

People

(Reporter: lmlb_lmlb, Assigned: dao)

References

Details

(Keywords: polish)

Attachments

(1 file)

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.3a4pre) Gecko/20100319 BetterPrivacy-1.47 Minefield/3.7a4pre (.NET CLR 3.5.30729)
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.3a4pre) Gecko/20100319 BetterPrivacy-1.47 Minefield/3.7a4pre (.NET CLR 3.5.30729)

On the hover state on the toolbar buttons, instead of fading in, the border became instantly blue and the blue glow appeared instantly. Only the background faded.

Reproducible: Always

Steps to Reproduce:
1. Start minefield.
2. Hover the cursor on a toolbar button.
Actual Results:  
Only the background faded to blue. The border got instantly blue and the blue glow appeared instantly.

Expected Results:  
The whole button shall fade to blue.

I use this stylish fix:

.toolbarbutton-menubutton-button:not([disabled="true"]):not(:active):hover,
toolbarbutton[type="menu-button"]:not([open="true"]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled="true"]),
.toolbarbutton-1:not([disabled="true"]):not([checked="true"]):not(:active):hover {
  -moz-transition-property: background-color, border-color, -moz-box-shadow !important;
}
Assignee: nobody → dao
Status: UNCONFIRMED → ASSIGNED
Ever confirmed: true
Attached patch patchSplinter Review
Attachment #433632 - Flags: review?(rflint)
Comment on attachment 433632 [details] [diff] [review]
patch

>   -moz-box-shadow: 0 0 0 1px rgba(255,255,255,.3) inset,
>                    0 0 0 2px rgba(255,255,255,.1) inset,
>-                   0 0 5px hsl(190,90%,80%),
>-                   0 1px 0 rgba(0,0,0,.1);
>+                   0 1px 0 rgba(0,0,0,.1),
>+                   0 0 5px hsl(190,90%,80%);

I had to flip this, so that the transition doesn't happen from '0 1px 0 rgba(0,0,0,.1)' to '0 0 5px hsl(190,90%,80%)' and from none to '0 1px 0 rgba(0,0,0,.1)' but from none to '0 0 5px hsl(190,90%,80%)'.
Blocks: 544999
Keywords: polish
Comment on attachment 433632 [details] [diff] [review]
patch

>+toolbar:not([iconsize="small"])[mode="icons"] #forward-button:not([disabled="true"]):not(:active):hover {

>+  /* Don't animate the box shadow, as the blur and spread radii affect the mask. */
>+  -moz-transition: background-color .4s ease-in;

That's unfortunate - file a follow up to see if there's anything we can do about that?
Attachment #433632 - Flags: review?(rflint) → review+
http://hg.mozilla.org/mozilla-central/rev/fc072b1323d3
Status: ASSIGNED → RESOLVED
Closed: 14 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 3.7a4
(In reply to comment #3)
> (From update of attachment 433632 [details] [diff] [review])
> >+toolbar:not([iconsize="small"])[mode="icons"] #forward-button:not([disabled="true"]):not(:active):hover {
> 
> >+  /* Don't animate the box shadow, as the blur and spread radii affect the mask. */
> >+  -moz-transition: background-color .4s ease-in;
> 
> That's unfortunate - file a follow up to see if there's anything we can do
> about that?

filed bug 554863
You need to log in before you can comment on or make changes to this bug.