Opened 3 years ago

Last modified 21 months ago

#4136 closed defect

Adblock Plus for Chrome devtools pane uses wrong colours when the dark theme is enabled — at Version 5

Reported by: mapx Assignee:
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/
https://codereview.adblockplus.org/29370766/

Description (last modified by greiner)

Environment

Chrome Version 51.0.2704.106 (64-bit)
Adblock Plus 1.12.1

How to reproduce

  1. Open the Chrome developer tools.
  2. Click the "three dots" icon at the top right and then select Settings.
  3. On the Settings -> Preferences page select "Theme: Dark" under the "Appearance" header.
  4. Close the Settings window and select the "Adblock Plus" pane in the developer tools.
  5. 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.

Change History (6)

Changed 3 years ago by mapx

comment:1 Changed 3 years ago by mapx

  • Description modified (diff)

comment:2 Changed 3 years ago 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 3 years ago by kzar

  • Component changed from Platform to User-Interface
  • Priority changed from P4 to Unknown

(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.)

comment:4 Changed 3 years ago by kzar

  • Description modified (diff)

comment:5 Changed 3 years ago 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.

Note: See TracTickets for help on using tickets.