micjamking / devtools-author

A selection of author settings for Chrome Developer Tools.

DevTools Author

A selection of author settings for Chrome Developer Tools.

Features

If you develop in the browser and/or use Chrome Developer Tools as your web authoring environment, this extension provides a small set of settings to enhance DevTools editing environment:

• Choose from +25 editor themes (applies to Elements, Sources and Console panels only)
• Supports system enabled fonts (must be installed prior on your computer).
• Change font size from 10px - 22px

Usage

1. Install the Chrome extension
2. Enable Developer Tools experiments in chrome://flags/#enable-devtools-experiments. Restart Chrome for flags to take effect.
3. Open DevTools (cmd + opt + I); Settings > Experiments > check Allow custom UI themes.

After restarting DevTools, you should see the default theme 3024 take affect within the Sources and Console panels.

Contributing

Fork the repository and then follow the steps below to contribute new themes or bug fixes. Devtools Author is built using NodeJS and GruntJS.

Installation:

$ git clone [email protected]:<username>/devtools-author.git
...
$ cd devtools-author
$ npm install

Development:

$ grunt serve

1. Once grunt is running, to install development extension in Chrome, open Settings > More Tools > Extensions and click on the Load unpacked extension... button. (also enable Allow incognito below if you wish).

• (Disable DevTools Author if you have the extension installed from the Chrome Web Store.)
• Make sure Developer Tools experiments are enabled and custom UI themes are allowed.

2. Restart DevTools. I find the fastest way to see changes take affect is to undock DevTools in a separate window and then open a subsequent DevTools window (cmd + opt + I while the current DevTools window is focused) after changes have been saved and grunt reloads the assets. You'll then need to reload (close and reopen) the subsequent DevTools window after you make changes.

Creating additional themes

1. Make a copy of one of the templates from app/styles/themes/templates/ and rename the file to your theme name without the underscore, ie. if your theme is called aloha, inside of app/styles/themes/, copy templates/_theme-template.scss and rename it to aloha.scss
2. Add color values for the palette based on the code syntax highlighter variables in your scss file.

• If you desire more specific targeting for your theme than what is being supported out of the box, you can add those styles to the end of your theme file, after the @include styles(). See #109

3. Add your color palette object (name and colors array) to the themes.json in app/scripts/
4. In DevTools, select your theme palette in the Author Settings panel.
5. Preview and adjust your colors as needed. See Development - Step 2.
6. Commit and push your changes to your repo, then create a pull request for your new theme once it is ready!

Changelog

• Changelog
• Releases

License

MIT © Mike King [email protected]

devtools-author's Issues

Elements logged to console are barely legible in dark themes

The dark colours used when elements are logged to console (e.g. document.getElementById('{{elementId}}'); ) are very dark and do not contrast well enough with the background colour to be legible.

Please consider removing `-webkit-font-smoothing: antialiased;`

First off, thanks for making this extension! It's really awesome.

But I do find the use of font-smoothing to really diminish legibility. I made a gif to highlight the differences.

Also, I've been considering creating a dev tools theme specifically for my Sublime Text and Atom theme called Predawn. If you are ever looking to add additional color schemes, including Predawn would make my day!

cursor is missing on element attribute

Hi, when I clicked on the element attribute, the cursor is gone,

any idea how to fixed that?

Improve contrast of selected top panel

Selected panel is difficult to see, suggest moving to top of screen and highlighting in primary color from theme.

[1.0] Refactor common styles to be more modular

Currently, most of the styles are contained in a single common Sass partial; this was initially done for efficiency when only elements and console panels were being skinned. With the addition of the elements panel, and (minor) potential for further growth, it makes the current structure unscalable and difficult to maintain.

app/styles/modules/_common-styles.scss#L2

@mixin styles(
$background,            // Background
$background-highlight,  // Background - Highlight
$comments,              // Comments / Secondary Content
$body-text,             // Body text / default code / primary content
$body-text-highlight,   // Optional emphasized content
$property,              // CSS Properties
$pseudo,                // CSS3 pseudo-selectors / elements
$keyword,               // CSS Keywords (!important, etc.)
$selectors,             // HTML Tags / CSS ID/Class Selectors / JS Keywords
$strings,               // HTML/CSS/JS Strings
$operators,             // CSS Tag Selectors / JS Operators (in Canary)
$accent                 // Accent / Highlight
){

  // Panels
  .elements,
  .elements ::shadow,
  .sources,
  .console,
  .console-view-wrapper {
    ...
  }
}

Ideally, the @mixin styles() itself would not change, avoiding any negative impact on the theme Sass files. The proposed solution would be to use individual @include's within the @mixin styles() itself, and edit the styles as a mixin within unique partials.

@mixin styles(
$background,            // Background
$background-highlight,  // Background - Highlight
$comments,              // Comments / Secondary Content
$body-text,             // Body text / default code / primary content
$body-text-highlight,   // Optional emphasized content
$property,              // CSS Properties
$pseudo,                // CSS3 pseudo-selectors / elements
$keyword,               // CSS Keywords (!important, etc.)
$selectors,             // HTML Tags / CSS ID/Class Selectors / JS Keywords
$strings,               // HTML/CSS/JS Strings
$operators,             // CSS Tag Selectors / JS Operators (in Canary)
$accent                 // Accent / Highlight
){

  // General
  @include common();
  @include devtools_window();

  // Panels
  @include panel_elements();
  @include panel_sources();
  @include panel_console();
}

The theme-config.scss will need to be updated to include the additional partials containing the mixins for building the theme.

app/styles/base/_theme-config.scss#L12

/**
 * Modules
 */
@import "modules/common";
@import "modules/devtools-window";
@import "modules/panel-console";
@import "modules/panel-elements";
@import "modules/panel-sources";
@import "modules/styles";

Material Dark Theme: Errors not visible :P

Errors are not visible because of the text colors being used although warnings look totally fine.

Scrollbars

I'm on Windows and having a scrollbar is actually very useful, especially the up and down arrows on it. Currently all the themes I've tried have this tiny little 2 pixel wide, and often not much taller scrollbar that isn't even clickable. Seriously, what's the point if you can't use it. There is no clickable pixels, you either resize the sidbar or click on an element in the DOM.

Can we either an option to disable custom scrollbars and let the OS do what the OS do?

Missing UI elements

I have a series of screenshots that show missing UI elements in Chrome. They do show up in Chrome Canary. I have screenshots of both Chrome and Chrome Canary for each example. I have the latest version of each.

Im this first one the icons notice the missing Select, Toggle Device Mode on the upper lefthand corner and then the missing Customize and control DevTools and Close icons on the upper right.

In the next image notice the icons missing for New Style Rule, Toggle Element State and Toggle Animation Controls in the Filter section

Not working on OSX El Capitan

For some reason when I switch the theme and close then reopen dev tools it's not applying the new theme. Any ideas? EDIT ** It's working now. Not sure what was going but after I restarted Chrome it started working. This can probably be closed.

Console errors on dark theme are in white

Console error text on dark themes is in white with a background-color of light pink and so it isin't quite visible

Add more thorough explanation for installation

[1.0] Add unit tests

Create unit tests for setting up the extension dependencies and communication with chrome.storage. A majority of the functionality is reliant on the successful return of several XHR's and the unit tests should reflect this behavior. Third-party functionality (ie. chrome.storage and chrome.devtools.panels) should be stubbed out appropriately.

Unit testing scope

DevTools Extension: app/scripts/devtools.js

• app.loadTheme: gets stylesheet name from chrome.storage via XHR and fires callback function if returns success 200
• app.init: creates 'Author Settings' panel via chrome.devtools.panels and loads panel html page

Author Settings panel: app/scripts/panel.js

• init: gets theme.json via XHR and fires callback function if returns success 200
• getTheme: gets devtools-theme from chrome.storage and returns it for display in UI
• getFontFamily: gets devtools-fontFamily from chrome.storage and returns it for display in UI
• getFontSize: gets devtools-fontSize from chrome.storage and returns it for display in UI

References:

• http://stackoverflow.com/questions/2869827/how-to-test-chrome-extensions
• http://stackoverflow.com/questions/14798528/testing-browser-extensions/17370531#17370531
• https://github.com/vitalets/sinon-chrome

Create json for themes & load via ajax in panel.js

Submit extension to Chrome store

https://developer.chrome.com/webstore/get_started_simple#step3

No DevTools Icons

Hi, if I enable devtools author the devtools don't show the icons for menu or console errors. The Number of Errors aren't shown too.

Not working after Chrome cloud sync, possible firewall issue?

Hey Mike, great extension man, really loving it. I got it to work from home last night on two separate Chrome profiles, but I got in to work this morning and on the same two profiles the Author Settings won't work/appear properly, the Elements/Console etc. panels wouldn't apply the theme, and the Author Settings panel is mostly blank. Attached a screenshot of what it looks like, you can't select a theme or interact with the drop-down, and you can change the font size but it reverts back once you restart the dev tools. The funny thing is, it still seems to remember my theme selections from the previous night, because when you hover over anything in the Elements panel the corresponding web page highlights it in the theme's colours.

I did notice that while my Chrome profiles at work had copied over the extension and dev tools settings the flags still had the Enable Developer Tools experiments set to Enable, but even after enabling it I had no luck. I completely wiped everything, reset all settings, emptied the cache and started again, reinstalled the extension but still no love. I just tried a fresh install on a third separate Chrome profile and the problem still occurred. Just spitballing, but could this be a firewall issue that might prevent the extension from functioning properly? Wouldn't have thought so, have other extensions running.

Support additional font families

Font's are loaded directly from the users computer, so the extension is technically capable of supporting any font that's currently enabled on the users system.

However, for maximum legibility and consistency, it's preferred to constrain the set of typefaces to monospace fonts created for pre-formatted text/code display.

For now, we support Hack, Source Code Pro and Droid Sans Mono and the default, system monospace font.

[1.0] Improve theme preview within Author Settings panel

Several users have commented/mentioned in Chrome Store reviews they would like for an 'easier way to explore themes'. Currently, theme selection is very low-tech, using a simple drop-down menu and animated preview of the color palette, without context of code syntax.

Ideally, users should be able to see a sample of how a color palette would apply to the code syntax, before closing and reopening the Devtools window to see the changes apply.

The Author Settings pane uses the theme.json file to show the animated color preview.

app/scripts/themes.json

[
  {
    "name": "Theme Name",
    "colors": ["#F7F7F7", "#F0F0F0", "#807d7c" ]
  },
]

To create accurate previews, each theme object would need to contain a color map (not an array) of the colors assigned to each variable used for syntax highlighting within our common styles mixin. OR each color array would need to contain the colors in the exact order they are used within the color palette as well (and would need to make that clear distinction inside the README.md).

Having the data structured in this way would allow for the creation of theme previews which accurately reflect the applied theme. The preview would include a small code sample, similar to http://colorsublime.com

(While not ideal, a third and final alternative would be to create small screenshots of each theme and display it, similar to http://devthemez.com/, however this would increase the size of the plugin greatly.)

Technology

For an effective experience, the 'Author Settings' panel will require additional capabilities like sorting, filtering, and searching by name. Using a JS MV* framework will help speed up development tremendously for these features.

Potential Stack:

• Angular 2: https://angular.io
• Polymer: https://www.polymer-project.org

Access to seperate css rules to have more precise styles

I was trying to update my theme that was just merged in, The One, and found a few css rules that I need access to and to be able to set them differently. I found the rules, but I am not sure how to add them to the project without breaking all the other themes. I have created PR #108 where I tried to override the rules in my theme's styling, but it does not seem to be taking effect. Is there another way to do this?

NA

Theme name with line-break prevents select UI

Just adding because I know more eyes = a good thing. I'm looking into the codebase to see if I can figure out a way to fix and pull request. Cool project, bruh!

Icons on the bar not showing

Latest Chrome version
Installed as described, cant see the icons on the bars

Add additional color palettes

Add themes from https://github.com/daylerees/colour-schemes

Missing scrolling via mouse (not wheel)

Windows10 Chrome Version 48.0.2564.82 m Seetings>Experiments not there

I have Enabled Developer tools experiments in chrome (chrome://flags...)
When I go to DevTools>Settings, Experiments does not show up as an option.
I have restarted Chrome several times, even rebooted.

[1.0] Select Element background is black when DevTools is in Device Mode

When DevTools is in Device Mode a large portion of the Select Element dropdown background is black

It happens with all light and dark themes

Support default dark theme in sources panel in Chrome v50

In Chrome Version 50.0.2642.0 canary (64-bit); there is a default 'dark' theme available, skinning all panels in DevTools with a Dark theme.

DevTools Author works out of the box with the new dark themes, only targeting code-view and console panels within DevTools and targeting syntax highlighting within that.

However, DevTools Author also skins the sidebar panel using a slightly lighter 'gray' background color, which directly impacts the legibility within the sources view

It looks like the new DevTools themes use a body class of .-theme-with-dark-background to add styles, so adjusting the support for v50 should be fairly straightforward.

Reference Issues: #31

Monokai theme color issue in console

After throw exception is first message not readable (bad color)

Screenshots:
one

showed text

Can't change theme when theme name wraps

The dropdown is obscured by the text and i can't click on it. Solved by making the dev tools panel wider, but should probably be handled in code :) Thanks for the extension!

Add 'None/Default' theme option

Allow users to just use the default CSS styles of Chrome DevTools while also taking advantage the ability to edit font-size and font-family.

Create tagged releases

Add ability to select font.

Is there any way to provide a font selection dropdown on the "Author Settings" page? That'd be superb!

.selected height is incorrect for smaller font sizes.

The height of selected rows in the Elements view is wonky at a small font-size 10px

Content of the toggle element state is overflowing

The content of the Toggle Element State Toggle which has 4 checkboxes that force an element state is overflowing its container and is getting hidden

Some characters not visible when editing attribute values

The = and " characters are not visible when I double click into an attribute to edit its value (eg. editing a class name.)

Example:

Selecting everything in that view shows that those characters are there, but their color is white.

I have tested this with a few different themes, including the default 3024.

Only elements, sources and console panels are themed

Update 02/10/2016: It JUST dawned on me today after reviewing another issue: #109 (comment), the limitations and concerns I describe below only exist for current themes I've created (or anyone else has created using one of MY current templates). Theoretically, anyone could build a theme skinning additional panels by adding whatever additional CSS styles desired to a custom theme file, and make a pull request. DevTools Author itself has no opinion on how themes are applied to DevTools; however for consistency, I personally reserve the discretion to reject any pull requests for themes which do not meet similar UX/UI standards as the current themes available at this time.

Update 01/03/2016: After the initial response from users and feedback, I've decided to bite the bullet and add the Elements panel to the set of panels themed by DevTools Author. This means the Elements panel will inherit the same theme styling as the Sources and Console panels for an improved authoring workflow with workspaces integrated. 🤘

This post has been modified to reflect the following updates: #64 .

I've made a conscious design decision not to apply the selected theme in the current version of DevTools Author to all panels, but rather only the Elements, Sources and Console panels within DevTools. The reasons for this are maintainability, usability, and consistency.

Maintainability

First off, skinning Chrome's Developer Tools is not a simple task. It requires debugging DevTools with DevTools (sometimes 3-4 levels deep), fighting with CodeMirror's own CSS specificity/inheritance, and using deprecated selectors (::shadow and /deep/) to pierce the shadow DOM and style components from the outside (which works inconsistently).

All of this means that each time something changes or updates in DevTools (which is not infrequent), the project needs to be updated to maintain the current experience. The smaller the footprint DevTools Author has, the more time I have to focus on providing the best experience for the panels it does support.

Usability

This may sound subjective, but I do not feel the usability of the other panels is improved by theming, and the exact opposite result (poor legibility/usability) is much more likely to happen by enabling the themes in panels outside of the authoring workflow. This brings me to my next point, which is to maintain consistency with the purpose of the extension and DevTools as a whole.

Consistency

I created DevTools Author to solve a specific problem; increase legibility and improve the overall authoring experience within DevTools, the keyword being 'authoring'. Outside of the Elements, Sources and Console panels, very little 'authoring' actually takes place and the remaining panels, while interactive, are mostly read-only and used for performance-auditing purposes.

I may change my mind about this in the future if maintenance becomes any easier (which I doubt), but for the time being, I have no intention of supporting theming of panels outside of Elements, Sources, and Console.

Build process should create packaged .zip

packaged zip should remove all extraneous images no needed for extension, as well as the following directories:

• .git
• node_modules/
• app/
• dist/.tmp
• dist/.sass-cache

"Reload DevTools"?

The instructions say themes take effect after you "Reload DevTools". Do you mean close DevTools and open them again? I can't get a single theme to apply.

Themes not working on Windows 10

Hi,

I've installed your extension and it's awesome. On Mac OSX I have not problems with the themes, but on Windows 10, when I have chosen a Theme and restart the DevTools, it's not working somehow.

I'm using Chrome v48.0.2564.103.

Wrapped text on elements panel is difficult to read

Awesome job on the elements panel!

With a light theme, wrapped text is a bit hard to read (see attached screenshot).
The selected element text color is white, making it hard to read with a light background.

A possible fix is to remove line 866 height: 22px !important; from /app/styles/modules/_common-styles.scss

Darcula

I don't know if here a good place to request new theme.
Many developers work with Jetbrains Darcula theme in theirs Webstorm/phpstorm etc. Good to have it in devtools also!

Broken icons and unreadable text color

Icons are invisible (but clickable).
console.info has unreadable text color in a Monokai theme.

Mac OS El Capitan
Chrome 47.0.2526.111

Computed panel rows use the default colour

This is using the Monokai theme: https://i.imgur.com/LlZiiVw.png

I think a color just needs to be added for a few of the themes that would style the background of the box model as well as the alternate rows :)

How do you change fonts?

I have all 3 of the named fonts on my Mac. I use them fine in my IDEs.

I see no place to change the font in the UI. I can change the theme and font size no problem.

I am on Mac 10.11, Chrome Version 49.0.2623.23 dev (64-bit)

Create icon and screen graphics for Chrome Store

https://developer.chrome.com/webstore/get_started_simple#step3

Create microsite for chrome extension

Move theme templates in to their own directory

Currently, theme templates are sitting at the same level as the specific theme files:

|--app
|  |-- styles
|      |-- themes
|          |-- 3024.scss
|          |-- theme-template-base16.scss
|          |-- theme-template-simple.scss
|          |-- theme-template.scss
...
|          |-- solarized-light.scss

Should separate them for better organization

|--app
|  |-- styles
|      |-- themes
|          |-- 3024.scss
...
|          |-- solarized-light.scss
|          |-- templates
|              |-- theme-template-base16.scss
|              |-- theme-template-simple.scss
|              |-- theme-template.scss
...

Add Changelog to README.md

• Add release notes to tagged releases

Rename `_styles.scss` to `_common.scss`

Tabs above CSS on Elements pane don't overflow properly

Great plugin! Slight visual issue with these tabs:

The normal devtools behavior is for these to always take up just one row.

They also appear to be just a bit too tall and are exceeding the bar there on the top.