1920798 - Display issues with newtab weather widget change localtion "X" button

Status: NEW

(Firefox :: New Tab Page, defect, P3)

Description

[Hanna Jones [:hjones]]

Attachment: close button with dark theme + wallpaper and hovered with light theme + wallpaper

There are a couple of small visual issues with the "X" close button that appears when you try to change location in the weather widget:

• Without any wallpapers applied it lacks :hover and :active styles, which makes it difficult to tell when the button is the target for mouse/pointer events
• With a dark theme and a wallpaper applied the button background color stands out from the input in an unexpected way (see attachment)
• With light or dark themes and a wallpaper applied the button appears to be hovered or active whenever any part of the location input is hovered or active (see attachment)

Comment 1

[Hanna Jones [:hjones]]

Attachment: weather-widget.diff

I spent ~5 mins swapping in moz-button and it seems to fix most of the issues + allows us to remove some CSS. Not too familiar with working on newtab code and not sure I have the cycles to see this through, but I've attached my diff for reference.

Comment 2

[Scott [:thecount] Downe]

Yeah I think I get a bit more what's going on.

Seems the hover state is doing this, and only happens if a wallpaper is set.

I would argue the state without a wallpaper with no hover is probably worse.

I suspect when I initially tested this and didn't see the issue, I wasn't setting a wallpaper. Probably why I couldn't see the issue in nightly initially.