├── .gitattributes ├── .gitignore ├── app ├── templates │ ├── devtools.html │ ├── devtools.js │ ├── _manifest.json │ ├── editorconfig │ └── styles.css └── index.js ├── .editorconfig ├── .travis.yml ├── test ├── test-load.js └── test-creation.js ├── .jshintrc ├── package.json └── README.md /.gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | temp/ 3 | -------------------------------------------------------------------------------- /app/templates/devtools.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /app/templates/devtools.js: -------------------------------------------------------------------------------- 1 | var xhr = new XMLHttpRequest(); 2 | xhr.open("GET", "/styles.css", false); 3 | xhr.send(); 4 | chrome.devtools.panels.applyStyleSheet(xhr.responseText); 5 | -------------------------------------------------------------------------------- /app/templates/_manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "<%= _.slugify(themeName) %>", 3 | "version": "0.0.0", 4 | "description": "Enable DevTools experiments in about:flags, toggle \"Allow UI themes\" experiment.", 5 | "devtools_page": "devtools.html", 6 | "manifest_version": 2 7 | } 8 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - '0.8' 4 | - '0.10' 5 | before_install: 6 | - currentfolder=${PWD##*/} 7 | - if [ "$currentfolder" != 'generator-devtools-theme' ]; then cd .. && eval "mv $currentfolder generator-devtools-theme" && cd generator-devtools-theme; fi 8 | 9 | -------------------------------------------------------------------------------- /app/templates/editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /test/test-load.js: -------------------------------------------------------------------------------- 1 | /*global describe, beforeEach, it*/ 2 | 'use strict'; 3 | 4 | var assert = require('assert'); 5 | 6 | describe('devtools-theme generator', function () { 7 | it('can be imported without blowing up', function () { 8 | var app = require('../app'); 9 | assert(app !== undefined); 10 | }); 11 | }); 12 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "node": true, 3 | "esnext": true, 4 | "bitwise": true, 5 | "camelcase": true, 6 | "curly": true, 7 | "eqeqeq": true, 8 | "immed": true, 9 | "indent": 4, 10 | "latedef": true, 11 | "newcap": true, 12 | "noarg": true, 13 | "quotmark": "single", 14 | "regexp": true, 15 | "undef": true, 16 | "unused": true, 17 | "strict": true, 18 | "trailing": true, 19 | "smarttabs": true, 20 | "white": true 21 | } 22 | -------------------------------------------------------------------------------- /app/templates/styles.css: -------------------------------------------------------------------------------- 1 | .panel { 2 | background-image: -webkit-gradient(linear, left top, right top, 3 | color-stop(0.00, rgba(255,0,0, 0.1)), 4 | color-stop(16%, rgba(255, 165, 0, 0.1)), 5 | color-stop(32%, rgba(255, 255, 0, 0.1)), 6 | color-stop(48%, rgba(0, 128, 0, 0.1)), 7 | color-stop(60%, rgba(0, 0, 255, 0.1)), 8 | color-stop(76%, rgba(75, 0, 130, 0.1)), 9 | color-stop(1.00, rgba(238, 130, 238, 0.1))); 10 | } 11 | -------------------------------------------------------------------------------- /test/test-creation.js: -------------------------------------------------------------------------------- 1 | /*global describe, beforeEach, it*/ 2 | 'use strict'; 3 | 4 | var path = require('path'); 5 | var helpers = require('yeoman-generator').test; 6 | 7 | describe('devtools-theme generator', function () { 8 | beforeEach(function (done) { 9 | helpers.testDirectory(path.join(__dirname, 'temp'), function (err) { 10 | if (err) { 11 | return done(err); 12 | } 13 | 14 | this.app = helpers.createGenerator('devtools-theme:app', [ 15 | '../../app' 16 | ]); 17 | done(); 18 | }.bind(this)); 19 | }); 20 | 21 | it('creates expected files', function (done) { 22 | var expected = [ 23 | // add files you expect to exist here., 24 | '.editorconfig', 25 | 'devtools.html', 26 | 'devtools.js', 27 | 'manifest.json', 28 | 'styles.css', 29 | ]; 30 | 31 | helpers.mockPrompt(this.app, { 32 | 'themeName': true 33 | }); 34 | 35 | this.app.run({}, function () { 36 | helpers.assertFiles(expected); 37 | done(); 38 | }); 39 | 40 | }); 41 | }); 42 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "generator-devtools-theme", 3 | "version": "0.1.0", 4 | "description": "Yeoman Generator for Chrome DevTools Theme", 5 | "keywords": [ 6 | "chrome", 7 | "devtools", 8 | "theme", 9 | "yeoman-generator" 10 | ], 11 | "homepage": "https://github.com/zenorocha/generator-devtools-theme", 12 | "bugs": "https://github.com/zenorocha/generator-devtools-theme/issues", 13 | "author": { 14 | "name": "Zeno Rocha", 15 | "email": "hi@zenorocha.com", 16 | "url": "https://github.com/zenorocha" 17 | }, 18 | "main": "app/index.js", 19 | "repository": { 20 | "type": "git", 21 | "url": "git://github.com/zenorocha/generator-devtools-theme.git" 22 | }, 23 | "scripts": { 24 | "test": "mocha" 25 | }, 26 | "dependencies": { 27 | "yeoman-generator": "~0.14.0" 28 | }, 29 | "devDependencies": { 30 | "mocha": "~1.14.0" 31 | }, 32 | "peerDependencies": { 33 | "yo": ">=1.0.0" 34 | }, 35 | "engines": { 36 | "node": ">=0.8.0", 37 | "npm": ">=1.2.10" 38 | }, 39 | "licenses": [ 40 | { 41 | "type": "MIT" 42 | } 43 | ] 44 | } 45 | -------------------------------------------------------------------------------- /app/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var util = require('util'); 4 | var path = require('path'); 5 | var yeoman = require('yeoman-generator'); 6 | 7 | var DevtoolsThemeGenerator = module.exports = function DevtoolsThemeGenerator(args, options, config) { 8 | yeoman.generators.Base.apply(this, arguments); 9 | 10 | this.pkg = JSON.parse(this.readFileAsString(path.join(__dirname, '../package.json'))); 11 | }; 12 | 13 | util.inherits(DevtoolsThemeGenerator, yeoman.generators.Base); 14 | 15 | DevtoolsThemeGenerator.prototype.askFor = function askFor() { 16 | var cb = this.async(); 17 | 18 | console.log(this.yeoman); 19 | 20 | var prompts = [{ 21 | name: 'themeName', 22 | message: 'What\'s the theme name?' 23 | }]; 24 | 25 | this.prompt(prompts, function (props) { 26 | this.themeName = props.themeName; 27 | 28 | cb(); 29 | }.bind(this)); 30 | }; 31 | 32 | DevtoolsThemeGenerator.prototype.app = function app() { 33 | this.copy('_manifest.json', 'manifest.json'); 34 | }; 35 | 36 | DevtoolsThemeGenerator.prototype.projectfiles = function projectfiles() { 37 | this.copy('devtools.html', 'devtools.html'); 38 | this.copy('devtools.js', 'devtools.js'); 39 | this.copy('editorconfig', '.editorconfig'); 40 | this.copy('styles.css', 'styles.css'); 41 | }; 42 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Yeoman Generator for Chrome DevTools Theme [![Build Status](https://secure.travis-ci.org/deprecate/generator-devtools-theme.png?branch=master)](https://travis-ci.org/deprecate/generator-devtools-theme) 2 | 3 | ![Chrome + Yeoman](https://cloud.githubusercontent.com/assets/398893/3528084/997c7862-078b-11e4-9625-abb02d039f83.png) 4 | 5 | > A Yeoman Generator that provides a functional boilerplate to easily create 6 | > custom Chrome DevTools Themes via Chrome Extensions. 7 | > 8 | > More info at [Chromium Issue #318566](https://code.google.com/p/chromium/issues/detail?id=318566). 9 | 10 | ## Getting started 11 | 12 | 1. Install using NPM: 13 | 14 | ```sh 15 | $ [sudo] npm install -g generator-devtools-theme 16 | ``` 17 | 18 | 2. Scaffold your new project: 19 | 20 | ```sh 21 | $ yo devtools-theme 22 | ``` 23 | 24 | 3. Start writing your custom Chrome DevTools Theme. 25 | 4. Publish it on [Chrome Web Store](https://chrome.google.com/webstore/)! 26 | 27 | ## Usage 28 | 29 | **Attention:** The ability of using custom Chrome DevTools Themes is only 30 | available in [Chrome Canary](https://www.google.com/intl/en/chrome/browser/canary.html) for now. 31 | 32 | 1. Enable DevTools experiments in `chrome://flags/#enable-devtools-experiments`. 33 | 2. Open DevTools > *Settings* > *Experiments* > *Allow UI themes*. 34 | 35 | Now you are able to use any custom Chrome DevTools Theme via Chrome Extension. 36 | 37 | ## Structure 38 | 39 | The basic structure of the project is given in the following way. 40 | 41 | ``` 42 | . 43 | ├── .editorconfig 44 | ├── devtools.html 45 | ├── devtools.js 46 | └── styles.css 47 | ``` 48 | 49 | ## History 50 | 51 | For detailed changelog, see [Releases](https://github.com/deprecate/generator-devtools-theme/releases). 52 | 53 | ## License 54 | 55 | [MIT License](http://zenorocha.mit-license.org/) © Zeno Rocha 56 | --------------------------------------------------------------------------------