Merge branch 'master' into open638_rebase

platform/commonUI/about/bundle.js

@@ -22,11 +22,13 @@
 /*global define*/
 
 define([
+    "text!./res/templates/about-dialog.html",
     "./src/LogoController",
     "./src/AboutController",
     "./src/LicenseController",
     'legacyRegistry'
 ], function (
+    aboutDialogTemplate,
     LogoController,
     AboutController,
     LicenseController,
@@ -50,7 +52,7 @@ define([
                 },
                 {
                     "key": "about-dialog",
-                    "templateUrl": "templates/about-dialog.html"
+                    "template": aboutDialogTemplate
                 },
                 {
                     "key": "overlay-about",

platform/commonUI/browse/bundle.js

@@ -34,6 +34,7 @@ define([
     "./src/windowing/NewTabAction",
     "./src/windowing/FullscreenAction",
     "./src/creation/CreateActionProvider",
+    "./src/creation/AddActionProvider",
     "./src/creation/CreationService",
     "./src/windowing/WindowTitler",
     'legacyRegistry'
@@ -50,6 +51,7 @@ define([
     NewTabAction,
     FullscreenAction,
     CreateActionProvider,
+    AddActionProvider,
     CreationService,
     WindowTitler,
     legacyRegistry
@@ -117,7 +119,8 @@ define([
                     "implementation": LocatorController,
                     "depends": [
                         "$scope",
-                        "$timeout"
+                        "$timeout",
+                        "objectService"
                     ]
                 },
                 {
@@ -279,6 +282,18 @@ define([
                         "policyService"
                     ]
                 },
+                {
+                    "key": "AddActionProvider",
+                    "provides": "actionService",
+                    "type": "provider",
+                    "implementation": AddActionProvider,
+                    "depends": [
+                        "$q",
+                        "typeService",
+                        "dialogService",
+                        "policyService"
+                    ]
+                },
                 {
                     "key": "CreationService",
                     "provides": "creationService",

platform/commonUI/browse/lib/screenfull.min.js

@@ -1,6 +0,0 @@
-/*!
-* screenfull
-* v1.2.0 - 2014-04-29
-* (c) Sindre Sorhus; MIT License
-*/
-!function(){"use strict";var a="undefined"!=typeof module&&module.exports,b="undefined"!=typeof Element&&"ALLOW_KEYBOARD_INPUT"in Element,c=function(){for(var a,b,c=[["requestFullscreen","exitFullscreen","fullscreenElement","fullscreenEnabled","fullscreenchange","fullscreenerror"],["webkitRequestFullscreen","webkitExitFullscreen","webkitFullscreenElement","webkitFullscreenEnabled","webkitfullscreenchange","webkitfullscreenerror"],["webkitRequestFullScreen","webkitCancelFullScreen","webkitCurrentFullScreenElement","webkitCancelFullScreen","webkitfullscreenchange","webkitfullscreenerror"],["mozRequestFullScreen","mozCancelFullScreen","mozFullScreenElement","mozFullScreenEnabled","mozfullscreenchange","mozfullscreenerror"],["msRequestFullscreen","msExitFullscreen","msFullscreenElement","msFullscreenEnabled","MSFullscreenChange","MSFullscreenError"]],d=0,e=c.length,f={};e>d;d++)if(a=c[d],a&&a[1]in document){for(d=0,b=a.length;b>d;d++)f[c[0][d]]=a[d];return f}return!1}(),d={request:function(a){var d=c.requestFullscreen;a=a||document.documentElement,/5\.1[\.\d]* Safari/.test(navigator.userAgent)?a[d]():a[d](b&&Element.ALLOW_KEYBOARD_INPUT)},exit:function(){document[c.exitFullscreen]()},toggle:function(a){this.isFullscreen?this.exit():this.request(a)},onchange:function(){},onerror:function(){},raw:c};return c?(Object.defineProperties(d,{isFullscreen:{get:function(){return!!document[c.fullscreenElement]}},element:{enumerable:!0,get:function(){return document[c.fullscreenElement]}},enabled:{enumerable:!0,get:function(){return!!document[c.fullscreenEnabled]}}}),document.addEventListener(c.fullscreenchange,function(a){d.onchange.call(d,a)}),document.addEventListener(c.fullscreenerror,function(a){d.onerror.call(d,a)}),void(a?module.exports=d:window.screenfull=d)):void(a?module.exports=!1:window.screenfull=!1)}();

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

@@ -0,0 +1,139 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web 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 Web 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 define,Promise*/
+
+/**
+ * Module defining AddAction. Created by ahenry on 01/21/16.
+ */
+define(
+    [
+        './CreateWizard'
+    ],
+    function (CreateWizard) {
+        "use strict";
+
+        /**
+         * 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',
+                glyph: type.getGlyph(),
+                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 addToParent (populatedObject) {
+                parentObject.getCapability('composition').add(populatedObject);
+                return parentObject.getCapability('persistence').persist().then(function(){
+                    return parentObject;
+                });
+            }
+
+            function save(object) {
+                /*
+                It's necessary to persist the new sub-object in order
+                 that it can be retrieved for composition in the parent.
+                 Future refactoring that allows temporary objects to be
+                 retrieved from object services will make this unnecessary.
+                 */
+                return object.getCapability('editor').save(true);
+            }
+
+            return this.dialogService
+                .getUserInput(wizard.getFormStructure(false), wizard.getInitialFormValue())
+                .then(populateObjectFromInput)
+                .then(save)
+                .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/browse/src/creation/AddActionProvider.js

@@ -0,0 +1,87 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web 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 Web 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 define,Promise*/
+
+/**
+ * Module defining AddActionProvider.js. Created by ahenry on 01/21/16.
+ */
+define(
+    ["./AddAction"],
+    function (AddAction) {
+        "use strict";
+
+        /**
+         * 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,
+                self = this;
+
+            // 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 this.typeService.listTypes().filter(function (type) {
+                return self.policyService.allow("creation", type) && self.policyService.allow("composition", destination.getCapability('type'), type);
+            }).map(function (type) {
+                return new AddAction(
+                    type,
+                    destination,
+                    context,
+                    self.$q,
+                    self.dialogService,
+                    self.policyService
+                );
+            });
+        };
+
+        return AddActionProvider;
+    }
+);

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

@@ -26,18 +26,21 @@ define(
         'use strict';
 
         /**
-         * Construct a new CreateWizard.
+         * A class for capturing user input data from an object creation
+         * dialog, and populating a domain object with that data.
          *
-         * @param {TypeImpl} type the type of domain object to be created
+         * @param {DomainObject} domainObject the newly created object to
+         * populate with user input
          * @param {DomainObject} parent the domain object to serve as
          *        the initial parent for the created object, in the dialog
          * @memberof platform/commonUI/browse
          * @constructor
          */
-        function CreateWizard(type, parent, policyService, initialModel) {
-            this.type = type;
-            this.model = initialModel || type.getInitialModel();
-            this.properties = type.getProperties();
+        function CreateWizard(domainObject, parent, policyService) {
+            this.type = domainObject.getCapability('type');
+            this.model = domainObject.getModel();
+            this.domainObject = domainObject;
+            this.properties = this.type.getProperties();
             this.parent = parent;
             this.policyService = policyService;
         }
@@ -46,11 +49,14 @@ define(
          * Get the form model for this wizard; this is a description
          * that will be rendered to an HTML form. See the
          * platform/forms bundle
-         *
+         * @param {boolean} includeLocation if true, a 'location' section
+         * will be included that will allow the user to select the location
+         * of the newly created object, otherwise the .location property of
+         * the model will be used.
          * @return {FormModel} formModel the form model to
          *         show in the create dialog
          */
-        CreateWizard.prototype.getFormStructure = function () {
+        CreateWizard.prototype.getFormStructure = function (includeLocation) {
             var sections = [],
                 type = this.type,
                 policyService = this.policyService;
@@ -84,12 +90,16 @@ define(
             });
 
             // Ensure there is always a "save in" section
-            sections.push({ name: 'Location', rows: [{
-                name: "Save In",
-                control: "locator",
-                validate: validateLocation,
-                key: "createParent"
-            }]});
+            if (includeLocation) {
+                sections.push({
+                    name: 'Location', rows: [{
+                        name: "Save In",
+                        control: "locator",
+                        validate: validateLocation,
+                        key: "createParent"
+                    }]
+                });
+            }
 
             return {
                 sections: sections,
@@ -97,6 +107,23 @@ define(
             };
         };
 
+        /**
+         * Given some form input values and a domain object, populate the
+         * domain object used to create this wizard from the given form values.
+         * @param formValue
+         * @returns {DomainObject}
+         */
+        CreateWizard.prototype.populateObjectFromInput = function(formValue) {
+            var parent = this.getLocation(formValue),
+                formModel = this.createModel(formValue);
+
+            formModel.location = parent.getId();
+            this.domainObject.useCapability("mutation", function(){
+                return formModel;
+            });
+            return this.domainObject;
+        };
+
         /**
          * Get the initial value for the form being described.
          * This will include the values for all properties described
@@ -120,6 +147,7 @@ define(
         /**
          * Based on a populated form, get the domain object which
          * should be used as a parent for the newly-created object.
+         * @private
          * @return {DomainObject}
          */
         CreateWizard.prototype.getLocation = function (formValue) {
@@ -129,6 +157,7 @@ define(
         /**
          * Create the domain object model for a newly-created object,
          * based on user input read from a formModel.
+         * @private
          * @return {object} the domain object model
          */
         CreateWizard.prototype.createModel = function (formValue) {

platform/commonUI/browse/src/creation/LocatorController.js

@@ -33,7 +33,7 @@ define(
          * @memberof platform/commonUI/browse
          * @constructor
          */
-        function LocatorController($scope, $timeout) {
+        function LocatorController($scope, $timeout, objectService) {
             // Populate values needed by the locator control. These are:
             // * rootObject: The top-level object, since we want to show
             //               the full tree
@@ -52,6 +52,18 @@ define(
                         $scope.rootObject =
                             (context && context.getRoot()) || $scope.rootObject;
                     }, 0);
+                } else if (!contextRoot){
+                    //If no context root is available, default to the root
+                    // object
+                    $scope.rootObject = undefined;
+                    // Update the displayed tree on a timeout to avoid
+                    // an infinite digest exception.
+                    objectService.getObjects(['ROOT'])
+                        .then(function(objects){
+                            $timeout(function () {
+                                $scope.rootObject = objects.ROOT;
+                            }, 0);
+                        });
                 }
 
                 $scope.treeModel.selectedObject = domainObject;

platform/commonUI/browse/src/windowing/FullscreenAction.js

@@ -25,7 +25,7 @@
  * Module defining FullscreenAction. Created by vwoeltje on 11/18/14.
  */
 define(
-    ["../../lib/screenfull.min"],
+    ["screenfull"],
     function () {
         "use strict";
 

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

@@ -0,0 +1,137 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web 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 Web 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 define,Promise,describe,it,expect,beforeEach,waitsFor,jasmine,xit,xdescribe*/
+
+/**
+ * MCTRepresentationSpec. Created by ahenry on 01/21/14.
+ */
+define(
+    ["../../src/creation/AddActionProvider"],
+    function (AddActionProvider) {
+        "use strict";
+
+        describe("The add action provider", function () {
+            var mockTypeService,
+                mockDialogService,
+                mockPolicyService,
+                mockCreationPolicy,
+                mockCompositionPolicy,
+                mockPolicyMap = {},
+                mockTypes,
+                mockDomainObject,
+                mockQ,
+                provider;
+
+            function createMockType(name) {
+                var mockType = jasmine.createSpyObj(
+                    "type" + name,
+                    [
+                        "getKey",
+                        "getGlyph",
+                        "getName",
+                        "getDescription",
+                        "getProperties",
+                        "getInitialModel",
+                        "hasFeature"
+                    ]
+                );
+                mockType.hasFeature.andReturn(true);
+                mockType.getName.andReturn(name);
+                return mockType;
+            }
+
+            beforeEach(function () {
+                mockTypeService = jasmine.createSpyObj(
+                    "typeService",
+                    [ "listTypes" ]
+                );
+                mockDialogService = jasmine.createSpyObj(
+                    "dialogService",
+                    [ "getUserInput" ]
+                );
+                mockPolicyService = jasmine.createSpyObj(
+                    "policyService",
+                    [ "allow" ]
+                );
+
+                mockDomainObject = jasmine.createSpyObj(
+                    "domainObject",
+                    [ "getCapability" ]
+                );
+
+                //Mocking getCapability because AddActionProvider uses the
+                // type capability of the destination object.
+                mockDomainObject.getCapability.andReturn({});
+
+                mockTypes = [ "A", "B", "C" ].map(createMockType);
+
+                mockTypes.forEach(function(type){
+                    mockPolicyMap[type.getName()] = true;
+                });
+
+                mockCreationPolicy = function(type){
+                    return mockPolicyMap[type.getName()];
+                };
+
+                mockCompositionPolicy = function(){
+                    return true;
+                };
+
+                mockPolicyService.allow.andReturn(true);
+
+                mockTypeService.listTypes.andReturn(mockTypes);
+
+                provider = new AddActionProvider(
+                    mockQ,
+                    mockTypeService,
+                    mockDialogService,
+                    mockPolicyService
+                );
+            });
+
+            it("checks for creatability", function () {
+                provider.getActions({
+                    key: "add",
+                    domainObject: mockDomainObject
+                });
+                // Make sure it was creation which was used to check
+                expect(mockPolicyService.allow)
+                    .toHaveBeenCalledWith("creation", mockTypes[0]);
+            });
+
+            it("checks for composability of type", function () {
+                provider.getActions({
+                    key: "add",
+                    domainObject: mockDomainObject
+                });
+
+                expect(mockPolicyService.allow).toHaveBeenCalledWith(
+                    "composition",
+                    jasmine.any(Object),
+                    jasmine.any(Object)
+                );
+
+                expect(mockDomainObject.getCapability).toHaveBeenCalledWith('type');
+            });
+        });
+    }
+);

platform/commonUI/browse/test/creation/CreateActionProviderSpec.js

@@ -32,11 +32,12 @@ define(
         describe("The create action provider", function () {
             var mockTypeService,
                 mockDialogService,
-                mockCreationService,
+                mockNavigationService,
                 mockPolicyService,
                 mockCreationPolicy,
                 mockPolicyMap = {},
                 mockTypes,
+                mockQ,
                 provider;
 
             function createMockType(name) {
@@ -66,9 +67,9 @@ define(
                     "dialogService",
                     [ "getUserInput" ]
                 );
-                mockCreationService = jasmine.createSpyObj(
-                    "creationService",
-                    [ "createObject" ]
+                mockNavigationService = jasmine.createSpyObj(
+                    "navigationService",
+                    [ "setNavigation" ]
                 );
                 mockPolicyService = jasmine.createSpyObj(
                     "policyService",
@@ -92,15 +93,14 @@ define(
                 mockTypeService.listTypes.andReturn(mockTypes);
 
                 provider = new CreateActionProvider(
+                    mockQ,
                     mockTypeService,
-                    mockDialogService,
-                    mockCreationService,
+                    mockNavigationService,
                     mockPolicyService
                 );
             });
 
-            //TODO: Disabled for NEM Beta
-            xit("exposes one create action per type", function () {
+            it("exposes one create action per type", function () {
                 expect(provider.getActions({
                     key: "create",
                     domainObject: {}
@@ -114,8 +114,7 @@ define(
                 }).length).toEqual(0);
             });
 
-            //TODO: Disabled for NEM Beta
-            xit("does not expose non-creatable types", function () {
+            it("does not expose non-creatable types", function () {
                 // One of the types won't have the creation feature...
                 mockPolicyMap[mockTypes[0].getName()] = false;
                 // ...so it should have been filtered out.

platform/commonUI/browse/test/creation/CreateWizardSpec.js

@@ -35,6 +35,7 @@ define(
                 mockProperties,
                 mockPolicyService,
                 testModel,
+                mockDomainObject,
                 wizard;
 
             function createMockProperty(name) {
@@ -81,8 +82,18 @@ define(
                 mockType.getInitialModel.andReturn(testModel);
                 mockType.getProperties.andReturn(mockProperties);
 
+                mockDomainObject = jasmine.createSpyObj(
+                    'domainObject',
+                    ['getCapability', 'useCapability', 'getModel']
+                );
+
+                //Mocking the getCapability('type') call
+                mockDomainObject.getCapability.andReturn(mockType);
+                mockDomainObject.useCapability.andReturn();
+                mockDomainObject.getModel.andReturn(testModel);
+
                 wizard = new CreateWizard(
-                    mockType,
+                    mockDomainObject,
                     mockParent,
                     mockPolicyService
                 );
@@ -130,6 +141,18 @@ define(
                 });
             });
 
+            it("populates the model on the associated object", function () {
+                var formValue = {
+                    "A": "ValueA",
+                    "B": "ValueB",
+                    "C": "ValueC"
+                    },
+                    compareModel = wizard.createModel(formValue);
+                wizard.populateObjectFromInput(formValue);
+                expect(mockDomainObject.useCapability).toHaveBeenCalledWith('mutation', jasmine.any(Function));
+                expect(mockDomainObject.useCapability.mostRecentCall.args[1]()).toEqual(compareModel);
+            });
+
             it("validates selection types using policy", function () {
                 var mockDomainObject = jasmine.createSpyObj(
                         'domainObject',
@@ -139,7 +162,8 @@ define(
                         'otherType',
                         ['getKey']
                     ),
-                    structure = wizard.getFormStructure(),
+                    //Create a form structure with location
+                    structure = wizard.getFormStructure(true),
                     sections = structure.sections,
                     rows = structure.sections[sections.length - 1].rows,
                     locationRow = rows[rows.length - 1];
@@ -156,6 +180,12 @@ define(
                 );
             });
 
+            it("creates a form model without a location if not requested", function () {
+                expect(wizard.getFormStructure(false).sections.some(function(section){
+                    return section.name === 'Location';
+                })).toEqual(false);
+            });
+
 
         });
     }

platform/commonUI/browse/test/creation/LocatorControllerSpec.js

@@ -35,6 +35,8 @@ define(
                 mockDomainObject,
                 mockRootObject,
                 mockContext,
+                mockObjectService,
+                getObjectsPromise,
                 controller;
 
             beforeEach(function () {
@@ -55,73 +57,106 @@ define(
                     "context",
                     [ "getRoot" ]
                 );
+                mockObjectService = jasmine.createSpyObj(
+                    "objectService",
+                    ["getObjects"]
+                );
+                getObjectsPromise = jasmine.createSpyObj(
+                    "promise",
+                    ["then"]
+                );
 
                 mockDomainObject.getCapability.andReturn(mockContext);
                 mockContext.getRoot.andReturn(mockRootObject);
+                mockObjectService.getObjects.andReturn(getObjectsPromise);
 
                 mockScope.ngModel = {};
                 mockScope.field = "someField";
 
-                controller = new LocatorController(mockScope, mockTimeout);
+                controller = new LocatorController(mockScope, mockTimeout, mockObjectService);
             });
+                describe("when context is available", function () {
 
-            it("adds a treeModel to scope", function () {
-                expect(mockScope.treeModel).toBeDefined();
-            });
+                    beforeEach(function () {
+                        mockContext.getRoot.andReturn(mockRootObject);
+                        controller = new LocatorController(mockScope, mockTimeout, mockObjectService);
+                    });
 
-            it("watches for changes to treeModel", function () {
-                // This is what the embedded tree representation
-                // will be modifying.
-                expect(mockScope.$watch).toHaveBeenCalledWith(
-                    "treeModel.selectedObject",
-                    jasmine.any(Function)
-                );
-            });
+                    it("adds a treeModel to scope", function () {
+                        expect(mockScope.treeModel).toBeDefined();
+                    });
 
-            it("changes its own model on embedded model updates", function () {
-                // Need to pass on selection changes as updates to
-                // the control's value
-                mockScope.$watch.mostRecentCall.args[1](mockDomainObject);
-                mockTimeout.mostRecentCall.args[0]();
-                expect(mockScope.ngModel.someField).toEqual(mockDomainObject);
-                expect(mockScope.rootObject).toEqual(mockRootObject);
+                    it("watches for changes to treeModel", function () {
+                        // This is what the embedded tree representation
+                        // will be modifying.
+                        expect(mockScope.$watch).toHaveBeenCalledWith(
+                            "treeModel.selectedObject",
+                            jasmine.any(Function)
+                        );
+                    });
 
-                // Verify that the capability we expect to have been used
-                // was used.
-                expect(mockDomainObject.getCapability)
-                    .toHaveBeenCalledWith("context");
-            });
+                    it("changes its own model on embedded model updates", function () {
+                        // Need to pass on selection changes as updates to
+                        // the control's value
+                        mockScope.$watch.mostRecentCall.args[1](mockDomainObject);
+                        mockTimeout.mostRecentCall.args[0]();
+                        expect(mockScope.ngModel.someField).toEqual(mockDomainObject);
+                        expect(mockScope.rootObject).toEqual(mockRootObject);
 
-            it("rejects changes which fail validation", function () {
-                mockScope.structure = { validate: jasmine.createSpy('validate') };
-                mockScope.structure.validate.andReturn(false);
+                        // Verify that the capability we expect to have been used
+                        // was used.
+                        expect(mockDomainObject.getCapability)
+                            .toHaveBeenCalledWith("context");
+                    });
 
-                // Pass selection change
-                mockScope.$watch.mostRecentCall.args[1](mockDomainObject);
-                mockTimeout.mostRecentCall.args[0]();
+                    it("rejects changes which fail validation", function () {
+                        mockScope.structure = { validate: jasmine.createSpy('validate') };
+                        mockScope.structure.validate.andReturn(false);
 
-                expect(mockScope.structure.validate).toHaveBeenCalled();
-                // Change should have been rejected
-                expect(mockScope.ngModel.someField).not.toEqual(mockDomainObject);
-            });
+                        // Pass selection change
+                        mockScope.$watch.mostRecentCall.args[1](mockDomainObject);
+                        mockTimeout.mostRecentCall.args[0]();
 
-            it("treats a lack of a selection as invalid", function () {
-                mockScope.ngModelController = jasmine.createSpyObj(
-                    'ngModelController',
-                    [ '$setValidity' ]
-                );
+                        expect(mockScope.structure.validate).toHaveBeenCalled();
+                        // Change should have been rejected
+                        expect(mockScope.ngModel.someField).not.toEqual(mockDomainObject);
+                    });
 
-                mockScope.$watch.mostRecentCall.args[1](mockDomainObject);
-                mockTimeout.mostRecentCall.args[0]();
-                expect(mockScope.ngModelController.$setValidity)
-                    .toHaveBeenCalledWith(jasmine.any(String), true);
+                    it("treats a lack of a selection as invalid", function () {
+                        mockScope.ngModelController = jasmine.createSpyObj(
+                            'ngModelController',
+                            [ '$setValidity' ]
+                        );
 
-                mockScope.$watch.mostRecentCall.args[1](undefined);
-                mockTimeout.mostRecentCall.args[0]();
-                expect(mockScope.ngModelController.$setValidity)
-                    .toHaveBeenCalledWith(jasmine.any(String), false);
-            });
+                        mockScope.$watch.mostRecentCall.args[1](mockDomainObject);
+                        mockTimeout.mostRecentCall.args[0]();
+                        expect(mockScope.ngModelController.$setValidity)
+                            .toHaveBeenCalledWith(jasmine.any(String), true);
 
+                        mockScope.$watch.mostRecentCall.args[1](undefined);
+                        mockTimeout.mostRecentCall.args[0]();
+                        expect(mockScope.ngModelController.$setValidity)
+                            .toHaveBeenCalledWith(jasmine.any(String), false);
+                    });
+                });
+                describe("when no context is available", function () {
+                    var defaultRoot = "DEFAULT_ROOT";
+
+                    beforeEach(function () {
+                        mockContext.getRoot.andReturn(undefined);
+                        getObjectsPromise.then.andCallFake(function(callback){
+                            callback({'ROOT':defaultRoot});
+                        });
+                        controller = new LocatorController(mockScope, mockTimeout, mockObjectService);
+                    });
+
+                    it("provides a default context where none is available", function () {
+                        mockScope.$watch.mostRecentCall.args[1](mockDomainObject);
+                        mockTimeout.mostRecentCall.args[0]();
+                        expect(mockScope.rootObject).toBe(defaultRoot);
+
+                    });
+                });
         });
     }
 );

platform/commonUI/edit/bundle.js

@@ -156,14 +156,11 @@ define([
                     "name": "Save",
                     "description": "Save changes made to these objects.",
                     "depends": [
-                        "$q",
-                        "$location",
                         "$injector",
-                        "urlService",
-                        "navigationService",
                         "policyService",
                         "dialogService",
-                        "creationService"
+                        "creationService",
+                        "copyService"
                     ],
                     "priority": "mandatory"
                 },

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

@@ -36,18 +36,22 @@ define(
          * @implements {Action}
          * @memberof platform/commonUI/edit
          */
-        function SaveAction($q, $location, $injector, urlService, navigationService, policyService, dialogService, creationService, context) {
+        function SaveAction(
+            $injector,
+            policyService,
+            dialogService,
+            creationService,
+            copyService,
+            context
+        ) {
             this.domainObject = (context || {}).domainObject;
-            this.$location = $location;
             this.injectObjectService = function(){
                 this.objectService = $injector.get("objectService");
             };
-            this.urlService = urlService;
-            this.navigationService = navigationService;
             this.policyService = policyService;
             this.dialogService = dialogService;
             this.creationService = creationService;
-            this.$q = $q;
+            this.copyService = copyService;
         }
 
         SaveAction.prototype.getObjectService = function(){
@@ -67,77 +71,29 @@ define(
          */
         SaveAction.prototype.perform = function () {
             var domainObject = this.domainObject,
-                $location = this.$location,
-                urlService = this.urlService,
+                copyService = this.copyService,
                 self = this;
 
             function resolveWith(object){
-                return function() {
+                return function () {
                     return object;
                 };
             }
 
             function doWizardSave(parent) {
                 var context = domainObject.getCapability("context"),
-                    wizard = new CreateWizard(domainObject.useCapability('type'), parent, self.policyService, domainObject.getModel());
-
-                function mergeObjects(fromObject, toObject){
-                    Object.keys(fromObject).forEach(function(key) {
-                        toObject[key] = fromObject[key];
-                    });
-                }
-
-                // Create and persist the new object, based on user
-                // input.
-                function buildObjectFromInput(formValue) {
-                    var parent = wizard.getLocation(formValue),
-                        formModel = wizard.createModel(formValue);
-
-                        formModel.location = parent.getId();
-                        //Replace domain object model with model collected
-                        // from user form.
-                        domainObject.useCapability("mutation", function(){
-                            //Replace object model with the model from the form
-                            return formModel;
-                        });
-                        return domainObject;
-                }
-
-                function getAllComposees(domainObject){
-                    return domainObject.useCapability('composition');
-                }
-
-                function addComposeesToObject(object){
-                    return function(composees){
-                        return self.$q.all(composees.map(function (composee) {
-                            return object.getCapability('composition').add(composee);
-                        })).then(resolveWith(object));
-                    };
-                }
-
-                /**
-                 * Add the composees of the 'virtual' object to the
-                 * persisted object
-                 * @param object
-                 * @returns {*}
-                 */
-                function composeNewObject(object){
-                    if (self.$q.when(object.hasCapability('composition') && domainObject.hasCapability('composition'))) {
-                        return getAllComposees(domainObject)
-                            .then(addComposeesToObject(object));
-                    }
-                }
+                    wizard = new CreateWizard(
+                        domainObject,
+                        parent,
+                        self.policyService
+                    );
 
                 return self.dialogService
-                    .getUserInput(wizard.getFormStructure(), wizard.getInitialFormValue())
-                    .then(buildObjectFromInput);
-            }
-
-
-            function persistObject(object){
-                return  ((object.hasCapability('editor') && object.getCapability('editor').save(true)) ||
-                        object.getCapability('persistence').persist())
-                        .then(resolveWith(object));
+                    .getUserInput(
+                        wizard.getFormStructure(true),
+                        wizard.getInitialFormValue()
+                    )
+                    .then(wizard.populateObjectFromInput.bind(wizard));
             }
 
             function fetchObject(objectId){
@@ -150,14 +106,18 @@ define(
                 return fetchObject(object.getModel().location);
             }
 
-            function locateObjectInParent(parent){
-                parent.getCapability('composition').add(domainObject.getId());
-                return parent;
+            function allowClone(objectToClone) {
+                return (objectToClone.getId() === domainObject.getId()) ||
+                    objectToClone.getCapability('location').isOriginal();
             }
 
-            function doNothing() {
-                // Create cancelled, do nothing
-                return false;
+            function cloneIntoParent(parent) {
+                return copyService.perform(domainObject, parent, allowClone);
+            }
+
+            function cancelEditingAfterClone(clonedObject) {
+                return domainObject.getCapability("editor").cancel()
+                    .then(resolveWith(clonedObject));
             }
 
             // Invoke any save behavior introduced by the editor capability;
@@ -167,18 +127,13 @@ define(
             function doSave() {
                 //This is a new 'virtual object' that has not been persisted
                 // yet.
-                if (!domainObject.getModel().persisted){
+                if (domainObject.getModel().persisted === undefined){
                     return getParent(domainObject)
-                            .then(doWizardSave)
-                            .then(persistObject)
-                            .then(getParent)//Parent may have changed based
-                                            // on user selection
-                            .then(locateObjectInParent)
-                            .then(persistObject)
-                            .then(function(){
-                                return fetchObject(domainObject.getId());
-                            })
-                        .catch(doNothing);
+                        .then(doWizardSave)
+                        .then(getParent)
+                        .then(cloneIntoParent)
+                        .then(cancelEditingAfterClone)
+                        .catch(resolveWith(false));
                 } else {
                     return domainObject.getCapability("editor").save()
                         .then(resolveWith(domainObject.getOriginalObject()));
@@ -189,7 +144,7 @@ define(
             // UI, which will have been pushed atop the Browse UI.)
             function returnToBrowse(object) {
                 if (object) {
-                    self.navigationService.setNavigation(object);
+                    object.getCapability("action").perform("navigate");
                 }
                 return object;
             }

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

@@ -0,0 +1,60 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web 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 Web 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 define*/
+
+
+define(
+    ['./EditableLookupCapability'],
+    function (EditableLookupCapability) {
+        'use strict';
+
+        /**
+         * Wrapper for the "instantiation" capability;
+         * ensures that any domain objects instantiated in Edit mode
+         * are also wrapped as EditableDomainObjects.
+         *
+         * Meant specifically for use by EditableDomainObject and the
+         * associated cache; the constructor signature is particular
+         * to a pattern used there and may contain unused arguments.
+         * @constructor
+         * @memberof platform/commonUI/edit
+         * @implements {CompositionCapability}
+         */
+        return function EditableInstantiationCapability(
+            contextCapability,
+            editableObject,
+            domainObject,
+            cache
+        ) {
+            // This is a "lookup" style capability (it looks up other
+            // domain objects), but we do not want to return the same
+            // specific value every time (composition may change)
+            return new EditableLookupCapability(
+                contextCapability,
+                editableObject,
+                domainObject,
+                cache,
+                false // Not idempotent
+            );
+        };
+    }
+);

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

@@ -45,7 +45,8 @@ define(
             cache,
             idempotent
         ) {
-            var capability = Object.create(contextCapability);
+            var capability = Object.create(contextCapability),
+                method;
 
             // Check for domain object interface. If something has these
             // three methods, we assume it's a domain object.
@@ -114,7 +115,9 @@ define(
             }
 
             // Wrap all methods; return only editable domain objects.
-            Object.keys(contextCapability).forEach(wrapMethod);
+            for (method in contextCapability) {
+                wrapMethod(method);
+            }
 
             return capability;
         };

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

@@ -81,7 +81,8 @@ define(
             var domainObject = this.domainObject,
                 editableObject = this.editableObject,
                 self = this,
-                cache = this.cache;
+                cache = this.cache,
+                returnPromise;
 
             // Update the underlying, "real" domain object's model
             // with changes made to the copy used for editing.
@@ -99,14 +100,18 @@ define(
             editableObject.getCapability("status").set("editing", false);
 
             if (nonrecursive) {
-                return resolvePromise(doMutate())
+                returnPromise = resolvePromise(doMutate())
                     .then(doPersist)
                     .then(function(){
                         self.cancel();
                     });
             } else {
-                return resolvePromise(cache.saveAll());
+                returnPromise = resolvePromise(cache.saveAll());
             }
+            //Return the original (non-editable) object
+            return returnPromise.then(function() {
+                return domainObject.getOriginalObject ? domainObject.getOriginalObject() : domainObject;
+            });
         };
 
         /**
@@ -120,7 +125,7 @@ define(
         EditorCapability.prototype.cancel = function () {
             this.editableObject.getCapability("status").set("editing", false);
             //TODO: Reset the cache as well here.
-            this.cache.markClean(this.editableObject);
+            this.cache.markClean();
             return resolvePromise(undefined);
         };
 

platform/commonUI/edit/src/objects/EditableDomainObject.js

@@ -36,6 +36,7 @@ define(
         '../capabilities/EditableContextCapability',
         '../capabilities/EditableCompositionCapability',
         '../capabilities/EditableRelationshipCapability',
+        '../capabilities/EditableInstantiationCapability',
         '../capabilities/EditorCapability',
         '../capabilities/EditableActionCapability',
         './EditableDomainObjectCache'
@@ -45,6 +46,7 @@ define(
         EditableContextCapability,
         EditableCompositionCapability,
         EditableRelationshipCapability,
+        EditableInstantiationCapability,
         EditorCapability,
         EditableActionCapability,
         EditableDomainObjectCache
@@ -56,6 +58,7 @@ define(
             context: EditableContextCapability,
             composition: EditableCompositionCapability,
             relationship: EditableRelationshipCapability,
+            instantiation: EditableInstantiationCapability,
             editor: EditorCapability
         };
 

platform/commonUI/edit/src/objects/EditableDomainObjectCache.js

@@ -126,7 +126,14 @@ define(
          * @param {DomainObject} domainObject the domain object
          */
         EditableDomainObjectCache.prototype.markClean = function (domainObject) {
-            delete this.dirtyObjects[domainObject.getId()];
+            var self = this;
+            if (!domainObject) {
+                Object.keys(this.dirtyObjects).forEach(function(key) {
+                    delete self.dirtyObjects[key];
+                });
+            } else {
+                delete this.dirtyObjects[domainObject.getId()];
+            }
         };
 
         /**

platform/commonUI/edit/test/capabilities/EditableLookupCapabilitySpec.js

@@ -118,6 +118,29 @@ define(
                 expect(mockContext.getDomainObject.calls.length).toEqual(2);
             });
 
+            it("wraps inherited methods", function () {
+                var CapabilityClass = function(){
+                };
+                CapabilityClass.prototype.inheritedMethod=function () {
+                    return "an inherited method";
+                };
+
+                mockContext = new CapabilityClass();
+
+                capability = new EditableLookupCapability(
+                    mockContext,
+                    mockEditableObject,
+                    mockDomainObject,
+                    factory,
+                    false
+                );
+                expect(capability.inheritedMethod()).toEqual("an inherited method");
+                expect(capability.hasOwnProperty('inheritedMethod')).toBe(true);
+                // The presence of an own property indicates that the method
+                // has been wrapped on the object itself and this is a valid
+                // test that the inherited method has been wrapped.
+            });
+
         });
     }
 );

platform/commonUI/general/bundle.js

@@ -129,6 +129,10 @@ define([
                 {
                     "stylesheetUrl": "css/normalize.min.css",
                     "priority": "mandatory"
+                },
+                {
+                    "stylesheetUrl": "css/reset.css",
+                    "priority": "mandatory"
                 }
             ],
             "templates": [

platform/commonUI/general/res/config.rb

@@ -1,26 +0,0 @@
-# Require any additional compass plugins here.
-# require "compass-growl"
-
-# Set this to the root of your project when deployed:
-http_path = "/"
-css_dir = "css"
-sass_dir = "sass"
-images_dir = "images"
-javascripts_dir = "js"
-
-# You can select your preferred output style here (can be overridden via the command line):
-# :expanded, :compressed, :nested
-output_style = :nested
-
-# To enable relative paths to assets via compass helper functions. Uncomment:
-relative_assets = true
-
-# To disable debugging comments that display the original location of your selectors. Uncomment:
-# line_comments = false
-
-
-# If you prefer the indented syntax, you might want to regenerate this
-# project again passing --syntax sass, or you can uncomment this:
-# preferred_syntax = :sass
-# and then run:
-# sass-convert -R --from scss --to sass vfn_platform/static/sass scss && rm -rf sass && mv scss sass

platform/commonUI/general/res/css/reset.css

@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}

platform/commonUI/general/res/fonts/symbols/icomoon.io-WTD-symbols-project.json

@@ -1,19 +1,43 @@
 {
 	"metadata": {
 		"name": "WTD Symbols",
-		"lastOpened": 1446670352108,
-		"created": 1446670349721
+		"lastOpened": 1455833272792,
+		"created": 1455833268424
 	},
 	"iconSets": [
 		{
 			"selection": [
+				{
+					"order": 119,
+					"id": 96,
+					"prevSize": 32,
+					"code": 58905,
+					"name": "icon-bullet",
+					"tempChar": ""
+				},
+				{
+					"order": 120,
+					"id": 95,
+					"prevSize": 32,
+					"code": 58904,
+					"name": "icon-session",
+					"tempChar": ""
+				},
+				{
+					"order": 118,
+					"id": 94,
+					"prevSize": 32,
+					"code": 58903,
+					"name": "icon-topic",
+					"tempChar": ""
+				},
 				{
 					"order": 116,
 					"id": 93,
 					"prevSize": 32,
 					"code": 58902,
 					"name": "icon-eye-open-no-gleam",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 115,
@@ -21,7 +45,7 @@
 					"prevSize": 32,
 					"code": 58901,
 					"name": "icon-eye-open",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 110,
@@ -29,7 +53,7 @@
 					"prevSize": 32,
 					"code": 58899,
 					"name": "icon-collapse-pane-left",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 111,
@@ -37,7 +61,7 @@
 					"prevSize": 32,
 					"code": 58900,
 					"name": "icon-collapse-pane-right",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 109,
@@ -45,7 +69,7 @@
 					"prevSize": 32,
 					"code": 58898,
 					"name": "icon-save",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 108,
@@ -53,7 +77,7 @@
 					"prevSize": 32,
 					"code": 58897,
 					"name": "icon-dataset",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 90,
@@ -61,7 +85,7 @@
 					"prevSize": 32,
 					"code": 58896,
 					"name": "icon-bell",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 91,
@@ -69,7 +93,7 @@
 					"prevSize": 32,
 					"code": 58889,
 					"name": "icon-hourglass",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 92,
@@ -82,7 +106,7 @@
 						58890
 					],
 					"name": "icon-info-v15",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 93,
@@ -90,7 +114,7 @@
 					"prevSize": 32,
 					"code": 58887,
 					"name": "icon-x-in-circle",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 94,
@@ -98,7 +122,7 @@
 					"prevSize": 32,
 					"code": 58881,
 					"name": "icon-datatable",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 95,
@@ -106,7 +130,7 @@
 					"prevSize": 32,
 					"code": 58882,
 					"name": "icon-tabular-scrolling",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 96,
@@ -114,7 +138,7 @@
 					"prevSize": 32,
 					"code": 58884,
 					"name": "icon-tabular",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 97,
@@ -122,7 +146,7 @@
 					"prevSize": 32,
 					"code": 58885,
 					"name": "icon-calendar",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 98,
@@ -130,7 +154,7 @@
 					"prevSize": 32,
 					"code": 58886,
 					"name": "icon-paint-bucket",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 99,
@@ -138,7 +162,7 @@
 					"prevSize": 32,
 					"code": 123,
 					"name": "icon-pointer-left",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 100,
@@ -146,7 +170,7 @@
 					"prevSize": 32,
 					"code": 125,
 					"name": "icon-pointer-right",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 101,
@@ -154,7 +178,7 @@
 					"prevSize": 32,
 					"code": 80,
 					"name": "icon-person",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 102,
@@ -162,7 +186,7 @@
 					"prevSize": 32,
 					"code": 232,
 					"name": "icon-chain-links",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 103,
@@ -170,7 +194,7 @@
 					"prevSize": 32,
 					"code": 115,
 					"name": "icon-database-in-brackets",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 104,
@@ -178,7 +202,7 @@
 					"prevSize": 32,
 					"code": 114,
 					"name": "icon-refresh",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 105,
@@ -186,7 +210,7 @@
 					"prevSize": 32,
 					"code": 108,
 					"name": "icon-lock",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 106,
@@ -194,7 +218,7 @@
 					"prevSize": 32,
 					"code": 51,
 					"name": "icon-box-with-dashed-lines",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 10,
@@ -202,7 +226,7 @@
 					"prevSize": 32,
 					"code": 58880,
 					"name": "icon-box-with-arrow-cursor",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 11,
@@ -210,7 +234,7 @@
 					"prevSize": 32,
 					"code": 65,
 					"name": "icon-activity-mode",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 12,
@@ -218,7 +242,7 @@
 					"prevSize": 32,
 					"code": 97,
 					"name": "icon-activity",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 87,
@@ -226,7 +250,7 @@
 					"prevSize": 32,
 					"code": 33,
 					"name": "icon-alert-rect",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 14,
@@ -234,7 +258,7 @@
 					"prevSize": 32,
 					"code": 58883,
 					"name": "icon-alert-triangle",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 15,
@@ -242,7 +266,7 @@
 					"prevSize": 32,
 					"code": 238,
 					"name": "icon-arrow-double-down",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 16,
@@ -250,7 +274,7 @@
 					"prevSize": 32,
 					"code": 235,
 					"name": "icon-arrow-double-up",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 2,
@@ -258,7 +282,7 @@
 					"prevSize": 32,
 					"code": 118,
 					"name": "icon-arrow-down",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 19,
@@ -266,7 +290,7 @@
 					"prevSize": 32,
 					"code": 60,
 					"name": "icon-arrow-left",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 20,
@@ -274,7 +298,7 @@
 					"prevSize": 32,
 					"code": 62,
 					"name": "icon-arrow-right",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 21,
@@ -282,7 +306,7 @@
 					"prevSize": 32,
 					"code": 236,
 					"name": "icon-arrow-tall-down",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 22,
@@ -290,7 +314,7 @@
 					"prevSize": 32,
 					"code": 237,
 					"name": "icon-arrow-tall-up",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 23,
@@ -298,7 +322,7 @@
 					"prevSize": 32,
 					"code": 94,
 					"name": "icon-arrow-up",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 24,
@@ -306,7 +330,7 @@
 					"prevSize": 32,
 					"code": 73,
 					"name": "icon-arrows-out",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 25,
@@ -314,7 +338,7 @@
 					"prevSize": 32,
 					"code": 58893,
 					"name": "icon-arrows-right-left",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 33,
@@ -322,7 +346,7 @@
 					"prevSize": 32,
 					"code": 53,
 					"name": "icon-arrows-up-down",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 26,
@@ -330,7 +354,7 @@
 					"prevSize": 32,
 					"code": 42,
 					"name": "icon-asterisk",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 27,
@@ -338,7 +362,7 @@
 					"prevSize": 32,
 					"code": 72,
 					"name": "icon-autoflow-tabular",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 28,
@@ -346,7 +370,7 @@
 					"prevSize": 32,
 					"code": 224,
 					"name": "icon-box",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 29,
@@ -354,7 +378,7 @@
 					"prevSize": 32,
 					"code": 50,
 					"name": "icon-check",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 30,
@@ -362,7 +386,7 @@
 					"prevSize": 32,
 					"code": 67,
 					"name": "icon-clock",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 31,
@@ -370,7 +394,7 @@
 					"prevSize": 32,
 					"code": 46,
 					"name": "icon-connectivity",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 32,
@@ -378,7 +402,7 @@
 					"prevSize": 32,
 					"code": 100,
 					"name": "icon-database-query",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 17,
@@ -386,7 +410,7 @@
 					"prevSize": 32,
 					"code": 68,
 					"name": "icon-database",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 35,
@@ -394,7 +418,7 @@
 					"prevSize": 32,
 					"code": 81,
 					"name": "icon-dictionary",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 36,
@@ -402,7 +426,7 @@
 					"prevSize": 32,
 					"code": 242,
 					"name": "icon-duplicate",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 37,
@@ -410,7 +434,7 @@
 					"prevSize": 32,
 					"code": 102,
 					"name": "icon-folder-new",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 38,
@@ -418,7 +442,7 @@
 					"prevSize": 32,
 					"code": 70,
 					"name": "icon-folder",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 39,
@@ -426,7 +450,7 @@
 					"prevSize": 32,
 					"code": 95,
 					"name": "icon-fullscreen-collapse",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 40,
@@ -434,7 +458,7 @@
 					"prevSize": 32,
 					"code": 122,
 					"name": "icon-fullscreen-expand",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 41,
@@ -442,7 +466,7 @@
 					"prevSize": 32,
 					"code": 71,
 					"name": "icon-gear",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 49,
@@ -450,7 +474,7 @@
 					"prevSize": 32,
 					"code": 227,
 					"name": "icon-image",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 42,
@@ -458,7 +482,7 @@
 					"prevSize": 32,
 					"code": 225,
 					"name": "icon-layers",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 43,
@@ -466,7 +490,7 @@
 					"prevSize": 32,
 					"code": 76,
 					"name": "icon-layout",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 44,
@@ -474,7 +498,7 @@
 					"prevSize": 32,
 					"code": 226,
 					"name": "icon-line-horz",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 75,
@@ -482,7 +506,7 @@
 					"prevSize": 32,
 					"code": 244,
 					"name": "icon-link",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 46,
@@ -490,7 +514,7 @@
 					"prevSize": 32,
 					"code": 88,
 					"name": "icon-magnify-in",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 47,
@@ -498,7 +522,7 @@
 					"prevSize": 32,
 					"code": 89,
 					"name": "icon-magnify-out",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 48,
@@ -506,7 +530,7 @@
 					"prevSize": 32,
 					"code": 77,
 					"name": "icon-magnify",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 34,
@@ -514,7 +538,7 @@
 					"prevSize": 32,
 					"code": 109,
 					"name": "icon-menu",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 50,
@@ -522,7 +546,7 @@
 					"prevSize": 32,
 					"code": 243,
 					"name": "icon-move",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 51,
@@ -530,7 +554,7 @@
 					"prevSize": 32,
 					"code": 121,
 					"name": "icon-new-window",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 52,
@@ -538,7 +562,7 @@
 					"prevSize": 32,
 					"code": 111,
 					"name": "icon-object",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 73,
@@ -546,7 +570,7 @@
 					"prevSize": 32,
 					"code": 63,
 					"name": "icon-object-unknown",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 53,
@@ -554,7 +578,7 @@
 					"prevSize": 32,
 					"code": 86,
 					"name": "icon-packet",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 54,
@@ -562,7 +586,7 @@
 					"prevSize": 32,
 					"code": 234,
 					"name": "icon-page",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 55,
@@ -570,7 +594,7 @@
 					"prevSize": 32,
 					"code": 241,
 					"name": "icon-pause",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 56,
@@ -578,7 +602,7 @@
 					"prevSize": 32,
 					"code": 112,
 					"name": "icon-pencil",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 65,
@@ -586,7 +610,7 @@
 					"prevSize": 32,
 					"code": 79,
 					"name": "icon-people",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 57,
@@ -594,7 +618,7 @@
 					"prevSize": 32,
 					"code": 239,
 					"name": "icon-play",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 58,
@@ -602,7 +626,7 @@
 					"prevSize": 32,
 					"code": 233,
 					"name": "icon-plot-resource",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 59,
@@ -610,7 +634,7 @@
 					"prevSize": 32,
 					"code": 43,
 					"name": "icon-plus",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 60,
@@ -618,7 +642,7 @@
 					"prevSize": 32,
 					"code": 45,
 					"name": "icon-minus",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 61,
@@ -626,7 +650,7 @@
 					"prevSize": 32,
 					"code": 54,
 					"name": "icon-sine",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 62,
@@ -634,7 +658,7 @@
 					"prevSize": 32,
 					"code": 228,
 					"name": "icon-T",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 63,
@@ -642,7 +666,7 @@
 					"prevSize": 32,
 					"code": 116,
 					"name": "icon-telemetry-panel",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 64,
@@ -650,7 +674,7 @@
 					"prevSize": 32,
 					"code": 84,
 					"name": "icon-telemetry",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 18,
@@ -658,7 +682,7 @@
 					"prevSize": 32,
 					"code": 246,
 					"name": "icon-thumbs-strip",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 67,
@@ -666,7 +690,7 @@
 					"prevSize": 32,
 					"code": 83,
 					"name": "icon-timeline",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 68,
@@ -674,7 +698,7 @@
 					"prevSize": 32,
 					"code": 245,
 					"name": "icon-timer",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 69,
@@ -682,7 +706,7 @@
 					"prevSize": 32,
 					"code": 90,
 					"name": "icon-trash",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 70,
@@ -690,7 +714,7 @@
 					"prevSize": 32,
 					"code": 229,
 					"name": "icon-two-parts-both",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 71,
@@ -698,7 +722,7 @@
 					"prevSize": 32,
 					"code": 231,
 					"name": "icon-two-parts-one-only",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 72,
@@ -706,7 +730,7 @@
 					"prevSize": 32,
 					"code": 120,
 					"name": "icon-x-heavy",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 66,
@@ -714,7 +738,7 @@
 					"prevSize": 32,
 					"code": 58946,
 					"name": "icon-x",
-					"tempChar": ""
+					"tempChar": ""
 				}
 			],
 			"id": 2,
@@ -729,6 +753,65 @@
 			"height": 1024,
 			"prevSize": 32,
 			"icons": [
+				{
+					"id": 96,
+					"paths": [
+						"M832 752c0 44-36 80-80 80h-480c-44 0-80-36-80-80v-480c0-44 36-80 80-80h480c44 0 80 36 80 80v480z"
+					],
+					"attrs": [],
+					"isMulticolor": false,
+					"grid": 0,
+					"tags": [
+						"icon-bullet"
+					],
+					"colorPermutations": {
+						"16161751": []
+					}
+				},
+				{
+					"id": 95,
+					"paths": [
+						"M923 438.2l-151-100.6c-36-24-103.8-24-139.8 0l-151 100.6c-44.6 29.8-102.6 46.2-163 46.2s-118.4-16.4-163-46.2l-151.4-100.6c-1.8-1.2-3.8-2.4-5.8-3.6v208c36.6 7.4 70.6 20.8 99 39.8l151 100.6c36 24 103.8 24 139.8 0l151-100.6c44.6-29.8 102.6-46.2 163-46.2s118.4 16.4 163 46.2l151 100.6c1.8 1.2 3.8 2.4 5.8 3.6v-208c-36.2-7.2-70.2-20.8-98.6-39.8z",
+						"M923 822.2l-151-100.6c-36-24-103.8-24-139.8 0l-151 100.6c-44.6 29.8-102.6 46.2-163 46.2s-118.4-16.4-163-46.2l-151.4-100.6c-1.8-1.2-3.8-2.4-5.8-3.6v112c0 105.6 86.4 192 192 192h640c94.8 0 174.2-69.8 189.4-160.4-35.6-7.4-68.6-20.8-96.4-39.4z",
+						"M97 197.8l151 100.6c36 24 103.8 24 139.8 0l151-100.6c44.8-29.8 102.6-46.2 163.2-46.2s118.4 16.4 163 46.2l151 100.6c1.8 1.2 3.8 2.4 5.8 3.6v-112c0-105.6-86.4-192-192-192h-639.8c-94.8 0-174.2 69.8-189.4 160.4 35.6 7.4 68.6 20.8 96.4 39.4z"
+					],
+					"attrs": [],
+					"isMulticolor": false,
+					"grid": 0,
+					"tags": [
+						"icon-session"
+					],
+					"colorPermutations": {
+						"16161751": [
+							0,
+							0,
+							0
+						]
+					}
+				},
+				{
+					"id": 94,
+					"paths": [
+						"M546.4 431.2l32-24c31.6-23.8 91.6-23.8 123.2 0l32 24c10.8 8 22.2 15.2 34.4 21.4v-201.2c-38-19.6-82.2-30-128-30-60.4 0-118.2 18.2-162.4 51.4l-32 24c-31.6 23.8-91.6 23.8-123.2 0l-32-24c-10.8-8-22.2-15.2-34.4-21.4v201.2c38 19.6 82.2 30 128 30 60.4 0 118.2-18.2 162.4-51.4z",
+						"M640 541.4c-60.4 0-118.2 18.2-162.4 51.4l-32 24c-31.6 23.8-91.6 23.8-123.2 0l-32-24c-10.8-8-22.2-15.2-34.4-21.4v201.2c38 19.6 82.2 30 128 30 60.4 0 118.2-18.2 162.4-51.4l32-24c31.6-23.8 91.6-23.8 123.2 0l32 24c10.8 8 22.2 15.2 34.4 21.4v-201.2c-38-19.6-82.2-30-128-30z",
+						"M832 0h-128v192h127.6c0.2 0 0.2 0.2 0.4 0.4v639.4c0 0.2-0.2 0.2-0.4 0.4h-127.6v192h128c105.6 0 192-86.4 192-192v-640.2c0-105.6-86.4-192-192-192z",
+						"M320 832h-127.6c-0.2 0-0.2-0.2-0.4-0.4v-639.4c0-0.2 0.2-0.2 0.4-0.4h127.6v-191.8h-128c-105.6 0-192 86.4-192 192v640c0 105.6 86.4 192 192 192h128v-192z"
+					],
+					"attrs": [],
+					"isMulticolor": false,
+					"grid": 0,
+					"tags": [
+						"icon-topic"
+					],
+					"colorPermutations": {
+						"16161751": [
+							0,
+							0,
+							0,
+							0
+						]
+					}
+				},
 				{
 					"id": 93,
 					"paths": [
@@ -749,6 +832,10 @@
 						"icon-eye-open-no-gleam"
 					],
 					"colorPermutations": {
+						"16161751": [
+							1,
+							1
+						],
 						"125525525516161751": [
 							1,
 							1
@@ -775,6 +862,10 @@
 						"icon-crosshair"
 					],
 					"colorPermutations": {
+						"16161751": [
+							1,
+							1
+						],
 						"125525525516161751": [
 							1,
 							1
@@ -801,6 +892,10 @@
 						"icon-collapse-pane-left"
 					],
 					"colorPermutations": {
+						"16161751": [
+							0,
+							0
+						],
 						"125525525516161751": [
 							0,
 							0
@@ -827,6 +922,10 @@
 						"icon-collapse-pane-right"
 					],
 					"colorPermutations": {
+						"16161751": [
+							0,
+							0
+						],
 						"125525525516161751": [
 							0,
 							0
@@ -853,6 +952,10 @@
 						"icon-save-v2"
 					],
 					"colorPermutations": {
+						"16161751": [
+							0,
+							0
+						],
 						"125525525516161751": [
 							0,
 							0
@@ -872,6 +975,7 @@
 						"icon-dataset"
 					],
 					"colorPermutations": {
+						"16161751": [],
 						"125525525516161751": []
 					}
 				},
@@ -895,6 +999,10 @@
 						"icon-bell"
 					],
 					"colorPermutations": {
+						"16161751": [
+							1,
+							1
+						],
 						"125525525516161751": [
 							1,
 							1
@@ -921,6 +1029,10 @@
 						"icon-hourglass"
 					],
 					"colorPermutations": {
+						"16161751": [
+							1,
+							1
+						],
 						"125525525516161751": [
 							1,
 							1
@@ -943,6 +1055,9 @@
 						"icon-info-v1.5"
 					],
 					"colorPermutations": {
+						"16161751": [
+							0
+						],
 						"125525525516161751": [
 							0
 						]
@@ -1336,6 +1451,10 @@
 						"icon-box-with-arrow-cursor"
 					],
 					"colorPermutations": {
+						"16161751": [
+							0,
+							0
+						],
 						"125525525516161751": [
 							0,
 							0
@@ -2367,12 +2486,6 @@
 						161,
 						75,
 						1
-					],
-					[
-						255,
-						255,
-						255,
-						1
 					]
 				]
 			],

platform/commonUI/general/res/fonts/symbols/wtdsymbols.svg

@@ -94,7 +94,8 @@
 <glyph unicode="&#xe614;" glyph-name="icon-collapse-pane-right" d="M768 960h256v-1024h-256c-105.6 0-192 86.4-192 192v640c0 105.6 86.4 192 192 192zM512 640l-512-320v640z" />
 <glyph unicode="&#xe615;" glyph-name="icon-eye-open" d="M512 896c-261 0-480.6-195.4-512-448 31.4-252.6 251-448 512-448s480.6 195.4 512 448c-31.4 252.6-251 448-512 448zM768.2 225.4c-71.4-62.8-162.8-97.4-257.6-97.4s-186.2 34.6-257.6 97.4c-66.6 58.6-110.6 137.2-125 222.6 0 0 0 0.2 0 0.2 76.8 154 220.8 257.6 384 257.6s307.2-103.8 384-257.6c0 0 0-0.2 0-0.2-14.4-85.4-61.2-164-127.8-222.6zM512 672c-123.8 0-224-100.2-224-224s100.2-224 224-224 224 100.2 224 224-100.2 224-224 224z" />
 <glyph unicode="&#xe616;" glyph-name="icon-eye-open-no-gleam" d="M512 896c-261 0-480.6-195.4-512-448 31.4-252.6 251-448 512-448s480.6 195.4 512 448c-31.4 252.6-251 448-512 448zM768.2 225.4c-71.4-62.8-162.8-97.4-257.6-97.4s-186.2 34.6-257.6 97.4c-66.6 58.6-110.6 137.2-125 222.6 0 0 0 0.2 0 0.2 76.8 154 220.8 257.6 384 257.6s307.2-103.8 384-257.6c0 0 0-0.2 0-0.2-14.4-85.4-61.2-164-127.8-222.6zM512 672c-123.8 0-224-100.2-224-224s100.2-224 224-224 224 100.2 224 224-100.2 224-224 224zM576 416c-53 0-96 43-96 96s43 96 96 96 96-43 96-96c0-53-43-96-96-96z" />
-<glyph unicode="&#xe617;" glyph-name="icon-topic" d="M832 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.4zM686 576c7.2 0 21-7.4 38.6-25.8 11.8 24.8 26.4 52.2 43.4 79v50c-26.4 16.4-53.8 24.6-82 24.6-37.6 0-74.2-14.8-108.8-44.2 27.4-37.8 49.6-78.6 66.2-113.8 19.4 21.6 34.8 30.2 42.6 30.2zM338 320c-7.2 0-21 7.4-38.6 25.8-11.8-24.8-26.4-52.2-43.4-79v-74.8h82c37.6 0 74.2 14.8 108.8 44.2-27.4 37.8-49.6 78.6-66.2 113.8-19.4-21.4-34.8-30-42.6-30zM768 415.8c-38.2-70.6-72.8-95.8-85-95.8-15 0-64.2 38.4-112 152.8-17.4 41.8-46.6 101.6-85.8 149.4-44.8 54.4-93.2 82-144.2 82-29.2 0-57.6-9-85-27v-196.8c38.2 70.6 72.8 95.8 85 95.8 15 0 64.2-38.4 112-152.8 17.4-41.8 46.6-101.6 85.8-149.4 44.8-54.4 93.2-82 144.2-82 29.2 0 57.6 9 85 27v196.8z" />
-<glyph unicode="&#xe618;" glyph-name="icon-session" d="M101.2 672.4c57.2 69.6 118.6 104.8 182.8 104.8s125.6-35.2 182.8-104.8c51.4-62.6 89.8-141.2 112.6-196.2 27.6-65.8 58.8-121 90.6-159.6 10-12 44.2-51.4 69.8-51.4 6.4 0 30.4 3.8 69.8 51.4 31.8 38.6 63.2 93.8 90.6 159.6 23 55 61.2 133.6 112.6 196.2 3.6 4.4 7.2 8.6 10.8 12.8v18.8c0.4 140.8-114.8 256-255.6 256h-512c-140.8 0-256-115.2-256-256v-201c23.4 51.8 57.4 116.4 101.2 169.4zM744 778c54 0 106.4-24.4 156-72.8-31.6-44.6-57.4-92.2-77.6-134.2-33.4 42-61.8 59.4-78.4 59.4-17.4 0-47.8-19.2-83.2-65.8-27 57.6-54 102.4-77.4 136 51 51.2 104.8 77.4 160.6 77.4zM922.8 223.6c-57.2-69.6-118.8-104.8-182.8-104.8s-125.6 35.2-182.8 104.8c-51.4 62.6-89.8 141.2-112.6 196.2-27.6 65.8-58.8 121-90.6 159.6-10 12-44.2 51.4-69.8 51.4-6.4 0-30.4-3.8-69.8-51.4-31.8-38.6-63.2-93.8-90.6-159.6-23-55-61.2-133.6-112.6-196.2-3.6-4.4-7.2-8.6-10.8-12.8v-18.8c0-140.8 115.2-256 256-256h512c140.8 0 256 115.2 256 256v201c-23.8-51.8-57.8-116.4-101.6-169.4zM280 118c-54 0-106.4 24.4-156 72.8 31.6 44.6 57.4 92.2 77.6 134.2 33.4-42 61.8-59.4 78.4-59.4 17.4 0 47.8 19.2 83.2 65.8 27-57.6 54-102.4 77.4-136-51-51.2-104.8-77.4-160.6-77.4z" />
+<glyph unicode="&#xe617;" glyph-name="icon-topic" d="M546.4 528.8l32 24c31.6 23.8 91.6 23.8 123.2 0l32-24c10.8-8 22.2-15.2 34.4-21.4v201.2c-38 19.6-82.2 30-128 30-60.4 0-118.2-18.2-162.4-51.4l-32-24c-31.6-23.8-91.6-23.8-123.2 0l-32 24c-10.8 8-22.2 15.2-34.4 21.4v-201.2c38-19.6 82.2-30 128-30 60.4 0 118.2 18.2 162.4 51.4zM640 418.6c-60.4 0-118.2-18.2-162.4-51.4l-32-24c-31.6-23.8-91.6-23.8-123.2 0l-32 24c-10.8 8-22.2 15.2-34.4 21.4v-201.2c38-19.6 82.2-30 128-30 60.4 0 118.2 18.2 162.4 51.4l32 24c31.6 23.8 91.6 23.8 123.2 0l32-24c10.8-8 22.2-15.2 34.4-21.4v201.2c-38 19.6-82.2 30-128 30zM832 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 192zM320 128h-127.6c-0.2 0-0.2 0.2-0.4 0.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-192h128v192z" />
+<glyph unicode="&#xe618;" glyph-name="icon-session" d="M923 521.8l-151 100.6c-36 24-103.8 24-139.8 0l-151-100.6c-44.6-29.8-102.6-46.2-163-46.2s-118.4 16.4-163 46.2l-151.4 100.6c-1.8 1.2-3.8 2.4-5.8 3.6v-208c36.6-7.4 70.6-20.8 99-39.8l151-100.6c36-24 103.8-24 139.8 0l151 100.6c44.6 29.8 102.6 46.2 163 46.2s118.4-16.4 163-46.2l151-100.6c1.8-1.2 3.8-2.4 5.8-3.6v208c-36.2 7.2-70.2 20.8-98.6 39.8zM923 137.8l-151 100.6c-36 24-103.8 24-139.8 0l-151-100.6c-44.6-29.8-102.6-46.2-163-46.2s-118.4 16.4-163 46.2l-151.4 100.6c-1.8 1.2-3.8 2.4-5.8 3.6v-112c0-105.6 86.4-192 192-192h640c94.8 0 174.2 69.8 189.4 160.4-35.6 7.4-68.6 20.8-96.4 39.4zM97 762.2l151-100.6c36-24 103.8-24 139.8 0l151 100.6c44.8 29.8 102.6 46.2 163.2 46.2s118.4-16.4 163-46.2l151-100.6c1.8-1.2 3.8-2.4 5.8-3.6v112c0 105.6-86.4 192-192 192h-639.8c-94.8 0-174.2-69.8-189.4-160.4 35.6-7.4 68.6-20.8 96.4-39.4z" />
+<glyph unicode="&#xe619;" 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="&#xe642;" 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" />
 </font></defs></svg>

platform/commonUI/general/res/sass/_archetypes.scss

@@ -34,7 +34,7 @@
 .cols {
     @include clearfix;
     .col {
-        @include box-sizing(border-box);
+        box-sizing: border-box;
         @include clearfix;
         float: left;
         margin-left: $ueColMargin;
@@ -94,7 +94,7 @@
 /********************************************* FLEX STYLES */
 .l-flex-row,
 .l-flex-col {
-    @include display-flex;
+    @include display(flex);
     @include flex-wrap(nowrap);
     .flex-elem {
         min-height: 0; // Needed to allow element to shrink within parent
@@ -111,7 +111,7 @@
     }
     .flex-container {
         // Apply to wrapping elements, mct-includes, etc.
-        @include display-flex;
+        @include display(flex);
         @include flex-wrap(nowrap);
         @include flex(1 1 auto);
         min-height:0;
@@ -144,4 +144,4 @@
 
 .flex-justify-end {
     @include justify-content(flex-end);
-}
+}

platform/commonUI/general/res/sass/_autoflow.scss

@@ -64,7 +64,7 @@
 		white-space: nowrap;
 		.l-autoflow-col {
 //			@include test();
-			@include box-sizing(border-box);
+			box-sizing: border-box;
 			border-left: 1px solid $colorInteriorBorder;
 			display: inline-block;
 //			height: 100%;
@@ -74,7 +74,7 @@
 			width: $colW;
 			.l-autoflow-row {
 				//				@include test(red);
-				@include box-sizing(border-box);
+				box-sizing: border-box;
 				border-bottom: 1px solid rgba(#fff,0.05);
 				display: block;
 				height: $rowH;
@@ -110,7 +110,7 @@
 						width: auto;
 					}
 					&.r {
-						@include border-radius($smallCr);
+						border-radius: $smallCr;
 						float: right;
 						margin-left: $interiorMargin;
 						padding-left: $valPad;

platform/commonUI/general/res/sass/_badges.scss

@@ -27,7 +27,7 @@
 }
 
 .top-bar .badge {
-    @include border-radius($controlCr * 1.5);
+    border-radius: $controlCr * 1.5;
     $h: $btnStdH; //$ueTopBarBtnH; // - 5px;
     font-size: 1.4em;
     height: $h;
@@ -39,7 +39,7 @@
 
 //.top-bar .btn-browse .badge {
 // Moved to _controls.scss .btn.browse-btn
-//    @include border-radius($controlCr * 1.5);
+//    border-radius: $controlCr * 1.5;
 //    $d: 20px;
 //    display: block;
 //    font-size: 1em;
@@ -53,7 +53,7 @@
 
 .super-menu .badge {
     @include background-image(linear-gradient(lighten($colorCreateBtn, 10%), $colorCreateBtn));
-    @include border-radius($controlCr);
+    border-radius: $controlCr;
     @include boxShdwSubtle();
 //    display: inline-block;
 //    margin-right: 10px !important;

platform/commonUI/general/res/sass/_constants.scss

@@ -44,7 +44,7 @@ $ueAppLogoW: 105px;
 $ueEditToolBarH: 25px;
 $ueCollapsedPaneEdgeM: 22px;
 $uePaneMiniTabH: $ueTopBarH;
-$uePaneMiniTabW: 9px;
+$uePaneMiniTabW: 10px;
 $uePaneMiniTabCollapsedW: 11px;
 $ueEditLeftPaneW: 75%;
 $treeSearchInputBarH: 25px;

platform/commonUI/general/res/sass/_effects.scss

@@ -21,7 +21,7 @@
  *****************************************************************************/
 .disabled,
 a.disabled {
-	@include opacity($controlDisabledOpacity);
+	opacity: $controlDisabledOpacity;
 	pointer-events: none !important;
 	cursor: default !important;
 }
@@ -39,39 +39,35 @@ a.disabled {
 	@include test();
 }
 
-@mixin customKeyframes($animName: pulse, $op0: 0.5) {
-	@include keyframes($animName) {
-		0%   { opacity: $op0; }
-		100% { opacity: 1; }
-	}
-	@include animation-name(pulse, 0.2);
-}
-
-@mixin pulse($dur: 500ms, $iteration: infinite, $opacity0: 0.5, $opacity100: 1) {
-    @include keyframes(pulse) {
+@mixin pulse($animName: pulse, $dur: 500ms, $iteration: infinite, $opacity0: 0.5, $opacity100: 1) {
+    @include keyframes($animName) {
         0%   { opacity: $opacity0; }
         100% { opacity: $opacity100; }
     }
-	@include animation-name(pulse);
+	@include animation-name($animName);
 	@include animation-duration($dur);
 	@include animation-direction(alternate);
 	@include animation-iteration-count($iteration);
 	@include animation-timing-function(ease-in-out);
 }
 
-@mixin pulseBorder($c: red, $dur: 500ms, $iteration: infinite, $delay: 0s, $opacity0: 0, $opacity100: 1) {
-	@include keyframes(pulseBorder) {
-		0%   { border-color: rgba($c, $opacity0); }
-		100% { border-color: rgba($c, $opacity100); }
-	}
-	@include animation-name(pulseBorder);
-	@include animation-duration($dur);
-	@include animation-direction(alternate);
-	@include animation-iteration-count($iteration);
-	@include animation-timing-function(ease);
-    @include animation-delay($delay);
+.pulse {
+	@include pulse($animName: pulse, $dur: 750ms);
 }
 
-.pulse {
-	@include pulse(750ms);
-}
+.pulse-subtle {
+    @include pulse($animName: pulse-subtle, $dur: 500ms, $opacity0: 0.7);
+}
+
+@mixin pulseBorder($c: red, $dur: 500ms, $iteration: infinite, $delay: 0s, $opacity0: 0, $opacity100: 1) {
+    @include keyframes(pulseBorder) {
+        0%   { border-color: rgba($c, $opacity0); }
+        100% { border-color: rgba($c, $opacity100); }
+    }
+    @include animation-name(pulseBorder);
+    @include animation-duration($dur);
+    @include animation-direction(alternate);
+    @include animation-iteration-count($iteration);
+    @include animation-timing-function(ease);
+    @include animation-delay($delay);
+}

platform/commonUI/general/res/sass/_fixed-position.scss

@@ -61,7 +61,7 @@
 		.l-fixed-position-box,
 		.l-fixed-position-image,
 		.l-fixed-position-text {
-			@include box-sizing(border-box);
+			box-sizing: border-box;
 			height: 100%;
 			width: 100%;
 		}
@@ -89,7 +89,7 @@
 				.l-elem {
 					//@include absPosDefault($p);
 					//@include absPosDefault(0);
-					@include box-sizing(border-box);
+					box-sizing: border-box;
 					display: block;
 					padding: 2px;
 					//width: 50%;
@@ -106,7 +106,7 @@
 						// @include test(blue);
 						// right: $p;
 						// left: auto;
-						@include border-radius($smallCr);
+						border-radius: $smallCr;
 						$valPad: 5px;
 						float: right;
 						margin-left: $interiorMargin;
@@ -125,7 +125,7 @@
 
 	.l-fixed-position-item-handle {
 		$brd: 1px solid $colorKey;
-		//		@include border-radius($controlCr);
+		//		border-radius: $controlCr;
 		background: rgba($colorKey, 0.5);
 		cursor: crosshair;
 		border: $brd;

platform/commonUI/general/res/sass/_global.scss

@@ -46,7 +46,6 @@ a {
 
 body, html {
 	-webkit-font-smoothing: subpixel-antialiased;
-	-moz-osx-font-smoothing: grayscale;
 	background-color: $colorBodyBg;
 	color: $colorBodyFg;
 	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
@@ -139,7 +138,7 @@ mct-container {
 }
 
 .ds {
-	@include box-shadow(rgba(#000, 0.7) 0 4px 10px 2px);
+	box-shadow: rgba(#000, 0.7) 0 4px 10px 2px;
 }
 
 .hide,

platform/commonUI/general/res/sass/_icons.scss

@@ -93,7 +93,7 @@
                 height: auto; width: auto;
                 position: absolute;
                 left: 0; top: 0; right: 0; bottom: 10%;
-                @include transform-origin(bottom, left);
+                @include transform-origin(bottom left);
                 @include transform(scale(0.3));
                 z-index: 2;
             }

platform/commonUI/general/res/sass/_inspector.scss

@@ -58,9 +58,8 @@
             }
         }
     }
-
     .l-inspector-part {
-        @include box-sizing(border-box);
+        box-sizing: border-box;
         padding-right: $interiorMargin;
         .form {
             margin-left: $treeVCW + $interiorMarginLg;
@@ -90,7 +89,7 @@
     }
 
     em.t-inspector-part-header {
-        @include border-radius($basicCr);
+        border-radius: $basicCr;
         background-color: $colorInspectorSectionHeaderBg;
         color: $colorInspectorSectionHeaderFg;
         margin-bottom: $interiorMargin;
@@ -116,7 +115,7 @@
     .inspector-location {
         .location-item {
             $h: 1.2em;
-            @include box-sizing(border-box);
+            box-sizing: border-box;
             cursor: pointer;
             display: inline-block;
             line-height: $h;

platform/commonUI/general/res/sass/_mixins.scss

@@ -175,8 +175,8 @@
 
 @mixin sliderTrack($bg: $scrollbarTrackColorBg) {
     //$b: 1px solid lighten($bg, 30%);
-    @include border-radius(2px);
-    @include box-sizing(border-box);
+    border-radius: 2px;
+    box-sizing: border-box;
     @include boxIncised(0.7);
     background-color: $bg;
     //border-bottom: $b;
@@ -210,7 +210,7 @@
 }
 
 @mixin boxIncised($sVal: 0.6, $inset: 5px) {
-    @include box-shadow(inset rgba(black, $sVal) 0 1px $inset);
+    box-shadow: inset rgba(black, $sVal) 0 1px $inset;
 }
 
 @mixin boxOutline($c: lighten($colorBodyBg, 20%)) {
@@ -219,24 +219,24 @@
 
 @mixin boxShdw($sVal: rgba(black, 0.4) 0 0 3px) {
 	@if $sVal != 'none' {
-		@include box-shadow($sVal);
+		box-shadow: $sVal;
 	}
 }
 
 @mixin boxShdwSubtle($sVal: 0.2) {
 	@if $sVal != 'none' {
-		@include box-shadow(rgba(black, $sVal) 0 1px 2px);
+		box-shadow: rgba(black, $sVal) 0 1px 2px;
 	}
 }
 
 @mixin boxShdwLarge($sVal: 0.7) {
 	@if $sVal != 'none' {
-		@include box-shadow(rgba(black, $sVal) 0 3px 10px);
+		box-shadow: rgba(black, $sVal) 0 3px 10px;
 	}
 }
 
 @mixin outerGlow($color: #fff, $sVal: 0.3) {
-    @include box-shadow(rgba($color, $sVal) 0 0 30px);
+    box-shadow: rgba($color, $sVal) 0 0 30px;
 }
 
 @mixin linearGlow($deg: 0, $c: red, $a: 0.4) {
@@ -249,18 +249,18 @@
 
 @mixin txtShdw($sVal) {
 	//@if $sVal != 'none' {
-		@include text-shadow($sVal);
+		text-shadow: $sVal;
 	//}
 }
 
 @mixin txtShdwSubtle($sVal: 0.1) {
 	@if $sVal != 'none' {
-	    @include text-shadow(rgba(black, $sVal) 0 1px 2px);
+	    text-shadow: rgba(black, $sVal) 0 1px 2px;
 	}
 }
 
 @mixin txtShdwLarge($sVal: 0.7) {
-    @include text-shadow(rgba(black, $sVal) 0 3px 7px);
+    text-shadow: rgba(black, $sVal) 0 3px 7px;
 }
 
 @function pullForward($c, $p: 20%) {
@@ -291,35 +291,32 @@
 
 @mixin containerBase($bg: $colorBodyBg, $fg: $colorBodyFg) {
 	background-color: $bg;
-	@include border-radius($controlCr);
-	@include box-sizing(border-box);
+	border-radius: $controlCr;
+	box-sizing: border-box;
 	color: $fg;
 	display: inline-block;
 }
 
-@mixin btnBase($bg: $colorBodyBg, $bgHov: none, $fg: $colorBodyFg, $ic: $colorBtnIcon) {
+@mixin btnBase($bg: $colorBodyBg, $bgHovColor: none, $fg: $colorBodyFg, $ic: $colorBtnIcon) {
 	@include user-select(none);
-    @include transition(background, .25s);
 	.icon {
 		color: $ic;
 	}
-	@include desktop {
-		@if $bgHov != none {
-			&:not(.disabled):hover {
-				@include background-image($bgHov);
-				>.icon {
-					color: lighten($ic, $ltGamma);
-				}
-			}
-		}
-	}
+  @if $bgHovColor != none {
+      &:not(.disabled):hover {
+          background: $bgHovColor; // was just background, and background-image before that
+          >.icon {
+              color: lighten($ic, $ltGamma);
+          }
+      }
+  }
 }
 
 @mixin input-base($bg: $colorInputBg, $fg: $colorInputFg, $shdw: rgba(black, 0.6) 0 1px 3px) {
 	@include appearance(none);
-	@include border-radius($controlCr);
-	@include box-sizing(border-box);
-	@include box-shadow(inset $shdw);
+	border-radius: $controlCr;
+	box-sizing: border-box;
+	box-shadow: inset $shdw;
 	background: $bg;
 	border: none;
 	color: $fg;
@@ -335,7 +332,7 @@
 }
 
 @mixin contextArrow() {
-	@include text-shadow(none);
+	text-shadow: none;
 	content: '\76';
 	display: inline-block;
 	font-family: 'symbolsfont';
@@ -408,13 +405,13 @@
 }
 
 @mixin tmpBorder($c: #ffcc00, $a: 0.75) {
-    @include box-sizing(border-box);
+    box-sizing: border-box;
     border: 1px dotted rgba($c, $a);
 }
 
 @mixin testObj($w: 2000px, $h: 1000px, $c: black, $a: 0.1) {
     &:after {
-        @include box-sizing(border-box);
+        box-sizing: border-box;
         @include bgDiagonalStripes($c, $a);
         color: rgba(white, 0.3);
         font-style: italic;

platform/commonUI/general/res/sass/_object-label.scss

@@ -41,12 +41,9 @@ mct-representation {
             .t-item-icon {
                 &:before {
                     $spinBW: 4px;
-                    $spinD: 0;
                     @include spinner($spinBW);
                     content: "";
                     padding: 30%;
-                    width: $spinD;
-                    height: $spinD;
                 }
                 .t-item-icon-glyph {
                     display: none;
@@ -59,6 +56,7 @@ mct-representation {
         }
     }
 }
+
 .selected mct-representation.s-status-pending .t-object-label .t-item-icon:before {
     border-color: rgba($colorItemTreeSelectedFg, 0.25) !important;
     border-top-color: rgba($colorItemTreeSelectedFg, 1.0) !important;

platform/commonUI/general/res/sass/controls/_breadcrumb.scss

@@ -8,9 +8,9 @@
 	.l-breadcrumb-item {
 		//@include test();
 		a {
-			@include box-sizing(border-box);
-			@include border-radius($basicCr*.75);
-			@include single-transition(background-color, 0.25s);
+			box-sizing: border-box;
+			border-radius: $basicCr*.75;
+			@include transition(background-color, 0.25s);
 			color: darken($colorBodyFg, 15%);
 			display: inline-block;
 			//margin-right: $interiorMargin;

platform/commonUI/general/res/sass/controls/_buttons.scss

@@ -32,7 +32,7 @@ $pad: $interiorMargin * $baseRatio;
 }
 
 .s-btn {
-    @include box-sizing(border-box);
+    box-sizing: border-box;
     padding: 0 $pad;
     font-size: 0.7rem;
     vertical-align: top;
@@ -66,7 +66,7 @@ $pad: $interiorMargin * $baseRatio;
 
     &:not(.major) {
         // bg, bgHov, fg, ic
-        @include btnSubtle($colorBtnBg, $colorKey, $colorBtnFg, $colorBtnIcon);
+        @include btnSubtle($colorBtnBg, $colorBtnBgHov, $colorBtnFg, $colorBtnIcon);
     }
     &.pause-play {
 
@@ -91,7 +91,7 @@ $pad: $interiorMargin * $baseRatio;
         &.paused {
             @include btnSubtle($colorPausedBg, pushBack($colorPausedBg, 10%), $colorPausedFg, $colorPausedFg);
             .icon {
-                @include pulse(1000ms);
+                @include pulse($dur: 1000ms);
                 :before {
                     content: "\0000EF";
                 }
@@ -111,172 +111,154 @@ $pad: $interiorMargin * $baseRatio;
     // Color and styling additionally in _controls.scss
 }
 
-.mini-tab {
+body.desktop .mini-tab {
     // Meant to be used as pane hide/show control elements in concert with mct-splitter
-    //@extend .ui-symbol;
-    @include desktop {
-        //@include test(green);
-        $iconH: $uePaneMiniTabH;
-        $iconW: $uePaneMiniTabW;
-        $iconInnerLR: 0;
-        $arwD: 9px;
-        $arwOffsetX: 0px;
-        $arwAnimOffsetX: 2px + $iconInnerLR;
-        $cBg: pullForward($colorBodyBg, 15%);
-        $cFg: $cBg;
+    $iconH: $uePaneMiniTabH;
+    $iconW: $uePaneMiniTabW;
+    $iconInnerLR: 0;
+    $arwD: 9px;
+    $arwOffsetX: 0px;
+    $arwAnimOffsetX: 2px + $iconInnerLR;
+    $cBg: pullForward($colorBodyBg, 15%);
+    $cFg: $cBg;
 
 
-        @include border-radius($basicCr);
-        //@include boxShdw($shdwBtns);
-        @include box-sizing(border-box);
-        @include trans-prop-nice((color, background-color), 100ms);
-        color: $cFg;
-        cursor: pointer;
-        font-family: symbolsfont;
-        font-size: $arwD;
-        display: block;
-        position: absolute;
-        line-height: $iconH;
-        height: $iconH; width: $iconW;
-        text-align: center;
+    border-radius: $basicCr;
+    //@include boxShdw($shdwBtns);
+    box-sizing: border-box;
+    @include trans-prop-nice((color, background-color), 100ms);
+    color: $cFg;
+    cursor: pointer;
+    font-family: symbolsfont;
+    font-size: $arwD;
+    display: block;
+    position: absolute;
+    line-height: $iconH;
+    height: $iconH; width: $iconW;
+    text-align: center;
 
+    &.collapsed {
+        // State when the pane this element controls has been collapsed
+        @include btnSubtle($colorBtnBg, $colorKey, $colorBtnFg, $colorBtnIcon);
+        &:before { opacity: 0; }
+        &:after { opacity: 1; }
         &:hover {
-            //background-color: $cBg;
-            color: $colorKey; //pullForward($cFg, $ltGamma);
+            &:before { opacity: 1; }
+            &:after { opacity: 0; }
         }
 
-        &.collapsed {
-            // State when the pane this element controls has been collapsed
-            @include btnSubtle($colorBtnBg, $colorKey, $colorBtnFg, $colorBtnIcon);
-            &:before { opacity: 0; }
-            &:after { opacity: 1; }
-            &:hover {
-                &:before { opacity: 1; }
-                &:after { opacity: 0; }
-            }
+    }
 
-        }
+    &:before,
+    &:after {
+        @include trans-prop-nice((left, right, opacity), 250ms);
+        display: block;
+        height: 100%;
+        position: absolute;
+    }
 
-        &:before,
-        &:after {
-            //@include test();
-            @include trans-prop-nice((left, right, opacity), 250ms);
-            display: block;
-            height: 100%;
-            position: absolute;
-        }
+    &:before {
+        // Always the arrow icon
+        width: $arwD;
+    }
+    &:after {
+        // Always icon; content is set in _layout.scss
+        width: 100%;
+        text-align: center;
+        opacity: 0;
+    }
 
+    &.anchor-left {
+        // |<
+        text-align: right;
         &:before {
-            // Always the arrow icon
-            //@include test(green);
-            //font-size: $arwD;
-            width: $arwD;
+            content:'\3c'; // Collapse left icon e613
+            right: $iconInnerLR;
         }
-        &:after {
-            // Always icon; content is set in _layout.scss
-            width: 100%;
-            text-align: center;
-            opacity: 0;
-        }
-
-        &.anchor-left {
-            // |<
-            text-align: right;
-            &:before {
-                content:'\3c'; // Collapse left icon e613
-                right: $iconInnerLR;
-            }
-            //&:hover:before { right: $arwAnimOffsetX; }
-            &.collapsed {
-                @include border-left-radius(0);
-                text-align: left;
-                &:before {
-                    content:'\3e';
-                    left: $iconInnerLR;
-                }
-                &:hover:before { left: $arwAnimOffsetX; }
-            }
-        }
-        &.anchor-right {
-            // >|
+        &.collapsed {
+            @include border-left-radius(0);
             text-align: left;
             &:before {
-                content:'\3e'; // Collapse right icon e614
+                content:'\3e';
                 left: $iconInnerLR;
             }
-            //&:hover:before { left: $arwAnimOffsetX; }
-            &.collapsed {
-                @include border-right-radius(0);
-                &:before {
-                    text-align: right;
-                    content:'\3c';
-                    right: $iconInnerLR;
-                }
-                &:hover:before { right: $arwAnimOffsetX; }
+            &:hover:before { left: $arwAnimOffsetX; }
+        }
+    }
+    &.anchor-right {
+        // >|
+        text-align: left;
+        &:before {
+            content:'\3e'; // Collapse right icon e614
+            left: $iconInnerLR;
+        }
+        &.collapsed {
+            @include border-right-radius(0);
+            &:before {
+                text-align: right;
+                content:'\3c';
+                right: $iconInnerLR;
             }
+            &:hover:before { right: $arwAnimOffsetX; }
         }
     }
 }
 
-.mini-tab-icon {
+body.desktop .mini-tab-icon {
     // Meant to be used as pane hide/show control elements in concert with mct-splitter
-    //@extend .ui-symbol;
-    @include desktop {
-        $d: $uePaneMiniTabW;
-        //@include trans-prop-nice(transform, 150ms);
-        color: pullForward($colorBodyBg, 15%);
-        cursor: pointer;
-        display: block;
-        font-family: symbolsfont;
-        font-size: $d;
+    $d: $uePaneMiniTabW;
+    color: pullForward($colorBodyBg, 15%);
+    cursor: pointer;
+    display: block;
+    font-family: symbolsfont;
+    font-size: $d;
+    position: absolute;
+    height: $d; width: $d;
+    line-height: $d;
+    overflow: hidden;
+    word-break: break-all;
+
+    &.collapsed {
+        $d: $uePaneMiniTabCollapsedW;
+        width: $d; font-size: $d;
+    }
+
+    &:before,
+    &:after {
         position: absolute;
-        height: $d; width: $d;
-        line-height: $d;
-        overflow: hidden;
-        word-break: break-all;
+        display: inherit;
+    }
 
-        &.collapsed {
-            $d: $uePaneMiniTabCollapsedW;
-            width: $d; font-size: $d;
-        }
+    &:before {
+        content: '\78'; // X icon
+    }
 
-        &:before,
-        &:after {
-            position: absolute;
-            display: inherit;
-        }
-
-        &:before {
-            content: '\78'; // X icon
-        }
-
-        &:hover {
-            color: $colorKey;
-            //@include transform(scale(1.2));
-        }
+    &:hover {
+        color: $colorKey;
     }
 }
 
 .l-btn-set {
     // Buttons that have a very tight conceptual grouping - no internal space between them.
     // Structure: .btn-set > mct-representation class=first|last > .s-btn
-    //@include test(red);
     font-size: 0; // Remove space between s-btn elements due to white space in markup
 
     .s-btn {
-        @include border-radius(0);
+        border-radius: 0;
         margin-left: 1px;
     }
 
     .first {
-        .s-btn {
+        .s-btn,
+        &.s-btn {
             @include border-left-radius($controlCr);
             margin-left: 0;
         }
     }
 
     .last {
-        .s-btn {
+        .s-btn,
+        &.s-btn {
             @include border-right-radius($controlCr);
         }
     }

platform/commonUI/general/res/sass/controls/_color-palette.scss

@@ -25,7 +25,7 @@
 	$m: 1;
 	$colorSelectedColor: #fff;
 
-	@include box-sizing(border-box);
+	box-sizing: border-box;
 	padding: $interiorMargin !important;
 
 	.l-palette-row {
@@ -34,7 +34,7 @@
 		width: ($d * $colorsPerRow) + ($m * $colorsPerRow);
 
 		.l-palette-item {
-			@include box-sizing(border-box);
+			box-sizing: border-box;
 			@include txtShdwSubtle(0.8);
 			@include trans-prop-nice-fade(0.25s);
 			border: 1px solid transparent;

platform/commonUI/general/res/sass/controls/_controls.scss

@@ -28,8 +28,8 @@
     }
     .accordion-head {
         $op: 0.2;
-        @include border-radius($basicCr * 0.75);
-        @include box-sizing("border-box");
+        border-radius: $basicCr * 0.75;
+        box-sizing: "border-box";
         background: rgba($colorBodyFg, $op);
         cursor: pointer;
         font-size: 0.75em;
@@ -83,7 +83,7 @@
 
 .l-control-group {
     // Buttons that have a conceptual grouping - internal space between, and a divider between groups.
-    @include box-sizing(border-box);
+    box-sizing: border-box;
     border-left: 1px solid $colorInteriorBorder;
     display: inline-block;
     padding: 0 $interiorMargin;
@@ -123,9 +123,9 @@ label.radio.custom {
         height: $d;
         width: $d;
         &:before {
-            @include border-radius($basicCr * .75);
+            border-radius: $basicCr * .75;
             background: $bg;
-            @include box-shadow(inset rgba(black, 0.4) 0 1px 2px);
+            box-shadow: inset rgba(black, 0.4) 0 1px 2px;
             box-sizing: border-box;
             content: "";
             font-family: 'symbolsfont';
@@ -181,7 +181,7 @@ label.radio.custom input:checked ~ em:before { content: "\e619"; }
 
 .item .checkbox {
     &.checked label {
-        @include box-shadow(none);
+        box-shadow: none;
         border-bottom: none;
     }
 }
@@ -234,16 +234,16 @@ label.radio.custom input:checked ~ em:before { content: "\e619"; }
         font-size: 0.7em;
         @include webkitProp(flex, '0 0 1');
     }
+}
 
-    @include desktop {
+body.desktop .object-header {
+    .context-available {
+        @include trans-prop-nice(opacity, 0.25s);
+        opacity: 0;
+    }
+    &:hover {
         .context-available {
-            @include trans-prop-nice(opacity, 0.25s);
-            opacity: 0;
-        }
-        &:hover {
-            .context-available {
-                opacity: 1;
-            }
+            opacity: 1;
         }
     }
 }
@@ -292,13 +292,13 @@ label.radio.custom input:checked ~ em:before { content: "\e619"; }
 }
 
 .s-progress-bar {
-    @include border-radius($basicCr);
+    border-radius: $basicCr;
     @include boxIncised(0.3, 4px);
     background: $colorProgressBarOuter;
     .progress-amt {
-        @include border-radius($basicCr);
+        border-radius: $basicCr;
         @include boxShdw();
-        @include border-radius($basicCr - 1);
+        border-radius: $basicCr - 1;
         @include trans-prop-nice(width);
         &:before {
             background-color: $colorProgressBarAmt;
@@ -432,7 +432,7 @@ label.radio.custom input:checked ~ em:before { content: "\e619"; }
 .l-calendar {
     $colorMuted: pushBack($colorMenuFg, 30%);
     ul.l-cal-row {
-        @include display-flex;
+        @include display(flex);
         @include flex-flow(row nowrap);
         margin-top: 1px;
         &:first-child {
@@ -480,11 +480,11 @@ label.radio.custom input:checked ~ em:before { content: "\e619"; }
 
 /******************************************************** BROWSER ELEMENTS */
 
-@include desktop {
+body.desktop {
     ::-webkit-scrollbar {
-        @include border-radius(2px);
-        @include box-sizing(border-box);
-        @include box-shadow(inset $scrollbarTrackShdw);
+        border-radius: 2px;
+        box-sizing: border-box;
+        box-shadow: inset $scrollbarTrackShdw;
         background-color: $scrollbarTrackColorBg;
         height: $scrollbarTrackSize;
         width: $scrollbarTrackSize;
@@ -495,8 +495,8 @@ label.radio.custom input:checked ~ em:before { content: "\e619"; }
         $hc: $scrollbarThumbColorHov;
         $gr: 5%;
         @include background-image(linear-gradient(lighten($bg, $gr), $bg 20px));
-        @include border-radius(2px);
-        @include box-sizing(border-box);
+        border-radius: 2px;
+        box-sizing: border-box;
         &:hover {
             @include background-image(linear-gradient(lighten($hc, $gr), $hc 20px));
         }

platform/commonUI/general/res/sass/controls/_menus.scss

@@ -72,7 +72,7 @@
 }
 
 .s-menu {
-	@include border-radius($basicCr);
+	border-radius: $basicCr;
 	@include containerSubtle($colorMenuBg, $colorMenuFg);
 	@include boxShdw($shdwMenu);
 	@include txtShdw($shdwMenuText);
@@ -87,7 +87,7 @@
 	ul {
 		@include menuUlReset();
 		li {
-			@include box-sizing(border-box);
+			box-sizing: border-box;
 			border-top: 1px solid pullForward($colorMenuBg, 10%);
 			color: pullForward($colorMenuBg, 60%);
 			line-height: $menuLineH;
@@ -171,7 +171,7 @@
 		@include absPosDefault($interiorMargin);
 	}
 	.pane {
-		@include box-sizing(border-box);
+		box-sizing: border-box;
 		&.left {
 			//@include test();
 			border-right: 1px solid pullForward($colorMenuBg, 10%);
@@ -183,7 +183,7 @@
 			overflow-y: auto;
 			ul {
 				li {
-					@include border-radius($controlCr);
+					border-radius: $controlCr;
 					padding-left: 30px;
 					border-top: none;
 				}

platform/commonUI/general/res/sass/controls/_messages.scss

@@ -36,11 +36,16 @@
 	}
 }
 
+mct-include.status-block-holder {
+    // mct-include that wraps status.block
+    // Must use display: inline-block to fix white space problems
+    display: inline-block;
+}
+
 .status.block {
     $transDelay: 1.5s;
     $transSpeed: .25s;
 	color: $colorStatusDefault;
-	cursor: default;
 	display: inline-block;
 	margin-right: $interiorMargin;
 	.status-indicator,
@@ -50,6 +55,9 @@
 		vertical-align: top;
 	}
 
+    &.clickable { cursor: pointer; }
+    &:not(.clickable) { cursor: default; }
+
     &.no-icon {
         .status-indicator {
             display: none;
@@ -60,9 +68,6 @@
         float: right;
     }
 
-    &.subtle {
-        opacity: 0.5;
-    }
 	.status-indicator {
 		margin-right: $interiorMarginSm;
 	}
@@ -77,7 +82,7 @@
         &:hover {
             .label {
                 @include trans-prop-nice(max-width, $transSpeed, 0s);
-                max-width: 450px;
+                max-width: 600px;
                 width: auto;
             }
             .count {
@@ -99,17 +104,26 @@
 	&.error .status-indicator {
 		color: $colorStatusError;
 	}
+    &.available .status-indicator {
+        color: $colorStatusAvailable;
+    }
 	.count {
 		@include trans-prop-nice(opacity, $transSpeed, $transDelay);
 		font-weight: bold;
 		opacity: 1;
 	}
+    .s-btn {
+        background: $colorStatusBtnBg;
+        padding: 0 $interiorMargin;
+        height: auto;
+        line-height: inherit;
+    }
 }
 
 /* Styles for messages and message banners */
 .message {
 	&.block {
-		@include border-radius($basicCr);
+		border-radius: $basicCr;
 		padding: $interiorMarginLg;
 	}
 	&.error {
@@ -121,9 +135,9 @@
 .l-message-banner {
 	$m: $interiorMarginSm;
 	$lh: $ueFooterH - ($m*2) - 1;
-	@include box-sizing(border-box);
+	box-sizing: border-box;
 	@include ellipsize();
-	@include display-flex;
+	@include display(flex);
 	@include flex-direction(row);
 	@include align-items(center);
 	position: absolute;
@@ -146,7 +160,7 @@
         left: 50%;
         opacity: 1;
         &:not(.info) {
-            @include pulse(100ms, 10);
+            @include pulse($dur: 100ms, $iteration: 10);
         }
     }
 
@@ -184,12 +198,12 @@
 }
 
 .s-message-banner {
-	@include border-radius($controlCr);
+	border-radius: $controlCr;
 	@include statusBannerColors($colorStatusDefault, $colorStatusFg);
 	cursor: pointer;
 	a { color: inherit; }
 	.s-action {
-		@include border-radius($basicCr);
+		border-radius: $basicCr;
         @include trans-prop-nice(background-color);
 	}
 	.close {
@@ -250,7 +264,7 @@
 */
 
 .l-message {
-    @include display-flex;
+    @include display(flex);
     @include flex-direction(row);
     @include align-items(stretch);
     .type-icon.message-type {
@@ -275,17 +289,17 @@
 // Message as singleton
 .t-message-single {
     @include messageBlock(80px);
+}
 
-    @include desktop {
-        .l-message,
-        .bottom-bar {
-            @include absPosDefault();
-        }
+body.desktop .t-message-single {
+    .l-message,
+    .bottom-bar {
+        @include absPosDefault();
+    }
 
-        .bottom-bar {
-            top: auto;
-            height: $ovrFooterH;
-        }
+    .bottom-bar {
+        top: auto;
+        height: $ovrFooterH;
     }
 }
 
@@ -295,15 +309,13 @@
 
     .message-contents {
         .l-message {
-            //border-bottom: 1px solid pullForward($colorOvrBg, 20%);
-            @include border-radius($controlCr);
+            border-radius: $controlCr;
             background: rgba($colorOvrFg, 0.1);
             margin-bottom: $interiorMargin;
             padding: $interiorMarginLg;
 
             .message-contents,
             .bottom-bar {
-                //@include test(green);
                 position: relative;
             }
 
@@ -320,8 +332,8 @@
             }
         }
     }
+}
 
-    @include desktop {
-        .message-contents .l-message { margin-right: $interiorMarginLg; }
-    }
-}
+body.desktop .t-message-list {
+    .message-contents .l-message { margin-right: $interiorMarginLg; }
+}

platform/commonUI/general/res/sass/controls/_time-controller.scss

@@ -37,7 +37,7 @@ mct-include.l-time-controller {
 	{
 		//@include test();
 		@include absPosDefault(0, visible);
-		@include box-sizing(border-box);
+		box-sizing: border-box;
 		top: auto;
 	}
 	.l-time-range-slider,
@@ -73,7 +73,7 @@ mct-include.l-time-controller {
 		//@include test(green);
 		height: $r2H; bottom: $r3H + ($interiorMarginSm * 1);
 		.range-holder {
-			@include box-shadow(none);
+			box-shadow: none;
 			background: none;
 			border: none;
 			.range {
@@ -101,7 +101,7 @@ mct-include.l-time-controller {
 					}
 					&:after {
 						// Circle element
-						@include border-radius($myW);
+						border-radius: $myW;
 						@include transform(translateY(-50%));
 						top: 50%; right: 0; bottom: auto; left: 0;
 						width: auto;
@@ -167,7 +167,7 @@ mct-include.l-time-controller {
 			color: $sliderColorKnobHov;
 		}
 		&.knob-l {
-			//@include border-bottom-left-radius($knobCr); // MOVED TO _CONTROLS.SCSS
+			//border-bottom-left-radius: $knobCr; // MOVED TO _CONTROLS.SCSS
 			margin-left: $knobM;
 			.range-value {
 				text-align: right;
@@ -175,7 +175,7 @@ mct-include.l-time-controller {
 			}
 		}
 		&.knob-r {
-			//@include border-bottom-right-radius($knobCr);
+			//border-bottom-right-radius: $knobCr;
 			margin-right: $knobM;
 			.range-value {
 				left: $rangeValOffset;
@@ -193,7 +193,7 @@ mct-include.l-time-controller {
 
 .s-time-range-val {
 	//@include test();
-	@include border-radius($controlCr);
+	border-radius: $controlCr;
 	background-color: $colorInputBg;
 	padding: 1px 1px 0 $interiorMargin;
 }

platform/commonUI/general/res/sass/edit/_editor.scss

@@ -38,22 +38,22 @@
             z-index: 11;
         }
         &.edit-resize-nw {
-            @include border-bottom-right-radius($cr);
+            border-bottom-right-radius: $cr;
             cursor: nw-resize;
             top: 0; left: 0;
         }
         &.edit-resize-ne {
-            @include border-bottom-left-radius($cr);
+            border-bottom-left-radius: $cr;
             cursor: ne-resize;
             top: 0; right: 0;
         }
         &.edit-resize-se {
-            @include border-top-left-radius($cr);
+            border-top-left-radius: $cr;
             cursor: se-resize;
             bottom: 0; right: 0;
         }
         &.edit-resize-sw {
-            @include border-top-right-radius($cr);
+            border-top-right-radius: $cr;
             cursor: sw-resize;
             bottom: 0; left: 0;
         }
@@ -109,4 +109,4 @@
             }
         }
     }
-}
+}

platform/commonUI/general/res/sass/features/_imagery.scss

@@ -104,8 +104,8 @@
 }
 
 .l-image-thumb-item {
-	@include single-transition(background-color, 0.25s);
-	@include box-sizing(border-box);
+	@include transition(background-color, 0.25s);
+	box-sizing: border-box;
 	padding: 1px;
 	position: relative;
 	.l-thumb,

platform/commonUI/general/res/sass/forms/_elems.scss

@@ -20,7 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 .section-header {
-	@include border-radius($basicCr);
+	border-radius: $basicCr;
 	background: $colorFormSectionHeader;
 	$c: lighten($colorBodyFg, 20%);
 	color: $c;
@@ -39,7 +39,7 @@
 
 	.form-row {
 		$m: $interiorMargin;
-		@include box-sizing(border-box);
+		box-sizing: border-box;
 		@include clearfix;
 		border-top: 1px solid $colorFormLines;
 		margin-top: $m;
@@ -51,7 +51,7 @@
 
 		>.label,
 		>.controls {
-			@include box-sizing(border-box);
+			box-sizing: border-box;
 			@include clearfix;
 			font-size: 0.8rem;
 			line-height: $formInputH;
@@ -175,7 +175,7 @@ label.form-control.checkbox {
 	vertical-align: top;
 
 	div.s-hint {
-		@include border-radius($basicCr);
+		border-radius: $basicCr;
 		background: rgba($colorFormInvalid, 0.8);
 		display: block;
 		color: lighten($colorFormInvalid, 30%);

platform/commonUI/general/res/sass/forms/_filter.scss

@@ -27,7 +27,7 @@
 		}
 	}
 	.icon.ui-symbol {
-		@include border-radius($controlCr);
+		border-radius: $controlCr;
 		display: inline-block;
 		font-size: 1.3em;
 		height: $formInputH;
@@ -43,9 +43,9 @@
 		$d: $formInputH - $mgn * 2;
 		$cb: #fff;
 		$cf: #333;
-		@include border-radius($controlCr);
-		@include box-sizing(border-box);
-		@include opacity(0.2);
+		border-radius: $controlCr;
+		box-sizing: border-box;
+		opacity: 0.2;
 		background: $cb;
 		color: $cf;
 		display: block;
@@ -59,7 +59,7 @@
 		text-align: center;
 		z-index: 5;
 		&:hover {
-			@include opacity(0.6);
+			opacity: 0.6;
 			background-color: $colorKey;
 		}
 	}
@@ -95,7 +95,7 @@
     .clear-icon,
     .menu-icon,
     &:before {
-        @include box-sizing(border-box);
+        box-sizing: border-box;
         display: inline-block;
         line-height: inherit;
         position: absolute;

platform/commonUI/general/res/sass/forms/_selects.scss

@@ -30,7 +30,7 @@
     line-height: $formInputH;
 	select {
 		@include appearance(none);
-		@include box-sizing(border-box);
+		box-sizing: border-box;
 		background: none;
 		color: $colorSelectFg;
 		cursor: pointer;

platform/commonUI/general/res/sass/helpers/_bubbles.scss

@@ -30,7 +30,7 @@
 
 .l-infobubble-wrapper {
 	$arwSize: 5px;
-	@include box-shadow(rgba(black, 0.4) 0 1px 5px);
+	box-shadow: rgba(black, 0.4) 0 1px 5px;
 	position: relative;
 	z-index: 50;
 	.l-infobubble {
@@ -149,8 +149,8 @@
 
 .s-infobubble {
 	$emFg: darken($colorInfoBubbleFg, 20%);
-	@include border-radius($basicCr);
-	@include box-shadow(rgba(black, 0.4) 0 1px 5px);
+	border-radius: $basicCr;
+	box-shadow: rgba(black, 0.4) 0 1px 5px;
 	background: $colorInfoBubbleBg;
 	color: $colorInfoBubbleFg;
 	font-size: 0.8rem;

platform/commonUI/general/res/sass/helpers/_splitter.scss

@@ -39,7 +39,7 @@
         display: block;
 
         @if $splitterEndCr != 'none' {
-            @include border-radius($splitterEndCr);
+            border-radius: $splitterEndCr;
         }
     }
     &:active {

platform/commonUI/general/res/sass/helpers/_wait-spinner.scss

@@ -34,8 +34,8 @@
     @include animation-duration(0.5s);
     @include animation-iteration-count(infinite);
     @include animation-timing-function(linear);
-    @include border-radius(100%);
-    @include box-sizing(border-box);
+    border-radius: 100%;
+    box-sizing: border-box;
     border-color: rgba($c, 0.25);
     border-top-color: rgba($c, 1.0);
     border-style: solid;

platform/commonUI/general/res/sass/lists/_tabular.scss

@@ -26,7 +26,7 @@
 
 .tabular,
 table {
-	@include box-sizing(border-box);
+	box-sizing: border-box;
 	border-spacing: 0;
 	border-collapse: collapse;
 	display: table;
@@ -107,7 +107,7 @@ table {
 			&.s-cell-type-value {
 				text-align: right;
 				.l-cell-contents {
-					@include border-radius($smallCr);
+					border-radius: $smallCr;
 					padding-left: $itemPadLR;
 					padding-right: $itemPadLR;
 				}
@@ -126,7 +126,7 @@ table {
 			top: $tabularHeaderH * 2;
 		}
 		input[type="text"] {
-			@include box-sizing(border-box);
+			box-sizing: border-box;
 			width: 100%; //50px;
 		}
 	}

platform/commonUI/general/res/sass/mobile/_item.scss

@@ -24,11 +24,21 @@
 // representation. Instead of a grid,
 // a list is used.
 
+
+// Refactored to use Victorizr
 .items-holder {
     .item {
         &.grid-item {
             $titleH: 30px;
-            @include phoneandtablet {
+        }
+    }
+}
+
+body.phone,
+body.tablet {
+    .items-holder {
+        .item {
+            &.grid-item {
                 width: 100%;
                 >.contents {
                     top: 0px; right: $interiorMarginLg; bottom: 0px; left: $interiorMarginLg;
@@ -36,7 +46,6 @@
                 .bar {
                     &.top-bar {
                         // Becomes the right side of the item
-                        //@include test(blue);
                         bottom: 0 !important; left: auto !important; right: 20px !important;
                         width: 40px !important; height: auto !important;
                         text-align: right;
@@ -46,7 +55,7 @@
                         left: $mobileListIconSize + $interiorMarginLg;
                         right: 60px;
                     }
-                    
+
                 }
                 .item-main {
                     .item-type,
@@ -63,8 +72,14 @@
                     }
                 }
             }
+        }
+    }
+}
 
-            @include phone {
+body.phone {
+    .items-holder {
+        .item {
+            &.grid-item {
                 $dHei: $phoneItemH;
                 height: $dHei;
                 .bar {
@@ -85,8 +100,14 @@
                     }
                 }
             }
-            
-            @include tablet {
+        }
+    }
+}
+
+body.tablet {
+    .items-holder {
+        .item {
+            &.grid-item {
                 $dHei: $tabletItemH;
                 height: $dHei;
                 .bar {

platform/commonUI/general/res/sass/mobile/_layout.scss

@@ -20,14 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-@include phoneandtablet {
-    // Wrapper of the entire 2 panes, only enacted on
-    // phone and tablet. Also for the panes
-    .browse-wrapper,
-    .pane {
-        top: 0 !important; right: 0; bottom: 0; left: 0;
-    }
-
+body.mobile {
     .pane.left.treeview {
         background-color: $colorMobilePaneLeft;
     }
@@ -141,7 +134,7 @@
     }
 }
 
-@include phonePortrait {
+body.phone.portrait {
     .pane-tree-showing {
         .pane.left.treeview {
             width: $proporMenuOnly !important;
@@ -156,7 +149,7 @@
     }
 }
 
-@include desktop {
+body.desktop {
     .desktop-hide {
         display: none;
     }

platform/commonUI/general/res/sass/mobile/_mixins.scss

@@ -78,6 +78,8 @@
 
 // Desktop monitors in any orientation
 @mixin desktopandtablet {
+    // Keeping only for legacy - should not be used moving forward
+    // Use body.desktop, body.tablet instead.
     @media #{$tabletPortrait},
            #{$tabletLandscape},
            #{$desktop} {
@@ -87,6 +89,8 @@
 
 // Desktop monitors in any orientation
 @mixin desktop {
+    // Keeping only for legacy - should not be used moving forward
+    // Use body.desktop instead.
     @media #{$desktop} {
         @content
     }

platform/commonUI/general/res/sass/mobile/_tree.scss

@@ -20,7 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-@include phoneandtablet {
+body.touch {
     ul.tree {
         // Sets the margin on the left, which causes the
         // running indentation after each folder is made
@@ -42,10 +42,10 @@
                 &:before {
                     content: "\7d";
                     left: 50%;
-                    @include transform(translateX(-50%) rotate(90deg));
+                    @include transform(translateX(-50%) rotate(270deg));
                 }
                 &.expanded:before {
-                    @include transform(translateX(-50%) rotate(270deg));
+                    @include transform(translateX(-50%) rotate(90deg));
                 }
             }
 		}

platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss

@@ -27,7 +27,7 @@
     .overlay > .holder {
         //@include test(orange); // This works!
         $m: 0;
-        @include border-radius($m);
+        border-radius: $m;
         top: $m;
         right: $m;
         bottom: $m;

platform/commonUI/general/res/sass/overlay/_overlay.scss

@@ -37,7 +37,7 @@
     > .holder {
         //$i: 15%;
         @include containerSubtle($colorOvrBg, $colorOvrFg);
-        @include border-radius($basicCr * 3);
+        border-radius: $basicCr * 3;
         color: $colorOvrFg;
         top: 50%;
         right: auto;

platform/commonUI/general/res/sass/plots/_plots-main.scss

@@ -69,8 +69,8 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
 	}
 
 	.gl-plot-coords {
-		@include box-sizing(border-box);
-		@include border-radius($controlCr);
+		box-sizing: border-box;
+		border-radius: $controlCr;
 		background: black;
 		color: lighten($colorBodyFg, 30%);
 		padding: 2px 5px;
@@ -117,7 +117,7 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
 		&.l-plot-y-label {
 			$x: -50%;
 			$r: -90deg;
-			@include transform-origin(50%, 0);
+			@include transform-origin(50% 0);
 			@include transform(translateX($x) rotate($r));
 			display: inline-block;
 			margin-left: $interiorMargin; // Kick off the left edge
@@ -234,7 +234,7 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
 		}
 		.plot-color-swatch,
 		.color-swatch {
-			@include border-radius(2px);
+			border-radius: 2px;
 			display: inline-block;
 			height: $swatchD;
 			width: $swatchD;
@@ -244,7 +244,7 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
 
 .gl-plot-legend {
 	.plot-legend-item {
-		@include border-radius($smallCr);
+		border-radius: $smallCr;
 		line-height: 1.5em;
 		padding: 0px $itemPadLR;
 		.plot-color-swatch {
@@ -310,4 +310,4 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
 	&.tick-label-y {
 		right: 0; left: 0;
 	}
-}
+}

platform/commonUI/general/res/sass/search/_search.scss

@@ -42,7 +42,6 @@
 		$iconEdgeM: 4px;
 		$iconD: $treeSearchInputBarH - ($iconEdgeM*2);
 		font-size: 0.8em;
-		max-width: 250px;
 		position: relative;
 
 		.search-input {
@@ -53,7 +52,7 @@
 		&:before,
 		.clear-icon,
 		.menu-icon {
-			@include box-sizing(border-box);
+			box-sizing: border-box;
 			color: $colorInputIcon;
 			height: $iconD;
             width: $iconD;
@@ -130,7 +129,7 @@
 	.active-filter-display {
 		$s: 0.7em;
 		$p: $interiorMargin;
-		@include box-sizing(border-box);
+		box-sizing: border-box;
 		line-height: 130%;
 		padding-left: $s * 2.25;
 		font-size: $s;

platform/commonUI/general/res/sass/tree/_tree.scss

@@ -34,11 +34,10 @@ ul.tree {
 
 .tree-item,
 .search-result-item {
-	$runningItemW: 0;
     @extend .l-flex-row;
-	@include box-sizing(border-box);
-	@include border-radius($basicCr);
-	@include single-transition(background-color, 0.25s);
+	box-sizing: border-box;
+	border-radius: $basicCr;
+	@include transition(background-color, 0.25s);
 	font-size: 0.8rem;
 	height: $menuLineH;
 	line-height: $menuLineH;
@@ -64,11 +63,6 @@ ul.tree {
                 @include transform(rotate(90deg));
             }
         }
-		@include desktop {
-			&:hover {
-				color: $colorItemTreeVCHover !important;
-			}
-		}
 	}
 
 	.t-object-label {
@@ -95,18 +89,6 @@ ul.tree {
 		}
 	}
 
-	&:not(.selected) {
-		@include desktop {
-			&:hover {
-				background: $colorItemTreeHoverBg;
-				color: $colorItemTreeHoverFg;
-				.t-item-icon {
-					color: $colorItemTreeIconHover;
-				}
-			}
-		}
-	}
-
 	&:not(.loading) {
 		cursor: pointer;
 	}
@@ -124,31 +106,38 @@ ul.tree {
 	}
 }
 
+body.desktop {
+    .tree-item,
+    .search-result-item {
+        .view-control {
+            &:hover {
+                color: $colorItemTreeVCHover !important;
+            }
+        }
+        &:not(.selected) {
+            &:hover {
+                background: $colorItemTreeHoverBg;
+                color: $colorItemTreeHoverFg;
+                .t-item-icon {
+                    color: $colorItemTreeIconHover;
+                }
+            }
+        }
+    }
+}
+
 mct-representation {
     &.s-status-pending {
         .t-object-label {
             .t-item-icon {
                 &:before {
-                    $spinBW: 4px;
-                    @include spinner($spinBW);
                     border-color: rgba($colorItemTreeIcon, 0.25);
                     border-top-color: rgba($colorItemTreeIcon, 1.0);
                 }
-                .t-item-icon-glyph {
-                    display: none;
-                }
-            }
-            .t-title-label {
-                font-style: italic;
-                opacity: 0.6;
             }
         }
     }
 }
-.selected mct-representation.s-status-pending .t-object-label .t-item-icon:before {
-    border-color: rgba($colorItemTreeSelectedFg, 0.25);
-    border-top-color: rgba($colorItemTreeSelectedFg, 1.0);
-}
 
 .tree .s-status-editing,
 .search-results .s-status-editing {
@@ -169,7 +158,7 @@ mct-representation {
             .t-item-icon,
             .t-title-label {
                 color: $colorItemTreeEditingFg;
-                @include text-shadow(none);
+                text-shadow: none;
             }
             .t-title-label {
                 font-style: italic;

platform/commonUI/general/res/sass/user-environ/_frame.scss

@@ -66,17 +66,6 @@
 		.view-switcher {
 			z-index: 10;
 		}
-		// Hide the view switcher by default when it's in an element that's in a frame context
-		// Frame template is used because we need to target the lowest nested frame
-		@include desktop {
-			.view-switcher {
-				opacity: 0;
-			}
-			&:hover .view-switcher {
-				// Show the view switcher on frame hover
-				opacity: 1;
-			}
-		}
 	}
 	.view-switcher {
 		// Hide the name when the view switcher is in a frame context
@@ -85,3 +74,14 @@
 		}
 	}
 }
+ body.desktop .frame.frame-template {
+     // Hide the view switcher by default when it's in an element that's in a frame context
+     // Frame template is used because we need to target the lowest nested frame
+     .view-switcher {
+         opacity: 0;
+     }
+     &:hover .view-switcher {
+         // Show the view switcher on frame hover
+         opacity: 1;
+     }
+ }

platform/commonUI/general/res/sass/user-environ/_layout.scss

@@ -27,7 +27,7 @@
 }
 
 .editor {
-    @include border-radius($basicCr * 1.5);
+    border-radius: $basicCr * 1.5;
 }
 
 .contents {
@@ -86,7 +86,7 @@
         color: lighten($colorBodyBg, 30%);
         font-size: .7rem;
         .status-holder {
-            @include box-sizing(border-box);
+            box-sizing: border-box;
             @include absPosDefault($interiorMargin);
             @include ellipsize();
             right: 120px;
@@ -94,7 +94,7 @@
             z-index: 1;
         }
         .app-logo {
-            @include box-sizing(border-box);
+            box-sizing: border-box;
             @include absPosDefault($interiorMargin);
             cursor: pointer;
             left: auto;
@@ -121,7 +121,7 @@
 }
 
 .pane {
-    @include box-sizing(border-box);
+    box-sizing: border-box;
     position: absolute;
 
     .pane-header {
@@ -137,48 +137,6 @@
 
     .mini-tab-icon.toggle-pane {
         z-index: 5;
-        @include desktop {
-            $d: $uePaneMiniTabH;
-            $paneExpandedOffset: $splitterD + $uePaneMiniTabW;
-            top: $bodyMargin;
-            height: $d;
-            line-height: $d;
-            &:after {
-                // Always the icon that shows when the pane is collapsed
-                opacity: 0;
-            }
-            &.collapsed {
-                &:before {
-                    opacity: 0;
-                }
-                &:after {
-                    opacity: 1;
-                }
-            }
-            &.toggle-tree.anchor-left {
-                left: 0;
-                @include transform(translateX(-1 * $paneExpandedOffset));
-                &:after {
-                    content: '\6d'; // Menu 'hamburger' icon
-                }
-                &.collapsed {
-                    left: 0;
-                    @include transform(translateX((-1 * $ueCollapsedPaneEdgeM) + $interiorMargin));
-                }
-                &:not(.collapsed):before {
-                    @include trans-prop-nice(opacity, 200ms, 200ms);
-                }
-            }
-            &.toggle-inspect.anchor-right {
-                right: $bodyMargin;
-                &:after {
-                    content: '\e615'; // Eye icon
-                }
-                &.collapsed {
-                    right: $interiorMargin;
-                }
-            }
-        }
     }
     &.items {
         .object-browse-bar {
@@ -190,6 +148,49 @@
     }
 }
 
+body.desktop .pane .mini-tab-icon.toggle-pane {
+    $d: $uePaneMiniTabH;
+    $paneExpandedOffset: $splitterD + $uePaneMiniTabW;
+    top: $bodyMargin;
+    height: $d;
+    line-height: $d;
+    &:after {
+        // Always the icon that shows when the pane is collapsed
+        opacity: 0;
+    }
+    &.collapsed {
+        &:before {
+            opacity: 0;
+        }
+        &:after {
+            opacity: 1;
+        }
+    }
+    &.toggle-tree.anchor-left {
+        left: 0;
+        @include transform(translateX(-1 * $paneExpandedOffset));
+        &:after {
+            content: '\6d'; // Menu 'hamburger' icon
+        }
+        &.collapsed {
+            left: 0;
+            @include transform(translateX((-1 * $ueCollapsedPaneEdgeM) + $interiorMargin));
+        }
+        &:not(.collapsed):before {
+            @include trans-prop-nice(opacity, 200ms, 200ms);
+        }
+    }
+    &.toggle-inspect.anchor-right {
+        right: $bodyMargin;
+        &:after {
+            content: '\e615'; // Eye icon
+        }
+        &.collapsed {
+            right: $interiorMargin;
+        }
+    }
+}
+
 .split-layout {
     // Specific elements margins
     .holder.holder-treeview-elements {
@@ -282,7 +283,7 @@
 
 /***************************************************** OBJECT BROWSE BAR */
 .object-browse-bar {
-    @include box-sizing(border-box);
+    box-sizing: border-box;
     height: $ueTopBarH;
     line-height: $ueTopBarH;
     white-space: nowrap;
@@ -339,7 +340,7 @@
     }
 }
 
-@include desktop {
+body.desktop {
     .holder-all {
         min-width: $ueDesktopMinW;
     }
@@ -378,7 +379,7 @@
 .s-status-editing {
     .l-object-wrapper {
         @include pulseBorder($colorEditAreaFg, $dur: 1s, $opacity0: 0.3);
-        @include border-radius($controlCr);
+        border-radius: $controlCr;
         background-color: $colorEditAreaBg;
         border-color: $colorEditAreaFg;
         border-width: 2px;

platform/commonUI/general/res/sass/user-environ/_tool-bar.scss

@@ -27,7 +27,7 @@
 		height: $btnToolbarH;
 	}
 	input[type="text"] {
-		@include box-sizing(border-box);
+		box-sizing: border-box;
 		font-size: .9em;
 		height: $btnToolbarH;
 		margin-bottom: 1px;

platform/commonUI/general/res/templates/bottombar.html

@@ -23,7 +23,8 @@
     <div id='status' class='status-holder'>
         <mct-include ng-repeat="indicator in bar.getIndicators()"
                      ng-model="indicator.ngModel"
-                     key="indicator.template">
+                     key="indicator.template"
+                     class="status-block-holder">
         </mct-include>
     </div>
     <mct-include key="'message-banner'"></mct-include>

platform/commonUI/general/res/templates/indicator.html

@@ -30,11 +30,8 @@
 	</span><span class="label"
 		  ng-class='ngModel.getTextClass()'>
 		{{ngModel.getText()}}
+        <a class="s-btn ui-symbol" ng-if="ngModel.configure">G</a>
 	</span><span class="count">
 		<!-- Add int count value here if this type of indicator has one or more messages associated with it -->
-	</span><a href=''
-	   class="ui-symbol"
-	   ng-if="ngModel.configure">
-		G
-	</a>
+	</span>
 </div>

platform/commonUI/themes/espresso/res/config.rb

@@ -1,26 +0,0 @@
-# Require any additional compass plugins here.
-# require "compass-growl"
-
-# Set this to the root of your project when deployed:
-http_path = "/"
-css_dir = "css"
-sass_dir = "sass"
-images_dir = "images"
-javascripts_dir = "js"
-
-# You can select your preferred output style here (can be overridden via the command line):
-# :expanded, :compressed, :nested
-output_style = :nested
-
-# To enable relative paths to assets via compass helper functions. Uncomment:
-relative_assets = true
-
-# To disable debugging comments that display the original location of your selectors. Uncomment:
-# line_comments = false
-
-
-# If you prefer the indented syntax, you might want to regenerate this
-# project again passing --syntax sass, or you can uncomment this:
-# preferred_syntax = :sass
-# and then run:
-# sass-convert -R --from scss --to sass vfn_platform/static/sass scss && rm -rf sass && mv scss sass

platform/commonUI/themes/espresso/res/sass/_constants.scss

@@ -12,12 +12,14 @@ $colorInteriorBorder: rgba($colorBodyFg, 0.1);
 $colorA: #ccc;
 $colorAHov: #fff;
 $contrastRatioPercent: 7%;
+$hoverRatioPercent: 10%;
 $basicCr: 3px;
 $controlCr: 3px;
 $smallCr: 2px;
 
 // Buttons and Controls
-$colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent); //
+$colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent);
+$colorBtnBgHov: pullForward($colorBtnBg, $hoverRatioPercent);
 $colorBtnFg: $colorBodyFg;
 $colorBtnMajorBg: $colorKey;
 $colorBtnMajorFg: $colorKeyFg;
@@ -54,7 +56,7 @@ $colorTick: rgba(white, 0.2);
 $colorMenuBg: pullForward($colorBodyBg, 23%);
 $colorMenuFg: pullForward($colorMenuBg, 70%);
 $colorMenuIc: pullForward($colorKey, 17%);
-$colorMenuHovBg: pullForward($colorMenuBg, 10%);
+$colorMenuHovBg: pullForward($colorMenuBg, $hoverRatioPercent);
 $colorMenuHovFg: #fff;
 $colorMenuHovIc: $colorMenuHovFg;
 $shdwMenu: none;
@@ -89,6 +91,8 @@ $colorStatusDefault: #ccc;
 $colorStatusInfo: #62ba72;
 $colorStatusAlert: #ffa66d;
 $colorStatusError: #d4585c;
+$colorStatusAvailable: $colorKey;
+$colorStatusBtnBg: $colorBtnBg;
 $colorProgressBarOuter: rgba(#000, 0.1);
 $colorProgressBarAmt: $colorKey;
 $progressBarHOverlay: 15px;
@@ -123,7 +127,7 @@ $colorOvrBtnFg: #fff;
 
 // Items
 $colorItemBg: lighten($colorBodyBg, 5%);
-$colorItemBgHov: pullForward($colorItemBg, 15%);
+$colorItemBgHov: pullForward($colorItemBg, $hoverRatioPercent);
 $colorItemFg: lighten($colorItemBg, 50%);
 $colorItemFgDetails: lighten($colorItemBg, 30%);
 $colorItemIc: $colorKey;
@@ -149,26 +153,26 @@ $colorPlotAreaBorder: $colorInteriorBorder;
 $colorPlotLabelFg: pushBack($colorPlotFg, 20%);
 
 // Tree
-$colorItemTreeHoverBg: rgba($colorBodyFg, 0.1);
-$colorItemTreeHoverFg: pullForward($colorBodyFg, 20%);
+$colorItemTreeHoverBg: pullForward($colorBodyBg, $hoverRatioPercent);
+$colorItemTreeHoverFg: pullForward($colorBodyFg, $hoverRatioPercent);
 $colorItemTreeIcon: $colorKey;
 $colorItemTreeIconHover: lighten($colorItemTreeIcon, 20%);
-$colorItemTreeVCHover: $colorAlt1;
 $colorItemTreeFg: $colorBodyFg;
 $colorItemTreeSelectedBg: pushBack($colorKey, 15%);
 $colorItemTreeSelectedFg: pullForward($colorBodyFg, 20%);
 $colorItemTreeEditingBg: #344154;
 $colorItemTreeEditingFg: $colorEditAreaFg;
-$colorItemTreeVC: rgba(#fff, 0.3);
+$colorItemTreeVC: $colorBodyFg; //rgba(#fff, 0.3);
+$colorItemTreeVCHover: pullForward($colorItemTreeVC, 20%);
 $colorItemTreeSelectedVC: $colorItemTreeVC;
 $shdwItemTreeIcon: 0.6;
 
 // Scrollbar
 $scrollbarTrackSize: 10px;
+$scrollbarTrackShdw: rgba(#000, 0.7) 0 1px 5px;
 $scrollbarTrackColorBg: rgba(#000, 0.4);
 $scrollbarThumbColor: lighten($colorBodyBg, 10%);
 $scrollbarThumbColorHov: lighten($scrollbarThumbColor, 2%);
-$scrollbarTrackShdw: rgba(#000, 0.7) 0 1px 5px;
 
 // Splitter
 $splitterD: 25px; // splitterD and HandleD should both be odd, or even

platform/commonUI/themes/espresso/res/sass/_mixins.scss

@@ -4,10 +4,10 @@
 	@include boxShdw($shdwBtns);
 }
 
-@mixin btnSubtle($bg: $colorBodyBg, $bgHov: none, $fg: $colorBodyFg, $ic: $colorBtnIcon) {
+@mixin btnSubtle($bg: $colorBodyBg, $bgHovColor: none, $fg: $colorBodyFg, $ic: $colorBtnIcon) {
 	@include containerSubtle($bg, $fg);
-	@include btnBase($bg, linear-gradient(lighten($bg, 15%), lighten($bg, 10%)), $fg, $ic);
-	@include text-shadow($shdwItemText);
+	@include btnBase($bg, $bgHovColor, $fg, $ic);
+	text-shadow: $shdwItemText;
 }
 
 @function pullForward($c: $colorBodyBg, $p: 20%) {

platform/commonUI/themes/espresso/res/sass/theme-espresso.scss

@@ -20,10 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-@import "compass";
-@import "compass/reset";
-@import "compass/css3";
-@import "compass/utilities";
+@import "bourbon";
 
 @import "../../../../general/res/sass/_mixins";
 @import "../../../../general/res/sass/mobile/mixins";
@@ -33,4 +30,4 @@
 @import "../../../../general/res/sass/mobile/constants";
 @import "constants";
 
-@import "../../../../general/res/sass/main";
+@import "../../../../general/res/sass/main";

platform/commonUI/themes/snow/res/config.rb

@@ -1,26 +0,0 @@
-# Require any additional compass plugins here.
-# require "compass-growl"
-
-# Set this to the root of your project when deployed:
-http_path = "/"
-css_dir = "css"
-sass_dir = "sass"
-images_dir = "images"
-javascripts_dir = "js"
-
-# You can select your preferred output style here (can be overridden via the command line):
-# :expanded, :compressed, :nested
-output_style = :nested
-
-# To enable relative paths to assets via compass helper functions. Uncomment:
-relative_assets = true
-
-# To disable debugging comments that display the original location of your selectors. Uncomment:
-# line_comments = false
-
-
-# If you prefer the indented syntax, you might want to regenerate this
-# project again passing --syntax sass, or you can uncomment this:
-# preferred_syntax = :sass
-# and then run:
-# sass-convert -R --from scss --to sass vfn_platform/static/sass scss && rm -rf sass && mv scss sass

platform/commonUI/themes/snow/res/sass/_constants.scss

@@ -12,12 +12,14 @@ $colorInteriorBorder: rgba($colorBodyFg, 0.2);
 $colorA: #999;
 $colorAHov: $colorKey;
 $contrastRatioPercent: 40%;
+$hoverRatioPercent: 10%;
 $basicCr: 4px;
 $controlCr: $basicCr;
 $smallCr: 3px;
 
 // Buttons and Controls
 $colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent);
+$colorBtnBgHov: pullForward($colorBtnBg, $hoverRatioPercent);
 $colorBtnFg: #fff;
 $colorBtnMajorBg: $colorKey;
 $colorBtnMajorFg: $colorKeyFg;
@@ -54,7 +56,7 @@ $colorTick: rgba(black, 0.2);
 $colorMenuBg: pushBack($colorBodyBg, 10%);
 $colorMenuFg: pullForward($colorMenuBg, 70%);
 $colorMenuIc: $colorKey;
-$colorMenuHovBg: pullForward($colorMenuBg, 10%);
+$colorMenuHovBg: pullForward($colorMenuBg, $hoverRatioPercent);
 $colorMenuHovFg: $colorMenuFg;
 $colorMenuHovIc: $colorMenuIc;
 $shdwMenu: rgba(black, 0.5) 0 1px 5px;
@@ -89,6 +91,8 @@ $colorStatusDefault: #ccc;
 $colorStatusInfo: #60ba7b;
 $colorStatusAlert: #ffb66c;
 $colorStatusError: #c96b68;
+$colorStatusAvailable: $colorKey;
+$colorStatusBtnBg: #666;
 $colorProgressBarOuter: rgba(#000, 0.1);
 $colorProgressBarAmt: #0a0;
 $progressBarHOverlay: 15px;
@@ -123,7 +127,7 @@ $colorOvrBtnFg: #fff;
 
 // Items
 $colorItemBg: #ddd;
-$colorItemBgHov: pullForward($colorItemBg, 5%);
+$colorItemBgHov: pullForward($colorItemBg, $hoverRatioPercent);
 $colorItemFg: $colorBodyFg;
 $colorItemFgDetails: pushBack($colorItemFg, 15%);
 $colorItemIc: $colorKey;
@@ -149,17 +153,17 @@ $colorPlotAreaBorder: $colorInteriorBorder;
 $colorPlotLabelFg: pushBack($colorPlotFg, 20%);
 
 // Tree
-$colorItemTreeHoverBg: rgba($colorBodyFg, 0.1);
-$colorItemTreeHoverFg: pullForward($colorBodyFg, 20%);
+$colorItemTreeHoverBg: pullForward($colorBodyBg, $hoverRatioPercent);
+$colorItemTreeHoverFg: pullForward($colorBodyFg, $hoverRatioPercent);
 $colorItemTreeIcon: $colorKey;
-$colorItemTreeIconHover: $colorItemTreeIcon; //pushBack($colorItemTreeIcon, 20%);
-$colorItemTreeVCHover: $colorKey;
+$colorItemTreeIconHover: $colorItemTreeIcon;
 $colorItemTreeFg: $colorBodyFg;
 $colorItemTreeSelectedBg: pushBack($colorKey, 15%);
 $colorItemTreeSelectedFg: $colorBodyBg;
-$colorItemTreeEditingBg: #caf1ff; //#c6e3ff;
+$colorItemTreeEditingBg: #caf1ff;
 $colorItemTreeEditingFg: $colorEditAreaFg;
 $colorItemTreeVC: $colorBodyFg;
+$colorItemTreeVCHover: $colorKey;
 $colorItemTreeSelectedVC: $colorBodyBg;
 $shdwItemTreeIcon: none;
 
@@ -194,4 +198,4 @@ $colorAboutLink: #84b3ff;
 
 // Loading
 $colorLoadingFg: $colorAlt1;
-$colorLoadingBg: rgba($colorLoadingFg, 0.1);
+$colorLoadingBg: rgba($colorLoadingFg, 0.1);

platform/commonUI/themes/snow/res/sass/_mixins.scss

@@ -3,10 +3,10 @@
 	@include boxShdw($shdwBtns);
 }
 
-@mixin btnSubtle($bg: $colorBtnBg, $bgHov: none, $fg: $colorBtnFg, $ic: $colorBtnIcon) {
+@mixin btnSubtle($bg: $colorBtnBg, $bgHovColor: none, $fg: $colorBtnFg, $ic: $colorBtnIcon) {
 	@include containerSubtle($bg, $fg);
-	@include btnBase($bg, $bgHov, $fg, $ic);
-	@include text-shadow($shdwItemText);
+	@include btnBase($bg, $bgHovColor, $fg, $ic);
+	text-shadow: $shdwItemText;
 }
 
 @function pullForward($c: $colorBodyBg, $p: 20%) {

platform/commonUI/themes/snow/res/sass/theme-snow.scss

@@ -20,10 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-@import "compass";
-@import "compass/reset";
-@import "compass/css3";
-@import "compass/utilities";
+@import "bourbon";
 
 @import "../../../../general/res/sass/_mixins";
 @import "../../../../general/res/sass/mobile/mixins";