FEATURE: Native theme support

This feature introduces the concept of themes. Themes are an evolution
of site customizations.

Themes introduce two very big conceptual changes:

- A theme may include other "child themes", children can include grand
children and so on.

- A theme may specify a color scheme

The change does away with the idea of "enabled" color schemes.

It also adds a bunch of big niceties like

- You can source a theme from a git repo

- History for themes is much improved

- You can only have a single enabled theme. Themes can be selected by
    users, if you opt for it.

On a technical level this change comes with a whole bunch of goodies

- All CSS is now compiled using a custom pipeline that uses libsass
    see /lib/stylesheet

- There is a single pipeline for css compilation (in the past we used
    one for customizations and another one for the rest of the app

- The stylesheet pipeline is now divorced of sprockets, there is no
   reliance on sprockets for CSS bundling

- CSS is generated with source maps everywhere (including themes) this
    makes debugging much easier

- Our "live reloader" is smarter and avoid a flash of unstyled content
   we run a file watcher in "puma" in dev so you no longer need to run
   rake autospec to watch for CSS changes

app/assets/javascripts/admin/components/ace-editor.js.es6

@@ -14,6 +14,13 @@ export default Ember.Component.extend({
     }
   },
 
+  @observes('mode')
+  modeChanged() {
+    if (this._editor && !this._skipContentChangeEvent) {
+      this._editor.getSession().setMode("ace/mode/" + this.get('mode'));
+    }
+  },
+
   _destroyEditor: function() {
     if (this._editor) {
       this._editor.destroy();
@@ -41,6 +48,7 @@ export default Ember.Component.extend({
 
         editor.setTheme("ace/theme/chrome");
         editor.setShowPrintMargin(false);
+        editor.setOptions({fontSize: "14px"});
         editor.getSession().setMode("ace/mode/" + this.get('mode'));
         editor.on('change', () => {
           this._skipContentChangeEvent = true;

app/assets/javascripts/admin/components/color-input.js.es6

@@ -1,3 +1,5 @@
+import {default as loadScript, loadCSS } from 'discourse/lib/load-script';
+
 /**
   An input field for a color.
 
@@ -6,19 +8,36 @@
   @params valid is a boolean indicating if the input field is a valid color.
 **/
 export default Ember.Component.extend({
+  classNames: ['color-picker'],
   hexValueChanged: function() {
     var hex = this.get('hexValue');
+    let $text = this.$('input.hex-input');
+
     if (this.get('valid')) {
-      this.$('input').attr('style', 'color: ' + (this.get('brightnessValue') > 125 ? 'black' : 'white') + '; background-color: #' + hex + ';');
+      $text.attr('style', 'color: ' + (this.get('brightnessValue') > 125 ? 'black' : 'white') + '; background-color: #' + hex + ';');
+
+      if (this.get('pickerLoaded')) {
+        this.$('.picker').spectrum({color: "#" + this.get('hexValue')});
+      }
     } else {
-      this.$('input').attr('style', '');
+      $text.attr('style', '');
     }
   }.observes('hexValue', 'brightnessValue', 'valid'),
 
-  _triggerHexChanged: function() {
-    var self = this;
-    Em.run.schedule('afterRender', function() {
-      self.hexValueChanged();
+  didInsertElement() {
+    loadScript('/javascripts/spectrum.js').then(()=>{
+      loadCSS('/javascripts/spectrum.css').then(()=>{
+        Em.run.schedule('afterRender', ()=>{
+          this.$('.picker').spectrum({color: "#" + this.get('hexValue')})
+                           .on("change.spectrum", (me, color)=>{
+                             this.set('hexValue', color.toHexString().replace("#",""));
+                           });
+          this.set('pickerLoaded', true);
+        });
+      });
     });
-  }.on('didInsertElement')
+    Em.run.schedule('afterRender', ()=>{
+      this.hexValueChanged();
+    });
+  }
 });

app/assets/javascripts/admin/components/customize-link.js.es6

@@ -1,12 +0,0 @@
-import { getOwner } from 'discourse-common/lib/get-owner';
-
-export default Ember.Component.extend({
-  router: function() {
-    return getOwner(this).lookup('router:main');
-  }.property(),
-
-  active: function() {
-    const id = this.get('customization.id');
-    return this.get('router.url').indexOf(`/customize/css_html/${id}/css`) !== -1;
-  }.property('router.url', 'customization.id')
-});

app/assets/javascripts/admin/components/inline-edit-checkbox.js.es6

@@ -0,0 +1,36 @@
+import {default as computed, observes} from "ember-addons/ember-computed-decorators";
+
+export default Ember.Component.extend({
+  init(){
+    this._super();
+    this.set("checkedInternal", this.get("checked"));
+  },
+
+  classNames: ['inline-edit'],
+
+  @observes("checked")
+  checkedChanged() {
+    this.set("checkedInternal", this.get("checked"));
+  },
+
+  @computed("labelKey")
+  label(key) {
+    return I18n.t(key);
+  },
+
+  @computed("checked", "checkedInternal")
+  changed(checked, checkedInternal) {
+    return (!!checked) !== (!!checkedInternal);
+  },
+
+  actions: {
+    cancelled(){
+      this.set("checkedInternal", this.get("checked"));
+    },
+
+    finished(){
+      this.set("checked", this.get("checkedInternal"));
+      this.sendAction();
+    }
+  }
+});