Closed Bug 1385518 Opened 4 years ago Closed 3 years ago

[Photon] Update sidebar styling for dark theme

Categories

(Firefox :: Theme, defect, P1)

defect

Tracking

()

VERIFIED FIXED
Firefox 64
Tracking Status
firefox56 --- wontfix
firefox57 --- wontfix
firefox64 --- verified

People

(Reporter: nhnt11, Assigned: ntim)

References

(Depends on 1 open bug)

Details

(Whiteboard: [reserve-photon-visual][p3][ntim-intern-project])

Attachments

(3 files)

Background should be dark.
Whiteboard: [photon-visual] → [photon-visual] [triage]
Whiteboard: [photon-visual] [triage] → [reserve-photon-visual][p3]
Flags: qe-verify+
Priority: -- → P3
QA Contact: brindusa.tot
Priority: P3 → P4
Duplicate of this bug: 1390410
Duplicate of this bug: 1394064
See Also: → 1408121
Duplicate of this bug: 1409108
Assignee: nobody → jaws
Status: NEW → ASSIGNED
Priority: P4 → P1
See Also: → 1365807
Blocks: 1418602
Duplicate of this bug: 1432723
Assignee: jaws → nobody
Status: ASSIGNED → NEW
Comment on attachment 8919591 [details]
Bug 1385518 - (WIP) Update sidebar styling for dark theme.

https://reviewboard.mozilla.org/r/190456/#review228422

::: browser/components/places/content/sidebarUtils.js:20
(Diff revision 2)
> +      document.documentElement.style.setProperty("--chrome-secondary-background-color", background);
> +      document.documentElement.style.setProperty("--chrome-color", color);
> +      document.documentElement.setAttribute("compacttheme", "true");

Note that you're definitely not supposed to be dirtying the DOM inside a promiseLayoutFlushed callback.
Duplicate of this bug: 1440447
Assignee: nobody → stokesdy
Assignee: stokesdy → nobody
This will be much easier to do with bug 1418602 fixed, leaving this bug on hold for now.
No longer blocks: 1418602
Depends on: 1418602
No longer blocks: dark-theme-darkening
Duplicate of this bug: 1474588
Whiteboard: [reserve-photon-visual][p3] → [reserve-photon-visual][p3][ntim-intern-project]
No longer blocks: 1474588
Now that bug 1418602 is fixed, we can simply add the sidebar/sidebar_text properties to nsBrowserGlue.js.

Although, I'm thinking it's better to get bug 1484891 and bug 1485017 fixed first, to avoid shipping a half-baked dark sidebar.
Depends on: 1484891, 1485017
Assignee: nobody → ntim.bugs
Comment on attachment 9005869 [details]
Bug 1385518 - Update sidebar styling for dark theme. r=jaws

Jared Wein [:jaws] (please needinfo? me) has approved the revision.
Attachment #9005869 - Flags: review+
Pushed by jwein@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/af2c47f0c8d7
Update sidebar styling for dark theme. r=jaws
https://hg.mozilla.org/mozilla-central/rev/af2c47f0c8d7
Status: NEW → RESOLVED
Closed: 3 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 64
Depends on: 1488779
Depends on: 1485599
Depends on: 1489485
Depends on: 1489495
I have reproduced this bug with Nightly 56.0a1 (2017-07-28) on Windows 10, 64 Bit!
This bug's fix is verified with latest Nightly!

Build ID   - 20180910220142
User Agent - Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:64.0) Gecko/20100101 Firefox/64

QA Whiteboard: [bugday-20180905]
Hi Amy, would it be possible to get a quick UI-review of the dark theme sidebar (bookmarks/history/synced tabs) during the 64 cycle ? This is already in Nightly.

Thank you.
Flags: needinfo?(amlee)
Depends on: 1491688
(In reply to Tim Nguyen :ntim (please use needinfo?) from comment #17)
> Hi Amy, would it be possible to get a quick UI-review of the dark theme
> sidebar (bookmarks/history/synced tabs) during the 64 cycle ? This is
> already in Nightly.
> 
> Thank you.

Hi, 

Took a quick look and there are some edits I'd like to make. Will post them once I make my notes
Flags: needinfo?(amlee)
Hi, 

Please see below for the CSS for the dark them side bar. Thanks!

https://firefoxux.github.io/people/amlee/Dark-Theme-Sidebar
(In reply to Amy Lee [:amylee] UX from comment #19)
> Hi, 
> 
> Please see below for the CSS for the dark them side bar. Thanks!
> 
> https://firefoxux.github.io/people/amlee/Dark-Theme-Sidebar

Thanks! I'll file bugs for individual items.
Depends on: 1493776
Depends on: 1493789
Attached image 2018-10-01_17h20_03.png
Build ID 	20181001100147
User Agent 	Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:64.0) Gecko/20100101 Firefox/64.0

Verified this bug on latest Nightly 64.0a1 on Windows 10 x64 and Mac OS X 10.13 and the background color for the Dark theme is grey, not black. Please see the attachment. Is this the expected color for background on the sidebars?
Flags: needinfo?(ntim.bugs)
Flags: needinfo?(amlee)
Yes this is correct. Thanks!
Flags: needinfo?(amlee)
Depends on: 1495442
Yes, that's correct!
Flags: needinfo?(ntim.bugs)
No longer depends on: 1495442
Verified on Ubuntu 16.04 with latest Nightly 64.01 (10.02.2018) and the bug is fixed, the background color for sidebars is dark grey when using the Dark theme.
Status: RESOLVED → VERIFIED
Flags: qe-verify+
You need to log in before you can comment on or make changes to this bug.