Add customizable themes via console

sukima commented 10 years ago

Since a theme is nothing more then a CSS file linked into the iframe this pull request offers a StylesConfig object to manage a list of user defined CSS. Either through the devtools_theme when the user first uses the application or manually as the user adds or removes CSS URLs. The preferences are save to localStorage for future use.

When the application loads it will attach an instance of StylesConfig to TiInspector.preferences.styles which has the following methods:

Method	Description
add	Adds a CSS URL to the user's preferred CSS list.
remove	Removes a URL from the list.
clear	Remove all custom CSS from the list.
link	Will add each CSS URL to the `<head>` with `<link>` tags.
unlinkAll	Will remove all the associated `<link>` tags.
toString	Display the current state of the list. `(*)` means hasn't been saved (`appendChild`) to the page yet.

All the above methods are chainable. Internally this is a singleton class which can be grabbed with StylesConfig.getInstance().

Usage would be to open the console Command-Option-J while debugging a session and manipulate TiInspector.preferences.styles:

> TiInspector.preferences.styles.add('http://mysite.com/mytheme.css').save();
> TiInspector.preferences.styles.remove('http://mysite.com/mytheme.css').save();
> TiInspector.preferences.styles.add('/themes/cobalt.css').save();
> TiInspector.preferences.styles.add('/themes/foo.css'); // No .save()
> TiInspector.preferences.styles.toString();
StylesConfig: [/themes/cobalt.css, /themes/foo.css (*)]

Order of precedence is preserved (including the inspector-overrides.css as last). Further manipulation can be done by mutating the underlying array manually with this.styles which is an array of objects that have a url property. The saved property is an internal flag managed automatically.

sukima commented 10 years ago

TODO:

[x] Add a clear() method.
[ ] ~~Add a UI on the splash page.~~

sukima commented 10 years ago

Since this saves to localStorage it is entirely possible to use an instance of StylesConfig to make changes while on the splash screen not just when the devtools page is active.

[ ] Export StylesConfig to the splash page's JavaScript environment.
[ ] Perhaps have a help() method to print out usage info to a new user?

omorandi commented 10 years ago

Thanks a lot for this PR. Hopefully next week I'll be able to review it properly.

sukima commented 10 years ago

Most welcome. I love contributing. Would you like me to look into the above two tasks I outlined or wait till this merges and make another Pull Request?

omorandi / TiInspector

Add customizable themes via console #20

TODO: