Getting vue-toolbar reverted back to latest

- Merging this branch with vue-layout may cause conflicts;
Custom checkbox code cleanups, sanding
2025-07-04 05:53:23 +00:00 · 2018-09-27 15:09:31 -07:00 · 2018-09-25 17:33:30 -07:00 · 2018-09-25 17:32:53 -07:00 · 2018-09-25 15:28:50 -07:00 · 2018-09-24 15:57:48 -07:00
130 changed files with 12218 additions and 1954 deletions
--- a/app.js
+++ b/app.js
@ -42,15 +42,30 @@ app.use('/proxyUrl', function proxyRequest(req, res, next) {
 const webpack = require('webpack');
 const webpackConfig = require('./webpack.config.js');
 webpackConfig.plugins.push(new webpack.HotModuleReplacementPlugin());
 webpackConfig.plugins.push(function() { this.plugin('watch-run', function(watching, callback) { console.log('Begin compile at ' + new Date()); callback(); }) });
 webpackConfig.entry.openmct = [
    'webpack-hot-middleware/client?reload=true',
    webpackConfig.entry.openmct
 ];
 const compiler = webpack(webpackConfig);
-const webpackDevRoute = require('webpack-dev-middleware')(
+
-    compiler, {
+app.use(require('webpack-dev-middleware')(
    compiler,
    {
        publicPath: '/dist',
        logLevel: 'warn'
    }
-);
+));
-app.use(webpackDevRoute);
+app.use(require('webpack-hot-middleware')(
    compiler,
    {
    }
 ));
 // Expose index.html for development users.
 app.get('/', function (req, res) {
--- a/copyright-notice.html
+++ b/copyright-notice.html
@ -0,0 +1,21 @@
 <!--
 Open MCT, Copyright (c) 2014-2018, United States Government
 as represented by the Administrator of the National Aeronautics and Space
 Administration. All rights reserved.
 Open MCT is licensed under the Apache License, Version 2.0 (the
 "License"); you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
 http://www.apache.org/licenses/LICENSE-2.0.
 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 License for the specific language governing permissions and limitations
 under the License.
 Open MCT includes source code licensed under additional open source
 licenses. See the Open Source Licenses file (LICENSES.md) included with
 this source code distribution or the Licensing information page available
 at runtime from the About dialog for additional information.
 -->
--- a/platform/features/notebook/src/policies/CompositionPolicy.js
+++ b/platform/features/notebook/src/policies/CompositionPolicy.js
@ -1,5 +1,5 @@
-/******************************************************************************
+/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2017, United States Government
+ * Open MCT, Copyright (c) 2014-2018, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
@ -19,26 +19,3 @@
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
 /**
 * This bundle implements "containment" rules, which determine which objects
 * can be contained within a notebook.
 */
 define(
    [],
    function () {
        function CompositionPolicy() {
        }
        CompositionPolicy.prototype.allow = function (parent, child) {
            var parentDef = parent.getCapability('type').getName();
            if (parentDef === 'Notebook' && child.getCapability('status').list().length) {
                return false;
            }
            return true;
        };
        return CompositionPolicy;
    }
 );
--- a/index.html
+++ b/index.html
@ -34,9 +34,6 @@
        <link rel="shortcut icon" href="dist/favicons/favicon.ico">
    </head>
    <body>
        <div class="l-splash-holder s-splash-holder">
            <div class="l-splash s-splash"></div>
        </div>
    </body>
    <script>
        var THIRTY_MINUTES = 30 * 60 * 1000;
@ -48,7 +45,6 @@
        );
        openmct.install(openmct.plugins.MyItems());
        openmct.install(openmct.plugins.LocalStorage());
        openmct.install(openmct.plugins.Espresso());
        openmct.install(openmct.plugins.Generator());
        openmct.install(openmct.plugins.ExampleImagery());
        openmct.install(openmct.plugins.UTCTimeSystem());
--- a/openmct.js
+++ b/openmct.js
@ -29,23 +29,9 @@ if (document.currentScript) {
        __webpack_public_path__ = src.replace(matcher, '') + '/';
    }
 }
-const Main = require('./platform/framework/src/Main');
+
 const defaultRegistry = require('./src/defaultRegistry');
 const MCT = require('./src/MCT');
 const buildInfo = require('./src/plugins/buildInfo/plugin');
 var openmct = new MCT();
 openmct.legacyRegistry = defaultRegistry;
 openmct.install(openmct.plugins.Plot());
 openmct.install(openmct.plugins.TelemetryTable());
 if (typeof BUILD_CONSTANTS !== 'undefined') {
    openmct.install(buildInfo(BUILD_CONSTANTS));
 }
 openmct.on('start', function () {
    return new Main().run(defaultRegistry);
 });
 module.exports = openmct;
--- a/package.json
+++ b/package.json
@ -43,6 +43,7 @@
    "karma-html-reporter": "^0.2.7",
    "karma-jasmine": "^1.1.2",
    "karma-webpack": "^3.0.0",
    "location-bar": "^3.0.1",
    "lodash": "^3.10.1",
    "markdown-toc": "^0.11.7",
    "marked": "^0.3.5",
@ -67,6 +68,7 @@
    "webpack": "^4.16.2",
    "webpack-cli": "^3.1.0",
    "webpack-dev-middleware": "^3.1.3",
    "webpack-hot-middleware": "^2.22.3",
    "zepto": "^1.2.0"
  },
  "scripts": {
--- a/platform/commonUI/browse/bundle.js
+++ b/platform/commonUI/browse/bundle.js
@ -73,15 +73,6 @@ define([
    legacyRegistry.register("platform/commonUI/browse", {
        "extensions": {
            "routes": [
                {
                    "when": "/browse/:ids*?",
                    "template": browseTemplate,
                    "reloadOnSearch": false
                },
                {
                    "when": "",
                    "redirectTo": "/browse/"
                }
            ],
            "constants": [
                {
@ -295,6 +286,20 @@ define([
                    ]
                }
            ],
            "templates": [
                {
                    key: "browseRoot",
                    template: browseTemplate
                },
                {
                    key: "browseObject",
                    template: browseObjectTemplate
                },
                {
                    key: "inspectorRegion",
                    template: inspectorRegionTemplate
                }
            ],
            "licenses": [
                {
                    "name": "screenfull.js",
--- a/platform/commonUI/browse/res/templates/browse-object.html
+++ b/platform/commonUI/browse/res/templates/browse-object.html
@ -66,5 +66,4 @@
            </mct-representation>
        </div>
    </div>
    <mct-include key="'conductor'" class="abs holder flex-elem flex-fixed l-flex-row l-time-conductor-holder"></mct-include>
 </div>
--- a/platform/commonUI/browse/src/BrowseController.js
+++ b/platform/commonUI/browse/src/BrowseController.js
@ -47,6 +47,7 @@ define(
            urlService,
            defaultPath
        ) {
            window.browseScope = $scope;
            var initialPath = ($route.current.params.ids || defaultPath).split("/"),
                currentIds;
--- a/platform/commonUI/edit/bundle.js
+++ b/platform/commonUI/edit/bundle.js
@ -319,6 +319,12 @@ define([
                    ]
                }
            ],
            "templates": [
                {
                    key: "elementsPool",
                    template: elementsTemplate
                }
            ],
            "components": [
                {
                    "type": "decorator",
--- a/platform/commonUI/edit/src/policies/EditContextualActionPolicy.js
+++ b/platform/commonUI/edit/src/policies/EditContextualActionPolicy.js
@ -55,16 +55,16 @@ define(
                navigatedObject = this.navigationService.getNavigation(),
                actionMetadata = action.getMetadata ? action.getMetadata() : {};
-            if (navigatedObject.hasCapability("editor") && navigatedObject.getCapability("editor").isEditContextRoot()) {
+            // if (navigatedObject.hasCapability("editor") && navigatedObject.getCapability("editor").isEditContextRoot()) {
                if (selectedObject.hasCapability("editor") && selectedObject.getCapability("editor").inEditContext()) {
                    return this.editModeBlacklist.indexOf(actionMetadata.key) === -1;
                } else {
                    //Target is in the context menu
                    return this.nonEditContextBlacklist.indexOf(actionMetadata.key) === -1;
                }
-            } else {
+            // } else {
-                return true;
+            //     return true;
-            }
+            // }
        };
        return EditContextualActionPolicy;
--- a/platform/commonUI/general/src/directives/MCTSelectable.js
+++ b/platform/commonUI/general/src/directives/MCTSelectable.js
@ -45,6 +45,15 @@ define(
            // Link; install event handlers.
            function link(scope, element, attrs) {
                var isDestroyed = false;
                scope.$on("$destroy", function () {
                    isDestroyed = true;
                });
                openmct.$injector.get('$timeout')(function () {
                    if (isDestroyed) {
                        return;
                    }
                    var removeSelectable = openmct.selection.selectable(
                        element[0],
                        scope.$eval(attrs.mctSelectable),
@ -54,6 +63,9 @@ define(
                    scope.$on("$destroy", function () {
                        removeSelectable();
                    });
                });
            }
            return {
--- a/platform/commonUI/regions/src/InspectorController.js
+++ b/platform/commonUI/regions/src/InspectorController.js
@ -76,7 +76,7 @@ define(
         * @returns a domain object
         */
        InspectorController.prototype.selectedItem = function () {
-            return this.$scope.selection[0].context.oldItem;
+            return this.$scope.selection[0] && this.$scope.selection[0].context.oldItem;
        };
        /**
--- a/platform/features/notebook/bundle.js
+++ b/platform/features/notebook/bundle.js
@ -1,294 +0,0 @@
 define([
    "legacyRegistry",
    "./src/controllers/NotebookController",
    "./src/controllers/NewEntryController",
    "./src/controllers/SelectSnapshotController",
    "./src/controllers/LayoutNotebookController",
    "./src/directives/MCTSnapshot",
    "./src/directives/EntryDnd",
    "./src/actions/ViewSnapshot",
    "./src/actions/AnnotateSnapshot",
    "./src/actions/RemoveEmbed",
    "./src/actions/RemoveSnapshot",
    "./src/actions/NewEntryContextual",
    "./src/capabilities/NotebookCapability",
    "./src/policies/CompositionPolicy",
    "./res/templates/notebook.html",
    "./res/templates/entry.html",
    "./res/templates/annotation.html",
    "./res/templates/notifications.html",
    "../layout/res/templates/frame.html",
    "./res/templates/controls/embedControl.html",
    "./res/templates/controls/snapSelect.html"
 ], function (
    legacyRegistry,
    NotebookController,
    NewEntryController,
    SelectSnapshotController,
    LayoutNotebookController,
    MCTSnapshot,
    MCTEntryDnd,
    ViewSnapshotAction,
    AnnotateSnapshotAction,
    RemoveEmbedAction,
    RemoveSnapshotAction,
    newEntryAction,
    NotebookCapability,
    CompositionPolicy,
    notebookTemplate,
    entryTemplate,
    annotationTemplate,
    notificationsTemplate,
    frameTemplate,
    embedControlTemplate,
    snapSelectTemplate
 ) {
    legacyRegistry.register("platform/features/notebook", {
        "name": "Notebook Plugin",
        "description": "Create and save timestamped notes with embedded object snapshots.",
        "extensions":
        {
            "types": [
                {
                    "key": "notebook",
                    "name": "Notebook",
                    "cssClass": "icon-notebook",
                    "description": "Create and save timestamped notes with embedded object snapshots.",
                    "features": ["creation"],
                    "model": {
                        "entries": [],
                        "composition": [],
                        "entryTypes": [],
                        "defaultSort": "-createdOn"
                    },
                    "properties": [
                        {
                            "key": "defaultSort",
                            "name": "Default Sort",
                            "control": "select",
                            "options": [
                                {
                                    "name": "Newest First",
                                    "value": "-createdOn"
                                },
                                {
                                    "name": "Oldest First",
                                    "value": "createdOn"
                                }
                            ],
                            "cssClass": "l-inline"
                        }
                    ]
                }
            ],
            "views": [
                {
                    "key": "notebook.view",
                    "type": "notebook",
                    "cssClass": "icon-notebook",
                    "name": "notebook",
                    "template": notebookTemplate,
                    "editable": false,
                    "uses": [
                        "composition",
                        "action"
                    ],
                    "gestures": [
                        "drop"
                    ]
                }
            ],
            "controllers": [
                {
                    "key": "NotebookController",
                    "implementation": NotebookController,
                    "depends": [
                        "$scope",
                        "dialogService",
                        "popupService",
                        "agentService",
                        "objectService",
                        "navigationService",
                        "now",
                        "actionService",
                        "$timeout",
                        "$element",
                        "$sce"
                    ]
                },
                {
                    "key": "NewEntryController",
                    "implementation": NewEntryController,
                    "depends": ["$scope",
                        "$rootScope"
                    ]
                },
                {
                    "key": "selectSnapshotController",
                    "implementation": SelectSnapshotController,
                    "depends": ["$scope",
                        "$rootScope"
                    ]
                },
                {
                    "key": "LayoutNotebookController",
                    "implementation": LayoutNotebookController,
                    "depends": ["$scope"]
                }
            ],
            "representations": [
                {
                    "key": "draggedEntry",
                    "template": entryTemplate
                },
                {
                    "key": "frameLayoutNotebook",
                    "template": frameTemplate
                }
            ],
            "templates": [
                {
                    "key": "annotate-snapshot",
                    "template": annotationTemplate
                },
                {
                    "key": "notificationTemplate",
                    "template": notificationsTemplate
                }
            ],
            "directives": [
                {
                    "key": "mctSnapshot",
                    "implementation": MCTSnapshot,
                    "depends": [
                        "$rootScope",
                        "$document",
                        "exportImageService",
                        "dialogService",
                        "notificationService"
                    ]
                },
                {
                    "key": "mctEntryDnd",
                    "implementation": MCTEntryDnd,
                    "depends": [
                        "$rootScope",
                        "$compile",
                        "dndService",
                        "typeService",
                        "notificationService"
                    ]
                }
            ],
            "actions": [
                {
                    "key": "view-snapshot",
                    "implementation": ViewSnapshotAction,
                    "name": "View Snapshot",
                    "description": "View the large image in a modal",
                    "category": "embed",
                    "depends": [
                        "$compile"
                    ]
                },
                {
                    "key": "annotate-snapshot",
                    "implementation": AnnotateSnapshotAction,
                    "name": "Annotate Snapshot",
                    "cssClass": "icon-pencil labeled",
                    "description": "Annotate embed's snapshot",
                    "category": "embed",
                    "depends": [
                        "dialogService",
                        "dndService",
                        "$rootScope"
                    ]
                },
                {
                    "key": "remove-embed",
                    "implementation": RemoveEmbedAction,
                    "name": "Remove...",
                    "cssClass": "icon-trash labeled",
                    "description": "Remove this embed",
                    "category": [
                        "embed",
                        "embed-no-snap"
                    ],
                    "depends": [
                        "dialogService"
                    ]
                },
                {
                    "key": "remove-snapshot",
                    "implementation": RemoveSnapshotAction,
                    "name": "Remove Snapshot",
                    "cssClass": "icon-trash labeled",
                    "description": "Remove Snapshot of the embed",
                    "category": "embed",
                    "depends": [
                        "dialogService"
                    ]
                },
                {
                    "key": "notebook-new-entry",
                    "implementation": newEntryAction,
                    "name": "New Notebook Entry",
                    "cssClass": "icon-notebook labeled",
                    "description": "Add a new Notebook entry",
                    "category": [
                        "view-control"
                    ],
                    "depends": [
                        "$compile",
                        "$rootScope",
                        "dialogService",
                        "notificationService",
                        "linkService"
                    ],
                    "priority": "preferred"
                }
            ],
            "licenses": [
                {
                    "name": "painterro",
                    "version": "0.2.65",
                    "author": "Ivan Borshchov",
                    "description": "Painterro is JavaScript paint widget which allows editing images directly in a browser.",
                    "website": "https://github.com/ivictbor/painterro",
                    "copyright": "Copyright 2017 Ivan Borshchov",
                    "license": "MIT",
                    "link": "https://github.com/ivictbor/painterro/blob/master/LICENSE"
                }
            ],
            "capabilities": [
                {
                    "key": "notebook",
                    "name": "Notebook Capability",
                    "description": "Provides a capability for looking for a notebook domain object",
                    "implementation": NotebookCapability,
                    "depends": [
                        "typeService"
                    ]
                }
            ],
            "policies": [
                {
                    "category": "composition",
                    "implementation": CompositionPolicy,
                    "message": "Objects of this type cannot contain objects of that type."
                }
            ],
            "controls": [
                {
                    "key": "embed-control",
                    "template": embedControlTemplate
                },
                {
                    "key": "snapshot-select",
                    "template":  snapSelectTemplate
                }
            ]
        }
    });
 });
--- a/platform/features/notebook/res/templates/notebook.html
+++ b/platform/features/notebook/res/templates/notebook.html
@ -1,118 +0,0 @@
 <div ng-controller="NotebookController as controller" class="mct-notebook w-notebook l-flex-col">
    <div class="l-notebook-head holder l-flex-row flex-elem">
        <div class="c-search flex-elem holder grows">
            <input class="c-search__search-input"
                   type="text" tabindex="10000"
                   ng-model="entrySearch"
                   ng-keyup="controller.search()"/>
            <a class="c-search__clear-input clear-icon icon-x-in-circle"
               ng-class="{show: !(entrySearch === '' || entrySearch === undefined)}"
               ng-click="entrySearch = ''; controller.search()"></a>
        </div>
        <div class="notebook-view-controls l-flex-row flex-elem holder">
            <div class="select notebook-view-controls__filter-time">
                <select ng-model="showTime">
                    <option value="0" selected="selected">Show all</option>
                    <option value="1">Last hour</option>
                    <option value="8">Last 8 hours</option>
                    <option value="24">Last 24 hours</option>
                </select>
            </div>
            <div class="select notebook-view-controls__sort">
                <select ng-model="sortEntries">
                    <option value="-createdOn" selected="selected">Newest first</option>
                    <option value="createdOn">Oldest first</option>
                </select>
            </div>
        </div>
    </div>
    <!--  drag area -->
    <div class="holder flex-elem l-flex-row icon-plus labeled l-notebook-drag-area" ng-click="newEntry($event)"
         id="newEntry" mct-entry-dnd>
        <span class="label">To start a new entry, click here or drag and drop any object</span>
    </div>
    <!-- entries -->
    <div class="holder flex-elem grows w-notebook-entries t-entries-list" ng-mouseover="handleActive()">
        <ul>
            <li class="l-flex-row has-local-controls l-notebook-entry s-notebook-entry"
                id="{{'entry_'+ entry.id}}"
                ng-if="hoursFilter(showTime,entry.createdOn)"
                ng-repeat="entry in model.entries | filter:entrySearch | orderBy: sortEntries track by $index"
                ng-init="$last && finished(model.entries)"
                mct-entry-dnd>
                <div class="holder flex-elem l-flex-row grows w-notebook-entry-time-and-content">
                    <div class="holder flex-elem s-notebook-entry-time">
                        <span>{{entry.createdOn | date:'yyyy-MM-dd'}}</span>
                        <span>{{entry.createdOn | date:'HH:mm:ss'}}</span>
                    </div>
                    <div class="holder flex-elem l-flex-col grows l-notebook-entry-content">
                        <div contenteditable="true"
                             ng-blur="textBlur($event, entry.id)"
                             ng-focus="textFocus($event, entry.id)"
                             ng-model="entry.text"
                             placeholder="Enter text here"
                             class="flex-elem s-input-inline t-notebook-entry-input s-notebook-entry-text"
                             ng-bind="entry.text">
                        </div>
                        <!-- embeds -->
                        <div class="flex-elem entry-embeds l-flex-row">
                            <div class="l-flex-row l-entry-embed {{embed.cssClass}}"
                                 ng-repeat="embed in entry.embeds track by $index"
                                 ng-class="{ 'has-snapshot' : embed.snapshot }"
                                 id="{{embed.id}}">
                                <div class="snap-thumb"
                                     ng-if="embed.snapshot"
                                     ng-click="viewSnapshot($event,embed.snapshot.src,embed.id,entry.createdOn,this,embed)">
                                    <img ng-src="{{embed.snapshot.src}}" src="//:0" alt="{{embed.id}}">
                                </div>
                                <div class="embed-info l-flex-col">
                                    <div class="embed-title object-header">
                                        <a ng-click='navigate($event,embed.type)'>{{embed.name}}</a>
                                        <a class='context-available' ng-click='openMenu($event,embed.type)'></a>
                                    </div>
                                    <div class="hide-menu" ng-show="false">
                                        <div class="menu-element context-menu-wrapper mobile-disable-select">
                                            <div class="menu context-menu">
                                                <ul>
                                                    <li ng-repeat="menu in menuEmbed"
                                                        ng-click="menu.perform($event,embed.snapshot.src,embed.id,entry.createdOn,this,embed)"
                                                        title="{{menu.getMetadata().description}}"
                                                        class="{{menu.getMetadata().cssClass}}"
                                                        ng-if="embed.snapshot">
                                                        {{menu.getMetadata().name}}
                                                    </li>
                                                    <li ng-repeat="menu in menuEmbedNoSnap"
                                                        ng-click="menu.perform($event,embed.snapshot.src,embed.id,entry.createdOn,this)"
                                                        title="{{menu.getMetadata().description}}"
                                                        class="{{menu.getMetadata().cssClass}}"
                                                        ng-if="!embed.snapshot">
                                                        {{menu.getMetadata().name}}
                                                    </li>
                                                    <li ng-repeat="menu in embedActions"
                                                        ng-click="menu.perform()"
                                                        title="{{menu.name}}"
                                                        class="{{menu.cssClass}}">
                                                        {{menu.name}}
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="embed-date"
                                         ng-if="embed.snapshot">{{embed.id| date:'yyyy-MM-dd HH:mm:ss'}}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- delete entry -->
                <div class="holder flex-elem local-control local-controls-hidden notebook-entry-delete">
                    <a class="s-icon-button icon-trash" id={{entry.id}} title="Delete Entry" ng-click="deleteEntry($event)"></a>
                </div>
            </li>
        </ul>
    </div>
 </div>
--- a/platform/features/notebook/res/templates/notifications.html
+++ b/platform/features/notebook/res/templates/notifications.html
@ -1,8 +0,0 @@
 <span class="status block">
    <!-- DO NOT ADD SPACES BETWEEN THE SPANS - IT ADDS WHITE SPACE!! -->
    <span class="status-indicator icon-bell"></span>
    <span class="label">
        Notifications
    </span>
    <span class="count"></span>
 </span>
--- a/platform/features/notebook/res/templates/snapshotHeader.html
+++ b/platform/features/notebook/res/templates/snapshotHeader.html
@ -1,34 +0,0 @@
 <div class="t-snapshot abs l-view-header">
    <div class="abs object-browse-bar l-flex-row">
        <div class="left flex-elem l-flex-row grows">
            <div class="object-header flex-elem l-flex-row grows">
                <div class="type-icon flex-elem embed-icon holder" ng-class="cssClass"></div>
                <div class="title-label flex-elem holder flex-can-shrink">{{entryName}}</div>
                <a class="context-available flex-elem holder" ng-click="openMenu($event,embedType)"></a>
                <div class="hide-menu" ng-show="false">
                    <div class="menu-element menu-view context-menu-wrapper mobile-disable-select">
                        <div class="menu context-menu">
                            <ul>
                                <li ng-repeat="menu in embedActions"
                                    ng-click="menuPerform(menu)"
                                    title="{{menu.name}}"
                                    class="{{menu.cssClass}}">
                                    {{menu.name}}
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="btn-bar right l-flex-row flex-elem flex-justify-end flex-fixed">
            <div class="flex-elem holder flex-can-shrink s-snapshot-datetime">
            SNAPSHOT {{snapDate | date:'yyyy-MM-dd HH:mm:ss'}}
            </div>
            <a class="s-button icon-pencil" title="Annotate">
                <span class="title-label">Annotate</span>
            </a>
        </div>
    </div>
 </div>
--- a/platform/features/notebook/src/actions/RemoveEmbed.js
+++ b/platform/features/notebook/src/actions/RemoveEmbed.js
@ -1,72 +0,0 @@
 /*****************************************************************************
 * Open MCT, Copyright (c) 2014-2017, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT is licensed under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations
 * under the License.
 *
 * Open MCT includes source code licensed under additional open source
 * licenses. See the Open Source Licenses file (LICENSES.md) included with
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
 define(
    [],
    function () {
        function RemoveEmbed(dialogService,context) {
            context = context || {};
            this.domainObject = context.selectedObject || context.domainObject;
            this.dialogService = dialogService;
        }
        RemoveEmbed.prototype.perform = function ($event,snapshot,embedId,entryId) {
            var domainObject = this.domainObject;
            var errorDialog = this.dialogService.showBlockingMessage({
                severity: "error",
                title: "This action will permanently delete this Embed. Do you want to continue?",
                minimized: true, // want the notification to be minimized initially (don't show banner)
                options: [{
                    label: "OK",
                    callback: function () {
                        errorDialog.dismiss();
                        remove();
                    }
                },{
                    label: "Cancel",
                    callback: function () {
                        errorDialog.dismiss();
                    }
                }]
            });
            function remove() {
                domainObject.useCapability('mutation', function (model) {
                    var elementPos = model.entries.map(function (x) {
                        return x.createdOn;
                    }).indexOf(entryId);
                    var entryEmbeds = model.entries[elementPos].embeds;
                    var embedPos = entryEmbeds.map(function (x) {
                        return x.id;
                    }).indexOf(embedId);
                    model.entries[elementPos].embeds.splice(embedPos, 1);
                });
            }
        };
        return RemoveEmbed;
    }
 );
--- a/platform/features/notebook/src/actions/RemoveSnapshot.js
+++ b/platform/features/notebook/src/actions/RemoveSnapshot.js
@ -1,74 +0,0 @@
 /*****************************************************************************
 * Open MCT, Copyright (c) 2014-2017, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT is licensed under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations
 * under the License.
 *
 * Open MCT includes source code licensed under additional open source
 * licenses. See the Open Source Licenses file (LICENSES.md) included with
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
 define(
    [],
    function () {
        function RemoveSnapshot(dialogService, context) {
            context = context || {};
            this.domainObject = context.selectedObject || context.domainObject;
            this.dialogService = dialogService;
        }
        RemoveSnapshot.prototype.perform = function ($event, snapshot, embedId, entryId) {
            var domainObject = this.domainObject;
            var errorDialog = this.dialogService.showBlockingMessage({
                severity: "error",
                title: "This action will permanently delete this Snapshot. Do you want to continue?",
                minimized: true, // want the notification to be minimized initially (don't show banner)
                options: [{
                    label: "OK",
                    callback: function () {
                        errorDialog.dismiss();
                        remove();
                    }
                },{
                    label: "Cancel",
                    callback: function () {
                        errorDialog.dismiss();
                    }
                }]
            });
            function remove() {
                domainObject.useCapability('mutation', function (model) {
                    var elementPos = model.entries.map(function (x) {
                        return x.createdOn;
                    }).indexOf(entryId);
                    var entryEmbeds = model.entries[elementPos].embeds;
                    var embedPos = entryEmbeds.map(function (x) {
                        return x.id;
                    }).indexOf(embedId);
                    model.entries[elementPos].embeds[embedPos].snapshot = "";
                });
            }
        };
        return RemoveSnapshot;
    }
 );
--- a/platform/features/notebook/src/actions/ViewSnapshot.js
+++ b/platform/features/notebook/src/actions/ViewSnapshot.js
@ -1,132 +0,0 @@
 /*****************************************************************************
 * Open MCT, Copyright (c) 2014-2017, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT is licensed under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations
 * under the License.
 *
 * Open MCT includes source code licensed under additional open source
 * licenses. See the Open Source Licenses file (LICENSES.md) included with
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
 /**
 * Module defining ViewSnapshot
 */
 var OVERLAY_TEMPLATE = '' +
        '    <div class="abs blocker"></div>' +
        '    <div class="abs outer-holder">' +
        '       <a class="close icon-x-in-circle"></a>' +
        '       <div class="abs inner-holder l-flex-col">' +
        '           <div class="t-contents flex-elem holder grows"></div>' +
        '           <div class="bottom-bar flex-elem holder">' +
        '               <a class="t-done s-button major">Done</a>' +
        '           </div>' +
        '       </div>' +
        '    </div>';
 define([
    'zepto',
    "../../res/templates/snapshotHeader.html"
 ],
 function ($, headerTemplate) {
    var toggleOverlay,
        overlay,
        closeButton,
        doneButton,
        blocker,
        overlayContainer,
        img,
        annotateButton,
        annotateImg;
    function ViewSnapshot($compile) {
        this.$compile = $compile;
    }
    function openOverlay(url, header) {
        overlay = document.createElement('div');
        $(overlay).addClass('abs overlay l-large-view');
        overlay.innerHTML = OVERLAY_TEMPLATE;
        overlayContainer = overlay.querySelector('.t-contents');
        closeButton = overlay.querySelector('a.close');
        closeButton.addEventListener('click', toggleOverlay);
        doneButton = overlay.querySelector('a.t-done');
        doneButton.addEventListener('click', toggleOverlay);
        blocker = overlay.querySelector('.abs.blocker');
        blocker.addEventListener('click', toggleOverlay);
        annotateButton = header.querySelector('a.icon-pencil');
        annotateButton.addEventListener('click', annotateImg);
        document.body.appendChild(overlay);
        img = document.createElement('div');
        $(img).addClass('abs object-holder t-image-holder s-image-holder');
        img.innerHTML = '<div class="image-main s-image-main" style="background-image: url(' + url + ');"></div>';
        overlayContainer.appendChild(header);
        overlayContainer.appendChild(img);
    }
    function closeOverlay() {
        overlayContainer.removeChild(img);
        document.body.removeChild(overlay);
        closeButton.removeEventListener('click', toggleOverlay);
        closeButton = undefined;
        doneButton.removeEventListener('click', toggleOverlay);
        doneButton = undefined;
        blocker.removeEventListener('click', toggleOverlay);
        blocker = undefined;
        overlayContainer = undefined;
        overlay = undefined;
        img = undefined;
    }
    ViewSnapshot.prototype.perform = function ($event, snapshot, embedId, entryId, $scope, embed) {
        var isOpen = false;
        // onclick for menu items in overlay header context menu
        $scope.menuPerform = function (menu) {
            menu.perform();
            closeOverlay();
        };
        // Create the overlay element and add it to the document's body
        $scope.cssClass = embed.cssClass;
        $scope.embedType = embed.type;
        $scope.entryName = embed.name;
        $scope.snapDate = +embedId;
        var element = this.$compile(headerTemplate)($scope);
        var annotateAction = $scope.action.getActions({category: 'embed'})[1];
        toggleOverlay = function () {
            if (!isOpen) {
                openOverlay(snapshot, element[0]);
                isOpen = true;
            } else {
                closeOverlay();
                isOpen = false;
            }
        };
        annotateImg = function () {
            closeOverlay();
            annotateAction.perform($event, snapshot, embedId, entryId, $scope);
        };
        toggleOverlay();
    };
    return ViewSnapshot;
 }
 );
--- a/platform/features/notebook/src/capabilities/NotebookCapability.js
+++ b/platform/features/notebook/src/capabilities/NotebookCapability.js
@ -1,50 +0,0 @@
 /*****************************************************************************
 * Open MCT, Copyright (c) 2014-2017, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT is licensed under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations
 * under the License.
 *
 * Open MCT includes source code licensed under additional open source
 * licenses. See the Open Source Licenses file (LICENSES.md) included with
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
 define(
    function () {
        /**
         * The notebook capability allows a domain object to know whether the
         * notebook plugin is present or not.
         *
         * @constructor
         */
        function NotebookCapability(typeService, domainObject) {
            this.domainObject = domainObject;
            this.typeService = typeService;
            return this;
        }
        /**
         * Returns true if there is a notebook domain Object.
         *
         * @returns {Boolean}
         */
        NotebookCapability.prototype.isNotebook = function () {
            return !!this.typeService.getType('notebook');
        };
        return NotebookCapability;
    }
 );
--- a/platform/features/notebook/src/controllers/NotebookController.js
+++ b/platform/features/notebook/src/controllers/NotebookController.js
@ -1,367 +0,0 @@
 /*****************************************************************************
 * Open MCT, Copyright (c) 2014-2017, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT is licensed under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations
 * under the License.
 *
 * Open MCT includes source code licensed under additional open source
 * licenses. See the Open Source Licenses file (LICENSES.md) included with
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
 /*-- main controller file, here is the core functionality of the notebook plugin --*/
 define(
    ['zepto'],
    function ($) {
        function NotebookController(
            $scope,
            dialogService,
            popupService,
            agentService,
            objectService,
            navigationService,
            now,
            actionService,
            $timeout,
            $element,
            $sce
        ) {
            $scope.entriesEl = $(document.body).find('.t-entries-list');
            $scope.sortEntries = $scope.domainObject.getModel().defaultSort;
            $scope.showTime = "0";
            $scope.editEntry = false;
            $scope.entrySearch = '';
            $scope.entryTypes = [];
            $scope.embedActions = [];
            $scope.currentEntryValue = '';
            var SECONDS_IN_AN_HOUR  = 60 * 60 * 1000;
            this.scope = $scope;
            $scope.hoursFilter = function (hours,entryTime) {
                if (+hours) {
                    return entryTime > (Date.now() - SECONDS_IN_AN_HOUR * (+hours));
                }else {
                    return true;
                }
            };
            $scope.scrollToTop = function () {
                var entriesContainer = $scope.entriesEl.parent();
                entriesContainer[0].scrollTop = 0;
            };
            $scope.findEntryEl = function (entryId) {
                var element = $($scope.entriesEl).find('#entry_' + entryId);
                if (element[0]) {
                    return element.find("[contenteditable='true']");
                } else {
                    var entries = $scope.entriesEl.children().children(),
                        lastOrFirst = $scope.sortEntries === "-createdOn" ? 0 : (entries.length - 1);
                    return $(entries[lastOrFirst]).find("[contenteditable='true']");
                }
            };
            $scope.findEntryPositionById = function (id) {
                var foundId = -1;
                $scope.domainObject.model.entries.forEach(function (element, index) {
                    if (element.id === id) {
                        foundId = index;
                        return;
                    }
                });
                return foundId;
            };
            $scope.newEntry = function ($event) {
                $scope.scrollToTop();
                var entries = $scope.domainObject.model.entries,
                    lastEntry = entries[entries.length - 1],
                    id = Date.now();
                if (lastEntry === undefined || lastEntry.text || lastEntry.embeds) {
                    var createdEntry = {'id': id, 'createdOn': id};
                    $scope.domainObject.useCapability('mutation', function (model) {
                        model.entries.push(createdEntry);
                    });
                } else {
                    $scope.findEntryEl(lastEntry.id).focus();
                    $scope.domainObject.useCapability('mutation', function (model) {
                        model.entries[entries.length - 1].createdOn = id;
                    });
                }
                $scope.entrySearch = '';
            };
            $scope.deleteEntry = function ($event) {
                var delId = +$event.currentTarget.id;
                var errorDialog = dialogService.showBlockingMessage({
                    severity: "error",
                    title: "This action will permanently delete this Notebook entry. Do you want to continue?",
                    minimized: true, // want the notification to be minimized initially (don't show banner)
                    options: [{
                        label: "OK",
                        callback: function () {
                            errorDialog.dismiss();
                            var elementPos = $scope.findEntryPositionById(delId);
                            if (elementPos !== -1) {
                                $scope.domainObject.useCapability('mutation', function (model) {
                                    model.entries.splice(elementPos, 1);
                                });
                            } else {
                                window.console.log('delete error');
                            }
                        }
                    },{
                        label: "Cancel",
                        callback: function () {
                            errorDialog.dismiss();
                        }
                    }]
                });
            };
            $scope.textFocus = function ($event, entryId) {
                if ($event.srcElement) {
                    $scope.currentEntryValue = $event.srcElement.innerText;
                } else {
                    $event.target.innerText = '';
                }
            };
            //On text blur(when focus is removed)
            $scope.textBlur = function ($event, entryId) {
                // entryId is the unique numeric based on the original createdOn
                if ($event.target) {
                    var elementPos = $scope.findEntryPositionById(+entryId);
                    // If the text of an entry has been changed, then update the text and the modifiedOn numeric
                    // Otherwise, don't do anything
                    if ($scope.currentEntryValue !== $event.target.innerText) {
                        $scope.domainObject.useCapability('mutation', function (model) {
                            model.entries[elementPos].text = $event.target.innerText;
                            model.entries[elementPos].modified = Date.now();
                        });
                    }
                }
            };
            $scope.finished = function (model) {
                var lastEntry = model[model.length - 1];
                if (!lastEntry.text) {
                    $scope.findEntryEl(lastEntry.id).focus();
                }
            };
            $scope.handleActive = function () {
                var newEntry = $scope.entriesEl.find('.active');
                if (newEntry) {
                    newEntry.removeClass('active');
                }
            };
            $scope.clearSearch = function () {
                $scope.entrySearch = '';
            };
            $scope.viewSnapshot = function ($event,snapshot,embedId,entryId,$innerScope,domainObject) {
                var viewAction = $scope.action.getActions({category: 'embed'})[0];
                viewAction.perform($event, snapshot, embedId, entryId, $innerScope, domainObject);
            };
            $scope.renderImage = function (img) {
                return URL.createObjectURL(img);
            };
            $scope.getDomainObj = function (id) {
                return objectService.getObjects([id]);
            };
            function refreshComp(change) {
                if (change && change.length) {
                    change[0].getCapability('action').getActions({key: 'remove'})[0].perform();
                }
            }
            $scope.actionToMenuOption = function (action) {
                return {
                    key: action.getMetadata().key,
                    name: action.getMetadata().name,
                    cssClass: action.getMetadata().cssClass,
                    perform: action.perform
                };
            };
            // Maintain all "conclude-editing" and "save" actions in the
            // present context.
            function updateActions() {
                $scope.menuEmbed = $scope.action ?
                    $scope.action.getActions({category: 'embed'}) :
                    [];
                $scope.menuEmbedNoSnap = $scope.action ?
                    $scope.action.getActions({category: 'embed-no-snap'}) :
                    [];
                $scope.menuActions = $scope.action ?
                    $scope.action.getActions({key: 'window'}) :
                    [];
            }
            // Update set of actions whenever the action capability
            // changes or becomes available.
            $scope.$watch("action", updateActions);
            $scope.navigate = function ($event,embedType) {
                if ($event) {
                    $event.preventDefault();
                }
                $scope.getDomainObj(embedType).then(function (resp) {
                    navigationService.setNavigation(resp[embedType]);
                });
            };
            $scope.saveSnap = function (url,embedPos,entryPos) {
                var snapshot = false;
                if (url) {
                    if (embedPos !== -1 && entryPos !== -1) {
                        var reader = new window.FileReader();
                        reader.readAsDataURL(url);
                        reader.onloadend = function () {
                            snapshot = reader.result;
                            $scope.domainObject.useCapability('mutation', function (model) {
                                if (model.entries[entryPos]) {
                                    model.entries[entryPos].embeds[embedPos].snapshot = {
                                        'src': snapshot,
                                        'type': url.type,
                                        'size': url.size,
                                        'modified': Date.now()
                                    };
                                    model.entries[entryPos].embeds[embedPos].id = Date.now();
                                }
                            });
                        };
                    }
                }else {
                    $scope.domainObject.useCapability('mutation', function (model) {
                        model.entries[entryPos].embeds[embedPos].snapshot = snapshot;
                    });
                }
            };
            /*---popups menu embeds----*/
            function getEmbedActions(embedType) {
                if (!$scope.embedActions.length) {
                    $scope.getDomainObj(embedType).then(function (resp) {
                        $scope.embedActions = [];
                        $scope.embedActions.push($scope.actionToMenuOption(
                            $scope.action.getActions({key: 'mct-preview-action', selectedObject: resp[embedType]})[0]
                        ));
                        $scope.embedActions.push($scope.actionToMenuOption(
                            $scope.action.getActions({key: 'window', selectedObject: resp[embedType]})[0]
                        ));
                        $scope.embedActions.push({
                            key: 'navigate',
                            name: 'Go to Original',
                            cssClass: '',
                            perform: function () {
                                $scope.navigate('', embedType);
                            }
                        });
                    });
                }
            }
            $scope.openMenu = function ($event,embedType) {
                $event.preventDefault();
                getEmbedActions(embedType);
                var body = $(document).find('body'),
                    initiatingEvent = agentService.isMobile() ?
                        'touchstart' : 'mousedown',
                    dismissExistingMenu,
                    menu;
                var container = $($event.currentTarget).parent().parent();
                menu = container.find('.menu-element');
                // Remove the context menu
                function dismiss() {
                    container.find('.hide-menu').append(menu);
                    body.off("mousedown", dismiss);
                    dismissExistingMenu = undefined;
                    $scope.embedActions = [];
                }
                // Dismiss any menu which was already showing
                if (dismissExistingMenu) {
                    dismissExistingMenu();
                }
                // ...and record the presence of this menu.
                dismissExistingMenu = dismiss;
                popupService.display(menu, [$event.pageX,$event.pageY], {
                    marginX: 0,
                    marginY: -50
                });
                // Stop propagation so that clicks or touches on the menu do not close the menu
                menu.on(initiatingEvent, function (event) {
                    event.stopPropagation();
                    $timeout(dismiss, 300);
                });
                // Dismiss the menu when body is clicked/touched elsewhere
                // ('mousedown' because 'click' breaks left-click context menus)
                // ('touchstart' because 'touch' breaks context menus up)
                body.on(initiatingEvent, dismiss);
            };
            $scope.$watchCollection("composition", refreshComp);
            $scope.$watch('domainObject.getModel().defaultSort', function (newDefaultSort, oldDefaultSort) {
                if (newDefaultSort !== oldDefaultSort) {
                    $scope.sortEntries = newDefaultSort;
                }
            });
            $scope.$on('$destroy', function () {});
        }
        return NotebookController;
    });
--- a/platform/framework/src/FrameworkLayer.js
+++ b/platform/framework/src/FrameworkLayer.js
@ -93,7 +93,7 @@ define([
        // Initialize the application
        $log.info("Initializing application.");
-        initializer.runApplication();
+        return initializer.runApplication();
    };
    return FrameworkLayer;
--- a/platform/framework/src/Main.js
+++ b/platform/framework/src/Main.js
@ -52,10 +52,7 @@ define(
                return match ? match[1] : "";
            }
-
+            return injector.instantiate(['$http', '$log', FrameworkLayer])
            // Reconfigure base url, since bundle paths will all be relative
            // to the root now.
            injector.instantiate(['$http', '$log', FrameworkLayer])
                .initializeApplication(angular, legacyRegistry, logLevel());
        };
--- a/platform/framework/src/bootstrap/ApplicationBootstrapper.js
+++ b/platform/framework/src/bootstrap/ApplicationBootstrapper.js
@ -55,9 +55,12 @@ define(
            var angular = this.angular,
                document = this.document,
                $log = this.$log;
            return new Promise(function (resolve, reject) {
                $log.info("Bootstrapping application " + (app || {}).name);
                angular.element(document).ready(function () {
                    angular.bootstrap(document, [app.name], { strictDi: true });
                    resolve(angular);
                });
            });
        };
--- a/platform/search/src/controllers/SearchController.js
+++ b/platform/search/src/controllers/SearchController.js
@ -44,6 +44,7 @@ define(function () {
    function SearchController($scope, searchService) {
        var controller = this;
        this.$scope = $scope;
        this.$scope.ngModel = this.$scope.ngModel || {};
        this.searchService = searchService;
        this.numberToDisplay = this.RESULTS_PER_PAGE;
        this.availabileResults = 0;
--- a/src/MCT.js
+++ b/src/MCT.js
@ -24,28 +24,44 @@ define([
    'EventEmitter',
    'legacyRegistry',
    'uuid',
    './defaultRegistry',
    './api/api',
    './selection/Selection',
    './api/objects/object-utils',
    './plugins/plugins',
    './ui/ViewRegistry',
    './ui/InspectorViewRegistry',
    './ui/ToolbarRegistry',
    './adapter/indicators/legacy-indicators-plugin',
-    './styles/core.scss'
+    './plugins/buildInfo/plugin',
    './ui/registries/ViewRegistry',
    './ui/registries/InspectorViewRegistry',
    './ui/registries/ToolbarRegistry',
    './ui/router/ApplicationRouter',
    './ui/router/Browse',
    '../platform/framework/src/Main',
    './styles-new/core.scss',
    './styles-new/notebook.scss',
    './ui/components/layout/Layout.vue',
    'vue'
 ], function (
    EventEmitter,
    legacyRegistry,
    uuid,
    defaultRegistry,
    api,
    Selection,
    objectUtils,
    plugins,
    LegacyIndicatorsPlugin,
    buildInfoPlugin,
    ViewRegistry,
    InspectorViewRegistry,
    ToolbarRegistry,
-    LegacyIndicatorsPlugin,
+    ApplicationRouter,
-    coreStyles
+    Browse,
    Main,
    coreStyles,
    NotebookStyles,
    Layout,
    Vue
 ) {
    /**
     * Open MCT is an extensible web application for building mission
@ -207,6 +223,15 @@ define([
        this.Dialog = api.Dialog;
        this.legacyRegistry = defaultRegistry;
        this.install(this.plugins.Plot());
        this.install(this.plugins.TelemetryTable());
        this.install(this.plugins.DisplayLayout());
        if (typeof BUILD_CONSTANTS !== 'undefined') {
            this.install(buildInfoPlugin(BUILD_CONSTANTS));
        }
    }
    MCT.prototype = Object.create(EventEmitter.prototype);
@ -245,11 +270,6 @@ define([
            domElement = document.body;
        }
        var appDiv = document.createElement('div');
        appDiv.setAttribute('ng-view', '');
        appDiv.className = 'user-environ';
        domElement.appendChild(appDiv);
        this.legacyExtension('runs', {
            depends: ['navigationService'],
            implementation: function (navigationService) {
@ -258,6 +278,7 @@ define([
            }.bind(this)
        });
        // TODO: remove with legacy types.
        this.types.listKeys().forEach(function (typeKey) {
            var type = this.types.get(typeKey);
            var legacyDefinition = type.toLegacyDefinition();
@ -265,32 +286,44 @@ define([
            this.legacyExtension('types', legacyDefinition);
        }.bind(this));
        this.objectViews.getAllProviders().forEach(function (p) {
            this.legacyExtension('views', {
                key: p.key,
                provider: p,
                name: p.name,
                cssClass: p.cssClass,
                description: p.description,
                editable: p.editable,
                template: '<mct-view mct-provider-key="' + p.key + '"/>'
            });
        }, this);
        legacyRegistry.register('adapter', this.legacyBundle);
        legacyRegistry.enable('adapter');
        this.install(LegacyIndicatorsPlugin());
        this.router = new ApplicationRouter();
        this.router.route(/^\/$/, () => {
            this.router.setPath('/browse/mine');
        });
        /**
         * Fired by [MCT]{@link module:openmct.MCT} when the application
         * is started.
         * @event start
         * @memberof module:openmct.MCT~
         */
-        this.emit('start');
+        var startPromise = new Main().run(this.legacyRegistry)
-    };
+            .then(function (angular) {
                this.$angular = angular;
                // OpenMCT Object provider doesn't operate properly unless
                // something has depended upon objectService.  Cool, right?
                this.$injector.get('objectService');
                var appLayout = new Vue({
                    mixins: [Layout.default],
                    provide: {
                        openmct: this
                    }
                });
                domElement.appendChild(appLayout.$mount().$el);
                this.layout = appLayout;
                Browse(this);
                this.router.start();
                this.emit('start');
            }.bind(this));
    };
    /**
     * Install a plugin in MCT.
--- a/src/adapter/bundle.js
+++ b/src/adapter/bundle.js
@ -34,7 +34,9 @@ define([
    './runs/TimeSettingsURLHandler',
    './runs/TypeDeprecationChecker',
    './runs/LegacyTelemetryProvider',
-    './services/LegacyObjectAPIInterceptor'
+    './runs/RegisterLegacyTypes',
    './services/LegacyObjectAPIInterceptor',
    './views/installLegacyViews'
 ], function (
    legacyRegistry,
    ActionDialogDecorator,
@ -49,7 +51,9 @@ define([
    TimeSettingsURLHandler,
    TypeDeprecationChecker,
    LegacyTelemetryProvider,
-    LegacyObjectAPIInterceptor
+    RegisterLegacyTypes,
    LegacyObjectAPIInterceptor,
    installLegacyViews
 ) {
    legacyRegistry.register('src/adapter', {
        "extensions": {
@ -149,6 +153,21 @@ define([
                        "openmct",
                        "instantiate"
                    ]
                },
                {
                    implementation: installLegacyViews,
                    depends: [
                        "openmct",
                        "views[]",
                        "instantiate"
                    ]
                },
                {
                    implementation: RegisterLegacyTypes,
                    depends: [
                        "types[]",
                        "openmct"
                    ]
                }
            ],
            licenses: [
--- a/src/adapter/runs/RegisterLegacyTypes.js
+++ b/src/adapter/runs/RegisterLegacyTypes.js
@ -0,0 +1,17 @@
 define([
 ], function (
 ) {
    function RegisterLegacyTypes(types, openmct) {
        types.forEach(function (legacyDefinition) {
            if (!openmct.types.get(legacyDefinition.key)) {
                console.warn(`DEPRECATION WARNING: Migrate type ${legacyDefinition.key} from ${legacyDefinition.bundle.path} to use the new Types API.  Legacy type support will be removed soon.`);
            }
        });
        openmct.types.importLegacyTypes(types);
    }
    return RegisterLegacyTypes;
 });
--- a/src/adapter/views/LegacyViewProvider.js
+++ b/src/adapter/views/LegacyViewProvider.js
@ -0,0 +1,93 @@
 define([
 ], function (
 ) {
    function LegacyViewProvider(legacyView, openmct, convertToLegacyObject) {
        console.warn(`DEPRECATION WARNING: Migrate ${legacyView.key} from ${legacyView.bundle.path} to use the new View APIs.  Legacy view support will be removed soon.`);
        return {
            key: legacyView.key,
            name: legacyView.name,
            cssClass: legacyView.cssClass,
            description: legacyView.description,
            editable: legacyView.editable,
            canView: function (domainObject) {
                if (!domainObject || !domainObject.identifier) {
                    return false;
                }
                if (legacyView.type) {
                    return domainObject.type === legacyView.type;
                }
                let legacyObject = convertToLegacyObject(domainObject);
                if (legacyView.needs) {
                    let meetsNeeds = legacyView.needs.every(k => legacyObject.hasCapability(k));
                    if (!meetsNeeds) {
                        return false;
                    }
                }
                return openmct.$injector.get('policyService').allow(
                    'view', legacyView, legacyObject
                );
            },
            view: function (domainObject) {
                let $rootScope = openmct.$injector.get('$rootScope');
                let templateLinker = openmct.$injector.get('templateLinker');
                let scope = $rootScope.$new();
                let legacyObject = convertToLegacyObject(domainObject);
                let isDestroyed = false;
                scope.domainObject = legacyObject;
                scope.model = legacyObject.getModel();
                return {
                    show: function (container) {
                        // TODO: implement "gestures" support ?
                        let uses = legacyView.uses || [];
                        let promises = [];
                        let results = uses.map(function (capabilityKey, i) {
                            let result = legacyObject.useCapability(capabilityKey);
                            if (result.then) {
                                promises.push(result.then(function (r) {
                                    results[i] = r;
                                }));
                            }
                            return result;
                        });
                        function link() {
                            if (isDestroyed) {
                                return;
                            }
                            uses.forEach(function (key, i) {
                                scope[key] = results[i];
                            });
                            templateLinker.link(
                                scope,
                                openmct.$angular.element(container),
                                legacyView
                            );
                            container.style.height = '100%';
                        }
                        if (promises.length) {
                            Promise.all(promises)
                                .then(function () {
                                    link();
                                    scope.$digest();
                                });
                        } else {
                            link();
                        }
                    },
                    destroy: function () {
                        scope.$destroy();
                    }
                }
            }
        };
    };
    return LegacyViewProvider;
 });
--- a/src/adapter/views/installLegacyViews.js
+++ b/src/adapter/views/installLegacyViews.js
@ -0,0 +1,22 @@
 define([
    './LegacyViewProvider',
    '../../api/objects/object-utils'
 ], function (
    LegacyViewProvider,
    objectUtils
 ) {
    function installLegacyViews(openmct, legacyViews, instantiate) {
        function convertToLegacyObject(domainObject) {
            let keyString = objectUtils.makeKeyString(domainObject.identifier);
            let oldModel = objectUtils.toOldFormat(domainObject);
            return instantiate(oldModel, keyString);
        }
        legacyViews.forEach(function (legacyView) {
            openmct.objectViews.addProvider(new LegacyViewProvider(legacyView, openmct, convertToLegacyObject));
        });
    }
    return installLegacyViews;
 });
--- a/src/api/types/Type.js
+++ b/src/api/types/Type.js
@ -32,6 +32,9 @@ define(function () {
     */
    function Type(definition) {
        this.definition = definition;
        if (definition.key) {
            this.key = definition.key;
        }
    }
    /**
@ -70,5 +73,29 @@ define(function () {
        return def;
    };
    /**
     * Create a type definition from a legacy definition.
     */
    Type.definitionFromLegacyDefinition = function (legacyDefinition) {
        let definition = {};
        definition.name = legacyDefinition.name;
        definition.cssClass = legacyDefinition.cssClass;
        definition.description = legacyDefinition.description;
        definition.form = legacyDefinition.properties;
        if (legacyDefinition.model) {
            definition.initialize = function (model) {
                for (let [k, v] of Object.entries(legacyDefinition.model)) {
                    model[k] = JSON.parse(JSON.stringify(v));
                }
            }
        }
        if (legacyDefinition.features && legacyDefinition.features.includes("creation")) {
            definition.creatable = true;
        }
        return definition;
    };
    return Type;
 });
--- a/src/api/types/TypeRegistry.js
+++ b/src/api/types/TypeRegistry.js
@ -98,6 +98,14 @@ define(['./Type'], function (Type) {
        return this.types[typeKey];
    };
    TypeRegistry.prototype.importLegacyTypes = function (types) {
        types.filter((t) => !this.get(t.key))
            .forEach((type) => {
                let def = Type.definitionFromLegacyDefinition(type);
                this.addType(type.key, def);
            });
    }
    return TypeRegistry;
 });
--- a/src/exporters/CSVExporter.js
+++ b/src/exporters/CSVExporter.js
@ -20,10 +20,9 @@
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
-define([
+import CSV from 'comma-separated-values';
-    'csv',
+import {saveAs} from 'file-saver/FileSaver';
-    'saveAs'
+
 ], function (CSV, saveAs) {
 class CSVExporter {
    export(rows, options) {
        let headers = (options && options.headers) ||
@ -33,7 +32,6 @@ define([
        let blob = new Blob([csvText], { type: "text/csv" });
        saveAs(blob, filename);
    }
-    }
+};
-    return CSVExporter;
+export default CSVExporter;
 });
--- a/src/plugins/autoflow/AutoflowTabularView.js
+++ b/src/plugins/autoflow/AutoflowTabularView.js
@ -23,7 +23,7 @@
 define([
    './AutoflowTabularController',
    './AutoflowTabularConstants',
-    '../../ui/VueView',
+    './VueView',
    './autoflow-tabular.html'
 ], function (
    AutoflowTabularController,
--- a/src/plugins/autoflow/VueView.js
+++ b/src/plugins/autoflow/VueView.js
--- a/src/plugins/displayLayout/DisplayLayout.vue
+++ b/src/plugins/displayLayout/DisplayLayout.vue
@ -0,0 +1,206 @@
 <template>
    <div class="l-layout">
        <div class="l-layout__object">
            <!-- Background grid -->
            <div class="l-layout__grid-holder c-grid" v-if="!drilledIn">
                <div class="c-grid__x l-grid l-grid-x"
                     v-if="gridSize[0] >= 3"
                     :style="[{ backgroundSize: gridSize[0] + 'px 100%' }]">
                </div>
                <div class="c-grid__y l-grid l-grid-y"
                     v-if="gridSize[1] >= 3"
                     :style="[{ backgroundSize: '100%' + gridSize[1] + 'px' }]"></div>
            </div>
            <layout-frame v-for="item in frameItems"
                          class="l-layout__frame"
                          :key="item.id"
                          :item="item"
                          @drilledIn="updateDrilledInState"
                          @selected="updateSelectedState">
            </layout-frame>
        </div>
    </div>
 </template>
 <style lang="scss">
    @import "~styles/sass-base";
    .l-layout,
    .c-grid,
    .c-grid__x,
    .c-grid__y {
        @include abs();
    }
    .l-layout {
        display: flex;
        flex-direction: column;
        &__grid-holder {
            display: none;
        }
        &__object {
            flex: 1 1 auto;
            overflow: auto;
        }
        &__frame {
            position: absolute;
        }
    }
    .c-grid {
        z-index: -1;
        pointer-events: none;
        &__x  { @include bgTicks($colorGridLines, 'x'); }
        &__y  { @include bgTicks($colorGridLines, 'y'); }
    }
    .is-editing {
        .l-layout {
            background: rgba($colorKey, 0.1);
            &.s-selected,
            &.s-selected-parent {
                [class*="__grid-holder"] {
                    display: block;
                }
            }
        }
    }
 </style>
 <script>
    import LayoutFrame from './LayoutFrame.vue';
    const DEFAULT_GRID_SIZE = [32, 32],
          DEFAULT_DIMENSIONS = [12, 8],
          MINIMUM_FRAME_SIZE = [320, 180];
    export default {
        data() {
            return {
                gridSize: DEFAULT_GRID_SIZE,
                frameItems: [],
                frames: [],                
                composition: Object,
                frameStyles: [],
                rawPositions: {},
                isEditing: true,
                initSelect: true,
                drilledIn: undefined
            }
        },          
        inject: ['openmct'],
        props: ['domainObject'],
        components: {
            LayoutFrame
        },
        created: function () {
            console.log("domainObject", JSON.parse(JSON.stringify(this.domainObject)));                    
            this.populatePositions(this.domainObject.configuration.layout.panels);
            this.composition = this.openmct.composition.get(this.domainObject);
            this.composition.on('add', this.onAddComposition);
            this.composition.on('remove', this.onRemoveComposition);
            this.composition.load();
        },
        methods: {            
            onAddComposition(domainObject) {
                console.log('composition object', domainObject);
                const id = this.openmct.objects.makeKeyString(domainObject.identifier)
                this.frameItems.push({
                    id: id,
                    hasFrame: this.hasFrame(id),
                    domainObject,
                    style: this.frameStyles[id],
                    drilledIn: this.isDrilledIn(id),
                    selected: false
                });
            },
            onRemoveComposition(identifier) {
                // TODO: remove the object from frameItems
            },
            populatePositions(panels) {
                Object.keys(panels).forEach(function (key, index) {
                    this.rawPositions[key] = {
                        position: panels[key].position || this.defaultPosition(index),
                        dimensions: panels[key].dimensions || this.defaultDimensions()
                    };
                    this.frameStyles[key] = this.convertPosition(this.rawPositions[key]);
                    this.frames[key] = panels[key].hasFrame;
                }.bind(this));
            },
            defaultPosition(index) {
                return [index, index];
            },
            defaultDimensions() {
                let gridSize = this.gridSize;
                return MINIMUM_FRAME_SIZE.map(function (min, i) {
                    return Math.max(
                        Math.ceil(min / gridSize[i]),
                        DEFAULT_DIMENSIONS[i]
                    );
                });
            },
            convertPosition(raw) {
                return {
                    left: (this.gridSize[0] * raw.position[0]) + 'px',
                    top: (this.gridSize[1] * raw.position[1]) + 'px',
                    width: (this.gridSize[0] * raw.dimensions[0]) + 'px',
                    height: (this.gridSize[1] * raw.dimensions[1]) + 'px',
                    minWidth: (this.gridSize[0] * raw.dimensions[0]) + 'px',
                    minHeight: (this.gridSize[1] * raw.dimensions[1]) + 'px'
                };
            },
            hasFrame(id) {
                return this.frames[id]
            },
            setSelection(selection) {
                if (selection.length === 0) {
                    return;
                }
                this.updateDrilledInState();
                this.updateSelectedState();
            },
            updateDrilledInState(id) {
                this.drilledIn = id;
                this.frameItems.forEach(function (item) {
                    item.drilledIn = item.id === id;
                });
            },
            updateSelectedState(id) {
                this.frameItems.forEach(function (item) {
                    item.selected = item.id === id;
                });
            },
            isDrilledIn(id) {
                return this.drilledIn === id;
            }
        },
        mounted() {
            this.removeSelectable = this.openmct.selection.selectable(
                this.$el,
                {
                    item: this.domainObject
                },
                this.initSelect
            );
            this.openmct.selection.on('change', this.setSelection);
        },
        destroyed: function () {
            this.composition.off('add', this.onAddComposition);
            this.composition.off('remove', this.onRemoveComposition);
            this.openmct.off('change', this.selection);
            this.removeSelectable();
        }
    }
 </script>
--- a/src/plugins/displayLayout/LayoutFrame.vue
+++ b/src/plugins/displayLayout/LayoutFrame.vue
@ -0,0 +1,251 @@
 <template>
    <!-- - TODO: styles for selectable, moveable, etc. -->
    <div class="c-frame has-local-controls"
         :style="item.style"
         :class="classObject"
         @dblclick="drill(item.id, $event)">
        <div class="c-frame__header">
            <div class="c-frame__header__start">
                <div class="c-frame__name icon-object">Header</div>
                <div class="c-frame__context-actions c-disclosure-button"></div>
            </div>
            <div class="c-frame__header__end">
                <div class="c-button icon-expand local-controls--hidden"></div>
            </div>
        </div>
        <object-view
                class="c-frame__object-view"
                :object="item.domainObject"></object-view>
        <!-- Drag handles -->
        <div class="c-frame-edit">
            <div class="c-frame-edit__move"></div>
            <div class="c-frame-edit__handle --nw"></div>
            <div class="c-frame-edit__handle --ne"></div>
            <div class="c-frame-edit__handle --se"></div>
            <div class="c-frame-edit__handle --sw"></div>
        </div>
    </div>
 </template>
 <style lang="scss">
    @import "~styles/sass-base";
    /******************************* FRAME */
    .c-frame {
        display: flex;
        flex-direction: column;
        /*************************** HEADER */
        &__header {
            display: flex;
            align-items: center;
            flex: 0 0 auto;
            margin-bottom: $interiorMargin;
            > [class*="__"] {
                display: flex;
                align-items: center;
            }
            [class*="__start"] {
                flex: 0 0 auto;
            }
            [class*="__end"] {
                justify-content: flex-end;
                flex: 1 1 auto;
                [class*="button"] {
                    font-size: 0.7em;
                }
            }
        }
        &__name {
            @include ellipsize();
            flex: 0 1 auto;
            font-size: 1.2em;
            &:before {
                // Object type icon
                flex: 0 0 auto;
                margin-right: $interiorMarginSm;
            }
        }
        /*************************** OBJECT VIEW */
        &__object-view {
            flex: 1 1 auto;
            overflow: auto;
        }
        /*************************** NO-FRAME */
        &.no-frame {
            [class*="__header"] {
                display: none;
            }
        }
        &:not(.no-frame) {
            background: $colorBodyBg;
            border: 1px solid $colorInteriorBorder;
            padding: $interiorMargin;
        }
        /*************************** SELECTION */
        &.s-selected {
            //Legacy name for now
            border-color: $colorKey;
        }
        &.is-drilled-in {
            border: 1px dashed deeppink;
        }
    }
    /*************************** EDITING */
    .is-editing .c-frame:not(.is-drilled-in) {
        border: 1px dotted rgba($colorKey, 0.5);
        &.s-selected {
            > .c-frame-edit {
                display: block;
            }
        }
    }
    .c-frame-edit {
        $z: 10;
        @include abs();
        box-shadow: rgba($colorKey, 1) 0 0 10px;
        display: none;
        &__move {
            @include abs();
            cursor: move;
            z-index: $z;
        }
        &__handle {
            $d: 8px;
            $o: floor($d * -0.5);
            background: rgba($colorKey, 0.3);
            border: 1px solid $colorKey;
            position: absolute;
            width: $d; height: $d;
            top: auto; right: auto; bottom: auto; left: auto;
            z-index: $z + 1;
            &:before {
                // Extended hit area
                $m: -5px;
                content: '';
                display: block;
                position: absolute;
                top: $m; right: $m; bottom: $m; left: $m;
                z-index: -1;
            }
            &:hover {
                background: $colorKey;
            }
            &.--nw {
                cursor: nw-resize;
                left: $o; top: $o;
            }
            &.--ne {
                cursor: ne-resize;
                right: $o; top: $o;
            }
            &.--se {
                cursor: se-resize;
                right: $o; bottom: $o;
            }
            &.--sw {
                cursor: sw-resize;
                left: $o; bottom: $o;
            }
        }
    }
 </style>
 <script>
    import ObjectView from '../../ui/components/layout/ObjectView.vue'
    export default {
        inject: ['openmct'],
        props: {
            item: Object
        },
        components: {
            ObjectView
        },
        computed: {
            classObject: function () {
                return {
                    'is-drilled-in': this.item.drilledIn,
                    'no-frame': !this.item.hasFrame
                }
            }
        },
        methods: {
            setSelection(selection) {
                if (selection.length === 0) {
                    return;
                }
                let id = this.openmct.objects.makeKeyString(selection[0].context.item.identifier);
                if (this.item.id === id) {
                    this.$emit('selected', id);
                }
            },
            drill(id, $event) {
                if ($event) {
                    $event.stopPropagation();
                }
                if (!this.isBeingEdited(this.item.domainObject)) {
                    return;
                }
                if (this.openmct.composition.get(this.item.domainObject) === undefined) {
                    return;
                }
                // Disable for fixed position.
                if (this.item.domainObject.type === 'telemetry.fixed') {
                    return;
                }
                this.$emit('drilledIn', id);
            },
            isBeingEdited(object) {
                // TODO: add logic when inEditContext() is implemented in Vue.
                return true;
            }
        },
        mounted() {
            this.removeSelectable = this.openmct.selection.selectable(
                this.$el,
                {
                    item: this.item.domainObject
                },
                this.item.selected
            );
            this.openmct.selection.on('change', this.setSelection);
        },
        destroyed() {
            this.openmct.off('change', this.selection);
            this.removeSelectable();
        }
    }
 </script>
--- a/src/plugins/displayLayout/plugin.js
+++ b/src/plugins/displayLayout/plugin.js
@ -0,0 +1,45 @@
 import Layout from './DisplayLayout.vue'
 import Vue from 'vue'
 import objectUtils from '../../api/objects/object-utils.js'
 export default function () {
    return function (openmct) {
        console.log("Installing Layout component...");
        openmct.objectViews.addProvider({
            key: 'layout.view',
            canView: function (domainObject) {
                return domainObject.type === 'layout';
            },
            view: function (domainObject) {
                let component;
                return {
                    show(container) {
                        component = new Vue({
                            components: {
                                Layout
                            },
                            template: '<layout :domain-object="domainObject"></layout>',
                            provide: {
                                openmct,
                                objectUtils
                            },
                            el: container,
                            data () {
                                return {
                                    domainObject: domainObject
                                }
                            }                            
                        });
                    },
                    destroy() {
                        component.$destroy();
                    }
                };
            },
            priority() {
                return 1;
            }
        });
    }
 }
--- a/src/plugins/notebook/plugin.js
+++ b/src/plugins/notebook/plugin.js
@ -0,0 +1,215 @@
 /*****************************************************************************
 * Open MCT, Copyright (c) 2014-2018, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT is licensed under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations
 * under the License.
 *
 * Open MCT includes source code licensed under additional open source
 * licenses. See the Open Source Licenses file (LICENSES.md) included with
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
 define([
    "./src/controllers/NotebookController",
    "./src/controllers/NewEntryController",
    "./src/controllers/SelectSnapshotController",
    "./src/actions/NewEntryContextual",
    "./src/actions/AnnotateSnapshot",
    "./src/directives/MCTSnapshot",
    "./src/directives/EntryDnd",
    "./res/templates/controls/snapSelect.html",
    "./res/templates/controls/embedControl.html",
    "./res/templates/annotation.html",
    "./res/templates/draggedEntry.html"
 ], function (
    NotebookController,
    NewEntryController,
    SelectSnapshotController,
    newEntryAction,
    AnnotateSnapshotAction,
    MCTSnapshotDirective,
    EntryDndDirective,
    snapSelectTemplate,
    embedControlTemplate,
    annotationTemplate,
    draggedEntryTemplate
 ) {
    var installed  = false;
    function NotebookPlugin() {
        return function install(openmct) {
            if (installed) {
                return;
            }
            installed = true;
            openmct.legacyRegistry.register('notebook', {
                name: 'Notebook Plugin',
                extensions: {
                    types: [
                        {
                            key: 'notebook',
                            name: 'Notebook',
                            cssClass: 'icon-notebook',
                            description: 'Create and save timestamped notes with embedded object snapshots.',
                            features: 'creation',
                            model: {
                                entries: [],
                                composition: [],
                                entryTypes: [],
                                defaultSort: '-createdOn'
                            },
                            properties: [
                                {
                                    key: 'defaultSort',
                                    name: 'Default Sort',
                                    control: 'select',
                                    options: [
                                        {
                                            name: 'Newest First',
                                            value: "-createdOn",
                                        },
                                        {
                                            name: 'Oldest First',
                                            value: "createdOn"
                                        }
                                    ],
                                    cssClass: 'l-inline'
                                }
                            ]
                        }
                    ],
                    actions: [
                        {
                            "key": "notebook-new-entry",
                            "implementation": newEntryAction,
                            "name": "New Notebook Entry",
                            "cssClass": "icon-notebook labeled",
                            "description": "Add a new Notebook entry",
                            "category": [
                                "view-control"
                            ],
                            "depends": [
                                "$compile",
                                "$rootScope",
                                "dialogService",
                                "notificationService",
                                "linkService"
                            ],
                            "priority": "preferred"
                        },
                        {
                            "key": "annotate-snapshot",
                            "implementation": AnnotateSnapshotAction,
                            "name": "Annotate Snapshot",
                            "cssClass": "icon-pencil labeled",
                            "description": "Annotate embed's snapshot",
                            "category": "embed",
                            "depends": [
                                "dialogService",
                                "dndService",
                                "$rootScope"
                            ]
                        }
                    ],
                    controllers: [
                        {
                            "key": "NewEntryController",
                            "implementation": NewEntryController,
                            "depends": ["$scope",
                                "$rootScope"
                            ]
                        },
                        {
                            "key": "selectSnapshotController",
                            "implementation": SelectSnapshotController,
                            "depends": ["$scope",
                                "$rootScope"
                            ]
                        }
                    ],
                    controls: [
                        {
                            "key": "snapshot-select",
                            "template":  snapSelectTemplate
                        },
                        {
                            "key": "embed-control",
                            "template": embedControlTemplate
                        }
                    ],
                    templates: [
                        {
                            "key": "annotate-snapshot",
                            "template": annotationTemplate
                        }
                    ],
                    directives: [
                        {
                            "key": "mctSnapshot",
                            "implementation": MCTSnapshotDirective,
                            "depends": [
                                "$rootScope",
                                "$document",
                                "exportImageService",
                                "dialogService",
                                "notificationService"
                            ]
                        },
                        {
                            "key": "mctEntryDnd",
                            "implementation": EntryDndDirective,
                            "depends": [
                                "$rootScope",
                                "$compile",
                                "dndService",
                                "typeService",
                                "notificationService"
                            ]
                        }
                    ],
                    representations: [
                        {
                            "key": "draggedEntry",
                            "template": draggedEntryTemplate
                        }
                    ]
                }
            });
            openmct.legacyRegistry.enable('notebook');
            openmct.objectViews.addProvider({
                key: 'notebook-vue',
                name: 'Notebook View',
                cssClass: 'icon-notebook',
                canView: function (domainObject) {
                    return domainObject.type === 'notebook';
                },
                view: function (domainObject) {
                    var controller = new NotebookController (openmct, domainObject);
                    return {
                        show: controller.show,
                        destroy: controller.destroy
                    };
                }
            });
        };
    }
    return NotebookPlugin;
 });
--- a/platform/features/notebook/res/templates/annotation.html
+++ b/platform/features/notebook/res/templates/annotation.html
--- a/platform/features/notebook/res/templates/controls/embedControl.html
+++ b/platform/features/notebook/res/templates/controls/embedControl.html
--- a/platform/features/notebook/res/templates/controls/snapSelect.html
+++ b/platform/features/notebook/res/templates/controls/snapSelect.html
@ -25,6 +25,5 @@
            ng-options="opt.value as opt.name for opt in options"
            ng-required="ngRequired"
            name="mctControl">
        <!-- <option value="" ng-show="!ngModel[field]">- Select One -</option> -->
    </select>
 </div>
--- a/src/plugins/notebook/res/templates/draggedEntry.html
+++ b/src/plugins/notebook/res/templates/draggedEntry.html
--- a/src/plugins/notebook/res/templates/embed.html
+++ b/src/plugins/notebook/res/templates/embed.html
@ -0,0 +1,32 @@
 <div class="c-ne__embed">
    <div class="c-ne__embed__snap-thumb"
        v-if="embed.snapshot"
        v-on:click="openSnapshot">
        <img v-bind:src="embed.snapshot.src">
    </div>
    <div class="c-ne__embed__info">
        <div class="c-ne__embed__name">
            <a class="c-ne__embed__link"
               v-on:click="navigate(embed.type)"
               v-bind:class="[embed.cssClass]">{{embed.name}}</a>
            <a class="c-ne__embed__context-available icon-arrow-down"
               v-on:click="toggleActionMenu"></a>
        </div>
        <div class="hide-menu hidden">
            <div class="menu-element context-menu-wrapper mobile-disable-select">
                <div class="menu context-menu">
                    <ul>
                        <li v-for="action in actions" 
                            v-bind:class="[action.cssClass]"
                            v-on:click="action.perform(embed, entry)">
                            {{ action.name }}
                        </li> 
                    </ul>
                </div>
            </div>
        </div>
        <div class="c-ne__embed__time" v-if="embed.snapshot">
                {{formatTime(embed.createdOn, 'YYYY-MM-DD HH:mm:ss')}}
        </div>
    </div>
 </div>
--- a/src/plugins/notebook/res/templates/entry.html
+++ b/src/plugins/notebook/res/templates/entry.html
@ -0,0 +1,35 @@
 <li class="c-notebook__entry c-ne has-local-controls"
    v-on:drop="dropOnEntry(entry.id)"
    v-on:dragover="dragoverOnEntry"
    >
    <div class="c-ne__time-and-content">
        <div class="c-ne__time">
            <span>{{formatTime(entry.createdOn, 'YYYY-MM-DD')}}</span>
            <span>{{formatTime(entry.createdOn, 'HH:mm:ss')}}</span>
        </div>
        <div class="c-ne__content">
            <!-- TODO: fix styling for c-input-inline when SCSS is merged and remove s-input-inline class here -->
            <div class="c-ne__text c-input-inline s-input-inline"
                 contenteditable="true"
                 ref="contenteditable"
                 v-on:blur="textBlur($event, entry.id)"
                 v-on:focus="textFocus($event, entry.id)"
                 v-bind:key="entry.id"
                 v-html="entry.text">
            </div>
            <div class="c-ne__embeds">
                <notebook-embed
                    v-for="(embed, index) in entry.embeds"
                    v-bind:embed="embed"
                    v-bind:entry="entry"
                ></notebook-embed>
            </div>
        </div>
    </div>
    <div class="c-ne__local-controls--hidden">
        <a class="c-click-icon icon-trash"
           title="Delete this entry"
           v-on:click="deleteEntry"></a>
    </div>
 </li>
--- a/src/plugins/notebook/res/templates/notebook.html
+++ b/src/plugins/notebook/res/templates/notebook.html
@ -0,0 +1,37 @@
 <div class="c-notebook">
    <div class="c-notebook__head">
        <search class="c-notebook__search"
                v-model="entrySearch"
                v-on:input="search($event)"
                v-on:clear="entrySearch = ''; search($event)"></search>
        <div class="c-notebook__controls">
            <div class="select c-notebook__controls__time">
                <select v-model="showTime">
                    <option value="0" selected="selected">Show all</option>
                    <option value="1">Last hour</option>
                    <option value="8">Last 8 hours</option>
                    <option value="24">Last 24 hours</option>
                </select>
            </div>
            <div class="select c-notebook__controls__sort">
                <select v-model="sortEntries">
                    <option value="-createdOn" selected="selected">Newest first</option>
                    <option value="createdOn">Oldest first</option>
                </select>
            </div>
        </div>
    </div>
    <div class="c-notebook__drag-area icon-plus"
         v-on:click="newEntry($event)"
         id="newEntry" mct-entry-dnd>
        <span class="c-notebook__drag-area__label">To start a new entry, click here or drag and drop any object</span>
    </div>
    <div class="c-notebook__entries" ng-mouseover="handleActive()">
        <ul>
           <notebook-entry
                v-for="entry in filterBySearch(entries, entrySearch)"
                v-bind:entry="entry"
           ></notebook-entry>
        </ul>
    </div>
 </div>
--- a/src/plugins/notebook/res/templates/viewSnapshot.html
+++ b/src/plugins/notebook/res/templates/viewSnapshot.html
@ -0,0 +1,50 @@
 <div class="abs overlay l-large-view">
    <div class="abs blocker" v-on:click="close"></div> 
    <div class="abs outer-holder">
        <a 
            class="close icon-x-in-circle"
            v-on:click="close">
        </a>
        <div class="abs inner-holder l-flex-col"> 
            <div class="t-contents flex-elem holder grows">
                <div class="t-snapshot abs l-view-header">
                    <div class="abs object-browse-bar l-flex-row">
                        <div class="left flex-elem l-flex-row grows">
                            <div class="object-header flex-elem l-flex-row grows">
                                <div class="type-icon flex-elem embed-icon holder" v-bind:class="embed.cssClass"></div>
                                <div class="title-label flex-elem holder flex-can-shrink">{{embed.name}}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="btn-bar right l-flex-row flex-elem flex-justify-end flex-fixed">
                    <div class="flex-elem holder flex-can-shrink s-snapshot-datetime">
                        SNAPSHOT {{formatTime(embed.createdOn, 'YYYY-MM-DD HH:mm:ss')}}
                    </div>
                    <a class="s-button icon-pencil" title="Annotate">
                        <span class="title-label">Annotate</span>
                    </a>
                </div>
                <div class="abs object-holder t-image-holder s-image-holder">
                    <div 
                        class="image-main s-image-main"
                        v-bind:style="{ backgroundImage: 'url(' + embed.snapshot.src + ')' }">
                    </div>
                </div>
            </div>
            <div 
                class="bottom-bar flex-elem holder"
                v-on:click="close">
                <a class="t-done s-button major">Done</a> 
            </div> 
        </div> 
    </div>
 </div>
--- a/platform/features/notebook/src/actions/AnnotateSnapshot.js
+++ b/platform/features/notebook/src/actions/AnnotateSnapshot.js
@ -26,6 +26,7 @@
 define(
    ["painterro", "zepto"],
    function (Painterro, $) {
        var annotationStruct = {
            title: "Annotate Snapshot",
            template: "annotate-snapshot",
@ -107,9 +108,6 @@ define(
                            done(true);
                        }
                    }).show(snapshot);
                    $(document.body).find('.ptro-icon-btn').addClass('s-button');
                    $(document.body).find('.ptro-input').addClass('s-button');
                });
            }];
--- a/platform/features/notebook/src/actions/NewEntryContextual.js
+++ b/platform/features/notebook/src/actions/NewEntryContextual.js
@ -90,7 +90,7 @@ define(
            var dialogService = this.dialogService;
            var rootScope = this.$rootScope;
            rootScope.newEntryText = '';
-            // Create the overlay element and add it to the document's body
+            // // Create the overlay element and add it to the document's body
            this.$rootScope.selObj = domainObj;
            this.$rootScope.selValue = "";
            var newScope = rootScope.$new();
@ -187,7 +187,7 @@ define(
            var domainObject = context.domainObject;
            if (domainObject) {
-                if (domainObject.getModel().type === 'Notebook') {
+                if (domainObject.getModel().type === 'notebook') {
                    // do not allow in context of a notebook
                    return false;
                } else if (domainObject.getModel().type.includes('imagery')) {
--- a/src/plugins/notebook/src/actions/snapshotAction.js
+++ b/src/plugins/notebook/src/actions/snapshotAction.js
@ -0,0 +1,130 @@
 /*****************************************************************************
 * Open MCT, Copyright (c) 2014-2018, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT is licensed under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations
 * under the License.
 *
 * Open MCT includes source code licensed under additional open source
 * licenses. See the Open Source Licenses file (LICENSES.md) included with
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
 define(
    ['zepto'],
    function ($) {
        function SnapshotAction (exportImageService, dialogService, context) {
            this.exportImageService = exportImageService;
            this.dialogService = dialogService;
            this.domainObject = context.domainObject;
        }
        SnapshotAction.prototype.perform = function () {
            var elementToSnapshot =
                $(document.body).find(".overlay .object-holder")[0] ||
                $(document.body).find("[key='representation.selected.key']")[0];
            $(elementToSnapshot).addClass("s-status-taking-snapshot");
            this.exportImageService.exportPNGtoSRC(elementToSnapshot).then(function (blob) {
                $(elementToSnapshot).removeClass("s-status-taking-snapshot");
                if (blob) {
                    var reader = new window.FileReader();
                    reader.readAsDataURL(blob);
                    reader.onloadend = function () {
                        this.saveSnapshot(reader.result, blob.type, blob.size);
                    }.bind(this);
                }
            }.bind(this));
        };
        SnapshotAction.prototype.saveSnapshot = function (imageURL, imageType, imageSize) {
            var taskForm = this.generateTaskForm(),
                domainObject = this.domainObject,
                domainObjectId = domainObject.getId(),
                cssClass = domainObject.getCapability('type').typeDef.cssClass,
                name = domainObject.model.name;
            this.dialogService.getDialogResponse(
                'overlay-dialog',
                taskForm,
                function () {
                    return taskForm.value;
                }
            ).then(function (options) {
                var snapshotObject = {
                    src: imageURL,
                    type: imageType,
                    size: imageSize
                };
                options.notebook.useCapability('mutation', function (model) {
                    var date = Date.now();
                    model.entries.push({
                        id: 'entry-' + date,
                        createdOn: date,
                        text: options.entry,
                        embeds: [{
                            name: name,
                            cssClass: cssClass,
                            type: domainObjectId,
                            id: 'embed-' + date,
                            createdOn: date,
                            snapshot: snapshotObject
                        }]
                    });
                });
            });
        };
        SnapshotAction.prototype.generateTaskForm = function () {
            var taskForm = {
                name: "Create a Notebook Entry",
                hint: "Please select a Notebook",
                sections: [{
                    rows: [{
                        name: 'Entry',
                        key: 'entry',
                        control: 'textarea',
                        required: false,
                        "cssClass": "l-textarea-sm"
                    },
                    {
                        name: 'Save in Notebook',
                        key: 'notebook',
                        control: 'locator',
                        validate: validateLocation
                    }]
                }]
            };
            var overlayModel = {
                title: taskForm.name,
                message: 'AHAHAH',
                structure: taskForm,
                value: {'entry': ""}
            };
            function validateLocation(newParentObj) {
                return newParentObj.model.type === 'notebook';
            }
            return overlayModel;
        };
        return SnapshotAction;
    }
 );
--- a/src/plugins/notebook/src/controllers/EmbedController.js
+++ b/src/plugins/notebook/src/controllers/EmbedController.js
@ -0,0 +1,198 @@
 /*****************************************************************************
 * Open MCT, Copyright (c) 2014-2018, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT is licensed under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations
 * under the License.
 *
 * Open MCT includes source code licensed under additional open source
 * licenses. See the Open Source Licenses file (LICENSES.md) included with
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
 define([
    'moment',
    'zepto',
    '../utils/SnapshotOverlay',
 ],
 function (
    Moment,
    $,
    SnapshotOverlay
 ) {
    function EmbedController (openmct, domainObject) {
        this.openmct = openmct;
        this.domainObject = domainObject;
        this.objectService = openmct.$injector.get('objectService');
        this.navigationService = openmct.$injector.get('navigationService');
        this.popupService = openmct.$injector.get('popupService');
        this.agentService = openmct.$injector.get('agentService');
        this.dialogService = openmct.$injector.get('dialogService');
        this.navigate = this.navigate.bind(this);
        this.exposedData = this.exposedData.bind(this);
        this.exposedMethods = this.exposedMethods.bind(this);
        this.toggleActionMenu = this.toggleActionMenu.bind(this);
    }
    EmbedController.prototype.navigate = function (embedType) {
        this.objectService.getObjects([embedType]).then(function (objects) {
            this.navigationService.setNavigation(objects[embedType]);   
        }.bind(this));
    };
    EmbedController.prototype.openSnapshot = function () {
        if (!this.snapshotOverlay) {
            this.snapShotOverlay = new SnapshotOverlay(this.embed, this.formatTime);
        } else {
            this.snapShotOverlay = undefined;
        }
    };
    EmbedController.prototype.formatTime = function (unixTime, timeFormat) {
        return Moment(unixTime).format(timeFormat);
    };
    EmbedController.prototype.findInArray = function (array, id) {
        var foundId = -1;
        array.forEach(function (element, index) {
            if (element.id === id) {
                foundId = index;
                return;
            }
        });
        return foundId;
    };
    EmbedController.prototype.actionToMenuDecorator = function (action) {
        return {
            name: action.getMetadata().name,
            cssClass: action.getMetadata().cssClass,
            perform: action.perform
        };
    };
    EmbedController.prototype.populateActionMenu = function (objectService, actionService) {
        return function () {
            var self = this;
            objectService.getObjects([self.embed.type]).then(function (resp) {
                var domainObject = resp[self.embed.type],
                    previewAction = actionService.getActions({key: 'mct-preview-action', domainObject: domainObject})[0];
                self.actions.push(self.actionToMenuDecorator(previewAction));
            });
        };
    };
    EmbedController.prototype.removeEmbedAction = function () {
        var self = this;
        return {
            name: 'Remove Embed',
            cssClass: 'icon-trash',
            perform: function (embed, entry) {
                var entryPosition = self.findInArray(self.domainObject.entries, entry.id),
                    embedPosition = self.findInArray(entry.embeds, embed.id);
                var warningDialog = self.dialogService.showBlockingMessage({
                    severity: "error",
                    title: "This action will permanently delete this embed. Do you wish to continue?",
                    options: [{
                        label: "OK",
                        callback: function () {
                            entry.embeds.splice(embedPosition, 1);
                            var dirString = 'entries[' + entryPosition + '].embeds';
                            self.openmct.objects.mutate(self.domainObject, dirString, entry.embeds);
                            warningDialog.dismiss();
                        }
                    },{
                        label: "Cancel",
                        callback: function () {
                            warningDialog.dismiss();
                        }
                    }]
                });
            }
        };
    };
    EmbedController.prototype.toggleActionMenu = function (event) {
        event.preventDefault();
        var body = $(document.body),
            container = $(event.target.parentElement.parentElement),
            initiatingEvent = this.agentService.isMobile() ?
                'touchstart' : 'mousedown',
            menu = container.find('.menu-element'),
            dismissExistingMenu;
        // Remove the context menu
        function dismiss() {
            container.find('.hide-menu').append(menu);
            body.off(initiatingEvent, dismiss);
            menu.off(initiatingEvent, menuClickHandler);
            dismissExistingMenu = undefined;
        }
        function menuClickHandler(e) {
            e.stopPropagation();
            window.setTimeout(dismiss, 300);
        }
        // Dismiss any menu which was already showing
        if (dismissExistingMenu) {
            dismissExistingMenu();
        }
        // ...and record the presence of this menu.
        dismissExistingMenu = dismiss;
        this.popupService.display(menu, [event.pageX,event.pageY], {
            marginX: 0,
            marginY: -50
        });
        // Stop propagation so that clicks or touches on the menu do not close the menu
        menu.on(initiatingEvent, menuClickHandler);
        body.on(initiatingEvent, dismiss);
    };
    EmbedController.prototype.exposedData = function () {
        return {
            actions: [this.removeEmbedAction()],
            showActionMenu: false
        };
    };
    EmbedController.prototype.exposedMethods = function () {
        var self = this;
        return {
            navigate: self.navigate,
            openSnapshot: self.openSnapshot,
            formatTime: self.formatTime,
            toggleActionMenu: self.toggleActionMenu,
            actionToMenuDecorator: self.actionToMenuDecorator
        };
    };
    return EmbedController;
 });
--- a/src/plugins/notebook/src/controllers/EntryController.js
+++ b/src/plugins/notebook/src/controllers/EntryController.js
@ -0,0 +1,150 @@
 /*****************************************************************************
 * Open MCT, Copyright (c) 2014-2018, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT is licensed under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations
 * under the License.
 *
 * Open MCT includes source code licensed under additional open source
 * licenses. See the Open Source Licenses file (LICENSES.md) included with
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
 define([
    'moment'
 ],
 function (
    Moment
 ) {
    function EntryController (openmct, domainObject) {
        this.openmct = openmct;
        this.domainObject = domainObject;
        this.dndService = this.openmct.$injector.get('dndService');
        this.dialogService = this.openmct.$injector.get('dialogService');
        this.currentEntryValue = '';
        this.exposedMethods = this.exposedMethods.bind(this);
        this.exposedData = this.exposedData.bind(this);
    }
    EntryController.prototype.entryPosById = function (entryId) {
        var foundId = -1;
        this.domainObject.entries.forEach(function (element, index) {
            if (element.id === entryId) {
                foundId = index;
                return;
            }
        });
        return foundId;
    };
    EntryController.prototype.textFocus = function ($event) {
        if ($event.target) {
            this.currentEntryValue = $event.target.innerText;
        } else {
            $event.target.innerText = '';
        }
    };
    EntryController.prototype.textBlur = function ($event, entryId) {
        if ($event.target) {
            var entryPos = this.entryPosById(entryId);
            if (this.currentEntryValue !== $event.target.innerText) {
                this.openmct.objects.mutate(this.domainObject, 'entries[' + entryPos + '].text', $event.target.innerText);
            }
        }
    };
    EntryController.prototype.formatTime = function (unixTime, timeFormat) {
        return Moment(unixTime).format(timeFormat);
    };
    EntryController.prototype.deleteEntry = function () {
        var entryPos = this.entryPosById(this.entry.id),
            domainObject = this.domainObject,
            openmct = this.openmct;
        if (entryPos !== -1) {
            var errorDialog = this.dialogService.showBlockingMessage({
                severity: "error",
                title: "This action will permanently delete this Notebook entry. Do you wish to continue?",
                options: [{
                    label: "OK",
                    callback: function () {
                        domainObject.entries.splice(entryPos, 1);
                        openmct.objects.mutate(domainObject, 'entries', domainObject.entries);
                        errorDialog.dismiss();
                    }
                },{
                    label: "Cancel",
                    callback: function () {
                        errorDialog.dismiss();
                    }
                }]
            });
        }
    };
    EntryController.prototype.dropOnEntry = function (entryId) {
        var selectedObject = this.dndService.getData('mct-domain-object'),
            selectedObjectId = selectedObject.getId(),
            selectedModel = selectedObject.getModel(),
            cssClass = selectedObject.getCapability('type').typeDef.cssClass,
            entryPos = this.entryPosById(entryId),
            currentEntryEmbeds = this.domainObject.entries[entryPos].embeds,
            newEmbed = {
                type: selectedObjectId,
                id: '' + Date.now(),
                cssClass: cssClass,
                name: selectedModel.name,
                snapshot: ''
            };
        currentEntryEmbeds.push(newEmbed);
        this.openmct.objects.mutate(this.domainObject, 'entries[' + entryPos + '].embeds', currentEntryEmbeds);
    };
    EntryController.prototype.dragoverOnEntry = function () {
    };
    EntryController.prototype.exposedData = function () {
        return {
            openmct: this.openmct,
            domainObject: this.domainObject,
            dndService: this.dndService,
            dialogService: this.dialogService,
            currentEntryValue: this.currentEntryValue
        };
    };
    EntryController.prototype.exposedMethods = function () {
        return {
            entryPosById: this.entryPosById,
            textFocus: this.textFocus,
            textBlur: this.textBlur,
            formatTime: this.formatTime,
            deleteEntry: this.deleteEntry,
            dropOnEntry: this.dropOnEntry,
            dragoverOnEntry: this.dragoverOnEntry
        };
    };
    return EntryController;
 });
--- a/platform/features/notebook/src/controllers/NewEntryController.js
+++ b/platform/features/notebook/src/controllers/NewEntryController.js
@ -31,8 +31,7 @@ define(
            $scope.snapshot = undefined;
            $scope.snapToggle = true;
            $scope.entryText = '';
-            var annotateAction = $rootScope.selObj.getCapability('action').getActions(
+            var annotateAction = $rootScope.selObj.getCapability('action').getActions({key: 'annotate-snapshot'})[0];                                                                
                {category: 'embed'})[1];
            $scope.$parent.$parent.ngModel[$scope.$parent.$parent.field] = $rootScope.selObj;
            $scope.objectName = $rootScope.selObj.getModel().name;
--- a/src/plugins/notebook/src/controllers/NotebookController.js
+++ b/src/plugins/notebook/src/controllers/NotebookController.js
@ -0,0 +1,177 @@
 /*****************************************************************************
 * Open MCT, Copyright (c) 2014-2018, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT is licensed under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations
 * under the License.
 *
 * Open MCT includes source code licensed under additional open source
 * licenses. See the Open Source Licenses file (LICENSES.md) included with
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
 define([
    'vue',
    './EntryController',
    './EmbedController',
    '../../res/templates/notebook.html',
    '../../res/templates/entry.html',
    '../../res/templates/embed.html',
    '../../../../ui/components/controls/search.vue'
 ],
 function (
    Vue,
    EntryController,
    EmbedController,
    NotebookTemplate,
    EntryTemplate,
    EmbedTemplate,
    search
 ) {
    function NotebookController(openmct, domainObject) {
        this.openmct = openmct;
        this.domainObject = domainObject;
        this.entrySearch = '';
        this.objectService = openmct.$injector.get('objectService');
        this.actionService = openmct.$injector.get('actionService');
        this.show = this.show.bind(this);
        this.destroy = this.destroy.bind(this);
        this.newEntry = this.newEntry.bind(this);
        this.entryPosById = this.entryPosById.bind(this);
    }
    NotebookController.prototype.initializeVue = function (container) {
        var self = this,
            entryController = new EntryController(this.openmct, this.domainObject),
            embedController = new EmbedController(this.openmct, this.domainObject);
        this.container = container;
        var notebookEmbed = {
            props:['embed', 'entry'],
            template: EmbedTemplate,
            data: embedController.exposedData,
            methods: embedController.exposedMethods(),
            beforeMount: embedController.populateActionMenu(self.objectService, self.actionService)
        };
        var entryComponent = {
            props:['entry'],
            template: EntryTemplate,
            components: {
                'notebook-embed': notebookEmbed
            },
            data: entryController.exposedData,
            methods: entryController.exposedMethods(),
            mounted: self.focusOnEntry
        };
        var notebookVue = Vue.extend({
            template: NotebookTemplate,
            components: {
                'notebook-entry': entryComponent,
                'search': search.default
            },
            data: function () {
                return {
                    entrySearch: self.entrySearch,
                    showTime: '0',
                    sortEntries: '-createdOn',
                    entries: self.domainObject.entries,
                    currentEntryValue: ''
                };
            },
            methods: {
                search: function (event) {
                    if (event.target.value) {
                        this.entrySearch = event.target.value;
                    }
                },
                newEntry: self.newEntry,
                filterBySearch: self.filterBySearch
            }
        });
        this.NotebookVue =  new notebookVue();
        container.appendChild(this.NotebookVue.$mount().$el);
    };
    NotebookController.prototype.newEntry = function (event) {
        var entries = this.domainObject.entries,
            lastEntryIndex = entries.length - 1,
            lastEntry = entries[lastEntryIndex],
            date = Date.now();
        if (lastEntry === undefined || lastEntry.text || lastEntry.embeds.length) {
            var createdEntry = {'id': 'entry-' + date, 'createdOn': date, 'embeds':[]};
            entries.push(createdEntry);
            this.openmct.objects.mutate(this.domainObject, 'entries', entries);
        } else {
            lastEntry.createdOn = date;
            this.openmct.objects.mutate(this.domainObject, 'entries[entries.length-1]', lastEntry);
            this.focusOnEntry.bind(this.NotebookVue.$children[lastEntryIndex])();
        }
        this.entrySearch = '';
    };
    NotebookController.prototype.entryPosById = function (entryId) {
        var foundId = -1;
        this.domainObject.entries.forEach(function (element, index) {
            if (element.id === entryId) {
                foundId = index;
                return;
            }
        });
        return foundId;
    };
    NotebookController.prototype.focusOnEntry = function () {
        if (!this.entry.text) {
            this.$refs.contenteditable.focus();
        }
    };
    NotebookController.prototype.filterBySearch = function (entryArray, filterString) {
        if (filterString) {
            var lowerCaseFilterString = filterString.toLowerCase();
            return entryArray.filter(function (entry) {
                if (entry.text) {
                    return entry.text.toLowerCase().includes(lowerCaseFilterString);
                } else {
                    return false;
                }
            });
        } else {
            return entryArray;
        }
    };
    NotebookController.prototype.show = function (container) {
        this.initializeVue(container);
    };
    NotebookController.prototype.destroy = function (container) {
        this.NotebookVue.$destroy(true);
    };
    return NotebookController;
 });
--- a/platform/features/notebook/src/controllers/SelectSnapshotController.js
+++ b/platform/features/notebook/src/controllers/SelectSnapshotController.js
--- a/platform/features/notebook/src/directives/EntryDnd.js
+++ b/platform/features/notebook/src/directives/EntryDnd.js
@ -31,9 +31,11 @@ define(['zepto'], function ($) {
                var selectedModel = selectedObject.getModel();
                var cssClass = selectedObject.getCapability('type').typeDef.cssClass;
                var entryId = -1;
                var embedId = -1;
                $scope.clearSearch();
                if ($element[0].id === 'newEntry') {
                    entryId = $scope.domainObject.model.entries.length;
                    embedId = 0;
                    var lastEntry = $scope.domainObject.model.entries[entryId - 1];
                    if (lastEntry === undefined || lastEntry.text || lastEntry.embeds) {
                        $scope.domainObject.useCapability('mutation', function (model) {
@ -82,6 +84,8 @@ define(['zepto'], function ($) {
                                                                        });
                    });
                    embedId = $scope.domainObject.model.entries[entryId].embeds.length - 1;
                    if (selectedObject) {
                        e.preventDefault();
--- a/platform/features/notebook/src/directives/MCTSnapshot.js
+++ b/platform/features/notebook/src/directives/MCTSnapshot.js
--- a/platform/features/notebook/src/controllers/LayoutNotebookController.js
+++ b/platform/features/notebook/src/controllers/LayoutNotebookController.js
@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2017, United States Government
+ * Open MCT, Copyright (c) 2014-2018, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
@ -20,35 +20,47 @@
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
 /**
 * This bundle implements object types and associated views for
 * display-building.
 */
 define(
    [],
    function () {
-        /**
+define([
-         * The LayoutNotebookController is responsible for supporting the
+    'vue',
-         * notebook feature creation on theLayout view.
+    '../../res/templates/viewSnapshot.html'
-         **/
+], function (
    Vue,
    snapshotOverlayTemplate
 ) {
    function SnapshotOverlay (embedObject, formatTime) {
        this.embedObject = embedObject;
-        function LayoutNotebookController($scope) {
+        this.snapshotOverlayVue = new Vue({
-            $scope.hasNotebookAction = undefined;
+            template: snapshotOverlayTemplate,
-
+            data: function () {
-            $scope.newNotebook = undefined;
+                return {
-
+                    embed: embedObject
            var actions = $scope.domainObject.getCapability('action');
            var notebookAction = actions.getActions({'key': 'notebook-new-entry'});
            if (notebookAction.length > 0) {
                $scope.hasNotebookAction = true;
                $scope.newNotebook = function () {
                    notebookAction[0].perform();
                };
            },
            methods: {
                close: this.close.bind(this),
                formatTime: formatTime
            }
        });
        this.open();
    }
-        return LayoutNotebookController;
+    SnapshotOverlay.prototype.open = function () {
-    }
+        this.overlay = document.createElement('div');
-);
+        this.overlay.classList.add('abs');
        document.body.appendChild(this.overlay);
        this.overlay.appendChild(this.snapshotOverlayVue.$mount().$el);
    };
    SnapshotOverlay.prototype.close = function (event) {
        event.stopPropagation();
        this.snapshotOverlayVue.$destroy();
        this.overlay.parentNode.removeChild(this.overlay);
    };
    return SnapshotOverlay;
 });
--- a/src/plugins/plugins.js
+++ b/src/plugins/plugins.js
@ -27,14 +27,15 @@ define([
    './autoflow/AutoflowTabularPlugin',
    './timeConductor/plugin',
    '../../example/imagery/plugin',
    '../../platform/features/notebook/bundle',
    '../../platform/import-export/bundle',
    './summaryWidget/plugin',
    './URLIndicatorPlugin/URLIndicatorPlugin',
    './telemetryMean/plugin',
    './plot/plugin',
    './telemetryTable/plugin',
-    './staticRootPlugin/plugin'
+    './staticRootPlugin/plugin',
    './notebook/plugin',
    './displayLayout/plugin'
 ], function (
    _,
    UTCTimeSystem,
@ -42,19 +43,19 @@ define([
    AutoflowPlugin,
    TimeConductorPlugin,
    ExampleImagery,
    Notebook,
    ImportExport,
    SummaryWidget,
    URLIndicatorPlugin,
    TelemetryMean,
    PlotPlugin,
    TelemetryTablePlugin,
-    StaticRootPlugin
+    StaticRootPlugin,
    Notebook,
    DisplayLayoutPlugin
 ) {
    var bundleMap = {
        LocalStorage: 'platform/persistence/local',
-        MyItems: 'platform/features/my-items',
+        MyItems: 'platform/features/my-items'
        Notebook: 'platform/features/notebook'
    };
    var plugins = _.mapValues(bundleMap, function (bundleName, pluginName) {
@ -159,6 +160,8 @@ define([
    plugins.SummaryWidget = SummaryWidget;
    plugins.TelemetryMean = TelemetryMean;
    plugins.URLIndicator = URLIndicatorPlugin;
    plugins.Notebook = Notebook;
    plugins.DisplayLayout = DisplayLayoutPlugin.default;
    return plugins;
 });
--- a/src/plugins/summaryWidget/src/views/SummaryWidgetViewProvider.js
+++ b/src/plugins/summaryWidget/src/views/SummaryWidgetViewProvider.js
@ -15,7 +15,8 @@ define([
    function SummaryWidgetViewProvider(openmct) {
        return {
            key: 'summary-widget-viewer',
-            name: 'Widget View',
+            name: 'Summary View',
            cssClass: 'icon-summary-widget',
            canView: function (domainObject) {
                return domainObject.type === 'summary-widget';
            },
--- a/src/plugins/telemetryTable/inspectorView/TableConfigurationViewProvider.js
+++ b/src/plugins/telemetryTable/inspectorView/TableConfigurationViewProvider.js
@ -21,12 +21,17 @@
 *****************************************************************************/
 define([
-    '../../../api/objects/object-utils',
+    '../../api/objects/object-utils',
-    './TableConfigurationComponent'
+    './components/table-configuration.vue',
    './TelemetryTableConfiguration',
    'vue'
 ], function (
    objectUtils,
-    TableConfigurationComponent
+    TableConfigurationComponent,
    TelemetryTableConfiguration,
    Vue
 ) {
    function TableConfigurationViewProvider(openmct) {
        let instantiateService;
@ -51,33 +56,44 @@ define([
            return instantiateService(model, id);
        }
        return {
            key: 'table-configuration',
            name: 'Telemetry Table Configuration',
            canView: function (selection) {
                if (selection.length === 0) {
                    return false;
                }
                let object = selection[0].context.item;
-                
+                return object.type === 'table' &&
                return selection.length > 0 &&
                    object.type === 'table' && 
                    isBeingEdited(object);
            },
            view: function (selection) {
                let component;
                let domainObject = selection[0].context.item;
                const tableConfiguration = new TelemetryTableConfiguration(domainObject, openmct);
                return {
                    show: function (element) {
-                        component = TableConfigurationComponent(domainObject, openmct);
+                        component = new Vue({
-                        element.appendChild(component.$mount().$el);
+                            provide: {
                                openmct,
                                tableConfiguration
                            },
                            components: {
                                TableConfiguration: TableConfigurationComponent.default
                            },
                            template: '<table-configuration></table-configuration>',
                            el: element
                        });
                    },
                    destroy: function (element) {
                        component.$destroy();
                        element.removeChild(component.$el);
                        component = undefined;
                    }
                }
            },
            priority: function () {
-                return 0;
+                return 1;
            }
        }
    }
--- a/src/plugins/telemetryTable/TelemetryTable.js
+++ b/src/plugins/telemetryTable/TelemetryTable.js
@ -36,12 +36,12 @@ define([
    TelemetryTableConfiguration
 ) {
    class TelemetryTable extends EventEmitter {
-        constructor(domainObject, rowCount, openmct) {
+        constructor(domainObject, openmct) {
            super();
            this.domainObject = domainObject;
            this.openmct = openmct;
-            this.rowCount = rowCount;
+            this.rowCount = 100;
            this.subscriptions = {};
            this.tableComposition = undefined;
            this.telemetryObjects = [];
@ -122,6 +122,7 @@ define([
                    let telemetryRows = telemetryData.map(datum => new TelemetryTableRow(datum, columnMap, keyString, limitEvaluator));
                    this.boundedRows.add(telemetryRows);
                    console.log('Loaded %i rows', telemetryRows.length);
                    this.decrementOutstandingRequests();
                });
        }
--- a/src/plugins/telemetryTable/TelemetryTableRow.js
+++ b/src/plugins/telemetryTable/TelemetryTableRow.js
@ -30,10 +30,9 @@ define([], function () {
            this.objectKeyString = objectKeyString;
        }
-        getFormattedDatum() {
+        getFormattedDatum(headers) {
-            return Object.values(this.columns)
+            return Object.keys(headers).reduce((formattedDatum, columnKey) => {
-                .reduce((formattedDatum, column) => {
+                formattedDatum[columnKey] = this.getFormattedValue(columnKey);
                    formattedDatum[column.getKey()] = this.getFormattedValue(column.getKey());
                return formattedDatum;
            }, {});
        }
--- a/src/plugins/telemetryTable/objectView/TelemetryTableViewProvider.js
+++ b/src/plugins/telemetryTable/objectView/TelemetryTableViewProvider.js
@ -20,11 +20,22 @@
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
-define(['./TelemetryTableComponent'], function (TelemetryTableComponent) {
+define([
    './components/table.vue',
    '../../exporters/CSVExporter',
    './TelemetryTable',
    'vue'
 ], function (
    TableComponent,
    CSVExporter,
    TelemetryTable,
    Vue
 ) {
    function TelemetryTableViewProvider(openmct) {
        return {
            key: 'table',
            name: 'Telemetry Table',
            cssClass: 'icon-tabular-realtime',
            editable: function(domainObject) {
                return domainObject.type === 'table';
            },
@ -32,21 +43,32 @@ define(['./TelemetryTableComponent'], function (TelemetryTableComponent) {
                return domainObject.type === 'table' || domainObject.hasOwnProperty('telemetry');
            },
            view: function (domainObject) {
                let csvExporter = new CSVExporter.default();
                let table = new TelemetryTable(domainObject, openmct);
                let component;
                return {
                    show: function (element) {
-                        component = new TelemetryTableComponent(domainObject, openmct);
+                        component = new Vue({
-                        element.appendChild(component.$mount().$el);
+                            components: {
                                TableComponent: TableComponent.default,
                            },
                            provide: {
                                openmct,
                                csvExporter,
                                table
                            },
                            el: element,
                            template: '<table-component></table-component>'
                        });
                    },
                    destroy: function (element) {
                        component.$destroy();
                        element.removeChild(component.$el);
                        component = undefined;
                    }
                }
            },
            priority: function () {
-                return Number.MAX_SAFE_INTEGER;
+                return 1;
            }
        }
    }
--- a/src/plugins/telemetryTable/collections/SortedTableRowCollection.js
+++ b/src/plugins/telemetryTable/collections/SortedTableRowCollection.js
@ -82,8 +82,7 @@ define(
                // Going to check for duplicates. Bound the search problem to
                // items around the given time. Use sortedIndex because it
                // employs a binary search which is O(log n). Can use binary search
-                // based on time stamp because the array is guaranteed ordered due
+                // because the array is guaranteed ordered due to sorted insertion.
                // to sorted insertion.
                let startIx = this.sortedIndex(this.rows, row);
                let endIx = undefined;
@ -113,15 +112,37 @@ define(
             * @private
             */
            sortedIndex(rows, testRow, lodashFunction) {
                if (this.rows.length === 0) {
                    return 0;
                }
                const sortOptionsKey = this.sortOptions.key;
                const testRowValue = testRow.datum[sortOptionsKey];
                const firstValue = this.rows[0].datum[sortOptionsKey];
                const lastValue = this.rows[this.rows.length - 1].datum[sortOptionsKey];
                lodashFunction = lodashFunction || _.sortedIndex;
                if (this.sortOptions.direction === 'asc') {
                    if (testRowValue > lastValue) {
                        return this.rows.length;
                    } else if (testRowValue === lastValue) {
                        return this.rows.length - 1;
                    } else if (testRowValue <= firstValue) {
                        return 0;
                    } else {
                        return lodashFunction(rows, testRow, (thisRow) => {
                            return thisRow.datum[sortOptionsKey];
                        });
                    }
                } else {
                    if (testRowValue >= firstValue) {
                        return 0;
                    } else if (testRowValue < lastValue) {
                        return this.rows.length;
                    } else if (testRowValue === lastValue) {
                        return this.rows.length - 1;
                    } else {
                    const testRowValue = testRow.datum[this.sortOptions.key];
                        // Use a custom comparison function to support descending sort.
                        return lodashFunction(rows, testRow, (thisRow) => {
                            const thisRowValue = thisRow.datum[sortOptionsKey];
@ -135,6 +156,7 @@ define(
                        });
                    }
                }
            }
            /**
             * Sorts the telemetry collection based on the provided sort field
--- a/src/plugins/telemetryTable/components/table-configuration.vue
+++ b/src/plugins/telemetryTable/components/table-configuration.vue
@ -0,0 +1,68 @@
 <template>
 <div class="grid-properties">
    <!--form class="form" -->
        <ul class="l-inspector-part">
            <h2>Table Columns</h2>
            <li class="grid-row" v-for="(title, key) in headers">
                <div class="grid-cell label" title="Show or Hide Column"><label :for="key + 'ColumnControl'">{{title}}</label></div>
                <div class="grid-cell value"><input type="checkbox" :id="key + 'ColumnControl'" :checked="configuration.hiddenColumns[key] !== true" @change="toggleColumn(key)"></div>
            </li>
        </ul>
    <!--/form -->
 </div>
 </template>
 <style>
 </style>
 <script>
 export default {
    inject: ['tableConfiguration', 'openmct'],
    data() {
        return {
            headers: {},
            configuration: this.tableConfiguration.getConfiguration()
        }
    },
    methods: {
        updateHeaders(headers) {
            this.headers = headers;
        },
        toggleColumn(key) {
            let isHidden = this.configuration.hiddenColumns[key] === true;
            this.configuration.hiddenColumns[key] = !isHidden;
            this.tableConfiguration.updateConfiguration(this.configuration);
        },
        addObject(domainObject) {
            this.tableConfiguration.addColumnsForObject(domainObject, true);
            this.updateHeaders(this.tableConfiguration.getAllHeaders());
        },
        removeObject(objectIdentifier) {
            this.tableConfiguration.removeColumnsForObject(objectIdentifier, true);
            this.updateHeaders(this.tableConfiguration.getAllHeaders());
        }
    },
    mounted() {
        this.unlisteners = [];
        let compositionCollection = this.openmct.composition.get(this.tableConfiguration.domainObject);
        compositionCollection.load()
            .then((composition) => {
                this.tableConfiguration.addColumnsForAllObjects(composition);
                this.updateHeaders(this.tableConfiguration.getAllHeaders());
                compositionCollection.on('add', this.addObject);
                this.unlisteners.push(compositionCollection.off.bind(compositionCollection, 'add', this.addObject));
                compositionCollection.on('remove', this.removeObject);
                this.unlisteners.push(compositionCollection.off.bind(compositionCollection, 'remove', this.removeObject));
            });
    },
    destroyed() {
        this.tableConfiguration.destroy();
        this.unlisteners.forEach((unlisten) => unlisten());
    }
 }
 </script>
--- a/src/plugins/telemetryTable/components/table-row.vue
+++ b/src/plugins/telemetryTable/components/table-row.vue
@ -0,0 +1,76 @@
 <template>
 <tr :style="{ top: rowTop }" :class="rowLimitClass">
    <td v-for="(title, key, headerIndex) in headers"
        :style="{ width: columnWidths[headerIndex], 'max-width': columnWidths[headerIndex]}"
        :title="formattedRow[key]"
        :class="cellLimitClasses[key]">{{formattedRow[key]}}</td>
 </tr>
 </template>
 <style>
 </style>
 <script>
 export default {
    data: function () {
        return {
            rowTop: (this.rowOffset + this.rowIndex) * this.rowHeight + 'px',
            formattedRow: this.row.getFormattedDatum(this.headers),
            rowLimitClass: this.row.getRowLimitClass(),
            cellLimitClasses: this.row.getCellLimitClasses()
        }
    },
    props: {
        headers: {
            type: Object,
            required: true
        },
        row: {
            type: Object,
            required: true
        },
        columnWidths: {
            type: Array,
            required: false,
            default: [],
        },
        rowIndex: {
            type: Number,
            required: false,
            default: undefined
        },
        rowOffset: {
            type: Number,
            required: false,
            default: 0
        },
        rowHeight: {
            type: Number,
            required: false,
            default: 0
        },
        configuration: {
            type: Object,
            required: true
        }
    },
    methods: {
        calculateRowTop: function (rowOffset) {
            this.rowTop = (rowOffset + this.rowIndex) * this.rowHeight + 'px';
        },
        formatRow: function (row) {
            this.formattedRow = row.getFormattedDatum(this.headers);
            this.rowLimitClass = row.getRowLimitClass();
            this.cellLimitClasses = row.getCellLimitClasses();
        }
    },
    // TODO: use computed properties
    watch: {
        rowOffset: 'calculateRowTop',
        row: {
            handler: 'formatRow',
            deep: false
        }
    }
 }
 </script>
--- a/src/plugins/telemetryTable/components/table.vue
+++ b/src/plugins/telemetryTable/components/table.vue
@ -0,0 +1,543 @@
 <template>
 <div class="c-table c-telemetry-table c-table--filterable c-table--sortable has-control-bar"
     :class="{'loading': loading}">
    <div class="c-table__control-bar c-control-bar">
        <a class="s-button t-export icon-download labeled"
           v-on:click="exportAsCSV()"
           title="Export This View's Data">
            Export As CSV
        </a>
    </div>
    <!-- Headers table -->
    <div class="c-table__headers-w js-table__headers-w">
        <table class="c-table__headers c-telemetry-table__headers"
               :style="{ 'max-width': totalWidth + 'px'}">
            <thead>
                <tr>
                    <th v-for="(title, key, headerIndex) in headers"
                        v-on:click="sortBy(key)"
                        :class="['is-sortable', sortOptions.key === key ? 'is-sorting' : '', sortOptions.direction].join(' ')"
                        :style="{ width: columnWidths[headerIndex], 'max-width': columnWidths[headerIndex]}">{{title}}</th>
                </tr>
                <tr>
                    <th v-for="(title, key, headerIndex) in headers"
                        :style="{
                            width: columnWidths[headerIndex],
                            'max-width': columnWidths[headerIndex],
                        }">
                        <search class="c-table__search"
                            v-model="filters[key]"
                            v-on:input="filterChanged(key)"
                            v-on:clear="clearFilter(key)" />
                    </th>
                </tr>
            </thead>
        </table>
    </div>
    <!-- Content table -->
    <div class="c-table__body-w c-telemetry-table__body-w js-telemetry-table__body-w" @scroll="scroll">
        <div class="c-telemetry-table__scroll-forcer" :style="{ width: totalWidth }"></div>
        <table class="c-table__body c-telemetry-table__body"
               :style="{ height: totalHeight + 'px', 'max-width': totalWidth + 'px'}">
            <tbody>
                <telemetry-table-row v-for="(row, rowIndex) in visibleRows"
                    :headers="headers"
                    :columnWidths="columnWidths"
                    :rowIndex="rowIndex"
                    :rowOffset="rowOffset"
                    :rowHeight="rowHeight"
                    :row="row"
                    >
                </telemetry-table-row>
            </tbody>
        </table>
    </div>
    <!-- Sizing table -->
    <table class="c-telemetry-table__sizing js-telemetry-table__sizing"
           :style="{width: calcTableWidth}">
        <tr>
            <th v-for="(title, key, headerIndex) in headers">{{title}}</th>
        </tr>
        <telemetry-table-row v-for="(sizingRowData, objectKeyString) in sizingRows"
            :headers="headers"
            :row="sizingRowData">
        </telemetry-table-row>
    </table>
 </div>
 </template>
 <style lang="scss">
    @import "~styles/sass-base";
    .c-table {
        // Can be used by any type of table, scrolling, LAD, etc.
        $min-w: 50px;
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
        overflow: hidden;
        position: absolute;
        top: 0; right: 0; bottom: 0; left: 0;
        &__control-bar,
        &__headers-w {
            // Don't allow top level elements to grow or shrink
            flex: 0 0 auto;
        }
        /******************************* ELEMENTS */
        th, td {
            display: block;
            flex: 1 0 auto;
            font-size: 0.7rem; // TEMP LEGACY TODO: refactor this when __main-container font-size is dealt with
            white-space: nowrap;
            min-width: $min-w;
            padding: $tabularTdPadTB $tabularTdPadLR;
            vertical-align: middle; // This is crucial to hiding f**king 4px height injected by browser by default
        }
        td {
            color: $colorTelemFresh;
            vertical-align: top;
        }
        &__control-bar {
            margin-bottom: $interiorMarginSm;
        }
        /******************************* WRAPPERS */
        &__headers-w {
            // Wraps __headers table
            background: $colorTabHeaderBg;
            overflow: hidden;
        }
        /******************************* TABLES */
        &__headers,
        &__body {
            tr {
                display: flex;
                align-items: stretch;
            }
        }
        &__headers {
            // A table
            thead {
                display: block;
            }
            th {
                &:not(:first-child) {
                    border-left: 1px solid $colorTabHeaderBorder;
                }
            }
        }
        &__body {
            // A table
            tr {
                &:not(:first-child) {
                    border-top: 1px solid $colorTabBorder;
                }
            }
        }
        /******************************* MODIFIERS */
        &--filterable {
            // TODO: discuss using the search.vue custom control here
            .l-filter {
                input[type="text"],
                input[type="search"] {
                    $p: 20px;
                    transition: padding 200ms ease-in-out;
                    box-sizing: border-box;
                    padding-right: $p; // Fend off from icon
                    padding-left: $p; // Fend off from icon
                    width: 100%;
                }
                &.active {
                    // When user has typed something, hide the icon and collapse left padding
                    &:before {
                        opacity: 0;
                    }
                    input[type="text"],
                    input[type="search"] {
                        padding-left: $interiorMargin;
                    }
                }
            }
        }
        &--sortable {
            .is-sorting {
                &:after {
                    color: $colorIconLink;
                    content: $glyph-icon-arrow-tall-up;
                    font-family: symbolsfont;
                    font-size: 8px;
                    display: inline-block;
                    margin-left: $interiorMarginSm;
                }
                &.desc:after {
                    content: $glyph-icon-arrow-tall-down;
                }
            }
            .is-sortable {
                cursor: pointer;
            }
        }
    }
    .c-telemetry-table {
        // Table that displays telemetry in a scrolling body area
        /******************************* ELEMENTS */
        &__scroll-forcer {
            // Force horz scroll when needed; width set via JS
            font-size: 0;
            height: 1px; // Height 0 won't force scroll properly
            position: relative;
        }
        /******************************* WRAPPERS */
        &__body-w {
            // Wraps __body table provides scrolling
            flex: 1 1 100%;
            overflow-x: auto;
            overflow-y: scroll;
        }
        /******************************* TABLES */
        &__body {
            // A table
            flex: 1 1 100%;
            overflow-x: auto;
            tr {
                display: flex; // flex-flow defaults to row nowrap (which is what we want) so no need to define
                align-items: stretch;
                position: absolute;
                height: 18px; // Needed when a row has empty values in its cells
            }
            td {
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
        &__sizing {
            // A table
            display: table;
            z-index: -1;
            visibility: hidden;
            pointer-events: none;
            position: absolute;
            //Add some padding to allow for decorations such as limits indicator
            tr {
                display: table-row;
            }
            th, td {
                display: table-cell;
                padding-right: 10px;
                padding-left: 10px;
                white-space: nowrap;
            }
        }
    }
    .c-table__control-bar {
        margin-bottom: $interiorMarginSm;
    }
    /******************************* LEGACY */
    .s-status-taking-snapshot,
    .overlay.snapshot {
        // Handle overflow-y issues with tables and html2canvas
        // Replaces .l-sticky-headers .l-tabular-body { overflow: auto; }
        .c-table__body-w { overflow: auto; }
    }
 </style>
 <script>
 import TelemetryTableRow from './table-row.vue';
 import search from '../../../ui/components/controls/search.vue';
 import _ from 'lodash';
 const VISIBLE_ROW_COUNT = 100;
 const ROW_HEIGHT = 17;
 const RESIZE_POLL_INTERVAL = 200;
 const AUTO_SCROLL_TRIGGER_HEIGHT = 20;
 export default {
    components: {
        TelemetryTableRow,
        search
    },
    inject: ['table', 'openmct', 'csvExporter'],
    props: ['configuration'],
    data() {
        return {
            headers: {},
            visibleRows: [],
            columnWidths: [],
            sizingRows: {},
            rowHeight: ROW_HEIGHT,
            scrollOffset: 0,
            totalHeight: 0,
            totalWidth: 0,
            rowOffset: 0,
            autoScroll: true,
            sortOptions: {},
            filters: {},
            loading: false,
            scrollable: undefined,
            tableEl: undefined,
            headersHolderEl: undefined,
            calcTableWidth: '100%',
            processingScroll: false,
            updatingView: false
        }
    },
    methods: {
        updateVisibleRows() {
            let start = 0;
            let end = VISIBLE_ROW_COUNT;
            let filteredRows = this.table.filteredRows.getRows();
            let filteredRowsLength = filteredRows.length;
            this.totalHeight = this.rowHeight * filteredRowsLength - 1;
            if (filteredRowsLength < VISIBLE_ROW_COUNT) {
                end = filteredRowsLength;
            } else {
                let firstVisible = this.calculateFirstVisibleRow();
                let lastVisible = this.calculateLastVisibleRow();
                let totalVisible = lastVisible - firstVisible;
                let numberOffscreen = VISIBLE_ROW_COUNT - totalVisible;
                start = firstVisible - Math.floor(numberOffscreen / 2);
                end = lastVisible + Math.ceil(numberOffscreen / 2);
                if (start < 0) {
                    start = 0;
                    end = Math.min(VISIBLE_ROW_COUNT, filteredRowsLength);
                } else if (end >= filteredRowsLength) {
                    end = filteredRowsLength;
                    start = end - VISIBLE_ROW_COUNT + 1;
                }
            }
            this.rowOffset = start;
            this.visibleRows = filteredRows.slice(start, end);
        },
        calculateFirstVisibleRow() {
            return Math.floor(this.scrollable.scrollTop / this.rowHeight);
        },
        calculateLastVisibleRow() {
            let bottomScroll = this.scrollable.scrollTop + this.scrollable.offsetHeight;
            return Math.floor(bottomScroll / this.rowHeight);
        },
        updateHeaders() {
            let headers = this.table.configuration.getVisibleHeaders();
            this.headers = headers;
            this.$nextTick().then(this.calculateColumnWidths);
        },
        setSizingTableWidth() {
            let scrollW = this.scrollable.offsetWidth - this.scrollable.clientWidth;
            if (scrollW && scrollW > 0) {
                this.calcTableWidth = 'calc(100% - ' + scrollW + 'px)';
            }
        },
        calculateColumnWidths() {
            let columnWidths = [];
            let totalWidth = 0;
            let sizingRowEl = this.sizingTable.children[0];
            let sizingCells = Array.from(sizingRowEl.children);
            sizingCells.forEach((cell) => {
                let columnWidth = cell.offsetWidth;
                columnWidths.push(columnWidth + 'px');
                totalWidth += columnWidth;
            });
            this.columnWidths = columnWidths;
            this.totalWidth = totalWidth;
        },
        sortBy(columnKey) {
            // If sorting by the same column, flip the sort direction.
            if (this.sortOptions.key === columnKey) {
                if (this.sortOptions.direction === 'asc') {
                    this.sortOptions.direction = 'desc';
                } else {
                    this.sortOptions.direction = 'asc';
                }
            } else {
                this.sortOptions = {
                    key: columnKey,
                    direction: 'asc'
                }
            }
            this.table.filteredRows.sortBy(this.sortOptions);
        },
        scroll() {
            if (!this.processingScroll) {
                this.processingScroll = true;
                requestAnimationFrame(()=> {
                    this.updateVisibleRows();
                    this.synchronizeScrollX();
                    if (this.shouldSnapToBottom()) {
                        this.autoScroll = true;
                    } else {
                        // If user scrolls away from bottom, disable auto-scroll.
                        // Auto-scroll will be re-enabled if user scrolls to bottom again.
                        this.autoScroll = false;
                    }
                    this.processingScroll = false;
                });
            }
        },
        shouldSnapToBottom() {
            return this.scrollable.scrollTop >= (this.scrollable.scrollHeight - this.scrollable.offsetHeight - AUTO_SCROLL_TRIGGER_HEIGHT);
        },
        scrollToBottom() {
            this.scrollable.scrollTop = this.scrollable.scrollHeight;
        },
        synchronizeScrollX() {
            this.headersHolderEl.scrollLeft = this.scrollable.scrollLeft;
        },
        filterChanged(columnKey) {
            this.table.filteredRows.setColumnFilter(columnKey, this.filters[columnKey]);
        },
        clearFilter(columnKey) {
            this.filters[columnKey] = '';
            this.table.filteredRows.setColumnFilter(columnKey, '');
        },
        rowsAdded(rows) {
            let sizingRow;
            if (Array.isArray(rows)) {
                sizingRow = rows[0];
            } else {
                sizingRow = rows;
            }
            if (!this.sizingRows[sizingRow.objectKeyString]) {
                this.sizingRows[sizingRow.objectKeyString] = sizingRow;
                this.$nextTick().then(this.calculateColumnWidths);
            }
            if (!this.updatingView) {
                this.updatingView = true;
                requestAnimationFrame(()=> {
                    this.updateVisibleRows();
                    if (this.autoScroll) {
                        this.$nextTick().then(this.scrollToBottom);
                    }
                    this.updatingView = false;
                });
            }
        },
        rowsRemoved(rows) {
            if (!this.updatingView) {
                this.updatingView = true;
                requestAnimationFrame(()=> {
                    this.updateVisibleRows();
                    this.updatingView = false;
                });
            }
        },
        exportAsCSV() {
            const headerKeys = Object.keys(this.headers);
            const justTheData = this.table.filteredRows.getRows()
                .map(row => row.getFormattedDatum(this.headers));
            this.csvExporter.export(justTheData, {
                filename: this.table.domainObject.name + '.csv',
                headers: headerKeys
            });
        },
        outstandingRequests(loading) {
            this.loading = loading;
        },
        calculateTableSize() {
            this.setSizingTableWidth();
            this.$nextTick().then(this.calculateColumnWidths);
        },
        pollForResize() {
            let el = this.$el;
            let width = el.clientWidth;
            let height = el.clientHeight;
            this.resizePollHandle = setInterval(() => {
                if (el.clientWidth !== width || el.clientHeight !== height) {
                    this.calculateTableSize();
                    width = el.clientWidth;
                    height = el.clientHeight;
                }
            }, RESIZE_POLL_INTERVAL);
        },
        updateConfiguration(configuration) {
            this.configuration = configuration;
            this.updateHeaders();
        },
        addObject() {
            this.updateHeaders();
        },
        removeObject(objectIdentifier) {
            let objectKeyString = this.openmct.objects.makeKeyString(objectIdentifier);
            delete this.sizingRows[objectKeyString];
            this.updateHeaders();
        }
    },
    created() {
        this.filterChanged = _.debounce(this.filterChanged, 500);
    },
    mounted() {
        this.table.on('object-added', this.addObject);
        this.table.on('object-removed', this.removeObject);
        this.table.on('outstanding-requests', this.outstandingRequests);
        this.table.filteredRows.on('add', this.rowsAdded);
        this.table.filteredRows.on('remove', this.rowsRemoved);
        this.table.filteredRows.on('sort', this.updateVisibleRows);
        this.table.filteredRows.on('filter', this.updateVisibleRows);
        //Default sort
        this.sortOptions = this.table.filteredRows.sortBy();
        this.scrollable = this.$el.querySelector('.js-telemetry-table__body-w');
        this.sizingTable = this.$el.querySelector('.js-telemetry-table__sizing');
        this.headersHolderEl = this.$el.querySelector('.js-table__headers-w');
        this.table.configuration.on('change', this.updateConfiguration);
        this.calculateTableSize();
        this.pollForResize();
        this.table.initialize();
    },
    destroyed() {
        this.table.off('object-added', this.addObject);
        this.table.off('object-removed', this.removeObject);
        this.table.off('outstanding-requests', this.outstandingRequests);
        this.table.filteredRows.off('add', this.rowsAdded);
        this.table.filteredRows.off('remove', this.rowsRemoved);
        this.table.filteredRows.off('sort', this.updateVisibleRows);
        this.table.filteredRows.off('filter', this.updateVisibleRows);
        this.table.configuration.off('change', this.updateConfiguration);
        clearInterval(this.resizePollHandle);
        this.table.configuration.destroy();
        this.table.destroy();
    }
 }
 </script>
--- a/src/plugins/telemetryTable/inspectorView/TableConfigurationComponent.js
+++ b/src/plugins/telemetryTable/inspectorView/TableConfigurationComponent.js
@ -1,87 +0,0 @@
 /*****************************************************************************
 * Open MCT, Copyright (c) 2014-2018, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT is licensed under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations
 * under the License.
 *
 * Open MCT includes source code licensed under additional open source
 * licenses. See the Open Source Licenses file (LICENSES.md) included with
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
 define([
    'lodash',
    'vue',
    './table-configuration.html',
    '../TelemetryTableConfiguration'
 ],function (
    _,
    Vue, 
    TableConfigurationTemplate,
    TelemetryTableConfiguration
 ) {
    return function TableConfigurationComponent(domainObject, openmct) {
        const tableConfiguration = new TelemetryTableConfiguration(domainObject, openmct);
        let unlisteners = [];
        return new Vue({
            template: TableConfigurationTemplate,
            data() {
                return {
                    headers: {},
                    configuration: tableConfiguration.getConfiguration()
                }
            },
            methods: {
                updateHeaders(headers) {
                    this.headers = headers;
                },
                toggleColumn(key) {                    
                    let isHidden = this.configuration.hiddenColumns[key] === true;
                    this.configuration.hiddenColumns[key] = !isHidden;
                    tableConfiguration.updateConfiguration(this.configuration);
                },
                addObject(domainObject) {
                    tableConfiguration.addColumnsForObject(domainObject, true);
                    this.updateHeaders(tableConfiguration.getAllHeaders());
                },
                removeObject(objectIdentifier) {
                    tableConfiguration.removeColumnsForObject(objectIdentifier, true);
                    this.updateHeaders(tableConfiguration.getAllHeaders());
                }
            },
            mounted() {
                let compositionCollection = openmct.composition.get(domainObject);
                compositionCollection.load()
                    .then((composition) => {
                        tableConfiguration.addColumnsForAllObjects(composition);
                        this.updateHeaders(tableConfiguration.getAllHeaders());
                        compositionCollection.on('add', this.addObject);
                        unlisteners.push(compositionCollection.off.bind(compositionCollection, 'add', this.addObject));
                        compositionCollection.on('remove', this.removeObject);
                        unlisteners.push(compositionCollection.off.bind(compositionCollection, 'remove', this.removeObject));
                    });
            },
            destroyed() {
                tableConfiguration.destroy();
                unlisteners.forEach((unlisten) => unlisten());
            }
        });
    }
 });
--- a/src/plugins/telemetryTable/inspectorView/table-configuration.html
+++ b/src/plugins/telemetryTable/inspectorView/table-configuration.html
@ -1,11 +0,0 @@
 <div class="grid-properties">
    <!--form class="form" -->
        <ul class="l-inspector-part">
            <h2>Table Columns</h2>
            <li class="grid-row" v-for="(title, key) in headers">
                <div class="grid-cell label" title="Show or Hide Column"><label :for="key + 'ColumnControl'">{{title}}</label></div>
                <div class="grid-cell value"><input type="checkbox" :id="key + 'ColumnControl'" :checked="configuration.hiddenColumns[key] !== true" @change="toggleColumn(key)"></div>
            </li>
        </ul>
    <!--/form -->
 </div>
--- a/src/plugins/telemetryTable/objectView/TelemetryTableComponent.js
+++ b/src/plugins/telemetryTable/objectView/TelemetryTableComponent.js
@ -1,315 +0,0 @@
 /*****************************************************************************
 * Open MCT, Copyright (c) 2014-2018, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT is licensed under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations
 * under the License.
 *
 * Open MCT includes source code licensed under additional open source
 * licenses. See the Open Source Licenses file (LICENSES.md) included with
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
 define([
    'lodash',
    'vue',
    './telemetry-table.html',
    '../TelemetryTable',
    './TelemetryTableRowComponent',
    '../../../exporters/CSVExporter'
 ],function (
    _,
    Vue, 
    TelemetryTableTemplate,
    TelemetryTable,
    TelemetryTableRowComponent,
    CSVExporter
 ) {
    const VISIBLE_ROW_COUNT = 100;
    const ROW_HEIGHT = 17;
    const RESIZE_POLL_INTERVAL = 200;
    const AUTO_SCROLL_TRIGGER_HEIGHT = 20;
    return function TelemetryTableComponent(domainObject, openmct) {
        const csvExporter = new CSVExporter();
        const table = new TelemetryTable(domainObject, VISIBLE_ROW_COUNT, openmct);
        let processingScroll = false;
        let updatingView = false;
        return new Vue({
            template: TelemetryTableTemplate,
            components: {
                'telemetry-table-row': TelemetryTableRowComponent
            },
            data() {
                return {
                    headers: {},
                    configuration: table.configuration.getConfiguration(),
                    headersCount: 0,
                    visibleRows: [],
                    columnWidths: [],
                    sizingRows: {},
                    rowHeight: ROW_HEIGHT,
                    scrollOffset: 0,
                    totalHeight: 0,
                    totalWidth: 0,
                    rowOffset: 0,
                    autoScroll: true,
                    sortOptions: {},
                    filters: {},
                    loading: false,
                    scrollable: undefined,
                    tableEl: undefined,
                    headersHolderEl: undefined,
                    calcTableWidth: '100%'
                }
            },
            methods: {
                updateVisibleRows() {
                    let start = 0;
                    let end = VISIBLE_ROW_COUNT;
                    let filteredRows = table.filteredRows.getRows();
                    let filteredRowsLength = filteredRows.length;
                    this.totalHeight = this.rowHeight * filteredRowsLength - 1;
                    if (filteredRowsLength < VISIBLE_ROW_COUNT) {
                        end = filteredRowsLength;
                    } else {
                        let firstVisible = this.calculateFirstVisibleRow();
                        let lastVisible = this.calculateLastVisibleRow();
                        let totalVisible = lastVisible - firstVisible;
                        let numberOffscreen = VISIBLE_ROW_COUNT - totalVisible;
                        start = firstVisible - Math.floor(numberOffscreen / 2);
                        end = lastVisible + Math.ceil(numberOffscreen / 2);
                        if (start < 0) {
                            start = 0;
                            end = Math.min(VISIBLE_ROW_COUNT, filteredRowsLength);
                        } else if (end >= filteredRowsLength) {
                            end = filteredRowsLength;
                            start = end - VISIBLE_ROW_COUNT + 1;
                        }
                    }
                    this.rowOffset = start;
                    this.visibleRows = filteredRows.slice(start, end);
                },
                calculateFirstVisibleRow() {
                    return Math.floor(this.scrollable.scrollTop / this.rowHeight);
                },
                calculateLastVisibleRow() {
                    let bottomScroll = this.scrollable.scrollTop + this.scrollable.offsetHeight;
                    return Math.floor(bottomScroll / this.rowHeight);
                },
                updateHeaders() {
                    let headers = table.configuration.getVisibleHeaders();
                    this.headers = headers;
                    this.headersCount = Object.values(headers).length;
                    Vue.nextTick().then(this.calculateColumnWidths);
                },
                setSizingTableWidth() {
                    let scrollW = this.scrollable.offsetWidth - this.scrollable.clientWidth;
                    if (scrollW && scrollW > 0) {
                        this.calcTableWidth = 'calc(100% - ' + scrollW + 'px)';
                    }
                },
                calculateColumnWidths() {
                    let columnWidths = [];
                    let totalWidth = 0;
                    let sizingRowEl = this.sizingTable.children[0];
                    let sizingCells = Array.from(sizingRowEl.children);
                    sizingCells.forEach((cell) => {
                        let columnWidth = cell.offsetWidth;
                        columnWidths.push(columnWidth + 'px');
                        totalWidth += columnWidth;
                    });
                    this.columnWidths = columnWidths;
                    this.totalWidth = totalWidth;
                },
                sortBy(columnKey) {
                    // If sorting by the same column, flip the sort direction.
                    if (this.sortOptions.key === columnKey) {
                        if (this.sortOptions.direction === 'asc') {
                            this.sortOptions.direction = 'desc';
                        } else {
                            this.sortOptions.direction = 'asc';
                        }
                    } else {
                        this.sortOptions = {
                            key: columnKey,
                            direction: 'asc'
                        }
                    }
                    table.filteredRows.sortBy(this.sortOptions);
                },
                scroll() {
                    if (!processingScroll) {
                        processingScroll = true;
                        requestAnimationFrame(()=> {
                            this.updateVisibleRows();
                            this.synchronizeScrollX();
                            if (this.shouldSnapToBottom()) {
                                this.autoScroll = true;
                            } else {
                                // If user scrolls away from bottom, disable auto-scroll.
                                // Auto-scroll will be re-enabled if user scrolls to bottom again.
                                this.autoScroll = false;
                            }
                            processingScroll = false;
                        });
                    }
                },
                shouldSnapToBottom() {
                    return this.scrollable.scrollTop >= (this.scrollable.scrollHeight - this.scrollable.offsetHeight - AUTO_SCROLL_TRIGGER_HEIGHT);
                },
                scrollToBottom() {
                    this.scrollable.scrollTop = this.scrollable.scrollHeight;
                },
                synchronizeScrollX() {
                    this.headersHolderEl.scrollLeft = this.scrollable.scrollLeft;
                },
                filterChanged(columnKey) {
                    table.filteredRows.setColumnFilter(columnKey, this.filters[columnKey]);
                },
                clearFilter(columnKey) {
                    this.filters[columnKey] = '';
                    table.filteredRows.setColumnFilter(columnKey, '');
                },
                rowsAdded(rows) {
                    let sizingRow;
                    if (Array.isArray(rows)) {
                        sizingRow = rows[0];
                    } else {
                        sizingRow = rows;
                    }
                    if (!this.sizingRows[sizingRow.objectKeyString]) {
                        this.sizingRows[sizingRow.objectKeyString] = sizingRow;
                        Vue.nextTick().then(this.calculateColumnWidths);
                    }
                    if (!updatingView) {
                        updatingView = true;
                        requestAnimationFrame(()=> {
                            this.updateVisibleRows();
                            if (this.autoScroll) {
                                Vue.nextTick().then(this.scrollToBottom);
                            }
                            updatingView = false;
                        });
                    }
                },
                rowsRemoved(rows) {
                    if (!updatingView) {
                        updatingView = true;
                        requestAnimationFrame(()=> {
                            this.updateVisibleRows();
                            updatingView = false;
                        });
                    }
                },
                exportAsCSV() {
                    const justTheData = table.filteredRows.getRows()
                        .map(row => row.getFormattedDatum());
                    const headers = Object.keys(this.headers);
                    csvExporter.export(justTheData, {
                        filename: table.domainObject.name + '.csv',
                        headers: headers
                    });
                },
                outstandingRequests(loading) {
                    this.loading = loading;
                },
                calculateTableSize() {
                    this.setSizingTableWidth();
                    Vue.nextTick().then(this.calculateColumnWidths);
                },
                pollForResize() {
                    let el = this.$el;
                    let width = el.clientWidth;
                    let height = el.clientHeight;
                    this.resizePollHandle = setInterval(() => {
                        if (el.clientWidth !== width || el.clientHeight !== height) {
                            this.calculateTableSize();
                            width = el.clientWidth;
                            height = el.clientHeight;
                        }
                    }, RESIZE_POLL_INTERVAL);
                },
                updateConfiguration(configuration) {
                    this.configuration = configuration;
                    this.updateHeaders();
                },
                addObject() {
                    this.updateHeaders();
                },
                removeObject(objectIdentifier) {
                    let objectKeyString = openmct.objects.makeKeyString(objectIdentifier);
                    delete this.sizingRows[objectKeyString];
                    this.updateHeaders();
                }
            },
            created() {
                this.filterChanged = _.debounce(this.filterChanged, 500);
            },
            mounted() {
                table.on('object-added', this.addObject);
                table.on('object-removed', this.removeObject);
                table.on('outstanding-requests', this.outstandingRequests);
                table.filteredRows.on('add', this.rowsAdded);
                table.filteredRows.on('remove', this.rowsRemoved);
                table.filteredRows.on('sort', this.updateVisibleRows);
                table.filteredRows.on('filter', this.updateVisibleRows);
                //Default sort
                this.sortOptions = table.filteredRows.sortBy();
                this.scrollable = this.$el.querySelector('.t-scrolling');
                this.sizingTable = this.$el.querySelector('.js-sizing-table');
                this.headersHolderEl = this.$el.querySelector('.mct-table-headers-w');
                table.configuration.on('change', this.updateConfiguration);
                this.calculateTableSize();
                this.pollForResize();
                table.initialize();
            },
            destroyed() {
                table.off('object-added', this.addObject);
                table.off('object-removed', this.removeObject);
                table.off('outstanding-requests', this.outstandingRequests);
                table.filteredRows.off('add', this.rowsAdded);
                table.filteredRows.off('remove', this.rowsRemoved);
                table.filteredRows.off('sort', this.updateVisibleRows);
                table.filteredRows.off('filter', this.updateVisibleRows);
                table.configuration.off('change', this.updateConfiguration);
                clearInterval(this.resizePollHandle);
                table.configuration.destroy();
                table.destroy();
            }
        });
    }
 });
--- a/src/plugins/telemetryTable/objectView/TelemetryTableRowComponent.js
+++ b/src/plugins/telemetryTable/objectView/TelemetryTableRowComponent.js
@ -1,90 +0,0 @@
 /*****************************************************************************
 * Open MCT, Copyright (c) 2014-2018, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT is licensed under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations
 * under the License.
 *
 * Open MCT includes source code licensed under additional open source
 * licenses. See the Open Source Licenses file (LICENSES.md) included with
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
 define([
    './telemetry-table-row.html',
 ],function (
    TelemetryTableRowTemplate
 ) {
    return {
        template: TelemetryTableRowTemplate,
        data: function () {
            return {
                rowTop: (this.rowOffset + this.rowIndex) * this.rowHeight + 'px',
                formattedRow: this.row.getFormattedDatum(),
                rowLimitClass: this.row.getRowLimitClass(),
                cellLimitClasses: this.row.getCellLimitClasses()
            }
        },
        props: {
            headers: {
                type: Object,
                required: true
            },
            row: {
                type: Object,
                required: true
            },
            columnWidths: {
                type: Array,
                required: false,
                default: [],
            },
            rowIndex: {
                type: Number,
                required: false,
                default: undefined
            },
            rowOffset: {
                type: Number,
                required: false,
                default: 0
            },
            rowHeight: {
                type: Number,
                required: false,
                default: 0
            },
            configuration: {
                type: Object,
                required: true
            }
        },
        methods: {
            calculateRowTop: function (rowOffset) {
                this.rowTop = (rowOffset + this.rowIndex) * this.rowHeight + 'px';
            },
            formatRow: function (row) {
                this.formattedRow = row.getFormattedDatum();
                this.rowLimitClass = row.getRowLimitClass();
                this.cellLimitClasses = row.getCellLimitClasses();
            }
        },
        watch: {
            rowOffset: 'calculateRowTop',
            row: {
                handler: 'formatRow', 
                deep: false
            }
        }
    };
 });
--- a/src/plugins/telemetryTable/objectView/telemetry-table.html
+++ b/src/plugins/telemetryTable/objectView/telemetry-table.html
@ -1,64 +0,0 @@
 <div class="tabular-holder l-sticky-headers has-control-bar l-telemetry-table" :class="{'loading': loading}">
    <div class="l-control-bar">
        <a class="s-button t-export icon-download labeled"
           v-on:click="exportAsCSV()"
           title="Export This View's Data">
            Export As CSV
        </a>
    </div>
    <!-- Headers table -->
    <div class="mct-table-headers-w">
        <table class="mct-table l-tabular-headers filterable" :style="{ 'max-width': totalWidth + 'px'}">
            <thead>
                <tr>
                    <th v-for="(title, key, headerIndex) in headers"
                        v-on:click="sortBy(key)"
                        :class="['sortable', sortOptions.key === key ? 'sort' : '', sortOptions.direction].join(' ')"
                        :style="{ width: columnWidths[headerIndex], 'max-width': columnWidths[headerIndex]}">{{title}}</th>
                </tr>
                <tr class="s-filters">
                    <th v-for="(title, key, headerIndex) in headers"
                        :style="{
                            width: columnWidths[headerIndex],
                            'max-width': columnWidths[headerIndex],
                        }">
                        <div class="holder l-filter flex-elem grows" :class="{active: filters[key]}">
                            <input type="text" v-model="filters[key]" v-on:input="filterChanged(key)" />
                            <a class="clear-icon clear-input icon-x-in-circle" :class="{show: filters[key]}" @click="clearFilter(key)"></a>
                        </div>
                    </th>
                    </tr>
            </thead>
        </table>
    </div>
    <!-- Content table -->
    <div @scroll="scroll" class="l-tabular-body t-scrolling vscroll--persist">
        <div class="mct-table-scroll-forcer"
            :style="{
                width: totalWidth
            }"></div>
        <table class="mct-table js-telemetry-table" :style="{ height: totalHeight + 'px', 'max-width': totalWidth + 'px'}">
            <tbody>
                <telemetry-table-row v-for="(row, rowIndex) in visibleRows" 
                    :headers="headers"
                    :columnWidths="columnWidths"
                    :rowIndex="rowIndex"
                    :rowOffset="rowOffset"
                    :rowHeight="rowHeight"
                    :row="row"
                    >
                </telemetry-table-row>
            </tbody>
        </table>
    </div>
    <!-- Sizing table -->
    <table class="mct-sizing-table t-sizing-table js-sizing-table" :style="{width: calcTableWidth}">
        <tr>
            <th v-for="(title, key, headerIndex) in headers">{{title}}</th>
        </tr>
        <telemetry-table-row v-for="(sizingRowData, objectKeyString) in sizingRows"
            :headers="headers"
            :row="sizingRowData">
        </telemetry-table-row>
    </table>
 </div>
--- a/src/plugins/telemetryTable/plugin.js
+++ b/src/plugins/telemetryTable/plugin.js
@ -21,8 +21,8 @@
 *****************************************************************************/
 define([
-     './objectView/TelemetryTableViewProvider',
+     './TelemetryTableViewProvider',
-     './inspectorView/TableConfigurationViewProvider',
+     './TableConfigurationViewProvider',
     './TelemetryTableType'
    ], function (
        TelemetryTableViewProvider,
--- a/src/plugins/telemetryTable/objectView/telemetry-table-row.html
+++ b/src/plugins/telemetryTable/objectView/telemetry-table-row.html
--- a/src/styles-new/_constants-mobile.scss
+++ b/src/styles-new/_constants-mobile.scss
@ -0,0 +1,147 @@
 /*****************************************************************************
 * Open MCT, Copyright (c) 2014-2018, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT is licensed under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations
 * under the License.
 *
 * Open MCT includes source code licensed under additional open source
 * licenses. See the Open Source Licenses file (LICENSES.md) included with
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
 /* REQUIRES /platform/commonUI/general/res/sass/_constants.scss */
 /************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
 $mobileListIconSize: 30px;
 $mobileTitleDescH: 35px;
 $mobileOverlayMargin: 20px;
 $mobileMenuIconD: 34px;
 $phoneItemH: floor($ueBrowseGridItemLg/4);
 $tabletItemH: floor($ueBrowseGridItemLg/3);
 /************************** MOBILE TREE MENU DIMENSIONS */
 $mobileTreeItemH: 35px;
 $mobileTreeItemIndent: 15px;
 $mobileTreeRightArrowW: 30px;
 /************************** DEVICE WIDTHS */
 // IMPORTANT! Usage assumes that ranges are mutually exclusive and have no gaps
 $phoMaxW: 767px;
 $tabMinW: 768px;
 $tabMaxW: 1024px;
 $desktopMinW: 1025px;
 /************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
 $screenPortrait: "(orientation: portrait)";
 $screenLandscape: "(orientation: landscape)";
 //$mobileDevice: "(max-device-width: #{$tabMaxW})";
 $phoneCheck: "(max-device-width: #{$phoMaxW})";
 $tabletCheck: "(min-device-width: #{$tabMinW}) and (max-device-width: #{$tabMaxW})";
 $desktopCheck: "(min-device-width: #{$desktopMinW}) and (-webkit-min-device-pixel-ratio: 1)";
 /************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
 $phonePortrait: "only screen and #{$screenPortrait} and #{$phoneCheck}";
 $phoneLandscape: "only screen and #{$screenLandscape} and #{$phoneCheck}";
 $tabletPortrait: "only screen and #{$screenPortrait} and #{$tabletCheck}";
 $tabletLandscape: "only screen and #{$screenLandscape} and #{$tabletCheck}";
 $desktop: "only screen and #{$desktopCheck}";
 /************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
 $proporMenuOnly: 90%;
 $proporMenuWithView: 40%;
 // Phones in any orientation
@mixin phone {
    @media #{$phonePortrait},
    #{$phoneLandscape} {
        @content
    }
 }
 //Phones in portrait orientation
@mixin phonePortrait {
    @media #{$phonePortrait} {
        @content
    }
 }
 // Phones in landscape orientation
@mixin phoneLandscape {
    @media #{$phoneLandscape} {
        @content
    }
 }
 // Tablets in any orientation
@mixin tablet {
    @media #{$tabletPortrait},
    #{$tabletLandscape} {
        @content
    }
 }
 // Tablets in portrait orientation
@mixin tabletPortrait {
    @media #{$tabletPortrait} {
        @content
    }
 }
 // Tablets in landscape orientation
@mixin tabletLandscape {
    @media #{$tabletLandscape} {
        @content
    }
 }
 // Phones and tablets in any orientation
@mixin phoneandtablet {
    @media #{$phonePortrait},
    #{$phoneLandscape},
    #{$tabletPortrait},
    #{$tabletLandscape} {
        @content
    }
 }
 // Desktop monitors in any orientation
@mixin desktopandtablet {
    // Keeping only for legacy - should not be used moving forward
    // Use body.desktop, body.tablet instead.
    @media #{$tabletPortrait},
    #{$tabletLandscape},
    #{$desktop} {
        @content
    }
 }
 // Desktop monitors in any orientation
@mixin desktop {
    // Keeping only for legacy - should not be used moving forward
    // Use body.desktop instead.
    @media #{$desktop} {
        @content
    }
 }
 // Transition used for the slide menu
@mixin slMenuTransitions {
    @include transition-duration(.35s);
    transition-timing-function: ease;
    backface-visibility: hidden;
 }
--- a/src/styles-new/_constants-snow.scss
+++ b/src/styles-new/_constants-snow.scss
@ -0,0 +1,311 @@
@import "constants";
 // Functions
@function pullForward($c: $colorBodyBg, $p: 20%) {
    // For dark interfaces, lighter things come forward - opposite for light interfaces
    @return darken($c, $p);
 }
@function pushBack($c: $colorBodyBg, $p: 20%) {
    // For dark interfaces, darker things move back - opposite for light interfaces
    @return lighten($c, $p);
 }
 // Global
 $fontBaseSize: 12px;
 $colorBodyBg: #fcfcfc;
 $colorBodyFg: #666;
 $colorGenBg: #fff;
 $colorStatusBarBg: #000;
 $colorStatusBarFg: #999;
 $colorStatusBarFgHov: #aaa;
 $colorKey: #0099cc;
 $colorKeyFilter: brightness(0.9) sepia(1) hue-rotate(145deg) saturate(6);
 $colorKeySelectedBg: $colorKey;
 $colorKeyFg: #fff;
 $colorKeyHov: #00c0f6;
 $colorEditAreaBg: #eafaff;
 $colorEditAreaFg: #4bb1c7;
 $colorInteriorBorder: rgba($colorBodyFg, 0.2);
 $colorA: #999;
 $colorAHov: $colorKey;
 $contrastRatioPercent: 40%;
 $hoverRatioPercent: 10%;
 $basicCr: 4px;
 $controlCr: 3px;
 $smallCr: 2px;
 $overlayCr: 11px;
 $shdwTextSubtle: rgba(black, 0.2) 0 1px 2px;
 // Buttons and Controls
 $btnPad: $interiorMargin, $interiorMargin * 1.25;
 $colorBtnBg: #aaaaaa;
 $colorBtnBgHov: pullForward($colorBtnBg, $hoverRatioPercent);
 $colorBtnFg: #fff;
 $colorBtnFgHov: $colorBtnFg;
 $colorBtnIcon: #eee;
 $colorBtnIconHov: $colorBtnFgHov;
 $colorBtnMajorBg: $colorKey;
 $colorBtnMajorBgHov: $colorKeyHov;
 $colorBtnMajorFg: $colorKeyFg;
 $colorBtnMajorFgHov: pushBack($colorBtnMajorFg, $hoverRatioPercent);
 $colorBtnCautionBg: #f16f6f;
 $colorBtnCautionBgHov: #f1504e;
 $colorBtnCautionFg: $colorBtnFg;
 $colorClickIcon: $colorKey;
 $colorClickIconHov: $colorKeyHov;
 $colorToggleIcon: rgba($colorClickIcon, 0.5);
 $colorToggleIconActive: $colorKey;
 $colorToggleIconHov: rgba($colorToggleIconActive, 0.5);
 $colorInvokeMenu: #000;
 $contrastInvokeMenuPercent: 40%;
 $shdwBtns: none;
 $shdwBtnsOverlay: none;
 $sliderColorBase: $colorKey;
 $sliderColorRangeHolder: rgba(black, 0.07);
 $sliderColorRange: rgba($sliderColorBase, 0.2);
 $sliderColorRangeHov: rgba($sliderColorBase, 0.4);
 $sliderColorKnob: pushBack($sliderColorBase, 20%);
 $sliderColorKnobHov: rgba($sliderColorBase, 0.7);
 $sliderColorRangeValHovBg: $sliderColorRange;
 $sliderColorRangeValHovFg: $colorBodyFg;
 $sliderKnobW: 15px;
 $sliderKnobR: 2px;
 $timeControllerToiLineColor: $colorBodyFg;
 $timeControllerToiLineColorHov: #0052b5;
 $colorTransLucBg: #666; // Used as a visual blocking element over variable backgrounds, like imagery
 $createBtnTextTransform: uppercase;
 // Foundation Colors
 $colorAlt1: #776ba2;
 $colorAlert: #ff3c00;
 $colorWarningHi: #990000;
 $colorWarningLo: #ff9900;
 $colorDiagnostic: #a4b442;
 $colorCommand: #3693bd;
 $colorInfo: #2294a2;
 $colorOk: #33cc33;
 $colorIconLink: #49dedb;
 $colorPausedBg: #ff9900;
 $colorPausedFg: #fff;
 $colorCreateBtn: $colorKey;
 $colorGridLines: rgba(#000, 0.05);
 $colorInvokeMenu: #fff;
 $colorObjHdrTxt: $colorBodyFg;
 $colorObjHdrIc: lighten($colorObjHdrTxt, 30%);
 $colorTick: rgba(black, 0.2);
 $colorSelectableSelectedPrimary: $colorKey;
 $colorSelectableHov: rgba($colorBodyFg, 0.4);
 // Menus
 $colorMenuBg: pushBack($colorBodyBg, 10%);
 $colorMenuFg: pullForward($colorMenuBg, 70%);
 $colorMenuIc: $colorKey;
 $colorMenuHovBg: $colorMenuIc; //pullForward($colorMenuBg, $hoverRatioPercent);
 $colorMenuHovFg: $colorMenuBg;
 $colorMenuHovIc: $colorMenuBg;
 $shdwMenu: rgba(black, 0.5) 0 1px 5px;
 $shdwMenuText: none;
 $colorCreateMenuLgIcon: $colorKey;
 $colorCreateMenuText: $colorBodyFg;
 $menuItemPad: ($interiorMargin, nth($btnPad, 2));
 // Palettes and Swatches
 $paletteItemBorderOuterColorSelected: black;
 $paletteItemBorderInnerColorSelected: white;
 $paletteItemBorderInnerColor: rgba($paletteItemBorderOuterColorSelected, 0.3);
 // Form colors
 $colorCheck: $colorKey;
 $colorFormRequired: $colorKey;
 $colorFormValid: $colorOk;
 $colorFormError: $colorWarningHi;
 $colorFormInvalid: #ff2200;
 $colorFormFieldErrorBg: $colorFormError;
 $colorFormFieldErrorFg: rgba(#fff, 0.6);
 $colorFormLines: rgba(#000, 0.1);
 $colorFormSectionHeader: rgba(#000, 0.05);
 $colorInputBg: $colorGenBg;
 $colorInputFg: $colorBodyFg;
 $colorInputPlaceholder: pushBack($colorBodyFg, 20%);
 $colorFormText: pushBack($colorBodyFg, 10%);
 $colorInputIcon: pushBack($colorBodyFg, 25%);
 $colorFieldHint: pullForward($colorBodyFg, 40%);
 // Inspector
 $colorInspectorBg: pullForward($colorBodyBg, 5%);
 $colorInspectorFg: $colorBodyFg;
 $colorInspectorPropName: pushBack($colorBodyFg, 20%);
 $colorInspectorPropVal: pullForward($colorInspectorFg, 15%);
 $colorInspectorSectionHeaderBg: pullForward($colorInspectorBg, 5%);
 $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
 // Status colors, mainly used for messaging and item ancillary symbols
 $colorStatusFg: #999;
 $colorStatusDefault: #ccc;
 $colorStatusInfo: #60ba7b;
 $colorStatusAlert: #ffb66c;
 $colorStatusError: #da0004;
 $colorStatusBtnBg: #666;
 $colorProgressBarOuter: rgba(#000, 0.1);
 $colorProgressBarAmt: #0a0;
 $progressBarHOverlay: 15px;
 $progressBarStripeW: 20px;
 $shdwStatusIc: rgba(white, 0.8) 0 0px 5px;
 $animPausedPulseDur: 1s;
 // Indicator colors
 $colorIndicatorAvailable: $colorKey;
 $colorIndicatorDisabled: #444;
 $colorIndicatorOn: $colorOk;
 $colorIndicatorOff: #666;
 // Selects
 $colorSelectBg: $colorBtnBg;
 $colorSelectFg: $colorBtnFg;
 // Limits and staleness colors//
 $colorTelemFresh: pullForward($colorBodyFg, 20%);
 $colorTelemStale: pushBack($colorBodyFg, 20%);
 $styleTelemStale: italic;
 $colorLimitYellowBg: rgba(#ffaa00, 0.3);
 $colorLimitYellowIc: #ffaa00;
 $colorLimitRedBg: rgba(red, 0.3);
 $colorLimitRedIc: red;
 // Bubble colors
 $colorInfoBubbleBg: $colorMenuBg;
 $colorInfoBubbleFg: #666;
 $colorThumbsBubbleFg: pullForward($colorBodyFg, 10%);
 $colorThumbsBubbleBg: pullForward($colorBodyBg, 10%);
 // Overlay
 $colorOvrBlocker: rgba(black, 0.7);//
 $colorOvrBg: $colorBodyBg;
 $colorOvrFg: $colorBodyFg;
 $colorOvrBtnBg: pullForward($colorOvrBg, 40%);
 $colorOvrBtnFg: #fff;
 $colorFieldHintOverlay: pullForward($colorOvrBg, 40%);
 $durLargeViewExpand: 250ms;
 // Items
 $colorItemBg: #ddd;
 $colorItemBgHov: pullForward($colorItemBg, $hoverRatioPercent * 0.7);
 $colorItemFg: $colorBodyFg;
 $colorItemFgDetails: pushBack($colorItemFg, 15%);
 $colorItemIc: $colorKey;
 $colorItemSubIcons: $colorItemFgDetails;
 $colorItemOpenIcon: $colorItemFgDetails;
 $shdwItemText: none;
 $colorItemBgSelected: $colorKey;
 // Tabular
 $colorTabBorder: pullForward($colorBodyBg, 10%);
 $colorTabBodyBg: $colorBodyBg;
 $colorTabBodyFg: pullForward($colorBodyFg, 20%);
 $colorTabHeaderBg: pullForward($colorBodyBg, 10%);
 $colorTabHeaderFg: pullForward($colorBodyFg, 20%);
 $colorTabHeaderBorder: $colorBodyBg;
 // Plot
 $colorPlotBg: rgba(black, 0.05);
 $colorPlotFg: $colorBodyFg;
 $colorPlotHash: black;
 $opacityPlotHash: 0.2;
 $stylePlotHash: dashed;
 $colorPlotAreaBorder: $colorInteriorBorder;
 $colorPlotLabelFg: pushBack($colorPlotFg, 20%);
 $legendCollapsedNameMaxW: 50%;
 $legendHoverValueBg: rgba($colorBodyFg, 0.2);
 // Tree
 $colorTreeBg: #f0f0f0; // Used
 $colorItemTreeHoverBg: pullForward($colorBodyBg, $hoverRatioPercent);
 $colorItemTreeHoverFg: pullForward($colorBodyFg, $hoverRatioPercent);
 $colorItemTreeIcon: $colorKey; // Used
 $colorItemTreeIconHover: $colorItemTreeIcon; // Used
 $colorItemTreeFg: $colorBodyFg;
 $colorItemTreeSelectedBg: pushBack($colorKey, 15%);
 $colorItemTreeSelectedFg: $colorBodyBg;
 $colorItemTreeEditingBg: #caf1ff;
 $colorItemTreeEditingFg: $colorEditAreaFg;
 $colorItemTreeVC: $colorBodyFg;
 $colorItemTreeVCHover: $colorKey;
 $colorItemTreeSelectedVC: $colorBodyBg;
 $shdwItemTreeIcon: none;
 // Images
 $colorThumbHoverBg: $colorItemTreeHoverBg;
 // Scrollbar
 $scrollbarTrackSize: 7px;
 $scrollbarTrackShdw: rgba(#000, 0.2) 0 1px 2px;
 $scrollbarTrackColorBg: rgba(#000, 0.2);
 $scrollbarThumbColor: darken($colorBodyBg, 50%);
 $scrollbarThumbColorHov: $colorKey;
 $scrollbarThumbColorOverlay: darken($colorOvrBg, 50%);
 $scrollbarThumbColorOverlayHov: $scrollbarThumbColorHov;
 $scrollbarThumbColorMenu: pullForward($colorMenuBg, 10%);
 $scrollbarThumbColorMenuHov: pullForward($scrollbarThumbColorMenu, 2%);
 // Splitter
 $splitterD: 7px;
 $splitterHandleD: 2px;
 $splitterHandleHitMargin: 4px;
 $splitterGrippyD: ($splitterHandleD - 4, 75px, 50px); // thickness, length, min-length
 $colorSplitterBaseBg: $colorBodyBg;
 $colorSplitterBg: pullForward($colorSplitterBaseBg, 20%);
 $colorSplitterFg: $colorBodyBg;
 $colorSplitterHover: $colorKey; // pullForward($colorSplitterBg, $hoverRatioPercent * 2);
 $colorSplitterActive: $colorKey;
 $splitterBtnD: (16px, 35px); // height, width
 $splitterBtnColorBg: #eee;
 $splitterBtnColorFg: #999;
 $splitterBtnColorHoverBg: rgba($colorKey, 1);
 $splitterBtnColorHoverFg: $colorBodyBg;
 $colorSplitterGrippy: pullForward($colorSplitterBaseBg, 30%);
 $splitterShdw: none;
 $splitterEndCr: none;
 // Minitabs
 $colorMiniTabBg: $colorSplitterBg;
 $colorMiniTabFg: pullForward($colorMiniTabBg, 30%);
 $colorMiniTabBgHov: $colorSplitterHover;
 $colorMiniTabFgHov: #fff;
 // Mobile
 $colorMobilePaneLeft: darken($colorBodyBg, 2%);
 $colorMobilePaneLeftTreeItemBg: rgba($colorBodyFg, 0.1); //pullForward($colorMobilePaneLeft, 3%);
 $colorMobilePaneLeftTreeItemFg: $colorItemTreeFg;
 $colorMobileSelectListTreeItemBg: rgba(#000, 0.05);
 // Datetime Picker, Calendar
 $colorCalCellHovBg: $colorKey;
 $colorCalCellHovFg: $colorKeyFg;
 $colorCalCellSelectedBg: $colorItemTreeSelectedBg;
 $colorCalCellSelectedFg: $colorItemTreeSelectedFg;
 $colorCalCellInMonthBg: pullForward($colorMenuBg, 5%);
 // About Screen
 $colorAboutLink: #84b3ff;
 // Loading
 $colorLoadingFg: $colorAlt1;
 $colorLoadingBg: rgba($colorLoadingFg, 0.1);
 // Transitions
 $transIn: all 50ms ease-in;
 $transOut: all 250ms ease-out;
 // Discrete items, like Notebook entries, Widget rules
@mixin discreteItem() {
    background: rgba($colorBodyFg,0.1);
    border: 1px solid $colorInteriorBorder;
    border-radius: $controlCr;
    .c-input-inline:hover {
        background: $colorBodyBg;
    }
 }
@mixin discreteItemInnerElem() {
    border: 1px solid $colorBodyBg;
    border-radius: $controlCr; }
--- a/src/styles-new/_constants.scss
+++ b/src/styles-new/_constants.scss
@ -0,0 +1,182 @@
 /************************** PATHS */
 // Paths need to be relative to /platform/commonUI/theme/<theme-name>/css/ directory
 $dirFonts: 'fonts/';
 $dirImgs: 'images/';
 /************************** TIMINGS */
 $controlFadeMs: 100ms;
 $browseToEditAnimMs: 400ms;
 $editBorderPulseMs: 500ms;
 /************************** SPATIAL */
 $interiorMarginSm: 3px;
 $interiorMargin: 5px;
 $interiorMarginLg: 10px;
 $inputTextPTopBtm: 2px;
 $inputTextPLeftRight: 5px;
 $inputTextP: $inputTextPTopBtm $inputTextPLeftRight;
 $menuLineH: 1.5rem;
 $treeItemIndent: 16px;
 $treeTypeIconW: 18px;
 /*************** Items */
 $itemPadLR: 5px;
 $ueBrowseGridItemLg: 200px;
 /*************** Tabular */
 $tabularHeaderH: 22px;
 $tabularTdPadLR: $itemPadLR;
 $tabularTdPadTB: 2px;
 /************************** VISUAL */
 $controlDisabledOpacity: 0.3;
 /************************** GLYPH CHAR UNICODES */
 $glyph-icon-alert-rect: '\e900';
 $glyph-icon-alert-triangle: '\e901';
 $glyph-icon-arrow-down: '\e902';
 $glyph-icon-arrow-left: '\e903';
 $glyph-icon-arrow-right: '\e904';
 $glyph-icon-arrow-double-up: '\e905';
 $glyph-icon-arrow-tall-up: '\e906';
 $glyph-icon-arrow-tall-down: '\e907';
 $glyph-icon-arrow-double-down: '\e908';
 $glyph-icon-arrow-up: '\e909';
 $glyph-icon-asterisk: '\e910';
 $glyph-icon-bell: '\e911';
 $glyph-icon-box: '\e912';
 $glyph-icon-box-with-arrow: '\e913';
 $glyph-icon-check: '\e914';
 $glyph-icon-connectivity: '\e915';
 $glyph-icon-database-in-brackets: '\e916';
 $glyph-icon-eye-open: '\e917';
 $glyph-icon-gear: '\e918';
 $glyph-icon-hourglass: '\e919';
 $glyph-icon-info: '\e920';
 $glyph-icon-link: '\e921';
 $glyph-icon-lock: '\e922';
 $glyph-icon-minus: '\e923';
 $glyph-icon-people: '\e924';
 $glyph-icon-person: '\e925';
 $glyph-icon-plus: '\e926';
 $glyph-icon-trash: '\e927';
 $glyph-icon-x: '\e928';
 $glyph-icon-brackets: '\e929';
 $glyph-icon-crosshair: '\e930';
 $glyph-icon-grippy: '\e931';
 $glyph-icon-arrow-right-equilateral: '\e932';
 $glyph-icon-arrows-out: '\e1000';
 $glyph-icon-arrows-right-left: '\e1001';
 $glyph-icon-arrows-up-down: '\e1002';
 $glyph-icon-bullet: '\e1004';
 $glyph-icon-calendar: '\e1005';
 $glyph-icon-chain-links: '\e1006';
 $glyph-icon-collapse-pane-left: '\e1007';
 $glyph-icon-collapse-pane-right: '\e1008';
 $glyph-icon-download: '\e1009';
 $glyph-icon-duplicate: '\e1010';
 $glyph-icon-folder-new: '\e1011';
 $glyph-icon-fullscreen-collapse: '\e1012';
 $glyph-icon-fullscreen-expand: '\e1013';
 $glyph-icon-layers: '\e1014';
 $glyph-icon-line-horz: '\e1015';
 $glyph-icon-magnify: '\e1016';
 $glyph-icon-magnify-in: '\e1017';
 $glyph-icon-magnify-out: '\e1018';
 $glyph-icon-menu-hamburger: '\e1019';
 $glyph-icon-move: '\e1020';
 $glyph-icon-new-window: '\e1021';
 $glyph-icon-paint-bucket: '\e1022';
 $glyph-icon-pause: '\e1023';
 $glyph-icon-pencil: '\e1024';
 $glyph-icon-play: '\e1025';
 $glyph-icon-plot-resource: '\e1026';
 $glyph-icon-pointer-left: '\e1027';
 $glyph-icon-pointer-right: '\e1028';
 $glyph-icon-refresh: '\e1029';
 $glyph-icon-save: '\e1030';
 $glyph-icon-sine: '\e1031';
 $glyph-icon-font: '\e1032';
 $glyph-icon-thumbs-strip: '\e1033';
 $glyph-icon-two-parts-both: '\e1034';
 $glyph-icon-two-parts-one-only: '\e1035';
 $glyph-icon-resync: '\e1036';
 $glyph-icon-reset: '\e1037';
 $glyph-icon-x-in-circle: '\e1038';
 $glyph-icon-brightness: '\e1039';
 $glyph-icon-contrast: '\e1040';
 $glyph-icon-expand: '\e1041';
 $glyph-icon-list-view: '\e1042';
 $glyph-icon-grid-snap-to: '\e1043';
 $glyph-icon-grid-snap-no: '\e1044';
 $glyph-icon-frame-show: '\e1045';
 $glyph-icon-frame-hide: '\e1046';
 $glyph-icon-import: '\e1047';
 $glyph-icon-export: '\e1048';
 $glyph-icon-font-size: '\e1049';
 $glyph-icon-activity: '\e1100';
 $glyph-icon-activity-mode: '\e1101';
 $glyph-icon-autoflow-tabular: '\e1102';
 $glyph-icon-clock: '\e1103';
 $glyph-icon-database: '\e1104';
 $glyph-icon-database-query: '\e1105';
 $glyph-icon-dataset: '\e1106';
 $glyph-icon-datatable: '\e1107';
 $glyph-icon-dictionary: '\e1108';
 $glyph-icon-folder: '\e1109';
 $glyph-icon-image: '\e1110';
 $glyph-icon-layout: '\e1111';
 $glyph-icon-object: '\e1112';
 $glyph-icon-object-unknown: '\e1113';
 $glyph-icon-packet: '\e1114';
 $glyph-icon-page: '\e1115';
 $glyph-icon-plot-overlay: '\e1116';
 $glyph-icon-plot-stacked: '\e1117';
 $glyph-icon-session: '\e1118';
 $glyph-icon-tabular: '\e1119';
 $glyph-icon-tabular-lad: '\e1120';
 $glyph-icon-tabular-lad-set: '\e1121';
 $glyph-icon-tabular-realtime: '\e1122';
 $glyph-icon-tabular-scrolling: '\e1123';
 $glyph-icon-telemetry: '\e1124';
 $glyph-icon-telemetry-panel: '\e1125';
 $glyph-icon-timeline: '\e1126';
 $glyph-icon-timer: '\e1127';
 $glyph-icon-topic: '\e1128';
 $glyph-icon-box-with-dashed-lines: '\e1129';
 $glyph-icon-summary-widget: '\e1130';
 $glyph-icon-notebook: '\e1131';
 /************************** GLYPHS AS DATA URI */
 // Only objects have been converted, for use in Create menu and folder views
 $bg-icon-activity: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M288 32H160l160 160H174.872C152.74 153.742 111.377 128 64 128H0v256h64c47.377 0 88.74-25.742 110.872-64H320L160 480h128l224-224L288 32z'/%3e%3c/svg%3e");
 $bg-icon-activity-mode: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M256 0C148.6 0 56.6 66.2 18.6 160H64c28.4 0 54 12.4 71.5 32H256l-96-96h128l160 160-160 160H160l96-96H135.5C118 339.6 92.4 352 64 352H18.6c38 93.8 129.9 160 237.4 160 141.4 0 256-114.6 256-256S397.4 0 256 0z'/%3e%3c/svg%3e");
 $bg-icon-autoflow-tabular: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M96 0C43.2 0 0 43.2 0 96v320c0 52.8 43.2 96 96 96h32V0H96zM192 0h128v512H192zM416 0h-32v352h128V96c0-52.8-43.2-96-96-96z'/%3e%3c/svg%3e");
 $bg-icon-clock: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M256 0C114.62 0 0 114.62 0 256s114.62 256 256 256 256-114.62 256-256S397.38 0 256 0zm135 345a36 36 0 0 1-31.21 18 35.83 35.83 0 0 1-18-4.83l-110.85-64-.14-.08q-.6-.35-1.19-.73l-.43-.28-.93-.64-.63-.45-.63-.48-.85-.67-.32-.27c-.36-.3-.72-.61-1.07-.92a35.76 35.76 0 0 1-6.52-7.9c-.14-.23-.27-.47-.41-.7s-.29-.49-.43-.74a35.75 35.75 0 0 1-3.58-9.59v-.06c-.1-.46-.19-.92-.27-1.38 0-.14-.05-.28-.08-.42-.06-.35-.11-.71-.15-1.07s-.07-.52-.1-.79-.05-.51-.07-.77l-.09-1.12v-.52-1.39V81a36 36 0 0 1 36-36 36 36 0 0 1 36 36v161.22l92.85 53.61A36 36 0 0 1 391 345z' fill='%2300a14b'/%3e%3c/svg%3e");
 $bg-icon-database: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M256 256C114.615 256 0 213.019 0 160v256c0 53.019 114.615 96 256 96s256-42.981 256-96V160c0 53.019-114.615 96-256 96z'/%3e%3cellipse fill='%23666666' cx='256' cy='96' rx='256' ry='96'/%3e%3c/svg%3e");
 $bg-icon-database-query: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M341.76 409.643C316.369 423.871 287.118 432 256 432c-97.047 0-176-78.953-176-176S158.953 80 256 80s176 78.953 176 176c0 31.118-8.129 60.369-22.357 85.76l95.846 95.846C509.747 430.661 512 423.429 512 416V96c0-53.019-114.615-96-256-96S0 42.981 0 96v320c0 53.019 114.615 96 256 96 63.055 0 120.774-8.554 165.388-22.73l-79.628-79.627z'/%3e%3cpath fill='%23666666' d='M176 256c0 44.112 35.888 80 80 80s80-35.888 80-80-35.888-80-80-80-80 35.888-80 80z'/%3e%3c/svg%3e");
 $bg-icon-dataset: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M448 96H288l-54.6-54.6-18.7-18.7C202.2 10.2 177.6 0 160 0H32C14.4 0 0 14.4 0 32v192c0-35.2 28.8-64 64-64h384c35.2 0 64 28.8 64 64v-64c0-35.2-28.8-64-64-64zM448 224H64c-35.2 0-64 28.8-64 64v160c0 35.2 28.8 64 64 64h384c35.2 0 64-28.8 64-64V288c0-35.2-28.8-64-64-64zM160 448H96V288h64v160zm128 0h-64V288h64v160zm128 0h-64V288h64v160z'/%3e%3c/svg%3e");
 $bg-icon-datatable: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M256 256C114.6 256 0 213 0 160v256c0 53 114.6 96 256 96s256-43 256-96V160c0 53-114.6 96-256 96zm192 31.5v128c-18.3 7.8-39.9 14.4-64 19.7v-128c24.1-5.3 45.7-11.9 64-19.7zm-320 19.7v128c-24.1-5.2-45.7-11.9-64-19.7v-128c18.3 7.8 39.9 14.4 64 19.7zM192 445V317c20.5 2 41.9 3 64 3s43.5-1.1 64-3v128c-20.5 2-41.9 3-64 3s-43.5-1.1-64-3z'/%3e%3cellipse fill='%23666666' cx='256' cy='96' rx='256' ry='96'/%3e%3c/svg%3e");
 $bg-icon-dictionary: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M416 320c52.8 0 96-43.2 96-96V96c0-52.8-43.2-96-96-96v160l-64-32-64 32V0H96C43.2 0 0 43.2 0 96v320c0 52.8 43.2 96 96 96h320c52.8 0 96-43.2 96-96v-96c0 52.8-43.2 96-96 96H96v-96h320z'/%3e%3c/svg%3e");
 $bg-icon-folder: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M448 96H288l-54.6-54.6-18.7-18.7C202.2 10.2 177.6 0 160 0H32C14.4 0 0 14.4 0 32v192c0-35.2 28.8-64 64-64h384c35.2 0 64 28.8 64 64v-64c0-35.2-28.8-64-64-64zM448 224H64c-35.2 0-64 28.8-64 64v160c0 35.2 28.8 64 64 64h384c35.2 0 64-28.8 64-64V288c0-35.2-28.8-64-64-64z'/%3e%3c/svg%3e");
 $bg-icon-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M448 0H64C28.8 0 0 28.8 0 64v384c0 35.2 28.8 64 64 64h384c35.2 0 64-28.8 64-64V64c0-35.2-28.8-64-64-64zm0 448H64V64h384v384z'/%3e%3cpath fill='%23666666' d='M160 128l-64 64v224h320V256l-64-64-64 64z'/%3e%3c/svg%3e");
 $bg-icon-layout: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M224 0H96C43.2 0 0 43.2 0 96v320c0 52.8 43.2 96 96 96h128V0zM416 0H288v288.832h224V96c0-52.8-43.2-96-96-96zM288 512h128c52.8 0 96-43.2 96-96v-64.832H288V512z'/%3e%3c/svg%3e");
 $bg-icon-object: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='none' d='M256 96L76.8 208 256 320l179.2-112z'/%3e%3cpath fill='%23666666' d='M256 512l256-160V160L255.99 0 0 160v192l256 160zm0-416l179.2 112L256 320 76.8 208 256 96z'/%3e%3c/svg%3e");
 $bg-icon-object-unknown: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M255-1L-1 159v192l256 160 256-160V159L255-1zm37.7 430.6c-10.6 10.4-23 15.4-38 15.4-15.6 0-28.1-4.9-38.1-14.8-10-10-14.8-22.4-14.8-38.1 0-15.2 5.1-27.6 15.5-38.1s22.6-15.6 37.4-15.6c14.8 0 27.1 5.2 37.8 16 10.7 10.8 15.9 23.2 15.9 38-.1 14.5-5.4 27-15.7 37.2zm26.4-156.3c-11.8 5.9-18.7 11-21.7 16.2-1.8 3.1-3 7.4-3.7 13.4v20.5H213v-22.1c0-20.1 2.2-34.9 6.5-44 4-8.6 11.3-15.1 22.4-20l17.4-7.7c16-7.1 24.1-17.6 24.1-31.4 0-8-3-15.2-8.6-20.9-5.6-5.6-12.8-8.6-20.8-8.6-12 0-27.2 5-31.4 28.7l-1.1 6.1H148l.7-8.1c2-22.3 8.5-41.2 19.4-56.1 9.8-13.5 22.8-24.3 38.5-32.3 15.7-8 32.3-12 49.1-12 30.3 0 55.1 9.7 75.7 29.8 20.6 20 30.6 44 30.6 73.6 0 35.4-14.4 60.7-42.9 74.9z'/%3e%3c/svg%3e");
 $bg-icon-packet: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='none' d='M256 96L76.8 208 256 320l179.2-112z'/%3e%3cpath fill='%23666666' d='M256 0L0 160v256c0 52.8 43.2 96 96 96h320c52.8 0 96-43.2 96-96V160L256 0zm0 96l179.2 112L256 320 76.8 208 256 96z'/%3e%3c/svg%3e");
 $bg-icon-page: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M352 256c-52.8 0-96-43.2-96-96V0H96C43.2 0 0 43.2 0 96v320c0 52.8 43.2 96 96 96h320c52.8 0 96-43.2 96-96V256H352z'/%3e%3cpath fill='%23666666' d='M384 192h128L320 0v128c0 35.2 28.8 64 64 64z'/%3e%3c/svg%3e");
 $bg-icon-plot-overlay: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M415 0H97C43.65 0 0 43.65 0 97v203.41c7.09 9.32 12.83 14.17 16 15.42 7.14-2.81 27.22-23.77 46.48-73C83.71 188.64 120.64 124 176 124c26.2 0 50.71 14.58 72.85 43.34 18.67 24.25 32.42 54.46 40.67 75.54 19.26 49.19 39.34 70.15 46.48 73 7.14-2.81 27.22-23.77 46.48-73C403.71 188.64 440.64 124 496 124a69.55 69.55 0 0 1 16 1.87V97c0-53.35-43.65-97-97-97z'/%3e%3cpath fill='%23666666' d='M496 196.17c-7.14 2.81-27.22 23.76-46.48 73C428.29 323.36 391.36 388 336 388c-26.2 0-50.71-14.58-72.85-43.34-18.67-24.25-32.42-54.46-40.67-75.54-19.26-49.19-39.34-70.15-46.48-73-7.14 2.81-27.22 23.76-46.48 73C108.29 323.36 71.36 388 16 388a69.56 69.56 0 0 1-16-1.87V415c0 53.35 43.65 97 97 97h318c53.35 0 97-43.65 97-97V211.59c-7.09-9.32-12.83-14.17-16-15.42z'/%3e%3c/svg%3e");
 $bg-icon-plot-stacked: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M44.8 156c12.49 0 24.48-13.26 42.76-35.09 22.71-27.14 51-60.91 98-60.91 22.32 0 43.31 7.73 62.4 23 14.34 11.45 25.58 25.21 36.46 38.53C303.63 145 314 156 326.4 156H512V97c0-53.35-43.65-97-97-97H97C43.65 0 0 43.65 0 97v59h44.8z'/%3e%3cpath fill='%23666666' d='M264.75 205.2c-14.12-11.32-25.26-25-36-38.14C211 145.32 199.37 132 185.6 132c-12.53 0-24.54 13.27-42.83 35.12-22.7 27.12-51 60.88-98 60.88H0v56h185.6c22 0 42.77 7.67 61.65 22.8 14.12 11.32 25.26 25 36 38.14C301 366.68 312.63 380 326.4 380c12.53 0 24.54-13.27 42.83-35.12 22.7-27.12 51-60.88 98-60.88H512v-56H326.4c-22.03 0-42.77-7.67-61.65-22.8z'/%3e%3cpath fill='%23666666' d='M467.2 356c-12.49 0-24.48 13.26-42.76 35.09-22.71 27.14-51 60.91-98 60.91-22.32 0-43.31-7.73-62.4-23-14.34-11.45-25.58-25.21-36.46-38.53C208.37 367 198 356 185.6 356H0v59c0 53.35 43.65 97 97 97h318c53.35 0 97-43.65 97-97v-59h-44.8z'/%3e%3c/svg%3e");
 $bg-icon-session: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M317.8 262.2c3.3 2.1 6.6 4.3 9.6 6.8l60.2 48.2c14.8 11.9 41.9 11.9 56.7 0l67.6-54c.1-2.4.1-4.7.1-7.1 0-26.1-3.9-51.2-11.1-74.9L423.5 243c-29.1 23.3-70.1 29.6-105.7 19.2zM124.3 317.1l60.2-48.2c29-23.2 70-29.6 105.6-19.2-3.3-2.1-6.6-4.3-9.6-6.8l-60.2-48.2c-14.8-11.9-41.9-11.9-56.7 0L103.5 243c-20 16-45.7 24-71.5 24-10.8 0-21.5-1.4-31.9-4.2v.8c2.5 1.7 5 3.4 7.3 5.3l60.2 48.2c14.9 11.9 41.9 11.9 56.7 0z'/%3e%3cpath fill='%23666666' d='M60.3 189.1l60.2-48.2c40.1-32.1 102.8-32.1 142.9 0l60.2 48.2c14.8 11.9 41.9 11.9 56.7 0l90.5-72.4C425.2 46.5 346 0 256 0 136.7 0 36.4 81.6 8 192.1c15.4 8.8 38.9 7.8 52.3-3zM344.5 371l-60.2-48.2c-14.8-11.9-41.9-11.9-56.7 0L167.5 371c-20 16-45.7 24-71.5 24-23.9 0-47.7-6.9-67.1-20.7C71.7 456.1 157.3 512 256 512s184.3-55.9 227.1-137.7c-40.2 28.7-99.9 27.6-138.6-3.3z'/%3e%3c/svg%3e");
 $bg-icon-tabular: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M448 0H64C28.8 0 0 28.8 0 64v384c0 35.2 28.8 64 64 64h384c35.2 0 64-28.8 64-64V64c0-35.2-28.8-64-64-64zM320 224H192v-96h128v96zm-128 32h128v96H192v-96zm-32 96H32v-96h128v96zm0-224v96H32v-96h128zM64 480c-8.5 0-16.5-3.3-22.6-9.4S32 456.5 32 448v-64h128v96H64zm128 0v-96h128v96H192zm288-32c0 8.5-3.3 16.5-9.4 22.6S456.5 480 448 480h-96v-96h128v64zm0-96H352v-96h128v96zm0-128H352v-96h128v96z'/%3e%3c/svg%3e");
 $bg-icon-tabular-lad: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M448 0H64C28.7.1.1 28.7 0 64v384c.1 35.3 28.7 63.9 64 64h384c35.3-.1 63.9-28.7 64-64V64c-.1-35.3-28.7-63.9-64-64zM32 128h128v96H32v-96zm0 128h128v96H32v-96zm32 224c-17.6-.1-31.9-14.4-32-32v-64h128v96H64zm128 0v-96h128v96H192zm288-32c-.1 17.6-14.4 31.9-32 32h-96v-96h128v64zm0-192v96H192v-96h32v-32h-32v-96h288v96h-32v32h32z'/%3e%3cpath fill='%23666666' d='M391.2 273.7L336 246.1V160c0-8.8-7.2-16-16-16s-16 7.2-16 16v105.9l72.8 36.4c7.9 4 17.5.8 21.5-7.2 4-7.8.8-17.5-7.1-21.4z'/%3e%3c/svg%3e");
 $bg-icon-tabular-lad-set: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M64 384V96c-35.3.1-63.9 28.7-64 64v288c.1 35.3 28.7 63.9 64 64h288c35.3-.1 63.9-28.7 64-64H128c-35.3-.1-63.9-28.7-64-64z'/%3e%3cpath fill='%23666666' d='M448 0H160c-35.3.1-63.9 28.7-64 64v288c.1 35.3 28.7 63.9 64 64h288c35.3-.1 63.9-28.7 64-64V64c-.1-35.3-28.7-63.9-64-64zM128 96h96v64h-96V96zm0 96h96v96h-96v-96zm32 192c-17.6-.1-31.9-14.4-32-32v-32h96v64h-64zm96 0v-64h96v64h-96zm224-32c-.1 17.6-14.4 31.9-32 32h-64v-64h96v32zm0-64H256V96h224v192z'/%3e%3cpath fill='%23666666' d='M416 240c8.8 0 16-7.2 16-16 0-6.9-4.4-13-10.9-15.2L384 196.5V144c0-8.8-7.2-16-16-16s-16 7.2-16 16v75.5l58.9 19.6c1.7.6 3.4.9 5.1.9z'/%3e%3c/svg%3e");
 $bg-icon-tabular-realtime: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M0 64v384c0 35.2 28.8 64 64 64h288c35.2 0 64-28.8 64-64V340c-19.8 7.8-41.4 12-64 12-35.4 0-68.4-10.5-96-28.6V352h-96v-96h35.3c-5.2-10.1-9.4-20.8-12.6-32H160v-96h22.7C203.6 54.2 271.6 0 352 0H64C28.8 0 0 28.8 0 64zm288 320h96v64c0 8.5-3.3 16.5-9.4 22.6S360.5 480 352 480h-64v-96zm-160 96H64c-8.5 0-16.5-3.3-22.6-9.4S32 456.5 32 448v-64h96v96zm0-128H32v-96h96v96zm32 32h96v96h-96v-96zm-32-160H32v-96h96v96z'/%3e%3cpath fill='%23666666' d='M192 160c0 88.4 71.6 160 160 160s160-71.6 160-160S440.4 0 352 0 192 71.6 192 160zm49.7 39.8L227 187.5c-1.4-6.4-2.3-12.9-2.7-19.6 15.1-.1 30.1-5 41.9-14.8l39.6-33c7.5-6.2 21.1-6.2 28.6 0l39.6 33c2.8 2.3 5.7 4.3 8.8 6.1-23-11.7-52.7-9.2-72.8 7.5l-39.6 33c-7.6 6.3-21.2 6.3-28.7.1zM352 288c-36.7 0-69.7-15.4-93-40.1 14.2-.6 28.1-5.5 39.2-14.7l39.6-33c7.5-6.2 21.1-6.2 28.6 0l39.6 33c11 9.2 25 14.1 39.2 14.7-23.5 24.7-56.5 40.1-93.2 40.1zm125.9-151.3c1.4 7.5 2.1 15.3 2.1 23.3 0 9.4-1 18.6-3 27.5l-14.7 12.3c-7.5 6.2-21.1 6.2-28.6 0l-39.6-33c-2.8-2.3-5.7-4.3-8.8-6.1 23 11.7 52.7 9.2 72.8-7.5l19.8-16.5zM352 32c46.4 0 87.1 24.7 109.5 61.7l-31.2 26c-7.5 6.2-21.1 6.2-28.6 0l-39.6-33c-23.6-19.7-60.6-19.7-84.3 0l-39.6 33c-2.5 2.1-5.7 3.5-9.1 4.2C244.7 70.8 293.8 32 352 32z'/%3e%3c/svg%3e");
 $bg-icon-tabular-scrolling: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M32 0C14.4 0 0 14.4 0 32v96h224V0H32zM512 128V32c0-17.6-14.4-32-32-32H288v128h224zM0 192v96c0 17.6 14.4 32 32 32h192V192H0zM480 320c17.6 0 32-14.4 32-32v-96H288v128h192zM256 512L128 384h256z'/%3e%3c/svg%3e");
 $bg-icon-telemetry: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M16 315.83c7.14-2.81 27.22-23.77 46.48-73C83.71 188.64 120.64 124 176 124c26.2 0 50.71 14.58 72.85 43.34 18.67 24.25 32.42 54.46 40.67 75.54 19.26 49.19 39.34 70.15 46.48 73 7.14-2.81 27.22-23.77 46.48-73 18.7-47.75 49.57-103.57 94.47-116.23A255.87 255.87 0 0 0 256 0C114.62 0 0 114.62 0 256a257.18 257.18 0 0 0 5 50.52c4.77 5.39 8.61 8.37 11 9.31z'/%3e%3cpath fill='%23666666' d='M496 196.17c-7.14 2.81-27.22 23.76-46.48 73C428.29 323.36 391.36 388 336 388c-26.2 0-50.71-14.58-72.85-43.34-18.67-24.25-32.42-54.46-40.67-75.54-19.26-49.19-39.34-70.15-46.48-73-7.14 2.81-27.22 23.76-46.48 73-18.7 47.75-49.57 103.57-94.47 116.23A255.87 255.87 0 0 0 256 512c141.38 0 256-114.62 256-256a257.18 257.18 0 0 0-5-50.52c-4.77-5.39-8.61-8.37-11-9.31z'/%3e%3c/svg%3e");
 $bg-icon-timeline: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M128 128h192v64H128zM192 224h192v64H192zM160 320h192v64H160z'/%3e%3cpath fill='%23666666' d='M416 0h-64v96h63.8c.1 0 .1.1.2.2v319.7c0 .1-.1.1-.2.2H352v96h64c52.8 0 96-43.2 96-96V96c0-52.8-43.2-96-96-96zM96 415.8V96.2c0-.1.1-.1.2-.2H160V0H96C43.2 0 0 43.2 0 96v320c0 52.8 43.2 96 96 96h64v-96H96.2c-.1 0-.2-.1-.2-.2z'/%3e%3c/svg%3e");
 $bg-icon-timer: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M288 73.3V32.01a32 32 0 0 0-32-32h-64a32 32 0 0 0-32 32V73.3C67.48 100.84 0 186.54 0 288.01c0 123.71 100.29 224 224 224s224-100.29 224-224c0-101.48-67.5-187.2-160-214.71zm-54 224.71l-131.88 105.5A167.4 167.4 0 0 1 56 288.01c0-92.64 75.36-168 168-168 3.36 0 6.69.11 10 .31v177.69z'/%3e%3c/svg%3e");
 $bg-icon-topic: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M227.18 238.32l43.15-43.15a25.18 25.18 0 0 1 35.36 0l43.15 43.15a94.42 94.42 0 0 0 35.18 22.25V174.5l-28.82-28.82a95.11 95.11 0 0 0-134.35 0l-43.15 43.15a25.18 25.18 0 0 1-35.36 0L128 174.5v86.07a95.11 95.11 0 0 0 99.18-22.25z'/%3e%3cpath fill='%23666666' d='M252.82 273.68l-43.15 43.15a25.18 25.18 0 0 1-35.36 0l-43.15-43.15c-1-1-2.1-2-3.18-3v98.68a95.11 95.11 0 0 0 131.18-3l43.15-43.15a25.18 25.18 0 0 1 35.36 0l43.15 43.15c1 1 2.1 2 3.18 3v-98.68a95.11 95.11 0 0 0-131.18 3z'/%3e%3cpath fill='%23666666' d='M416 0h-64v96h63.83l.17.17v319.66l-.17.17H352v96h64c52.8 0 96-43.2 96-96V96c0-52.8-43.2-96-96-96zM160 416H96.17l-.17-.17V96.17l.17-.17H160V0H96C43.2 0 0 43.2 0 96v320c0 52.8 43.2 96 96 96h64v-96z'/%3e%3c/svg%3e");
 $bg-icon-box-with-dashed-lines: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M0 192h64v128H0zM64 64.11l.11-.11H160V0H64A64.19 64.19 0 0 0 0 64v96h64V64.11zM64 447.89V352H0v96a64.19 64.19 0 0 0 64 64h96v-64H64.11zM192 0h128v64H192zM448 447.89l-.11.11H352v64h96a64.19 64.19 0 0 0 64-64v-96h-64v95.89zM448 0h-96v64h95.89l.11.11V160h64V64a64.19 64.19 0 0 0-64-64zM448 192h64v128h-64zM192 448h128v64H192zM128 128h256v256H128z'/%3e%3c/svg%3e");
 $bg-icon-summary-widget: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M448 0H64C28.8 0 0 28.8 0 64v384c0 35.2 28.8 64 64 64h384c35.2 0 64-28.8 64-64V64c0-35.2-28.8-64-64-64zm-24.1 305.2l-41.3 71.6-94.8-65.8 9.6 115h-82.7l9.6-115-94.8 65.8-41.3-71.6L192.5 256 88.1 206.8l41.3-71.6 94.8 65.8-9.6-115h82.7l-9.6 115 94.8-65.8 41.3 71.6L319.5 256l104.4 49.2z'/%3e%3c/svg%3e");
 $bg-icon-notebook: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M448 55.4c0-39.9-27.7-63.7-61.5-52.7L0 128h448V55.4zM448 160H0v288c0 35.2 28.8 64 64 64h384c35.2 0 64-28.8 64-64V224c0-35.2-28.8-64-64-64zm-32 256H224V256h192v160z'/%3e%3c/svg%3e");
--- a/src/styles-new/_controls.scss
+++ b/src/styles-new/_controls.scss
@ -0,0 +1,552 @@
 /*****************************************************************************
 * Open MCT, Copyright (c) 2014-2018, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT is licensed under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations
 * under the License.
 *
 * Open MCT includes source code licensed under additional open source
 * licenses. See the Open Source Licenses file (LICENSES.md) included with
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
 // VERSION MANUALLY RESTORED FROM VUE-LAYOUT
 /******************************************************** PLACEHOLDERS */
@mixin cControl() {
    $fs: 1em;
    @include userSelectNone();
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    &:before,
    &:after {
        font-family: symbolsfont;
        display: block;
        flex: 0 0 auto;
    }
    &:after {
        font-size: 0.8em;
    }
    [class*="__label"] {
        @include ellipsize();
        display: block;
        line-height: $fs; // Remove effect on top and bottom padding
        font-size: $fs;
    }
 }
@mixin cButton() {
    @include cControl();
    background: $colorBtnBg;
    border-radius: $controlCr;
    color: $colorBtnFg;
    cursor: pointer;
    padding: nth($btnPad, 1) nth($btnPad, 2);
    &:hover {
        background: $colorBtnBgHov;
        color: $colorBtnFgHov;
    }
    &[class*="--major"] {
        background: $colorBtnMajorBg;
        color: $colorBtnMajorFg;
        &:hover {
            background: $colorBtnMajorBgHov;
            color: $colorBtnMajorFgHov;
        }
    }
    &[class*='--caution'] {
        background: $colorBtnCautionBg;
        color: $colorBtnCautionFg;
        &:hover {
            background: $colorBtnCautionBgHov;
        }
    }
 }
@mixin cClickIcon() {
    // A clickable element that just includes the icon, no background
    // Padding is included to facilitate a bigger hit area
    // Make the icon bigger relative to its container
    @include cControl();
    $pLR: 3px;
    $pTB: 3px;
    border-radius: $controlCr;
    color: $colorKey;
    cursor: pointer;
    padding: $pTB $pLR ;
    &:hover {
        background: rgba($colorKey, 0.2);
    }
    &:before,
    *:before {
        // *:before handles any nested containers that may contain glyph elements
        // Needed for c-togglebutton.
        font-size: 1.3em;
    }
 }
@mixin cCtrlWrapper {
    // Provides a wrapper around  buttons and other controls
    // Contains control and provides positioning context for contained menu/palette.
    // Wraps --menu elements, contains button and menu
    overflow: visible;
    .c-menu {
        // Default position of contained menu
        top: 100%; left: 0;
    }
    &[class*='--menus-up'] {
        .c-menu {
            top: auto; bottom: 100%;
        }
    }
    &[class*='--menus-left'] {
        .c-menu {
            left: auto; right: 0;
        }
    }
 }
 /********* Buttons */
 // Optionally can include icon in :before via markup
 .c-button,
 .c-button--menu,
 button {
    @include cButton();
 }
 .c-button--menu {
    $m: $interiorMargin;
    &:before,
    > * {
        margin-right: $m;
    }
    &:after {
        content: $glyph-icon-arrow-down;
        font-family: symbolsfont;
        opacity: 0.5;
    }
 }
 /********* Icon Buttons */
 .c-click-icon {
    @include cClickIcon();
    &--menu {
        &:after {
            content: $glyph-icon-arrow-down;
            font-family: symbolsfont;
            font-size: 0.6em;
            margin-left: floor($interiorMarginSm * 0.8);
            opacity: 0.5;
        }
    }
    &--swatched {
        // Color control, show swatch element
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
        justify-content: center;
        > [class*='swatch'] {
            box-shadow: inset rgba(black, 0.2) 0 0 1px;
            flex: 0 0 auto;
            height: 4px;
            width: 100%;
            margin-top: 1px;
        }
        &:before {
            // Reduce size of icon to make a bit of room
            flex: 1 1 auto;
            font-size: 1.1em;
        }
    }
 }
 /******************************************************** DISCLOSURE CONTROLS */
 /********* Disclosure Button */
 // Provides a downward arrow icon that when clicked displays a context menu
 // Always placed AFTER an element
 .c-disclosure-button {
    @include cClickIcon();
    margin-left: $interiorMarginSm;
    &:before {
        content: $glyph-icon-arrow-down;
        font-family: symbolsfont;
        font-size: 0.7em;
    }
 }
    /********* Disclosure Triangle */
 // Provides an arrow icon that when clicked expands an element to reveal its contents.
 // Used in tree items. Always placed BEFORE an element.
 .c-disclosure-triangle {
    $d: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: $d;
    position: relative;
    &.is-enabled:before {
        $s: .65;
        content: $glyph-icon-arrow-right-equilateral;
        display: block;
        font-family: symbolsfont;
        font-size: 1rem * $s;
        position: absolute;
        transform-origin: floor(($d / 2) * $s); // This is slightly better than 'center'
        transition: transform 100ms ease-in-out;
    }
    &--expanded {
        &:before {
            transform: rotate(90deg);
        }
    }
 }
 /******************************************************** FORM ELEMENTS */
 /********* Inline inputs */
 .c-input-inline {
    // A text input or contenteditable element that indicates edit affordance on hover and looks like an input on focus
    @include input-base();
    border: 1px solid transparent;
    display: block !important;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    overflow: hidden;
    transition: all 250ms ease;
    white-space: nowrap;
    &:not(:focus) {
        text-overflow: ellipsis;
    }
    &:hover,
    &:focus {
        padding-left: $inputTextPLeftRight;
        padding-right: $inputTextPLeftRight;
    }
    &:hover {
        border-color: rgba($colorBodyFg, 0.2);
    }
    &:focus {
        @include nice-input($shdw: rgba(0, 0, 0, 0.6) 0 1px 3px);
        border-color: transparent;
    }
 }
 .c-labeled-input {
    // An input used in the Toolbar
    // Assumes label is before the input
    @include cControl();
    input {
        margin-left: $interiorMarginSm;
    }
 }
 /******************************************************** HYPERLINKS AND HYPERLINK BUTTONS */
 .c-hyperlink {
    &--link {
        color: $colorKey;
    }
    &--button {
        @include cButton();
    }
 }
 /******************************************************** MENUS */
@mixin menuOuter() {
    border-radius: $basicCr;
    background: $colorMenuBg;
    text-shadow: $shdwMenuText;
    padding: $interiorMarginSm;
    box-shadow: $shdwMenu;
    display: block;
    position: absolute;
    z-index: 70;
 }
@mixin menuInner() {
    color: $colorMenuFg;
    li {
        @include cControl();
        justify-content: start;
        color: $colorMenuFg;
        display: flex;
        padding: nth($menuItemPad, 1) nth($menuItemPad, 2);
        transition: $transIn;
        white-space: nowrap;
        &:hover {
            background: $colorMenuHovBg;
            color: $colorMenuHovFg;
            &:before {
                color: $colorMenuHovIc;
            }
        }
        &:before {
            color: $colorMenuIc;
            font-size: 1em;
            margin-right: $interiorMargin;
        }
    }
 }
 .c-menu {
    @include menuOuter();
    @include menuInner();
 }
 .c-super-menu {
    // Two column layout, menu items on left with detail of hover element on right
    @include menuOuter();
    display: flex;
    padding: $interiorMarginLg;
    flex-direction: row;
    > [class*="__"] {
        $m: $interiorMarginLg;
        flex: 1 1 50%;
        &:first-child {
            margin-right: $m;
        }
        &:last-child {
            border-left: 1px solid $colorInteriorBorder;
            padding-left: $m;
        }
    }
    &__menu {
        @include menuInner();
        overflow: auto;
        ul {
            margin-right: $interiorMarginSm; // Fend off scrollbar
        }
        li {
            border-radius: $controlCr;
        }
    }
    &__item-description {
        display: flex;
        flex-direction: column;
        justify-content: stretch;
        .l-item-description {
            &__icon,
            &__description {
                //flex: 1 1 50%;
            }
            &__name,
            &__description {
                margin-top: $interiorMarginLg;
            }
            &__icon {
                min-height: 20%;
                margin: 10% 25%;
            }
            &__name {
                flex: 0 0 auto;
                font-size: 1.25em;
            }
            &__description {
                font-size: $fontBaseSize;
            }
        }
    }
 }
 /******************************************************** PALETTES */
 .c-palette {
    display: flex;
    flex-flow: column nowrap;
    &__items {
        flex: 1 1 auto;
        display: grid;
        grid-template-columns: repeat(10, [col] auto );
        grid-gap: 1px;
    }
    &__item {
        $d: 16px;
        border: 1px solid transparent;
        cursor: pointer;
        width: 16px; height: 16px;
        transition: $transOut;
        &:hover {
            transition: $transIn;
            $o: 0.7;
            border-color: rgba($paletteItemBorderOuterColorSelected, $o);
            box-shadow: inset rgba($paletteItemBorderInnerColorSelected, $o) 0 0 0 1px;
        }
        &.is-selected {
            border-color: $paletteItemBorderOuterColorSelected !important;
            border-width: 2px;
            box-shadow: inset rgba($paletteItemBorderInnerColorSelected, 1) 0 0 0 1px;
        }
    }
    &__item-none {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        margin-bottom: $interiorMarginSm;
        .c-palette__item {
            @include noColor();
            border-color: $paletteItemBorderInnerColor;
            margin-right: $interiorMarginSm;
        }
    }
 }
 /******************************************************** TOOLBAR */
 .c-ctrl-wrapper {
    @include cCtrlWrapper();
 }
 .c-toolbar,
 .c-toolbar .c-ctrl-wrapper {
    display: flex;
    align-items: stretch;
 }
 .c-toolbar {
    height: 24px; // Need to standardize the height
    .c-click-icon {
        @include cControl();
        $pLR: $interiorMargin - 1;
        $pTB: 2px;
        color: $colorBodyFg;
        padding: $pTB $pLR;
        &--swatched {
            padding-bottom: floor($pTB / 2);
            width: 2em; // Standardize the width
        }
        &[class*='--caution'] {
            &:before {
                color: $colorBtnCautionBg;
            }
            &:hover {
                background: rgba($colorBtnCautionBgHov, 0.2);
                :before {
                    color: $colorBtnCautionBgHov;
                }
            }
        }
    }
    .c-labeled-input {
        font-size: 0.9em;
        input[type='number'] {
            width: 40px; // Number input sucks and must have size set using this method
        }
        + .c-labeled-input {
            margin-left: $interiorMargin;
        }
    }
 }
 /********* Button Sets */
 .c-button-set {
    // When one set is adjacent to another, provides a divider between
    display: inline-flex;
    flex: 0 0 auto;
    > * {
        // Assume buttons are immediate descendants
        flex: 0 0 auto;
        + * {
            // margin-left: $interiorMarginSm;
        }
    }
    + .c-button-set {
        $m: $interiorMargin;
        $b: 1px;
        &:before {
            content: '';
            display: block;
            width: $m + $b; // Allow for border
            border-right: $b solid $colorInteriorBorder;
            margin-right: $m;
        }
    }
    &[class*='--strip'] {
        // Buttons are smashed together with minimal margin
        // c-buttons don't have border-radius between buttons, creates a tool-button-strip look
        // c-click-icons get grouped more closely together
        &[class^="c-button"] {
            // Only apply the following to buttons that have background, eg. c-button
            border-radius: 0;
            + * {
                margin-left: 1px;
            }
            &:first-child {
                border-top-left-radius: $controlCr;
                border-bottom-left-radius: $controlCr;
            }
            &:last-child {
                border-top-right-radius: $controlCr;
                border-bottom-right-radius: $controlCr;
            }
        }
    }
 }
--- a/src/styles-new/_global.scss
+++ b/src/styles-new/_global.scss
@ -0,0 +1,379 @@
 /************************** FONTS */
@font-face {
    /*
    * Use https://icomoon.io/app with icomoon-project-openmct-symbols-16px.json to generate font files
    */
    font-family: 'symbolsfont';
    src: url($dirFonts + 'openmct-symbols-16px.eot');
    src: url($dirFonts + 'openmct-symbols-16px.eot?#iefix') format('embedded-opentype'),
    url($dirFonts + 'openmct-symbols-16px.woff') format('woff'),
    url($dirFonts + 'openmct-symbols-16px.ttf') format('truetype'),
    url($dirFonts + 'openmct-symbols-16px.svg') format('svg');
    font-weight: normal;
    font-style: normal;
 }
@font-face {
    /*
    * Use https://icomoon.io/app with icomoon-project-openmct-symbols-12px.json to generate font files
    */
    font-family: 'symbolsfont-12px';
    src: url($dirFonts + 'openmct-symbols-12px.eot');
    src: url($dirFonts + 'openmct-symbols-12px.eot?#iefix') format('embedded-opentype'),
    url($dirFonts + 'openmct-symbols-12px.woff') format('woff'),
    url($dirFonts + 'openmct-symbols-12px.ttf') format('truetype'),
    url($dirFonts + 'openmct-symbols-12px.svg') format('svg');
    font-weight: normal;
    font-style: normal;
 }
 /******************************* RESETS */
 *,
 :before,
 :after {
    box-sizing: border-box;
 }
 div {
    position: relative;
 }
 /******************************* UTILITIES */
 .u-contents {
    display: contents;
 }
 .u-space {
    // Provides a separator space between elements
    &--right {
        + [class*="__"] {
            margin-left: $interiorMarginLg !important;
        }
    }
 }
 /******************************* BROWSER ELEMENTS */
 body.desktop {
    ::-webkit-scrollbar {
        box-sizing: border-box;
        box-shadow: inset $scrollbarTrackShdw;
        background-color: $scrollbarTrackColorBg;
        height: $scrollbarTrackSize;
        width: $scrollbarTrackSize;
    }
    ::-webkit-scrollbar-thumb {
        box-sizing: border-box;
        background: $scrollbarThumbColor;
        &:hover {
            background: $scrollbarThumbColorHov;
        }
    }
    .overlay ::-webkit-scrollbar-thumb {
        background: $scrollbarThumbColorOverlay;
        &:hover {
            background: $scrollbarThumbColorOverlayHov;
        }
    }
    .menu ::-webkit-scrollbar-thumb {
        background: $scrollbarThumbColorMenu;
        &:hover {
            background: $scrollbarThumbColorMenuHov;
        }
    }
    ::-webkit-scrollbar-corner {
        background: transparent;
    }
 }
 input[type=number]::-webkit-inner-spin-button,
 input[type=number]::-webkit-outer-spin-button {
    //margin: -1px -5px inherit -5px !important;
    margin-right: -5px !important;
    margin-top: -1px !important;
 }
 /************************** HTML ENTITIES */
 a {
    color: $colorA;
    cursor: pointer;
    text-decoration: none;
    &:hover {
        color: $colorAHov;
    }
 }
 body, html {
    height: 100%;
    width: 100%;
 }
 body {
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: $fontBaseSize;
    font-weight: normal;
    background-color: $colorBodyBg;
    color: $colorBodyFg;
 }
 em {
    font-style: normal;
 }
 input, textarea {
    font-family: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
 }
 input[type=text],
 input[type=search],
 input[type=number] {
    @include nice-input();
    padding: $inputTextP;
    &.numeric {
        text-align: right;
    }
 }
 h1, h2, h3 {
    letter-spacing: 0.04em;
    margin: 0;
 }
 h1 {
    font-size: 1em;
    font-weight: normal !important;
    letter-spacing: 0.04em;
    line-height: 120%;
    margin-bottom: 20px;
    margin-top: 0;
 }
 p {
    margin-bottom: $interiorMarginLg;
 }
 ol, ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
 }
 table {
    border-spacing: 0;
    border-collapse: collapse;
 }
 li {
    list-style-type: none;
    margin: 0;
    padding: 0;
 }
 /******************************************************** HAS */
 // Local Controls: Controls placed in proximity to or overlaid on components and views
 body.desktop .has-local-controls {
    // Provides hover ability to show local controls
    &:hover [class*="local-controls--hidden"] {
        transition: opacity 50ms ease-in-out;
        opacity: 1;
        pointer-events: inherit;
    }
    [class*="local-controls--hidden"] {
        transition: opacity 500ms ease-in-out;
        opacity: 0;
        pointer-events: none;
    }
 }
 //[class*="local-controls"] {
 //    // An explicit outer holder for controls. Typically placed in upper right.
 //    //font-size: 0.7rem;
 //    display: flex;
 //    align-items: center;
 //    justify-content: flex-end;
 //
 //
 //    &.h-local-controls-overlay-content {
 //        // Imagery controls
 //        $p: $interiorMargin;
 //        position: absolute;
 //        top: $p; right: $p;
 //        z-index: 2;
 //    }
    //.l-btn-set,
    //.s-button {
    //    &:not(:first-child) {
    //        margin-left: $interiorMargin;
    //    }
    //}
 //}
 /************************** LEGACY */
 mct-container {
    display: block;
 }
 .abs {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: auto;
    width: auto;
 }
 .code {
    font-family: "Lucida Console", monospace;
    font-size: 0.7em;
    line-height: 150%;
    white-space: pre;
 }
 .codehilite {
    @extend .code;
    background-color: rgba($colorBodyFg, 0.1);
    padding: 1em;
 }
 .disabled,
 a.disabled {
    opacity: $controlDisabledOpacity;
    pointer-events: none !important;
    cursor: default !important;
 }
 .s-status-missing {
    // Labels. Expects .s-status-missing to be applied to mct-representation that contains
    .t-object-label .t-item-icon:before {
        content: $glyph-icon-object-unknown;
    }
    // Item, grid item. Expects .s-status-missing to be applied to mct-representation that contains .item.grid-item
    .item .t-item-icon-glyph:before {
        content: $glyph-icon-object-unknown;
    }
    // Object header. Expects .s-status-missing to be applied to mct-representation.object-header
    &.object-header {
        .type-icon:before {
            content: $glyph-icon-object-unknown;
        }
    }
    // Tree item. Expects .s-status-missing to be applied to .tree-item,
    // and mct-representation.search-item
    &.tree-item,
    &.search-item {
        > .rep-object-label .t-item-icon:before {
            content: $glyph-icon-object-unknown;
        }
    }
 }
 .align-right {
    text-align: right;
 }
 .centered {
    text-align: center;
 }
 .scrolling,
 .scroll {
    overflow: auto;
 }
 .vscroll {
    overflow-x: hidden;
    overflow-y: auto;
    &.scroll-pad {
        padding-right: $interiorMargin;
    }
 }
 .vscroll--persist {
    overflow-x: hidden;
    overflow-y: scroll;
 }
 .slidable {
    cursor: move; // Fallback
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
    &.horz {
        cursor: col-resize;
    }
    &.vert {
        cursor: row-resize;
    }
 }
 .no-margin {
    margin: 0;
 }
 .ds {
    box-shadow: rgba(#000, 0.7) 0 4px 10px 2px;
 }
 .capitalize {
    text-transform: capitalize;
 }
 .hide,
 .hidden,
 .t-main-view .hide-in-t-main-view {
    display: none !important;
 }
 .hide-nice {
    opacity: 0;
    pointer-events: none;
 }
 .invisible {
    display: block;
    visibility: hidden;
    height: 0;
    padding: 0;
    border: 0;
    margin: 0 !important;
    transform: scale(0);
    pointer-events: none;
    position: absolute;
 }
 .sep {
    color: rgba(#fff, 0.2);
 }
 .comma-list span {
    &:not(:first-child) {
        &:before {
            content: ', ';
        }
    }
 }
 /************************** TEMP LEGACY FIXES */
 .t-imagery {
    display: contents;
 }
 .t-frame-outer {
    min-width: 200px;
    min-height: 200px;
 }
--- a/src/styles-new/_glyphs.scss
+++ b/src/styles-new/_glyphs.scss
@ -0,0 +1,182 @@
@mixin glyphBefore($unicode, $family: 'symbolsfont') {
    &:before {
        content: $unicode;
        font-family: $family;
    }
 }
@mixin glyphAfter($unicode, $family: 'symbolsfont') {
    &:after {
        content: $unicode;
        font-family: $family;
    }
 }
@mixin glyphBg($glyphUrl) {
    background-image: $glyphUrl;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
 }
 [class*="icon-"] {
    &:before, &:after
    {
        -webkit-font-smoothing: antialiased;
    }
 }
 /************************** 16 PX CLASSES */
 .icon-alert-rect {  @include glyphBefore($glyph-icon-alert-rect); }
 .icon-alert-triangle {  @include glyphBefore($glyph-icon-alert-triangle); }
 .icon-arrow-down {  @include glyphBefore($glyph-icon-arrow-down); }
 .icon-arrow-left {  @include glyphBefore($glyph-icon-arrow-left); }
 .icon-arrow-right {  @include glyphBefore($glyph-icon-arrow-right); }
 .icon-arrow-double-up {  @include glyphBefore($glyph-icon-arrow-double-up); }
 .icon-arrow-tall-up {  @include glyphBefore($glyph-icon-arrow-tall-up); }
 .icon-arrow-tall-down {  @include glyphBefore($glyph-icon-arrow-tall-down); }
 .icon-arrow-double-down {  @include glyphBefore($glyph-icon-arrow-double-down); }
 .icon-arrow-up {  @include glyphBefore($glyph-icon-arrow-up); }
 .icon-asterisk {  @include glyphBefore($glyph-icon-asterisk); }
 .icon-bell {  @include glyphBefore($glyph-icon-bell); }
 .icon-box {  @include glyphBefore($glyph-icon-box); }
 .icon-box-with-arrow {  @include glyphBefore($glyph-icon-box-with-arrow); }
 .icon-check {  @include glyphBefore($glyph-icon-check); }
 .icon-connectivity {  @include glyphBefore($glyph-icon-connectivity); }
 .icon-database-in-brackets {  @include glyphBefore($glyph-icon-database-in-brackets); }
 .icon-eye-open {  @include glyphBefore($glyph-icon-eye-open); }
 .icon-gear {  @include glyphBefore($glyph-icon-gear); }
 .icon-hourglass {  @include glyphBefore($glyph-icon-hourglass); }
 .icon-info {  @include glyphBefore($glyph-icon-info); }
 .icon-link {  @include glyphBefore($glyph-icon-link); }
 .icon-lock {  @include glyphBefore($glyph-icon-lock); }
 .icon-minus {  @include glyphBefore($glyph-icon-minus); }
 .icon-people {  @include glyphBefore($glyph-icon-people); }
 .icon-person {  @include glyphBefore($glyph-icon-person); }
 .icon-plus {  @include glyphBefore($glyph-icon-plus); }
 .icon-trash {  @include glyphBefore($glyph-icon-trash); }
 .icon-x {  @include glyphBefore($glyph-icon-x); }
 .icon-brackets {  @include glyphBefore($glyph-icon-brackets); }
 .icon-crosshair {  @include glyphBefore($glyph-icon-crosshair); }
 .icon-grippy {  @include glyphBefore($glyph-icon-grippy); }
 .icon-arrow-right-equilateral {  @include glyphBefore($glyph-icon-arrow-right-equilateral); }
 .icon-arrows-out {  @include glyphBefore($glyph-icon-arrows-out); }
 .icon-arrows-right-left {  @include glyphBefore($glyph-icon-arrows-right-left); }
 .icon-arrows-up-down {  @include glyphBefore($glyph-icon-arrows-up-down); }
 .icon-bullet {  @include glyphBefore($glyph-icon-bullet); }
 .icon-calendar {  @include glyphBefore($glyph-icon-calendar); }
 .icon-chain-links {  @include glyphBefore($glyph-icon-chain-links); }
 .icon-collapse-pane-left {  @include glyphBefore($glyph-icon-collapse-pane-left); }
 .icon-collapse-pane-right {  @include glyphBefore($glyph-icon-collapse-pane-right); }
 .icon-download {  @include glyphBefore($glyph-icon-download); }
 .icon-duplicate {  @include glyphBefore($glyph-icon-duplicate); }
 .icon-folder-new {  @include glyphBefore($glyph-icon-folder-new); }
 .icon-fullscreen-collapse {  @include glyphBefore($glyph-icon-fullscreen-collapse); }
 .icon-fullscreen-expand {  @include glyphBefore($glyph-icon-fullscreen-expand); }
 .icon-layers {  @include glyphBefore($glyph-icon-layers); }
 .icon-line-horz {  @include glyphBefore($glyph-icon-line-horz); }
 .icon-magnify {  @include glyphBefore($glyph-icon-magnify); }
 .icon-magnify-in {  @include glyphBefore($glyph-icon-magnify-in); }
 .icon-magnify-out {  @include glyphBefore($glyph-icon-magnify-out); }
 .icon-menu-hamburger {  @include glyphBefore($glyph-icon-menu-hamburger); }
 .icon-move {  @include glyphBefore($glyph-icon-move); }
 .icon-new-window {  @include glyphBefore($glyph-icon-new-window); }
 .icon-paint-bucket {  @include glyphBefore($glyph-icon-paint-bucket); }
 .icon-pause {  @include glyphBefore($glyph-icon-pause); }
 .icon-pencil {  @include glyphBefore($glyph-icon-pencil); }
 .icon-play {  @include glyphBefore($glyph-icon-play); }
 .icon-plot-resource {  @include glyphBefore($glyph-icon-plot-resource); }
 .icon-pointer-left {  @include glyphBefore($glyph-icon-pointer-left); }
 .icon-pointer-right {  @include glyphBefore($glyph-icon-pointer-right); }
 .icon-refresh {  @include glyphBefore($glyph-icon-refresh); }
 .icon-save {  @include glyphBefore($glyph-icon-save); }
 .icon-sine {  @include glyphBefore($glyph-icon-sine); }
 .icon-font {  @include glyphBefore($glyph-icon-font); }
 .icon-thumbs-strip {  @include glyphBefore($glyph-icon-thumbs-strip); }
 .icon-two-parts-both {  @include glyphBefore($glyph-icon-two-parts-both); }
 .icon-two-parts-one-only {  @include glyphBefore($glyph-icon-two-parts-one-only); }
 .icon-resync {  @include glyphBefore($glyph-icon-resync); }
 .icon-reset {  @include glyphBefore($glyph-icon-reset); }
 .icon-x-in-circle {  @include glyphBefore($glyph-icon-x-in-circle); }
 .icon-brightness {  @include glyphBefore($glyph-icon-brightness); }
 .icon-contrast {  @include glyphBefore($glyph-icon-contrast); }
 .icon-expand {  @include glyphBefore($glyph-icon-expand); }
 .icon-list-view {  @include glyphBefore($glyph-icon-list-view); }
 .icon-grid-snap-to {  @include glyphBefore($glyph-icon-grid-snap-to); }
 .icon-grid-snap-no {  @include glyphBefore($glyph-icon-grid-snap-no); }
 .icon-frame-show {  @include glyphBefore($glyph-icon-frame-show); }
 .icon-frame-hide {  @include glyphBefore($glyph-icon-frame-hide); }
 .icon-import {  @include glyphBefore($glyph-icon-import); }
 .icon-export {  @include glyphBefore($glyph-icon-export); }
 .icon-font-size {  @include glyphBefore($glyph-icon-font-size); }
 .icon-activity {  @include glyphBefore($glyph-icon-activity); }
 .icon-activity-mode {  @include glyphBefore($glyph-icon-activity-mode); }
 .icon-autoflow-tabular {  @include glyphBefore($glyph-icon-autoflow-tabular); }
 .icon-clock {  @include glyphBefore($glyph-icon-clock); }
 .icon-database {  @include glyphBefore($glyph-icon-database); }
 .icon-database-query {  @include glyphBefore($glyph-icon-database-query); }
 .icon-dataset {  @include glyphBefore($glyph-icon-dataset); }
 .icon-datatable {  @include glyphBefore($glyph-icon-datatable); }
 .icon-dictionary {  @include glyphBefore($glyph-icon-dictionary); }
 .icon-folder {  @include glyphBefore($glyph-icon-folder); }
 .icon-image {  @include glyphBefore($glyph-icon-image); }
 .icon-layout {  @include glyphBefore($glyph-icon-layout); }
 .icon-object {  @include glyphBefore($glyph-icon-object); }
 .icon-object-unknown {  @include glyphBefore($glyph-icon-object-unknown); }
 .icon-packet {  @include glyphBefore($glyph-icon-packet); }
 .icon-page {  @include glyphBefore($glyph-icon-page); }
 .icon-plot-overlay {  @include glyphBefore($glyph-icon-plot-overlay); }
 .icon-plot-stacked {  @include glyphBefore($glyph-icon-plot-stacked); }
 .icon-session {  @include glyphBefore($glyph-icon-session); }
 .icon-tabular {  @include glyphBefore($glyph-icon-tabular); }
 .icon-tabular-lad {  @include glyphBefore($glyph-icon-tabular-lad); }
 .icon-tabular-lad-set {  @include glyphBefore($glyph-icon-tabular-lad-set); }
 .icon-tabular-realtime {  @include glyphBefore($glyph-icon-tabular-realtime); }
 .icon-tabular-scrolling {  @include glyphBefore($glyph-icon-tabular-scrolling); }
 .icon-telemetry {  @include glyphBefore($glyph-icon-telemetry); }
 .icon-telemetry-panel {  @include glyphBefore($glyph-icon-telemetry-panel); }
 .icon-timeline {  @include glyphBefore($glyph-icon-timeline); }
 .icon-timer {  @include glyphBefore($glyph-icon-timer); }
 .icon-topic {  @include glyphBefore($glyph-icon-topic); }
 .icon-box-with-dashed-lines {  @include glyphBefore($glyph-icon-box-with-dashed-lines); }
 .icon-summary-widget {  @include glyphBefore($glyph-icon-summary-widget); }
 .icon-notebook {  @include glyphBefore($glyph-icon-notebook); }
 /************************** 12 PX CLASSES */
 .icon-crosshair-12px {  @include glyphBefore($glyph-icon-crosshair,'symbolsfont-12px'); }
 .icon-folder-12px {  @include glyphBefore($glyph-icon-folder,'symbolsfont-12px'); }
 .icon-list-view-12px {  @include glyphBefore($glyph-icon-list-view,'symbolsfont-12px'); }
 .icon-grippy-12px {  @include glyphBefore($glyph-icon-grippy,'symbolsfont-12px'); }
 /************************** GLYPH BG CLASSES */
 .bg-icon-activity { @include glyphBg($bg-icon-activity); }
 .bg-icon-activity-mode { @include glyphBg($bg-icon-activity-mode); }
 .bg-icon-autoflow-tabular { @include glyphBg($bg-icon-autoflow-tabular); }
 .bg-icon-clock { @include glyphBg($bg-icon-clock); }
 .bg-icon-database { @include glyphBg($bg-icon-database); }
 .bg-icon-database-query { @include glyphBg($bg-icon-database-query); }
 .bg-icon-dataset { @include glyphBg($bg-icon-dataset); }
 .bg-icon-datatable { @include glyphBg($bg-icon-datatable); }
 .bg-icon-dictionary { @include glyphBg($bg-icon-dictionary); }
 .bg-icon-folder { @include glyphBg($bg-icon-folder); }
 .bg-icon-image { @include glyphBg($bg-icon-image); }
 .bg-icon-layout { @include glyphBg($bg-icon-layout); }
 .bg-icon-object { @include glyphBg($bg-icon-object); }
 .bg-icon-object-unknown { @include glyphBg($bg-icon-object-unknown); }
 .bg-icon-packet { @include glyphBg($bg-icon-packet); }
 .bg-icon-page { @include glyphBg($bg-icon-page); }
 .bg-icon-plot-overlay { @include glyphBg($bg-icon-plot-overlay); }
 .bg-icon-plot-stacked { @include glyphBg($bg-icon-plot-stacked); }
 .bg-icon-session { @include glyphBg($bg-icon-session); }
 .bg-icon-tabular { @include glyphBg($bg-icon-tabular); }
 .bg-icon-tabular-lad { @include glyphBg($bg-icon-tabular-lad); }
 .bg-icon-tabular-lad-set { @include glyphBg($bg-icon-tabular-lad-set); }
 .bg-icon-tabular-realtime { @include glyphBg($bg-icon-tabular-realtime); }
 .bg-icon-tabular-scrolling { @include glyphBg($bg-icon-tabular-scrolling); }
 .bg-icon-telemetry { @include glyphBg($bg-icon-telemetry); }
 .bg-icon-timeline { @include glyphBg($bg-icon-timeline); }
 .bg-icon-timer { @include glyphBg($bg-icon-timer); }
 .bg-icon-topic { @include glyphBg($bg-icon-topic); }
 .bg-icon-box-with-dashed-lines { @include glyphBg($bg-icon-box-with-dashed-lines); }
 .bg-icon-summary-widget { @include glyphBg($bg-icon-summary-widget); }
 .bg-icon-notebook { @include glyphBg($bg-icon-notebook); }
--- a/src/styles-new/_mixins.scss
+++ b/src/styles-new/_mixins.scss
@ -0,0 +1,257 @@
 /*****************************************************************************
 * Open MCT, Copyright (c) 2014-2018, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT is licensed under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations
 * under the License.
 *
 * Open MCT includes source code licensed under additional open source
 * licenses. See the Open Source Licenses file (LICENSES.md) included with
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
 // VERSION MANUALLY RESTORED FROM VUE-LAYOUT
 /************************** VISUALS */
@mixin ancillaryIcon($d, $c) {
    // Used for small icons used in combination with larger icons,
    // like the link and alert icons in tree items.
    color: $c;
    font-size: $d;
    line-height: $d;
    height: $d;
    width: $d;
 }
@mixin bgDiagonalStripes($c: yellow, $a: 0.1, $d: 40px) {
    background-image: linear-gradient(-45deg,
        rgba($c, $a) 25%, transparent 25%,
        transparent 50%, rgba($c, $a) 50%,
        rgba($c, $a) 75%, transparent 75%,
        transparent 100%
    );
    background-repeat: repeat;
    background-size: $d $d;
 }
@mixin bgStripes($c: yellow, $a: 0.1, $bgsize: 5px, $angle: 90deg) {
    background-image: linear-gradient($angle,
        rgba($c, $a) 25%, transparent 25%,
        transparent 50%, rgba($c, $a) 50%,
        rgba($c, $a) 75%, transparent 75%,
        transparent 100%
    );
    background-repeat: repeat;
    background-size: $bgsize $bgsize;
 }
@mixin noColor() {
    // A "no fill/stroke" selection option. Used in palettes.
    $c: red;
    $s: 48%;
    $e: 52%;
    background-image: linear-gradient(-45deg,
        transparent $s - 5%,
        $c $s,
        $c $e,
        transparent $e + 5%
    );
    background-repeat: no-repeat;
    background-size: contain;
 }
@mixin bgTicks($c: $colorBodyFg, $repeatDir: 'x') {
    $deg: 90deg;
    @if ($repeatDir != 'x') {
        $deg: 0deg;
        $repeatDir: repeat-y;
    } @else {
        $repeatDir: repeat-x;
    }
    background-image: linear-gradient($deg,
            $c 1px, transparent 1px,
            transparent 100%
    );
    background-repeat: $repeatDir;
 }
@mixin bgVertStripes($c: yellow, $a: 0.1, $d: 40px) {
    @include background-image(linear-gradient(-90deg,
        rgba($c, $a) 0%, rgba($c, $a) 50%,
        transparent 50%, transparent 100%
    ));
    background-repeat: repeat;
    background-size: $d $d;
 }
 /************************** LAYOUT */
@mixin abs($m: 0) {
    position: absolute;
    top: $m; right: $m; bottom: $m; left: $m;
 }
@mixin gridTwoColumn() {
    display: grid;
    grid-row-gap: 0;
    grid-template-columns: 1fr 2fr;
    align-items: start;
    [class*="header"] {
        border-radius: $smallCr;
        background-color: $colorInspectorSectionHeaderBg;
        color: $colorInspectorSectionHeaderFg;
        margin: 0 0 $interiorMarginSm 0;
        padding: $interiorMarginSm $interiorMargin;
        &:not(:first-child) {
            // Allow multiple headers within a component
            margin-top: $interiorMarginLg;
        }
    }
    [class*="span-all"],
    [class*="header"] {
        @include gridTwoColumnSpanCols();
    }
 }
@mixin gridTwoColumnSpanCols() {
    grid-column: 1 / 3;
 }
 /************************** TEXT */
@mixin ellipsize() {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
 }
@mixin reverseEllipsis() {
    @include ellipsize();
    direction: rtl;
    unicode-bidi:bidi-override;
 }
@mixin test($c: #ffcc00, $a: 0.2) {
    background-color: rgba($c, $a) !important;
 }
 /************************** CONTROLS, BUTTONS */
@mixin input-base() {
    appearance: none;
    border: none;
    border-radius: $controlCr;
    outline: none;
    &:focus {
        outline: 0;
    }
    &.error {
        background-color: $colorFormFieldErrorBg;
        color: $colorFormFieldErrorFg;
    }
 }
@mixin nice-input($bg: $colorInputBg, $fg: $colorInputFg, $shdw: rgba(black, 0.5) 0 0px 2px) {
    @include input-base();
    background: $bg;
    color: $fg;
    box-shadow: inset $shdw;
 }
@mixin button($bg: $colorBtnBg, $fg: $colorBtnFg, $radius: $controlCr, $shdw: none) {
    background: $bg;
    color: $fg;
    border-radius: $radius;
    box-shadow: $shdw;
 }
@mixin wrappedInput() {
    // An input that is wrapped. Optionally includes a __label or icon element.
    // Based on .c-search.
    @include nice-input();
    display: flex;
    align-items: center;
    padding-left: 4px;
    padding-right: 4px;
    &:before,
    [class*='__label'] {
        opacity: 0.5;
    }
    &:before {
        // Adds an icon. Content defined in class.
        direction: rtl; // Aligns glyph to right-hand side of container, for transition
        display: block;
        font-family: symbolsfont;
        flex: 0 0 auto;
        overflow: hidden;
        padding: 2px 0; // Prevents clipping
        transition: width 250ms ease;
        width: 1em;
    }
    &:hover {
        box-shadow: inset rgba(black, 0.8) 0 0px 2px;
        &:before {
            opacity: 0.9;
        }
    }
    &--major {
        padding: 4px;
    }
    &__input,
    input[type='text'],
    input[type='search'],
    input[type='number'] {
        background: none  !important;
        box-shadow: none !important; // !important needed to override default for [input]
        flex: 1 1 auto;
        padding-left: 2px !important;
        padding-right: 2px !important;
        min-width: 10px; // Must be set to allow input to collapse below browser min
    }
    &.is-active {
        &:before {
            padding: 2px 0px;
            width: 0px;
        }
    }
 }
 /************************** MATH */
@function percentToDecimal($p) {
    @return $p / 100%;
 }
@function decimalToPercent($d) {
    @return percentage($d);
 }
 /************************** UTILITIES */
@mixin browserPrefix($prop, $val) {
    #{$prop}: $val;
    -ms-#{$prop}: $val;
    -moz-#{$prop}: $val;
    -webkit-#{$prop}: $val;
 }
@mixin userSelectNone() {
    @include browserPrefix(user-select, none);
 }
--- a/src/styles-new/core.scss
+++ b/src/styles-new/core.scss
@ -0,0 +1,13 @@
@import "vendor/normalize.min.css";
@import "sass-base.scss";
 /******************** RENDERS CSS */
@import "glyphs";
@import "global";
@import "controls";
 /******************** LEGACY CSS */
 $output-bourbon-deprecation-warnings: false;
@import "bourbon";
@import "legacy-styles";
--- a/src/styles-new/fonts/icomoon-project-openmct-symbols-12px.json
+++ b/src/styles-new/fonts/icomoon-project-openmct-symbols-12px.json
@ -0,0 +1,233 @@
 {
  "metadata": {
    "name": "openmct-symbols-12px",
    "lastOpened": 0,
    "created": 1527031065005
  },
  "iconSets": [
    {
      "selection": [
        {
          "order": 9,
          "id": 6,
          "name": "icon12-crosshair",
          "prevSize": 12,
          "code": 59696,
          "tempChar": ""
        },
        {
          "order": 11,
          "id": 8,
          "name": "icon12-grippy",
          "prevSize": 12,
          "code": 59697,
          "tempChar": ""
        },
        {
          "order": 10,
          "id": 7,
          "name": "icon12-list-view",
          "prevSize": 12,
          "code": 921666,
          "tempChar": ""
        },
        {
          "order": 6,
          "id": 3,
          "prevSize": 12,
          "code": 921865,
          "name": "icon12-folder",
          "tempChar": ""
        }
      ],
      "id": 0,
      "metadata": {
        "name": "openmct-symbols-12px",
        "importSize": {
          "width": 279,
          "height": 384
        },
        "designer": "Charles Hacskaylo"
      },
      "height": 1024,
      "prevSize": 12,
      "icons": [
        {
          "id": 6,
          "paths": [
            "M597.333 0h-170.667v256h170.667v-256z",
            "M1024 426.667h-256v170.667h256v-170.667z",
            "M597.333 768h-170.667v256h170.667v-256z",
            "M256 426.667h-256v170.667h256v-170.667z"
          ],
          "attrs": [
            {},
            {},
            {},
            {}
          ],
          "isMulticolor": false,
          "isMulticolor2": false,
          "grid": 0,
          "tags": [
            "icon12-crosshair"
          ],
          "colorPermutations": {
            "1161751": [
              {},
              {},
              {},
              {}
            ]
          }
        },
        {
          "id": 8,
          "paths": [
            "M186.347 232.64c0 51.458-41.715 93.173-93.173 93.173s-93.173-41.715-93.173-93.173c0-51.458 41.715-93.173 93.173-93.173s93.173 41.715 93.173 93.173z",
            "M186.347 511.867c0 51.458-41.715 93.173-93.173 93.173s-93.173-41.715-93.173-93.173c0-51.458 41.715-93.173 93.173-93.173s93.173 41.715 93.173 93.173z",
            "M186.347 791.36c0 51.458-41.715 93.173-93.173 93.173s-93.173-41.715-93.173-93.173c0-51.458 41.715-93.173 93.173-93.173s93.173 41.715 93.173 93.173z",
            "M465.573 93.173c0 51.458-41.715 93.173-93.173 93.173s-93.173-41.715-93.173-93.173c0-51.458 41.715-93.173 93.173-93.173s93.173 41.715 93.173 93.173z",
            "M465.573 372.4c0 51.458-41.715 93.173-93.173 93.173s-93.173-41.715-93.173-93.173c0-51.458 41.715-93.173 93.173-93.173s93.173 41.715 93.173 93.173z",
            "M379.028 558.728c51.328 3.652 89.978 48.223 86.325 99.551s-48.223 89.978-99.551 86.325c-51.328-3.652-89.978-48.223-86.325-99.551s48.223-89.978 99.551-86.325z",
            "M379.017 837.96c51.328 3.652 89.978 48.223 86.325 99.551s-48.223 89.978-99.551 86.325c-51.328-3.652-89.978-48.223-86.325-99.551s48.223-89.978 99.551-86.325z",
            "M744.773 232.64c0 51.458-41.715 93.173-93.173 93.173s-93.173-41.715-93.173-93.173c0-51.458 41.715-93.173 93.173-93.173s93.173 41.715 93.173 93.173z",
            "M744.773 511.867c0 51.458-41.715 93.173-93.173 93.173s-93.173-41.715-93.173-93.173c0-51.458 41.715-93.173 93.173-93.173s93.173 41.715 93.173 93.173z",
            "M744.773 791.36c0 51.458-41.715 93.173-93.173 93.173s-93.173-41.715-93.173-93.173c0-51.458 41.715-93.173 93.173-93.173s93.173 41.715 93.173 93.173z"
          ],
          "attrs": [
            {},
            {},
            {},
            {},
            {},
            {},
            {},
            {},
            {},
            {}
          ],
          "width": 745,
          "isMulticolor": false,
          "isMulticolor2": false,
          "grid": 0,
          "tags": [
            "icon12-grippy"
          ],
          "colorPermutations": {
            "1161751": [
              {},
              {},
              {},
              {},
              {},
              {},
              {},
              {},
              {},
              {}
            ]
          }
        },
        {
          "id": 7,
          "paths": [
            "M0 0h1024v170.667h-1024v-170.667z",
            "M0 426.667h1024v170.667h-1024v-170.667z",
            "M0 853.333h1024v170.667h-1024v-170.667z"
          ],
          "attrs": [
            {},
            {},
            {}
          ],
          "isMulticolor": false,
          "isMulticolor2": false,
          "grid": 0,
          "tags": [
            "icon12-list-view"
          ],
          "colorPermutations": {
            "1161751": [
              {},
              {},
              {}
            ]
          }
        },
        {
          "id": 3,
          "paths": [
            "M938.667 170.667h-341.333l-110.32-110.32c-33.2-33.2-98.667-60.347-145.68-60.347h-256c-47.073 0.136-85.197 38.26-85.333 85.32l-0 341.346c0.136-47.073 38.26-85.197 85.32-85.333l853.346-0c47.073 0.136 85.197 38.26 85.333 85.32l0-170.654c-0.136-47.073-38.26-85.197-85.32-85.333z",
            "M85.333 426.667h853.333c47.128 0 85.333 38.205 85.333 85.333v426.667c0 47.128-38.205 85.333-85.333 85.333h-853.333c-47.128 0-85.333-38.205-85.333-85.333v-426.667c0-47.128 38.205-85.333 85.333-85.333z"
          ],
          "attrs": [],
          "isMulticolor": false,
          "grid": 0,
          "tags": [
            "icon12-folder"
          ],
          "colorPermutations": {
            "1161751": [
              {
                "f": 0
              },
              {
                "f": 0
              }
            ]
          }
        }
      ],
      "invisible": false,
      "colorThemes": [
        [
          [
            0,
            0,
            0,
            1
          ],
          [
            0,
            161,
            75,
            1
          ]
        ]
      ],
      "colorThemeIdx": 0
    }
  ],
  "preferences": {
    "showGlyphs": true,
    "showCodes": true,
    "showQuickUse": true,
    "showQuickUse2": true,
    "showSVGs": true,
    "fontPref": {
      "prefix": "icon-",
      "metadata": {
        "fontFamily": "openmct-symbols-12px",
        "majorVersion": 1,
        "minorVersion": 0
      },
      "metrics": {
        "emSize": 1024,
        "baseline": 6.25,
        "whitespace": 50
      },
      "embed": false
    },
    "imagePref": {
      "prefix": "icon-",
      "png": true,
      "useClassSelector": true,
      "color": 0,
      "bgColor": 16777215
    },
    "historySize": 100,
    "gridSize": 16
  },
  "uid": -1
 }
--- a/src/styles-new/fonts/icomoon-project-openmct-symbols-16px.json
+++ b/src/styles-new/fonts/icomoon-project-openmct-symbols-16px.json
--- a/src/styles-new/fonts/openmct-symbols-12px.eot
+++ b/src/styles-new/fonts/openmct-symbols-12px.eot
--- a/src/styles-new/fonts/openmct-symbols-12px.svg
+++ b/src/styles-new/fonts/openmct-symbols-12px.svg
@ -0,0 +1,14 @@
 <?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
 <svg xmlns="http://www.w3.org/2000/svg">
 <metadata>Generated by IcoMoon</metadata>
 <defs>
 <font id="openmct-symbols-12px" horiz-adv-x="1024">
 <font-face units-per-em="1024" ascent="960" descent="-64" />
 <missing-glyph horiz-adv-x="1024" />
 <glyph unicode="&#x20;" horiz-adv-x="512" d="" />
 <glyph unicode="&#xe930;" glyph-name="icon12-crosshair" d="M597.333 938.667h-170.667v-256h170.667v256zM1024 512h-256v-170.667h256v170.667zM597.333 170.667h-170.667v-256h170.667v256zM256 512h-256v-170.667h256v170.667z" />
 <glyph unicode="&#xe931;" glyph-name="icon12-grippy" horiz-adv-x="745" d="M186.347 706.027c0-51.458-41.715-93.173-93.173-93.173s-93.173 41.715-93.173 93.173c0 51.458 41.715 93.173 93.173 93.173s93.173-41.715 93.173-93.173zM186.347 426.8c0-51.458-41.715-93.173-93.173-93.173s-93.173 41.715-93.173 93.173c0 51.458 41.715 93.173 93.173 93.173s93.173-41.715 93.173-93.173zM186.347 147.307c0-51.458-41.715-93.173-93.173-93.173s-93.173 41.715-93.173 93.173c0 51.458 41.715 93.173 93.173 93.173s93.173-41.715 93.173-93.173zM465.573 845.494c0-51.458-41.715-93.173-93.173-93.173s-93.173 41.715-93.173 93.173c0 51.458 41.715 93.173 93.173 93.173s93.173-41.715 93.173-93.173zM465.573 566.267c0-51.458-41.715-93.173-93.173-93.173s-93.173 41.715-93.173 93.173c0 51.458 41.715 93.173 93.173 93.173s93.173-41.715 93.173-93.173zM379.028 379.939c51.328-3.652 89.978-48.223 86.325-99.551s-48.223-89.978-99.551-86.325c-51.328 3.652-89.978 48.223-86.325 99.551s48.223 89.978 99.551 86.325zM379.017 100.707c51.328-3.652 89.978-48.223 86.325-99.551s-48.223-89.978-99.551-86.325c-51.328 3.652-89.978 48.223-86.325 99.551s48.223 89.978 99.551 86.325zM744.773 706.027c0-51.458-41.715-93.173-93.173-93.173s-93.173 41.715-93.173 93.173c0 51.458 41.715 93.173 93.173 93.173s93.173-41.715 93.173-93.173zM744.773 426.8c0-51.458-41.715-93.173-93.173-93.173s-93.173 41.715-93.173 93.173c0 51.458 41.715 93.173 93.173 93.173s93.173-41.715 93.173-93.173zM744.773 147.307c0-51.458-41.715-93.173-93.173-93.173s-93.173 41.715-93.173 93.173c0 51.458 41.715 93.173 93.173 93.173s93.173-41.715 93.173-93.173z" />
 <glyph unicode="&#xe1042;" glyph-name="icon12-list-view" d="M0 938.667h1024v-170.667h-1024v170.667zM0 512h1024v-170.667h-1024v170.667zM0 85.334h1024v-170.667h-1024v170.667z" />
 <glyph unicode="&#xe1109;" glyph-name="icon12-folder" d="M938.667 768h-341.333l-110.32 110.32c-33.2 33.2-98.667 60.347-145.68 60.347h-256c-47.073-0.136-85.197-38.26-85.333-85.32v-341.346c0.136 47.073 38.26 85.197 85.32 85.333h853.346c47.073-0.136 85.197-38.26 85.333-85.32v170.654c-0.136 47.073-38.26 85.197-85.32 85.333zM85.333 512h853.333c47.128 0 85.333-38.205 85.333-85.333v-426.667c0-47.128-38.205-85.333-85.333-85.333h-853.333c-47.128 0-85.333 38.205-85.333 85.333v426.667c0 47.128 38.205 85.333 85.333 85.333z" />
 </font></defs></svg>
--- a/src/styles-new/fonts/openmct-symbols-12px.ttf
+++ b/src/styles-new/fonts/openmct-symbols-12px.ttf
--- a/src/styles-new/fonts/openmct-symbols-12px.woff
+++ b/src/styles-new/fonts/openmct-symbols-12px.woff
--- a/src/styles-new/fonts/openmct-symbols-16px.eot
+++ b/src/styles-new/fonts/openmct-symbols-16px.eot
--- a/src/styles-new/fonts/openmct-symbols-16px.svg
+++ b/src/styles-new/fonts/openmct-symbols-16px.svg
@ -0,0 +1,124 @@
 <?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
 <svg xmlns="http://www.w3.org/2000/svg">
 <metadata>Generated by IcoMoon</metadata>
 <defs>
 <font id="openmct-symbols-16px" horiz-adv-x="1024">
 <font-face units-per-em="1024" ascent="960" descent="-64" />
 <missing-glyph horiz-adv-x="1024" />
 <glyph unicode="&#x20;" horiz-adv-x="512" d="" />
 <glyph unicode="&#xe900;" glyph-name="icon-alert-rect" d="M896 960h-768c-70.6-0.2-127.8-57.4-128-128v-768c0.2-70.6 57.4-127.8 128-128h768c70.6 0.2 127.8 57.4 128 128v768c-0.2 70.6-57.4 127.8-128 128zM576 64h-128v128h128v-128zM597.8 448l-37.8-192h-96l-37.8 192v384h171.8v-384z" />
 <glyph unicode="&#xe901;" glyph-name="icon-alert-triangle" d="M998.2 111.2l-422.6 739.6c-35 61.2-92 61.2-127 0l-422.8-739.6c-35-61.2-6-111.2 64.4-111.2h843.4c70.6 0 99.6 50 64.6 111.2zM576 64h-128v128h128v-128zM597.8 448l-37.8-192h-96l-37.8 192v256h171.8v-256z" />
 <glyph unicode="&#xe902;" glyph-name="icon-arrow-down" d="M512 192l512 512h-1024z" />
 <glyph unicode="&#xe903;" glyph-name="icon-arrow-left" d="M256 448l512-512v1024z" />
 <glyph unicode="&#xe904;" glyph-name="icon-arrow-right" d="M768 448l-512 512v-1024z" />
 <glyph unicode="&#xe905;" glyph-name="icon-arrow-double-up" d="M510 450l512-512h-1024zM510 962l512-512h-1024z" />
 <glyph unicode="&#xe906;" glyph-name="icon-arrow-tall-up" d="M512 960l512-1024h-1024z" />
 <glyph unicode="&#xe907;" glyph-name="icon-arrow-tall-down" d="M512-64l-512 1024h1024z" />
 <glyph unicode="&#xe908;" glyph-name="icon-arrow-double-down" d="M510 450l-512 512h1024zM510-62l-512 512h1024z" />
 <glyph unicode="&#xe909;" glyph-name="icon-arrow-up" d="M512 704l-512-512h1024z" />
 <glyph unicode="&#xe910;" glyph-name="icon-asterisk" d="M1004.166 619.542l-97.522 168.916-330.534-229.414 33.414 400.956h-195.048l33.414-400.956-330.534 229.414-97.522-168.916 363.944-171.542-363.944-171.542 97.522-168.916 330.534 229.414-33.414-400.956h195.048l-33.414 400.956 330.534-229.414 97.522 168.916-363.944 171.542z" />
 <glyph unicode="&#xe911;" glyph-name="icon-bell" d="M512-64c106 0 192 86 192 192h-384c0-106 86-192 192-192zM896 512v64c0 212-172 384-384 384s-384-172-384-384v-64c0-70.6-57.4-128-128-128v-128h1024v128c-70.6 0-128 57.4-128 128z" />
 <glyph unicode="&#xe912;" glyph-name="icon-box" d="M0 960h1024v-1024h-1024v1024z" />
 <glyph unicode="&#xe913;" glyph-name="icon-box-with-arrow-cursor" d="M894 962h-768c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128h400c-2.2 3.8-4 7.6-5.8 11.4l-255.2 576.8c-21.4 48.4-10.8 105 26.6 142.4 24.4 24.4 57.2 37.4 90.4 37.4 17.4 0 35.2-3.6 51.8-11l576.6-255.4c4-1.8 7.8-3.8 11.4-5.8v400.2c0.2 70.4-57.4 128-127.8 128zM958.6 322.6l-576.6 255.4 255.4-576.6 64.6 128.6 192-192 128 128-192 192z" />
 <glyph unicode="&#xe914;" glyph-name="icon-check" d="M1024 960l-640-640-384 384v-384l384-384 640 640z" />
 <glyph unicode="&#xe915;" glyph-name="icon-connectivity" d="M704 384c0-70.4-57.6-128-128-128h-128c-70.4 0-128 57.6-128 128v128c0 70.4 57.6 128 128 128h128c70.4 0 128-57.6 128-128v-128zM1024 448l-192 320v-640zM0 448l192 320v-640z" />
 <glyph unicode="&#xe916;" glyph-name="icon-database-in-brackets" d="M768 608c0-53.019-114.615-96-256-96s-256 42.981-256 96c0 53.019 114.615 96 256 96s256-42.981 256-96zM768 288v256c0-53-114.6-96-256-96s-256 43-256 96v-256c0-53 114.6-96 256-96s256 43 256 96zM832 960h-128v-192h127.6c0.2 0 0.2-0.2 0.4-0.4v-639.4c0-0.2-0.2-0.2-0.4-0.4h-127.6v-192h128c105.6 0 192 86.4 192 192v640.2c0 105.6-86.4 192-192 192zM192 128.4v639.4c0 0.2 0.2 0.2 0.4 0.4h127.6v191.8h-128c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h128v192h-127.6c-0.2 0-0.4 0.2-0.4 0.4z" />
 <glyph unicode="&#xe917;" glyph-name="icon-eye-open" d="M512 843.6c-245.8 0-452.2-168-510.8-395.6 58.6-227.4 265-395.6 510.8-395.6s452.2 168 510.8 395.6c-58.6 227.4-265 395.6-510.8 395.6zM829.2 371.6c-22.6-34.4-50.6-64.8-83-90.4-32.8-25.8-69-45.6-108-59.4-40.4-14.2-82.8-21.4-126-21.4s-85.8 7.2-126 21.4c-39 13.8-75.4 33.8-108 59.4-32.4 25.6-60.4 55.8-83 90.4-15.8 24-28.8 49.6-38.6 76.4 10 26.8 23 52.4 38.6 76.4 22.6 34.4 50.6 64.8 83 90.4 32.8 25.8 69 45.6 108 59.4 40.4 14.2 82.8 21.4 126 21.4s85.8-7.2 126-21.4c39-13.8 75.4-33.8 108-59.4 32.4-25.6 60.4-55.8 83-90.4 15.8-24 28.8-49.6 38.6-76.4-9.8-26.8-22.8-52.4-38.6-76.4zM704 448c0-106.039-85.961-192-192-192s-192 85.961-192 192c0 106.039 85.961 192 192 192s192-85.961 192-192z" />
 <glyph unicode="&#xe918;" glyph-name="icon-gear" d="M1024 384v128l-140.976 35.244c-8.784 32.922-21.818 64.106-38.504 92.918l74.774 124.622-90.51 90.51-124.622-74.774c-28.812 16.686-59.996 29.72-92.918 38.504l-35.244 140.976h-128l-35.244-140.976c-32.922-8.784-64.106-21.818-92.918-38.504l-124.622 74.774-90.51-90.51 74.774-124.622c-16.686-28.812-29.72-59.996-38.504-92.918l-140.976-35.244v-128l140.976-35.244c8.784-32.922 21.818-64.106 38.504-92.918l-74.774-124.622 90.51-90.51 124.622 74.774c28.812-16.686 59.996-29.72 92.918-38.504l35.244-140.976h128l35.244 140.976c32.922 8.784 64.106 21.818 92.918 38.504l124.622-74.774 90.51 90.51-74.774 124.622c16.686 28.812 29.72 59.996 38.504 92.918l140.976 35.244zM704 448c0-106.038-85.962-192-192-192s-192 85.962-192 192 85.962 192 192 192 192-85.962 192-192z" />
 <glyph unicode="&#xe919;" glyph-name="icon-hourglass" d="M1024 960h-1024c0-282.8 229.2-512 512-512s512 229.2 512 512zM512 576c-102.6 0-199 40-271.6 112.4-41.2 41.2-72 90.2-90.8 143.6h724.6c-18.8-53.4-49.6-102.4-90.8-143.6-72.4-72.4-168.8-112.4-271.4-112.4zM512 448c-282.8 0-512-229.2-512-512h1024c0 282.8-229.2 512-512 512z" />
 <glyph unicode="&#xe920;" glyph-name="icon-info" d="M512 960c-282.8 0-512-229.2-512-512s229.2-512 512-512 512 229.2 512 512-229.2 512-512 512zM512 832c70.6 0 128-57.4 128-128s-57.4-128-128-128c-70.6 0-128 57.4-128 128s57.4 128 128 128zM704 128h-384v128h64v256h256v-256h64v-128z" />
 <glyph unicode="&#xe921;" glyph-name="icon-link" d="M1024 448l-512 512v-307.2l-512-204.8v-256h512v-256z" />
 <glyph unicode="&#xe922;" glyph-name="icon-lock" d="M832 576h-32v96c0 158.8-129.2 288-288 288s-288-129.2-288-288v-96h-32c-70.4 0-128-57.6-128-128v-384c0-70.4 57.6-128 128-128h640c70.4 0 128 57.6 128 128v384c0 70.4-57.6 128-128 128zM416 672c0 53 43 96 96 96s96-43 96-96v-96h-192v96z" />
 <glyph unicode="&#xe923;" glyph-name="icon-minus" d="M960 320c35.2 0 64 28.8 64 64v128c0 35.2-28.8 64-64 64h-896c-35.2 0-64-28.8-64-64v-128c0-35.2 28.8-64 64-64h896z" />
 <glyph unicode="&#xe924;" glyph-name="icon-people" d="M704 640h64c70.4 0 128 57.6 128 128v64c0 70.4-57.6 128-128 128h-64c-70.4 0-128-57.6-128-128v-64c0-70.4 57.6-128 128-128zM256 640h64c70.4 0 128 57.6 128 128v64c0 70.4-57.6 128-128 128h-64c-70.4 0-128-57.6-128-128v-64c0-70.4 57.6-128 128-128zM832 576h-192c-34.908 0-67.716-9.448-96-25.904 57.278-33.324 96-95.404 96-166.096v-448h384v448c0 105.6-86.4 192-192 192zM384 576h-192c-105.6 0-192-86.4-192-192v-448h576v448c0 105.6-86.4 192-192 192z" />
 <glyph unicode="&#xe925;" glyph-name="icon-person" d="M768 704c0-105.6-86.4-192-192-192h-128c-105.6 0-192 86.4-192 192v64c0 105.6 86.4 192 192 192h128c105.6 0 192-86.4 192-192v-64zM64-64v192c0 140.8 115.2 256 256 256h384c140.8 0 256-115.2 256-256v-192z" />
 <glyph unicode="&#xe926;" glyph-name="icon-plus" d="M960 576h-330v320c0 35.2-28.8 64-64 64h-108c-35.2 0-64-28.8-64-64v-320h-330c-35.2 0-64-28.8-64-64v-128c0-35.2 28.8-64 64-64h330v-320c0-35.2 28.8-64 64-64h108c35.2 0 64 28.8 64 64v320h330c35.2 0 64 28.8 64 64v128c0 35.2-28.8 64-64 64z" />
 <glyph unicode="&#xe927;" glyph-name="icon-trash" d="M832 832h-192.36v64c0 35.2-28.8 64-64 64h-128c-35.2 0-64-28.8-64-64v-64h-191.64c-105.6 0-192-72-192-160s0-160 0-160h64v-384c0-105.6 86.4-192 192-192h512c105.6 0 192 86.4 192 192v384h64c0 0 0 72 0 160s-86.4 160-192 160zM320 128h-128v384h128v-384zM576 128h-128v384h128v-384zM832 128h-128v384h128v-384z" />
 <glyph unicode="&#xe928;" glyph-name="icon-x" d="M384 448l-365.332-365.332c-24.89-24.89-24.89-65.62 0-90.51l37.49-37.49c24.89-24.89 65.62-24.89 90.51 0 0 0 365.332 365.332 365.332 365.332l365.332-365.332c24.89-24.89 65.62-24.89 90.51 0l37.49 37.49c24.89 24.89 24.89 65.62 0 90.51l-365.332 365.332c0 0 365.332 365.332 365.332 365.332 24.89 24.89 24.89 65.62 0 90.51l-37.49 37.49c-24.89 24.89-65.62 24.89-90.51 0 0 0-365.332-365.332-365.332-365.332l-365.332 365.332c-24.89 24.89-65.62 24.89-90.51 0l-37.49-37.49c-24.89-24.89-24.89-65.62 0-90.51 0 0 365.332-365.332 365.332-365.332z" />
 <glyph unicode="&#xe929;" glyph-name="icon-brackets" d="M832 960h-192v-192h191.66l0.34-0.34v-639.32l-0.34-0.34h-191.66v-192h192c105.6 0 192 86.4 192 192v640c0 105.6-86.4 192-192 192zM384 128h-191.66l-0.34 0.34v639.32l0.34 0.34h191.66v192h-192c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h192v192z" />
 <glyph unicode="&#xe930;" glyph-name="icon-crosshair" d="M574 962h-128v-320h128v320zM1022 514h-320v-128h320v128zM574 258h-128v-320h128v320zM318 514h-320v-128h320v128z" />
 <glyph unicode="&#xe931;" glyph-name="icon-grippy-v2" horiz-adv-x="586" d="M146.4 777.2c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM146.4 557.8c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM146.4 338.2c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM146.4 118.8c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM365.8 886.8c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM365.8 667.4c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM365.8 448c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM365.8 228.6c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM365.8 9.2c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM585.2 777.2c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM585.2 557.8c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM585.2 338.2c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM585.2 118.8c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2z" />
 <glyph unicode="&#xe932;" glyph-name="icon-arrow-right-equilateral" d="M962 448l-896-512v1024z" />
 <glyph unicode="&#xe1000;" glyph-name="icon-arrows-out" d="M0 448l256-256v512zM512 960l-256-256h512zM512-64l256 256h-512zM768 704v-512l256 256z" />
 <glyph unicode="&#xe1001;" glyph-name="icon-arrows-right-left" d="M1024 448l-448-512v1024zM448 960l-448-512 448-512z" />
 <glyph unicode="&#xe1002;" glyph-name="icon-arrows-up-down" d="M512 960l512-448h-1024zM0 384l512-448 512 448z" />
 <glyph unicode="&#xe1004;" glyph-name="icon-bullet" d="M832 208c0-44-36-80-80-80h-480c-44 0-80 36-80 80v480c0 44 36 80 80 80h480c44 0 80-36 80-80v-480z" />
 <glyph unicode="&#xe1005;" glyph-name="icon-calendar" d="M896 960h-768c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v768c0 70.4-57.6 128-128 128zM640 512h-256v192h256v-192zM384 448h256v-192h-256v192zM320 256h-256v192h256v-192zM320 704v-192h-256v192h256zM128 0c-17 0-33 6.6-45.2 18.8s-18.8 28.2-18.8 45.2v128h256v-192h-192zM384 0v192h256v-192h-256zM960 64c0-17-6.6-33-18.8-45.2s-28.2-18.8-45.2-18.8h-192v192h256v-128zM960 256h-256v192h256v-192zM960 512h-256v192h256v-192z" />
 <glyph unicode="&#xe1006;" glyph-name="icon-chain-links" d="M958.4 894.4c-43.8 43.8-101 65.6-158.4 65.6s-114.6-21.8-158.4-65.6l-128-128c-74-74-85.4-187-34-273l-12.8-12.8c-35.4 20.8-75 31.4-114.8 31.4-57.4 0-114.6-21.8-158.4-65.6l-128-128c-87.4-87.4-87.4-229.4 0-316.8 43.8-43.8 101-65.6 158.4-65.6s114.6 21.8 158.4 65.6l128 128c74 74 85.4 187 34 273l12.8 12.8c35.2-21 75-31.6 114.6-31.6 57.4 0 114.6 21.8 158.4 65.6l128 128c87.6 87.6 87.6 229.6 0.2 317zM419.8 220.2l-128-128c-18-18.2-42.2-28.2-67.8-28.2s-49.8 10-67.8 28.2c-37.4 37.4-37.4 98.4 0 135.8l128 128c18.2 18.2 42.2 28.2 67.8 28.2 5.6 0 11.2-0.6 16.8-1.4l-55.6-55.6c-10.4-10.4-16.2-24.2-16.2-38.8s5.8-28.6 16.2-38.8c10.4-10.4 24.2-16.2 38.8-16.2s28.6 5.8 38.8 16.2l55.6 55.6c5.4-30.4-3.6-62.2-26.6-85zM867.8 668.2l-128-128c-18-18.2-42.2-28.2-67.8-28.2-5.6 0-11.2 0.6-16.8 1.4l55.6 55.6c10.4 10.4 16.2 24.2 16.2 38.8s-5.8 28.6-16.2 38.8c-10.4 10.4-24.2 16.2-38.8 16.2s-28.6-5.8-38.8-16.2l-55.6-55.6c-5.2 29.8 3.6 61.6 26.6 84.6l128 128c18 18.4 42.2 28.4 67.8 28.4s49.8-10 67.8-28.2c37.6-37.4 37.6-98.2 0-135.6z" />
 <glyph unicode="&#xe1007;" glyph-name="icon-pane-collapse-left" horiz-adv-x="832" d="M0 960h192v-1024h-192v1024zM832 704h-256v256l-320-416 320-416v256h256v320z" />
 <glyph unicode="&#xe1008;" glyph-name="icon-pane-collapse-right" horiz-adv-x="832" d="M640 960h192v-1024h-192v1024zM0 704h256v256l320-416-320-416v256h-256v320z" />
 <glyph unicode="&#xe1009;" glyph-name="icon-download" d="M832 384v-255.66l-0.34-0.34-639.66 0.34v255.66h-192v-256c0-105.6 86.4-192 192-192h640c105.6 0 192 86.4 192 192v256h-192zM512 320l448 448h-256v192h-384v-192h-256l448-448z" />
 <glyph unicode="&#xe1010;" glyph-name="icon-duplicate" d="M640 704v128c0 70.4-57.6 128-128 128h-384c-70.4 0-128-57.6-128-128v-384c0-70.4 57.6-128 128-128h128v139.6c0 134.8 109.6 244.4 244.4 244.4h139.6zM896 576h-384c-70.4 0-128-57.6-128-128v-384c0-70.4 57.6-128 128-128h384c70.4 0 128 57.6 128 128v384c0 70.4-57.6 128-128 128z" />
 <glyph unicode="&#xe1011;" glyph-name="icon-folder-new" d="M896 768h-320c-16.4 16.4-96.8 96.8-109.2 109.2l-37.4 37.4c-25 25-74.2 45.4-109.4 45.4h-256c-35.2 0-64-28.8-64-64v-384c0 70.4 57.6 128 128 128h768c70.4 0 128-57.6 128-128v128c0 70.4-57.6 128-128 128zM896 512h-768c-70.4 0-128-57.6-128-128v-320c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v320c0 70.4-57.6 128-128 128zM704 160h-128v-128h-128v128h-128v128h128v128h128v-128h128v-128z" />
 <glyph unicode="&#xe1012;" glyph-name="icon-fullscreen-expand" d="M192.344 128c-0.118 0.1-0.244 0.224-0.344 0.344v191.656h-192v-192c0-105.6 86.4-192 192-192h192v192h-191.656zM192 767.656c0.1 0.118 0.224 0.244 0.344 0.344h191.656v192h-192c-105.6 0-192-86.4-192-192v-192h192v191.656zM832 960h-192v-192h191.656c0.118-0.1 0.244-0.226 0.344-0.344v-191.656h192v192c0 105.6-86.4 192-192 192zM832 128.344c-0.1-0.118-0.224-0.244-0.344-0.344h-191.656v-192h192c105.6 0 192 86.4 192 192v192h-192v-191.656z" />
 <glyph unicode="&#xe1013;" glyph-name="icon-fullscreen-collapse" d="M191.656 128c0.118-0.1 0.244-0.224 0.344-0.344v-191.656h192v192c0 105.6-86.4 192-192 192h-192v-192h191.656zM192 768.344c-0.1-0.118-0.224-0.244-0.344-0.344h-191.656v-192h192c105.6 0 192 86.4 192 192v192h-192v-191.656zM832 576h192v192h-191.656c-0.118 0.1-0.244 0.226-0.344 0.344v191.656h-192v-192c0-105.6 86.4-192 192-192zM832 127.656c0.1 0.118 0.224 0.244 0.344 0.344h191.656v192h-192c-105.6 0-192-86.4-192-192v-192h192v191.656z" />
 <glyph unicode="&#xe1014;" glyph-name="icon-layers" d="M1024 576l-512 384-512-384 512-384zM512 64l-426.666 320-85.334-64 512-384 512 384-85.334 64z" />
 <glyph unicode="&#xe1015;" glyph-name="icon-line-horz" d="M64 384c-35.346 0-64 28.654-64 64s28.654 64 64 64h896c35.346 0 64-28.654 64-64s-28.654-64-64-64h-896z" />
 <glyph unicode="&#xe1016;" glyph-name="icon-magnify" d="M1024 64l-256.8 256.8c42.4 66.6 65 144 64.8 223.2 0 229.8-186.2 416-416 416s-416-186.2-416-416 186.2-416 416-416c79-0.2 156.4 22.4 223.2 64.8l256.8-256.8 128 128zM212.4 340.4c-112.4 112.4-112.4 294.8 0 407.2s294.8 112.4 407.2 0 112.4-294.8 0-407.2c-54-54-127.2-84.4-203.6-84.4-76.4-0.2-149.8 30.2-203.6 84.4z" />
 <glyph unicode="&#xe1017;" glyph-name="icon-magnify-in" d="M1024 64l-256.86 256.86c40.681 62.963 64.861 139.898 64.861 222.481 0 0.232 0 0.464-0.001 0.696v-0.036c0 229.76-186.24 416-416 416s-416-186.24-416-416 186.24-416 416-416c0.196 0 0.427-0.001 0.659-0.001 82.583 0 159.518 24.18 224.112 65.846l-1.631-0.985 256.86-256.86zM212.36 340.36c-52.114 52.117-84.346 124.114-84.346 203.64 0 159.058 128.942 288 288 288s288-128.942 288-288c0-159.058-128.942-288-288-288-0.005 0-0.010 0-0.014 0h0.001c-0.242-0.001-0.529-0.001-0.815-0.001-79.271 0-151.010 32.251-202.811 84.348l-0.013 0.014zM224 608h384v-128h-384v128zM352 736h128v-384h-128v384z" />
 <glyph unicode="&#xe1018;" glyph-name="icon-magnify-out" d="M767.2 320.8c42.4 66.6 65 144 64.8 223.2 0 229.8-186.2 416-416 416s-416-186.2-416-416 186.2-416 416-416c79-0.2 156.4 22.4 223.2 64.8l256.8-256.8 128 128-256.8 256.8zM619.6 340.4c-54-54-127.2-84.4-203.6-84.4-76.4-0.2-149.8 30.2-203.6 84.4-112.4 112.4-112.4 294.8 0 407.2s294.8 112.4 407.2 0c112.4-112.4 112.4-294.8 0-407.2zM224 608h384v-128h-384v128z" />
 <glyph unicode="&#xe1019;" glyph-name="icon-menu" d="M0 832h1024v-128h-1024v128zM0 512h1024v-128h-1024v128zM0 192h1024v-128h-1024v128z" />
 <glyph unicode="&#xe1020;" glyph-name="icon-move" d="M293.4 448l218.6 218.6 256-256v421.4c0 70.4-57.6 128-128 128h-512c-70.4 0-128-57.6-128-128v-512c0-70.4 57.6-128 128-128h421.4l-256 256zM1024 512h-128v-320l-384 384-128-128 384-384h-320v-128h576z" />
 <glyph unicode="&#xe1021;" glyph-name="icon-new-window" d="M448 960v-128h320l-384-384 128-128 384 384v-320h128v576zM576 285.726v-157.382c-0.1-0.118-0.226-0.244-0.344-0.344h-383.312c-0.118 0.1-0.244 0.226-0.344 0.344v383.312c0.1 0.118 0.226 0.244 0.344 0.344h157.382l192 192h-349.726c-105.6 0-192-86.4-192-192v-384c0-105.6 86.4-192 192-192h384c105.6 0 192 86.4 192 192v349.726l-192-192z" />
 <glyph unicode="&#xe1022;" glyph-name="icon-paint-bucket" d="M544 736v-224c0-88.4-71.6-160-160-160s-160 71.6-160 160v97.2l-197.4-196.4c-50-50-12.4-215.2 112.4-340s290-162.4 340-112.4l417 423.6-352 352zM896-64c70.6 0 128 57.4 128 128 0 108.6-128 192-128 192s-128-83.4-128-192c0-70.6 57.4-128 128-128zM384 448c-35.4 0-64 28.6-64 64v384c0 35.4 28.6 64 64 64s64-28.6 64-64v-384c0-35.4-28.6-64-64-64z" />
 <glyph unicode="&#xe1023;" glyph-name="icon-pause" d="M126 962h256v-1024h-256v1024zM638 962h256v-1024h-256v1024z" />
 <glyph unicode="&#xe1024;" glyph-name="icon-pencil" d="M922.344 858.32c-38.612 38.596-81.306 69.232-120.304 86.324-68.848 30.25-104.77 9.078-120.194-6.344l-516.228-516.216-3.136-9.152-162.482-476.932 485.998 165.612 6.73 6.806 509.502 509.506c9.882 9.866 21.768 27.77 21.768 56.578 0.002 50.71-38.996 121.148-101.654 183.818zM237.982 104.34l-69.73 69.728 69.25 203.228 18.498 6.704h64v-128h128v-64l-6.846-18.506-203.172-69.154z" />
 <glyph unicode="&#xe1025;" glyph-name="icon-play" d="M1024 448l-1024-512v1024z" />
 <glyph unicode="&#xe1026;" glyph-name="icon-plot-resource" d="M255.884 256c0.040 0.034 0.082 0.074 0.116 0.116v127.884c0 70.58 57.42 128 128 128h255.884c0.040 0.034 0.082 0.074 0.116 0.116v127.884c0 70.58 57.42 128 128 128h143.658c-93.832 117.038-237.98 192-399.658 192-282.77 0-512-229.23-512-512 0-67.904 13.25-132.704 37.256-192h218.628zM768.116 640c-0.040-0.034-0.082-0.074-0.116-0.116v-127.884c0-70.58-57.42-128-128-128h-255.884c-0.040-0.034-0.082-0.074-0.116-0.116v-127.884c0-70.58-57.42-128-128-128h-143.658c93.832-117.038 237.98-192 399.658-192 282.77 0 512 229.23 512 512 0 67.904-13.25 132.704-37.256 192h-218.628z" />
 <glyph unicode="&#xe1027;" glyph-name="icon-pointer-left" horiz-adv-x="512" d="M510-64l-256 512 256 512h-256l-256-512 256-512z" />
 <glyph unicode="&#xe1028;" glyph-name="icon-pointer-right" horiz-adv-x="512" d="M-2 960l256-512-256-512h256l256 512-256 512z" />
 <glyph unicode="&#xe1029;" glyph-name="icon-refresh" d="M960 528v432l-164.8-164.8c-79.8 65.2-178.8 100.8-283.2 100.8-119.6 0-232.2-46.6-316.8-131.2s-131.2-197.2-131.2-316.8 46.6-232.2 131.2-316.8c84.6-84.6 197.2-131.2 316.8-131.2s232.2 46.6 316.8 131.2c69.4 69.4 113.2 157.4 126.6 252.8h-130c-29.8-145.8-159-256-313.6-256-176.4 0-320 143.6-320 320s143.8 320 320.2 320c72 0 138.4-23.8 192-64l-176-176h432z" />
 <glyph unicode="&#xe1030;" glyph-name="icon-save" d="M192.2 384c-0.2 0-0.2 0 0 0l-0.2-448h640v447.8c0 0 0 0-0.2 0.2h-639.6zM978.8 749.2l-165.4 165.4c-25 25-74.2 45.4-109.4 45.4h-576c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128v448c0 35.2 28.8 64 64 64h640c35.2 0 64-28.8 64-64v-448c70.4 0 128 57.6 128 128v576c0 35.2-20.4 84.4-45.2 109.2zM704 704c0-35.2-28.8-64-64-64h-448c-35.2 0-64 28.8-64 64v192h320v-192h128v192h128v-192z" />
 <glyph unicode="&#xe1031;" glyph-name="icon-sine" d="M1022.294 448c-1.746 7.196-3.476 14.452-5.186 21.786-20.036 85.992-53.302 208.976-98 306.538-22.42 48.938-45.298 86.556-69.946 115.006-48.454 55.93-98.176 67.67-131.356 67.67s-82.902-11.74-131.356-67.672c-24.648-28.45-47.528-66.068-69.948-115.006-44.696-97.558-77.962-220.544-98-306.538-21.646-92.898-46.444-175.138-71.71-237.836-16.308-40.46-30.222-66.358-40.6-82.604-10.378 16.246-24.292 42.142-40.6 82.604-23.272 57.75-46.144 132.088-66.524 216.052h-197.362c1.746-7.196 3.476-14.452 5.186-21.786 20.036-85.992 53.302-208.976 98-306.538 22.42-48.938 45.298-86.556 69.946-115.006 48.454-55.932 98.176-67.672 131.356-67.672s82.902 11.74 131.356 67.672c24.648 28.45 47.528 66.068 69.948 115.006 44.696 97.558 77.962 220.544 98 306.538 21.646 92.898 46.444 175.138 71.71 237.836 16.308 40.46 30.222 66.358 40.6 82.604 10.378-16.246 24.292-42.142 40.6-82.604 23.274-57.748 46.146-132.086 66.526-216.050h197.36z" />
 <glyph unicode="&#xe1032;" glyph-name="icon-T" d="M800-64h224l-384 1024h-256l-384-1024h224l84 224h408zM380 352l132 352 132-352z" />
 <glyph unicode="&#xe1033;" glyph-name="icon-thumbs-strip" d="M448 578c0-35.2-28.8-64-64-64h-320c-35.2 0-64 28.8-64 64v320c0 35.2 28.8 64 64 64h320c35.2 0 64-28.8 64-64v-320zM1024 578c0-35.2-28.8-64-64-64h-320c-35.2 0-64 28.8-64 64v320c0 35.2 28.8 64 64 64h320c35.2 0 64-28.8 64-64v-320zM448 2c0-35.2-28.8-64-64-64h-320c-35.2 0-64 28.8-64 64v320c0 35.2 28.8 64 64 64h320c35.2 0 64-28.8 64-64v-320zM1024 2c0-35.2-28.8-64-64-64h-320c-35.2 0-64 28.8-64 64v320c0 35.2 28.8 64 64 64h320c35.2 0 64-28.8 64-64v-320z" />
 <glyph unicode="&#xe1034;" glyph-name="icon-two-parts-both" d="M896 960h-768c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v768c0 70.4-57.6 128-128 128zM128 832h320v-768h-320v768zM896 64h-320v768h320v-768z" />
 <glyph unicode="&#xe1035;" glyph-name="icon-two-parts-one-only" d="M896 960h-768c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v768c0 70.4-57.6 128-128 128zM896 64h-320v768h320v-768z" />
 <glyph unicode="&#xe1036;" glyph-name="icon-resync" d="M795.2 795.2c-79.8 65.2-178.8 100.8-283.2 100.8-119.6 0-232.2-46.6-316.8-131.2-69.4-69.4-113.2-157.4-126.6-252.8h130c29.6 145.8 158.8 256 313.4 256 72 0 138.4-23.8 192-64l-176-176h432v432l-164.8-164.8zM512 128c-72 0-138.4 23.8-192 64l176 176h-432v-432l164.8 164.8c79.8-65.2 178.8-100.8 283.2-100.8 119.6 0 232.2 46.6 316.8 131.2 69.4 69.4 113.2 157.4 126.6 252.8h-130c-29.6-145.8-158.8-256-313.4-256z" />
 <glyph unicode="&#xe1037;" glyph-name="icon-reset" d="M460.8 499.2l-187.8 187.8c57.2 42.8 128 68.2 204.8 68.2 188.2 0 341.6-153.2 341.6-341.4s-153.2-341.2-341.4-341.2c-165 0-302.8 117.6-334.6 273h-138.4c14.2-101.8 61-195.6 135-269.6 90.2-90.2 210.4-140 338-140s247.6 49.8 338 140 140 210.4 140 338-49.8 247.6-140 338-210.4 140-338 140c-111.4 0-217-38-302-107.6l-176 175.6v-460.8h460.8z" />
 <glyph unicode="&#xe1038;" glyph-name="icon-x-in-circle" d="M512 960c-282.8 0-512-229.2-512-512s229.2-512 512-512 512 229.2 512 512-229.2 512-512 512zM832 256l-128-128-192 192-192-192-128 128 192 192-192 192 128 128 192-192 192 192 128-128-192-192 192-192z" />
 <glyph unicode="&#xe1039;" glyph-name="icon-brightness" d="M253.414 641.939l-155.172 116.384c-50.233-66.209-85.127-146.713-97.91-234.39l191.586-30.216c8.145 56.552 29.998 106.879 62.068 149.006zM191.98 402.283l-191.919-27.434c13.115-90.459 48.009-170.963 99.174-238.453l154.18 117.665c-31.476 41.347-53.309 91.675-61.231 146.504zM466.283 768.020l-27.434 191.919c-90.459-13.115-170.963-48.009-238.453-99.174l117.665-154.18c41.347 31.476 91.675 53.309 146.504 61.231zM822.323 861.758c-66.209 50.233-146.713 85.127-234.39 97.91l-30.216-191.586c56.552-8.145 106.879-29.998 149.006-62.068zM832.020 493.717l191.919 27.434c-13.115 90.459-48.009 170.963-99.174 238.453l-154.18-117.665c31.476-41.347 53.309-91.675 61.231-146.504zM201.677 34.242c66.209-50.233 146.713-85.127 234.39-97.91l30.216 191.586c-56.552 8.145-106.879 29.998-149.006 62.068zM770.586 254.061l155.131-116.343c50.233 66.209 85.127 146.713 97.91 234.39l-191.586 30.216c-8.125-56.564-29.966-106.906-62.028-149.049zM557.717 127.98l27.434-191.919c90.459 13.115 170.963 48.009 238.453 99.174l-117.665 154.18c-41.347-31.476-91.675-53.309-146.504-61.231zM770.586 448c0-142.813-115.773-258.586-258.586-258.586s-258.586 115.773-258.586 258.586c0 142.813 115.773 258.586 258.586 258.586s258.586-115.773 258.586-258.586z" />
 <glyph unicode="&#xe1040;" glyph-name="icon-contrast" d="M512 960c-282.78 0-512-229.24-512-512s229.22-512 512-512 512 229.24 512 512-229.22 512-512 512zM783.52 176.48c-69.111-69.481-164.785-112.481-270.502-112.481-0.358 0-0.716 0-1.074 0.001l0.055 768c212.070-0.010 383.982-171.929 383.982-384 0-106.034-42.977-202.031-112.462-271.52z" />
 <glyph unicode="&#xe1041;" glyph-name="icon-expand" d="M960 960c0 0 0 0 0 0h-320v-128h165.4l-210.6-210.8c-25-25-25-65.6 0-90.6 12.4-12.4 28.8-18.8 45.2-18.8s32.8 6.2 45.2 18.8l210.8 210.8v-165.4h128v384h-64zM896 154.6l-210.8 210.6c-25 25-65.6 25-90.6 0s-25-65.6 0-90.6l210.8-210.6h-165.4v-128h384v384h-128v-165.4zM218.6 832h165.4v128h-320c0 0 0 0 0 0h-64v-384h128v165.4l210.8-210.8c12.4-12.4 28.8-18.8 45.2-18.8s32.8 6.2 45.2 18.8c25 25 25 65.6 0 90.6l-210.6 210.8zM338.8 365.2l-210.8-210.6v165.4h-128v-384h384v128h-165.4l210.8 210.8c25 25 25 65.6 0 90.6-25.2 24.8-65.6 24.8-90.6-0.2z" />
 <glyph unicode="&#xe1042;" glyph-name="icon-list-view" d="M0 896h1024v-128h-1024v128zM0 640h1024v-128h-1024v128zM0 384h1024v-128h-1024v128zM0 128h1024v-128h-1024v128z" />
 <glyph unicode="&#xe1043;" glyph-name="icon-grid-snap-to" d="M382 130h448v448h-448v-448zM510 450h192v-192h-192v192zM-2 386h320v-64h-320v64zM894 386h128v-64h-128v64zM574 962h64v-320h-64v320zM574 66h64v-128h-64v128zM574 386h64v-64h-64v64z" />
 <glyph unicode="&#xe1044;" glyph-name="icon-grid-snap-no" d="M768 384h192v-64h-192v64zM256 384h192v-64h-192v64zM0 384h192v-64h-192v64zM640 448h-64v-64h-64v-64h64v-64h64v64h64v64h-64zM576 704h64v-192h-64v192zM576 960h64v-192h-64v192zM576 192h64v-192h-64v192z" />
 <glyph unicode="&#xe1045;" glyph-name="icon-frame-show" d="M0 896v-896h1024v896h-1024zM896 128h-768v640h768v-640zM192 704h384v-128h-384v128z" />
 <glyph unicode="&#xe1046;" glyph-name="icon-frame-hide" d="M128 770h420l104 128h-652v-802.4l128 157.4zM896 130h-420l-104-128h652v802.4l-128-157.4zM832 962l-832-1024h192l832 1024zM392 578l104 128h-304v-128z" />
 <glyph unicode="&#xe1047;" glyph-name="icon-import" d="M832 767.6v-639.4c0-0.2-0.2-0.2-0.4-0.4h-319.6v-192h320c105.6 0 192 86.4 192 192v640.2c0 105.6-86.4 192-192 192h-320v-192h319.6c0.2 0 0.4-0.2 0.4-0.4zM192 256v-192l384 384-384 384v-192h-192v-384z" />
 <glyph unicode="&#xe1048;" glyph-name="icon-export" d="M192 128.34v639.32l0.34 0.34h319.66v192h-320c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h320v192h-319.66zM1024 448l-384 384v-192h-192v-384h192v-192l384 384z" />
 <glyph unicode="&#xe1049;" glyph-name="icon-font-size-alt1" horiz-adv-x="1490" d="M1226.4 640h-176l-76.22-203.24 77-205.34 87.22 232.58 90.74-242h-174.44l49.5-132h174.44l57.76-154h154l-264 704zM384 960l-384-1024h224l84 224h408l84-224h224l-384 1024zM380 352l132 352 132-352z" />
 <glyph unicode="&#xe1100;" glyph-name="icon-activity" d="M576 896h-256l320-320h-290.256c-44.264 76.516-126.99 128-221.744 128h-128v-512h128c94.754 0 177.48 51.484 221.744 128h290.256l-320-320h256l448 448-448 448z" />
 <glyph unicode="&#xe1101;" glyph-name="icon-activity-mode" d="M512 960c-214.866 0-398.786-132.372-474.744-320h90.744c56.86 0 107.938-24.724 143.094-64h240.906l-192 192h256l320-320-320-320h-256l192 192h-240.906c-35.156-39.276-86.234-64-143.094-64h-90.744c75.958-187.628 259.878-320 474.744-320 282.77 0 512 229.23 512 512s-229.23 512-512 512z" />
 <glyph unicode="&#xe1102;" glyph-name="icon-autoflow-tabular" d="M192 960c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h64v1024h-64zM384 960h256v-1024h-256v1024zM832 960h-64v-704h256v512c0 105.6-86.4 192-192 192z" />
 <glyph unicode="&#xe1103;" glyph-name="icon-clock" d="M512 960c-282.76 0-512-229.24-512-512s229.24-512 512-512 512 229.24 512 512-229.24 512-512 512zM782 270c-12.681-21.673-35.844-36-62.354-36-0.023 0-0.047 0-0.070 0-0.016 0-0.040 0-0.064 0-13.234 0-25.63 3.587-36.269 9.843l-221.644 127.977q-1.2 0.7-2.38 1.46l-0.86 0.56-1.86 1.28-1.26 0.9-1.26 0.96-1.7 1.34-0.64 0.54c-0.72 0.6-1.44 1.22-2.14 1.84v0c-5.012 4.562-9.331 9.758-12.863 15.491-0.457 0.769-0.717 1.249-0.997 1.709s-0.58 0.98-0.86 1.48c-3.092 5.53-5.561 11.936-7.071 18.704l-0.089 0.596c-0.2 0.92-0.38 1.84-0.54 2.76 0 0.28-0.1 0.56-0.16 0.84-0.12 0.7-0.22 1.42-0.3 2.14s-0.14 1.040-0.2 1.58-0.1 1.020-0.14 1.54-0.12 1.5-0.18 2.24c0 0.34 0 0.68 0 1.040q0 1.4 0 2.78c0 0.1 0 0.22 0 0.32v364.080c0 39.765 32.235 72 72 72s72-32.235 72-72v-322.44l185.7-107.22c21.605-12.697 35.879-35.823 35.879-62.284 0-13.278-3.594-25.716-9.862-36.395z" />
 <glyph unicode="&#xe1104;" glyph-name="icon-database" d="M1024 768c0-106.039-229.23-192-512-192s-512 85.961-512 192c0 106.039 229.23 192 512 192s512-85.961 512-192zM512 448c-282.77 0-512 85.962-512 192v-512c0-106.038 229.23-192 512-192s512 85.962 512 192v512c0-106.038-229.23-192-512-192z" />
 <glyph unicode="&#xe1105;" glyph-name="icon-database-query" d="M683.52 140.714c-50.782-28.456-109.284-44.714-171.52-44.714-194.094 0-352 157.906-352 352s157.906 352 352 352 352-157.906 352-352c0-62.236-16.258-120.738-44.714-171.52l191.692-191.692c8.516 13.89 13.022 28.354 13.022 43.212v640c0 106.038-229.23 192-512 192s-512-85.962-512-192v-640c0-106.038 229.23-192 512-192 126.11 0 241.548 17.108 330.776 45.46l-159.256 159.254zM352 448c0-88.224 71.776-160 160-160s160 71.776 160 160-71.776 160-160 160-160-71.776-160-160z" />
 <glyph unicode="&#xe1106;" glyph-name="icon-dataset" d="M896 768h-320c-16.4 16.4-96.8 96.8-109.2 109.2l-37.4 37.4c-25 25-74.2 45.4-109.4 45.4h-256c-35.2 0-64-28.8-64-64v-384c0 70.4 57.6 128 128 128h768c70.4 0 128-57.6 128-128v128c0 70.4-57.6 128-128 128zM896 512h-768c-70.4 0-128-57.6-128-128v-320c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v320c0 70.4-57.6 128-128 128zM320 64h-128v320h128v-320zM576 64h-128v320h128v-320zM832 64h-128v320h128v-320z" />
 <glyph unicode="&#xe1107;" glyph-name="icon-datatable" d="M1024 768c0-106.039-229.23-192-512-192s-512 85.961-512 192c0 106.039 229.23 192 512 192s512-85.961 512-192zM512 448c-282.8 0-512 86-512 192v-512c0-106 229.2-192 512-192s512 86 512 192v512c0-106-229.2-192-512-192zM896 385v-256c-36.6-15.6-79.8-28.8-128-39.4v256c48.2 10.6 91.4 23.8 128 39.4zM256 345.6v-256c-48.2 10.4-91.4 23.8-128 39.4v256c36.6-15.6 79.8-28.8 128-39.4zM384 70v256c41-4 83.8-6 128-6s87 2.2 128 6v-256c-41-4-83.8-6-128-6s-87 2.2-128 6z" />
 <glyph unicode="&#xe1108;" glyph-name="icon-dictionary" d="M832 320c105.6 0 192 86.4 192 192v256c0 105.6-86.4 192-192 192v-320l-128 64-128-64v320h-384c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h640c105.6 0 192 86.4 192 192v192c0-105.6-86.4-192-192-192h-640v192h640z" />
 <glyph unicode="&#xe1109;" glyph-name="icon-folder" d="M896 768h-320c-16.4 16.4-96.8 96.8-109.2 109.2l-37.4 37.4c-25 25-74.2 45.4-109.4 45.4h-256c-35.2 0-64-28.8-64-64v-384c0 70.4 57.6 128 128 128h768c70.4 0 128-57.6 128-128v128c0 70.4-57.6 128-128 128zM896 512h-768c-70.4 0-128-57.6-128-128v-320c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v320c0 70.4-57.6 128-128 128z" />
 <glyph unicode="&#xe1110;" glyph-name="icon-image" d="M896 960h-768c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v768c0 70.4-57.6 128-128 128zM896 64h-768v768h768v-768zM320 704l-128-128v-448h640v320l-128 128-128-128z" />
 <glyph unicode="&#xe1111;" glyph-name="icon-layout" d="M448 960h-256c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h256v1024zM832 960h-256v-577.664h448v385.664c0 105.6-86.4 192-192 192zM576-64h256c105.6 0 192 86.4 192 192v129.664h-448v-321.664z" />
 <glyph unicode="&#xe1112;" glyph-name="icon-object" d="M512-64l512 320v384l-512.020 320-511.98-320v-384l512-320zM512 768l358.4-224-358.4-224-358.4 224 358.4 224z" />
 <glyph unicode="&#xe1113;" glyph-name="icon-object-unknown" d="M510 962l-512-320v-384l512-320 512 320v384l-512 320zM585.4 100.8c-21.2-20.8-46-30.8-76-30.8-31.2 0-56.2 9.8-76.2 29.6-20 20-29.6 44.8-29.6 76.2 0 30.4 10.2 55.2 31 76.2s45.2 31.2 74.8 31.2c29.6 0 54.2-10.4 75.6-32s31.8-46.4 31.8-76c-0.2-29-10.8-54-31.4-74.4zM638.2 413.4c-23.6-11.8-37.4-22-43.4-32.4-3.6-6.2-6-14.8-7.4-26.8v-41h-161.4v44.2c0 40.2 4.4 69.8 13 88 8 17.2 22.6 30.2 44.8 40l34.8 15.4c32 14.2 48.2 35.2 48.2 62.8 0 16-6 30.4-17.2 41.8-11.2 11.2-25.6 17.2-41.6 17.2-24 0-54.4-10-62.8-57.4l-2.2-12.2h-147l1.4 16.2c4 44.6 17 82.4 38.8 112.2 19.6 27 45.6 48.6 77 64.6s64.6 24 98.2 24c60.6 0 110.2-19.4 151.4-59.6 41.2-40 61.2-88 61.2-147.2 0-70.8-28.8-121.4-85.8-149.8z" />
 <glyph unicode="&#xe1114;" glyph-name="icon-packet" d="M511.98 960l-511.98-320v-512c0-105.6 86.4-192 192-192h640c105.6 0 192 86.4 192 192v512l-512.020 320zM512 768l358.4-224-358.4-224-358.4 224 358.4 224z" />
 <glyph unicode="&#xe1115;" glyph-name="icon-page" d="M702 452c-105.6 0-192 86.4-192 192v320h-320c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h640c105.6 0 192 86.4 192 192v320h-320zM766 580h256l-384 384v-256c0-70.4 57.6-128 128-128z" />
 <glyph unicode="&#xe1116;" glyph-name="icon-plot-overlay" d="M830 960h-636c-106.7 0-194-87.3-194-194v-406.82c14.18-18.64 25.66-28.34 32-30.84 14.28 5.62 54.44 47.54 92.96 146 42.46 108.38 116.32 237.66 227.040 237.66 52.4 0 101.42-29.16 145.7-86.68 37.34-48.5 64.84-108.92 81.34-151.080 38.52-98.38 78.68-140.3 92.96-146 14.28 5.62 54.44 47.54 92.96 146 42.46 108.48 116.32 237.76 227.040 237.76 11.354-0.003 22.389-1.366 32.952-3.936l-0.952 57.936c0 106.7-87.3 194-194 194zM992 567.66c-14.28-5.62-54.44-47.52-92.96-146-42.46-108.38-116.32-237.66-227.040-237.66-52.4 0-101.42 29.16-145.7 86.68-37.34 48.5-64.84 108.92-81.34 151.080-38.52 98.38-78.68 140.3-92.96 146-14.28-5.62-54.44-47.52-92.96-146-42.46-108.48-116.32-237.76-227.040-237.76-11.355 0.003-22.389 1.367-32.952 3.936l0.952-57.936c0-106.7 87.3-194 194-194h636c106.7 0 194 87.3 194 194v406.82c-14.18 18.64-25.66 28.34-32 30.84z" />
 <glyph unicode="&#xe1117;" glyph-name="icon-plot-stacked" d="M89.6 648c24.98 0 48.96 26.52 85.52 70.18 45.42 54.28 102 121.82 196 121.82 44.64 0 86.62-15.46 124.8-46 28.68-22.9 51.16-50.42 72.92-77.060 38.42-46.94 59.16-68.94 83.96-68.94h371.2v118c0 106.7-87.3 194-194 194h-636c-106.7 0-194-87.3-194-194v-118h89.6zM529.5 549.6c-28.24 22.64-50.52 50-72 76.28-35.5 43.48-58.76 70.12-86.3 70.12-25.060 0-49.080-26.54-85.66-70.24-45.4-54.24-102-121.76-196-121.76h-89.54v-112h371.2c44 0 85.54-15.34 123.3-45.6 28.24-22.64 50.52-50 72-76.28 35.5-43.48 58.76-70.12 86.3-70.12 25.060 0 49.080 26.54 85.66 70.24 45.4 54.24 102 121.76 196 121.76h89.54v112h-371.2c-44.060 0-85.54 15.34-123.3 45.6zM934.4 248c-24.98 0-48.96-26.52-85.52-70.18-45.42-54.28-102-121.82-196-121.82-44.64 0-86.62 15.46-124.8 46-28.68 22.9-51.16 50.42-72.92 77.060-38.42 46.94-59.16 68.94-83.96 68.94h-371.2v-118c0-106.7 87.3-194 194-194h636c106.7 0 194 87.3 194 194v118h-89.6z" />
 <glyph unicode="&#xe1118;" glyph-name="icon-session" d="M635.6 435.6c6.6-4.2 13.2-8.6 19.2-13.6l120.4-96.4c29.6-23.8 83.8-23.8 113.4 0l135.2 108c0.2 4.8 0.2 9.4 0.2 14.2 0 52.2-7.8 102.4-22.2 149.8l-154.8-123.6c-58.2-46.6-140.2-59.2-211.4-38.4zM248.6 325.8l120.4 96.4c58 46.4 140 59.2 211.2 38.4-6.6 4.2-13.2 8.6-19.2 13.6l-120.4 96.4c-29.6 23.8-83.8 23.8-113.4 0l-120.2-96.6c-40-32-91.4-48-143-48-21.6 0-43 2.8-63.8 8.4 0-0.6 0-1.2 0-1.6 5-3.4 10-6.8 14.6-10.6l120.4-96.4c29.8-23.8 83.8-23.8 113.4 0zM120.6 581.8l120.4 96.4c80.2 64.2 205.6 64.2 285.8 0l120.4-96.4c29.6-23.8 83.8-23.8 113.4 0l181 144.8c-91.2 140.4-249.6 233.4-429.6 233.4-238.6 0-439.2-163.2-496-384.2 30.8-17.6 77.8-15.6 104.6 6zM689 218l-120.4 96.4c-29.6 23.8-83.8 23.8-113.4 0l-120.2-96.4c-40-32-91.4-48-143-48-47.8 0-95.4 13.8-134.2 41.4 85.6-163.6 256.8-275.4 454.2-275.4s368.6 111.8 454.2 275.4c-80.4-57.4-199.8-55.2-277.2 6.6z" />
 <glyph unicode="&#xe1119;" glyph-name="icon-tabular" d="M896 960h-768c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v768c0 70.4-57.6 128-128 128zM640 512h-256v192h256v-192zM384 448h256v-192h-256v192zM320 256h-256v192h256v-192zM320 704v-192h-256v192h256zM128 0c-17 0-33 6.6-45.2 18.8s-18.8 28.2-18.8 45.2v128h256v-192h-192zM384 0v192h256v-192h-256zM960 64c0-17-6.6-33-18.8-45.2s-28.2-18.8-45.2-18.8h-192v192h256v-128zM960 256h-256v192h256v-192zM960 512h-256v192h256v-192z" />
 <glyph unicode="&#xe1120;" glyph-name="icon-tabular-lad" d="M896 960h-768c-70.606-0.215-127.785-57.394-128-127.979v-768.021c0.215-70.606 57.394-127.785 127.979-128h768.021c70.606 0.215 127.785 57.394 128 127.979v768.021c-0.215 70.606-57.394 127.785-127.979 128zM64 704h256v-192h-256v192zM64 448h256v-192h-256v192zM128 0c-35.26 0.214-63.786 28.74-64 63.98v128.020h256v-192h-192zM384 0v192h256v-192h-256zM960 64c-0.214-35.26-28.74-63.786-63.98-64h-192.020v192h256v-128zM960 448v-192h-576v192h64v64h-64v192h576v-192h-64v-64h64zM782.32 412.62l-110.32 55.16v172.22c0 17.673-14.327 32-32 32s-32-14.327-32-32v-211.78l145.68-72.84c4.172-2.133 9.1-3.383 14.32-3.383 17.675 0 32.003 14.328 32.003 32.003 0 12.454-7.114 23.247-17.501 28.536z" />
 <glyph unicode="&#xe1121;" glyph-name="icon-tabular-lad-set" d="M128 192v576c-70.606-0.215-127.785-57.394-128-127.979v-576.021c0.215-70.606 57.394-127.785 127.979-128h576.021c70.606 0.215 127.785 57.394 128 127.979l-576 0.021c-70.606 0.215-127.785 57.394-128 127.979zM896 960h-576c-70.606-0.215-127.785-57.394-128-127.979v-576.021c0.215-70.606 57.394-127.785 127.979-128h576.021c70.606 0.215 127.785 57.394 128 127.979v576.021c-0.215 70.606-57.394 127.785-127.979 128zM256 768h192v-128h-192v128zM256 576h192v-192h-192v192zM320 192c-35.26 0.214-63.786 28.74-64 63.98v64.020h192v-128h-128zM512 192v128h192v-128h-192zM960 256c-0.214-35.26-28.74-63.786-63.98-64h-128.020v128h192v-64zM960 384h-448v384h448v-384zM832 480c0.002 0 0.005 0 0.007 0 17.673 0 32 14.327 32 32 0 14.055-9.062 25.994-21.662 30.293l-74.345 24.767v104.94c0 17.673-14.327 32-32 32s-32-14.327-32-32v-151.060l117.88-39.3c3.018-1.040 6.495-1.64 10.113-1.64 0.003 0 0.005 0 0.008 0z" />
 <glyph unicode="&#xe1122;" glyph-name="icon-tabular-realtime" d="M896 960h-768c-70.606-0.215-127.785-57.394-128-127.979v-768.021c0.215-70.606 57.394-127.785 127.979-128h768.021c70.606 0.215 127.785 57.394 128 127.979v768.021c-0.215 70.606-57.394 127.785-127.979 128zM448 668l25.060-25.32c7.916-7.922 18.856-12.822 30.94-12.822s23.024 4.9 30.94 12.822l75.5 76.3c29.97 30.338 71.571 49.128 117.56 49.128s87.59-18.79 117.544-49.112l50.456-50.997v-152.2c-24.111 8.83-44.678 22.255-61.542 39.342l-75.518 76.318c-7.916 7.922-18.856 12.822-30.94 12.822s-23.024-4.9-30.94-12.822l-75.5-76.3c-29.971-30.343-71.575-49.137-117.568-49.137-20.084 0-39.331 3.584-57.137 10.146l1.145 151.831zM320 0h-192c-35.26 0.214-63.786 28.74-64 63.98v128.020h256v-192zM320 256h-256v192h256v-192zM320 512h-256v192h256v-192zM640 0h-256v192h256v-192zM448 323.38v174.5c1.88-1.74 3.74-3.5 5.56-5.34l75.5-76.3c7.916-7.922 18.856-12.822 30.94-12.822s23.024 4.9 30.94 12.822l75.5 76.3c29.966 30.333 71.56 49.119 117.542 49.119 43.28 0 82.673-16.644 112.128-43.879l-0.11-174.399c-1.88 1.74-3.74 3.5-5.56 5.34l-75.5 76.3c-7.916 7.922-18.856 12.822-30.94 12.822s-23.024-4.9-30.94-12.822l-75.5-76.3c-29.966-30.333-71.56-49.119-117.542-49.119-43.28 0-82.673 16.644-112.128 43.879zM960 64c-0.214-35.26-28.74-63.786-63.98-64h-192.020v192h256v-128z" />
 <glyph unicode="&#xe1123;" glyph-name="icon-tabular-scrolling" d="M64 960c-35.2 0-64-28.8-64-64v-192h448v256h-384zM1024 704v192c0 35.2-28.8 64-64 64h-384v-256h448zM0 576v-192c0-35.2 28.8-64 64-64h384v256h-448zM960 320c35.2 0 64 28.8 64 64v192h-448v-256h384zM512-64l-256 256h512z" />
 <glyph unicode="&#xe1124;" glyph-name="icon-telemetry" d="M32 328.34c14.28 5.62 54.44 47.54 92.96 146 42.46 108.38 116.32 237.66 227.040 237.66 52.4 0 101.42-29.16 145.7-86.68 37.34-48.5 64.84-108.92 81.34-151.080 38.52-98.38 78.68-140.3 92.96-146 14.28 5.62 54.44 47.54 92.96 146 37.4 95.5 99.14 207.14 188.94 232.46-90.462 152.598-254.314 253.3-441.686 253.3-0.075 0-0.15 0-0.226 0-282.748 0-511.988-229.24-511.988-512 0-0.032 0-0.070 0-0.108 0-35.719 3.641-70.587 10.572-104.255 8.968-7.457 16.648-13.417 21.428-15.297zM992 567.66c-14.28-5.62-54.44-47.52-92.96-146-42.46-108.38-116.32-237.66-227.040-237.66-52.4 0-101.42 29.16-145.7 86.68-37.34 48.5-64.84 108.92-81.34 151.080-38.52 98.38-78.68 140.3-92.96 146-14.28-5.62-54.44-47.52-92.96-146-37.4-95.5-99.14-207.14-188.94-232.46 90.462-152.598 254.314-253.3 441.686-253.3 0.075 0 0.15 0 0.226 0 282.748 0 511.988 229.24 511.988 512 0 0.032 0 0.070 0 0.108 0 35.719-3.641 70.587-10.572 104.255-8.968 7.457-16.648 13.417-21.428 15.297z" />
 <glyph unicode="&#xe1125;" glyph-name="icon-telemetry-panel" d="M169.2 512c14 56.4 33 122 56.6 176.8 15.4 35.8 31.2 63.2 48.2 84 18.4 22.4 49 49.2 91 49.2s72.6-26.8 91-49.2c17-20.6 32.6-48.2 48.2-84 23.6-54.8 42.8-120.4 56.6-176.8h461.2v256c0 105.6-86.4 192-192 192h-640c-105.6 0-192-86.4-192-192v-256h171.2zM718.6 384h-127.2c25-93.4 48.4-144.4 63.6-168.6 15.2 24.2 38.6 75.2 63.6 168.6zM301.4 512h127.2c-25 93.4-48.4 144.4-63.6 168.6-15.2-24.2-38.6-75.2-63.6-168.6zM850.8 384c-14-56.4-33-122-56.6-176.8-15.4-35.8-31.2-63.2-48.2-84-18.4-22.4-49-49.2-91-49.2s-72.6 26.8-91 49.2c-17 20.6-32.6 48.2-48.2 84-23.6 54.8-42.8 120.4-56.6 176.8h-461.2v-256c0-105.6 86.4-192 192-192h640c105.6 0 192 86.4 192 192v256h-171.2z" />
 <glyph unicode="&#xe1126;" glyph-name="icon-timeline" d="M256 704h384v-128h-384v128zM384 512h384v-128h-384v128zM320 320h384v-128h-384v128zM832 960h-128v-192h127.6c0.2 0 0.2-0.2 0.4-0.4v-639.4c0-0.2-0.2-0.2-0.4-0.4h-127.6v-192h128c105.6 0 192 86.4 192 192v640.2c0 105.6-86.4 192-192 192zM192 128.4v639.2c0 0.2 0.2 0.2 0.4 0.4h127.6v192h-128c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h128v192h-127.6c-0.2 0-0.4 0.2-0.4 0.4z" />
 <glyph unicode="&#xe1127;" glyph-name="icon-timer-v15" horiz-adv-x="896" d="M576 813.4v82.58c0 35.346-28.654 64-64 64h-128c-35.346 0-64-28.654-64-64v-82.58c-185.040-55.080-320-226.48-320-429.42 0-247.42 200.58-448 448-448s448 200.58 448 448c0 202.96-135 374.4-320 429.42zM468 363.98l-263.76-211c-57.105 59.935-92.24 141.251-92.24 230.772 0 0.080 0 0.16 0 0.24 0 185.268 150.72 335.988 336 335.988 6.72 0 13.38-0.22 20-0.62v-355.38z" />
 <glyph unicode="&#xe1128;" glyph-name="icon-topic" d="M454.36 483.36l86.3 86.3c9.088 8.965 21.577 14.502 35.36 14.502s26.272-5.537 35.366-14.507l86.294-86.294c19.328-19.358 42.832-34.541 69.047-44.082l1.313 171.722-57.64 57.64c-34.407 34.33-81.9 55.558-134.35 55.558s-99.943-21.228-134.354-55.562l-86.296-86.297c-9.088-8.965-21.577-14.502-35.36-14.502s-26.272 5.537-35.366 14.507l-28.674 28.654v-172.14c19.045-7.022 41.040-11.084 63.984-11.084 52.463 0 99.966 21.239 134.379 55.587zM505.64 412.64l-86.3-86.3c-9.088-8.965-21.577-14.502-35.36-14.502s-26.272 5.537-35.366 14.507l-86.294 86.294c-2 2-4.2 4-6.36 6v-197.36c33.664-30.72 78.65-49.537 128.031-49.537 52.44 0 99.923 21.22 134.333 55.541l86.296 86.296c9.088 8.965 21.577 14.502 35.36 14.502s26.272-5.537 35.366-14.507l86.294-86.294c2-2 4.2-4 6.36-6v197.36c-33.664 30.72-78.65 49.537-128.031 49.537-52.44 0-99.923-21.22-134.333-55.541zM832 960h-128v-192h127.66l0.34-0.34v-639.32l-0.34-0.34h-127.66v-192h128c105.6 0 192 86.4 192 192v640c0 105.6-86.4 192-192 192zM320 128h-127.66l-0.34 0.34v639.32l0.34 0.34h127.66v192h-128c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h128v192z" />
 <glyph unicode="&#xe1129;" glyph-name="icon-box-with-dashed-lines" d="M0 576h128v-256h-128v256zM128 831.78l0.22 0.22h191.78v128h-192c-70.606-0.215-127.785-57.394-128-127.979v-192.021h128v191.78zM128 64.22v191.78h-128v-192c0.215-70.606 57.394-127.785 127.979-128h192.021v128h-191.78zM384 960h256v-128h-256v128zM896 64.22l-0.22-0.22h-191.78v-128h192c70.606 0.215 127.785 57.394 128 127.979v192.021h-128v-191.78zM896 960h-192v-128h191.78l0.22-0.22v-191.78h128v192c-0.215 70.606-57.394 127.785-127.979 128zM896 576h128v-256h-128v256zM384 64h256v-128h-256v128zM256 704h512v-512h-512v512z" />
 <glyph unicode="&#xe1130;" glyph-name="icon-summary-widget" d="M896 960h-768c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v768c0 70.4-57.6 128-128 128zM847.8 349.6l-82.6-143.2-189.6 131.6 19.2-230h-165.4l19.2 230-189.6-131.6-82.6 143.2 208.6 98.4-208.8 98.4 82.6 143.2 189.6-131.6-19.2 230h165.4l-19.2-230 189.6 131.6 82.6-143.2-208.6-98.4 208.8-98.4z" />
 <glyph unicode="&#xe1131;" glyph-name="icon-notebook" d="M896 849.2c0 79.8-55.4 127.4-123 105.4l-773-250.6h896v145.2zM896 640h-896v-576c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v448c0 70.4-57.6 128-128 128zM832 128h-384v320h384v-320z" />
 </font></defs></svg>
--- a/src/styles-new/fonts/openmct-symbols-16px.ttf
+++ b/src/styles-new/fonts/openmct-symbols-16px.ttf
--- a/src/styles-new/fonts/openmct-symbols-16px.woff
+++ b/src/styles-new/fonts/openmct-symbols-16px.woff
--- a/src/styles-new/legacy-styles.scss
+++ b/src/styles-new/legacy-styles.scss
@ -0,0 +1,79 @@
@import "../styles/mixins";
@import "../styles/mobile/mixins";
@import "../styles/themes/snow/mixins";
@import "../styles/constants";
@import "../styles/mobile/constants";
@import "../styles/themes/snow/constants";
@import "../styles/animations";
@import "../styles/effects";
@import "../styles/glyphs";
@import "../styles/animations";
@import "../styles/archetypes";
 //@import "../styles/about";
 //@import "../styles/text";
@import "../styles/icons";
@import "../styles/status";
@import "../styles/data-status";
@import "../styles/helpers/bubbles";
@import "../styles/helpers/splitter";
@import "../styles/helpers/wait-spinner";
 //@import "../styles/inspector";
 //
 //!********************************* CONTROLS *!
 //@import "../styles/controls/breadcrumb";
@import "../styles/controls/buttons";
@import "../styles/controls/palette";
@import "../styles/controls/controls";
@import "../styles/controls/lists";
@import "../styles/controls/menus";
@import "../styles/controls/messages";
@import "../styles/controls/indicators";
@import "../styles/mobile/controls/menus";
 //
 //!********************************* FORMS *!
@import "../styles/forms/elems";
@import "../styles/forms/channel-selector";
@import "../styles/forms/datetime";
@import "../styles/forms/validation";
@import "../styles/forms/filter";
 //
 //!********************************* USER ENVIRON *!
@import "../styles/user-environ/layout";
@import "../styles/mobile/layout";
@import "../styles/edit/editor";
 //@import "../styles/search/search";
 //@import "../styles/mobile/search/search";
@import "../styles/overlay/overlay";
@import "../styles/tree/tree";
@import "../styles/object-label";
 //@import "../styles/mobile/tree";
@import "../styles/user-environ/frame";
@import "../styles/user-environ/top-bar";
@import "../styles/user-environ/tool-bar";
@import "../styles/user-environ/selecting";
 //
 //!********************************* VIEWS *!
@import "../styles/fixed-position";
 //@import "../styles/lists/tabular";
@import "../styles/plots/plots-main";
@import "../styles/plots/legend";
@import "../styles/iframe";
@import "../styles/views";
@import "../styles/items/item";
@import "../styles/mobile/item";
@import "../styles/table";
 //@import "../styles/notebook/notebook";
 //
 //!********************************* TO BE MOVED *!
@import "../styles/autoflow";
@import "../styles/features/imagery";
@import "../styles/features/time-display";
@import "../styles/widgets";
 //
 //!********************************* APP STARTUP *!
 //@import "../styles/app-start";
@import "../styles/conductor/time-conductor-snow";
 //@import "../styles/notebook/notebook-snow";
--- a/src/styles-new/notebook.scss
+++ b/src/styles-new/notebook.scss
@ -0,0 +1,385 @@
 /*********************************************** NOTEBOOK */
@import "sass-base.scss";
 .c-notebook {
    //@include test(orange);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    > [class*="__"] + [class*="__"] {
        margin-top: $interiorMargin;
    }
    &__head,
    &__controls,
    &__drag-area,
    &__entries {
        display: flex;
        flex-wrap: nowrap;
    }
    &__head,
    &__drag-area,
    &__controls {
        flex: 0 0 auto;
    }
    &__head {
        [class*="__"] + [class*="__"] {
            margin-left: $interiorMargin;
        }
    }
    &__search {
        flex: 1 1 auto;
    }
    &__drag-area {
        background: rgba($colorKey, 0.1);
        border: 1px dashed rgba($colorKey, 0.7);
        border-radius: $controlCr;
        color: rgba($colorBodyFg, 0.7);
        padding: 10px;
        cursor: pointer;
        &:before {
            margin-right: 7px !important;
        }
        [class*="__label"] {
            font-style: italic;
            @include ellipsize();
        }
        &:hover {
            background: rgba($colorKey, 0.2);
            color: $colorBodyFg;
        }
        &.drag-active,
        &.is-active {
            // Not currently working
            border-color: $colorKey;
        }
        body.mobile & {
            display: none;
        }
    }
    &__entries {
        flex-direction: column;
        flex: 1 1 auto;
        padding-right: $interiorMarginSm;
        overflow-x: hidden;
        overflow-y: scroll;
        [class*="__entry"] + [class*="__entry"] {
            margin-top: $interiorMarginSm;
        }
    }
 }
 /****************************** ENTRIES */
 .c-ne {
    // A Notebook entry
    $p: $interiorMarginSm;
    @include discreteItem();
    display: flex;
    //flex-wrap: wrap;
    padding: $interiorMarginSm $interiorMarginSm $interiorMarginSm $interiorMargin;
    &__time,
    &__text,
    &__local-controls {
        padding-top: $p;
        padding-bottom: $p;
    }
    &__time,
    &__embed__time {
        opacity: 0.7;
    }
    &__time-and-content {
        display: flex;
        flex: 1 1 auto;
        flex-wrap: wrap;
    }
    &__time {
        flex: 0 1 auto;
        min-width: 130px;
        margin-right: $interiorMarginLg;
        * {
            white-space: nowrap;
        }
    }
    &__content {
        flex: 1 1 auto;
       > [class*="__"] + [class*="__"] {
            margin-top: $interiorMarginSm;
       }
    }
    &__text {
        min-height: 24px; // Needed in Firefox when field is blank
        white-space: pre-wrap;
        &.is-blank-notebook-entry {
            &:not(:focus):before {
                content: 'Blank entry';
                font-style: italic;
                opacity: 0.5;
            }
        }
    }
    &__embeds {
        flex-wrap: wrap;
        > [class*="__embed"] {
            margin: 0 $interiorMarginSm $interiorMarginSm 0;
        }
    }
 }
 /****************************** EMBEDS */
@mixin snapThumb() {
    // LEGACY: TODO: refactor when .snap-thumb in New Entry dialog is refactored
    $d: 50px;
    border: 1px solid $colorInteriorBorder;
    cursor: pointer;
    width: $d;
    height: $d;
    border-radius: 5px;
    overflow: hidden;
    img {
        height: 100%;
        width: 100%;
    }
 }
 .snap-thumb {
    // LEGACY,
    @include snapThumb();
 }
 .c-ne__embed {
    @include discreteItemInnerElem();
    display: inline-flex;
    flex: 0 0 auto;
    padding: $interiorMargin;
    [class*="__"] + [class*="__"] {
        margin-left: $interiorMargin;
    }
    &__info {
        display: flex;
        flex-direction: column;
        a {
            color: $colorKey;
        }
    }
    &__name,
    &__link {
        // Holds __link and __context-available
        display: flex;
        align-items: center;
    }
    &__link {
        &:before {
            display: block;
            font-size: 0.85em;
            margin-right: $interiorMarginSm;
        }
    }
    &__context-available {
        font-size: 0.7em;
        margin-left: $interiorMarginSm;
    }
    &__snap-thumb {
        @include snapThumb();
    }
 }
 /****************************** SNAPSHOTTING */
 // LEGACY: TODO: refactor these names
 .t-contents,
 .snap-annotation {
    overflow: hidden;
 }
 .s-status-taking-snapshot,
 .overlay.snapshot {
    // Handle overflow-y issues with tables and html2canvas
    .l-sticky-headers .l-tabular-body { overflow: auto; }
 }
 /****************************** PAINTERRO OVERRIDES */
 .annotation-dialog .abs.editor {
    border-radius: 0;
 }
 #snap-annotation {
    $m: $interiorMargin;
    display: flex;
    flex-direction: column;
    position: absolute;
    top: $m; right: 0; bottom: $m; left: 0; // LEGACY, deal with .editor border-radius clipping stuff
 }
 #snap-annotation-wrapper,
 #snap-annotation-bar {
    position: relative;
    top: auto; right: auto; bottom: auto; left: auto;
 }
 #snap-annotation-wrapper {
    background: rgba($colorBodyFg, 0.1);
    border: 1px solid $colorInteriorBorder;
    order: 2;
    flex: 10 0 auto;
 }
 #snap-annotation-bar {
    // Holds tool buttons, color selectors, etc.
    $h: 22px;
    $fs: 0.8rem;
    order: 1;
    flex: 0 0 auto;
    height: auto;
    background-color: transparent !important;
    margin-bottom: $interiorMargin;
    > div > span {
        display: flex;
        align-items: center;
        font-size: $fs;
    }
    > div,
    > div > span,
    .ptro-icon-btn,
    .ptro-named-btn,
    .ptro-color-btn,
    .ptro-bordered-btn,
    .ptro-tool-ctl-name,
    .ptro-color-btn,
    .tool-controls,
    .ptro-input {
        // Lot of resets for crappy CSS in Painterro
        &:first-child {
            margin-left: 0 !important;
        }
        display: inline-block;
        font-family: inherit;
        font-size: $fs !important;
        height: $h !important;
        margin: 0 0 0 5px;
        position: relative;
        width: auto !important;
        line-height: $h !important;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        vertical-align: top;
    }
    .ptro-tool-ctl-name {
        border-radius: 0;
        background: none;
        top: auto;
        font-family: inherit;
        padding: 0;
    }
    .ptro-color-btn {
        width: $h !important;
    }
    .ptro-color-control,
    .ptro-icon-btn,
    .ptro-named-btn {
        // Buttons in toolbar. Why the f* they're named like this is a mystery
        background-color: $colorBtnBg;
        color: $colorBtnFg;
        padding: 0 $interiorMargin;
        &:hover {
            background: $colorBtnBgHov;
            color: $colorBtnFgHov;
        }
        i {
            display: contents;
            font-size: $fs * 1.2;
            line-height: inherit;
        }
    }
    .ptro-color-active-control {
        background: $colorBtnMajorBg  !important;
        color: $colorBtnMajorFg !important;
    }
    .ptro-info,
    .ptro-btn-color-checkers-bar,
    *[title="Font name"],
    *[title="Stroke color"],
    *[title="Stroke width"],
    *[data-id="fontName"],
    *[data-id="fontStrokeSize"],
    *[data-id="stroke"] {
        display: none;
    }
 }
 /****************************** MOBILE */
 body.mobile {
    .c-notebook__drag-area { display: none; }
    .c-notebook__entry {
        [class*="local-controls"] {
            display: none;
        }
    }
    &.phone.portrait {
        .c-notebook__head,
        .c-notebook__entry {
            flex-direction: column;
            > [class*="__"] + [class*="__"] {
                margin-left: 0;
                margin-top: $interiorMargin;
            }
        }
        .c-notebook__entry {
            [class*="text"] {
                min-height: 0;
                padding: 0;
                pointer-events: none;
            }
        }
    }
 }
--- a/src/styles-new/sass-base.scss
+++ b/src/styles-new/sass-base.scss
@ -0,0 +1,7 @@
 // Imports only constants, mixins, etc.
 // Meant for use as a single line import in Vue SFC's.
 // Do not include anything that renders to CSS!
@import "constants";
@import "constants-mobile";
@import "constants-snow"; // TEMP
@import "mixins";
--- a/src/styles-new/theme-snow.scss
+++ b/src/styles-new/theme-snow.scss
--- a/src/styles-new/vendor/normalize.min.css
+++ b/src/styles-new/vendor/normalize.min.css
@ -0,0 +1 @@
 /*! normalize.css v1.1.2 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}html,button,input,select,textarea{font-family:sans-serif}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}h2{font-size:1.5em;margin:.83em 0}h3{font-size:1.17em;margin:1em 0}h4{font-size:1em;margin:1.33em 0}h5{font-size:.83em;margin:1.67em 0}h6{font-size:.67em;margin:2.33em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}blockquote{margin:1em 40px}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}p,pre{margin:1em 0}code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:'';content:none}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}dl,menu,ol,ul{margin:1em 0}dd{margin:0 0 0 40px}menu,ol,ul{padding:0 0 0 40px}nav ul,nav ol{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0;white-space:normal;*margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;*overflow:visible}button[disabled],html input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;*height:13px;*width:13px}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}
--- a/src/styles/_views.scss
+++ b/src/styles/_views.scss
@ -30,7 +30,8 @@
 .child-frame {
    .has-control-bar {
        $btnExportH: $btnFrameH;
-        .l-control-bar {
+        .l-control-bar,
        .c-control-bar {
            display: none;
        }
        .l-view-section {
--- a/Show More
+++ b/Show More
		`@ -0,0 +1 @@`
							/! normalize.css v1.1.2 \| MIT License \| git.io/normalize /article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block;display:inline;zoom:1}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}html,button,input,select,textarea{font-family:sans-serif}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}h2{font-size:1.5em;margin:.83em 0}h3{font-size:1.17em;margin:1em 0}h4{font-size:1em;margin:1.33em 0}h5{font-size:.83em;margin:1.67em 0}h6{font-size:.67em;margin:2.33em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}blockquote{margin:1em 40px}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}p,pre{margin:1em 0}code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:'';content:none}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}dl,menu,ol,ul{margin:1em 0}dd{margin:0 0 0 40px}menu,ol,ul{padding:0 0 0 40px}nav ul,nav ol{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0;white-space:normal;margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;vertical-align:middle}button,input{line-height:normal}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;overflow:visible}button[disabled],html input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;height:13px;*width:13px}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}