vertical separator between buttons in social toolbar cause hovered buttons to appear to have a double wide right border

RESOLVED FIXED in Firefox 17

Status

()

defect
RESOLVED FIXED
7 years ago
7 years ago

People

(Reporter: asa, Assigned: dao)

Tracking

17 Branch
Firefox 19
All
Windows 7
Points:
---
Bug Flags:
in-testsuite -

Firefox Tracking Flags

(firefox17+ verified, firefox18+ verified)

Details

Attachments

(2 attachments, 1 obsolete attachment)

We've got a vertical separator line between each of the buttons in the social toolbar. When you hover over one of the buttons, the button border on the left side overlaps the separator and the effect is a slightly darkened left border. That's not terribly ugly, but the right border is another story. The right border looks doubled up, two pixels wide, because the button's hovered border is one pixel off from the vertical separator's dark line. 

If we can make the hover state's right border overlap the separator line like the left border does, that could mask this hack a bit better. If we can't do that, maybe we can make the separators to the right and left of the currently hovered button disappear on hover and pressed state.

It seems like we don't have a proper widget here and it would be nice to figure out how to get this right. I'm OK with refining the hack, but we probably want to make a better widget here if we're going to support this in the long run.
Posted patch Patch (obsolete) — Splinter Review
This patch turns off the separator for the hovered button and the adjacent button so there is no double border. Thanks for filing this bug Asa :)
Assignee: nobody → jaws
Status: NEW → ASSIGNED
Attachment #673755 - Flags: review?(felipc)
Comment on attachment 673755 [details] [diff] [review]
Patch

>+@navbarLargeIcons@ > #social-toolbar-item > .toolbarbutton-1:hover:not(:first-child)::before,
>+@navbarLargeIcons@ > #social-toolbar-item > .toolbarbutton-1:hover + .toolbarbutton-1:not(:first-child)::before {
>+  display: none;
>+}

In the second selector, a .toolbarbutton-1 next to .toolbarbutton-1:hover can never be :first-child, so there's no point in adding :not(:first-child) to the selector.

You can also avoid this whole rule by not adding the border in the first place where you don't want it.
Attachment #673755 - Flags: review?(felipc) → review-
Component: SocialAPI → Theme
Posted patch patch v2Splinter Review
This should do it, I think. Jared, can you verify? I'm on Linux right now.
Assignee: jaws → dao
Attachment #673755 - Attachment is obsolete: true
Attachment #673777 - Flags: review?(jaws)
Comment on attachment 673777 [details] [diff] [review]
patch v2

Review of attachment 673777 [details] [diff] [review]:
-----------------------------------------------------------------

Yeah this fixes it. Thanks!
Attachment #673777 - Flags: review?(jaws) → review+
https://hg.mozilla.org/mozilla-central/rev/c4c392a00afe
Status: ASSIGNED → RESOLVED
Closed: 7 years ago
Flags: in-testsuite-
Resolution: --- → FIXED
Target Milestone: --- → Firefox 19
Comment on attachment 673777 [details] [diff] [review]
patch v2

[Triage Comment]
let's get this polish fix into 17 (first social release)
Attachment #673777 - Flags: approval-mozilla-beta+
Attachment #673777 - Flags: approval-mozilla-aurora+
Mozilla/5.0 (Windows NT 6.1; rv:17.0) Gecko/17.0 Firefox/17.0

Verified on Firefox 17 beta 6 that the double wide right border created on the social toolbar by the vertical separator between buttons and mouse hover is gone.
Mozilla/5.0 (Windows NT 6.1; rv:18.0) Gecko/20100101 Firefox/18.0

Verified as fixed on Firefox 18 beta 3 - on mouse hover there is no double wide right border created on the social toolbar by the vertical separator between buttons.
You need to log in before you can comment on or make changes to this bug.