New issue
Advanced search Search tips
Note: Color blocks (like █ or █) mean that a user may not be available. Tooltip shows the reason.

Issue 608869 link

Starred by 5 users
Status: Fixed
Owner:
pfeldman@chromium.org
Closed: Mar 2017
Cc:
█ rnimmagadda@chromium.org
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Windows , Mac
Pri: 3
Type: Bug



Sign in to add a comment

Chrome developer tools dark mode nearly not readable for third party dev tools like React

Reported by therealm...@gmail.com, May 3 2016 
Chrome Version       : 51.0.2704.29
OS Version: OS X 10.11.4
URLs (if applicable) : https://react-bootstrap.github.io/

What steps will reproduce the problem?
1. Set Developer Console theme to Dark
2. Install https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi
3. Open URL https://react-bootstrap.github.io/
3. Open Devtools and go to "React" tab.

What is the expected result?
All text is easily readable in devtools dark mode. Dark text colors in dark mode should not be possible or translated to lighter colors. Or is there a way to detect dark mode for the React extension developers?

What happens instead of that?
Text and attribute values are not easily readable because they are using dark blue and black. See Screenshot attached.

Please provide any additional information below. Attach a screenshot if
possible.

UserAgentString: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.29 Safari/537.36
React-Bootstrap.png
178 KB View Download

Comment 1 by rnimmagadda@chromium.org, May 4 2016

Cc: rnimmagadda@chromium.org
Components: Platform>DevTools
Labels: M-50 OS-Linux OS-Windows
Status: Untriaged (was: Unconfirmed)
Able to repro this issue on Windows 7, MAC (10.11.4) & Ubuntu Trusty (14.04) for Google Chrome Stable Version - 50.0.2661.94

This is a Non-Regression issue existing from M51 # - 51.0.2662.0 

DevTools theme color change feature is implemented from M51, before M51 there is no such feature.

Thank you.

Comment 2 by alph@chromium.org, May 6 2016

Owner: pfeldman@chromium.org
Status: Assigned (was: Untriaged)
Project Member

Comment 3 by bugdroid1@chromium.org, Jul 7 2016 

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/426dd8915fd31f70e7dcb37de79e3975a66b72fd

commit 426dd8915fd31f70e7dcb37de79e3975a66b72fd
Author: pfeldman <pfeldman@chromium.org>
Date: Thu Jul 07 04:48:11 2016

DevTools: pass theme name to the extensions.
BUG= 608869 

Review-Url: https://codereview.chromium.org/2080173003
Cr-Commit-Position: refs/heads/master@{#404076}

[modify] https://crrev.com/426dd8915fd31f70e7dcb37de79e3975a66b72fd/third_party/WebKit/LayoutTests/TestExpectations
[modify] https://crrev.com/426dd8915fd31f70e7dcb37de79e3975a66b72fd/third_party/WebKit/LayoutTests/http/tests/inspector/extensions-test.js
[modify] https://crrev.com/426dd8915fd31f70e7dcb37de79e3975a66b72fd/third_party/WebKit/LayoutTests/inspector/extensions/extensions-api-expected.txt
[modify] https://crrev.com/426dd8915fd31f70e7dcb37de79e3975a66b72fd/third_party/WebKit/LayoutTests/inspector/extensions/extensions-panel-expected.txt
[modify] https://crrev.com/426dd8915fd31f70e7dcb37de79e3975a66b72fd/third_party/WebKit/LayoutTests/inspector/extensions/extensions-panel.html
[modify] https://crrev.com/426dd8915fd31f70e7dcb37de79e3975a66b72fd/third_party/WebKit/LayoutTests/inspector/extensions/extensions-resources.html
[modify] https://crrev.com/426dd8915fd31f70e7dcb37de79e3975a66b72fd/third_party/WebKit/Source/devtools/front_end/extensions/ExtensionAPI.js
[modify] https://crrev.com/426dd8915fd31f70e7dcb37de79e3975a66b72fd/third_party/WebKit/Source/devtools/front_end/extensions/ExtensionServer.js
[modify] https://crrev.com/426dd8915fd31f70e7dcb37de79e3975a66b72fd/third_party/WebKit/Source/devtools/front_end/ui/UIUtils.js

Comment 4 by woxxom@gmail.com, Dec 10 2016 

Great!

It should be added to the documentation that the theme name is accessible as chrome.devtools.panels.themeName since 54.0.2791.0
https://developer.chrome.com/extensions/devtools_panels

Comment 5 by paulir...@chromium.org, Feb 9 2017 

The property `chrome.devtools.panels.themeName` will have the value of `dark` in dark mode. It'll be `default` otherwise.
However, do note that if a user has a Chrome extension installed that adjusts the CSS of devtools (e.g. "DevTools Theme: Zero Dark Matrix"), the value will still report `default`.

I'll add this to the documentation.. good call woxxom!
Project Member

Comment 6 by bugdroid1@chromium.org, Mar 10 2017 

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/073706fee0c989101c5c28391400ddeb0a5a4127

commit 073706fee0c989101c5c28391400ddeb0a5a4127
Author: paulirish <paulirish@chromium.org>
Date: Fri Mar 10 21:40:15 2017

DevTools ext docs: Add chrome.devtools.panels.themeName

BUG= 608869 

Review-Url: https://codereview.chromium.org/2717543002
Cr-Commit-Position: refs/heads/master@{#456172}

[modify] https://crrev.com/073706fee0c989101c5c28391400ddeb0a5a4127/chrome/common/extensions/api/devtools/panels.json

Comment 7 by paulir...@chromium.org, Mar 10 2017

Status: Fixed (was: Assigned)

Comment 8 by ngy...@gmail.com, Jun 12 2017 

The documentation at https://developer.chrome.com/extensions/devtools_panels#property-themeName claims that it's still not fully implemented, but it works fine on Chrome 54 stable, can the documentation be fixed?

M-50 on this bug is misleading too
►

Sign in to add a comment