Store array of items in configuration.

* - Show "Add" button in the toolbar when a display layout object is selected.
- Add a flag to object view's show() method to indicate immediate selection of the view. If the view implements getSelectionContext() use it, otherwise set to default context.

* Create a component for each element.

* Saving work

* Add element factory for creating new instances of elements.

* Mutate element when a new one added and get elements when the component is mounted.

* Add create() method for creating a new telemetry and element in their respective view configuration.

* Add some of the toolbar controls for box, text, image and line elements. Also, add X, Y, Width and Height controls for alhpanumeric elements.

* Pass name to addElement as type.

* Add c-frame-inspectable class if item is inspectable.

* Clean up

* Hide frame for summary widgets by default.

* Better styling for editing

- s-selected on shell__main-container;
- Better edit grid coloring for espresso;

* - Update toolbar-button to support dialogs.
- Update toolbar to construct a value object based on form keys if a toolbar item has a dialogi, and mutate the form keys.
- Add toolbar controls for editing text and url for 'Text' and 'Image' elements respectively.

* Editing-related changes

- Removed hard-coded .is-selectable and .is-moveable from
LayoutItem.vue, updates accordingly to _global.scss;
- Theme constants updated;
- TODO: apply changes to Flexible Layouts;

* Better defaults

- Better default grid size and object size;

* - Fix toolbar-input to read value as a number if type is 'number'.
- Remove rawPosition from view configuration and instead get the position and dimensions from the properties (x, y, width and height) directly.
- Set the style property on the view configuration instead of the layout item.
- Move the logic for updating the style to the view configuration.

* Fix default dimensions for telemetry items and subobjects since the default grid size is changed.

* Remove form definition for display layout type.

* Reword the comment

* Let subobject view configuration handle new panel creation.

* Add default grid size back and remove unused code.

* Pass in only the needed method.

* Define default position in case the object is not added via drag 'n drop.

example/eventGenerator/bundle.js

@@ -49,7 +49,7 @@ define([
                 {
                     "key": "eventGenerator",
                     "name": "Event Message Generator",
-                    "cssClass": "icon-folder-new",
+                    "cssClass": "icon-generator-events",
                     "description": "For development use. Creates sample event message data that mimics a live data stream.",
                     "priority": 10,
                     "features": "creation",

example/generator/plugin.js

@@ -38,7 +38,7 @@ define([
         openmct.types.addType("example.state-generator", {
             name: "State Generator",
             description: "For development use.  Generates test enumerated telemetry by cycling through a given set of states",
-            cssClass: "icon-telemetry",
+            cssClass: "icon-generator-telemetry",
             creatable: true,
             form: [
                 {
@@ -66,7 +66,7 @@ define([
         openmct.types.addType("generator", {
             name: "Sine Wave Generator",
             description: "For development use. Generates example streaming telemetry data using a simple sine wave algorithm.",
-            cssClass: "icon-telemetry",
+            cssClass: "icon-generator-telemetry",
             creatable: true,
             form: [
                 {

index.html

@@ -77,6 +77,8 @@
         openmct.install(openmct.plugins.SummaryWidget());
         openmct.install(openmct.plugins.Notebook());
         openmct.install(openmct.plugins.FolderView());
+        openmct.install(openmct.plugins.Tabs());
+        openmct.install(openmct.plugins.FlexibleLayout());
         openmct.time.clock('local', {start: -THIRTY_MINUTES, end: 0});
         openmct.time.timeSystem('utc');
         openmct.start();

platform/commonUI/edit/bundle.js

@@ -23,7 +23,6 @@
 define([
     "./src/controllers/EditActionController",
     "./src/controllers/EditPanesController",
-    "./src/controllers/ElementsController",
     "./src/controllers/EditObjectController",
     "./src/actions/EditAndComposeAction",
     "./src/actions/EditAction",
@@ -47,7 +46,6 @@ define([
     "./src/creation/LocatorController",
     "./src/creation/CreationPolicy",
     "./src/creation/CreateActionProvider",
-    "./src/creation/AddActionProvider",
     "./src/creation/CreationService",
     "./res/templates/create/locator.html",
     "./res/templates/create/create-button.html",
@@ -55,13 +53,11 @@ define([
     "./res/templates/library.html",
     "./res/templates/edit-object.html",
     "./res/templates/edit-action-buttons.html",
-    "./res/templates/elements.html",
     "./res/templates/topbar-edit.html",
     'legacyRegistry'
 ], function (
     EditActionController,
     EditPanesController,
-    ElementsController,
     EditObjectController,
     EditAndComposeAction,
     EditAction,
@@ -85,7 +81,6 @@ define([
     LocatorController,
     CreationPolicy,
     CreateActionProvider,
-    AddActionProvider,
     CreationService,
     locatorTemplate,
     createButtonTemplate,
@@ -93,7 +88,6 @@ define([
     libraryTemplate,
     editObjectTemplate,
     editActionButtonsTemplate,
-    elementsTemplate,
     topbarEditTemplate,
     legacyRegistry
 ) {
@@ -115,14 +109,6 @@ define([
                         "$scope"
                     ]
                 },
-                {
-                    "key": "ElementsController",
-                    "implementation": ElementsController,
-                    "depends": [
-                        "$scope",
-                        "openmct"
-                    ]
-                },
                 {
                     "key": "EditObjectController",
                     "implementation": EditObjectController,
@@ -225,10 +211,10 @@ define([
                     "description": "Save changes made to these objects.",
                     "depends": [
                         "$injector",
-                        "policyService",
                         "dialogService",
                         "copyService",
-                        "notificationService"
+                        "notificationService",
+                        "openmct"
                     ],
                     "priority": "mandatory"
                 },
@@ -296,13 +282,6 @@ define([
                         "action"
                     ]
                 },
-                {
-                    "key": "edit-elements",
-                    "template": elementsTemplate,
-                    "gestures": [
-                        "drop"
-                    ]
-                },
                 {
                     "key": "topbar-edit",
                     "template": topbarEditTemplate
@@ -319,12 +298,6 @@ define([
                     ]
                 }
             ],
-            "templates": [
-                {
-                    key: "elementsPool",
-                    template: elementsTemplate
-                }
-            ],
             "components": [
                 {
                     "type": "decorator",
@@ -356,18 +329,6 @@ define([
                         "policyService"
                     ]
                 },
-                {
-                    "key": "AddActionProvider",
-                    "provides": "actionService",
-                    "type": "provider",
-                    "implementation": AddActionProvider,
-                    "depends": [
-                        "$q",
-                        "typeService",
-                        "dialogService",
-                        "policyService"
-                    ]
-                },
                 {
                     "key": "CreationService",
                     "provides": "creationService",

platform/commonUI/edit/res/templates/elements.html

@@ -1,49 +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.
--->
-<div ng-controller="ElementsController" class="flex-elem l-flex-col holder grows">
-    <mct-include key="'input-filter'"
-                 class="flex-elem holder"
-                 ng-model="filterBy">
-    </mct-include>
-    <div class="flex-elem grows vscroll scroll-pad">
-        <ul class="tree" id="inspector-elements-tree"
-            ng-if="composition.length > 0">
-            <li ng-repeat="containedObject in composition | filter:searchElements">
-                <span class="tree-item">
-                    <span class="grippy-sm"
-                          ng-if="composition.length > 1"
-                          data-id="{{ containedObject.id }}"
-                          mct-drag-down="dragDown($event)"
-                          mct-drag="drag($event)"
-                          mct-drag-up="dragUp($event)">
-                    </span>
-                    <mct-representation
-                            class="rep-object-label"
-                            key="'label'"
-                            mct-object="containedObject">
-                    </mct-representation>
-                </span>
-            </li>
-        </ul>
-        <div ng-if="composition.length === 0">No contained elements</div>    
-    </div>
-</div>

platform/commonUI/edit/src/actions/RemoveDialog.js

@@ -69,8 +69,8 @@ define([], function () {
                     }
                 ]
             };
+        setTimeout(() => this.removeCallback(domainObject));
 
-        dialog = this.dialogService.showBlockingMessage(model);
     };
 
     return RemoveDialog;

platform/commonUI/edit/src/actions/SaveAsAction.js

@@ -40,20 +40,20 @@ function (
          */
     function SaveAsAction(
         $injector,
-        policyService,
         dialogService,
         copyService,
         notificationService,
+        openmct,
         context
     ) {
         this.domainObject = (context || {}).domainObject;
         this.injectObjectService = function () {
             this.objectService = $injector.get("objectService");
         };
-        this.policyService = policyService;
         this.dialogService = dialogService;
         this.copyService = copyService;
         this.notificationService = notificationService;
+        this.openmct = openmct;
     }
 
     /**
@@ -63,7 +63,7 @@ function (
         return new CreateWizard(
             this.domainObject,
             parent,
-            this.policyService
+            this.openmct
         );
     };
 

platform/commonUI/edit/src/capabilities/EditorCapability.js

@@ -51,8 +51,11 @@ define(
          */
         EditorCapability.prototype.edit = function () {
             console.warn('DEPRECATED: cannot edit via edit capability, use openmct.editor instead.');
-            this.openmct.editor.edit();
-            this.domainObject.getCapability('status').set('editing', true);
+
+            if (!this.openmct.editor.isEditing()) {
+                this.openmct.editor.edit();
+                this.domainObject.getCapability('status').set('editing', true);
+            }
         };
 
         /**

platform/commonUI/edit/src/controllers/ElementsController.js

@@ -1,197 +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(
-    ['zepto'],
-    function ($) {
-
-        /**
-         * The ElementsController prepares the elements view for display
-         *
-         * @constructor
-         */
-        function ElementsController($scope, openmct) {
-            this.scope = $scope;
-            this.scope.composition = [];
-            this.openmct = openmct;
-            this.dragDown = this.dragDown.bind(this);
-            this.dragUp = this.dragUp.bind(this);
-
-            var self = this;
-
-            function filterBy(text) {
-                if (typeof text === 'undefined') {
-                    return $scope.searchText;
-                } else {
-                    $scope.searchText = text;
-                }
-            }
-
-            function searchElements(value) {
-                if ($scope.searchText) {
-                    return value.getModel().name.toLowerCase().search(
-                        $scope.searchText.toLowerCase()) !== -1;
-                } else {
-                    return true;
-                }
-            }
-
-            function setSelection(selection) {
-                if (!selection[0]) {
-                    return;
-                }
-
-                if (self.mutationListener) {
-                    self.mutationListener();
-                    delete self.mutationListener;
-                }
-
-                var domainObject = selection[0].context.oldItem;
-                self.refreshComposition(domainObject);
-
-                if (domainObject) {
-
-                    self.mutationListener = domainObject.getCapability('mutation')
-                        .listen(self.refreshComposition.bind(self, domainObject));
-                }
-            }
-
-            $scope.filterBy = filterBy;
-            $scope.searchElements = searchElements;
-
-            openmct.selection.on('change', setSelection);
-            setSelection(openmct.selection.get());
-
-            $scope.dragDown = this.dragDown;
-            $scope.drag = this.drag;
-            $scope.dragUp = this.dragUp;
-
-            $scope.$on("$destroy", function () {
-                openmct.selection.off("change", setSelection);
-            });
-        }
-
-        /**
-         * Invoked on DragStart - Adds reordering class to parent UL element
-         * Sets selected object ID, to be used on Drag End
-         *
-         * @param {object} event | Mouse Event
-         */
-        ElementsController.prototype.dragDown = function (event) {
-            if (!this.parentUL) {
-                this.parentUL = $(document).find('#inspector-elements-tree');
-            }
-
-            this.selectedTreeItem = $(event.target).parent();
-            this.selectedObjectId = event.target.getAttribute('data-id');
-
-            this.parentUL.addClass('reordering');
-            this.selectedTreeItem.addClass('reorder-actor');
-        };
-
-        /**
-         * Invoked on dragEnd - Removes selected object from position in composition
-         * and replaces it at the target position. Composition is then updated with current
-         * scope
-         *
-         * @param {object} event - Mouse Event
-         */
-        ElementsController.prototype.dragUp = function (event) {
-            this.targetObjectId = event.target.getAttribute('data-id');
-
-            if (this.targetObjectId && this.selectedObjectId) {
-                var selectedObjectPosition,
-                    targetObjectPosition;
-
-                selectedObjectPosition = findObjectInCompositionFromId(this.selectedObjectId, this.scope.composition);
-                targetObjectPosition = findObjectInCompositionFromId(this.targetObjectId, this.scope.composition);
-
-                if ((selectedObjectPosition !== -1) && (targetObjectPosition !== -1)) {
-                    var selectedObject = this.scope.composition.splice(selectedObjectPosition, 1),
-                        selection = this.openmct.selection.get(),
-                        domainObject = selection ? selection[0].context.oldItem : undefined;
-
-                    this.scope.composition.splice(targetObjectPosition, 0, selectedObject[0]);
-
-                    if (domainObject) {
-                        domainObject.getCapability('mutation').mutate(function (model) {
-                            model.composition = this.scope.composition.map(function (dObject) {
-                                return dObject.id;
-                            });
-                        }.bind(this));
-                    }
-                }
-            }
-
-            if (this.parentUL) {
-                this.parentUL.removeClass('reordering');
-            }
-
-            if (this.selectedTreeItem) {
-                this.selectedTreeItem.removeClass('reorder-actor');
-            }
-        };
-
-        ElementsController.prototype.drag = function (event) {
-
-        };
-
-        /**
-         * Gets the composition for the selected object and populates the scope with it.
-         *
-         * @param domainObject the selected object
-         * @private
-         */
-        ElementsController.prototype.refreshComposition = function (domainObject) {
-            var refreshTracker = {};
-            this.currentRefresh = refreshTracker;
-
-            var selectedObjectComposition = domainObject && domainObject.useCapability('composition');
-            if (selectedObjectComposition) {
-                selectedObjectComposition.then(function (composition) {
-                    if (this.currentRefresh === refreshTracker) {
-                        this.scope.composition = composition;
-                    }
-                }.bind(this));
-            } else {
-                this.scope.composition = [];
-            }
-        };
-
-        /**
-         * Finds position of object with given ID in Composition
-         *
-         * @param {String} id
-         * @param {Array} composition
-         * @private
-         */
-        function findObjectInCompositionFromId(id, composition) {
-            var mapped = composition.map(function (element) {
-                return element.id;
-            });
-
-            return mapped.indexOf(id);
-        }
-
-        return ElementsController;
-    }
-);

platform/commonUI/edit/src/creation/AddAction.js

@@ -1,133 +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.
- *****************************************************************************/
-
-/**
- * Module defining AddAction. Created by ahenry on 01/21/16.
- */
-define(
-    [
-        './CreateWizard'
-    ],
-    function (CreateWizard) {
-
-        /**
-         * The Add Action is performed to create new instances of
-         * domain objects of a specific type that are subobjects of an
-         * object being edited. This is the action that is performed when a
-         * user uses the Add menu option.
-         *
-         * @memberof platform/commonUI/browse
-         * @implements {Action}
-         * @constructor
-         *
-         * @param {Type} type the type of domain object to create
-         * @param {DomainObject} parent the domain object that should
-         *        act as a container for the newly-created object
-         *        (note that the user will have an opportunity to
-         *        override this)
-         * @param {ActionContext} context the context in which the
-         *        action is being performed
-         * @param {DialogService} dialogService
-         */
-        function AddAction(type, parent, context, $q, dialogService, policyService) {
-            this.metadata = {
-                key: 'add',
-                cssClass: type.getCssClass(),
-                name: type.getName(),
-                type: type.getKey(),
-                description: type.getDescription(),
-                context: context
-            };
-
-            this.type = type;
-            this.parent = parent;
-            this.$q = $q;
-            this.dialogService = dialogService;
-            this.policyService = policyService;
-        }
-
-        /**
-         *
-         * Create a new object of the given type.
-         * This will prompt for user input first.
-         *
-         * @returns {Promise} that will be resolved with the object that the
-         * action was originally invoked on (ie. the 'parent')
-         */
-        AddAction.prototype.perform = function () {
-            var newModel = this.type.getInitialModel(),
-                newObject,
-                parentObject = this.parent,
-                wizard;
-
-            newModel.type = this.type.getKey();
-            newObject = parentObject.getCapability('instantiation').instantiate(newModel);
-            newObject.useCapability('mutation', function (model) {
-                model.location = parentObject.getId();
-            });
-
-            wizard = new CreateWizard(newObject, this.parent, this.policyService);
-
-            function populateObjectFromInput(formValue) {
-                return wizard.populateObjectFromInput(formValue, newObject);
-            }
-
-            function persistAndReturn(domainObject) {
-                return domainObject.getCapability('persistence')
-                    .persist()
-                    .then(function () {
-                        return domainObject;
-                    });
-            }
-
-            function addToParent(populatedObject) {
-                parentObject.getCapability('composition').add(populatedObject);
-                return persistAndReturn(parentObject);
-            }
-
-            return this.dialogService
-                .getUserInput(wizard.getFormStructure(false), wizard.getInitialFormValue())
-                .then(populateObjectFromInput)
-                .then(persistAndReturn)
-                .then(addToParent);
-
-        };
-
-
-        /**
-         * Metadata associated with a Add action.
-         * @typedef {ActionMetadata} AddActionMetadata
-         * @property {string} type the key for the type of domain object
-         *           to be created
-         */
-
-        /**
-         * Get metadata about this action.
-         * @returns {AddActionMetadata} metadata about this action
-         */
-        AddAction.prototype.getMetadata = function () {
-            return this.metadata;
-        };
-
-        return AddAction;
-    }
-);

platform/commonUI/edit/src/creation/AddActionProvider.js

@@ -1,82 +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.
- *****************************************************************************/
-
-/**
- * Module defining AddActionProvider.js. Created by ahenry on 01/21/16.
- */
-define(
-    ["./AddAction"],
-    function (AddAction) {
-
-        /**
-         * The AddActionProvider is an ActionProvider which introduces
-         * an Add action for creating sub objects.
-         *
-         * @memberof platform/commonUI/browse
-         * @constructor
-         * @implements {ActionService}
-         *
-         * @param {TypeService} typeService the type service, used to discover
-         *        available types
-         * @param {DialogService} dialogService the dialog service, used by
-         *        specific Create actions to get user input to populate the
-         *        model of the newly-created domain object.
-         * @param {CreationService} creationService the creation service (also
-         *        introduced in this bundle), responsible for handling actual
-         *        object creation.
-         */
-        function AddActionProvider($q, typeService, dialogService, policyService) {
-            this.typeService = typeService;
-            this.dialogService = dialogService;
-            this.$q = $q;
-            this.policyService = policyService;
-        }
-
-        AddActionProvider.prototype.getActions = function (actionContext) {
-            var context = actionContext || {},
-                key = context.key,
-                destination = context.domainObject;
-
-            // We only provide Add actions, and we need a
-            // domain object to serve as the container for the
-            // newly-created object (although the user may later
-            // make a different selection)
-            if (key !== 'add' || !destination) {
-                return [];
-            }
-
-            // Introduce one create action per type
-            return ['timeline', 'activity'].map(function (type) {
-                return new AddAction(
-                    this.typeService.getType(type),
-                    destination,
-                    context,
-                    this.$q,
-                    this.dialogService,
-                    this.policyService
-                );
-            }, this);
-        };
-
-        return AddActionProvider;
-    }
-);

platform/commonUI/edit/src/creation/CreateWizard.js

@@ -34,13 +34,13 @@ define(
          * @memberof platform/commonUI/browse
          * @constructor
          */
-        function CreateWizard(domainObject, parent, policyService) {
+        function CreateWizard(domainObject, parent, openmct) {
             this.type = domainObject.getCapability('type');
             this.model = domainObject.getModel();
             this.domainObject = domainObject;
             this.properties = this.type.getProperties();
             this.parent = parent;
-            this.policyService = policyService;
+            this.openmct = openmct;
         }
 
         /**
@@ -56,15 +56,10 @@ define(
          */
         CreateWizard.prototype.getFormStructure = function (includeLocation) {
             var sections = [],
-                domainObject = this.domainObject,
-                policyService = this.policyService;
+                domainObject = this.domainObject;
 
             function validateLocation(parent) {
-                return parent && policyService.allow(
-                    "composition",
-                    parent,
-                    domainObject
-                );
+                return parent && this.openmct.composition.checkPolicy(parent.useCapability('adapter'), domainObject.useCapability('adapter'));
             }
 
             sections.push({
@@ -93,7 +88,7 @@ define(
                     rows: [{
                         name: "Save In",
                         control: "locator",
-                        validate: validateLocation,
+                        validate: validateLocation.bind(this),
                         key: "createParent"
                     }]
                 });

platform/commonUI/edit/src/policies/EditContextualActionPolicy.js

@@ -55,16 +55,19 @@ define(
                 navigatedObject = this.navigationService.getNavigation(),
                 actionMetadata = action.getMetadata ? action.getMetadata() : {};
 
+            // FIXME: need to restore support for changing contextual actions
+            // based on edit mode.
             // 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;
-                }
+                // 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 {
             //     return true;
             // }
+            return true;
         };
 
         return EditContextualActionPolicy;

platform/commonUI/edit/test/controllers/ElementsControllerSpec.js

@@ -1,184 +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.
- *****************************************************************************/
-/*global describe,it,expect,beforeEach,jasmine*/
-
-define(
-    ["../../src/controllers/ElementsController"],
-    function (ElementsController) {
-
-        describe("The Elements Pane controller", function () {
-            var mockScope,
-                mockOpenMCT,
-                mockSelection,
-                mockDomainObject,
-                mockMutationCapability,
-                mockCompositionCapability,
-                mockCompositionObjects,
-                mockComposition,
-                mockUnlisten,
-                selectable = [],
-                controller;
-
-            function mockPromise(value) {
-                return {
-                    then: function (thenFunc) {
-                        return mockPromise(thenFunc(value));
-                    }
-                };
-            }
-
-            function createDomainObject() {
-                return {
-                    useCapability: function () {
-                        return mockCompositionCapability;
-                    }
-                };
-            }
-
-            beforeEach(function () {
-                mockComposition = ["a", "b"];
-                mockCompositionObjects = mockComposition.map(createDomainObject);
-                mockCompositionCapability = mockPromise(mockCompositionObjects);
-
-                mockUnlisten = jasmine.createSpy('unlisten');
-                mockMutationCapability = jasmine.createSpyObj("mutationCapability", [
-                    "listen"
-                ]);
-                mockMutationCapability.listen.and.returnValue(mockUnlisten);
-                mockDomainObject = jasmine.createSpyObj("domainObject", [
-                    "getCapability",
-                    "useCapability"
-                ]);
-                mockDomainObject.useCapability.and.returnValue(mockCompositionCapability);
-                mockDomainObject.getCapability.and.returnValue(mockMutationCapability);
-
-                mockScope = jasmine.createSpyObj("$scope", ['$on']);
-                mockSelection = jasmine.createSpyObj("selection", [
-                    'on',
-                    'off',
-                    'get'
-                ]);
-                mockSelection.get.and.returnValue([]);
-                mockOpenMCT = {
-                    selection: mockSelection
-                };
-
-                selectable[0] = {
-                    context: {
-                        oldItem: mockDomainObject
-                    }
-                };
-
-                spyOn(ElementsController.prototype, 'refreshComposition').and.callThrough();
-
-                controller = new ElementsController(mockScope, mockOpenMCT);
-            });
-
-            function getModel(model) {
-                return function () {
-                    return model;
-                };
-            }
-
-            it("filters objects in elements pool based on input text and" +
-                " object name", function () {
-                var objects = [
-                    {
-                        getModel: getModel({name: "first element"})
-                    },
-                    {
-                        getModel: getModel({name: "second element"})
-                    },
-                    {
-                        getModel: getModel({name: "third element"})
-                    },
-                    {
-                        getModel: getModel({name: "THIRD Element 1"})
-                    }
-                ];
-
-                mockScope.filterBy("third element");
-                expect(objects.filter(mockScope.searchElements).length).toBe(2);
-                mockScope.filterBy("element");
-                expect(objects.filter(mockScope.searchElements).length).toBe(4);
-            });
-
-            it("refreshes composition on selection", function () {
-                mockOpenMCT.selection.on.calls.mostRecent().args[1](selectable);
-
-                expect(ElementsController.prototype.refreshComposition).toHaveBeenCalledWith(mockDomainObject);
-            });
-
-            it("listens on mutation and refreshes composition", function () {
-                mockOpenMCT.selection.on.calls.mostRecent().args[1](selectable);
-
-                expect(mockDomainObject.getCapability).toHaveBeenCalledWith('mutation');
-                expect(mockMutationCapability.listen).toHaveBeenCalled();
-                expect(ElementsController.prototype.refreshComposition.calls.count()).toBe(1);
-
-                mockMutationCapability.listen.calls.mostRecent().args[0](mockDomainObject);
-
-                expect(ElementsController.prototype.refreshComposition.calls.count()).toBe(2);
-            });
-
-            it("cleans up mutation listener when selection changes", function () {
-                mockOpenMCT.selection.on.calls.mostRecent().args[1](selectable);
-
-                expect(mockMutationCapability.listen).toHaveBeenCalled();
-
-                mockOpenMCT.selection.on.calls.mostRecent().args[1](selectable);
-
-                expect(mockUnlisten).toHaveBeenCalled();
-            });
-
-            it("does not listen on mutation for element proxy selectable", function () {
-                selectable[0] = {
-                    context: {
-                        elementProxy: {}
-                    }
-                };
-                mockOpenMCT.selection.on.calls.mostRecent().args[1](selectable);
-
-                expect(mockDomainObject.getCapability).not.toHaveBeenCalledWith('mutation');
-            });
-
-            it("checks concurrent changes to composition", function () {
-                var secondMockComposition = ["a", "b", "c"],
-                    secondMockCompositionObjects = secondMockComposition.map(createDomainObject),
-                    firstCompositionCallback,
-                    secondCompositionCallback;
-
-                spyOn(mockCompositionCapability, "then").and.callThrough();
-
-                controller.refreshComposition(mockDomainObject);
-                controller.refreshComposition(mockDomainObject);
-
-                firstCompositionCallback = mockCompositionCapability.then.calls.all()[0].args[0];
-                secondCompositionCallback = mockCompositionCapability.then.calls.all()[1].args[0];
-                secondCompositionCallback(secondMockCompositionObjects);
-                firstCompositionCallback(mockCompositionObjects);
-
-                expect(mockScope.composition).toBe(secondMockCompositionObjects);
-            });
-        });
-    }
-);

platform/commonUI/edit/test/creation/AddActionProviderSpec.js

@@ -1,105 +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.
- *****************************************************************************/
-
-/**
- * MCTRepresentationSpec. Created by ahenry on 01/21/14.
- */
-define(
-    ["../../src/creation/AddActionProvider"],
-    function (AddActionProvider) {
-
-        describe("The add action provider", function () {
-            var mockTypeService,
-                mockDialogService,
-                mockPolicyService,
-                mockTypeMap,
-                mockTypes,
-                mockDomainObject,
-                mockQ,
-                provider;
-
-            function createMockType(name) {
-                var mockType = jasmine.createSpyObj(
-                    "type" + name,
-                    [
-                        "getKey",
-                        "getGlyph",
-                        "getCssClass",
-                        "getName",
-                        "getDescription",
-                        "getProperties",
-                        "getInitialModel",
-                        "hasFeature"
-                    ]
-                );
-                mockType.hasFeature.and.returnValue(true);
-                mockType.getName.and.returnValue(name);
-                mockType.getKey.and.returnValue(name);
-                return mockType;
-            }
-
-            beforeEach(function () {
-                mockTypeService = jasmine.createSpyObj(
-                    "typeService",
-                    ["getType"]
-                );
-                mockDialogService = {};
-                mockPolicyService = {};
-                mockDomainObject = {};
-
-                mockTypes = [
-                    "timeline",
-                    "activity",
-                    "other"
-                ].map(createMockType);
-                mockTypeMap = {};
-
-                mockTypes.forEach(function (type) {
-                    mockTypeMap[type.getKey()] = type;
-                });
-
-                mockTypeService.getType.and.callFake(function (key) {
-                    return mockTypeMap[key];
-                });
-
-                provider = new AddActionProvider(
-                    mockQ,
-                    mockTypeService,
-                    mockDialogService,
-                    mockPolicyService
-                );
-            });
-
-            it("provides actions for timeline and activity", function () {
-                var actions = provider.getActions({
-                    key: "add",
-                    domainObject: mockDomainObject
-                });
-                expect(actions.length).toBe(2);
-                expect(actions[0].metadata.type).toBe('timeline');
-                expect(actions[1].metadata.type).toBe('activity');
-
-                // Make sure it was creation which was used to check
-            });
-        });
-    }
-);

platform/containment/bundle.js

@@ -58,7 +58,8 @@ define([
                     "category": "action",
                     "implementation": ComposeActionPolicy,
                     "depends": [
-                        "$injector"
+                        "$injector",
+                        "openmct"
                     ],
                     "message": "Objects of this type cannot contain objects of that type."
                 },

platform/containment/src/ComposeActionPolicy.js

@@ -36,10 +36,11 @@ define(
          * @memberof platform/containment
          * @implements {Policy.<Action, ActionContext>}
          */
-        function ComposeActionPolicy($injector) {
+        function ComposeActionPolicy($injector, openmct) {
             this.getPolicyService = function () {
                 return $injector.get('policyService');
             };
+            this.openmct = openmct;
         }
 
         ComposeActionPolicy.prototype.allowComposition = function (containerObject, selectedObject) {
@@ -49,11 +50,8 @@ define(
 
             // ...and delegate to the composition policy
             return containerObject.getId() !== selectedObject.getId() &&
-                this.policyService.allow(
-                    'composition',
-                    containerObject,
-                    selectedObject
-                );
+                this.openmct.composition.checkPolicy(containerObject.useCapability('adapter'),
+                    selectedObject.useCapability('adapter'));
         };
 
         /**

platform/entanglement/bundle.js

@@ -170,7 +170,7 @@ define([
                     "description": "Provides a service for moving objects",
                     "implementation": MoveService,
                     "depends": [
-                        "policyService",
+                        "openmct",
                         "linkService",
                         "$q"
                     ]
@@ -181,7 +181,7 @@ define([
                     "description": "Provides a service for linking objects",
                     "implementation": LinkService,
                     "depends": [
-                        "policyService"
+                        "openmct"
                     ]
                 },
                 {
@@ -192,7 +192,7 @@ define([
                     "depends": [
                         "$q",
                         "policyService",
-                        "now"
+                        "openmct"
                     ]
                 },
                 {

platform/entanglement/src/services/CopyService.js

@@ -33,9 +33,10 @@ define(
          * @memberof platform/entanglement
          * @implements {platform/entanglement.AbstractComposeService}
          */
-        function CopyService($q, policyService) {
+        function CopyService($q, policyService, openmct) {
             this.$q = $q;
             this.policyService = policyService;
+            this.openmct = openmct;
         }
 
         CopyService.prototype.validate = function (object, parentCandidate) {
@@ -45,11 +46,7 @@ define(
             if (parentCandidate.getId() === object.getId()) {
                 return false;
             }
-            return this.policyService.allow(
-                "composition",
-                parentCandidate,
-                object
-            );
+            return this.openmct.composition.checkPolicy(parentCandidate.useCapability('adapter'), object.useCapability('adapter'));
         };
 
         /**

platform/entanglement/src/services/LinkService.js

@@ -32,8 +32,8 @@ define(
          * @memberof platform/entanglement
          * @implements {platform/entanglement.AbstractComposeService}
          */
-        function LinkService(policyService) {
-            this.policyService = policyService;
+        function LinkService(openmct) {
+            this.openmct = openmct;
         }
 
         LinkService.prototype.validate = function (object, parentCandidate) {
@@ -49,11 +49,7 @@ define(
             if (parentCandidate.getModel().composition.indexOf(object.getId()) !== -1) {
                 return false;
             }
-            return this.policyService.allow(
-                "composition",
-                parentCandidate,
-                object
-            );
+            return this.openmct.composition.checkPolicy(parentCandidate.useCapability('adapter'), object.useCapability('adapter'));
         };
 
         LinkService.prototype.perform = function (object, parentObject) {

platform/entanglement/src/services/MoveService.js

@@ -31,8 +31,8 @@ define(
          * @memberof platform/entanglement
          * @implements {platform/entanglement.AbstractComposeService}
          */
-        function MoveService(policyService, linkService) {
-            this.policyService = policyService;
+        function MoveService(openmct, linkService) {
+            this.openmct = openmct;
             this.linkService = linkService;
         }
 
@@ -53,10 +53,9 @@ define(
             if (parentCandidate.getModel().composition.indexOf(object.getId()) !== -1) {
                 return false;
             }
-            return this.policyService.allow(
-                "composition",
-                parentCandidate,
-                object
+            return this.openmct.composition.checkPolicy(
+                parentCandidate.useCapability('adapter'),
+                object.useCapability('adapter')
             );
         };
 

platform/exporters/bundle.js

@@ -32,7 +32,7 @@ define([
                 {
                     key: "exportService",
                     implementation: function () {
-                        return new ExportService(saveAs);
+                        return new ExportService(saveAs.saveAs);
                     }
                 }
             ],

platform/features/fixed/plugin.js

@@ -104,9 +104,9 @@ define([
                                 }
                                 
                                 return (openmct.editor.isEditing() &&
-                                    (selection[0] && selection[0].context.elementProxy &&
-                                    selection[1] && selection[1].context.item.type === 'telemetry.fixed' ||
-                                    selection[0] && selection[0].context.item.type === 'telemetry.fixed'));
+                                    selection[0] && selection[0].context.elementProxy &&
+                                    ((selection[1] && selection[1].context.item.type === 'telemetry.fixed') ||
+                                    (selection[0] && selection[0].context.item && selection[0].context.item.type === 'telemetry.fixed')));
                             },
                             toolbar: function (selection) {
                                 var imageProperties = ["add", "remove", "order", "stroke", "useGrid", "x", "y", "height", "width", "url"];

platform/features/fixed/test/LayoutCompositionPolicySpec.js

@@ -1,82 +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(
-    ["../src/LayoutCompositionPolicy"],
-    function (LayoutCompositionPolicy) {
-        describe("Layout's composition policy", function () {
-            var mockChild,
-                mockCandidateObj,
-                mockCandidate,
-                mockContext,
-                candidateType,
-                contextType,
-                policy;
-
-            beforeEach(function () {
-                mockChild = jasmine.createSpyObj(
-                    'childObject',
-                    ['getCapability']
-                );
-                mockCandidate =
-                    jasmine.createSpyObj('candidateType', ['instanceOf']);
-                mockContext =
-                    jasmine.createSpyObj('contextType', ['instanceOf']);
-
-                mockCandidateObj = jasmine.createSpyObj('domainObj', [
-                    'getCapability'
-                ]);
-                mockCandidateObj.getCapability.and.returnValue(mockCandidate);
-
-                mockChild.getCapability.and.returnValue(mockContext);
-
-                mockCandidate.instanceOf.and.callFake(function (t) {
-                    return t === candidateType;
-                });
-                mockContext.instanceOf.and.callFake(function (t) {
-                    return t === contextType;
-                });
-
-                policy = new LayoutCompositionPolicy();
-            });
-
-            it("disallows folders in layouts", function () {
-                candidateType = 'layout';
-                contextType = 'folder';
-                expect(policy.allow(mockCandidateObj, mockChild)).toBe(false);
-            });
-
-            it("does not disallow folders elsewhere", function () {
-                candidateType = 'nonlayout';
-                contextType = 'folder';
-                expect(policy.allow(mockCandidateObj, mockChild)).toBe(true);
-            });
-
-            it("allows things other than folders in layouts", function () {
-                candidateType = 'layout';
-                contextType = 'nonfolder';
-                expect(policy.allow(mockCandidateObj, mockChild)).toBe(true);
-            });
-
-        });
-    }
-);

src/MCT.js

@@ -41,6 +41,8 @@ define([
     './styles-new/core.scss',
     './styles-new/notebook.scss',
     './ui/components/layout/Layout.vue',
+    '../platform/core/src/objects/DomainObjectImpl',
+    '../platform/core/src/capabilities/ContextualDomainObject',
     'vue'
 ], function (
     EventEmitter,
@@ -63,6 +65,8 @@ define([
     coreStyles,
     NotebookStyles,
     Layout,
+    DomainObjectImpl,
+    ContextualDomainObject,
     Vue
 ) {
     /**
@@ -220,6 +224,8 @@ define([
 
         this.overlays = new OverlayAPI.default();
 
+        this.contextMenu = new api.ContextMenuRegistry();
+
         this.legacyRegistry = defaultRegistry;
         this.install(this.plugins.Plot());
         this.install(this.plugins.TelemetryTable());
@@ -241,6 +247,42 @@ define([
         this.legacyBundle.extensions[category].push(extension);
     };
 
+    /**
+     * Return a legacy object, for compatibility purposes only.  This method
+     * will be deprecated and removed in the future.
+     * @private
+     */
+    MCT.prototype.legacyObject = function (domainObject) {
+        let capabilityService = this.$injector.get('capabilityService');
+
+        function instantiate(model, keyString) {
+            var capabilities = capabilityService.getCapabilities(model, keyString);
+            model.id = keyString;
+            return new DomainObjectImpl(keyString, model, capabilities);
+        }
+
+        if (Array.isArray(domainObject)) {
+            // an array of domain objects. [object, ...ancestors] representing
+            // a single object with a given chain of ancestors.  We instantiate
+            // as a single contextual domain object.
+            return domainObject
+                .map((o) => {
+                    let keyString = objectUtils.makeKeyString(o.identifier);
+                    let oldModel = objectUtils.toOldFormat(o);
+                    return instantiate(oldModel, keyString);
+                })
+                .reverse()
+                .reduce((parent, child) => {
+                    return new ContextualDomainObject(child, parent);
+                });
+
+        } else {
+            let keyString = objectUtils.makeKeyString(domainObject.identifier);
+            let oldModel = objectUtils.toOldFormat(domainObject);
+            return instantiate(oldModel, keyString);
+        }
+    };
+
     /**
      * Set path to where assets are hosted.  This should be the path to main.js.
      * @memberof module:openmct.MCT#

src/adapter/actions/LegacyActionAdapter.js

@@ -20,32 +20,18 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define(
-    [],
-    function () {
-
-        /**
-         * Defines composition policy for Display Layout objects.
-         * They cannot contain folders.
-         * @constructor
-         * @memberof platform/features/layout
-         * @implements {Policy.<View, DomainObject>}
-         */
-        function LayoutCompositionPolicy() {
-        }
-
-        LayoutCompositionPolicy.prototype.allow = function (parent, child) {
-            var parentType = parent.getCapability('type');
-            if (parentType.instanceOf('layout') &&
-                child.getCapability('type').instanceOf('folder')) {
-
-                return false;
-            }
+import LegacyContextMenuAction from './LegacyContextMenuAction';
 
+export default function LegacyActionAdapter(openmct, legacyActions) {
+    function contextualCategoryOnly(action) {
+        if (action.category === 'contextual') {
             return true;
-        };
-
-        return LayoutCompositionPolicy;
+        }
+        console.warn(`DEPRECATION WARNING: Action ${action.definition.key} in bundle ${action.bundle.path} is non-contextual and should be migrated.`);
+        return false;
     }
-);
 
+    legacyActions.filter(contextualCategoryOnly)
+        .map(LegacyAction => new LegacyContextMenuAction(openmct, LegacyAction))
+        .forEach(openmct.contextMenu.registerAction);
+}

src/adapter/actions/LegacyContextMenuAction.js

@@ -0,0 +1,57 @@
+import { timingSafeEqual } from "crypto";
+
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+
+export default class LegacyContextMenuAction {
+    constructor(openmct, LegacyAction) {
+        this.openmct = openmct;
+        this.name = LegacyAction.definition.name;
+        this.description = LegacyAction.definition.description;
+        this.cssClass = LegacyAction.definition.cssClass;
+        this.LegacyAction = LegacyAction;
+    }
+
+    appliesTo(objectPath) {
+        let legacyObject = this.openmct.legacyObject(objectPath);
+        return this.LegacyAction.appliesTo({
+            domainObject: legacyObject
+        });
+    }
+
+    invoke(objectPath) {
+        let context = {
+            category: 'contextual',
+            domainObject: this.openmct.legacyObject(objectPath)
+        }
+        let legacyAction = new this.LegacyAction(context);
+
+        if (!legacyAction.getMetadata) {
+            let metadata = Object.create(this.LegacyAction.definition);
+            metadata.context = context;
+            legacyAction.getMetadata = function () {
+                return metadata;
+            }.bind(legacyAction);
+        }
+        legacyAction.perform();
+    }
+}

src/adapter/bundle.js

@@ -28,7 +28,6 @@ define([
     './services/Instantiate',
     './services/MissingModelCompatibilityDecorator',
     './capabilities/APICapabilityDecorator',
-    './policies/AdapterCompositionPolicy',
     './policies/AdaptedViewPolicy',
     './runs/AlternateCompositionInitializer',
     './runs/TimeSettingsURLHandler',
@@ -36,7 +35,9 @@ define([
     './runs/LegacyTelemetryProvider',
     './runs/RegisterLegacyTypes',
     './services/LegacyObjectAPIInterceptor',
-    './views/installLegacyViews'
+    './views/installLegacyViews',
+    './policies/legacyCompositionPolicyAdapter',
+    './actions/LegacyActionAdapter'
 ], function (
     legacyRegistry,
     ActionDialogDecorator,
@@ -45,7 +46,6 @@ define([
     Instantiate,
     MissingModelCompatibilityDecorator,
     APICapabilityDecorator,
-    AdapterCompositionPolicy,
     AdaptedViewPolicy,
     AlternateCompositionInitializer,
     TimeSettingsURLHandler,
@@ -53,7 +53,9 @@ define([
     LegacyTelemetryProvider,
     RegisterLegacyTypes,
     LegacyObjectAPIInterceptor,
-    installLegacyViews
+    installLegacyViews,
+    legacyCompositionPolicyAdapter,
+    LegacyActionAdapter
 ) {
     legacyRegistry.register('src/adapter', {
         "extensions": {
@@ -117,11 +119,6 @@ define([
                 }
             ],
             policies: [
-                {
-                    category: "composition",
-                    implementation: AdapterCompositionPolicy,
-                    depends: ["openmct"]
-                },
                 {
                     category: "view",
                     implementation: AdaptedViewPolicy,
@@ -168,6 +165,19 @@ define([
                         "types[]",
                         "openmct"
                     ]
+                },
+                {
+                    implementation: legacyCompositionPolicyAdapter.default,
+                    depends: [
+                        "openmct"
+                    ]
+                },
+                {
+                    implementation: LegacyActionAdapter.default,
+                    depends: [
+                        "openmct",
+                        "actions[]"
+                    ]
                 }
             ],
             licenses: [

src/adapter/policies/LegacyCompositionPolicyAdapter.js

@@ -0,0 +1,42 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+
+export default function legacyCompositionPolicyAdapter(openmct) {
+    const instantiate = this.openmct.$injector.get('instantiate');
+    const policyService = this.openmct.$injector.get('policyService');
+
+    openmct.composition.addPolicy((parent, child) => {
+
+        let parentId = this.openmct.objects.makeKeyString(parent.identifier);
+        let childId = this.openmct.objects.makeKeyString(child.identifier);
+
+        let legacyParent = instantiate(parent, parentId);
+        let legacyChild = instantiate(child, childId);
+        let result = policyService.allow(
+            'composition',
+            legacyParent,
+            legacyChild
+        );
+
+        return result;
+    });
+}

src/api/Editor.js

@@ -36,6 +36,9 @@ export default class Editor extends EventEmitter {
      * or finish() are called.
      */
     edit() {
+        if (this.editing === true) {
+            throw "Already editing";
+        }
         this.editing = true;
         this.getTransactionService().startTransaction();
         this.emit('isEditing', true);

src/api/api.js

@@ -28,6 +28,7 @@ define([
     './telemetry/TelemetryAPI',
     './indicators/IndicatorAPI',
     './notifications/NotificationAPI',
+    './contextMenu/ContextMenuAPI',
     './Editor'
 
 ], function (
@@ -38,6 +39,7 @@ define([
     TelemetryAPI,
     IndicatorAPI,
     NotificationAPI,
+    ContextMenuAPI,
     EditorAPI
 ) {
     return {
@@ -48,6 +50,7 @@ define([
         TelemetryAPI: TelemetryAPI,
         IndicatorAPI: IndicatorAPI,
         NotificationAPI: NotificationAPI.default,
-        EditorAPI: EditorAPI
+        EditorAPI: EditorAPI,
+        ContextMenuRegistry: ContextMenuAPI.default
     };
 });

src/api/composition/CompositionAPI.js

@@ -44,7 +44,7 @@ define([
     function CompositionAPI(publicAPI) {
         this.registry = [];
         this.policies = [];
-        this.addProvider(new DefaultCompositionProvider(publicAPI));
+        this.addProvider(new DefaultCompositionProvider(publicAPI, this));
         this.publicAPI = publicAPI;
     }
 

src/api/composition/CompositionCollection.js

@@ -177,7 +177,11 @@ define([
     CompositionCollection.prototype.load = function () {
         return this.provider.load(this.domainObject)
             .then(function (children) {
-                return Promise.all(children.map(this.onProviderAdd, this));
+                return Promise.all(children.map((c) => this.publicAPI.objects.get(c)));
+            }.bind(this))
+            .then(function (childObjects) {
+                childObjects.forEach(c => this.add(c, true));
+                return childObjects;
             }.bind(this))
             .then(function (children) {
                 this.emit('load');

src/api/composition/DefaultCompositionProvider.js

@@ -43,9 +43,34 @@ define([
      * @memberof module:openmct
      */
 
-    function DefaultCompositionProvider(publicAPI) {
+    function DefaultCompositionProvider(publicAPI, compositionAPI) {
         this.publicAPI = publicAPI;
         this.listeningTo = {};
+
+        this.cannotContainDuplicates = this.cannotContainDuplicates.bind(this);
+        this.cannotContainItself = this.cannotContainItself.bind(this);
+
+        compositionAPI.addPolicy(this.cannotContainDuplicates);
+        compositionAPI.addPolicy(this.cannotContainItself);
+    }
+
+    /**
+     * @private
+     */
+    DefaultCompositionProvider.prototype.cannotContainDuplicates = function (parent, child) {
+        return this.appliesTo(parent) &&
+            parent.composition.findIndex((composeeId) => {
+                return composeeId.namespace === child.identifier.namespace &&
+                    composeeId.key === child.identifier.key;
+            }) === -1;
+    }
+
+    /**
+     * @private
+     */
+    DefaultCompositionProvider.prototype.cannotContainItself = function (parent, child) {
+        return !(parent.identifier.namespace === child.identifier.namespace &&
+            parent.identifier.key === child.identifier.key);
     }
 
     /**
@@ -203,7 +228,7 @@ define([
         }
 
         var oldComposition = listeners.composition.map(objectUtils.makeKeyString);
-        var newComposition = oldDomainObject.getModel().composition;
+        var newComposition = oldDomainObject.getModel().composition.map(objectUtils.makeKeyString);
 
         var added = _.difference(newComposition, oldComposition).map(objectUtils.parseKeyString);
         var removed = _.difference(oldComposition, newComposition).map(objectUtils.parseKeyString);

src/api/contextMenu/ContextMenu.vue

@@ -0,0 +1,20 @@
+<template>
+    <div class="c-menu">
+        <ul>
+            <li v-for="action in actions"
+                :key="action.name"
+                :class="action.cssClass"
+                :title="action.description"
+                @click="action.invoke(objectPath)">
+                {{ action.name }}
+            </li>
+            <li v-if="actions.length === 0">No actions defined.</li>
+        </ul>
+    </div>
+</template>
+
+<script>
+    export default {
+        inject: ['actions', 'objectPath']
+    }
+</script>

src/api/contextMenu/ContextMenuAPI.js

@@ -0,0 +1,141 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+
+import ContextMenuComponent from './ContextMenu.vue';
+import Vue from 'vue';
+
+/**
+ * The ContextMenuAPI allows the addition of new context menu actions, and for the context menu to be launched from
+ * custom HTML elements.
+ * @interface ContextMenuAPI
+ * @memberof module:openmct
+ */
+class ContextMenuAPI {
+    constructor() {
+        this._allActions = [];
+        this._activeContextMenu = undefined;
+
+        this._hideActiveContextMenu = this._hideActiveContextMenu.bind(this);
+        this.registerAction = this.registerAction.bind(this);
+    }
+
+    /**
+     * Defines an item to be added to context menus. Allows specification of text, appearance, and behavior when
+     * selected. Applicabilioty can be restricted by specification of an `appliesTo` function.
+     *
+     * @interface ContextMenuAction
+     * @memberof module:openmct
+     * @property {string} name the human-readable name of this view
+     * @property {string} description a longer-form description (typically
+     *           a single sentence or short paragraph) of this kind of view
+     * @property {string} cssClass the CSS class to apply to labels for this
+     *           view (to add icons, for instance)
+     */
+    /**
+     * @method appliesTo
+     * @memberof module:openmct.ContextMenuAction#
+     * @param {DomainObject[]} objectPath the path of the object that the context menu has been invoked on.
+     * @returns {boolean} true if the action applies to the objects specified in the 'objectPath', otherwise false.
+     */
+    /**
+     * Code to be executed when the action is selected from a context menu
+     * @method invoke
+     * @memberof module:openmct.ContextMenuAction#
+     * @param {DomainObject[]} objectPath the path of the object to invoke the action on.
+     */
+    /**
+     * @param {ContextMenuAction} actionDefinition
+     */
+    registerAction(actionDefinition) {
+        this._allActions.push(actionDefinition);
+    }
+
+    /**
+     * @private
+     */
+    _showContextMenuForObjectPath(objectPath, x, y) {
+        let applicableActions = this._allActions.filter(
+            (action) => action.appliesTo(objectPath));
+
+        if (this._activeContextMenu) {
+            this._hideActiveContextMenu();
+        }
+
+        this._activeContextMenu = this._createContextMenuForObject(objectPath, applicableActions);
+        this._activeContextMenu.$mount();
+        document.body.appendChild(this._activeContextMenu.$el);
+
+        let position = this._calculatePopupPosition(x, y, this._activeContextMenu.$el);
+        this._activeContextMenu.$el.style.left = `${position.x}px`;
+        this._activeContextMenu.$el.style.top = `${position.y}px`;
+
+        document.addEventListener('click', this._hideActiveContextMenu);
+    }
+
+    /**
+     * @private
+     */
+    _calculatePopupPosition(eventPosX, eventPosY, menuElement) {
+        let menuDimensions = menuElement.getBoundingClientRect();
+        let overflowX = (eventPosX + menuDimensions.width) - document.body.clientWidth;
+        let overflowY = (eventPosY + menuDimensions.height) - document.body.clientHeight;
+
+        if (overflowX > 0) {
+            eventPosX = eventPosX - overflowX;
+        }
+
+        if (overflowY > 0) {
+            eventPosY = eventPosY - overflowY;
+        }
+
+        return {
+            x: eventPosX,
+            y: eventPosY
+        }
+    }
+    /**
+     * @private
+     */
+    _hideActiveContextMenu() {
+        document.removeEventListener('click', this._hideActiveContextMenu);
+        document.body.removeChild(this._activeContextMenu.$el);
+        this._activeContextMenu.$destroy();
+        this._activeContextMenu = undefined;
+    }
+
+    /**
+     * @private
+     */
+    _createContextMenuForObject(objectPath, actions) {
+        return new Vue({
+            components: {
+                ContextMenu: ContextMenuComponent
+            },
+            provide: {
+                actions: actions,
+                objectPath: objectPath
+            },
+            template: '<ContextMenu></ContextMenu>'
+        });
+    }
+}
+export default ContextMenuAPI;

src/plugins/displayLayout/DisplayLayout.vue

@@ -1,331 +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.
- *****************************************************************************/
-
-<template>
-    <div class="l-layout"
-         @dragover="handleDragOver"
-         @click="bypassSelection"
-         @drop="handleDrop">
-        <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"
-                          :gridSize="gridSize"
-                          @drilledIn="updateDrilledInState"
-                          @dragInProgress="updatePosition"
-                          @endDrag="endDrag">
-            </layout-frame>
-        </div>
-    </div>
-</template>
-
-<style lang="scss">
-    @import "~styles/sass-base";
-
-    .l-layout {
-        @include abs();
-        display: flex;
-        flex-direction: column;
-
-        &__grid-holder {
-            display: none;
-        }
-
-        &__object {
-            flex: 1 1 auto;
-            overflow: auto;
-        }
-
-        &__frame {
-            position: absolute;
-        }
-    }
-
-    .l-shell__main-container {
-        > .l-layout {
-            [s-selected] {
-                border: $browseBorderSelected;
-            }
-        }
-    }
-
-    // Styles moved to _global.scss;
-</style>
-
-
-<script>
-    import LayoutFrame from './LayoutFrame.vue';
-
-    const DEFAULT_GRID_SIZE = [32, 32],
-          DEFAULT_DIMENSIONS = [12, 8],
-          DEFAULT_POSITION = [0, 0],
-          MINIMUM_FRAME_SIZE = [320, 180],
-          DEFAULT_HIDDEN_FRAME_TYPES = [
-            'hyperlink'
-          ];
-
-    export default {
-        data() {
-            return {
-                gridSize: [],
-                frameItems: [],
-                frames: [],
-                frameStyles: [],
-                rawPositions: {},
-                drilledIn: undefined
-            }
-        },          
-        inject: ['openmct'],
-        props: ['domainObject'],
-        components: {
-            LayoutFrame
-        },
-        created: function () {
-            this.newDomainObject = this.domainObject;
-            this.gridSize = this.newDomainObject.layoutGrid ||  DEFAULT_GRID_SIZE;
-            this.composition = this.openmct.composition.get(this.newDomainObject);
-            this.Listeners = [];
-            let panels = (((this.newDomainObject.configuration || {}).layout || {}).panels || {});
-
-            if (this.composition !== undefined) {
-                this.composition.load().then((composition) => {
-                    composition.forEach(function (domainObject) {
-                        this.readLayoutConfiguration(domainObject, panels);
-                        this.makeFrameItem(domainObject, false);
-                    }.bind(this));
-                    this.composition.on('add', this.onAddComposition);
-                    this.composition.on('remove', this.onRemoveComposition);
-                });
-            }
-
-            this.unlisten = this.openmct.objects.observe(this.newDomainObject, '*', function (obj) {
-                this.newDomainObject = JSON.parse(JSON.stringify(obj));
-                this.gridSize = this.newDomainObject.layoutGrid || DEFAULT_GRID_SIZE;;
-            }.bind(this));
-        },
-        methods: {
-            readLayoutConfiguration(domainObject, panels) {
-                let id = this.openmct.objects.makeKeyString(domainObject.identifier);
-                this.rawPositions[id] = {
-                    position: panels[id].position || DEFAULT_POSITION,
-                    dimensions: panels[id].dimensions || this.defaultDimensions()
-                };
-                this.frameStyles[id] = this.convertPosition(this.rawPositions[id]);
-                this.frames[id] = panels[id].hasOwnProperty('hasFrame') ? 
-                                panels[id].hasFrame :
-                                this.hasFrameByDefault(domainObject.type);
-            },
-            makeFrameItem(domainObject, initSelect) {
-                let id = this.openmct.objects.makeKeyString(domainObject.identifier);
-                this.frameItems.push({
-                    id: id,
-                    hasFrame: this.frames[id],
-                    domainObject,
-                    style: this.frameStyles[id],
-                    drilledIn: this.isDrilledIn(id),
-                    initSelect: initSelect,
-                    rawPosition: this.rawPositions[id]
-                });
-            },
-            onAddComposition(domainObject) {
-                let id = this.openmct.objects.makeKeyString(domainObject.identifier);
-                this.rawPositions[id] = {
-                    position: [
-                        Math.floor(this.droppedObjectPosition.x / this.gridSize[0]),
-                        Math.floor(this.droppedObjectPosition.y / this.gridSize[1])
-                    ],
-                    dimensions: this.defaultDimensions()
-                };
-                this.frameStyles[id] = this.convertPosition(this.rawPositions[id]);
-                this.frames[id] = this.hasFrameByDefault(domainObject.type);
-
-                let newPanel = this.rawPositions[id];
-                newPanel.hasFrame = this.frames[id];
-                this.mutate("configuration.layout.panels[" + id + "]", newPanel);
-                this.makeFrameItem(domainObject, true);
-            },
-            onRemoveComposition(identifier) {
-                // TODO: remove the object from frameItems
-            },
-            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'
-                };
-            },
-            /**
-             * Checks if the frame should be hidden or not.
-             *
-             * @param type the domain object type
-             * @return {boolean} true if the object should have
-             *         frame by default, false, otherwise
-             */
-            hasFrameByDefault(type) {
-                return DEFAULT_HIDDEN_FRAME_TYPES.indexOf(type) === -1;
-            },
-            setSelection(selection) {
-                if (selection.length === 0) {
-                    return;
-                }
-
-                this.removeListeners();
-                let domainObject = selection[0].context.item;
-
-                if (selection[1] && domainObject) {
-                    this.attachSelectionListeners(domainObject.identifier);
-                }
-
-                this.updateDrilledInState();
-            },
-            attachSelectionListeners(identifier) {
-                let id = this.openmct.objects.makeKeyString(identifier);
-                let path = "configuration.layout.panels[" + id + "]";
-                this.listeners.push(this.openmct.objects.observe(this.newDomainObject, path + ".hasFrame", function (newValue) {
-                    this.frameItems.forEach(function (item) {
-                        if (item.id === id) {
-                            item.hasFrame = newValue;
-                        }
-                    });
-                    this.frames[id] = newValue;
-                }.bind(this)));  
-            },
-            updateDrilledInState(id) {
-                this.drilledIn = id;
-                this.frameItems.forEach(function (item) {
-                    item.drilledIn = item.id === id;
-                });
-            },
-            isDrilledIn(id) {
-                return this.drilledIn === id;
-            },
-            updatePosition(id, newPosition) {
-                let newStyle = this.convertPosition(newPosition);
-                this.frameStyles[id] = newStyle;
-                this.rawPositions[id] = newPosition;
-                this.frameItems.forEach(function (item) {
-                    if (item.id === id) {
-                        item.style = newStyle;
-                        item.rawPosition = newPosition;
-                    }
-                });
-            },
-            bypassSelection($event) {
-                if (this.dragInProgress) {
-                    if ($event) {
-                        $event.stopImmediatePropagation();
-                    }
-                    return;
-                }
-            },
-            endDrag(id) {
-                this.dragInProgress = true;
-                setTimeout(function () {
-                    this.dragInProgress = false;
-                }.bind(this), 0);
-
-                let path = "configuration.layout.panels[" + id + "]";
-                this.mutate(path + ".dimensions", this.rawPositions[id].dimensions);
-                this.mutate(path + ".position", this.rawPositions[id].position);
-            },
-            mutate(path, value) {
-                this.openmct.objects.mutate(this.newDomainObject, path, value);
-            },
-            handleDrop($event) {
-                $event.preventDefault();
-                $event.stopPropagation();
-
-                let child = JSON.parse($event.dataTransfer.getData('domainObject'));
-                let duplicates = [];
-                let composition = this.newDomainObject.composition;
-                composition.forEach((object) => {
-                    if (this.openmct.objects.makeKeyString(JSON.parse(JSON.stringify(object))) ===
-                        this.openmct.objects.makeKeyString(child.identifier)) {
-                        duplicates.push(object);
-                    }
-                });
-
-                // Disallow adding a duplicate object to the composition
-                if (duplicates.length !== 0) {
-                    return;
-                }
-
-                let elementRect = this.$el.getBoundingClientRect();
-                this.droppedObjectPosition = {
-                    x: $event.pageX - elementRect.left,
-                    y: $event.pageY - elementRect.top
-                }
-                // TODO: use the composition API to add child once the default composition
-                // provider supports it instead of mutating the composition directly.
-                // this.composition.add(child).
-                composition.push(child.identifier);
-                this.mutate('composition', composition);
-            },
-            handleDragOver($event){
-                $event.preventDefault();
-            },
-            removeListeners() {
-                if (this.listeners) {
-                    this.listeners.forEach(function (l) {
-                        l();
-                    })
-                }
-                this.listeners = [];
-            }
-        },
-        mounted() {
-            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.unlisten();
-            this.removeListeners();
-        }
-    }
-    
-</script>

src/plugins/displayLayout/DisplayLayoutToolbar.js

@@ -0,0 +1,322 @@
+/*****************************************************************************
+ * 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([], function () {
+
+    function DisplayLayoutToolbar(openmct) {
+        return {
+            name: "Display Layout Toolbar",
+            key: "layout",
+            description: "A toolbar for objects inside a display layout.",
+            forSelection: function (selection) {
+                // Apply the layout toolbar if the edit mode is on, and the selected object
+                // is inside a layout, or the main layout is selected.
+                return (openmct.editor.isEditing() && selection &&
+                    ((selection[1] && selection[1].context.item && selection[1].context.item.type === 'layout') ||
+                    (selection[0].context.item && selection[0].context.item.type === 'layout')));
+            },
+            toolbar: function (selection) {
+                let selectedParent = selection[1] && selection[1].context.item,
+                    selectedObject = selection[0].context.item,
+                    layoutItem = selection[0].context.layoutItem,
+                    toolbar = [];
+
+                if (selectedObject && selectedObject.type === 'layout') {
+                    toolbar.push({
+                        control: "menu",
+                        domainObject: selectedObject,
+                        method: function (option) {
+                            selection[0].context.addElement(option.name.toLowerCase());
+                        },
+                        key: "add",
+                        icon: "icon-plus",
+                        label: "Add",
+                        options: [
+                            {
+                                "name": "Box",
+                                "class": "icon-box-round-corners"
+                            },
+                            {
+                                "name": "Line",
+                                "class": "icon-line-horz"
+                            },
+                            {
+                                "name": "Text",
+                                "class": "icon-font"
+                            },
+                            {
+                                "name": "Image",
+                                "class": "icon-image"
+                            }
+                        ]
+                    });
+                }
+
+                if (!layoutItem) {
+                    return toolbar;
+                }
+
+                let path = layoutItem.config.path();
+
+                if (layoutItem.type === 'subobject-view') {
+                    if (toolbar.length > 0) {
+                        toolbar.push({
+                            control: "separator"
+                        });
+                    }
+                    toolbar.push({
+                        control: "toggle-button",
+                        domainObject: selectedParent,
+                        property: path + ".hasFrame",
+                        options: [
+                            {
+                                value: false,
+                                icon: 'icon-frame-hide',
+                                title: "Hide frame"
+                            },
+                            {
+                                value: true,
+                                icon: 'icon-frame-show',
+                                title: "Show frame"
+                            }
+                        ]
+                    });
+                } else {
+                    const TEXT_SIZE = [9, 10, 11, 12, 13, 14, 15, 16, 20, 24, 30, 36, 48, 72, 96];
+                    let separator = {
+                            control: "separator"
+                        },
+                        fill = {
+                            control: "color-picker",
+                            domainObject: selectedParent,
+                            property: path + ".fill",
+                            icon: "icon-paint-bucket",
+                            title: "Set fill color"
+                        },
+                        stroke = {
+                            control: "color-picker",
+                            domainObject: selectedParent,
+                            property: path + ".stroke",
+                            icon: "icon-line-horz",
+                            title: "Set border color"
+                        },
+                        color = {
+                            control: "color-picker",
+                            domainObject: selectedParent,
+                            property: path + ".color",
+                            icon: "icon-font",
+                            mandatory: true,
+                            title: "Set text color",
+                            preventNone: true
+                        },
+                        size = {
+                            control: "select-menu",
+                            domainObject: selectedParent,
+                            property: path + ".size",
+                            title: "Set text size",
+                            options: TEXT_SIZE.map(size => {
+                                return {
+                                    value: size + "px"
+                                };
+                            })
+                        },
+                        x = {
+                            control: "input",
+                            type: "number",
+                            domainObject: selectedParent,
+                            property: path + ".x",
+                            label: "X:",
+                            title: "X position"
+                        },
+                        y = {
+                            control: "input",
+                            type: "number",
+                            domainObject: selectedParent,
+                            property: path + ".y",
+                            label: "Y:",
+                            title: "Y position",
+                        },
+                        width = {
+                            control: 'input',
+                            type: 'number',
+                            domainObject: selectedParent,
+                            property: path + ".width",
+                            label: 'W:',
+                            title: 'Resize object width'
+                        },
+                        height = {
+                            control: 'input',
+                            type: 'number',
+                            domainObject: selectedParent,
+                            property: path + ".height",
+                            label: 'H:',
+                            title: 'Resize object height'
+                        };
+
+                    if (layoutItem.type === 'telemetry-view') {
+                        // TODO: add "remove", "order", "useGrid"
+                        let metadata = openmct.telemetry.getMetadata(layoutItem.domainObject),
+                            displayMode = {
+                                control: "select-menu",
+                                domainObject: selectedParent,
+                                property: path + ".displayMode",
+                                title: "Set display mode",
+                                options: [
+                                    {
+                                        name: 'Label + Value',
+                                        value: 'all'
+                                    },
+                                    {
+                                        name: "Label only",
+                                        value: "label"
+                                    },
+                                    {
+                                        name: "Value only",
+                                        value: "value"
+                                    }
+                                ]
+                            },
+                            value = {
+                                control: "select-menu",
+                                domainObject: selectedParent,
+                                property: path + ".value",
+                                title: "Set value",
+                                options: metadata.values().map(value => {
+                                    return {
+                                        name: value.name,
+                                        value: value.key
+                                    }
+                                })
+                            };
+                        toolbar = [
+                            displayMode,
+                            separator,
+                            value,
+                            separator,
+                            fill,
+                            stroke,
+                            color,
+                            separator,
+                            size,
+                            separator,
+                            x,
+                            y,
+                            height,
+                            width
+                        ];
+                    } else if (layoutItem.type === 'text-view' ) {
+                        // TODO: Add "remove", "order", "useGrid"
+                        let text = {
+                            control: "button",
+                            domainObject: selectedParent,
+                            property: path,
+                            icon: "icon-gear",
+                            title: "Edit text properties",
+                            dialog: {
+                                name: "Text Element Properties",
+                                sections: [
+                                    {
+                                        rows: [
+                                            {
+                                                key: "text",
+                                                control: "textfield",
+                                                name: "Text",
+                                                required: true
+                                            }
+                                        ]
+                                    }
+                                ]
+                            }
+                        };
+                        toolbar = [
+                            fill,
+                            stroke,
+                            color,
+                            separator,
+                            size,
+                            separator,
+                            x,
+                            y,
+                            height,
+                            width,
+                            separator,
+                            text
+                        ];
+                    } else if (layoutItem.type === 'box-view') {
+                        // TODO: Add "remove", "order", "useGrid"
+                        toolbar = [
+                            fill,
+                            stroke,
+                            separator,
+                            x,
+                            y,
+                            height,
+                            width
+                        ];
+                    } else if (layoutItem.type === 'image-view') {
+                        // TODO: Add "remove", "order", "useGrid"
+                        let url = {
+                            control: "button",
+                            domainObject: selectedParent,
+                            property: path,
+                            icon: "icon-image",
+                            title: "Edit image properties",
+                            dialog: {
+                                name: "Image Properties",
+                                sections: [
+                                    {
+                                        rows: [
+                                            {
+                                                key: "url",
+                                                control: "textfield",
+                                                name: "Image URL",
+                                                "cssClass": "l-input-lg",
+                                                required: true
+                                            }
+                                        ]
+                                    }
+                                ]
+                            }
+                        };                        
+                        toolbar = [
+                            stroke,
+                            separator,
+                            x,
+                            y,
+                            height,
+                            width,
+                            separator,
+                            url
+                        ];
+                    } else if (layoutItem.type === 'line-view') {
+                        // TODO: Add "remove", "order", "useGrid", "x1", "y1", x2", "y2"
+                        toolbar = [stroke];
+                    }
+                }
+
+                return toolbar;
+            }
+        }
+    }
+
+    return DisplayLayoutToolbar;
+});

src/plugins/displayLayout/DisplayLayoutType.js

@@ -29,9 +29,7 @@ define(function () {
             initialize(domainObject) {
                 domainObject.composition = [];
                 domainObject.configuration = {
-                    layout: {
-                        panels: {}
-                    }
+                    items: []
                 };
             }
         }

src/plugins/displayLayout/ElementViewConfiguration.js

@@ -0,0 +1,171 @@
+/*****************************************************************************
+ * 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(
+    ['./ViewConfiguration'],
+    function (ViewConfiguration) {
+        class ElementViewConfiguration extends ViewConfiguration {
+
+            static create(type, openmct) {
+                const DEFAULT_WIDTH = 10,
+                      DEFAULT_HEIGHT = 5,
+                      DEFAULT_X = 1,
+                      DEFAULT_Y = 1;
+                const INITIAL_STATES = {
+                    "image": {
+                        stroke: "transparent"
+                    },
+                    "box": {
+                        fill: "#717171",
+                        stroke: "transparent"
+                    },
+                    "line": {
+                        x: 5,
+                        y: 3,
+                        x2: 6,
+                        y2: 6,
+                        stroke: "#717171"
+                    },
+                    "text": {
+                        fill: "transparent",
+                        stroke: "transparent",
+                        size: "13px",
+                        color: ""
+                    }
+                };
+                const DIALOGS = {
+                    "image": {
+                        name: "Image Properties",
+                        sections: [
+                            {
+                                rows: [
+                                    {
+                                        key: "url",
+                                        control: "textfield",
+                                        name: "Image URL",
+                                        "cssClass": "l-input-lg",
+                                        required: true
+                                    }
+                                ]
+                            }
+                        ]
+                    },
+                    "text": {
+                        name: "Text Element Properties",
+                        sections: [
+                            {
+                                rows: [
+                                    {
+                                        key: "text",
+                                        control: "textfield",
+                                        name: "Text",
+                                        required: true
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                };
+
+                let element = INITIAL_STATES[type] || {};
+                element = JSON.parse(JSON.stringify(element));
+                element.x = element.x || DEFAULT_X;
+                element.y = element.y || DEFAULT_Y;
+                element.width = DEFAULT_WIDTH;
+                element.height = DEFAULT_HEIGHT;
+                element.type = type;
+
+                return DIALOGS[type] ?
+                    openmct.$injector.get('dialogService').getUserInput(DIALOGS[type], element) :
+                    element;
+            }
+
+            /**
+             * @param {Object} configuration the element (line, box, text or image) view configuration
+             * @param {Object} configuration.element
+             * @param {Object} configuration.domainObject the telemetry domain object
+             * @param {Object} configuration.openmct the openmct object
+             */
+            constructor({element, ...rest}) {
+                super(rest);
+                this.element = element;
+                this.updateStyle(this.position());
+            }
+
+            path() {
+                return "configuration.items[" + this.element.index + "]";
+            }
+
+            x() {
+                return this.element.x;
+            }
+
+            y() {
+                return this.element.y;
+            }
+
+            width() {
+                return this.element.width;
+            }
+
+            height() {
+                return this.element.height;
+            }
+
+            observeProperties() {
+                [
+                    "width",
+                    "height",
+                    "stroke",
+                    "fill",
+                    "x",
+                    "y",
+                    "x1",
+                    "y1",
+                    "x2",
+                    "y2",
+                    "color",
+                    "size",
+                    "text",
+                    "url"
+                ].forEach(property => {
+                    this.attachListener(property, newValue => {
+                        this.element[property] = newValue;
+
+                        if (property === 'width' || property === 'height' ||
+                            property === 'x' || property === 'y') {
+                            this.updateStyle();
+                        }
+                    });
+                });
+
+                // TODO: attach listener for useGrid
+            }
+
+            inspectable() {
+                return false;
+            }
+        }
+
+        return ElementViewConfiguration;
+    }
+);

src/plugins/displayLayout/SubobjectViewConfiguration.js

@@ -0,0 +1,122 @@
+/*****************************************************************************
+ * 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(
+    ['./ViewConfiguration'],
+    function (ViewConfiguration) {
+        class SubobjectViewConfiguration extends ViewConfiguration {
+
+            static create(domainObject, gridSize, position) {
+                const MINIMUM_FRAME_SIZE = [320, 180],
+                      DEFAULT_DIMENSIONS = [10, 10],
+                      DEFAULT_POSITION = [0, 0],
+                      DEFAULT_HIDDEN_FRAME_TYPES = ['hyperlink', 'summary-widget'];
+
+                function getDefaultDimensions() {
+                    return MINIMUM_FRAME_SIZE.map((min, index) => {
+                        return Math.max(
+                            Math.ceil(min / gridSize[index]),
+                            DEFAULT_DIMENSIONS[index]
+                        );
+                    });
+                }
+
+                function hasFrameByDefault(type) {
+                    return DEFAULT_HIDDEN_FRAME_TYPES.indexOf(type) === -1;
+                }
+
+                position = position || DEFAULT_POSITION;
+                let defaultDimensions = getDefaultDimensions();
+                let panel = {
+                    identifier: domainObject.identifier,
+                    type: 'subobject',
+                    width: defaultDimensions[0],
+                    height: defaultDimensions[1],
+                    x: position[0],
+                    y: position[1],
+                    hasFrame: hasFrameByDefault(domainObject.type)
+                };
+
+                return panel;
+            }
+
+            /**
+             *
+             * @param {Object} configuration the subobject view configuration
+             * @param {Boolean} configuration.panel
+             * @param {Object} configuration.domainObject the domain object to observe the changes on
+             * @param {Object} configuration.openmct the openmct object
+             */
+            constructor({panel, ...rest}) {
+                super(rest);
+                this.panel = panel;
+                this.hasFrame = this.hasFrame.bind(this);
+                this.updateStyle(this.position());
+            }
+
+            path() {
+                return "configuration.items[" + this.panel.index + "]";
+            }
+
+            x() {
+                return this.panel.x;
+            }
+
+            y() {
+                return this.panel.y;
+            }
+
+            width() {
+                return this.panel.width;
+            }
+
+            height() {
+                return this.panel.height;
+            }
+
+            hasFrame() {
+                return this.panel.hasFrame;
+            }
+
+            observeProperties() {
+                [
+                    'hasFrame',
+                    'x',
+                    'y',
+                    'width',
+                    'height'
+                ].forEach(property => {
+                    this.attachListener(property, newValue => {
+                        this.panel[property] = newValue;
+
+                        if (property === 'width' || property === 'height' ||
+                            property === 'x' || property === 'y') {
+                            this.updateStyle();
+                        }
+                    });
+                });
+            }
+        }
+
+        return SubobjectViewConfiguration;
+    }
+);

src/plugins/displayLayout/TelemetryViewConfiguration.js

@@ -0,0 +1,128 @@
+/*****************************************************************************
+ * 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(
+    ['./ViewConfiguration'],
+    function (ViewConfiguration) {
+
+        class TelemetryViewConfiguration extends ViewConfiguration {
+            static create(domainObject, position, openmct) {
+                const DEFAULT_TELEMETRY_DIMENSIONS = [10, 5],
+                      DEFAULT_POSITION = [1, 1];
+
+                function getDefaultTelemetryValue(domainObject, openmct) {
+                    let metadata = openmct.telemetry.getMetadata(domainObject);
+                    let valueMetadata = metadata.valuesForHints(['range'])[0];
+
+                    if (valueMetadata === undefined) {
+                        valueMetadata = metadata.values().filter(values => {
+                            return !(values.hints.domain);
+                        })[0];
+                    }
+
+                    if (valueMetadata === undefined) {
+                        valueMetadata = metadata.values()[0];
+                    }
+
+                    return valueMetadata.key;
+                }
+
+                position = position || DEFAULT_POSITION;
+                let alphanumeric = {
+                    identifier: domainObject.identifier,
+                    x: position[0],
+                    y: position[1],
+                    width: DEFAULT_TELEMETRY_DIMENSIONS[0],
+                    height: DEFAULT_TELEMETRY_DIMENSIONS[1],
+                    displayMode: 'all',
+                    value: getDefaultTelemetryValue(domainObject, openmct),
+                    stroke: "transparent",
+                    fill: "",
+                    color: "",
+                    size: "13px",
+                    type: "telemetry"
+                };
+
+                return alphanumeric;
+            }
+
+            /**
+             * @param {Object} configuration the telemetry object view configuration
+             * @param {Object} configuration.alphanumeric
+             * @param {Object} configuration.domainObject the domain object to observe the changes on
+             * @param {Object} configuration.openmct the openmct object
+             */
+            constructor({alphanumeric, ...rest}) {
+                super(rest);
+                this.alphanumeric = alphanumeric;
+                this.updateStyle(this.position());
+            }
+
+            path() {
+                console.log("path", "configuration.items[" + this.alphanumeric.index + "]");
+                return "configuration.items[" + this.alphanumeric.index + "]";
+            }
+
+            x() {
+                return this.alphanumeric.x;
+            }
+
+            y() {
+                return this.alphanumeric.y;
+            }
+
+            width() {
+                return this.alphanumeric.width;
+            }
+
+            height() {
+                return this.alphanumeric.height;
+            }
+
+            observeProperties() {
+                [
+                    'displayMode',
+                    'value',
+                    'fill',
+                    'stroke',
+                    'color',
+                    'size',
+                    'x',
+                    'y',
+                    'width',
+                    'height'
+                ].forEach(property => {
+                    this.attachListener(property, newValue => {
+                        this.alphanumeric[property] = newValue;
+
+                        if (property === 'width' || property === 'height' ||
+                            property === 'x' || property === 'y') {
+                            this.updateStyle();
+                        }
+                    });
+                });
+            }
+        }
+
+        return TelemetryViewConfiguration;
+    }
+);

src/plugins/displayLayout/ViewConfiguration.js

@@ -0,0 +1,121 @@
+/*****************************************************************************
+ * 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([],
+    function () {
+        class ViewConfiguration {
+
+            constructor({domainObject, openmct, gridSize}) {
+                this.domainObject = domainObject;
+                this.gridSize = gridSize;
+                this.mutatePosition = this.mutatePosition.bind(this);
+                this.listeners = [];
+                this.observe = openmct.objects.observe.bind(openmct.objects);
+                this.mutate = function (path, value) {
+                    openmct.objects.mutate(this.domainObject, path, value);
+                }.bind(this);
+                this.newPosition = {};
+            }
+
+            mutatePosition() {
+                this.mutate(this.path() + ".x", this.newPosition.position[0]);
+                this.mutate(this.path() + ".y", this.newPosition.position[1]);
+                this.mutate(this.path() + ".width", this.newPosition.dimensions[0]);
+                this.mutate(this.path() + ".height", this.newPosition.dimensions[1]);
+            }
+
+            attachListener(property, callback) {
+                this.listeners.push(this.observe(this.domainObject, this.path() + "." + property, callback));
+            }
+
+            attachListeners() {
+                this.observeProperties();
+                this.listeners.push(this.observe(this.domainObject, '*', function (obj) {
+                    this.domainObject = JSON.parse(JSON.stringify(obj));
+                }.bind(this)));                
+            }
+
+            removeListeners() {
+                this.listeners.forEach(listener => {
+                    listener();
+                });
+                this.listeners = [];
+            }
+
+            position() {
+                return {
+                    position: [this.x(), this.y()],
+                    dimensions: [this.width(), this.height()]
+                };
+            }
+
+            path() {
+                throw "NOT IMPLEMENTED;"
+            }
+
+            inspectable() {
+                return true;
+            }
+
+            updateStyle(raw) {
+                if (!raw) {
+                    raw = this.position();
+                }
+
+                this.style = {
+                    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'
+                };
+            }
+
+            observeProperties() {
+                // Not implemented
+            }
+
+            x() {
+                // Not implemented
+            }
+
+            y() {
+                // Not implemented
+            }
+
+            width() {
+                // Not implemented
+            }
+
+            height() {
+                // Not implemented
+            }
+
+            hasFrame() {
+                // Not implemented
+            }
+        }
+
+        return ViewConfiguration;
+    }
+ );

src/plugins/displayLayout/components/BoxView.vue

@@ -20,39 +20,44 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define(['zepto'], function ($) {
-    function HoverGesture(hoverManager) {
-        this.hoverManager = hoverManager;
+<template>
+    <div class="c-box-view"
+         :style="styleObject">
+    </div>
+ </template>
+
+<style lang="scss">
+    @import '~styles/sass-base';
+
+    .c-box-view {
+        display: flex;
+        align-items: stretch;
+
+        .c-frame & {
+            @include abs();
+        }
     }
+</style>
 
-    HoverGesture.prototype.apply = function (htmlElement) {
-        var $element = $(htmlElement);
-        var hoverManager = this.hoverManager;
-
-        function update() {
-            $(hoverManager.all()).removeClass('hovering');
-            $(hoverManager.top()).addClass('hovering');
+ <script>
+    export default {
+        props: {
+            item: Object
+        },
+        computed: {
+            styleObject() {                
+                let element = this.item.config.element;
+                return {
+                    backgroundColor: element.fill,
+                    border: '1px solid ' + element.stroke
+                }
+            }
+        },
+        mounted() {
+            this.item.config.attachListeners();
+        },
+        destroyed() {
+            this.item.config.removeListeners();
         }
-
-        function enter() {
-            hoverManager.add(htmlElement);
-            update();
-        }
-
-        function leave() {
-            hoverManager.remove(htmlElement);
-            update();
-        }
-
-        $element.on('mouseenter', enter);
-        $element.on('mouseleave', leave);
-
-        return function () {
-            leave();
-            $element.off('mouseenter', enter);
-            $element.off('mouseleave', leave);
-        }.bind(this);
-    };
-
-    return HoverGesture;
-});
+    }
+ </script>

src/plugins/displayLayout/components/DisplayLayout.vue

@@ -0,0 +1,334 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+
+<template>
+    <div class="l-layout"
+         @dragover="handleDragOver"
+         @click="bypassSelection"
+         @drop="handleDrop">
+        <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-item v-for="(item, index) in layoutItems"
+                          class="l-layout__frame"
+                          :key="index"
+                          :item="item"
+                          :gridSize="gridSize"
+                          @drilledIn="updateDrilledInState"
+                          @dragInProgress="updatePosition"
+                          @endDrag="endDrag">
+            </layout-item>
+        </div>
+    </div>
+</template>
+
+<style lang="scss">
+    @import "~styles/sass-base";
+
+    .l-layout {
+        @include abs();
+        display: flex;
+        flex-direction: column;
+
+        &__grid-holder {
+            display: none;
+        }
+
+        &__object {
+            flex: 1 1 auto;
+            overflow: auto;
+        }
+
+        &__frame {
+            position: absolute;
+        }
+    }
+
+    .l-shell__main-container {
+        > .l-layout {
+            [s-selected] {
+                border: $browseBorderSelected;
+            }
+        }
+    }
+
+    // Styles moved to _global.scss;
+</style>
+
+
+<script>
+    import LayoutItem from './LayoutItem.vue';
+    import TelemetryViewConfiguration from './../TelemetryViewConfiguration.js'
+    import SubobjectViewConfiguration from './../SubobjectViewConfiguration.js'
+    import ElementViewConfiguration from './../ElementViewConfiguration.js'
+
+    const DEFAULT_GRID_SIZE = [10, 10];
+
+    export default {
+        data() {
+            return {
+                gridSize: [],
+                layoutItems: [],
+                drilledIn: undefined
+            }
+        },          
+        inject: ['openmct'],
+        props: ['domainObject'],
+        components: {
+            LayoutItem
+        },
+        methods: {
+            getConfigurationItems() {
+                this.subobjectViewsById = new Map();
+                this.telemetryViewsById = new Map();
+                let items = this.newDomainObject.configuration.items;
+                items.forEach((item, index) => {
+                    if (item.type === 'subobject') {
+                        this.subobjectViewsById.set(this.openmct.objects.makeKeyString(item.identifier), true); 
+                    } else if (item.type === 'telemetry') {
+                        this.telemetryViewsById.set(this.openmct.objects.makeKeyString(item.identifier), true);
+                    }
+
+                    item.index = index;
+                    this.makeLayoutItem(item, false);
+                });
+            },
+            makeLayoutItem(item, initSelect) {
+                if (item.type === 'telemetry') {
+                    this.makeTelemetryItem(item, initSelect);
+                } else if (item.type === 'subobject') {
+                    this.makeSubobjectItem(item, initSelect);
+                } else {
+                    this.makeElementItem(item, initSelect);
+                }
+            },
+            makeTelemetryItem(item, initSelect) {
+                let id = this.openmct.objects.makeKeyString(item.identifier);
+                this.openmct.objects.get(id).then(domainObject => {
+                    let config = new TelemetryViewConfiguration({
+                        domainObject: this.newDomainObject,
+                        alphanumeric: item,
+                        openmct: openmct,
+                        gridSize: this.gridSize
+                    });
+                    this.layoutItems.push({
+                        id: id,
+                        domainObject: domainObject,
+                        initSelect: initSelect,
+                        type: item.type + '-view',
+                        config: config
+                    });
+                });
+            },
+            makeSubobjectItem(item, initSelect) {
+                let id = this.openmct.objects.makeKeyString(item.identifier);
+                this.openmct.objects.get(id).then(domainObject => {
+                    let config = new SubobjectViewConfiguration({
+                        domainObject: this.newDomainObject,
+                        panel: item,
+                        openmct: openmct,
+                        gridSize: this.gridSize
+                    });
+                    this.layoutItems.push({
+                        id: id,
+                        domainObject: domainObject,
+                        initSelect: initSelect,
+                        type: item.type + '-view',
+                        config: config,
+                        drilledIn: this.isItemDrilledIn(id)
+                    });
+                });
+            },
+            makeElementItem(item, initSelect) {
+                let config = new ElementViewConfiguration({
+                    domainObject: this.newDomainObject,
+                    element: item,
+                    openmct: openmct,
+                    gridSize: this.gridSize
+                });
+                this.layoutItems.push({
+                    initSelect: initSelect,
+                    type: item.type + '-view',
+                    config: config
+                });
+            },
+            setSelection(selection) {
+                if (selection.length === 0) {
+                    return;
+                }
+
+                this.updateDrilledInState();
+            },
+            updateDrilledInState(id) {
+                this.drilledIn = id;
+                this.layoutItems.forEach(function (item) {
+                    if (item.type === 'subobject-view') {
+                        item.drilledIn = item.id === id;
+                    }
+                });
+            },
+            isItemDrilledIn(id) {
+                return this.drilledIn === id;
+            },
+            updatePosition(item, newPosition) {
+                item.config.newPosition = newPosition;
+                item.config.updateStyle(newPosition);
+            },
+            bypassSelection($event) {
+                if (this.dragInProgress) {
+                    if ($event) {
+                        $event.stopImmediatePropagation();
+                    }
+                    return;
+                }
+            },
+            endDrag(item) {
+                this.dragInProgress = true;
+                setTimeout(function () {
+                    this.dragInProgress = false;
+                }.bind(this), 0);
+                // TODO: emit "finishResizing" for view components to mutate position?
+                item.config.mutatePosition();
+            },
+            mutate(path, value) {
+                this.openmct.objects.mutate(this.newDomainObject, path, value);
+            },
+            handleDrop($event) {
+                $event.preventDefault();
+
+                let domainObject = JSON.parse($event.dataTransfer.getData('domainObject'));
+                let elementRect = this.$el.getBoundingClientRect();
+                this.droppedObjectPosition = [
+                    Math.floor(($event.pageX - elementRect.left) / this.gridSize[0]),
+                    Math.floor(($event.pageY - elementRect.top) / this.gridSize[1])
+                ];
+
+                if (this.isTelemetry(domainObject)) {
+                    this.addTelemetryObject(domainObject, this.droppedObjectPosition);
+                } else {
+                    this.checkForDuplicatePanel(domainObject);
+                }
+            },
+            checkForDuplicatePanel(domainObject) {
+                let id = this.openmct.objects.makeKeyString(domainObject.identifier);
+                let panels = this.newDomainObject.configuration.panels;
+
+                if (panels && panels[id]) {
+                    let prompt = this.openmct.overlays.dialog({
+                        iconClass: 'alert',
+                        message: "This item is already in layout and will not be added again.",
+                        buttons: [
+                            {
+                                label: 'OK',
+                                callback: function () {
+                                    prompt.dismiss();
+                                }
+                            }
+                        ]
+                    });
+                }
+            },
+            addItem(item) {
+                let items = this.newDomainObject.configuration.items || [];
+                item.index = items.push(item) - 1;
+                this.mutate("configuration.items", items);
+                this.makeLayoutItem(item, true);
+            },
+            addTelemetryObject(domainObject, position) {
+                let item = TelemetryViewConfiguration.create(domainObject, position, this.openmct);
+                this.addItem(item);
+                this.telemetryViewsById.set(this.openmct.objects.makeKeyString(domainObject.identifier), true);
+            },
+            addElement(type) {
+                Promise.resolve(ElementViewConfiguration.create(type, this.openmct))
+                    .then(item => {
+                        this.addItem(item);
+                    });
+            },
+            handleDragOver($event){
+                $event.preventDefault();
+            },
+            isTelemetry(domainObject) {
+                if (this.openmct.telemetry.isTelemetryObject(domainObject)
+                    && domainObject.type !== 'summary-widget') {
+                    return true;
+                } else {
+                    return false;
+                }
+            },
+            addSubobject(domainObject) {
+                let id = this.openmct.objects.makeKeyString(domainObject.identifier);
+
+                if (this.isTelemetry(domainObject)) {
+                    if (!this.telemetryViewsById.has(id)) {
+                        this.addTelemetryObject(domainObject);
+                    }
+                } else {
+                    if (!this.subobjectViewsById.has(id)) {
+                        let item = SubobjectViewConfiguration.create(domainObject, this.gridSize, this.droppedObjectPosition);
+                        this.subobjectViewsById.set(id, true);
+                        this.addItem(item, true);
+                        delete this.droppedObjectPosition;
+                    }
+                }
+            },
+            removeSubobject() {
+                // Not yet implemented
+            }
+        },
+        mounted() {
+            this.newDomainObject = this.domainObject;
+            this.gridSize = this.newDomainObject.layoutGrid ||  DEFAULT_GRID_SIZE;
+            this.unlisten = this.openmct.objects.observe(this.newDomainObject, '*', function (obj) {
+                this.newDomainObject = JSON.parse(JSON.stringify(obj));
+                this.gridSize = this.newDomainObject.layoutGrid || DEFAULT_GRID_SIZE;;
+            }.bind(this));
+
+            this.openmct.selection.on('change', this.setSelection);
+            this.getConfigurationItems();
+
+            this.composition = this.openmct.composition.get(this.newDomainObject);
+            this.composition.on('add', this.addSubobject);
+            this.composition.on('remove', this.removeSubobject);
+            this.composition.load();
+        },
+        destroyed: function () {
+            this.openmct.off('change', this.setSelection);
+            this.composition.off('add', this.addSubobject);
+            this.composition.off('remove', this.removeSubobject);
+            this.unlisten();
+
+            delete this.subobjectViewsById;
+            delete this.telemetryViewsById;
+        }
+    }
+    
+</script>

src/plugins/displayLayout/components/ImageView.vue

@@ -20,41 +20,46 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define(['zepto'], function ($) {
-    function SelectGesture(selection, contextManager) {
-        this.selection = selection;
-        this.contextManager = contextManager;
+<template>
+    <div class="c-image-view"
+         :style="styleObject">
+    </div>
+ </template>
+
+<style lang="scss">
+    @import '~styles/sass-base';
+
+    .c-image-view {
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-position: center;
+
+        .c-frame & {
+            @include abs();
+            border: 1px solid transparent;
+        }
     }
+</style>
 
-    SelectGesture.prototype.apply = function (htmlElement, item) {
-        var $element = $(htmlElement);
-        var contextManager = this.contextManager;
-        var selection = this.selection;
-        var path = contextManager.path(item, htmlElement);
-
-        function select() {
-            selection.add(path);
+ <script>
+    export default {
+        props: {
+            item: Object
+        },
+        computed: {
+            styleObject() {                
+                let element = this.item.config.element;
+                return {
+                    backgroundImage: 'url(' + element.url + ')',
+                    border: '1px solid ' + element.stroke
+                }
+            }
+        },
+        mounted() {
+            this.item.config.attachListeners();
+        },
+        destroyed() {
+            this.item.config.removeListeners();
         }
-
-        function change() {
-            var selected = selection.primary();
-            $element.toggleClass(
-                'selected',
-                selected && path.matches(selected)
-            );
-        }
-
-        $element.addClass('selectable');
-        $element.on('click', select);
-        selection.on('change', change);
-        change(); // Initialize
-
-        return function () {
-            contextManager.release(htmlElement);
-            $element.off('click', select);
-            selection.off('change', change);
-        };
-    };
-
-    return SelectGesture;
-});
+    }
+ </script>

src/plugins/displayLayout/components/LayoutItem.vue

@@ -21,21 +21,14 @@
  *****************************************************************************/
 
 <template>
-    <div class="c-frame has-local-controls is-selectable is-moveable"
-         :style="item.style"
-         :class="classObject"
+    <div class="c-frame has-local-controls"
+         :style="item.config.style"
+         :class="[classObject, {
+            'u-inspectable': item.config.inspectable()
+         }]"
          @dblclick="drill(item.id, $event)">
-        <div class="c-frame__header">
-            <div class="c-frame__header__start">
-                <div class="c-frame__name icon-object">{{ item.domainObject.name }}</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>
+
+        <component :is="item.type" :item="item" :gridSize="gridSize"></component>
 
         <!-- Drag handles -->
         <div class="c-frame-edit">
@@ -60,68 +53,11 @@
     .c-frame {
         display: flex;
         flex-direction: column;
-        border-width: 1px;
-        border-color: transparent;
-
-        /*************************** HEADER */
-        &__header {
-            display: flex;
-            align-items: center;
-            flex: 0 0 auto;
-            margin-bottom: $interiorMargin;
-
-            > [class*="__"] {
-                display: flex;
-                align-items: center;
-            }
-
-            > * + * {
-                margin-left: $interiorMargin;
-            }
-
-            [class*="__start"] {
-                flex: 1 1 auto;
-                overflow: hidden;
-            }
-
-            [class*="__end"] {
-                //justify-content: flex-end;
-                flex: 0 0 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;
-
-            .c-object-view {
-                .u-fills-container {
-                    // Expand component types that fill a container
-                    @include abs();
-                }
-            }
-        }
+        border: 1px solid transparent;
 
         /*************************** NO-FRAME */
         &.no-frame {
-            > [class*="__header"] {
+            > [class*="contents"] > [class*="__header"] {
                 display: none;
             }
         }
@@ -131,15 +67,18 @@
             border: 1px solid $colorInteriorBorder;
             padding: $interiorMargin;
         }
-
-        // Styles moved to _global.scss;
     }
 </style>
 
 
 <script>
-    import ObjectView from '../../ui/components/layout/ObjectView.vue'
-    import LayoutDrag from './LayoutDrag'
+    import SubobjectView from './SubobjectView.vue'
+    import TelemetryView from './TelemetryView.vue'
+    import BoxView from './BoxView.vue'
+    import TextView from './TextView.vue'
+    import LineView from './LineView.vue'
+    import ImageView from './ImageView.vue'
+    import LayoutDrag from './../LayoutDrag'
 
     export default {
         inject: ['openmct'],
@@ -148,13 +87,18 @@
             gridSize: Array
         },
         components: {
-            ObjectView
+            SubobjectView,
+            TelemetryView,
+            BoxView,
+            TextView,
+            LineView,
+            ImageView
         },
         computed: {
             classObject: function () {
                 return {
                     'is-drilled-in': this.item.drilledIn,
-                    'no-frame': !this.item.hasFrame
+                    'no-frame': !this.item.config.hasFrame()
                 }
             }
         },
@@ -164,7 +108,11 @@
                     $event.stopPropagation();
                 }
 
-                if (!this.isBeingEdited(this.item.domainObject)) {
+                if (!this.openmct.editor.isEditing()) {
+                    return;
+                }
+
+                if (!this.item.domainObject) {
                     return;
                 }
 
@@ -179,10 +127,6 @@
 
                 this.$emit('drilledIn', id);
             },
-            isBeingEdited(object) {
-                // TODO: add logic when inEditContext() is implemented in Vue.
-                return true;
-            },
             updatePosition(event) {
                 let currentPosition = [event.pageX, event.pageY];
                 this.initialPosition = this.initialPosition || currentPosition;
@@ -196,7 +140,7 @@
 
                 this.updatePosition(event);
                 this.activeDrag = new LayoutDrag(
-                    this.item.rawPosition,
+                    this.item.config.position(),
                     posFactor,
                     dimFactor,
                     this.gridSize
@@ -208,24 +152,32 @@
                 this.updatePosition(event);
 
                 if (this.activeDrag) {
-                    this.$emit('dragInProgress', this.item.id, this.activeDrag.getAdjustedPosition(this.delta));
+                    this.$emit(
+                        'dragInProgress',
+                        this.item,
+                        this.activeDrag.getAdjustedPosition(this.delta)
+                    );
                 }
             },
             endDrag(event) {
                 document.body.removeEventListener('mousemove', this.continueDrag);
                 document.body.removeEventListener('mouseup', this.endDrag);
                 this.continueDrag(event);
-                this.$emit('endDrag', this.item.id);
+                this.$emit('endDrag', this.item);
                 this.initialPosition = undefined;
                 event.preventDefault();
             }
         },
         mounted() {
+            let context = {
+                item: this.item.domainObject,
+                layoutItem: this.item,
+                addElement: this.$parent.addElement
+            };
+
             this.removeSelectable = this.openmct.selection.selectable(
                 this.$el,
-                {
-                    item: this.item.domainObject
-                },
+                context,
                 this.item.initSelect
             );
         },

src/plugins/displayLayout/components/LineView.vue

@@ -0,0 +1,56 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+
+ <template>
+  <div>
+    <svg :width="gridSize[0] * element.width"
+         :height=" gridSize[1] * element.height">
+        <line :x1=" gridSize[0] * element.x1 + 1"
+              :y1="gridSize[1] * element.y1 + 1 "
+              :x2="gridSize[0] * element.x2 + 1"
+              :y2=" gridSize[1] * element.y2 + 1 "
+              :stroke="element.stroke"
+              stroke-width="2">
+        </line>
+    </svg>
+  </div>
+ </template>
+
+ <script>
+    export default {
+        props: {
+            item: Object,
+            gridSize: Array
+        },
+        computed: {
+            element() {
+                return this.item.config.element;
+            }
+        },
+        mounted() {
+            this.item.config.attachListeners();
+        },
+        destroyed() {
+            this.item.config.removeListeners();
+        }
+    }
+ </script>

src/plugins/displayLayout/components/SubobjectView.vue

@@ -0,0 +1,118 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+<template>
+    <div class="u-contents">
+        <div class="c-so-view__header">
+            <div class="c-so-view__header__start">
+                <div class="c-so-view__name icon-object">{{ item.domainObject.name }}</div>
+                <div class="c-so-view__context-actions c-disclosure-button"></div>
+            </div>
+            <div class="c-so-view__header__end">
+                <div class="c-button icon-expand local-controls--hidden"></div>
+            </div>
+        </div>
+        <object-view class="c-so-view__object-view"
+                     :object="item.domainObject"></object-view>
+    </div>
+</template>
+
+<style lang="scss">
+    @import "~styles/sass-base";
+
+    .c-so-view {
+        /*************************** HEADER */
+        &__header {
+            display: flex;
+            align-items: center;
+            flex: 0 0 auto;
+            margin-bottom: $interiorMargin;
+
+            > [class*="__"] {
+                display: flex;
+                align-items: center;
+            }
+
+            > * + * {
+                margin-left: $interiorMargin;
+            }
+
+            [class*="__start"] {
+                flex: 1 1 auto;
+                overflow: hidden;
+            }
+
+            [class*="__end"] {
+                //justify-content: flex-end;
+                flex: 0 0 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;
+
+            .c-object-view {
+                .u-fills-container {
+                    // Expand component types that fill a container
+                    @include abs();
+                }
+            }
+        }
+    }
+</style>
+
+<script>
+    import ObjectView from '../../../ui/components/layout/ObjectView.vue'
+
+    export default {
+        inject: ['openmct'],
+        props: {
+            item: Object
+        },
+        components: {
+            ObjectView,
+        },
+        mounted() {
+            this.item.config.attachListeners();
+        },
+        destroyed() {
+            this.item.config.removeListeners();
+        }
+    }
+</script>

src/plugins/displayLayout/components/TelemetryView.vue

@@ -0,0 +1,187 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+
+ <template>
+    <div class="c-telemetry-view"
+         :style="styleObject">
+        <div v-if="showLabel"
+              class="c-telemetry-view__label">
+            <div class="c-telemetry-view__label-text">{{ item.domainObject.name }}</div>
+        </div>
+
+        <div v-if="showValue"
+              :title="fieldName"
+              class="c-telemetry-view__value"
+              :class="[telemetryClass]">
+            <div class="c-telemetry-view__value-text">{{ telemetryValue }}</div>
+        </div>
+    </div>    
+ </template>
+
+<style lang="scss">
+    @import '~styles/sass-base';
+
+    .c-telemetry-view {
+        display: flex;
+        align-items: stretch;
+
+        > * {
+            // Label and value holders
+            flex: 1 1 auto;
+            display: flex;
+            flex-direction: row;
+           // justify-content: center;
+            align-items: center;
+            overflow: hidden;
+            padding: $interiorMargin;
+
+            > * {
+                // Text elements
+                @include ellipsize();
+            }
+        }
+
+        > * + * {
+            margin-left: $interiorMargin;
+        }
+
+        .c-frame & {
+            @include abs();
+            border: 1px solid transparent;
+        }
+    }
+</style>
+
+ <script>
+    export default {
+        inject: ['openmct'],
+        props: {
+            item: Object
+        },
+        computed: {
+            showLabel() {
+                let displayMode = this.item.config.alphanumeric.displayMode;
+                return displayMode === 'all' || displayMode === 'label';
+            },
+            showValue() {
+                let displayMode = this.item.config.alphanumeric.displayMode;
+                return displayMode === 'all' || displayMode === 'value';
+            },
+            styleObject() {
+                let alphanumeric = this.item.config.alphanumeric;
+                return {
+                    backgroundColor: alphanumeric.fill,
+                    borderColor: alphanumeric.stroke,
+                    color: alphanumeric.color,
+                    fontSize: alphanumeric.size
+                }
+            },
+            fieldName() {
+                return this.valueMetadata.name;
+            },
+            valueMetadata() {
+                return this.metadata.value(this.item.config.alphanumeric.value);
+            },
+            valueFormatter() {
+                return this.formats[this.item.config.alphanumeric.value];
+            },
+            telemetryValue() {
+                if (!this.datum) {
+                    return;
+                }
+
+                return this.valueFormatter && this.valueFormatter.format(this.datum);
+            },
+            telemetryClass() {
+                if (!this.datum) {
+                    return;
+                }
+
+                let alarm = this.limitEvaluator && this.limitEvaluator.evaluate(this.datum, this.valueMetadata);
+                return alarm && alarm.cssClass;
+            }
+        },
+        data() {
+            return {
+                datum: {},
+                formats: {}
+            }
+        },
+        methods: {
+            requestHistoricalData() {
+                let bounds = this.openmct.time.bounds();
+                let options = {
+                    start: bounds.start,
+                    end: bounds.end,
+                    size: 1
+                };
+                this.openmct.telemetry.request(this.item.domainObject, options)
+                    .then(data => {
+                        if (data.length > 0) {
+                            this.updateView(data[data.length - 1]);
+                        }
+                    });
+            },
+            subscribeToObject() {
+                this.subscription = this.openmct.telemetry.subscribe(this.item.domainObject, function (datum) {
+                    if (this.openmct.time.clock() !== undefined) {
+                        this.updateView(datum);
+                    }
+                }.bind(this));
+            },
+            updateView(datum) {
+                this.datum = datum;
+            },
+            removeSubscription() {
+                if (this.subscription) {
+                    this.subscription();
+                    this.subscription = undefined;
+                }
+            },
+            refreshData(bounds, isTick) {
+                if (!isTick) {
+                    this.datum = undefined;
+                    this.requestHistoricalData(this.item.domainObject);
+                }
+            }
+        },
+        created() {
+            this.metadata = this.openmct.telemetry.getMetadata(this.item.domainObject);
+        },
+        mounted() {
+            this.limitEvaluator = this.openmct.telemetry.limitEvaluator(this.item.domainObject);
+            this.formats = this.openmct.telemetry.getFormatMap(this.metadata);
+
+            this.requestHistoricalData();
+            this.subscribeToObject();
+
+            this.item.config.attachListeners();
+            this.openmct.time.on("bounds", this.refreshData);
+        },
+        destroyed() {
+            this.removeSubscription();
+            this.item.config.removeListeners();
+            this.openmct.time.off("bounds", this.refreshData);
+        }
+    }
+
+ </script>

src/plugins/displayLayout/components/TextView.vue

@@ -0,0 +1,67 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+
+ <template>
+    <div class="c-text-view"
+         :style="styleObject">
+        {{ item.config.element.text }}
+    </div>
+ </template>
+
+<style lang="scss">
+    @import '~styles/sass-base';
+
+    .c-text-view {
+        display: flex;
+        align-items: stretch;
+
+        .c-frame & {
+            @include abs();
+            border: 1px solid transparent;
+        }
+    }
+</style>
+
+ <script>
+    export default {
+        props: {
+            item: Object
+        },
+        computed: {
+            styleObject() {
+                let element = this.item.config.element;
+                return {
+                    backgroundColor: element.fill,
+                    borderColor: element.stroke,
+                    color: element.color,
+                    fontSize: element.size
+                }
+            }
+        },
+        mounted() {
+            this.item.config.attachListeners();
+        },
+        destroyed() {
+            this.item.config.removeListeners();
+        }
+    }
+ </script>

src/plugins/displayLayout/plugin.js

@@ -20,10 +20,11 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import Layout from './DisplayLayout.vue'
+import Layout from './components/DisplayLayout.vue'
 import Vue from 'vue'
 import objectUtils from '../../api/objects/object-utils.js'
 import DisplayLayoutType from './DisplayLayoutType.js'
+import DisplayLayoutToolbar from './DisplayLayoutToolbar.js'
 
 export default function () {
     return function (openmct) {
@@ -40,7 +41,7 @@ export default function () {
                             components: {
                                 Layout
                             },
-                            template: '<layout :domain-object="domainObject"></layout>',
+                            template: '<layout ref="displayLayout" :domain-object="domainObject"></layout>',
                             provide: {
                                 openmct,
                                 objectUtils
@@ -53,6 +54,12 @@ export default function () {
                             }
                         });
                     },
+                    getSelectionContext() {
+                        return {
+                            item: domainObject,
+                            addElement: component && component.$refs.displayLayout.addElement
+                        }
+                    },
                     destroy() {
                         component.$destroy();
                     }
@@ -63,40 +70,12 @@ export default function () {
             }
         });
         openmct.types.addType('layout', DisplayLayoutType());
-        openmct.toolbars.addProvider({
-            name: "Display Layout Toolbar",
-            key: "layout",
-            description: "A toolbar for objects inside a display layout.",
-            forSelection: function (selection) {
-                // Apply the layout toolbar if the selected object is inside a layout,
-                // and in edit mode.
-                return (selection &&
-                    selection[1] &&
-                    selection[1].context.item &&
-                    selection[1].context.item.type === 'layout' &&
-                    openmct.editor.isEditing());
-            },
-            toolbar: function (selection) {                
-                let id = openmct.objects.makeKeyString(selection[0].context.item.identifier);
-                return [
-                    {
-                        control: "toggle-button",
-                        domainObject: selection[1].context.item,
-                        property: "configuration.layout.panels[" + id + "].hasFrame",
-                        options: [
-                            {
-                                value: false,
-                                icon: 'icon-frame-hide',
-                                title: "Hide frame"
-                            },
-                            {
-                                value: true,
-                                icon: 'icon-frame-show',
-                                title: "Show frame"
-                            }
-                        ]
-                    }
-                ];
+        openmct.toolbars.addProvider(new DisplayLayoutToolbar(openmct));
+        openmct.composition.addPolicy((parent, child) => {
+            if (parent.type === 'layout' && child.type === 'folder') {
+                return false;
+            } else {
+                return true;
             }
         });
     }

src/plugins/flexibleLayout/components/container.vue

@@ -0,0 +1,214 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+
+<template>
+    <div class="c-fl-container"
+         :style="[{'flex-basis': size}]"
+         :class="{'is-empty': frames.length === 1}">
+        <div class="c-fl-container__header icon-grippy-ew"
+            v-show="isEditing"
+            draggable="true"
+            @dragstart="startContainerDrag"
+            @dragend="stopContainerDrag">
+            <span class="c-fl-container__size-indicator">{{ size }}</span>
+        </div>
+        <div class="c-fl-container__frames-holder">
+            <div class="u-contents"
+                 v-for="(frame, i) in frames"
+                 :key="i">
+
+                <frame-component
+                    class="c-fl-container__frame"
+                    :style="{
+                        'flex-basis': `${frame.height}%`
+                    }"
+                    :frame="frame"
+                    :size="frame.height"
+                    :index="i"
+                    :containerIndex="index"
+                    :isEditing="isEditing"
+                    :isDragging="isDragging"
+                    @frame-drag-from="frameDragFrom"
+                    @frame-drop-to="frameDropTo"
+                    @delete-frame="promptBeforeDeletingFrame"
+                    @add-container="addContainer">
+                </frame-component>
+
+                <resize-handle
+                    v-if="i !== 0 && (i !== frames.length - 1)"
+                    v-show="isEditing"
+                    :index="i"
+                    :orientation="rowsLayout ? 'horizontal' : 'vertical'"
+                    @init-move="startFrameResizing"
+                    @move="frameResizing"
+                    @end-move="endFrameResizing">
+                </resize-handle>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import FrameComponent from './frame.vue';
+import Frame from '../utils/frame';
+import ResizeHandle from './resizeHandle.vue';
+
+const SNAP_TO_PERCENTAGE = 1;
+const MIN_FRAME_SIZE = 5;
+
+export default {
+    inject:['openmct', 'domainObject'],
+    props: ['size', 'frames', 'index', 'isEditing', 'isDragging', 'rowsLayout'],
+    components: {
+        FrameComponent,
+        ResizeHandle
+    },
+    data() {
+        return {
+            initialPos: 0,
+            frameIndex: 0,
+            maxMoveSize: 0
+        }
+    },
+    methods: {
+        frameDragFrom(frameIndex) {
+           this.$emit('frame-drag-from', this.index, frameIndex);
+        },
+        frameDropTo(frameIndex, event) {
+            let domainObject = event.dataTransfer.getData('domainObject'),
+                frameObject;
+
+            if (domainObject) {
+                frameObject = new Frame(JSON.parse(domainObject));
+            }
+
+            this.$emit('frame-drop-to', this.index, frameIndex, frameObject);
+        },
+        startFrameResizing(index) {
+            let beforeFrame = this.frames[index],
+                afterFrame = this.frames[index + 1];
+            
+            this.maxMoveSize = beforeFrame.height + afterFrame.height;
+        },
+        frameResizing(index, delta, event) {
+
+            let percentageMoved = (delta / this.getElSize(this.$el))*100,
+                beforeFrame = this.frames[index],
+                afterFrame = this.frames[index + 1];
+
+            beforeFrame.height = this.snapToPercentage(beforeFrame.height + percentageMoved);
+            afterFrame.height = this.snapToPercentage(afterFrame.height - percentageMoved);
+        },
+        endFrameResizing(index, event) {
+            this.persist();
+        },
+        getElSize(el) {
+            if (this.rowsLayout) {
+                return el.offsetWidth;
+            } else {
+                return el.offsetHeight;
+            }
+        },
+        getFrameSize(size) {
+            if (size < MIN_FRAME_SIZE) {
+                return MIN_FRAME_SIZE
+            } else if (size > (this.maxMoveSize - MIN_FRAME_SIZE)) {
+                return (this.maxMoveSize - MIN_FRAME_SIZE);
+            } else {
+                return size;
+            }
+        },
+        snapToPercentage(value){
+            let rem = value % SNAP_TO_PERCENTAGE,
+                roundedValue;
+            
+            if (rem < 0.5) {
+                 roundedValue = Math.floor(value/SNAP_TO_PERCENTAGE)*SNAP_TO_PERCENTAGE;
+            } else {
+                roundedValue = Math.ceil(value/SNAP_TO_PERCENTAGE)*SNAP_TO_PERCENTAGE;
+            }
+
+            return this.getFrameSize(roundedValue);
+        },
+        persist() {
+            this.$emit('persist', this.index);
+        },
+        promptBeforeDeletingFrame(frameIndex) {
+            let deleteFrame = this.deleteFrame;
+
+            let prompt = this.openmct.overlays.dialog({
+                iconClass: 'alert',
+                message: `This action will remove ${this.frames[frameIndex].domainObject.name} from this Flexible Layout. Do you want to continue?`,
+                buttons: [
+                    {
+                        label: 'Ok',
+                        emphasis: 'true',
+                        callback: function () {
+                            deleteFrame(frameIndex);
+                            prompt.dismiss();
+                        },
+                    },
+                    {
+                        label: 'Cancel',
+                        callback: function () {
+                            prompt.dismiss();
+                        }
+                    }
+                ]
+            });
+        },
+        deleteFrame(frameIndex) {
+            this.frames.splice(frameIndex, 1);
+            this.$parent.recalculateOldFrameSize(this.frames);
+            this.persist();
+        },
+        deleteContainer() {
+            this.$emit('delete-container', this.index);
+        },
+        addContainer() {
+            this.$emit('add-container', this.index);
+        },
+        startContainerDrag(event) {
+            event.stopPropagation();
+            this.$emit('start-container-drag', this.index);
+        },
+        stopContainerDrag(event) {
+            event.stopPropagation();
+            this.$emit('stop-container-drag');
+        }
+    },
+    mounted() {
+        let context = {
+            item: this.domainObject,
+            method: this.deleteContainer,
+            addContainer: this.addContainer,
+            index: this.index,
+            type: 'container'
+        }
+
+        this.unsubscribeSelection = this.openmct.selection.selectable(this.$el, context, false);
+    }, 
+    beforeDestroy() {
+        this.unsubscribeSelection();
+    }
+}
+</script>

src/plugins/flexibleLayout/components/dropHint.vue

@@ -0,0 +1,58 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+
+<template>
+    <div>
+        <div class="c-drop-hint c-drop-hint--always-show"
+             :class="{'is-mouse-over': isMouseOver}"
+             @dragenter="dragenter"
+             @dragleave="dragleave"
+             @drop="dropHandler">
+        </div>
+    </div>
+</template>
+
+<style lang="scss">
+
+</style>
+
+<script>
+export default {
+    props:['index'],
+    data() {
+        return {
+            isMouseOver: false
+        }
+    },
+    methods: {
+        dragenter() {
+            this.isMouseOver = true;
+        },
+        dragleave() {
+            this.isMouseOver = false;
+        },
+        dropHandler(event) {
+            this.$emit('object-drop-to', event, this.index);
+        }
+    }
+}
+</script>

src/plugins/flexibleLayout/components/flexibleLayout.vue

@@ -0,0 +1,684 @@
+<template>
+    <div class="c-fl">
+        <div class="c-fl__empty"
+             v-if="areAllContainersEmpty()">
+            <span class="c-fl__empty-message">This Flexible Layout is currently empty</span>
+        </div>
+
+        <div class="c-fl__container-holder"
+            :class="{
+                'c-fl--rows': rowsLayout === true
+            }">
+
+            <div class="u-contents"
+                 v-for="(container, index) in containers"
+                 :key="index">
+                
+                <drop-hint
+                    style="flex-basis: 15px;"
+                    v-if="index === 0 && containers.length > 1"
+                    v-show="isContainerDragging"
+                    :index="-1"
+                    @object-drop-to="containerDropTo">
+                </drop-hint>
+
+                <container-component
+                    class="c-fl__container"
+                    ref="containerComponent"
+                    :index="index"
+                    :size="`${Math.round(container.width)}%`"
+                    :frames="container.frames"
+                    :isEditing="isEditing"
+                    :isDragging="isDragging"
+                    :rowsLayout="rowsLayout"
+                    @addFrame="addFrame"
+                    @frame-drag-from="frameDragFromHandler"
+                    @frame-drop-to="frameDropToHandler"
+                    @persist="persist"
+                    @delete-container="promptBeforeDeletingContainer"
+                    @add-container="addContainer"
+                    @start-container-drag="startContainerDrag"
+                    @stop-container-drag="stopContainerDrag">
+                </container-component>
+
+                <resize-handle
+                    v-if="index !== (containers.length - 1)"
+                    v-show="isEditing"
+                    :index="index"
+                    :orientation="rowsLayout ? 'vertical' : 'horizontal'"
+                    @init-move="startContainerResizing"
+                    @move="containerResizing"
+                    @end-move="endContainerResizing">
+                </resize-handle>
+
+                <drop-hint
+                    style="flex-basis: 15px;"
+                    v-if="containers.length > 1"
+                    v-show="isContainerDragging"
+                    :index="index"
+                    @object-drop-to="containerDropTo">
+                </drop-hint>
+            </div>
+        </div> 
+    </div>
+</template>
+
+<style lang="scss">
+    @import '~styles/sass-base';
+
+    .c-fl {
+        @include abs();
+        display: flex;
+        flex-direction: column; // TEMP: only needed to support temp-toolbar element
+
+        > * + * {  margin-top: $interiorMargin; }
+
+        .temp-toolbar {
+            flex: 0 0 auto;
+        }
+
+        &__container-holder {
+            display: flex;
+            flex: 1 1 100%; // Must needs to be 100% to work
+
+            // Columns by default
+            flex-direction: row;
+            > * + * { margin-left: 1px; }
+
+            &[class*='--rows'] {
+                //@include test(blue, 0.1);
+                flex-direction: column;
+                > * + * {
+                    margin-left: 0;
+                    margin-top: 1px;
+                }
+            }
+        }
+
+        &__empty {
+            @include abs();
+            background: rgba($colorBodyFg, 0.1);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            text-align: center;
+
+            > * {
+                font-style: italic;
+                opacity: 0.5;
+            }
+        }
+    }
+
+    .c-fl-container {
+        /***************************************************** CONTAINERS */
+        $headerSize: 16px;
+
+        border: 1px solid transparent;
+        display: flex;
+        flex-direction: column;
+        overflow: auto;
+
+        // flex-basis is set with inline style in code, controls size
+        flex-grow: 1;
+        flex-shrink: 1;
+
+        &__header {
+            // Only displayed when editing
+            background: $editSelectableColor;
+            color: $editSelectableColorFg;
+            cursor: move;
+            display: flex;
+            align-items: center;
+            flex: 0 0 $headerSize;
+
+            &:before {
+                // Drag grippy
+                font-size: 0.8em;
+                opacity: 0.5;
+                position: absolute;
+                left: 50%; top: 50%;
+                transform-origin: center;
+                transform: translate(-50%, -50%);
+            }
+        }
+
+        &__size-indicator {
+            position: absolute;
+            display: inline-block;
+            right: $interiorMargin;
+        }
+
+        &__frames-holder {
+            display: flex;
+            flex: 1 1 100%; // Must be 100% to work
+            flex-direction: column; // Default
+            align-content: stretch;
+            align-items: stretch;
+            overflow: hidden; // This sucks, but doing in the short-term
+        }
+
+        .is-editing & {
+            //background: $editCanvasColorBg;
+            border-color: $editSelectableColor;
+
+            &:hover {
+                border-color: $editSelectableColorHov;
+            }
+
+            &[s-selected] {
+                border-color: $editSelectableColorSelected;
+
+                .c-fl-container__header {
+                    background: $editSelectableColorSelected;
+                    color: $editSelectableColorSelectedFg;
+                }
+            }
+        }
+
+        /****** THEIR FRAMES */
+        // Frames get styled here because this is particular to their presence in this layout type
+        .c-fl-frame {
+            @include browserPrefix(margin-collapse, collapse);
+            margin: 1px;
+
+            //&__drag-wrapper {
+                // border: 1px solid $colorInteriorBorder; // Now handled by is-selectable
+            //}
+        }
+
+        /****** ROWS LAYOUT */
+        .c-fl--rows & {
+            // Layout is rows
+            flex-direction: row;
+
+            &__header {
+                flex-basis: $headerSize;
+                overflow: hidden;
+
+                &:before {
+                    // Drag grippy
+                    transform: rotate(90deg) translate(-50%, 50%);
+                }
+            }
+
+            &__size-indicator {
+                right: 0;
+                top: $interiorMargin;
+                transform-origin: top right;
+                transform: rotate(-90deg) translateY(-100%);
+            }
+
+            &__frames-holder {
+                flex-direction: row;
+            }
+        }
+    }
+
+    .c-fl-frame {
+        /***************************************************** CONTAINER FRAMES */
+        $sizeIndicatorM: 16px;
+        $dropHintSize: 15px;
+
+        display: flex;
+      //  justify-content: stretch;
+      //  align-items: stretch;
+        flex: 1 1;
+        flex-direction: column;
+        overflow: hidden; // Needed to allow frames to collapse when sized down
+
+        &__drag-wrapper {
+            flex: 1 1 auto;
+            overflow: auto;
+
+            .is-editing & {
+                > * {
+                    pointer-events: none;
+                }
+            }
+        }
+
+        &__header {
+            flex: 0 0 auto;
+            margin-bottom: $interiorMargin;
+        }
+
+        &__object-view {
+            flex: 1 1 auto;
+            overflow: auto;
+        }
+
+        &__size-indicator {
+            $size: 35px;
+
+            @include ellipsize();
+            background: $colorBtnBg;
+            border-top-left-radius: $controlCr;
+            color: $colorBtnFg;
+            display: inline-block;
+            padding: $interiorMarginSm 0;
+            position: absolute;
+            pointer-events: none;
+            text-align: center;
+            width: $size;
+            z-index: 2;
+
+            // Changed when layout is different, see below
+            border-top-right-radius: $controlCr;
+            bottom: 1px;
+            right: $sizeIndicatorM;
+        }
+
+        &__drop-hint {
+            flex: 0 0 $dropHintSize;
+            .c-drop-hint {
+                border-radius: $smallCr;
+            }
+        }
+
+        &__resize-handle {
+            $size: 2px;
+            $margin: 3px;
+            $marginHov: 0;
+            $grippyThickness: $size + 6;
+            $grippyLen: $grippyThickness * 2;
+
+            display: flex;
+            flex-direction: column;
+            flex: 0 0 ($margin * 2) + $size;
+            transition: $transOut;
+
+            &:before {
+                // The visible resize line
+                background: $editColor;
+                content: '';
+                display: block;
+                flex: 1 1 auto;
+                min-height: $size; min-width: $size;
+            }
+
+            &__grippy {
+                // Grippy element
+                $d: 4px;
+                $c: black;
+                $a: 0.9;
+                $d: 5px;
+                background: $editColor;
+                color: $editColorBg;
+                border-radius: $smallCr;
+                font-size: 0.8em;
+                height: $d;
+                width: $d * 10;
+                position: absolute;
+                left: 50%; top: 50%;
+                text-align: center;
+                transform-origin: center center;
+                transform: translate(-50%, -50%);
+                z-index: 10;
+            }
+
+            &.vertical {
+                padding: $margin $size;
+                &:hover{
+                  //  padding: $marginHov 0;
+                    cursor: row-resize;
+                }
+            }
+
+            &.horizontal {
+                padding: $size $margin;
+                &:hover{
+                 //   padding: 0 $marginHov;
+                    cursor: col-resize;
+                }
+
+                [class*='grippy'] {
+                    transform: translate(-50%) rotate(90deg);
+                }
+            }
+
+            &:hover {
+                transition: $transOut;
+                &:before {
+                    // The visible resize line
+                    background: $editColorHov;
+                }
+            }
+        }
+
+        // Hide the resize-handles in first and last c-fl-frame elements
+        &:first-child,
+        &:last-child {
+            .c-fl-frame__resize-handle {
+                display: none;
+            }
+        }
+
+        .c-fl--rows & {
+            flex-direction: row;
+
+            &__size-indicator {
+                border-bottom-left-radius: $controlCr;
+                border-top-right-radius: 0;
+                bottom: $sizeIndicatorM;
+                right: 1px;
+            }
+        }
+
+        &--first-in-container {
+            border: none;
+            flex: 0 0 0;
+            .c-fl-frame__drag-wrapper {
+                display: none;
+            }
+
+            &.is-dragging {
+                flex-basis: $dropHintSize;
+            }
+        }
+
+        .is-empty & {
+            &.c-fl-frame--first-in-container {
+                flex: 1 1 auto;
+            }
+
+            &__drop-hint {
+                flex: 1 1 100%;
+                margin: 0;
+            }
+        }
+
+        .c-object-view {
+            display: contents;
+        }
+    }
+</style>
+
+<script>
+import ContainerComponent  from './container.vue';
+import Container from '../utils/container';
+import ResizeHandle from  './resizeHandle.vue';
+import DropHint from './dropHint.vue';
+
+const SNAP_TO_PERCENTAGE = 1,
+      MIN_CONTAINER_SIZE = 5;
+
+export default {
+    inject: ['openmct', 'domainObject'],
+    components: {
+        ContainerComponent,
+        ResizeHandle,
+        DropHint
+    },
+    data() {
+        let containers = this.domainObject.configuration.containers,
+            rowsLayout = this.domainObject.configuration.rowsLayout;
+
+        return {
+            containers: containers,
+            dragFrom: [],
+            isEditing: false,
+            isDragging: false,
+            isContainerDragging: false,
+            rowsLayout: rowsLayout,
+            maxMoveSize: 0
+        }
+    },
+    computed: {
+        layoutDirectionStr() {
+            if (this.rowsLayout) {
+                return 'Rows'
+            } else {
+                return 'Columns'
+            }
+        }
+    },
+    methods: {
+        areAllContainersEmpty() {
+            return !!!this.containers.filter(container => container.frames.length > 1).length;
+        },
+        addContainer() {
+            let newSize = 100/(this.containers.length+1);
+
+            let container = new Container(newSize)
+
+            this.recalculateContainerSize(newSize);
+
+            this.containers.push(container);
+        },
+        recalculateContainerSize(newSize) {
+            this.containers.forEach((container) => {
+                container.width = newSize;
+            });
+        },
+        recalculateNewFrameSize(multFactor, framesArray){
+            framesArray.forEach((frame, index) => {
+                if (index === 0) {
+                    return;
+                }
+                let frameSize = frame.height
+                frame.height = this.snapToPercentage(multFactor * frameSize);
+            });
+        },
+        recalculateOldFrameSize(framesArray) {
+            let totalRemainingSum = framesArray.map((frame,i) => {
+                if (i !== 0) {
+                    return frame.height
+                } else {
+                    return 0;
+                }
+            }).reduce((a, c) => a + c);
+
+            framesArray.forEach((frame, index) => {
+
+                if (index === 0) {
+                    return;
+                }
+                if (framesArray.length === 2) {
+
+                    frame.height = 100;
+                } else {
+
+                    let newSize = frame.height + ((frame.height / totalRemainingSum) * (100 - totalRemainingSum));
+                    frame.height = this.snapToPercentage(newSize);
+                }
+            });
+        },
+        addFrame(frame, index) {
+            this.containers[index].addFrame(frame);
+        },
+        frameDragFromHandler(containerIndex, frameIndex) {
+            this.dragFrom = [containerIndex, frameIndex];
+        },
+        frameDropToHandler(containerIndex, frameIndex, frameObject) {
+            let newContainer = this.containers[containerIndex];
+
+            this.isDragging = false;
+
+            if (!frameObject) {
+                frameObject = this.containers[this.dragFrom[0]].frames.splice(this.dragFrom[1], 1)[0];
+                this.recalculateOldFrameSize(this.containers[this.dragFrom[0]].frames);
+            }
+
+            if (!frameObject.height) {
+                frameObject.height = 100 / Math.max(newContainer.frames.length - 1, 1);
+            }
+
+            newContainer.frames.splice((frameIndex + 1), 0, frameObject);
+
+            let newTotalHeight = newContainer.frames.reduce((total, frame) => {
+                        let num = Number(frame.height);
+
+                        if(isNaN(num)) {
+                            return total;
+                        } else {
+                            return total + num;
+                        }
+                    },0);
+            let newMultFactor = 100 / newTotalHeight;
+
+            this.recalculateNewFrameSize(newMultFactor, newContainer.frames);
+
+            this.persist();
+        },
+        persist(index){
+            if (index) {
+                this.openmct.objects.mutate(this.domainObject, `.configuration.containers[${index}]`, this.containers[index]);
+            } else {
+                this.openmct.objects.mutate(this.domainObject, '.configuration.containers', this.containers);
+            }
+        },
+        isEditingHandler(isEditing) {
+            this.isEditing = isEditing;
+
+            if (this.isEditing) {
+                this.$el.click(); //force selection of flexible-layout for toolbar
+            }
+
+            if (this.isDragging && isEditing === false) {
+                this.isDragging = false;
+            }
+        },
+        dragstartHandler() {
+            if (this.isEditing) {
+                this.isDragging = true;
+            }
+        },
+        dragendHandler() {
+            this.isDragging = false;
+        },
+        startContainerResizing(index) {
+            let beforeContainer = this.containers[index],
+                afterContainer = this.containers[index + 1];
+
+            this.maxMoveSize = beforeContainer.width + afterContainer.width;
+        },
+        containerResizing(index, delta, event) {
+            let percentageMoved = (delta/this.getElSize(this.$el))*100,
+                beforeContainer = this.containers[index],
+                afterContainer = this.containers[index + 1];
+
+                beforeContainer.width = this.getContainerSize(this.snapToPercentage(beforeContainer.width + percentageMoved));
+                afterContainer.width = this.getContainerSize(this.snapToPercentage(afterContainer.width - percentageMoved));
+        },
+        endContainerResizing(event) {
+            this.persist();
+        },
+        getElSize(el) {
+            if (this.rowsLayout) {
+                return el.offsetHeight;
+            } else {
+                return el.offsetWidth;
+            }
+        },
+        getContainerSize(size) {
+            if (size < MIN_CONTAINER_SIZE) {
+                return MIN_CONTAINER_SIZE
+            } else if (size > (this.maxMoveSize - MIN_CONTAINER_SIZE)) {
+                return (this.maxMoveSize - MIN_CONTAINER_SIZE);
+            } else {
+                return size;
+            }
+        },
+        snapToPercentage(value) {
+            let rem = value % SNAP_TO_PERCENTAGE,
+                roundedValue;
+            
+            if (rem < 0.5) {
+                 roundedValue = Math.floor(value/SNAP_TO_PERCENTAGE)*SNAP_TO_PERCENTAGE;
+            } else {
+                roundedValue = Math.ceil(value/SNAP_TO_PERCENTAGE)*SNAP_TO_PERCENTAGE;
+            }
+
+            return roundedValue;
+        },
+        toggleLayoutDirection(v) {
+            this.rowsLayout = v;
+        },
+        promptBeforeDeletingContainer(containerIndex) {
+            let deleteContainer = this.deleteContainer;
+
+            let prompt = this.openmct.overlays.dialog({
+                iconClass: 'alert',
+                message: `This action will permanently delete container ${containerIndex + 1} from this Flexible Layout`,
+                buttons: [
+                    {
+                        label: 'Ok',
+                        emphasis: 'true',
+                        callback: function () {
+                            deleteContainer(containerIndex);
+                            prompt.dismiss();
+                        },
+                    },
+                    {
+                        label: 'Cancel',
+                        callback: function () {
+                            prompt.dismiss();
+                        }
+                    }
+                ]
+            });
+        },
+        deleteContainer(containerIndex) {
+            this.containers.splice(containerIndex, 1);
+
+            this.recalculateContainerSize(100/this.containers.length);
+            this.persist();
+        },
+        addContainer(containerIndex) {
+            let newContainer = new Container();
+
+            if (typeof containerIndex === 'number') {
+                this.containers.splice(containerIndex+1, 0, newContainer);
+            } else {
+
+                this.containers.push(newContainer);
+            }
+
+            this.recalculateContainerSize(100/this.containers.length);
+            this.persist();
+        },
+        startContainerDrag(index) {
+            this.isContainerDragging = true;
+            this.containerDragFrom = index;
+        },
+        stopContainerDrag() {
+            this.isContainerDragging = false;
+        },
+        containerDropTo(event, index) {
+            let fromContainer = this.containers.splice(this.containerDragFrom, 1)[0];
+
+            if (index === -1) {
+                this.containers.unshift(fromContainer);
+            } else {
+                this.containers.splice(index, 0, fromContainer);
+            }
+
+            this.persist();
+        }
+    },
+    mounted() {
+
+        let context = {
+            item: this.domainObject,
+            addContainer: this.addContainer,
+            type: 'flexible-layout'
+        }
+
+        this.unsubscribeSelection = this.openmct.selection.selectable(this.$el, context, true);
+
+        this.openmct.objects.observe(this.domainObject, 'configuration.rowsLayout', this.toggleLayoutDirection);
+        this.openmct.editor.on('isEditing', this.isEditingHandler);
+
+        document.addEventListener('dragstart', this.dragstartHandler);
+        document.addEventListener('dragend', this.dragendHandler);
+    },
+    beforeDestroy() {
+        this.unsubscribeSelection();
+
+        this.openmct.editor.off('isEditing', this.isEditingHandler);
+        document.removeEventListener('dragstart', this.dragstartHandler);
+        document.removeEventListener('dragend', this.dragendHandler);
+    }
+}
+</script>

src/plugins/flexibleLayout/components/frame.vue

@@ -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.
+ *****************************************************************************/
+
+<template>
+    <div class="c-fl-frame"
+        :class="{
+            'is-dragging': isDragging,
+            [frame.cssClass]: true
+        }"
+        @dragstart="initDrag"
+        @drag="continueDrag">
+
+        <div class="c-frame c-fl-frame__drag-wrapper is-selectable is-moveable"
+             :class="{'no-frame': noFrame}"
+             draggable="true"
+             ref="frame"
+             v-if="frame.domainObject">
+
+             <frame-header 
+                v-if="index !== 0"
+                ref="dragObject"
+                class="c-fl-frame__header"
+                :domainObject="frame.domainObject">
+            </frame-header>
+
+            <object-view
+                class="c-fl-frame__object-view"
+                :object="frame.domainObject">
+            </object-view>
+
+            <div class="c-fl-frame__size-indicator"
+                 v-if="isEditing"
+                 v-show="frame.height && frame.height < 100">
+                {{frame.height}}%
+            </div>
+        </div>
+
+        <drop-hint
+             v-show="isEditing && isDragging"
+             class="c-fl-frame__drop-hint"
+             :class="{'is-dragging': isDragging}"
+             @object-drop-to="dropHandler">
+        </drop-hint>
+    </div>
+</template>
+
+<script>
+import ObjectView from '../../../ui/components/layout/ObjectView.vue';
+import DropHint from './dropHint.vue';
+import ResizeHandle from './resizeHandle.vue';
+import FrameHeader from '../../../ui/components/utils/frameHeader.vue';
+
+export default {
+    inject: ['openmct', 'domainObject'],
+    props: ['frame', 'index', 'containerIndex', 'isEditing', 'isDragging'],
+    data() {
+        return {
+            noFrame: this.frame.noFrame
+        }
+    },
+    components: {
+        ObjectView,
+        DropHint,
+        ResizeHandle,
+        FrameHeader
+    },
+    methods: {
+        initDrag(event) {
+            this.$emit('frame-drag-from', this.index);
+        },
+        dropHandler(event) {
+            this.$emit('frame-drop-to', this.index, event);
+        },
+        continueDrag(event) {
+            if (!this.isDragging) {
+                this.isDragging = true;
+            }
+        },
+        deleteFrame() {
+            this.$emit('delete-frame', this.index);
+        },
+        addContainer() {
+            this.$emit('add-container');
+        },
+        toggleFrame(v) {
+            this.noFrame = v;
+        }
+    },
+    mounted() {
+
+        if (this.frame.domainObject.identifier) {
+                let context = {
+                item: this.frame.domainObject,
+                method: this.deleteFrame,
+                addContainer: this.addContainer,
+                type: 'frame',
+                index: this.index
+            }
+
+            this.unsubscribeSelection = this.openmct.selection.selectable(this.$refs.frame, context, false);
+            
+            this.openmct.objects.observe(this.domainObject, `configuration.containers[${this.containerIndex}].frames[${this.index}].noFrame`, this.toggleFrame);
+        }
+    },
+    beforeDestroy() {
+        if (this.unsubscribeSelection) {
+            this.unsubscribeSelection();
+        }
+    }
+}
+</script>

src/plugins/flexibleLayout/components/resizeHandle.vue

@@ -0,0 +1,75 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+
+<template>
+    <div class="c-fl-frame__resize-handle"
+         :class="[orientation]"
+         @mousedown="mousedown">
+    </div>
+</template>
+
+<script>
+export default {
+    props: ['orientation', 'index'],
+    data() {
+        return {
+            initialPos: 0
+        }
+    },
+    methods: {
+        mousedown(event) {
+            event.preventDefault();
+
+            this.$emit('init-move', this.index);
+
+            document.body.addEventListener('mousemove', this.mousemove);
+            document.body.addEventListener('mouseup', this.mouseup);
+        },
+        mousemove(event) {
+            event.preventDefault();
+
+            let delta = this.getMousePosition(event) - this.getElSizeFromRect(this.$el);
+            this.$emit('move', this.index, delta, event);
+        },
+        mouseup(event) {
+            this.$emit('end-move', event);
+
+            document.body.removeEventListener('mousemove', this.mousemove);
+            document.body.removeEventListener('mouseup', this.mouseup);
+        },
+        getMousePosition(event) {
+            if (this.orientation === 'horizontal') {
+                return event.clientX;
+            } else {
+                return event.clientY;
+            }
+        },
+        getElSizeFromRect(el) {
+            if (this.orientation === 'horizontal') {
+                return el.getBoundingClientRect().x;
+            } else {
+                return el.getBoundingClientRect().y;
+            }
+        },
+    }
+}
+</script>

src/plugins/flexibleLayout/flexibleLayoutViewProvider.js

@@ -0,0 +1,67 @@
+/*****************************************************************************
+ * 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([
+    './components/flexibleLayout.vue',
+    'vue'
+], function (
+    FlexibleLayoutComponent,
+    Vue
+) {
+    function FlexibleLayoutViewProvider(openmct) {
+        return {
+            key: 'flexible-layout',
+            name: 'FlexibleLayout',
+            cssClass: 'icon-layout-view',
+            canView: function (domainObject) {
+                return domainObject.type === 'flexible-layout';
+            },
+            view: function (domainObject) {
+                let component;
+
+                return {
+                    show: function (element) {
+                        component =  new Vue({
+                            components: {
+                                FlexibleLayoutComponent: FlexibleLayoutComponent.default
+                            },
+                            provide: {
+                                openmct,
+                                domainObject
+                            },
+                            el: element,
+                            template: '<flexible-layout-component></flexible-layout-component>'
+                        });
+                    },
+                    destroy: function (element) {
+                        component.$destroy();
+                        component = undefined;
+                    }
+                };
+            },
+            priority: function () {
+                return 1;
+            }
+        };
+    }
+    return FlexibleLayoutViewProvider;
+});

src/plugins/flexibleLayout/plugin.js

@@ -0,0 +1,163 @@
+/*****************************************************************************
+ * 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([
+    './flexibleLayoutViewProvider',
+    './utils/container'
+], function (
+    FlexibleLayoutViewProvider,
+    Container
+) {
+    return function plugin() {
+
+        return function install(openmct) {
+            openmct.objectViews.addProvider(new FlexibleLayoutViewProvider(openmct));
+
+            openmct.types.addType('flexible-layout', {
+                name: "Flexible Layout",
+                creatable: true,
+                description: "A fluid, flexible layout canvas that can display multiple objects in rows or columns.",
+                cssClass: 'icon-flexible-layout',
+                initialize: function (domainObject) {
+                    domainObject.configuration = {
+                        containers: [new Container.default(50), new Container.default(50)],
+                        rowsLayout: false
+                    };
+                }
+            });
+
+            openmct.toolbars.addProvider({
+                name: "Flexible Layout Toolbar",
+                key: "flex-layout",
+                description: "A toolbar for objects inside a Flexible Layout.",
+                forSelection: function (selection) {
+                    let context = selection[0].context;
+
+                    return (openmct.editor.isEditing() && context && context.type &&
+                        (context.type === 'flexible-layout' || context.type === 'container' || context.type === 'frame'));
+                },
+                toolbar: function (selection) {
+
+                    let primary = selection[0],
+                        parent = selection[1],
+                        deleteFrame,
+                        toggleContainer,
+                        deleteContainer,
+                        addContainer,
+                        toggleFrame,
+                        separator;
+
+                    addContainer = {
+                        control: "button",
+                        domainObject: parent ? parent.context.item : primary.context.item,
+                        method: parent ? parent.context.addContainer : primary.context.addContainer,
+                        key: "add",
+                        icon: "icon-plus-in-rect",
+                        title: 'Add Container'
+                    };
+
+                    separator = {
+                        control: "separator",
+                        domainObject: selection[0].context.item,
+                        key: "separator"
+                    };
+
+                    toggleContainer = {
+                        control: 'toggle-button',
+                        key: 'toggle-layout',
+                        domainObject: parent ? parent.context.item : primary.context.item,
+                        property: 'configuration.rowsLayout',
+                        options: [
+                            {
+                                value: false,
+                                icon: 'icon-columns',
+                                title: 'Columns'
+                            },
+                            {
+                                value: true,
+                                icon: 'icon-rows',
+                                title: 'Rows'
+                            }
+                        ]
+                    };
+
+                    if (primary.context.type === 'frame') {
+
+                        deleteFrame = {
+                            control: "button",
+                            domainObject: primary.context.item,
+                            method: primary.context.method,
+                            key: "remove",
+                            icon: "icon-trash",
+                            title: "Remove Frame"
+                        };
+                        toggleFrame = {
+                            control: "toggle-button",
+                            domainObject: parent.context.item,
+                            property: `configuration.containers[${parent.context.index}].frames[${primary.context.index}].noFrame`,
+                            options: [
+                                {
+                                    value: true,
+                                    icon: 'icon-frame-hide',
+                                    title: "Hide frame"
+                                },
+                                {
+                                    value: false,
+                                    icon: 'icon-frame-show',
+                                    title: "Show frame"
+                                }
+                            ]
+                        };
+
+
+                    } else if (primary.context.type === 'container') {
+
+                        deleteContainer = {
+                            control: "button",
+                            domainObject: primary.context.item,
+                            method: primary.context.method,
+                            key: "remove",
+                            icon: "icon-trash",
+                            title: "Remove Container"
+                        };
+
+                    } else if (primary.context.type === 'flexible-layout') {
+
+                        addContainer = {
+                            control: "button",
+                            domainObject: primary.context.item,
+                            method: primary.context.addContainer,
+                            key: "add",
+                            icon: "icon-plus-in-rect",
+                            title: 'Add Container'
+                        };
+
+                    }
+
+                    let toolbar = [toggleContainer, addContainer, toggleFrame, separator, deleteFrame, deleteContainer];
+
+                    return toolbar.filter(button => button !== undefined);
+                }
+            });
+        };
+    };
+});

src/plugins/flexibleLayout/utils/container.js

@@ -0,0 +1,14 @@
+import Frame from './frame';
+
+class Container {
+    constructor (width) {
+        this.frames = [new Frame({}, '', 'c-fl-frame--first-in-container')];
+        this.width = width;
+    }
+
+    addFrame(frameObject) {
+        this.frames.push(frameObject);
+    }
+}
+
+export default Container;

src/plugins/flexibleLayout/utils/frame.js

@@ -0,0 +1,10 @@
+class Frame {
+    constructor(domainObject, height, cssClass) {
+        this.domainObject = domainObject;
+        this.height = height;
+        this.cssClass = cssClass ? cssClass : '';
+        this.noFrame = false;
+    }
+}
+
+export default Frame;

src/plugins/folderView/components/GridItem.vue

@@ -0,0 +1,160 @@
+<template>
+    <a class="l-grid-view__item c-grid-item"
+        :class="{ 'is-alias': item.isAlias === true }"
+        :href="objectLink">
+        <div class="c-grid-item__type-icon"
+             :class="(item.type.cssClass != undefined) ? 'bg-' + item.type.cssClass : 'bg-icon-object-unknown'">
+        </div>
+        <div class="c-grid-item__details">
+            <!-- Name and metadata -->
+            <div class="c-grid-item__name"
+                 :title="item.model.name">{{item.model.name}}</div>
+            <div class="c-grid-item__metadata"
+                 :title="item.type.name">
+                <span class="c-grid-item__metadata__type">{{item.type.name}}</span>
+            </div>
+        </div>
+        <div class="c-grid-item__controls">
+            <div class="icon-people" title='Shared'></div>
+            <button class="c-click-icon icon-info c-info-button" title='More Info'></button>
+            <div class="icon-pointer-right c-pointer-icon"></div>
+        </div>
+    </a>
+</template>
+
+<style lang="scss">
+    @import "~styles/sass-base";
+
+    /******************************* GRID ITEMS */
+    .c-grid-item {
+        // Mobile-first
+        @include button($bg: $colorItemBg, $fg: $colorItemFg);
+        cursor: pointer;
+        display: flex;
+        padding: $interiorMarginLg;
+
+        &__type-icon {
+            filter: $colorKeyFilter;
+            flex: 0 0 $gridItemMobile;
+            font-size: floor($gridItemMobile / 2);
+            margin-right: $interiorMarginLg;
+        }
+
+        &.is-alias {
+            // Object is an alias to an original.
+            [class*='__type-icon'] {
+                @include isAlias();
+                color: $colorIconAliasForKeyFilter;
+            }
+        }
+
+        &__details {
+            display: flex;
+            flex-flow: column nowrap;
+            flex: 1 1 auto;
+        }
+
+        &__name {
+            @include ellipsize();
+            color: $colorItemFg;
+            font-size: 1.2em;
+            font-weight: 400;
+            margin-bottom: $interiorMarginSm;
+        }
+
+        &__metadata {
+            color: $colorItemFgDetails;
+            font-size: 0.9em;
+
+            body.mobile & {
+                [class*='__item-count'] {
+                    &:before {
+                        content: ' - ';
+                    }
+                }
+            }
+        }
+
+        &__controls {
+            color: $colorItemFgDetails;
+            flex: 0 0 64px;
+            font-size: 1.2em;
+            display: flex;
+            align-items: center;
+            justify-content: flex-end;
+
+            > * + * {
+                margin-left: $interiorMargin;
+            }
+        }
+
+        body.desktop & {
+            $transOutMs: 300ms;
+            flex-flow: column nowrap;
+            transition: background $transOutMs ease-in-out;
+
+            &:hover {
+                background: $colorItemBgHov;
+                transition: $transIn;
+
+                .c-grid-item__type-icon {
+                    filter: $colorKeyFilterHov;
+                    transform: scale(1);
+                    transition: $transInBounce;
+                }
+            }
+
+            > * {
+                margin: 0; // Reset from mobile
+            }
+
+            &__controls {
+                align-items: start;
+                flex: 0 0 auto;
+                order: 1;
+                .c-info-button,
+                .c-pointer-icon { display: none; }
+            }
+
+            &__type-icon {
+                flex: 1 1 auto;
+                font-size: floor($gridItemDesk / 3);
+                margin: $interiorMargin 22.5% $interiorMargin * 3 22.5%;
+                order: 2;
+                transform: scale(0.9);
+                transform-origin: center;
+                transition: all $transOutMs ease-in-out;
+            }
+
+            &__details {
+                flex: 0 0 auto;
+                justify-content: flex-end;
+                order: 3;
+            }
+
+            &__metadata {
+                display: flex;
+
+                &__type {
+                    flex: 1 1 auto;
+                    @include ellipsize();
+                }
+
+                &__item-count {
+                    opacity: 0.7;
+                    flex: 0 0 auto;
+                }
+            }
+        }
+    }
+</style>
+
+<script>
+import contextMenu from '../../../ui/components/mixins/context-menu';
+import objectLink from '../../../ui/components/mixins/object-link';
+
+export default {
+    mixins: [contextMenu, objectLink],
+    props: ['item']
+}
+</script>

src/plugins/folderView/components/GridView.vue

@@ -1,28 +1,10 @@
 <template>
     <div class="l-grid-view">
-        <div v-for="(item, index) in items"
-            v-bind:key="index"
-            class="l-grid-view__item c-grid-item"
-             :class="{ 'is-alias': item.isAlias === true }"
-            @click="navigate(item)">
-            <div class="c-grid-item__type-icon"
-                 :class="(item.type.cssClass != undefined) ? 'bg-' + item.type.cssClass : 'bg-icon-object-unknown'">
-            </div>
-            <div class="c-grid-item__details">
-                <!-- Name and metadata -->
-                <div class="c-grid-item__name"
-                     :title="item.model.name">{{item.model.name}}</div>
-                <div class="c-grid-item__metadata"
-                     :title="item.type.name">
-                    <span class="c-grid-item__metadata__type">{{item.type.name}}</span>
-                </div>
-            </div>
-            <div class="c-grid-item__controls">
-                <div class="icon-people" title='Shared'></div>
-                <button class="c-click-icon icon-info c-info-button" title='More Info'></button>
-                <div class="icon-pointer-right c-pointer-icon"></div>
-            </div>
-        </div>
+        <grid-item v-for="(item, index) in items"
+            :key="index"
+            :item="item"
+            :object-path="item.objectPath">
+        </grid-item>
     </div>
 </template>
 
@@ -33,6 +15,7 @@
     .l-grid-view {
         display: flex;
         flex-flow: column nowrap;
+        overflow: auto;
 
         &__item {
             flex: 0 0 auto;
@@ -176,17 +159,11 @@
 <script>
 
 import compositionLoader from './composition-loader';
+import GridItem from './GridItem.vue';
 
 export default {
+    components: {GridItem},
     mixins: [compositionLoader],
-    inject: ['domainObject', 'openmct'],
-    methods: {
-        navigate(item) {
-            let currentLocation = this.openmct.router.currentLocation.path,
-                navigateToPath = `${currentLocation}/${this.openmct.objects.makeKeyString(item.model.identifier)}`;
-
-            this.openmct.router.setPath(navigateToPath);
-        }
-    }
+    inject: ['openmct']
 }
 </script>

src/plugins/folderView/components/ListItem.vue

@@ -0,0 +1,72 @@
+<template>
+    <tr class="c-list-item"
+        :class="{ 'is-alias': item.isAlias === true }"
+        @click="navigate">
+        <td class="c-list-item__name">
+            <a :href="objectLink" ref="objectLink">
+                <div class="c-list-item__type-icon"
+                     :class="item.type.cssClass"></div>
+                {{item.model.name}}
+            </a>
+        </td>
+        <td class="c-list-item__type">{{ item.type.name }}</td>
+        <td class="c-list-item__date-created">{{ formatTime(item.model.persisted, 'YYYY-MM-DD HH:mm:ss:SSS') }}Z</td>
+        <td class="c-list-item__date-updated">{{ formatTime(item.model.modified, 'YYYY-MM-DD HH:mm:ss:SSS') }}Z</td>
+    </tr>
+</template>
+
+<style lang="scss">
+    @import "~styles/sass-base";
+
+    /******************************* LIST ITEM */
+    .c-list-item {
+        &__name {
+            @include ellipsize();
+        }
+
+        &__type-icon {
+            color: $colorKey;
+            display: inline-block;
+            width: 1em;
+            margin-right:$interiorMarginSm;
+        }
+
+        &.is-alias {
+            // Object is an alias to an original.
+            [class*='__type-icon'] {
+                &:after {
+                    color: $colorIconAlias;
+                    content: $glyph-icon-link;
+                    font-family: symbolsfont;
+                    display: block;
+                    position: absolute;
+                    text-shadow: rgba(black, 0.5) 0 1px 2px;
+                    top: auto; left: -1px; bottom: 1px; right: auto;
+                    transform-origin: bottom left;
+                    transform: scale(0.65);
+                }
+            }
+        }
+    }
+
+</style>
+
+<script>
+
+import moment from 'moment';
+import contextMenu from '../../../ui/components/mixins/context-menu';
+import objectLink from '../../../ui/components/mixins/object-link';
+
+export default {
+    mixins: [contextMenu, objectLink],
+    props: ['item'],
+    methods: {
+        formatTime(timestamp, format) {
+            return moment(timestamp).format(format);
+        },
+        navigate() {
+            this.$refs.objectLink.click();
+        }
+    }
+}
+</script>

src/plugins/folderView/components/ListView.vue

@@ -2,60 +2,50 @@
     <div class="c-table c-table--sortable c-list-view">
         <table class="c-table__body">
             <thead class="c-table__header">
-            <tr>
-                <th class="is-sortable"
-                    :class="{
-                        'is-sorting': sortBy === 'model.name',
-                        'asc': ascending,
-                        'desc': !ascending
-                    }"
-                    @click="sort('model.name', true)">
-                    Name
-                </th>
-                <th class="is-sortable"
-                    :class="{
-                        'is-sorting': sortBy === 'type.name',
-                        'asc': ascending,
-                        'desc': !ascending
-                    }"
-                    @click="sort('type.name', true)">
-                    Type
-                </th>
-                <th class="is-sortable"
-                    :class="{
-                        'is-sorting': sortBy === 'model.persisted',
-                        'asc': ascending,
-                        'desc': !ascending
-                    }"
-                    @click="sort('model.persisted', false)">
-                    Created Date
-                </th>
-                <th class="is-sortable"
-                    :class="{
-                        'is-sorting': sortBy === 'model.modified',
-                        'asc': ascending,
-                        'desc': !ascending
-                    }"
-                    @click="sort('model.modified', false)">
-                    Updated Date
-                </th>
-            </tr>
+                <tr>
+                    <th class="is-sortable"
+                        :class="{
+                            'is-sorting': sortBy === 'model.name',
+                            'asc': ascending,
+                            'desc': !ascending
+                        }"
+                        @click="sort('model.name', true)">
+                        Name
+                    </th>
+                    <th class="is-sortable"
+                        :class="{
+                            'is-sorting': sortBy === 'type.name',
+                            'asc': ascending,
+                            'desc': !ascending
+                        }"
+                        @click="sort('type.name', true)">
+                        Type
+                    </th>
+                    <th class="is-sortable"
+                        :class="{
+                            'is-sorting': sortBy === 'model.persisted',
+                            'asc': ascending,
+                            'desc': !ascending
+                        }"
+                        @click="sort('model.persisted', false)">
+                        Created Date
+                    </th>
+                    <th class="is-sortable"
+                        :class="{
+                            'is-sorting': sortBy === 'model.modified',
+                            'asc': ascending,
+                            'desc': !ascending
+                        }"
+                        @click="sort('model.modified', false)">
+                        Updated Date
+                    </th>
+                </tr>
             </thead>
             <tbody>
-            <tr class="c-list-item"
-                v-for="(item,index) in sortedItems"
-                v-bind:key="index"
-                :class="{ 'is-alias': item.isAlias === true }"
-                @click="navigate(item)">
-                <td class="c-list-item__name">
-                    <div class="c-list-item__type-icon"
-                         :class="item.type.cssClass"></div>
-                    {{item.model.name}}
-                </td>
-                <td class="c-list-item__type">{{ item.type.name }}</td>
-                <td class="c-list-item__date-created">{{ formatTime(item.model.persisted, 'YYYY-MM-DD HH:mm:ss:SSS') }}Z</td>
-                <td class="c-list-item__date-updated">{{ formatTime(item.model.modified, 'YYYY-MM-DD HH:mm:ss:SSS') }}Z</td>
-            </tr>
+                <list-item v-for="(item,index) in sortedItems"
+                    :item="item"
+                    :object-path="item.objectPath">
+                </list-item>
             </tbody>
         </table>
     </div>
@@ -96,48 +86,16 @@
             }
         }
     }
-
-    .c-list-item {
-        &__name {
-            @include ellipsize();
-        }
-
-        &__type-icon {
-            color: $colorKey;
-            display: inline-block;
-            width: 1em;
-            margin-right:$interiorMarginSm;
-        }
-
-        &.is-alias {
-            // Object is an alias to an original.
-            [class*='__type-icon'] {
-                &:after {
-                    color: $colorIconAlias;
-                    content: $glyph-icon-link;
-                    font-family: symbolsfont;
-                    display: block;
-                    position: absolute;
-                    text-shadow: rgba(black, 0.5) 0 1px 2px;
-                    top: auto; left: -1px; bottom: 1px; right: auto;
-                    transform-origin: bottom left;
-                    transform: scale(0.65);
-                }
-            }
-        }
-    }
-
-
-    /******************************* LIST ITEM */
 </style>
 
 <script>
 
 import lodash from 'lodash';
-import moment from 'moment';
 import compositionLoader from './composition-loader';
+import ListItem from './ListItem.vue';
 
 export default {
+    components: {ListItem},
     mixins: [compositionLoader],
     inject: ['domainObject', 'openmct'],
     data() {
@@ -156,15 +114,6 @@ export default {
         }
     },
     methods: {
-        formatTime(timestamp, format) {
-            return moment(timestamp).format(format);
-        },
-        navigate(item) {
-            let currentLocation = this.openmct.router.currentLocation.path,
-                navigateToPath = `${currentLocation}/${this.openmct.objects.makeKeyString(item.model.identifier)}`;
-
-            this.openmct.router.setPath(navigateToPath);
-        },
         sort(field, defaultDirection) {
             if (this.sortBy === field) {
                 this.ascending = !this.ascending;

src/plugins/folderView/components/composition-loader.js

@@ -31,16 +31,19 @@ export default {
     methods: {
         add(child, index, anything) {
             var type = this.openmct.types.get(child.type) || unknownObjectType;
-
             this.items.push({
                 model: child,
                 type: type.definition,
-                isAlias: this.domainObject.identifier.key !== child.location
+                isAlias: this.domainObject.identifier.key !== child.location,
+                objectPath: [child].concat(openmct.router.path)
             });
         },
-        remove(child) {
-            // TODO: implement remove action
-            console.log('remove child? might be identifier');
+        remove(identifier) {
+            this.items = this.items
+                .filter((i) => {
+                    return i.model.identifier.key !== identifier.key
+                        || i.model.identifier.namespace !== identifier.namespace
+                });
         }
     }
 }

src/plugins/plugins.js

@@ -37,6 +37,8 @@ define([
     './notebook/plugin',
     './displayLayout/plugin',
     './folderView/plugin',
+    './flexibleLayout/plugin',
+    './tabs/plugin',
     '../../platform/features/fixed/plugin'
 ], function (
     _,
@@ -55,6 +57,8 @@ define([
     Notebook,
     DisplayLayoutPlugin,
     FolderView,
+    FlexibleLayout,
+    Tabs,
     FixedView
 ) {
     var bundleMap = {
@@ -167,7 +171,9 @@ define([
     plugins.Notebook = Notebook;
     plugins.DisplayLayout = DisplayLayoutPlugin.default;
     plugins.FolderView = FolderView;
+    plugins.Tabs = Tabs;
     plugins.FixedView = FixedView;
+    plugins.FlexibleLayout = FlexibleLayout;
 
     return plugins;
 });

src/plugins/tabs/components/tabs.vue

@@ -0,0 +1,177 @@
+<template>
+    <div class="c-tabs-view">
+        <div class="c-tabs-view__tabs-holder c-compact-button-holder"
+            :class="{
+                'is-dragging': isDragging,
+                'is-mouse-over': allowDrop
+            }">
+            <div class="c-drop-hint"
+                 @drop="onDrop"
+                 ref="dropHint">
+            </div>
+            <div class="c-tabs-view__empty-message"
+                 v-if="!tabsList.length > 0">Drag objects here to add them to this view.</div>
+            <button class="c-tabs-view__tab c-compact-button"
+                v-for="(tab,index) in tabsList"
+                :key="index"
+                :class="[
+                    {'is-current': tab=== currentTab}, 
+                    tab.type.definition.cssClass
+                ]"
+                @click="showTab(tab)">
+                <span class="c-button__label">{{tab.model.name}}</span>
+            </button>
+        </div>
+        <div class="c-tabs-view__object-holder" 
+            v-for="(object, index) in tabsList"
+            :key="index"
+            :class="{'invisible': object !== currentTab}">
+            <div class="c-tabs-view__object-name l-browse-bar__object-name--w"
+                 :class="currentTab.type.definition.cssClass">
+                <div class="l-browse-bar__object-name">
+                    {{currentTab.model.name}}
+                </div>
+            </div>
+            <object-view class="c-tabs-view__object"
+                :object="object.model">
+            </object-view>
+        </div>
+    </div>
+</template>
+
+<style lang="scss">
+    @import '~styles/sass-base.scss';
+
+    .c-tabs-view {
+        $h: 20px;
+        @include abs();
+        display: flex;
+        flex-flow: column nowrap;
+
+        > * + * {
+            margin-top: $interiorMargin;
+        }
+
+        &__tabs-holder {
+            @include userSelectNone();
+            flex: 0 0 auto;
+            min-height: $h;
+        }
+
+        &__object-holder {
+            flex: 1 1 auto;
+            display: flex;
+            flex-direction: column;
+        }
+
+        &__object-name {
+            flex: 0 0 auto;
+            font-size: 1.2em !important;
+            margin: $interiorMargin 0 $interiorMarginLg 0;
+        }
+
+        &__object {
+            flex: 1 1 auto;
+        }
+
+        &__empty-message {
+            color: rgba($colorBodyFg, 0.7);
+            font-style: italic;
+            text-align: center;
+            line-height: $h;
+            width: 100%;
+        }
+    }
+</style>
+
+<script>
+import ObjectView from '../../../ui/components/layout/ObjectView.vue';
+
+var unknownObjectType = {
+    definition: {
+        cssClass: 'icon-object-unknown',
+        name: 'Unknown Type'
+    }
+};
+
+export default {
+    inject: ['openmct','domainObject', 'composition'],
+    components: {
+        ObjectView
+    },
+    mounted () {
+        if (this.composition) {
+            this.composition.on('add', this.addItem, this);
+            this.composition.load();
+        }
+
+        document.addEventListener('dragstart', this.dragstart);
+        document.addEventListener('dragend', this.dragend);
+
+        let dropHint = this.$refs.dropHint;
+
+        if (dropHint) {
+            dropHint.addEventListener('dragenter', this.dragenter);
+            dropHint.addEventListener('dragleave', this.dragleave);
+        }
+    },
+    data: function () {
+        return {
+            currentTab: {},
+            tabsList: [],
+            setCurrentTab: true,
+            isDragging: false,
+            allowDrop: false
+        };
+    },
+    methods:{
+        showTab (tab) {
+            this.currentTab = tab;
+        },
+        addItem (model) {
+            let type = this.openmct.types.get(model.type) || unknownObjectType,
+                tabItem = {
+                    model,
+                    type: type
+                };
+
+            this.tabsList.push(tabItem);
+
+            if (this.setCurrentTab) {
+                this.currentTab = tabItem;
+                this.setCurrentTab = false;
+            }
+        },
+        onDrop (e) {
+            this.setCurrentTab = true;
+        },
+        dragstart (e) {
+            if (e.dataTransfer.getData('domainObject')) {
+                this.isDragging = true;
+            }
+        },
+        dragend (e) {
+            this.isDragging = false;
+            this.allowDrop = false;
+        },
+        dragenter () {
+            this.allowDrop = true;
+        },
+        dragleave() {
+            this.allowDrop = false;
+        }
+    },
+    destroyed() {
+        this.composition.off('add', this.addItem, this);
+
+        document.removeEventListener('dragstart', this.dragstart);
+        document.removeEventListener('dragend', this.dragend);
+    },
+    beforeDestroy() {
+        let dropHint = this.$refs.dropHint;
+
+        dropHint.removeEventListener('dragenter', this.dragenter);
+        dropHint.removeEventListener('dragleave', this.dragleave);
+    }
+}
+</script>

src/plugins/tabs/plugin.js

@@ -20,20 +20,23 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([], function () {
-    function AdapterCompositionPolicy(openmct) {
-        this.openmct = openmct;
-    }
+define([
+    './tabs'
+], function (
+    Tabs
+) {
+    return function plugin() {
+        return function install(openmct) {
+            openmct.objectViews.addProvider(new Tabs(openmct));
 
-    AdapterCompositionPolicy.prototype.allow = function (
-        parent,
-        child
-    ) {
-        return this.openmct.composition.checkPolicy(
-            parent,
-            child
-        );
+            openmct.types.addType('tabs', {
+                name: "Tabs View",
+                creatable: true,
+                cssClass: 'icon-tabs-view',
+                initialize(domainObject) {
+                    domainObject.composition = [];
+                }
+            });
+        };
     };
-
-    return AdapterCompositionPolicy;
 });

src/plugins/tabs/tabs.js

@@ -0,0 +1,68 @@
+/*****************************************************************************
+ * 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([
+    './components/tabs.vue',
+    'vue'
+], function (
+    TabsComponent,
+    Vue
+) {
+    function Tabs(openmct) {
+        return {
+            key: 'tabs',
+            name: 'Tabs',
+            cssClass: 'icon-list-view',
+            canView: function (domainObject) {
+                return domainObject.type === 'tabs';
+            },
+            view: function (domainObject) {
+                let component;
+
+                return {
+                    show: function (element) {
+                        component =  new Vue({
+                            components: {
+                                TabsComponent: TabsComponent.default
+                            },
+                            provide: {
+                                openmct,
+                                domainObject,
+                                composition: openmct.composition.get(domainObject)
+                            },
+                            el: element,
+                            template: '<tabs-component></tabs-component>'
+                        });
+                    },
+                    destroy: function (element) {
+                        component.$destroy();
+                        component = undefined;
+                    }
+                };
+            },
+            priority: function () {
+                return 1;
+            }
+        };
+    }
+    return Tabs;
+});

src/plugins/telemetryTable/TelemetryTableConfiguration.js

@@ -46,6 +46,10 @@ define([
         getConfiguration() {
             let configuration = this.domainObject.configuration || {};
             configuration.hiddenColumns = configuration.hiddenColumns || {};
+            configuration.columnWidths = configuration.columnWidths || {};
+            configuration.columnOrder = configuration.columnOrder || [];
+            configuration.autosize = configuration.autosize === undefined ? true : configuration.autosize;
+
             return configuration;
         }
 
@@ -113,7 +117,7 @@ define([
             let headers = _.uniq(flattenedColumns, false, column => column.getKey())
                 .reduce(fromColumnsToHeadersMap, {});
 
-            function fromColumnsToHeadersMap(headersMap, column){
+            function fromColumnsToHeadersMap(headersMap, column) {
                 headersMap[column.getKey()] = column.getTitle();
                 return headersMap;
             }
@@ -122,16 +126,42 @@ define([
         }
 
         getVisibleHeaders() {
-            let headers = this.getAllHeaders();
+            let allHeaders = this.getAllHeaders();
             let configuration = this.getConfiguration();
 
-            Object.keys(headers).forEach((headerKey) => {
-                if (configuration.hiddenColumns[headerKey] === true) {
-                    delete headers[headerKey];
-                }
-            });
+            let orderedColumns = this.getColumnOrder();
+            let unorderedColumns = _.difference(Object.keys(allHeaders), orderedColumns);
 
-            return headers;
+            return orderedColumns.concat(unorderedColumns)
+                .filter((headerKey) => {
+                    return configuration.hiddenColumns[headerKey] !== true;
+                })
+                .reduce((headers, headerKey) => {
+                    headers[headerKey] = allHeaders[headerKey];
+                    return headers;
+                }, {});
+        }
+
+        getColumnWidths() {
+            let configuration = this.getConfiguration();
+            return configuration.columnWidths;
+        }
+
+        setColumnWidths(columnWidths) {
+            let configuration = this.getConfiguration();
+            configuration.columnWidths = columnWidths;
+            this.updateConfiguration(configuration);
+        }
+
+        getColumnOrder() {
+            let configuration = this.getConfiguration();
+            return configuration.columnOrder;
+        }
+
+        setColumnOrder(columnOrder) {
+            let configuration = this.getConfiguration();
+            configuration.columnOrder = columnOrder;
+            this.updateConfiguration(configuration);
         }
 
         destroy() {
@@ -140,4 +170,4 @@ define([
     }
 
     return TelemetryTableConfiguration;
-});
+});

src/plugins/telemetryTable/TelemetryTableType.js

@@ -21,19 +21,17 @@
  *****************************************************************************/
 
 define(function () {
-    function TelemetryTableType() {
-        return {
-            name: 'Telemetry Table',
-            description: 'Display telemetry values for the current time bounds in tabular form. Supports filtering and sorting.',
-            creatable: true,
-            cssClass: 'icon-tabular-realtime',
-            initialize(domainObject) {
-                domainObject.composition = [];
-                domainObject.configuration = {
-                    columns: {}
-                };
-            }
+    return {
+        name: 'Telemetry Table',
+        description: 'Display telemetry values for the current time bounds in tabular form. Supports filtering and sorting.',
+        creatable: true,
+        cssClass: 'icon-tabular-realtime',
+        initialize(domainObject) {
+            domainObject.composition = [];
+            domainObject.configuration = {
+                columnWidths: {},
+                hiddenColumns: {}
+            };
         }
-    }
-    return TelemetryTableType;
-});
+    };
+});

src/plugins/telemetryTable/components/table-column-header.vue

@@ -20,20 +20,22 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 <template>
-<th :class="[
-        isSortable ? 'is-sortable' : '', 
-        isSortable && sortOptions.key === headerKey ? 'is-sorting' : '', 
-        isSortable && sortOptions.direction].join(' ')"
-    :style="{ width: columnWidths[headerKey] + 'px', 'max-width': columnWidths[headerKey] + 'px'}"
-    draggable="true"
+<th 
+    :style="{ width: columnWidth + 'px', 'max-width': columnWidth + 'px'}"
+    :draggable="isEditing"
     @mouseup="sort"
-    @dragstart="columnMoveStart"
-    @drop="columnMoveEnd"
-    @dragleave="hideDropTarget"
-    @dragover="dragOverColumn($event.currentTarget, $event)">
-        <div class="c-telemetry-table__headers__content">
-            <div class="c-telemetry-table__resize-hotzone c-telemetry-table__resize-hotzone--right"
-                @mousedown="startResizeColumn"
+    v-on="isEditing ? {
+        dragstart: columnMoveStart,
+        drop: columnMoveEnd,
+        dragleave: hideDropTarget,
+        dragover: dragOverColumn
+    } : {}">
+        <div class="c-telemetry-table__headers__content" :class="[
+            isSortable ? 'is-sortable' : '', 
+            isSortable && sortOptions.key === headerKey ? 'is-sorting' : '', 
+            isSortable && sortOptions.direction].join(' ')">
+            <div v-if="isEditing" class="c-telemetry-table__resize-hotzone c-telemetry-table__resize-hotzone--right"
+                @mousedown="resizeColumnStart"
             ></div>
             <slot></slot>
         </div>
@@ -61,23 +63,27 @@
             cursor: col-resize;
             border: none;
             right: 0px;
-            margin-right: -$tabularTdPadLR - $hotzone-size / 2;
-        }
-        th:last-child .c-telemetry-table__resize-hotzone {
-            display: none;
+            margin-right: -$tabularTdPadLR - 1 - $hotzone-size / 2;
         }
     }
 </style>
 <script>
 import _ from 'lodash';
+const MOVE_COLUMN_DT_TYPE = 'movecolumnfromindex';
 
 export default {
+    inject: ['openmct'],
+    data() {
+        return {
+            isEditing: this.openmct.editor.isEditing()
+        }
+    },
     props: {
         headerKey: String,
         headerIndex: Number,
         isHeaderTitle: Boolean,
         sortOptions: Object,
-        columnWidths: Object,
+        columnWidth: Number,
         hotzone: Boolean
     },
     computed: {
@@ -86,37 +92,48 @@ export default {
         }
     },
     methods: {
-        startResizeColumn($event) {
+        resizeColumnStart(event) {
             this.resizeStartX = event.clientX;
-            this.resizeStartWidth = this.columnWidths[this.headerKey];
+            this.resizeStartWidth = this.columnWidth;
 
-            document.addEventListener('mouseup', ()=>{
+            document.addEventListener('mouseup', this.resizeColumnEnd, {once: true, capture: true});
+            document.addEventListener('mousemove', this.resizeColumn);
+            event.preventDefault();
+        },
+        resizeColumnEnd(event) {
                 this.resizeStartX = undefined;
                 this.resizeStartWidth = undefined;
                 document.removeEventListener('mousemove', this.resizeColumn);
                 event.preventDefault();
                 event.stopPropagation();
-            }, {once: true, capture: true});
-            document.addEventListener('mousemove', this.resizeColumn);
-            event.preventDefault();
+
+                this.$emit('resizeColumnEnd');
         },
         resizeColumn(event) {
             let delta = event.clientX - this.resizeStartX;
             let newWidth = this.resizeStartWidth + delta;
-            this.$emit('resizeColumn', this.headerKey, newWidth);
+            let minWidth = parseInt(window.getComputedStyle(this.$el).minWidth);
+            if (newWidth > minWidth) {
+                this.$emit('resizeColumn', this.headerKey, newWidth);
+            }
         },
         columnMoveStart(event) {
-            event.dataTransfer.setData('moveColumnFromIndex', this.headerIndex);
+            event.dataTransfer.setData(MOVE_COLUMN_DT_TYPE, this.headerIndex);
         },
-        dragOverColumn(element, event) {
-            event.preventDefault();
-            this.updateDropOffset(element, event.clientX);
+        isColumnMoveEvent(event) {
+            return [...event.dataTransfer.types].includes(MOVE_COLUMN_DT_TYPE);
+        },
+        dragOverColumn(event) {
+            if (this.isColumnMoveEvent(event)){
+                event.preventDefault();
+                this.updateDropOffset(event.currentTarget, event.clientX);
+            } else {
+                return false;
+            }
         },
         updateDropOffset(element, clientX) {
             let thClientLeft = element.getBoundingClientRect().x;
             let offsetInHeader = clientX - thClientLeft;
-
-            this.calculate
             let dropOffsetLeft;
 
             if (offsetInHeader < element.offsetWidth / 2) {
@@ -124,34 +141,42 @@ export default {
             } else {
                 dropOffsetLeft = element.offsetLeft + element.offsetWidth;
             }
-            this.$parent.$emit('drop-target-offset-changed', dropOffsetLeft);
-            this.$parent.$emit('drop-target-active', true);
+            this.$emit('dropTargetOffsetChanged', dropOffsetLeft);
+            this.$emit('dropTargetActive', true);
         },
         hideDropTarget(){
-            this.$parent.$emit('drop-target-active', false);
+            this.$emit('dropTargetActive', false);
         },
-        columnMoveEnd(){
-            let toIndex = this.headerIndex;
-            let fromIndex = event.dataTransfer.getData('moveColumnFromIndex');
-            if (event.offsetX < event.target.offsetWidth / 2) {
-                if (toIndex > fromIndex){
-                    toIndex--;
+        columnMoveEnd(event){
+            if (this.isColumnMoveEvent(event)){
+                let toIndex = this.headerIndex;
+                let fromIndex = event.dataTransfer.getData(MOVE_COLUMN_DT_TYPE);
+                if (event.offsetX < event.target.offsetWidth / 2) {
+                    if (toIndex > fromIndex){
+                        toIndex--;
+                    }
+                } else {
+                    if (toIndex < fromIndex){
+                        toIndex++;
+                    }
                 }
-            } else {
-                if (toIndex < fromIndex){
-                    toIndex++;
+                if (toIndex !== fromIndex) {
+                    this.$emit('reorderColumn', fromIndex, toIndex);
                 }
             }
-            if (toIndex !== fromIndex) {
-                this.$parent.$emit('move-column', fromIndex, toIndex);
-            }
         },
-        sort(){
+        sort() {
             this.$emit("sort");
+        },
+        toggleEditMode(isEditing) {
+            this.isEditing = isEditing;
         }
     },
     created() {
-        this.resizeColumn = _.throttle(this.resizeColumn, 50);
+        this.openmct.editor.on('isEditing', this.toggleEditMode);
+    },
+    destroyed() {
+        this.openmct.editor.off('isEditing', this.toggleEditMode);
     }
 }
 </script>

src/plugins/telemetryTable/components/table-configuration.vue

@@ -1,6 +1,13 @@
 <template>
 <div class="c-properties" v-if="isEditing">
-    <div class="c-properties__header">Table Columns</div>
+    <div class="c-properties__header">Table Column Size</div>
+    <ul class="c-properties__section">
+        <li class="c-properties__row">
+            <div class="c-properties__label" title="Show or Hide Column"><label for="AutoSizeControl">Auto-size</label></div>
+            <div class="c-properties__value"><input type="checkbox" id="AutoSizeControl" :checked="configuration.autosize !== false" @change="toggleAutosize()"></div>            
+        </li>
+    </ul>
+    <div class="c-properties__header">Table Column Visibility</div>
     <ul class="c-properties__section">
         <li class="c-properties__row" v-for="(title, key) in headers">
             <div class="c-properties__label" title="Show or Hide Column"><label :for="key + 'ColumnControl'">{{title}}</label></div>
@@ -43,6 +50,10 @@ export default {
         },
         toggleEdit(isEditing) {
             this.isEditing = isEditing;
+        },
+        toggleAutosize() {
+            this.configuration.autosize = !this.configuration.autosize;
+            this.tableConfiguration.updateConfiguration(this.configuration);
         }
     },
     mounted() {

src/plugins/telemetryTable/components/table-row.vue

@@ -21,11 +21,11 @@
  *****************************************************************************/
 <template>
 <tr :style="{ top: rowTop }" :class="rowLimitClass">
-    <template v-for="(title, key) in headers">
-    <td :style="{ width: columnWidths[key] + 'px', 'max-width': columnWidths[key] + 'px'}"
+    <td v-for="(title, key) in headers" 
+        :key="key"
+        :style="columnWidths[key] === undefined ? {} : { width: columnWidths[key] + 'px', 'max-width': columnWidths[key] + 'px'}"
         :title="formattedRow[key]"
         :class="cellLimitClasses[key]">{{formattedRow[key]}}</td>
-    </template>
 </tr>
 </template>
 

src/plugins/telemetryTable/components/table.vue

@@ -31,46 +31,51 @@
     </div>
     <div v-if="isDropTargetActive" class="c-telemetry-table__drop-target" :style="dropTargetStyle"></div>
     <!-- Headers table -->
-    <div class="c-telemetry-table__headers-w js-table__headers-w" ref="headersTable">
-        <table class="c-table__headers c-telemetry-table__headers"
-               :style="{ 'max-width': totalWidth + 'px'}">
+    <div class="c-telemetry-table__headers-w js-table__headers-w" ref="headersTable" :style="{ 'max-width': widthWithScroll}">
+        <table class="c-table__headers c-telemetry-table__headers">
             <thead>
                 <tr>
-                    <template v-for="(title, key, headerIndex) in headers">
                     <table-column-header 
+                        v-for="(title, key, headerIndex) in headers"
                         :key="key"
                         :headerKey="key"
                         :headerIndex="headerIndex"
                         @sort="sortBy(key)"
                         @resizeColumn="resizeColumn"
-                        :columnWidths="columnWidths"
+                        @dropTargetOffsetChanged="setDropTargetOffset"
+                        @dropTargetActive="dropTargetActive"
+                        @reorderColumn="reorderColumn"
+                        @resizeColumnEnd="updateConfiguredColumnWidths"
+                        :columnWidth="columnWidths[key]"
                         :sortOptions="sortOptions"
                         >{{title}}</table-column-header>
-                    </template>
                 </tr>
                 <tr>
-                    <template v-for="(title, key, headerIndex) in headers">
-                    <table-column-header 
+                    <table-column-header
+                        v-for="(title, key, headerIndex) in headers"
                         :key="key"
                         :headerKey="key"
                         :headerIndex="headerIndex"
                         @resizeColumn="resizeColumn"
-                        :columnWidths="columnWidths">
+                        @dropTargetOffsetChanged="setDropTargetOffset"
+                        @dropTargetActive="dropTargetActive"
+                        @reorderColumn="reorderColumn"
+                        @resizeColumnEnd="updateConfiguredColumnWidths"
+                        :columnWidth="columnWidths[key]">
                         <search class="c-table__search"
                             v-model="filters[key]"
                             v-on:input="filterChanged(key)"
                             v-on:clear="clearFilter(key)" />
                     </table-column-header>
-                    </template>
                 </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-table__body-w c-telemetry-table__body-w js-telemetry-table__body-w" @scroll="scroll" :style="{ 'max-width': widthWithScroll}">
         <div class="c-telemetry-table__scroll-forcer" :style="{ width: totalWidth + 'px' }"></div>
         <table class="c-table__body c-telemetry-table__body"
-               :style="{ height: totalHeight + 'px', 'max-width': totalWidth + 'px'}">
+               :style="{ height: totalHeight + 'px'}">
             <tbody>
                 <telemetry-table-row v-for="(row, rowIndex) in visibleRows"
                     :headers="headers"
@@ -84,11 +89,10 @@
         </table>
     </div>
     <!-- Sizing table -->
-    <table class="c-telemetry-table__sizing js-telemetry-table__sizing"
-           :style="{width: calcTableWidth}">
+    <table class="c-telemetry-table__sizing js-telemetry-table__sizing" :style="sizingTableWidth">
         <tr>
             <template v-for="(title, key) in headers">
-            <th :key="key">{{title}}</th>
+            <th :key="key" :style="{ width: configuredColumnWidths[key] + 'px', 'max-width': configuredColumnWidths[key] + 'px'}">{{title}}</th>
             </template>
         </tr>
         <telemetry-table-row v-for="(sizingRowData, objectKeyString) in sizingRows"
@@ -107,7 +111,6 @@
     .c-telemetry-table__drop-target {
         position: absolute;
         width: 2px;
-        top: 27px;
         background-color: $editColor;
         box-shadow: rgba($editColor, 0.5) 0 0 10px;
         z-index: 1;
@@ -121,6 +124,7 @@
         th, td {
             display: block;
             flex: 1 0 auto;
+            width: 100px;
             vertical-align: middle; // This is crucial to hiding f**king 4px height injected by browser by default
         }
 
@@ -225,6 +229,7 @@ const RESIZE_POLL_INTERVAL = 200;
 const AUTO_SCROLL_TRIGGER_HEIGHT = 20;
 const RESIZE_HOT_ZONE = 10;
 const MOVE_TRIGGER_WAIT = 500;
+const VERTICAL_SCROLL_WIDTH = 30;
 
 export default {
     components: {
@@ -233,13 +238,14 @@ export default {
         search
     },
     inject: ['table', 'openmct', 'csvExporter'],
-    props: ['configuration'],
     data() {
+        let configuration = this.table.configuration.getConfiguration();
+
         return {
             headers: {},
             visibleRows: [],
             columnWidths: {},
-            configuredColumnWidths: {},
+            configuredColumnWidths: configuration.columnWidths,
             sizingRows: {},
             rowHeight: ROW_HEIGHT,
             scrollOffset: 0,
@@ -253,20 +259,43 @@ export default {
             scrollable: undefined,
             tableEl: undefined,
             headersHolderEl: undefined,
-            calcTableWidth: '100%',
             processingScroll: false,
             updatingView: false,
             dropOffsetLeft: undefined,
             isDropTargetActive: false,
-            lastHeaderKey: undefined
+            isAutosizeEnabled: configuration.autosize,
+            scrollW: 0
         }
     },
     computed: {
         dropTargetStyle() {
             return {
-                height: this.totalHeight + 47 + 'px',
+                top: this.$refs.headersTable.offsetTop + 'px',
+                height: this.totalHeight + this.$refs.headersTable.offsetHeight + 'px',
                 left: this.dropOffsetLeft && this.dropOffsetLeft + 'px'
             }
+        },
+        lastHeaderKey() {
+            let headerKeys = Object.keys(this.headers);
+            return headerKeys[headerKeys.length - 1];
+        },
+        widthWithScroll() {
+            return this.totalWidth + this.scrollW + "px";
+        },
+        sizingTableWidth() {
+            let style;
+
+            if (this.isAutosizeEnabled) {
+                style = { width: "calc(100% - " + this.scrollW + "px)" };
+            } else {
+                let totalWidth = Object.keys(this.headers).reduce((total, key) => {
+                    total += this.configuredColumnWidths[key];
+                    return total;
+                }, 0);
+
+                style = {width: totalWidth + 'px'};
+            }
+            return style;
         }
     },
     methods: {
@@ -309,34 +338,30 @@ export default {
             return Math.floor(bottomScroll / this.rowHeight);
         },
         updateHeaders() {
-            let headers = this.table.configuration.getVisibleHeaders();
-            this.headers = headers;
-            let headerKeys = Object.keys(this.headers);
-            this.lastHeaderKey = headerKeys[headerKeys.length - 1];
-            this.$nextTick().then(this.calculateColumnWidths);
+            this.headers = this.table.configuration.getVisibleHeaders();
         },
-        setSizingTableWidth() {
-            let scrollW = this.scrollable.offsetWidth - this.scrollable.clientWidth;
-
-            if (scrollW && scrollW > 0) {
-                this.calcTableWidth = 'calc(100% - ' + scrollW + 'px)';
-            }
+        calculateScrollbarWidth() {
+            // Scroll width seems to vary by a pixel for reasons that are not clear.
+            this.scrollW = (this.scrollable.offsetWidth - this.scrollable.clientWidth) + 1;
         },
         calculateColumnWidths() {
             let columnWidths = {};
             let totalWidth = 0;
             let sizingRowEl = this.sizingTable.children[0];
             let sizingCells = Array.from(sizingRowEl.children);
+            let headerKeys = Object.keys(this.headers);
 
-            Object.keys(this.headers).forEach((headerKey, headerIndex)=>{
+            headerKeys.forEach((headerKey, headerIndex)=>{
                 let cell = sizingCells[headerIndex];
                 let columnWidth = cell.offsetWidth;
                 columnWidths[headerKey] = columnWidth;
                 totalWidth += columnWidth;
-            })
+            });
 
             this.columnWidths = columnWidths;
             this.totalWidth = totalWidth;
+
+            this.calculateScrollbarWidth();
         },
         sortBy(columnKey) {
             // If sorting by the same column, flip the sort direction.
@@ -433,48 +458,44 @@ export default {
             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.isAutosizeEnabled = configuration.autosize;
+            
             this.updateHeaders();
+            this.$nextTick().then(this.calculateColumnWidths);
         },
         addObject() {
             this.updateHeaders();
+            this.$nextTick().then(this.calculateColumnWidths);
         },
         removeObject(objectIdentifier) {
             let objectKeyString = this.openmct.objects.makeKeyString(objectIdentifier);
             delete this.sizingRows[objectKeyString];
             this.updateHeaders();
+            this.$nextTick().then(this.calculateColumnWidths);
         },
         resizeColumn(key, newWidth) {
             let delta = newWidth - this.columnWidths[key];
             this.columnWidths[key] = newWidth;
-            this.$set(this.configuredColumnWidths, key, newWidth);
+            this.totalWidth += delta;
+        },
+        updateConfiguredColumnWidths() {
+            this.configuredColumnWidths = this.columnWidths;
 
-            this.columnWidths[this.lastHeaderKey] = this.columnWidths[this.lastHeaderKey] - delta;
+            let configuration = this.table.configuration.getConfiguration();
+            configuration.autosize = false;
+            configuration.columnWidths = this.configuredColumnWidths;
+
+            this.table.configuration.updateConfiguration(configuration);
         },
         setDropTargetOffset(dropOffsetLeft) {
-            this.dropOffsetLeft = dropOffsetLeft;
+            this.dropOffsetLeft = dropOffsetLeft - this.scrollable.scrollLeft;
         },
-        moveColumn(from, to) {
+        reorderColumn(from, to) {
             let newHeaderKeys = Object.keys(this.headers);
             let moveFromKey = newHeaderKeys[from];
-            let moveFromWidth = columnWidths[from];
 
             if (to < from) {
                 newHeaderKeys.splice(from, 1);
@@ -489,23 +510,35 @@ export default {
                 return headers;
             }, {});
 
+            this.table.configuration.setColumnOrder(Object.keys(newHeaders));
+
             this.headers = newHeaders;
             this.dropOffsetLeft = undefined;
-            this.lastHeaderKey = newHeaderKeys[newHeaderKeys.length - 1];
 
             this.dropTargetActive(false);
         },
         dropTargetActive(isActive) {
             this.isDropTargetActive = isActive;
-        }
+        },
+        pollForResize() {
+            let el = this.$el;
+            let width = el.clientWidth;
+            let height = el.clientHeight;
+
+            this.resizePollHandle = setInterval(() => {
+                if ((el.clientWidth !== width || el.clientHeight !== height) && this.isAutosizeEnabled) {
+                    this.calculateTableSize();
+                    width = el.clientWidth;
+                    height = el.clientHeight;
+                }
+            }, RESIZE_POLL_INTERVAL);
+        },
+
     },
     created() {
         this.filterChanged = _.debounce(this.filterChanged, 500);
     },
     mounted() {
-        this.$on('drop-target-offset-changed', this.setDropTargetOffset);
-        this.$on('drop-target-active', this.dropTargetActive);
-        this.$on('move-column', this.moveColumn);
         
         this.table.on('object-added', this.addObject);
         this.table.on('object-removed', this.removeObject);
@@ -526,6 +559,7 @@ export default {
 
         this.calculateTableSize();
         this.pollForResize();
+        this.calculateScrollbarWidth();
 
         this.table.initialize();
     },

src/plugins/telemetryTable/plugin.js

@@ -20,20 +20,27 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
- define([
-     './TelemetryTableViewProvider',
-     './TableConfigurationViewProvider',
-     './TelemetryTableType'
-    ], function (
-        TelemetryTableViewProvider,
-        TableConfigurationViewProvider,
-        TelemetryTableType
-    ) {
+define([
+    './TelemetryTableViewProvider',
+    './TableConfigurationViewProvider',
+    './TelemetryTableType'
+], function (
+    TelemetryTableViewProvider,
+    TableConfigurationViewProvider,
+    TelemetryTableType
+) {
     return function plugin() {
         return function install(openmct) {
             openmct.objectViews.addProvider(new TelemetryTableViewProvider(openmct));
             openmct.inspectorViews.addProvider(new TableConfigurationViewProvider(openmct));
-            openmct.types.addType('table', TelemetryTableType());
+            openmct.types.addType('table', TelemetryTableType);
+            openmct.composition.addPolicy((parent, child) => {
+                if (parent.type === 'table') {
+                    return child.hasOwnProperty('telemetry');
+                } else {
+                    return true;
+                }
+            });
         };
     };
- });
+});

src/selection/ContextManager.js

@@ -1,78 +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(['zepto'], function ($) {
-    /**
-     * @typedef Context
-     * @property {*} item
-     * @property {HTMLElement} element
-     * @property {Context} parent the containing context (may be undefined)
-     * @memberof module:openmct
-     */
-
-
-    function ContextManager() {
-        this.counter = 0;
-        this.contexts = {};
-    }
-
-    ContextManager.prototype.nextId = function () {
-        this.counter += 1;
-        return "context-" + this.counter;
-    };
-
-    ContextManager.prototype.context = function (item, htmlElement) {
-        var $element = $(htmlElement);
-        var id = $element.attr('data-context') || this.nextId();
-
-        $element.attr('data-context', id);
-
-        if (this.contexts[id] && this.contexts[id].item !== item) {
-            this.release(htmlElement);
-        }
-
-        if (!this.contexts[id]) {
-            var $parent = $element.closest('[data-context]');
-            var parentId = $parent.attr('data-context');
-            var parentContext = parentId ? this.contexts[parentId] : undefined;
-            this.contexts[id] = {
-                item: item,
-                element: htmlElement,
-                parent: parentContext
-            };
-        }
-
-        return this.contexts[id];
-    };
-
-    ContextManager.prototype.release = function (htmlElement) {
-        var $element = $(htmlElement);
-        var id = $element.attr('data-context');
-
-        if (id) {
-            delete this.contexts[id];
-            $element.removeAttr('data-context');
-        }
-    };
-
-    return ContextManager;
-});

src/styles-new/_constants-espresso.scss

@@ -88,26 +88,50 @@ $colorTimeSubtle: darken($colorTime, 20%);
 $colorTOI: $colorBodyFg; // was $timeControllerToiLineColor
 $colorTOIHov: $colorTime; // was $timeControllerToiLineColorHov
 
-// Edit Colors
+/************************************************** EDITING */
+// Base Colors
+$dlSpread: 20%;
 $editColor: #00c7c3;
-$editColorFg: $colorBodyFg;
+$editColorBgBase: darken($editColor, $dlSpread);
+$editColorBg: rgba($editColorBgBase, 0.2);
+$editColorFg: lighten($editColor, $dlSpread);
+$editColorHov: lighten($editColor, 20%);
+// Canvas
+$editCanvasColorBg: $editColorBg; //#002524;
+$editCanvasColorGrid: rgba($editColorBgBase, 0.4); //lighten($editCanvasColorBg, 3%);
+// Selectable
+$editSelectableColor: #006563;
+$editSelectableColorFg: lighten($editSelectableColor, 20%);
+$editSelectableColorHov: lighten($editSelectableColor, 10%);
+// Selectable selected
+$editSelectableColorSelected: $editSelectableColorHov;
+$editSelectableColorSelectedFg: lighten($editSelectableColorSelected, 30%);
+$editSelectableColorFg: darken($editSelectableColor, 40%);
+$editSelectableBorder: 1px dotted $editSelectableColor;
+$editSelectableBorderHov: 1px dotted $editColor;
+$editSelectableBorderSelected: 1px solid $editColor;
+$editMoveableSelectedShdw: rgba($editColor, 0.5) 0 0 10px;
+$editBorderDrilledIn: 1px dashed #9971ff;
+$colorGridLines: rgba($editColor, 0.2);
+
+/************************************************** BROWSING */
 $browseBorderSelectableHov: 1px dotted rgba($colorBodyFg, 0.2);
 $browseShdwSelectableHov: rgba($colorBodyFg, 0.2) 0 0 3px;
 $browseBorderSelected: 1px solid rgba($colorBodyFg, 0.6);
-$editBorderSelectable: 1px dotted rgba($editColor, 1);
-$editBorderSelectableHov: 1px dashed rgba($editColor, 1);
-$editBorderSelected: 1px solid $editColor;
-$editBorderDrilledIn: 1px dashed #ff4d9a;
-$colorGridLines: rgba($editColor, 0.2);
 
 // Icons
 $colorIconAlias: #4af6f3;
 $colorIconAliasForKeyFilter: #aaa;
 
+// Holders
+$colorTabsHolderBg: rgba(black, 0.2);
+
 // Buttons and Controls
-$colorBtnBg: lighten($colorBodyBg, 10%); // !
-$colorBtnBgHov: lighten($colorBtnBg, 10%); // !
-$colorBtnFg: lighten($colorBodyFg, 10%); // !
+$colorBtnBg: lighten($colorBodyBg, 10%);
+$colorBtnBgHov: lighten($colorBtnBg, 10%);
+$colorBtnFg: lighten($colorBodyFg, 10%);
+$colorBtnReverseFg: lighten($colorBtnFg, 10%);
+$colorBtnReverseBg: lighten($colorBtnBg, 10%);
 $colorBtnFgHov: $colorBtnFg;
 $colorBtnMajorBg: $colorKey;
 $colorBtnMajorBgHov: $colorKeyHov;
@@ -119,6 +143,10 @@ $colorBtnCautionFg: $colorBtnFg;
 $colorClickIcon: $colorKey;
 $colorClickIconBgHov: rgba($colorKey, 0.6);
 $colorClickIconFgHov: $colorKeyHov;
+$colorDropHint: $colorKey;
+$colorDropHintBg: darken($colorDropHint, 10%);
+$colorDropHintBgHov: $colorDropHint;
+$colorDropHintFg: lighten($colorDropHint, 40%);
 
 // Menus
 $colorMenuBg: lighten($colorBodyBg, 15%);

src/styles-new/_constants-snow.scss

@@ -88,26 +88,50 @@ $colorTimeSubtle: lighten($colorTime, 20%);
 $colorTOI: $colorBodyFg; // was $timeControllerToiLineColor
 $colorTOIHov: $colorTime; // was $timeControllerToiLineColorHov
 
-// Edit Colors
+/************************************************** EDITING */
+// Base Colors
+$dlSpread: 20%;
 $editColor: #00c7c3;
-$editColorFg: $colorBodyFg;
+$editColorBgBase: darken($editColor, $dlSpread);
+$editColorBg: darken($editColor, $dlSpread);
+$editColorFg: lighten($editColor, $dlSpread);
+$editColorHov: lighten($editColor, 20%);
+// Canvas
+$editCanvasColorBg: #e6ffff;
+$editCanvasColorGrid: darken($editCanvasColorBg, 10%);
+// Selectable
+$editSelectableColor: #acdad6;
+$editSelectableColorFg: darken($editSelectableColor, 20%);
+$editSelectableColorHov: darken($editSelectableColor, 10%);
+// Selectable selected
+$editSelectableColorSelected: $editColor; //$editSelectableColorHov;
+$editSelectableColorSelectedFg: lighten($editSelectableColorSelected, 50%);
+$editSelectableColorFg: darken($editSelectableColor, 40%);
+$editSelectableBorder: 1px dotted $editSelectableColor;
+$editSelectableBorderHov: 1px dotted $editColor;
+$editSelectableBorderSelected: 1px solid $editColor;
+$editMoveableSelectedShdw: rgba($editColor, 0.5) 0 0 10px;
+$editBorderDrilledIn: 1px dashed #9971ff;
+$colorGridLines: rgba($editColor, 0.2);
+
+/************************************************** BROWSING */
 $browseBorderSelectableHov: 1px dotted rgba($colorBodyFg, 0.2);
 $browseShdwSelectableHov: rgba($colorBodyFg, 0.2) 0 0 3px;
 $browseBorderSelected: 1px solid rgba($colorBodyFg, 0.6);
-$editBorderSelectable: 1px dotted rgba($editColor, 1);
-$editBorderSelectableHov: 1px dashed rgba($editColor, 1);
-$editBorderSelected: 1px solid $editColor;
-$editBorderDrilledIn: 1px dashed #ff4d9a;
-$colorGridLines: rgba($editColor, 0.2);
 
 // Icons
 $colorIconAlias: #4af6f3;
 $colorIconAliasForKeyFilter: #aaa;
 
+// Holders
+$colorTabsHolderBg: rgba($colorBodyFg, 0.2);
+
 // Buttons and Controls
-$colorBtnBg: #aaaaaa;
+$colorBtnBg: #aaa;
 $colorBtnBgHov: darken($colorBtnBg, 10%);
 $colorBtnFg: #fff;
+$colorBtnReverseFg: $colorBodyBg;
+$colorBtnReverseBg: $colorBodyFg;
 $colorBtnFgHov: $colorBtnFg;
 $colorBtnMajorBg: $colorKey;
 $colorBtnMajorBgHov: $colorKeyHov;
@@ -119,6 +143,10 @@ $colorBtnCautionFg: $colorBtnFg;
 $colorClickIcon: $colorKey;
 $colorClickIconBgHov: rgba($colorKey, 0.2);
 $colorClickIconFgHov: $colorKeyHov;
+$colorDropHint: $colorKey;
+$colorDropHintBg: lighten($colorDropHint, 30%);
+$colorDropHintBgHov: lighten($colorDropHint, 40%);
+$colorDropHintFg: lighten($colorDropHint, 0);
 
 // Menus
 $colorMenuBg: lighten($colorBodyBg, 10%);

src/styles-new/_constants.scss

@@ -69,118 +69,126 @@ $progressBarMinH: 6px;
 /************************** 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-up: '\e902';
+$glyph-icon-arrow-double-up: '\e903';
+$glyph-icon-arrow-tall-up: '\e904';
+$glyph-icon-arrow-right: '\e905';
+$glyph-icon-arrow-right-equilateral: '\e906';
+$glyph-icon-arrow-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';
+$glyph-icon-arrow-tall-down: '\e909';
+$glyph-icon-arrow-left: '\e90a';
+$glyph-icon-asterisk: '\e90b';
+$glyph-icon-bell: '\e90c';
+$glyph-icon-box-round-corners: '\e90d';
+$glyph-icon-box-with-arrow: '\e90e';
+$glyph-icon-check: '\e90f';
+$glyph-icon-connectivity: '\e910';
+$glyph-icon-database-in-brackets: '\e911';
+$glyph-icon-eye-open: '\e912';
+$glyph-icon-gear: '\e913';
+$glyph-icon-hourglass: '\e914';
+$glyph-icon-info: '\e915';
+$glyph-icon-link: '\e916';
+$glyph-icon-lock: '\e917';
+$glyph-icon-minus: '\e918';
+$glyph-icon-people: '\e919';
+$glyph-icon-person: '\e91a';
+$glyph-icon-plus: '\e91b';
+$glyph-icon-plus-in-rect: '\e91c';
+$glyph-icon-trash: '\e91d';
+$glyph-icon-x: '\e91e';
+$glyph-icon-brackets: '\e91f';
+$glyph-icon-crosshair: '\e920';
+$glyph-icon-grippy: '\e921';
+$glyph-icon-grid: '\e922';
+$glyph-icon-grippy-ew: '\e923';
+$glyph-icon-columns: '\e924';
+$glyph-icon-rows: '\e925';
+$glyph-icon-arrows-right-left: '\ea00';
+$glyph-icon-arrows-up-down: '\ea01';
+$glyph-icon-bullet: '\ea02';
+$glyph-icon-calendar: '\ea03';
+$glyph-icon-chain-links: '\ea04';
+$glyph-icon-download: '\ea05';
+$glyph-icon-duplicate: '\ea06';
+$glyph-icon-folder-new: '\ea07';
+$glyph-icon-fullscreen-collapse: '\ea08';
+$glyph-icon-fullscreen-expand: '\ea09';
+$glyph-icon-layers: '\ea0a';
+$glyph-icon-line-horz: '\ea0b';
+$glyph-icon-magnify: '\ea0c';
+$glyph-icon-magnify-in: '\ea0d';
+$glyph-icon-magnify-out: '\ea0e';
+$glyph-icon-menu-hamburger: '\ea0f';
+$glyph-icon-move: '\ea10';
+$glyph-icon-new-window: '\ea11';
+$glyph-icon-paint-bucket: '\ea12';
+$glyph-icon-pencil: '\ea13';
+$glyph-icon-pencil-in-brackets: '\ea14';
+$glyph-icon-play: '\ea15';
+$glyph-icon-pause: '\ea16';
+$glyph-icon-plot-resource: '\ea17';
+$glyph-icon-pointer-left: '\ea18';
+$glyph-icon-pointer-right: '\ea19';
+$glyph-icon-refresh: '\ea1a';
+$glyph-icon-save: '\ea1b';
+$glyph-icon-save-as: '\ea1c';
+$glyph-icon-sine: '\ea1d';
+$glyph-icon-font: '\ea1e';
+$glyph-icon-thumbs-strip: '\ea1f';
+$glyph-icon-two-parts-both: '\ea20';
+$glyph-icon-two-parts-one-only: '\ea21';
+$glyph-icon-resync: '\ea22';
+$glyph-icon-reset: '\ea23';
+$glyph-icon-x-in-circle: '\ea24';
+$glyph-icon-brightness: '\ea25';
+$glyph-icon-contrast: '\ea26';
+$glyph-icon-expand: '\ea27';
+$glyph-icon-list-view: '\ea28';
+$glyph-icon-grid-snap-to: '\ea29';
+$glyph-icon-grid-snap-no: '\ea2a';
+$glyph-icon-frame-show: '\ea2b';
+$glyph-icon-frame-hide: '\ea2c';
+$glyph-icon-import: '\ea2d';
+$glyph-icon-export: '\ea2e';
+$glyph-icon-font-size: '\ea2f';
+$glyph-icon-activity: '\eb00';
+$glyph-icon-activity-mode: '\eb01';
+$glyph-icon-autoflow-tabular: '\eb02';
+$glyph-icon-clock: '\eb03';
+$glyph-icon-database: '\eb04';
+$glyph-icon-database-query: '\eb05';
+$glyph-icon-dataset: '\eb06';
+$glyph-icon-datatable: '\eb07';
+$glyph-icon-dictionary: '\eb08';
+$glyph-icon-folder: '\eb09';
+$glyph-icon-image: '\eb0a';
+$glyph-icon-layout: '\eb0b';
+$glyph-icon-object: '\eb0c';
+$glyph-icon-object-unknown: '\eb0d';
+$glyph-icon-packet: '\eb0e';
+$glyph-icon-page: '\eb0f';
+$glyph-icon-plot-overlay: '\eb10';
+$glyph-icon-plot-stacked: '\eb11';
+$glyph-icon-session: '\eb12';
+$glyph-icon-tabular: '\eb13';
+$glyph-icon-tabular-lad: '\eb14';
+$glyph-icon-tabular-lad-set: '\eb15';
+$glyph-icon-tabular-realtime: '\eb16';
+$glyph-icon-tabular-scrolling: '\eb17';
+$glyph-icon-telemetry: '\eb18';
+$glyph-icon-timeline: '\eb19';
+$glyph-icon-timer: '\eb1a';
+$glyph-icon-topic: '\eb1b';
+$glyph-icon-box-with-dashed-lines: '\eb1c';
+$glyph-icon-summary-widget: '\eb1d';
+$glyph-icon-notebook: '\eb1e';
+$glyph-icon-tabs-view: '\eb1f';
+$glyph-icon-flexible-layout: '\eb20';
+$glyph-icon-generator-telemetry: '\eb21';
+$glyph-icon-generator-events: '\eb22';
+$glyph-icon-gauge: '\eb23';
 
 /************************** GLYPHS AS DATA URI */
 // Only objects have been converted, for use in Create menu and folder views
@@ -191,6 +199,9 @@ $bg-icon-info: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3
 $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='%23000000' 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='%23000000' 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='%23000000' 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-plus: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M480,192H320V32A32.1,32.1,0,0,0,288,0H224a32.1,32.1,0,0,0-32,32V192H32A32.1,32.1,0,0,0,0,224v64a32.1,32.1,0,0,0,32,32H192V480a32.1,32.1,0,0,0,32,32h64a32.1,32.1,0,0,0,32-32V320H480a32.1,32.1,0,0,0,32-32V224A32.1,32.1,0,0,0,480,192Z' transform='translate(0)'/%3e%3c/svg%3e");
+$bg-icon-grippy-ew: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath d='M416 0v512h-64V0zM288 0v512h-64V0zM160 0v512H96V0z'/%3e%3c/svg%3e");
+$bg-icon-chain-links: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath d='M479.2 32.8C457.3 10.9 428.7 0 400 0c-28.7 0-57.3 10.9-79.2 32.8l-64 64c-37 37-42.7 93.5-17 136.5l-6.4 6.4C215.7 229.3 195.9 224 176 224c-28.7 0-57.3 10.9-79.2 32.8l-64 64c-43.7 43.7-43.7 114.7 0 158.4C54.7 501.1 83.3 512 112 512c28.7 0 57.3-10.9 79.2-32.8l64-64c37-37 42.7-93.5 17-136.5l6.4-6.4c17.6 10.5 37.5 15.8 57.3 15.8 28.7 0 57.3-10.9 79.2-32.8l64-64c43.8-43.8 43.8-114.8.1-158.5zM209.9 369.9l-64 64c-9 9.1-21.1 14.1-33.9 14.1-12.8 0-24.9-5-33.9-14.1-18.7-18.7-18.7-49.2 0-67.9l64-64c9.1-9.1 21.1-14.1 33.9-14.1 2.8 0 5.6.3 8.4.7l-27.8 27.8c-5.2 5.2-8.1 12.1-8.1 19.4s2.9 14.3 8.1 19.4c5.2 5.2 12.1 8.1 19.4 8.1s14.3-2.9 19.4-8.1l27.8-27.8c2.7 15.2-1.8 31.1-13.3 42.5zm224-224l-64 64c-9 9.1-21.1 14.1-33.9 14.1-2.8 0-5.6-.3-8.4-.7l27.8-27.8c5.2-5.2 8.1-12.1 8.1-19.4s-2.9-14.3-8.1-19.4c-5.2-5.2-12.1-8.1-19.4-8.1s-14.3 2.9-19.4 8.1l-27.8 27.8c-2.6-14.9 1.8-30.8 13.3-42.3l64-64C375.1 69 387.2 64 400 64s24.9 5 33.9 14.1c18.8 18.7 18.8 49.1 0 67.8z'/%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='%23000000' d='M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256 256-114.6 256-256S397.4 0 256 0zm135 345c-6.4 11.1-18.3 18-31.2 18-6.3 0-12.5-1.7-18-4.8l-110.9-64-.1-.1c-.4-.2-.8-.5-1.2-.7l-.4-.3-.9-.6-.6-.5-.6-.5-.9-.7-.3-.3c-.4-.3-.7-.6-1.1-.9-2.5-2.3-4.7-5-6.5-7.9-.1-.2-.3-.5-.4-.7s-.3-.5-.4-.7c-1.6-3-2.9-6.2-3.6-9.6v-.1c-.1-.5-.2-.9-.3-1.4 0-.1 0-.3-.1-.4-.1-.3-.1-.7-.1-1.1s-.1-.5-.1-.8 0-.5-.1-.8-.1-.8-.1-1.1v-.5-1.4V81c0-19.9 16.1-36 36-36s36 16.1 36 36v161.2l92.9 53.6c17.1 10 22.9 32 13 49.2z'/%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='%23000000' 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='%23000000' 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='%23000000' 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='%23000000' 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");
@@ -218,4 +229,9 @@ $bg-icon-timer: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w
 $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='%23000000' 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='%23000000' 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='%23000000' 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='%23000000' 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='%23000000' 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='%23000000' 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");
+$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='%23000000' 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");
+$bg-icon-tabs-view: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M0 448a64.2 64.2 0 0 0 64 64h384a64.2 64.2 0 0 0 64-64V144H256L230.9 31.2C227.1 14.1 209.6 0 192 0H64A64.2 64.2 0 0 0 0 64zm416-64H96V256h320z'/%3e%3cpath d='M240 0c17.6 0 35.1 14.1 38.9 31.2l18 80.8H512V64a64.2 64.2 0 0 0-64-64z'/%3e%3c/svg%3e");
+$bg-icon-flexible-layout: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath d='M0 416c0 52.8 43.2 96 96 96h32V224H0zM0 96v64h128V0H96C43.2 0 0 43.2 0 96zM384 512h32c52.8 0 96-43.2 96-96v-64H384zM192 0h128v512H192zM416 0h-32v288h128V96c0-52.8-43.2-96-96-96z'/%3e%3c/svg%3e");
+$bg-icon-generator-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='%23000000' d='M76 236.9c5.4-2.1 20.4-17.8 34.9-54.7C126.8 141.5 154.5 93 196 93c19.7 0 38 10.9 54.6 32.5 14 18.2 24.4 40.8 30.5 56.7 14.5 36.9 29.5 52.6 34.9 54.7 5.4-2.1 20.4-17.8 34.9-54.7S388 104.5 421.7 95A192 192 0 0 0 256 0C150 0 64 86 64 192a197.2 197.2 0 0 0 3.7 37.9c3.6 4 6.5 6.3 8.3 7zM442.3 238.5A192.9 192.9 0 0 0 448 192a197.2 197.2 0 0 0-3.7-37.9c-3.6-4-6.5-6.3-8.3-7-5.4 2.1-20.4 17.8-34.9 54.7-10.9 27.9-27.3 59.5-50 76.6z'/%3e%3cpath d='M256 320l67.5-29.5a60.3 60.3 0 0 1-7.5.5c-19.7 0-38-10.9-54.6-32.5-14-18.2-24.4-40.8-30.5-56.7-14.5-36.9-29.5-52.6-34.9-54.7-5.4 2.1-20.4 17.8-34.9 54.7-8.2 21.1-19.6 44.2-34.4 61.6z'/%3e%3cpath d='M512 240L256 352 0 240v160l256 112 256-112V240z'/%3e%3c/svg%3e");
+$bg-icon-generator-events: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M160 96h192v32H160zM160 224h192v32H160zM160 160h160v32H160z'/%3e%3cpath d='M128 64.1h256V264l64-28V64a64.2 64.2 0 0 0-64-64H128a64.2 64.2 0 0 0-64 64v172l64 28zM329.1 288H182.9l73.1 32 73.1-32z'/%3e%3cpath d='M256 352L0 240v160l256 112 256-112V240L256 352z'/%3e%3c/svg%3e");
+$bg-icon-gauge: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath d='M256 0C114.6 0 0 114.6 0 256c0 113.2 73.5 209.2 175.3 243L304 256v251.5C422.4 485 512 381 512 256 512 114.6 397.4 0 256 0zm121.4 263.9a159.8 159.8 0 0 0-242.8 0l-73-62.5c4.3-5 8.7-9.8 13.4-14.4a255.9 255.9 0 0 1 362 0c4.7 4.6 9.1 9.4 13.4 14.4z'/%3e%3c/svg%3e");

src/styles-new/_controls.scss

@@ -32,13 +32,6 @@ button {
 }
 
 .c-button--menu {
-    $m: $interiorMargin;
-
-    &:before,
-    > * {
-        margin-right: $m;
-    }
-
     &:after {
         content: $glyph-icon-arrow-down;
         font-family: symbolsfont;
@@ -46,6 +39,10 @@ button {
     }
 }
 
+.c-compact-button {
+    @include cCompactButtons($bg: $colorBtnBg, $fg: $colorBtnFg, $bgHov: $colorBtnBgHov);
+}
+
 /********* Icon Buttons */
 .c-click-icon {
     @include cClickIcon();
@@ -141,7 +138,8 @@ input, textarea {
 
 input[type=text],
 input[type=search],
-input[type=number] {
+input[type=number],
+textarea {
     @include reactive-input();
     padding: $inputTextP;
     &.numeric {
@@ -388,8 +386,24 @@ input[type=number]::-webkit-outer-spin-button {
     align-items: stretch;
 }
 
+@mixin cToolbarSeparator() {
+    $m: $interiorMargin;
+    $b: 1px;
+    display: block;
+    width: $m + $b; // Allow for border
+    border-right: $b solid $colorInteriorBorder;
+    margin-right: $m;
+}
+
 .c-toolbar {
-    height: 24px; // Need to standardize the height
+    $p: $interiorMargin;
+    border-top: 1px solid $colorInteriorBorder;
+    height: $p + 24px; // Need to standardize the height
+    padding-top: $p;
+
+    &__separator {
+        @include cToolbarSeparator();
+    }
 
     .c-click-icon {
         @include cControl();
@@ -446,14 +460,9 @@ input[type=number]::-webkit-outer-spin-button {
     }
 
     + .c-button-set {
-        $m: $interiorMargin;
-        $b: 1px;
         &:before {
+            @include cToolbarSeparator();
             content: '';
-            display: block;
-            width: $m + $b; // Allow for border
-            border-right: $b solid $colorInteriorBorder;
-            margin-right: $m;
         }
     }
 
@@ -487,3 +496,52 @@ input[type=number]::-webkit-outer-spin-button {
     @include cControl();
     > * + * { margin-left: $interiorMargin; }
 }
+
+/***************************************************** DRAG AND DROP */
+.c-drop-hint {
+    // Used in Tabs View, Flexible Grid Layouts
+    @include abs();
+    background-color: $colorDropHintBg;
+    color: $colorDropHintFg;
+    border-radius: $basicCr;
+    border: 1px dashed $colorDropHintFg;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    transition: $transOut;
+    z-index: 50;
+
+    &:not(.c-drop-hint--always-show) {
+        opacity: 0; // Must use this (rather than display: none) to enable transition effects
+        pointer-events: none;
+    }
+
+    &:before {
+        $h: 80%;
+        $mh: 25px;
+        background: $bg-icon-plus;
+        background-size: contain;
+        background-position: center center;
+        background-repeat: no-repeat;
+        content: '';
+        display: block;
+        filter: $colorKeyFilterHov;
+        height: $h; width: $h;
+        max-height: $mh; max-width: $mh;
+    }
+
+    .is-dragging &,
+    &.is-dragging {
+        pointer-events: inherit;
+        transition: $transIn;
+        opacity: 0.8;
+    }
+
+    .is-mouse-over &,
+    &.is-mouse-over {
+        transition: $transIn;
+        background-color: $colorDropHintBgHov;
+        opacity: 0.9;
+    }
+}

src/styles-new/_global.scss

@@ -22,23 +22,17 @@
 
 /************************** FONTS */
 @font-face {
-    /*
-    * Use https://icomoon.io/app with icomoon-project-openmct-symbols-16px.json to generate font files
-    */
+    // Use https://icomoon.io/app with `Icomoon.Open MCT Symbols 2018.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');
+    src: url($dirFonts + 'Open-MCT-Symbols-16px.woff') format('woff'),
+    url($dirFonts + 'Open-MCT-Symbols-16px.ttf') format('truetype'),
+    url($dirFonts + 'Open-MCT-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
-    */
+    // 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'),
@@ -241,12 +235,12 @@ body.desktop .has-local-controls {
 .c-grid {
     pointer-events: none;
 
-    &__x  { @include bgTicks($colorGridLines, 'x'); }
-    &__y  { @include bgTicks($colorGridLines, 'y'); }
+    &__x  { @include bgTicks($editCanvasColorGrid, 'x'); }
+    &__y  { @include bgTicks($editCanvasColorGrid, 'y'); }
 }
 
 /*************************** SELECTION */
-.is-selectable {
+.u-inspectable {
     &:hover {
         box-shadow: $browseShdwSelectableHov;
     }
@@ -254,16 +248,16 @@ body.desktop .has-local-controls {
 
 /**************************** EDITING */
 .is-editing {
-    *:not(.is-drilled-in).is-selectable {
-        border: $editBorderSelectable;
+    *:not(.is-drilled-in).c-frame {
+        border: $editSelectableBorder;
 
         &:hover {
-            border: $editBorderSelectableHov;
+            border: $editSelectableBorderHov;
         }
 
         &[s-selected],
         &.is-selected {
-            border: $editBorderSelected;
+            border: $editSelectableBorderSelected;
 
             > .c-frame-edit {
                 display: block; // Show the editing rect and handles
@@ -275,6 +269,10 @@ body.desktop .has-local-controls {
         border: $editBorderDrilledIn;
     }
 
+    *[s-selected] {
+        cursor: move;
+    }
+
     .u-links {
         // Applied in markup to objects that provide links. Disable while editing.
         pointer-events: none;
@@ -290,7 +288,7 @@ body.desktop .has-local-controls {
 
         &__move {
             @include abs();
-            box-shadow: rgba($editColor, 0.5) 0 0 10px;
+            box-shadow: $editMoveableSelectedShdw;
             cursor: move;
             z-index: $z;
         }
@@ -345,10 +343,19 @@ body.desktop .has-local-controls {
         }
     }
 
+    // TODO: move this into DisplayLayout and Fixed Position vue files respectively
     .l-shell__main-container > .l-layout,
     .l-shell__main-container > .c-object-view .l-fixed-position {
         // Target the top-most layout container and color its background
-        background: rgba($editColor, 0.1);
+        background: $editCanvasColorBg;
+    }
+
+    .l-shell__main-container {
+        box-shadow: $colorBodyBg 0 0 0 1px, rgba($editColor, 0.7) 0 0 0 2px;
+        &[s-selected] {
+            // Provide a clearer selection context articulation
+            box-shadow: $colorBodyBg 0 0 0 1px, $editColor 0 0 0px 3px;
+        }
     }
 
     // Layouts
@@ -546,6 +553,35 @@ a.disabled {
 }
 
 /************************** TEMP LEGACY FIXES */
+.overlay {
+    .outer-holder {
+        background: $colorMenuBg;
+        color: $colorMenuFg !important;
+    }
+}
+
+.form .form-row {
+    .label {
+        color: $colorMenuFg !important;
+    }
+    .selector-list {
+        @include reactive-input();
+        background: $colorInputBg !important;
+        color: $colorInputFg !important;
+    }
+}
+
+.ui-symbol.view-control {
+    display: block;
+    transform-origin: center center;
+
+    &:before { content: $glyph-icon-arrow-right-equilateral; }
+
+    &.expanded {
+        transform: rotate(90deg);
+    }
+}
+
 .t-imagery {
     display: contents;
 }

src/styles-new/_glyphs.scss

@@ -23,17 +23,18 @@
 /************************** 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-up {  @include glyphBefore($glyph-icon-arrow-up); }
 .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-right {  @include glyphBefore($glyph-icon-arrow-right); }
+.icon-arrow-right-equilateral {  @include glyphBefore($glyph-icon-arrow-right-equilateral); }
+.icon-arrow-down {  @include glyphBefore($glyph-icon-arrow-down); }
 .icon-arrow-double-down {  @include glyphBefore($glyph-icon-arrow-double-down); }
-.icon-arrow-up {  @include glyphBefore($glyph-icon-arrow-up); }
+.icon-arrow-tall-down {  @include glyphBefore($glyph-icon-arrow-tall-down); }
+.icon-arrow-left {  @include glyphBefore($glyph-icon-arrow-left); }
 .icon-asterisk {  @include glyphBefore($glyph-icon-asterisk); }
 .icon-bell {  @include glyphBefore($glyph-icon-bell); }
-.icon-box {  @include glyphBefore($glyph-icon-box); }
+.icon-box-round-corners {  @include glyphBefore($glyph-icon-box-round-corners); }
 .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); }
@@ -48,20 +49,21 @@
 .icon-people {  @include glyphBefore($glyph-icon-people); }
 .icon-person {  @include glyphBefore($glyph-icon-person); }
 .icon-plus {  @include glyphBefore($glyph-icon-plus); }
+.icon-plus-in-rect {  @include glyphBefore($glyph-icon-plus-in-rect); }
 .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-grid {  @include glyphBefore($glyph-icon-grid); }
+.icon-grippy-ew {  @include glyphBefore($glyph-icon-grippy-ew); }
+.icon-columns {  @include glyphBefore($glyph-icon-columns); }
+.icon-rows {  @include glyphBefore($glyph-icon-rows); }
 .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); }
@@ -76,14 +78,16 @@
 .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-pencil-in-brackets {  @include glyphBefore($glyph-icon-pencil-in-brackets); }
 .icon-play {  @include glyphBefore($glyph-icon-play); }
+.icon-pause {  @include glyphBefore($glyph-icon-pause); }
 .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-save-as {  @include glyphBefore($glyph-icon-save-as); }
 .icon-sine {  @include glyphBefore($glyph-icon-sine); }
 .icon-font {  @include glyphBefore($glyph-icon-font); }
 .icon-thumbs-strip {  @include glyphBefore($glyph-icon-thumbs-strip); }
@@ -128,15 +132,20 @@
 .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); }
+.icon-tabs-view {  @include glyphBefore($glyph-icon-tabs-view); }
+.icon-flexible-layout {  @include glyphBefore($glyph-icon-flexible-layout); }
+.icon-generator-telemetry {  @include glyphBefore($glyph-icon-generator-telemetry); }
+.icon-generator-events {  @include glyphBefore($glyph-icon-generator-events); }
+.icon-gauge {  @include glyphBefore($glyph-icon-gauge); }
 
 /************************** 12 PX CLASSES */
+// TODO: sync with 16px redo as of 10/25/18
 .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'); }
@@ -150,6 +159,9 @@
 .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-plus { @include glyphBg($bg-icon-plus); }
+.bg-icon-grippy-ew { @include glyphBg($bg-icon-grippy-ew); }
+.bg-icon-chain-links { @include glyphBg($bg-icon-chain-links); }
 .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); }
@@ -178,3 +190,8 @@
 .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); }
+.bg-icon-tabs-view { @include glyphBg($bg-icon-tabs-view); }
+.bg-icon-flexible-layout { @include glyphBg($bg-icon-flexible-layout); }
+.bg-icon-generator-telemetry { @include glyphBg($bg-icon-generator-telemetry); }
+.bg-icon-generator-events { @include glyphBg($bg-icon-generator-events); }
+.bg-icon-gauge { @include glyphBg($bg-icon-gauge); }

src/styles-new/_mixins.scss

@@ -128,10 +128,10 @@
 }
 
 @mixin bgVertStripes($c: yellow, $a: 0.1, $d: 40px) {
-    @include background-image(linear-gradient(-90deg,
+    background-image: linear-gradient(-90deg,
         rgba($c, $a) 0%, rgba($c, $a) 50%,
         transparent 50%, transparent 100%
-    ));
+    );
     background-repeat: repeat;
     background-size: $d $d;
 }
@@ -172,7 +172,7 @@
     unicode-bidi:bidi-override;
 }
 
-/************************** CONTROLS, BUTTONS */
+/************************** CONTROLS, BUTTONS, INPUTS */
 @mixin hover {
     body.desktop & {
         &:hover {
@@ -236,6 +236,15 @@
     box-shadow: $shdw;
 }
 
+@mixin buttonBehavior() {
+    // Assign transition timings
+    transition: $transOut;
+
+    @include hover() {
+        transition: $transIn;
+    }
+}
+
 @mixin cControl() {
     $fs: 1em;
     @include userSelectNone();
@@ -266,11 +275,17 @@
 @mixin cButton() {
     @include cControl();
     @include themedButton();
+    //@include buttonBehavior();
     border-radius: $controlCr;
     color: $colorBtnFg;
     cursor: pointer;
     padding: $interiorMargin floor($interiorMargin * 1.25);
 
+    &:after,
+    > * {
+        margin-left: $interiorMarginSm;
+    }
+
     @include hover() {
         background: $colorBtnBgHov;
         color: $colorBtnFgHov;
@@ -347,6 +362,50 @@
     }
 }
 
+@mixin cCompactButtons($bg, $fg, $bgHov) {
+    // Used in Tab view
+    // To be used in indicators popups?
+
+    $m: 1px;
+    $btnM: $m;
+
+    &-holder {
+        background: $colorTabsHolderBg;
+        border-radius: $controlCr;
+        padding: $m ($m - $btnM) ($m - $btnM) $m;
+        display: flex;
+        flex-flow: row wrap;
+        justify-content: stretch;
+
+        > * {
+            margin: 0 $btnM $btnM 0;
+        }
+    }
+
+    background: $colorBtnBg;
+    color: $colorBtnFg;
+    flex: 1 1 auto;
+    padding: $interiorMargin;
+
+    &:before {
+        opacity: 0.5;
+    }
+
+    > * {
+        margin-left: $interiorMarginSm;
+    }
+
+    @include hover() {
+        background: $bgHov;
+    }
+
+    &.is-current {
+        background: $colorBtnReverseBg;
+        color: $colorBtnReverseFg;
+        pointer-events: none;
+    }
+}
+
 @mixin wrappedInput() {
     // An input that is wrapped. Optionally includes a __label or icon element.
     // Based on .c-search.

src/styles-new/fonts/Open-MCT-Symbols-16px.svg

@@ -0,0 +1,132 @@
+<?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="Open-MCT-Symbols-16px" horiz-adv-x="1024">
+<font-face units-per-em="1024" ascent="1024" descent="0" />
+<missing-glyph horiz-adv-x="1024" />
+<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
+<glyph unicode="&#xe900;" glyph-name="icon-alert-rect-v2" d="M896 1024h-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 128h-128v128h128v-128zM597.8 512l-37.8-192h-96l-37.8 192v384h171.8v-384z" />
+<glyph unicode="&#xe901;" glyph-name="icon-alert-triangle-v2" d="M998.2 175.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 128h-128v128h128v-128zM597.8 512l-37.8-192h-96l-37.8 192v256h171.8v-256z" />
+<glyph unicode="&#xe902;" glyph-name="icon-arrow-up" d="M512 768l-512-512h1024z" />
+<glyph unicode="&#xe903;" glyph-name="icon-arrow-double-up" d="M510 514l512-512h-1024zM510 1026l512-512h-1024z" />
+<glyph unicode="&#xe904;" glyph-name="icon-arrow-tall-up" d="M512 1024l512-1024h-1024z" />
+<glyph unicode="&#xe905;" glyph-name="icon-arrow-right" d="M768 512l-512 512v-1024z" />
+<glyph unicode="&#xe906;" glyph-name="icon-arrow-right-equilateral" d="M962 512l-896-512v1024z" />
+<glyph unicode="&#xe907;" glyph-name="icon-arrow-down" d="M512 256l512 512h-1024z" />
+<glyph unicode="&#xe908;" glyph-name="icon-arrow-double-down" d="M510 514l-512 512h1024zM510 2l-512 512h1024z" />
+<glyph unicode="&#xe909;" glyph-name="icon-arrow-tall-down" d="M512 0l-512 1024h1024z" />
+<glyph unicode="&#xe90a;" glyph-name="icon-arrow-left" d="M256 512l512-512v1024z" />
+<glyph unicode="&#xe90b;" glyph-name="icon-asterisk" d="M1004.166 683.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="&#xe90c;" glyph-name="icon-bell" d="M512 0c106 0 192 86 192 192h-384c0-106 86-192 192-192zM896 576v64c0 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="&#xe90d;" glyph-name="icon-box-round-corners" d="M1024 192c0-105.6-86.4-192-192-192h-640c-105.6 0-192 86.4-192 192v640c0 105.6 86.4 192 192 192h640c105.6 0 192-86.4 192-192v-640z" />
+<glyph unicode="&#xe90e;" glyph-name="icon-box-with-arrow-cursor" d="M894 1026h-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 386.6l-576.6 255.4 255.4-576.6 64.6 128.6 192-192 128 128-192 192z" />
+<glyph unicode="&#xe90f;" glyph-name="icon-check" d="M1024 1024l-640-640-384 384v-384l384-384 640 640z" />
+<glyph unicode="&#xe910;" glyph-name="icon-connectivity" d="M704 448c0-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 512l-192 320v-640zM0 512l192 320v-640z" />
+<glyph unicode="&#xe911;" glyph-name="icon-database-in-brackets" d="M768 672c0-53.019-114.615-96-256-96s-256 42.981-256 96c0 53.019 114.615 96 256 96s256-42.981 256-96zM768 352v256c0-53-114.6-96-256-96s-256 43-256 96v-256c0-53 114.6-96 256-96s256 43 256 96zM832 1024h-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 192.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="&#xe912;" glyph-name="icon-eye-open" d="M512 907.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 435.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 512c0-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="&#xe913;" glyph-name="icon-gear" d="M1024 448v128l-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 512c0-106.038-85.962-192-192-192s-192 85.962-192 192 85.962 192 192 192 192-85.962 192-192z" />
+<glyph unicode="&#xe914;" glyph-name="icon-hourglass" d="M1024 1024h-1024c0-282.8 229.2-512 512-512s512 229.2 512 512zM512 640c-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 512c-282.8 0-512-229.2-512-512h1024c0 282.8-229.2 512-512 512z" />
+<glyph unicode="&#xe915;" glyph-name="icon-info" d="M512 1024c-282.8 0-512-229.2-512-512s229.2-512 512-512 512 229.2 512 512-229.2 512-512 512zM512 896c70.6 0 128-57.4 128-128s-57.4-128-128-128c-70.6 0-128 57.4-128 128s57.4 128 128 128zM704 192h-384v128h64v256h256v-256h64v-128z" />
+<glyph unicode="&#xe916;" glyph-name="icon-link" d="M1024 512l-512 512v-307.2l-512-204.8v-256h512v-256z" />
+<glyph unicode="&#xe917;" glyph-name="icon-lock" d="M832 640h-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 736c0 53 43 96 96 96s96-43 96-96v-96h-192v96z" />
+<glyph unicode="&#xe918;" glyph-name="icon-minus" d="M960 384c35.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="&#xe919;" glyph-name="icon-people" d="M704 704h64c70.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 704h64c70.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 640h-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 640h-192c-105.6 0-192-86.4-192-192v-448h576v448c0 105.6-86.4 192-192 192z" />
+<glyph unicode="&#xe91a;" glyph-name="icon-person" d="M768 768c0-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 0v192c0 140.8 115.2 256 256 256h384c140.8 0 256-115.2 256-256v-192z" />
+<glyph unicode="&#xe91b;" glyph-name="icon-plus" d="M960 640h-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="&#xe91c;" glyph-name="icon-plus-in-rect" d="M830 1024h-636c-106.6 0-194-87.2-194-194v-636c0-106.8 87.4-194 194-194h636c106.6 0 194 87.2 194 194v636c0 106.8-87.4 194-194 194zM896 416c0-17.673-14.327-32-32-32v0h-224v-224c0-17.673-14.327-32-32-32v0h-192c-17.673 0-32 14.327-32 32v0 224h-224c-17.673 0-32 14.327-32 32v0 192c0 17.673 14.327 32 32 32v0h224v224c0 17.673 14.327 32 32 32v0h192c17.673 0 32-14.327 32-32v0-224h224c17.673 0 32-14.327 32-32v0z" />
+<glyph unicode="&#xe91d;" glyph-name="icon-trash" d="M832 896h-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 192h-128v384h128v-384zM576 192h-128v384h128v-384zM832 192h-128v384h128v-384z" />
+<glyph unicode="&#xe91e;" glyph-name="icon-x-heavy" d="M704 512l301.332-301.332c24.89-24.89 24.89-65.62 0-90.51l-101.49-101.49c-24.89-24.89-65.62-24.89-90.51 0l-301.332 301.332c0 0-301.332-301.332-301.332-301.332-24.89-24.89-65.62-24.89-90.51 0l-101.49 101.49c-24.89 24.89-24.89 65.62 0 90.51l301.332 301.332c0 0-301.332 301.332-301.332 301.332-24.89 24.89-24.89 65.62 0 90.51l101.49 101.49c24.89 24.89 65.62 24.89 90.51 0l301.332-301.332c0 0 301.332 301.332 301.332 301.332 24.89 24.89 65.62 24.89 90.51 0l101.49-101.49c24.89-24.89 24.89-65.62 0-90.51 0 0-301.332-301.332-301.332-301.332z" />
+<glyph unicode="&#xe91f;" glyph-name="icon-brackets" d="M832 1024h-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 192h-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="&#xe920;" glyph-name="icon-crosshair" d="M574 1026h-128v-320h128v320zM1022 578h-320v-128h320v128zM574 322h-128v-320h128v320zM318 578h-320v-128h320v128z" />
+<glyph unicode="&#xe921;" glyph-name="icon-grippy" d="M365.4 841.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.2zM365.4 621.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.4 402.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.2zM365.4 182.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.2zM584.8 950.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.2zM584.8 731.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.2zM584.8 512c0-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.2zM584.8 292.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.2zM584.8 73.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.2zM804.2 841.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.2zM804.2 621.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.2zM804.2 402.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.2zM804.2 182.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="&#xe922;" glyph-name="icon-grid" d="M0 448v-256c0-105.6 86.4-192 192-192h256v448h-448zM448 1024h-256c-105.6 0-192-86.4-192-192v-256h448v448zM832 1024h-256v-448h448v256c0 105.6-86.4 192-192 192zM576 0h256c105.6 0 192 86.4 192 192v256h-448v-448z" />
+<glyph unicode="&#xe923;" glyph-name="icon-grippy-ew" d="M704 1024h128v-1024h-128v1024zM448 1024h128v-1024h-128v1024zM192 1024h128v-1024h-128v1024z" />
+<glyph unicode="&#xe924;" glyph-name="icon-columns" d="M0 1024h256v-1024h-256v1024zM384 1024h256v-1024h-256v1024zM768 1024h256v-1024h-256v1024z" />
+<glyph unicode="&#xe925;" glyph-name="icon-rows" d="M0 1024h1024v-256h-1024v256zM0 640h1024v-256h-1024v256zM0 256h1024v-256h-1024v256z" />
+<glyph unicode="&#xea00;" glyph-name="icon-arrows-right-left" d="M1024 512l-448-512v1024zM448 1024l-448-512 448-512z" />
+<glyph unicode="&#xea01;" glyph-name="icon-arrows-up-down" d="M512 1024l512-448h-1024zM0 448l512-448 512 448z" />
+<glyph unicode="&#xea02;" glyph-name="icon-bullet" d="M832 272c0-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="&#xea03;" glyph-name="icon-calendar" d="M896 1024h-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 576h-256v192h256v-192zM384 512h256v-192h-256v192zM320 320h-256v192h256v-192zM320 768v-192h-256v192h256zM128 64c-17 0-33 6.6-45.2 18.8s-18.8 28.2-18.8 45.2v128h256v-192h-192zM384 64v192h256v-192h-256zM960 128c0-17-6.6-33-18.8-45.2s-28.2-18.8-45.2-18.8h-192v192h256v-128zM960 320h-256v192h256v-192zM960 576h-256v192h256v-192z" />
+<glyph unicode="&#xea04;" glyph-name="icon-chain-links" d="M958.4 958.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 284.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 732.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="&#xea05;" glyph-name="icon-download" d="M832 448v-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 384l448 448h-256v192h-384v-192h-256l448-448z" />
+<glyph unicode="&#xea06;" glyph-name="icon-duplicate" d="M640 768v128c0 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 640h-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="&#xea07;" glyph-name="icon-folder-new" d="M896 832h-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 576h-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 224h-128v-128h-128v128h-128v128h128v128h128v-128h128v-128z" />
+<glyph unicode="&#xea08;" glyph-name="icon-fullscreen-collapse" d="M191.656 192c0.118-0.1 0.244-0.224 0.344-0.344v-191.656h192v192c0 105.6-86.4 192-192 192h-192v-192h191.656zM192 832.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 640h192v192h-191.656c-0.118 0.1-0.244 0.226-0.344 0.344v191.656h-192v-192c0-105.6 86.4-192 192-192zM832 191.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="&#xea09;" glyph-name="icon-fullscreen-expand" d="M192.344 192c-0.118 0.1-0.244 0.224-0.344 0.344v191.656h-192v-192c0-105.6 86.4-192 192-192h192v192h-191.656zM192 831.656c0.1 0.118 0.224 0.244 0.344 0.344h191.656v192h-192c-105.6 0-192-86.4-192-192v-192h192v191.656zM832 1024h-192v-192h191.656c0.118-0.1 0.244-0.226 0.344-0.344v-191.656h192v192c0 105.6-86.4 192-192 192zM832 192.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="&#xea0a;" glyph-name="icon-layers" d="M1024 640l-512 384-512-384 512-384zM512 128l-426.666 320-85.334-64 512-384 512 384-85.334 64z" />
+<glyph unicode="&#xea0b;" glyph-name="icon-line-horz" d="M64 448c-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="&#xea0c;" glyph-name="icon-magnify" d="M1024 128l-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 404.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="&#xea0d;" glyph-name="icon-magnify-in" d="M1024 128l-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 404.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 672h384v-128h-384v128zM352 800h128v-384h-128v384z" />
+<glyph unicode="&#xea0e;" glyph-name="icon-magnify-out-v2" d="M767.2 384.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 404.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 672h384v-128h-384v128z" />
+<glyph unicode="&#xea0f;" glyph-name="icon-menu" d="M0 896h1024v-128h-1024v128zM0 576h1024v-128h-1024v128zM0 256h1024v-128h-1024v128z" />
+<glyph unicode="&#xea10;" glyph-name="icon-move" d="M293.4 512l218.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 576h-128v-320l-384 384-128-128 384-384h-320v-128h576z" />
+<glyph unicode="&#xea11;" glyph-name="icon-new-window" d="M448 1024v-128h320l-384-384 128-128 384 384v-320h128v576zM576 349.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="&#xea12;" glyph-name="icon-paint-bucket-v2" d="M544 800v-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 0c70.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 512c-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="&#xea13;" glyph-name="icon-pencil" d="M922.344 922.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 168.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="&#xea14;" glyph-name="icon-pencil-edit-in-place" d="M922.4 922.4c-38.6 38.6-81.4 69.2-120.4 86.2-68.8 30.2-104.8 9-120.2-6.4l-516.2-516.2-3.2-9.2-162.4-476.8 486 165.6 516.2 516.4c9.8 9.8 21.8 27.8 21.8 56.6 0 50.6-39 121-101.6 183.8zM238 168.4l-69.8 69.6 69.2 203.2 18.4 6.8h64v-128h128v-64l-6.8-18.6-203-69zM0 1024v-512l128 128v256h256l128 128zM1024 0v512l-128-128v-256h-256l-128-128z" />
+<glyph unicode="&#xea15;" glyph-name="icon-play" d="M1024 512l-1024-512v1024z" />
+<glyph unicode="&#xea16;" glyph-name="icon-pause" d="M126 1026h256v-1024h-256v1024zM638 1026h256v-1024h-256v1024z" />
+<glyph unicode="&#xea17;" glyph-name="icon-plot-resource" d="M255.8 320c0.2 0 0.2 0 0 0l0.2 128c0 70.6 57.4 128 128 128h255.8c0 0 0 0 0.2 0.2v127.8c0 70.6 57.4 128 128 128h143.6c-93.8 117-238 192-399.6 192-282.8 0-512-229.2-512-512 0-68 13.2-132.8 37.2-192h218.6zM768.2 704c-0.2 0-0.2 0 0 0l-0.2-128c0-70.6-57.4-128-128-128h-255.8c0 0 0 0-0.2-0.2v-127.8c0-70.6-57.4-128-128-128h-143.6c93.8-117 238-192 399.6-192 282.8 0 512 229.2 512 512 0 68-13.2 132.8-37.2 192h-218.6z" />
+<glyph unicode="&#xea18;" glyph-name="icon-pointer-left" d="M766 0l-256 512 256 512h-256l-256-512 256-512z" />
+<glyph unicode="&#xea19;" glyph-name="icon-pointer-right" d="M254 1024l256-512-256-512h256l256 512-256 512z" />
+<glyph unicode="&#xea1a;" glyph-name="icon-refresh" d="M1024 563.2v460.8l-175.8-175.8c-85.2 69.6-190.8 107.6-302 107.6-127.6 0-247.6-49.8-338-140s-140-210.4-140-338 49.8-247.6 140-338 210.4-140 338-140 247.6 49.8 338 140c74 74 120.8 167.8 135 269.6h-138.6c-32-155.4-169.8-272.8-334.6-272.8-188.2 0-341.4 153.2-341.4 341.4s153.4 341.2 341.6 341.2c76.8 0 147.6-25.4 204.8-68.2l-187.8-187.8h460.8z" />
+<glyph unicode="&#xea1b;" glyph-name="icon-save" d="M192.2 448c-0.2 0-0.2 0 0 0l-0.2-448h640v447.8c0 0 0 0-0.2 0.2h-639.6zM978.8 813.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 768c0-35.2-28.8-64-64-64h-448c-35.2 0-64 28.8-64 64v192h320v-192h128v192h128v-192z" />
+<glyph unicode="&#xea1c;" glyph-name="icon-save-as" d="M978.8 685.2l-64 64c24.8-24.8 45.2-74 45.2-109.2v-448c0-70.4-57.6-128-128-128h-640c-18.8 0-36.6 4.2-52.6 11.4 20.2-44.4 65-75.4 116.6-75.4h640c70.4 0 128 57.6 128 128v448c0 35.2-20.4 84.4-45.2 109.2zM704 128v319.8c0 0 0 0-0.2 0.2h-511.6l-0.2-320h512zM192 512h512c35.2 0 64-28.8 64-64v-320c70.4 0 128 57.6 128 128v448c0 35.2-20.4 84.4-45.2 109.2l-165.4 165.4c-25 25-74.2 45.4-109.4 45.4h-448c-70.4 0-128-57.6-128-128v-640c0-70.4 57.6-128 128-128v320c0 35.2 28.8 64 64 64zM128 960h192v-192h128v192h128v-192c0-35.2-28.8-64-64-64h-320c-35.2 0-64 28.8-64 64v192z" />
+<glyph unicode="&#xea1d;" glyph-name="icon-sine" d="M1024 512c-1.8 7.2-3.4 14.4-5.2 21.8-20.2 86.2-53.4 209.4-98.4 307.2-22.4 49-45.4 86.6-70.2 115.2-48.6 56-98.4 67.8-131.8 67.8-33.2 0-83.2-11.8-131.8-67.8-24.6-28.6-47.6-66.2-70-115.2-44.8-97.8-78.2-221-98.4-307.2-21.8-93-46.6-175.4-72-238.4-16.4-40.6-30.4-66.4-40.8-82.8-10.4 16.2-24.4 42.2-40.8 82.8-23.2 58-46.2 132.4-66.6 216.6h-198c1.8-7.2 3.4-14.4 5.2-21.8 20.2-86.2 53.4-209.4 98.4-307.2 22.4-49 45.4-86.6 70.2-115.2 48.6-56 98.6-67.8 131.8-67.8s83.2 11.8 131.8 67.8c24.8 28.6 47.6 66.2 70.2 115.2 44.8 97.8 78.2 221 98.4 307.2 21.8 93 46.6 175.4 72 238.4 16.4 40.6 30.4 66.4 40.8 82.8 10.4-16.2 24.4-42.2 40.8-82.8 23.4-57.8 46.4-132.4 66.8-216.4h197.6z" />
+<glyph unicode="&#xea1e;" glyph-name="icon-font" d="M800 0h224l-384 1024h-256l-384-1024h224l84 224h408zM380 416l132 352 132-352z" />
+<glyph unicode="&#xea1f;" glyph-name="icon-thumbs-strip" d="M448 642c0-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 642c0-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 66c0-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 66c0-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="&#xea20;" glyph-name="icon-two-parts-both" d="M896 1024h-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 896h320v-768h-320v768zM896 128h-320v768h320v-768z" />
+<glyph unicode="&#xea21;" glyph-name="icon-two-parts-one-only" d="M896 1024h-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 128h-320v768h320v-768z" />
+<glyph unicode="&#xea22;" glyph-name="icon-resync" d="M795.2 859.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 192c-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="&#xea23;" glyph-name="icon-reset" d="M460.8 563.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="&#xea24;" glyph-name="icon-x-in-circle" d="M512 1024c-282.8 0-512-229.2-512-512s229.2-512 512-512 512 229.2 512 512-229.2 512-512 512zM768 320l-64-64-192 192-192-192-64 64 192 192-192 192 64 64 192-192 192 192 64-64-192-192 192-192z" />
+<glyph unicode="&#xea25;" glyph-name="icon-brightness" d="M253.414 705.939l-155.172 116.384c-50.233-66.209-85.127-146.713-97.91-234.39l-0.333-2.781 191.919-27.434c8.145 56.552 29.998 106.879 62.068 149.006l-0.573-0.784zM191.98 466.283l-191.919-27.434c13.115-90.459 48.009-170.963 99.174-238.453l-0.931 1.281 155.111 116.384c-31.476 41.347-53.309 91.675-61.231 146.504l-0.204 1.719zM466.283 832.020l-27.434 191.919c-90.459-13.115-170.963-48.009-238.453-99.174l1.281 0.931 116.384-155.111c41.347 31.476 91.675 53.309 146.504 61.231l1.719 0.204zM822.323 925.758c-66.209 50.233-146.713 85.127-234.39 97.91l-2.781 0.333-27.434-191.919c56.552-8.145 106.879-29.998 149.006-62.068l-0.784 0.573zM832.020 557.717l191.919 27.434c-13.115 90.459-48.009 170.963-99.174 238.453l0.931-1.281-155.111-116.384c31.476-41.347 53.309-91.675 61.231-146.504l0.204-1.719zM201.677 98.242c66.209-50.233 146.713-85.127 234.39-97.91l2.781-0.333 27.434 191.919c-56.552 8.145-106.879 29.998-149.006 62.068l0.784-0.573zM770.586 318.061l155.131-116.343c50.233 66.209 85.127 146.713 97.91 234.39l0.333 2.781-191.919 27.434c-8.125-56.564-29.966-106.906-62.028-149.049l0.574 0.786zM557.717 191.98l27.434-191.919c90.459 13.115 170.963 48.009 238.453 99.174l-1.281-0.931-116.384 155.111c-41.347-31.476-91.675-53.309-146.504-61.231l-1.719-0.204zM770.586 512c0-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="&#xea26;" glyph-name="icon-contrast" d="M512 1024c-282.78 0-512-229.24-512-512s229.22-512 512-512 512 229.24 512 512-229.22 512-512 512zM783.52 240.48c-69.111-69.481-164.785-112.481-270.502-112.481-0.358 0-0.716 0-1.074 0.001h0.055v768c212.070-0.010 383.982-171.929 383.982-384 0-106.034-42.977-202.031-112.462-271.52v0z" />
+<glyph unicode="&#xea27;" glyph-name="icon-expand" d="M960 1024c0 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 218.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 896h165.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 429.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="&#xea28;" glyph-name="icon-list-view" d="M0 960h1024v-128h-1024v128zM0 704h1024v-128h-1024v128zM0 448h1024v-128h-1024v128zM0 192h1024v-128h-1024v128z" />
+<glyph unicode="&#xea29;" glyph-name="icon-grid-snap-to" d="M382 194h448v448h-448v-448zM510 514h192v-192h-192v192zM-2 450h320v-64h-320v64zM894 450h128v-64h-128v64zM574 1026h64v-320h-64v320zM574 130h64v-128h-64v128zM574 450h64v-64h-64v64z" />
+<glyph unicode="&#xea2a;" glyph-name="icon-grid-snap-no" d="M768 448h192v-64h-192v64zM256 448h192v-64h-192v64zM0 448h192v-64h-192v64zM640 512h-64v-64h-64v-64h64v-64h64v64h64v64h-64zM576 768h64v-192h-64v192zM576 1024h64v-192h-64v192zM576 256h64v-192h-64v192z" />
+<glyph unicode="&#xea2b;" glyph-name="icon-frame-show" d="M0 960v-896h1024v896h-1024zM896 192h-768v640h768v-640zM192 768h384v-128h-384v128z" />
+<glyph unicode="&#xea2c;" glyph-name="icon-frame-hide" d="M128 834h420l104 128h-652v-802.4l128 157.4zM896 194h-420l-104-128h652v802.4l-128-157.4zM832 1026l-832-1024h192l832 1024zM392 642l104 128h-304v-128z" />
+<glyph unicode="&#xea2d;" glyph-name="icon-import" d="M832 831.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 320v-192l384 384-384 384v-192h-192v-384z" />
+<glyph unicode="&#xea2e;" glyph-name="icon-export" d="M192 192.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 512l-384 384v-192h-192v-384h192v-192l384 384z" />
+<glyph unicode="&#xea2f;" glyph-name="icon-font-size" d="M842.841 643.952h-120.956l-52.382-139.676 52.918-141.12 59.942 159.84 62.361-166.314h-119.884l34.019-90.717h119.884l39.695-105.836h105.836l-181.434 483.823zM263.903 863.871l-263.903-703.742h153.944l57.729 153.944h280.397l57.729-153.944h153.944l-263.903 703.742zM261.154 446.024l90.717 241.911 90.717-241.911z" />
+<glyph unicode="&#xeb00;" glyph-name="icon-activity" d="M576 960h-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="&#xeb01;" glyph-name="icon-activity-mode" d="M512 1024c-214.8 0-398.8-132.4-474.8-320h90.8c56.8 0 108-24.8 143-64h241l-192 192h256l320-320-320-320h-256l192 192h-241c-35-39.2-86.2-64-143-64h-90.8c76-187.6 259.8-320 474.8-320 282.8 0 512 229.2 512 512s-229.2 512-512 512z" />
+<glyph unicode="&#xeb02;" glyph-name="icon-autoflow-tabular" d="M192 1024c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h64v1024h-64zM384 1024h256v-1024h-256v1024zM832 1024h-64v-704h256v512c0 105.6-86.4 192-192 192z" />
+<glyph unicode="&#xeb03;" glyph-name="icon-clock" d="M512 1024c-282.8 0-512-229.2-512-512s229.2-512 512-512 512 229.2 512 512-229.2 512-512 512zM782 334c-12.8-22.2-36.6-36-62.4-36-12.6 0-25 3.4-36 9.6l-222 128.2c-0.8 0.4-1.6 1-2.4 1.4l-0.8 0.6-1.8 1.2-2.4 2-1.8 1.4-0.6 0.6c-0.8 0.6-1.4 1.2-2.2 1.8v0c-5 4.6-9.4 10-13 15.8-0.2 0.4-0.6 1-0.8 1.4s-0.6 1-0.8 1.4c-3.2 6-5.8 12.4-7.2 19.2v0.2c-0.2 1-0.4 1.8-0.6 2.8 0 0.2 0 0.6-0.2 0.8-0.2 0.6-0.2 1.4-0.2 2.2s-0.2 1-0.2 1.6 0 1-0.2 1.6-0.2 1.6-0.2 2.2c0 0.4 0 0.6 0 1 0 1 0 1.8 0 2.8 0 0 0 0.2 0 0.4v363.8c0 39.8 32.2 72 72 72s72-32.2 72-72v-322.4l185.8-107.2c34.2-20 45.8-64 26-98.4z" />
+<glyph unicode="&#xeb04;" glyph-name="icon-database" d="M1024 832c0-106.039-229.23-192-512-192s-512 85.961-512 192c0 106.039 229.23 192 512 192s512-85.961 512-192zM512 512c-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="&#xeb05;" glyph-name="icon-database-query" d="M683.52 204.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 512c0-88.224 71.776-160 160-160s160 71.776 160 160-71.776 160-160 160-160-71.776-160-160z" />
+<glyph unicode="&#xeb06;" glyph-name="icon-dataset" d="M896 832h-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 576h-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 128h-128v320h128v-320zM576 128h-128v320h128v-320zM832 128h-128v320h128v-320z" />
+<glyph unicode="&#xeb07;" glyph-name="icon-datatable" d="M1024 832c0-106.039-229.23-192-512-192s-512 85.961-512 192c0 106.039 229.23 192 512 192s512-85.961 512-192zM512 512c-282.8 0-512 86-512 192v-512c0-106 229.2-192 512-192s512 86 512 192v512c0-106-229.2-192-512-192zM896 449v-256c-36.6-15.6-79.8-28.8-128-39.4v256c48.2 10.6 91.4 23.8 128 39.4zM256 409.6v-256c-48.2 10.4-91.4 23.8-128 39.4v256c36.6-15.6 79.8-28.8 128-39.4zM384 134v256c41-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="&#xeb08;" glyph-name="icon-dictionary" d="M832 384c105.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="&#xeb09;" glyph-name="icon-folder" d="M896 832h-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 576h-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="&#xeb0a;" glyph-name="icon-image" d="M896 1024h-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 128h-768v768h768v-768zM320 768l-128-128v-448h640v320l-128 128-128-128z" />
+<glyph unicode="&#xeb0b;" glyph-name="icon-layout" d="M448 1024h-256c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h256v1024zM832 1024h-256v-577.664h448v385.664c0 105.6-86.4 192-192 192zM576 0h256c105.6 0 192 86.4 192 192v129.664h-448v-321.664z" />
+<glyph unicode="&#xeb0c;" glyph-name="icon-object" d="M512 0l512 320v384l-512.020 320-511.98-320v-384l512-320zM512 832l358.4-224-358.4-224-358.4 224 358.4 224z" />
+<glyph unicode="&#xeb0d;" glyph-name="icon-object-unknown" d="M510 1026l-512-320v-384l512-320 512 320v384l-512 320zM585.4 164.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 477.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="&#xeb0e;" glyph-name="icon-packet" d="M512 1024l-512-320v-512c0-105.6 86.4-192 192-192h640c105.6 0 192 86.4 192 192v512l-512 320zM512 832l358.4-224-358.4-224-358.4 224 358.4 224z" />
+<glyph unicode="&#xeb0f;" glyph-name="icon-page" d="M704 512c-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-320zM768 640h256l-384 384v-256c0-70.4 57.6-128 128-128z" />
+<glyph unicode="&#xeb10;" glyph-name="icon-plot-overlay" d="M830 1024h-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.355-0.003 22.389-1.366 32.952-3.936l-0.952 0.196v57.74c0 106.7-87.3 194-194 194zM992 631.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-0.196v-57.74c0-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="&#xeb11;" glyph-name="icon-plot-stacked" d="M89.6 712c24.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 613.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 312c-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="&#xeb12;" glyph-name="icon-session" d="M635.6 499.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 389.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 645.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 282l-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="&#xeb13;" glyph-name="icon-tabular" d="M896 1024h-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 576h-256v192h256v-192zM384 512h256v-192h-256v192zM320 320h-256v192h256v-192zM320 768v-192h-256v192h256zM128 64c-17 0-33 6.6-45.2 18.8s-18.8 28.2-18.8 45.2v128h256v-192h-192zM384 64v192h256v-192h-256zM960 128c0-17-6.6-33-18.8-45.2s-28.2-18.8-45.2-18.8h-192v192h256v-128zM960 320h-256v192h256v-192zM960 576h-256v192h256v-192z" />
+<glyph unicode="&#xeb14;" glyph-name="icon-tabular-lad" d="M896 1024h-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 128zM64 768h256v-192h-256v192zM64 512h256v-192h-256v192zM128 64c-35.2 0.2-63.8 28.8-64 64v128h256v-192h-192zM384 64v192h256v-192h-256zM960 128c-0.2-35.2-28.8-63.8-64-64h-192v192h256v-128zM960 512v-192h-576v192h64v64h-64v192h576v-192h-64v-64h64zM782.4 476.6l-110.4 55.2v172.2c0 17.6-14.4 32-32 32s-32-14.4-32-32v-211.8l145.6-72.8c15.8-8 35-1.6 43 14.4 8 15.6 1.6 35-14.2 42.8v0z" />
+<glyph unicode="&#xeb15;" glyph-name="icon-tabular-lad-set" d="M128 256v576c-70.6-0.2-127.8-57.4-128-128v-576c0.2-70.6 57.4-127.8 128-128h576c70.6 0.2 127.8 57.4 128 128h-576c-70.6 0.2-127.8 57.4-128 128zM896 1024h-576c-70.6-0.2-127.8-57.4-128-128v-576c0.2-70.6 57.4-127.8 128-128h576c70.6 0.2 127.8 57.4 128 128v576c-0.2 70.6-57.4 127.8-128 128zM256 832h192v-128h-192v128zM256 640h192v-192h-192v192zM320 256c-35.2 0.2-63.8 28.8-64 64v64h192v-128h-128zM512 256v128h192v-128h-192zM960 320c-0.2-35.2-28.8-63.8-64-64h-128v128h192v-64zM960 448h-448v384h448v-384zM832 544c17.6 0 32 14.4 32 32 0 13.8-8.8 26-21.8 30.4l-74.2 24.6v105c0 17.6-14.4 32-32 32s-32-14.4-32-32v-151l117.8-39.2c3.4-1.2 6.8-1.8 10.2-1.8z" />
+<glyph unicode="&#xeb16;" glyph-name="icon-tabular-realtime" d="M896 1024h-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 128h-0.021zM448 732l25.060-25.32c7.916-7.922 18.856-12.822 30.94-12.822s23.023 4.9 30.94 12.822v0l75.5 76.3c29.97 30.338 71.571 49.128 117.56 49.128s87.59-18.79 117.544-49.112l0.016-0.016 50.44-50.98v-152.2c-24.111 8.83-44.678 22.255-61.542 39.342l-0.018 0.018-75.5 76.3c-7.916 7.922-18.856 12.822-30.94 12.822s-23.023-4.9-30.94-12.822v0l-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-0.369v152.2zM320 64h-192c-35.26 0.214-63.786 28.74-64 63.98v128.020h256v-192zM320 320h-256v192h256v-192zM320 576h-256v192h256v-192zM640 64h-256v192h256v-192zM448 387.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.023 4.9 30.94 12.822v0l75.5 76.3c29.966 30.333 71.56 49.119 117.542 49.119 43.28 0 82.673-16.643 112.128-43.879l-0.11 0.1v-174.5c-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.023-4.9-30.94-12.822v0l-75.5-76.3c-29.966-30.333-71.56-49.119-117.542-49.119-43.28 0-82.673 16.643-112.128 43.879l0.11-0.1zM960 128c-0.214-35.26-28.74-63.786-63.98-64h-192.020v192h256v-128z" />
+<glyph unicode="&#xeb17;" glyph-name="icon-tabular-scrolling" d="M64 1024c-35.2 0-64-28.8-64-64v-192h448v256h-384zM1024 768v192c0 35.2-28.8 64-64 64h-384v-256h448zM0 640v-192c0-35.2 28.8-64 64-64h384v256h-448zM960 384c35.2 0 64 28.8 64 64v192h-448v-256h384zM512 0l-256 256h512z" />
+<glyph unicode="&#xeb18;" glyph-name="icon-telemetry" d="M32 392.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.225 0h0.011c-282.76 0-512-229.24-512-512 0-0.032 0-0.070 0-0.108 0-35.719 3.641-70.587 10.572-104.254l-0.572 3.323c9.54-10.78 17.22-16.74 22-18.62zM992 631.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.225 0h-0.011c282.76 0 512 229.24 512 512 0 0.032 0 0.070 0 0.108 0 35.719-3.641 70.587-10.572 104.254l0.572-3.323c-9.54 10.78-17.22 16.74-22 18.62z" />
+<glyph unicode="&#xeb19;" glyph-name="icon-timeline" d="M256 768h384v-128h-384v128zM384 576h384v-128h-384v128zM320 384h384v-128h-384v128zM832 1024h-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 192.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="&#xeb1a;" glyph-name="icon-timer" d="M640 877.4v82.58c0 35.346-28.654 64-64 64v0h-128c-35.346 0-64-28.654-64-64v0-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.42zM532 427.98l-263.76-211c-57.105 59.935-92.24 141.25-92.24 230.772 0 0.080 0 0.16 0 0.24v-0.012c0 185.28 150.72 336 336 336 6.72 0 13.38-0.22 20-0.62v-355.38z" />
+<glyph unicode="&#xeb1b;" glyph-name="icon-topic" d="M454.36 547.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-0.418v172.14l-57.64 57.64c-34.408 34.33-81.9 55.558-134.35 55.558s-99.943-21.228-134.354-55.562l-86.296-86.296c-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.587l-0.003-0.003zM505.64 476.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.721 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.721-78.65 49.537-128.031 49.537-52.44 0-99.923-21.22-134.333-55.541l0.004 0.004zM832 1024h-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 192h-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="&#xeb1c;" glyph-name="icon-box-with-dashed-lines-v2" d="M0 640h128v-256h-128v256zM128 895.78l0.22 0.22h191.78v128h-192c-70.606-0.215-127.785-57.394-128-127.979v-192.021h128v191.78zM128 128.22v191.78h-128v-192c0.215-70.606 57.394-127.785 127.979-128h192.021v128h-191.78zM384 1024h256v-128h-256v128zM896 128.22l-0.22-0.22h-191.78v-128h192c70.606 0.215 127.785 57.394 128 127.979v192.021h-128v-191.78zM896 1024h-192v-128h191.78l0.22-0.22v-191.78h128v192c-0.215 70.606-57.394 127.785-127.979 128h-0.021zM896 640h128v-256h-128v256zM384 128h256v-128h-256v128zM256 768h512v-512h-512v512z" />
+<glyph unicode="&#xeb1d;" glyph-name="icon-summary-widget" d="M896 1024h-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 413.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="&#xeb1e;" glyph-name="icon-notebook" d="M896 913.2c0 79.8-55.4 127.4-123 105.4l-773-250.6h896v145.2zM896 704h-896v-576c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v448c0 70.4-57.6 128-128 128zM832 192h-384v320h384v-320z" />
+<glyph unicode="&#xeb1f;" glyph-name="icon-tabs-view" d="M0 128c0.227-70.601 57.399-127.773 127.978-128h768.022c70.601 0.227 127.773 57.399 128 127.978v608.022h-512l-50.2 225.6c-7.6 34.2-42.6 62.4-77.8 62.4h-256c-70.601-0.227-127.773-57.399-128-127.978v-0.022zM832 256h-640v256h640zM480 1024c35.2 0 70.2-28.2 77.8-62.4l36-161.6h430.2v96c-0.227 70.601-57.399 127.773-127.978 128h-0.022z" />
+<glyph unicode="&#xeb20;" glyph-name="icon-flexible-layout" d="M0 192c0-105.6 86.4-192 192-192h64v576h-256zM0 832v-128h256v320h-64c-105.6 0-192-86.4-192-192zM768 0h64c105.6 0 192 86.4 192 192v128h-256zM384 1024h256v-1024h-256v1024zM832 1024h-64v-576h256v384c0 105.6-86.4 192-192 192z" />
+<glyph unicode="&#xeb21;" glyph-name="icon-generator-sine" d="M152 550.2c10.8 4.2 40.8 35.6 69.8 109.4 31.8 81.4 87.2 178.4 170.2 178.4 39.4 0 76-21.8 109.2-65 28-36.4 48.8-81.6 61-113.4 29-73.8 59-105.2 69.8-109.4 10.8 4.2 40.8 35.6 69.8 109.4s74.2 155.4 141.6 174.4c-67.89 114.467-190.82 190-331.391 190-0.003 0-0.007 0-0.010 0h0.001c-212 0-384-172-384-384 0.017-26.829 2.71-53.018 7.827-78.329l-0.427 2.529c7.2-8 13-12.6 16.6-14zM884.6 547c7.235 27.919 11.392 59.972 11.4 92.995v0.005c-0.017 26.829-2.71 53.018-7.827 78.329l0.427-2.529c-7.2 8-13 12.6-16.6 14-10.8-4.2-40.8-35.6-69.8-109.4-21.8-55.8-54.6-119-100-153.2zM512 384l135 59c-4.485-0.614-9.689-0.977-14.972-1h-0.028c-39.4 0-76 21.8-109.2 65-28 36.4-48.8 81.6-61 113.4-29 73.8-59 105.2-69.8 109.4-10.8-4.2-40.8-35.6-69.8-109.4-16.4-42.2-39.2-88.4-68.8-123.2zM1024 544l-512-224-512 224v-320l512-224 512 224v320z" />
+<glyph unicode="&#xeb22;" glyph-name="icon-generator-event" d="M320 832h384v-64h-384v64zM320 576h384v-64h-384v64zM320 704h320v-64h-320v64zM256 895.8h512v-399.8l128 56v344c-0.227 70.601-57.399 127.773-127.978 128h-512.022c-70.601-0.227-127.773-57.399-128-127.978v-344.022l128-56zM658.2 448h-292.4l146.2-64 146.2 64zM512 320l-512 224v-320l512-224 512 224v320l-512-224z" />
+<glyph unicode="&#xeb23;" glyph-name="icon-gauge" d="M512 1024c-282.8 0-512-229.2-512-512 0-226.4 147-418.4 350.6-486l257.4 486v-503c236.8 45 416 253 416 503 0 282.8-229.2 512-512 512zM754.8 496.2c-58.967 68.597-145.842 111.772-242.8 111.772s-183.833-43.176-242.445-111.35l-0.355-0.422-146 125c8.6 10 17.4 19.6 26.8 28.8 92.628 92.679 220.619 150.006 362 150.006s269.372-57.326 361.997-150.003l0.003-0.003c9.4-9.2 18.2-18.8 26.8-28.8z" />
+</font></defs></svg>

src/styles-new/fonts/openmct-symbols-16px.svg

@@ -1,124 +0,0 @@
-<?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>

src/styles-new/legacy-styles.scss

@@ -8,7 +8,7 @@
 
 @import "../styles/animations";
 @import "../styles/effects";
-@import "../styles/glyphs";
+// @import "../styles/glyphs";
 @import "../styles/animations";
 @import "../styles/archetypes";
 //@import "../styles/about";

src/styles-new/notebook.scss

@@ -64,6 +64,7 @@
     }
 
     &__drag-area {
+        // TODO: recast this element to use c-drop-hint element
         background: rgba($colorKey, 0.1);
         border: 1px dashed rgba($colorKey, 0.7);
         border-radius: $controlCr;

src/styles-new/sass-base.scss

@@ -24,6 +24,6 @@
 // Meant for use as a single line import in Vue SFC's.
 // Do not include anything that renders to CSS!
 @import "constants";
-@import "constants-espresso"; // TEMP
-//@import "constants-snow"; // TEMP
+//@import "constants-espresso"; // TEMP
+@import "constants-snow"; // TEMP
 @import "mixins";

src/styles/overlay/_overlay.scss

@@ -123,7 +123,7 @@
                 }
             }
 
-            @include containerSubtle($colorOvrBg, $colorOvrFg);
+            //@include containerSubtle($colorOvrBg, $colorOvrFg);
         }
 
         .dialog-title {

src/ui/components/controls/ContextMenu.vue

@@ -1,29 +0,0 @@
-<template>
-    <div class="c-menu">
-        <ul>
-            <li v-for="item in contextMenuItems"
-                :class="item.class"
-                :title="item.title">
-                {{ item.name }}
-            </li>
-        </ul>
-    </div>
-</template>
-
-<script>
-    export default {
-        data: function () {
-            return {
-                contextMenuItems: [
-                    {name: 'Open In New Tab', class: 'icon-new-window', title: 'Open in a new browser tab'},
-                    {name: 'Preview', class: 'hide-in-t-main-view icon-eye-open', title: 'Preview in large dialog'},
-                    {name: 'Edit Properties...', class: 'major icon-pencil', title: 'Edit properties of this object.'},
-                    {name: 'Duplicate', class: 'icon-duplicate', title: 'Duplicate object to another location.'},
-                    {name: 'Create Link', class: 'icon-link', title: 'Create Link to object in another location.'},
-                    {name: 'Export as JSON', class: 'icon-export', title: 'Export as JSON'},
-                    {name: 'Import from JSON', class: 'icon-import', title: 'Import from JSON'}
-                ]
-            }
-        }
-    }
-</script>

src/ui/components/controls/CreateButton.vue

@@ -91,19 +91,22 @@
                 // 2. Get legacy type from legacy api
                 // 3. Instantiate create action with type, parent, context
                 // 4. perform action.
-                let legacyContextualParent = this.convertToLegacy(openmct.router.path[0]);
-                let legacyType = openmct.$injector.get('typeService').getType(item.key);
-                let context = {
-                    key: "create",
-                    domainObject: legacyContextualParent // should be same as parent object.
-                };
-                let action = new CreateAction(
-                    legacyType,
-                    legacyContextualParent,
-                    context,
-                    this.openmct
-                );
-                return action.perform();
+                return this.openmct.objects.get(openmct.router.path[0].identifier)
+                    .then((currentObject) => {
+                        let legacyContextualParent = this.convertToLegacy(currentObject);
+                        let legacyType = openmct.$injector.get('typeService').getType(item.key);
+                        let context = {
+                            key: "create",
+                            domainObject: legacyContextualParent // should be same as parent object.
+                        };
+                        let action = new CreateAction(
+                            legacyType,
+                            legacyContextualParent,
+                            context,
+                            this.openmct
+                        );
+                        return action.perform();
+                    });
             },
             convertToLegacy (domainObject) {
                 let keyString = objectUtils.makeKeyString(domainObject.identifier);

src/ui/components/controls/ObjectLabel.vue

@@ -0,0 +1,51 @@
+<template>
+<a class="c-tree__item__label"
+    draggable="true"
+    @dragstart="dragStart"
+    :href="objectLink">
+    <div class="c-tree__item__type-icon"
+        :class="typeClass"></div>
+    <div class="c-tree__item__name">{{ observedObject.name }}</div>
+</a>
+</template>
+
+<script>
+
+import ObjectLink from '../mixins/object-link';
+import ContextMenuGesture from '../mixins/context-menu-gesture';
+
+export default {
+    mixins: [ObjectLink, ContextMenuGesture],
+    inject: ['openmct'],
+    props: {
+        domainObject: Object
+    },
+    data() {
+        return {
+            observedObject: this.domainObject
+        };
+    },
+    mounted() {
+        if (this.observedObject) {
+            let removeListener = this.openmct.objects.observe(this.observedObject, '*', (newObject) => {
+                this.observedObject = newObject;
+            });
+            this.$once('hook:destroyed', removeListener);
+        }
+    },
+    computed: {
+        typeClass() {
+            let type = this.openmct.types.get(this.observedObject.type);
+            if (!type) {
+                return 'icon-object-unknown';
+            }
+            return type.definition.cssClass;
+        }
+    },
+    methods: {
+        dragStart(event) {
+            event.dataTransfer.setData("domainObject", JSON.stringify(this.observedObject));
+        }
+    }
+}
+</script>