micjamking / devtools-author Goto Github PK
View Code? Open in Web Editor NEWA selection of author settings for Chrome Developer Tools.
Home Page: http://mikeking.io/devtools-author/
License: MIT License
A selection of author settings for Chrome Developer Tools.
Home Page: http://mikeking.io/devtools-author/
License: MIT License
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.
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.
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!
packaged zip should remove all extraneous images no needed for extension, as well as the following directories:
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
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.
[
{
"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.)
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:
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.
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.
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.
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
.
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 :)
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
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
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.
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?
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.
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
The height of selected rows in the Elements view is wonky at a small font-size 10px
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.
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.
Add themes from https://github.com/daylerees/colour-schemes
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)
Is there any way to provide a font selection dropdown on the "Author Settings" page? That'd be superb!
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.
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";
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.
DevTools Extension: app/scripts/devtools.js
chrome.storage
via XHR and fires callback function if returns success 200chrome.devtools.panels
and loads panel html pageAuthor Settings panel: app/scripts/panel.js
theme.json
via XHR and fires callback function if returns success 200devtools-theme
from chrome.storage
and returns it for display in UIdevtools-fontFamily
from chrome.storage
and returns it for display in UIdevtools-fontSize
from chrome.storage
and returns it for display in UIReferences:
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.
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?
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
...
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.