Vue main section overhaul (#2161)

* Separate browse object from conductor

* Main layout convert to flex; padding and overflow at leaf node

* Inspector converted to BEM - WIP

 - Properties pool upper level styles converted;
 - Grid mixins moved out of Inspector and into _mixins;

* Refinements to misc elements

- user-select: none on tree;
- :before and :after reset globally to use box-sizing: border-box;
- li reset globally;

* Styling for buttons and menus; add Create button

 - WIP

* Context and Create menus

 - WIP

* Add glyph backgrounds as data URIs

- For Create menu, items grid;
- Objects only;

* Create menu refinements

- Min/max height handling;
- Code cleanup;

* Main layout head styling; various sanding

- head layout refined;
- c-icon-button, c-button-set added;
- background glyph mixin refined;
- Antialiasing refined to increase icon sharpness;

* Fix SVG data URLs: encode # chars as %23

src/ui/components/layout/BrowseObject.vue

@@ -0,0 +1,159 @@
+<template>
+    <div></div>
+</template>
+
+<style lang="scss">
+</style>
+
+<script>
+
+// Find an object in an array of objects.
+function findObject(domainObjects, id) {
+    var i;
+    for (i = 0; i < domainObjects.length; i += 1) {
+        if (domainObjects[i].getId() === id) {
+            return domainObjects[i];
+        }
+    }
+}
+
+// recursively locate and return an object inside of a container
+// via a path.  If at any point in the recursion it fails to find
+// the next object, it will return the parent.
+function findViaComposition(containerObject, path) {
+    var nextId = path.shift();
+    if (!nextId) {
+        return containerObject;
+    }
+    return containerObject.useCapability('composition')
+        .then(function (composees) {
+            var nextObject = findObject(composees, nextId);
+            if (!nextObject) {
+                return containerObject;
+            }
+            if (!nextObject.hasCapability('composition')) {
+                return nextObject;
+            }
+            return findViaComposition(nextObject, path);
+        });
+}
+
+function getLastChildIfRoot(object) {
+    if (object.getId() !== 'ROOT') {
+        return object;
+    }
+    return object.useCapability('composition')
+        .then(function (composees) {
+            return composees[composees.length - 1];
+        });
+}
+
+function pathForObject(domainObject) {
+    var context = domainObject.getCapability('context'),
+        objectPath = context ? context.getPath() : [],
+        ids = objectPath.map(function (domainObj) {
+            return domainObj.getId();
+        });
+    return  "/browse/" + ids.slice(1).join("/");
+}
+
+export default {
+    inject: ["openmct"],
+    mounted() {
+        let openmct = this.openmct;
+        let $injector = openmct.$injector;
+        let angular = openmct.$angular;
+
+        this.objectService = $injector.get('objectService');
+        this.templateLinker = $injector.get('templateLinker');
+        this.navigationService = $injector.get('navigationService');
+        this.$timeout = $injector.get('$timeout');
+
+        this.templateMap = {};
+        $injector.get('templates[]').forEach((t) => {
+            this.templateMap[t.key] = this.templateMap[t.key] || t;
+        });
+
+        this.$rootScope = $injector.get('$rootScope');
+        this.$scope = this.$rootScope.$new();
+        this.$scope.representation = {};
+
+        openmct.router.route(/^\/browse\/(.*)$/, (path, results) => {
+            let navigatePath = results[1];
+            if (!navigatePath) {
+                navigatePath = 'mine';
+            }
+            this.navigateToPath(navigatePath);
+        });
+
+        this.navigationService.addListener(o => this.navigateToObject(o));
+    },
+    destroyed() {
+    },
+    methods: {
+        navigateToPath(path) {
+            if (!Array.isArray(path)) {
+                path = path.split('/');
+            }
+            return this.getObject('ROOT')
+                .then(root => {
+                    return findViaComposition(root, path);
+                })
+                .then(getLastChildIfRoot)
+                .then(object => {
+                    this.setMainViewObject(object);
+                });
+        },
+
+        setMainViewObject(object) {
+            this.$scope.domainObject = object;
+            this.$scope.navigatedObject = object;
+            this.templateLinker.link(
+                this.$scope,
+                this.openmct.$angular.element(this.$el),
+                this.templateMap["browseObject"]
+            );
+            document.title = object.getModel().name;
+            this.scheduleDigest();
+        },
+
+        idsForObject(domainObject) {
+            return this.urlService
+                .urlForLocation("", domainObject)
+                .replace('/', '');
+        },
+
+        navigateToObject(object) {
+            let path = pathForObject(object);
+            let views = object.useCapability('view');
+            let params = this.openmct.router.getParams();
+            let currentViewIsValid = views.some(v => v.key === params['view']);
+            if (!currentViewIsValid) {
+                this.scope.representation = {
+                    selected: views[0]
+                }
+                this.openmct.router.update(path, {
+                    view: views[0].key
+                });
+            } else {
+                this.openmct.router.setPath(path);
+            }
+        },
+
+        scheduleDigest() {
+            this.$timeout(function () {
+                // digest done!
+            });
+        },
+
+        getObject(id) {
+            return this.objectService.getObjects([id])
+                .then(function (results) {
+                    return results[id];
+                });
+        }
+    }
+}
+</script>
+
+