Skip to content

Add customizable themes via console#20

Open
sukima wants to merge 5 commits intoomorandi:masterfrom
sukima:feature/customizible-themes
Open

Add customizable themes via console#20
sukima wants to merge 5 commits intoomorandi:masterfrom
sukima:feature/customizible-themes

Conversation

@sukima
Copy link
Copy Markdown

@sukima sukima commented Feb 27, 2014

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.

Makes the code a little less verbose and still maintain radability.
This is the workhorse who's responsibility it is to manage multiple CSS
links. It will save the preferred URLs to `localStorage` since these are
user defined preferences. The override CSS is a special case and will
always be managed outside the user's preferred settings.
You can manipulate the settings via `TiInspector.preferences.styles`.
@sukima
Copy link
Copy Markdown
Author

sukima commented Feb 27, 2014

TODO:

  • Add a clear() method.
  • Add a UI on the splash page.

Seemed silly to force a pending save at the end of a chain as the use
case usually won't use chaning all that much. The gain for ending a
chain like that is miniscual for the average use case of this class.
Chaining will still work but is no longer a requirement from the user's
stand point.
@sukima
Copy link
Copy Markdown
Author

sukima commented Feb 27, 2014

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
Copy link
Copy Markdown
Owner

omorandi commented Mar 7, 2014

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

@sukima
Copy link
Copy Markdown
Author

sukima commented Mar 8, 2014

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants