Adds Canvas and ensures loading order

Stylesheets are loaded in the following order:

* Vendor
* Commons
* Current Application
* Those defined in uiExports.styleSheetPaths

Signed-off-by: Tyler Smalley <tyler.smalley@elastic.co>

src/core_plugins/status_page/index.js

@@ -20,13 +20,13 @@
 export default function (kibana) {
   return new kibana.Plugin({
     uiExports: {
-      styleSheetPaths: `${__dirname}/public/index.scss`,
       app: {
         title: 'Server Status',
         main: 'plugins/status_page/status_page',
         hidden: true,
         url: '/status',
-      }
+      },
+      styleSheetPaths: `${__dirname}/public/index.scss`,
     }
   });
 }

src/ui/ui_render/bootstrap/template.js.hbs

@@ -1,51 +1,58 @@
 window.onload = function () {
   var files = [
-    '{{bundlePath}}/vendors.style.css',
-    '{{bundlePath}}/commons.style.css',
-    '{{bundlePath}}/{{appId}}.style.css',
-
     '{{bundlePath}}/vendors.bundle.js',
     '{{bundlePath}}/commons.bundle.js',
     '{{bundlePath}}/{{appId}}.bundle.js'
   ];
 
+  var failure = function () {
+    // make subsequent calls to failure() noop
+    failure = function () {};
+
+    var err = document.createElement('h1');
+    err.style['color'] = 'white';
+    err.style['font-family'] = 'monospace';
+    err.style['text-align'] = 'center';
+    err.style['background'] = '#F44336';
+    err.style['padding'] = '25px';
+    err.innerText = '{{i18n 'common.ui.welcomeError' '{"defaultMessage": "Kibana did not load properly. Check the server output for more information."}'}}';
+
+    document.body.innerHTML = err.outerHTML;
+  }
+
+  function loadStyleSheet(path) {
+    var dom = document.createElement('link');
+
+    dom.addEventListener('error', failure);
+    dom.setAttribute('rel', 'stylesheet');
+    dom.setAttribute('href', path);
+    document.head.appendChild(dom);
+  }
+
+  function createJavascriptElement(path) {
+    var dom = document.createElement('script');
+
+    dom.setAttribute('async', '');
+    dom.addEventListener('error', failure);
+    dom.setAttribute('src', file);
+    dom.addEventListener('load', next);
+    document.head.appendChild(dom);
+  }
+
   {{#each styleSheetPaths}}
-    files.unshift('{{this}}');
+    loadStyleSheet('{{this}}');
   {{/each}}
 
   (function next() {
     var file = files.shift();
     if (!file) return;
 
-    var failure = function () {
-      // make subsequent calls to failure() noop
-      failure = function () {};
+    var dom = document.createElement('script');
 
-      var err = document.createElement('h1');
-      err.style['color'] = 'white';
-      err.style['font-family'] = 'monospace';
-      err.style['text-align'] = 'center';
-      err.style['background'] = '#F44336';
-      err.style['padding'] = '25px';
-      err.innerText = '{{i18n 'common.ui.welcomeError' '{"defaultMessage": "Kibana did not load properly. Check the server output for more information."}'}}';
-
-      document.body.innerHTML = err.outerHTML;
-    }
-
-    var type = /\.js(\?.+)?$/.test(file) ? 'script' : 'link';
-    var dom = document.createElement(type);
     dom.setAttribute('async', '');
     dom.addEventListener('error', failure);
-
-    if (type === 'script') {
-      dom.setAttribute('src', file);
-      dom.addEventListener('load', next);
-      document.head.appendChild(dom);
-    } else {
-      dom.setAttribute('rel', 'stylesheet');
-      dom.setAttribute('href', file);
-      document.head.appendChild(dom);
-      next();
-    }
+    dom.setAttribute('src', file);
+    dom.addEventListener('load', next);
+    document.head.appendChild(dom);
   }());
 };

src/ui/ui_render/ui_render_mixin.js

@@ -63,11 +63,18 @@ export function uiRenderMixin(kbnServer, server, config) {
         }
 
         const basePath = config.get('server.basePath');
+        const bundlePath = `${basePath}/bundles`;
+        const styleSheetPaths = [
+          `${bundlePath}/vendors.style.css`,
+          `${bundlePath}/commons.style.css`,
+          `${bundlePath}/${app.getId()}.style.css`,
+        ].concat(kbnServer.uiExports.styleSheetPaths.map(path => `${basePath}/${path.publicPath}`));
+
         const bootstrap = new AppBootstrap({
           templateData: {
             appId: app.getId(),
-            bundlePath: `${basePath}/bundles`,
-            styleSheetPaths: kbnServer.uiExports.styleSheetPaths.map(path => `${basePath}/${path.publicPath}`),
+            bundlePath,
+            styleSheetPaths,
           },
           translations: await server.getUiTranslations()
         });

x-pack/plugins/canvas/index.js

@@ -21,8 +21,8 @@ export function canvas(kibana) {
         description: 'Data driven workpads',
         icon: 'plugins/canvas/icon.svg',
         main: 'plugins/canvas/app',
-        styleSheetPath: `${__dirname}/public/style/index.scss`,
       },
+      styleSheetPaths: `${__dirname}/public/style/index.scss`,
       hacks: [
         // window.onerror override
         'plugins/canvas/lib/window_error_handler.js',

x-pack/plugins/dashboard_mode/index.js

@@ -25,7 +25,6 @@ export function dashboardMode(kibana) {
     publicDir: resolve(__dirname, 'public'),
     require: ['kibana', 'elasticsearch', 'xpack_main'],
     uiExports: {
-      styleSheetPaths: `${__dirname}/public/index.scss`,
       uiSettingDefaults: {
         [CONFIG_DASHBOARD_ONLY_MODE_ROLES]: {
           name: 'Dashboards only roles',
@@ -52,7 +51,8 @@ export function dashboardMode(kibana) {
             icon: 'plugins/kibana/assets/dashboard.svg',
           }
         ],
-      }
+      },
+      styleSheetPaths: `${__dirname}/public/index.scss`,
     },
 
     config(Joi) {

x-pack/plugins/ml/index.js

@@ -38,8 +38,8 @@ export const ml = (kibana) => {
         description: 'Machine Learning for the Elastic Stack',
         icon: 'plugins/ml/ml.svg',
         main: 'plugins/ml/app',
-        styleSheetPath: `${__dirname}/public/index.scss`,
       },
+      styleSheetPaths: `${__dirname}/public/index.scss`,
       hacks: ['plugins/ml/hacks/toggle_app_link_in_nav'],
       home: ['plugins/ml/register_feature']
     },