1442296 - Adapt input and button styling inside popups to look better with themes

Status: NEW

(Firefox :: Theme, enhancement, P5)

Description

[Tim Nguyen :ntim]

Attachment: ft-deep-dark-feedback-2.png

See attached screenshot

Comment 1

[Tim Nguyen :ntim]

Attachment: Proposed tweaks

Comment 2

[Tim Nguyen :ntim]

To be clear, this bug should just be limited to fixing the text inputs/buttons/checkboxes in panels. The security color should be handled in a different bug.

Comment 3

[Dylan Stokes [:dyl]]

Attachment: Bug 1442296 - Adapt input and button styling inside popups to look better with themes.

Review commit: https://reviewboard.mozilla.org/r/232708/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/232708/

Comment 4

[Tim Nguyen :ntim]

Comment on attachment 8963844 [details]
Bug 1442296 - Adapt input and button styling inside popups to look better with themes.

https://reviewboard.mozilla.org/r/232708/#review238166

::: commit-message-dcd10:1
(Diff revision 1)
> +Bug 1442296 - Adapt input and button styling inside popups to look better with themes. r?ntim, jaws, mconley

All the code should be browser/themes/shared/browser.inc.css, not panelUI.inc.css which is dedicated to the application menu.

::: browser/themes/shared/customizableui/panelUI.inc.css:30
(Diff revision 1)
> +:root {
> +  --arrowpanel-background: #444;
> +  --arrowpanel-color: white;
> +}

Please remove this, this was only supposed to emulate the dark theme for testing.

::: browser/themes/shared/customizableui/panelUI.inc.css:56
(Diff revision 1)
>      var(--lwt-toolbar-vertical-separator, rgba(255,255,255,.2)) calc(100% - 4px),
>      transparent calc(100% - 4px)
>    );
>  }
>  
> +#editBookmarkPanel button,

There's some code on macOS regarding the bookmarks panel buttons to clean up: https://searchfox.org/mozilla-central/source/browser/themes/osx/browser.css#423

Comment 5

[Jared Wein [:jaws] (please needinfo? me)]

Comment on attachment 8963844 [details]
Bug 1442296 - Adapt input and button styling inside popups to look better with themes.

https://reviewboard.mozilla.org/r/232708/#review238414

Please address ntim's review comments and re-request review.

Comment 6

[Dylan Stokes [:dyl]]

Comment on attachment 8963844 [details]
Bug 1442296 - Adapt input and button styling inside popups to look better with themes.

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/232708/diff/1-2/

Comment 7

[Dylan Stokes [:dyl]]

Regarding macOS for the bookmarkPanel expanders it was using the @hudButton@ definition in browser\themes\osx\shared.inc. I was unsure if I should be changing that define or only worrying about the bookmarkPanel expanders. Currently I made a change to only the bookmarkPanel expanders.

Comment 8

[Dylan Stokes [:dyl]]

Comment on attachment 8963844 [details]
Bug 1442296 - Adapt input and button styling inside popups to look better with themes.

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/232708/diff/2-3/

Comment 9

[Dylan Stokes [:dyl]]

Current review is a work in progress. Currently stuck on trying to figure out how to theme the New Folder dropdown tree. Also need to address the drop down indicator SVG. It is difficult to see because it is dark on dark.

Comment 10

[Tim Nguyen :ntim]

Attachment: Tweaks over dyl's patch

Here's a patch that removes some unused macOS code, and fixes the images.

There's still some work to do though :)

Comment 11

[Dylan Stokes [:dyl]]

Comment on attachment 8963844 [details]
Bug 1442296 - Adapt input and button styling inside popups to look better with themes.

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/232708/diff/3-4/

Comment 12

[Dylan Stokes [:dyl]]

Attachment: work-in-progress-windows.png

Review still work in progress. Added ntim's changes and expanded upon them. The tree on Windows looks correct except for highlight text color. I am trying to figure out why the background of the tree on MacOS is still white but having trouble finding what is causing it.

Comment 13

[Dylan Stokes [:dyl]]

Comment on attachment 8963844 [details]
Bug 1442296 - Adapt input and button styling inside popups to look better with themes.

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/232708/diff/4-5/

Comment 14

[Dylan Stokes [:dyl]]

Comment on attachment 8963844 [details]
Bug 1442296 - Adapt input and button styling inside popups to look better with themes.

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/232708/diff/5-6/

Comment 15

[Tim Nguyen :ntim]

Attachment: Bug 1442296 - Use custom styling for edit bookmark panel controls on all platforms. r=dao

Comment 16

[Tim Nguyen :ntim]

Windows build:   https://treeherder.mozilla.org/#/jobs?repo=try&revision=53f46f69be8430fe5463dd5437fa9e30b6256198