Opened on 06/08/2016 at 07:22:28 AM
Closed on 01/12/2017 at 07:40:24 AM
Last modified on 02/05/2018 at 05:55:08 PM
#4136 closed defect (fixed)
Adblock Plus for Chrome devtools pane uses wrong colours when the dark theme is enabled
| Reported by: | mapx | Assignee: | kzar |
|---|---|---|---|
| Priority: | P3 | Milestone: | Adblock-Plus-1.13-for-Chrome-Opera |
| Module: | User-Interface | Keywords: | |
| Cc: | kzar, sebastian, greiner, Lain_13 | Blocked By: | |
| Blocking: | Platform: | Chrome | |
| Ready: | yes | Confidential: | no |
| Tester: | Ross | Verified working: | yes |
| Review URL(s): |
https://codereview.adblockplus.org/29368730/ |
||
Description (last modified by kzar)
Environment
Chrome Version 51.0.2704.106 (64-bit)
Adblock Plus 1.12.1
How to reproduce
- Open the Chrome developer tools.
- Click the "three dots" icon at the top right and then select Settings.
- On the Settings -> Preferences page select "Theme: Dark" under the "Appearance" header.
- Close the Settings window and select the "Adblock Plus" pane in the developer tools.
- Re-load the inspected page so some blocked/allowed requests are listed.
Observed behaviour
The colours used for the Adblock Plus devtools pane are wrong. The text is often black on black, and sometimes the background colours do not match the dark theme. (See the uploaded image.)
Expected behaviour
The colours used in the Adblock Plus devtools pane should adapt to the light/dark theme selection.
Notes
The inspector itself can be inspected using the Ctrl-Shift-I (Ctrl-Apple-I for Macs) hotkey as long as the inspector is undocked from the page.
What to change
Use chrome.devtools.panels.themeName (see Chromium Issue 608869) to apply additional styles in case of themes being applied. Note that while we can make specific optimizations to the "dark" theme we may need to have some generic fallback style for any other ones that may be added to avoid future breakage.
Update the adblockplusui dependency to hg:575d910d9d2e git:612cb73, which will also include an unrelated change to remove some legacy code and an unrelated change which adds antiadblockinit.js from adblockpluscore.
Attachments (2)
Change History (22)
Changed on 06/08/2016 at 07:22:45 AM by mapx
comment:2 Changed on 07/25/2016 at 03:04:35 PM by kzar
- Description modified (diff)
- Priority changed from Unknown to P4
- Ready set
- Summary changed from ABP panel incorrectly styled in chrome dev tools - dark theme to Adblock Plus for Chrome devtools pane uses wrong colours when the dark theme is enabled
comment:3 Changed on 07/25/2016 at 03:11:46 PM by kzar
- Component changed from Platform to User-Interface
- Priority changed from P4 to Unknown
comment:5 Changed on 07/25/2016 at 04:17:04 PM by greiner
- Description modified (diff)
- Keywords externaldependency added
- Priority changed from Unknown to P3
According to Chromium Issue 608869 they added chrome.devtools.panels.themeName a few weeks ago so we should be able to use it as soon as it lands in Chrome's dev channel.
Note that we can't use the body's -theme-with-dark-background class because our panel is running inside of an iFrame.
At the moment the only thing we could do is set html {background-color: #FFF;} to ensure that our content remains usable.
comment:6 Changed on 12/18/2016 at 08:50:53 AM by mapx
- Cc Lain_13 added
comment:7 Changed on 12/18/2016 at 08:52:29 AM by mapx
comment:8 Changed on 12/19/2016 at 12:58:51 PM by kzar
- Keywords externaldependency removed
- Owner set to kzar
comment:9 Changed on 12/19/2016 at 01:17:07 PM by kzar
- Review URL(s) modified (diff)
- Status changed from new to reviewing
Changed on 12/19/2016 at 01:22:13 PM by kzar
comment:10 Changed on 01/05/2017 at 08:20:05 PM by abpbot
A commit referencing this issue has landed:
Issue 4136 - Support Chrome's dark devtools theme
comment:11 Changed on 01/05/2017 at 08:35:44 PM by kzar
- Description modified (diff)
(Note the dependency update is not blocked by #4715 since antiadblockinit.js is added to adblockplusui instead of removed.)
comment:12 Changed on 01/05/2017 at 08:43:43 PM by kzar
- Review URL(s) modified (diff)
comment:13 Changed on 01/07/2017 at 10:35:27 AM by sebastian
- Milestone set to Adblock-Plus-for-Chrome-Opera-next
comment:14 Changed on 01/12/2017 at 07:37:50 AM by abpbot
A commit referencing this issue has landed:
Issue 4136 - Update adblockplusui dependency
comment:15 Changed on 01/12/2017 at 07:40:24 AM by kzar
- Resolution set to fixed
- Status changed from reviewing to closed
comment:16 follow-up: ↓ 17 Changed on 01/16/2017 at 08:43:55 AM by Ross
In older Chrome's, like 49, the ABP panel now has a white background and is usable again. In more recent Chrome's, like 54, the ABP now follows the dark theme.
I have a question though: Where are the red/greens in the ABP panel list from? (Such as when items are blocked or exceptions). Are they Chrome constants or colours we have chosen? Because they are really unreadable/unusable to someone with moderate colour blindness (can see colours but often mistake/blur them). Would anyone agree with that?
If they are our colours, we should fix it, otherwise I'll find/create a Chrome issue.
comment:17 in reply to: ↑ 16 Changed on 01/16/2017 at 09:21:57 AM by kzar
Replying to Ross:
I have a question though: Where are the red/greens in the ABP panel list from? (Such as when items are blocked or exceptions). Are they Chrome constants or colours we have chosen? Because they are really unreadable/unusable to someone with moderate colour blindness (can see colours but often mistake/blur them). Would anyone agree with that?
They are our colours. I tried my best to pick something appropriate but we can update them if you / someone has an idea for how we could improve them.
comment:18 Changed on 03/13/2017 at 01:31:28 PM by Ross
- Tester changed from Unknown to Ross
- Verified working set
This is fine then. I will open a ticket about shades.
ABP 1.12.4.1739
Chrome 49 / 56 / Windows 10
Chrome 56 / OS X 10.12
Chrome 56 / Ubuntu 16.04
Opera 37 / 41 / Windows 7
Safari 10 / OS X 10.12
comment:19 Changed on 02/05/2018 at 02:29:57 PM by mapx
comment:20 Changed on 02/05/2018 at 05:55:08 PM by kzar
Thanks for the link, I've opened #6358 for that.
(I just realised the files causing this problem live in the adblockplusui repository, so I'm moving this issue to User-Interface and leaving the prioritisation up to Thomas.)