Fix indentation part deux

Fix indentation
Toolbar sanding and polishing
2019-01-25 12:39:41 -08:00 · 2019-01-25 11:21:37 -08:00 · 2019-01-23 16:09:41 -08:00 · 2019-01-23 15:40:05 -08:00 · 2019-01-23 15:07:40 -08:00 · 2019-01-23 14:47:19 -08:00
32 changed files with 1060 additions and 764 deletions
--- a/src/plugins/displayLayout/DisplayLayoutToolbar.js
+++ b/src/plugins/displayLayout/DisplayLayoutToolbar.js
@@ -32,7 +32,7 @@ define([], function () {
                // is inside a layout, or the main layout is selected.
                return (openmct.editor.isEditing() && selection &&
                    ((selection[1] && selection[1].context.item && selection[1].context.item.type === 'layout') ||
-                    (selection[0].context.item && selection[0].context.item.type === 'layout')));
+                        (selection[0].context.item && selection[0].context.item.type === 'layout')));
            },
            toolbar: function (selection) {
                const DIALOG_FORM = {
@@ -73,10 +73,13 @@ define([], function () {
                    return openmct.$injector.get('dialogService').getUserInput(form, {});
                }

+                function getPath() {
+                    return `configuration.items[${selection[0].context.index}]`;
+                }
+
                let selectedParent = selection[1] && selection[1].context.item,
                    selectedObject = selection[0].context.item,
                    layoutItem = selection[0].context.layoutItem,
-                    layoutItemIndex = selection[0].context.index,
                    toolbar = [];

                if (selectedObject && selectedObject.type === 'layout') {
@@ -121,7 +124,6 @@ define([], function () {
                    return toolbar;
                }

-                let path = `configuration.items[${layoutItemIndex}]`;
                let separator = {
                    control: "separator"
                };
@@ -140,7 +142,7 @@ define([], function () {
                                    label: 'Ok',
                                    emphasis: 'true',
                                    callback: function () {
-                                        removeItem(layoutItem, layoutItemIndex);
+                                        removeItem(layoutItem, selection[0].context.index);
                                        prompt.dismiss();
                                    }
                                },
@@ -154,6 +156,96 @@ define([], function () {
                        });
                    }
                };
+                let stackOrder = {
+                    control: "menu",
+                    domainObject: selectedParent,
+                    icon: "icon-layers",
+                    title: "Move the selected object above or below other objects",
+                    options: [
+                        {
+                            name: "Move to Top",
+                            value: "top",
+                            class: "icon-arrow-double-up"
+                        },
+                        {
+                            name: "Move Up",
+                            value: "up",
+                            class: "icon-arrow-up"
+                        },
+                        {
+                            name: "Move Down",
+                            value: "down",
+                            class: "icon-arrow-down"
+                        },
+                        {
+                            name: "Move to Bottom",
+                            value: "bottom",
+                            class: "icon-arrow-double-down"
+                        }
+                    ],
+                    method: function (option) {
+                        selection[1].context.orderItem(option.value, selection[0].context.index);
+                    }
+                };
+                let useGrid = {
+                    control: "toggle-button",
+                    domainObject: selectedParent,
+                    property: function () {
+                        return getPath() + ".useGrid";
+                    },
+                    options: [
+                        {
+                            value: false,
+                            icon: "icon-grid-snap-to",
+                            title: "Grid snapping enabled"
+                        },
+                        {
+                            value: true,
+                            icon: "icon-grid-snap-no",
+                            title: "Grid snapping disabled"
+                        }
+                    ]
+                };
+                let x = {
+                    control: "input",
+                    type: "number",
+                    domainObject: selectedParent,
+                    property: function () {
+                        return getPath() + ".x";
+                    },
+                    label: "X:",
+                    title: "X position"
+                },
+                y = {
+                    control: "input",
+                    type: "number",
+                    domainObject: selectedParent,
+                    property: function () {
+                        return getPath() + ".y";
+                    },
+                    label: "Y:",
+                    title: "Y position",
+                },
+                width = {
+                    control: 'input',
+                    type: 'number',
+                    domainObject: selectedParent,
+                    property: function () {
+                        return getPath() + ".width";
+                    },
+                    label: 'W:',
+                    title: 'Resize object width'
+                },
+                height = {
+                    control: 'input',
+                    type: 'number',
+                    domainObject: selectedParent,
+                    property: function () {
+                        return getPath() + ".height";
+                    },
+                    label: 'H:',
+                    title: 'Resize object height'
+                };

                if (layoutItem.type === 'subobject-view') {
                    if (toolbar.length > 0) {
@@ -163,124 +255,113 @@ define([], function () {
                    toolbar.push({
                        control: "toggle-button",
                        domainObject: selectedParent,
-                        property: path + ".hasFrame",
+                        property: function () {
+                            return getPath() + ".hasFrame";
+                        },
                        options: [
                            {
                                value: false,
-                                icon: 'icon-frame-hide',
-                                title: "Hide frame"
+                                icon: 'icon-frame-show',
+                                title: "Frame visible"
                            },
                            {
                                value: true,
-                                icon: 'icon-frame-show',
-                                title: "Show frame"
+                                icon: 'icon-frame-hide',
+                                title: "Frame hidden"
                            }
                        ]
                    });
                    toolbar.push(separator);
+                    toolbar.push(stackOrder);
+                    toolbar.push(x);
+                    toolbar.push(y);
+                    toolbar.push(width);
+                    toolbar.push(height);
+                    toolbar.push(useGrid);
+                    toolbar.push(separator);
                    toolbar.push(remove);
                } else {
-                    const TEXT_SIZE = [9, 10, 11, 12, 13, 14, 15, 16, 20, 24, 30, 36, 48, 72, 96];
+                    const TEXT_SIZE = [8, 9, 10, 11, 12, 13, 14, 15, 16, 20, 24, 30, 36, 48, 72, 96, 128];
                    let fill = {
-                            control: "color-picker",
-                            domainObject: selectedParent,
-                            property: path + ".fill",
-                            icon: "icon-paint-bucket",
-                            title: "Set fill color"
+                        control: "color-picker",
+                        domainObject: selectedParent,
+                        property: function () {
+                            return getPath() + ".fill";
                        },
-                        stroke = {
-                            control: "color-picker",
-                            domainObject: selectedParent,
-                            property: path + ".stroke",
-                            icon: "icon-line-horz",
-                            title: "Set border color"
+                        icon: "icon-paint-bucket",
+                        title: "Set fill color"
+                    },
+                    stroke = {
+                        control: "color-picker",
+                        domainObject: selectedParent,
+                        property: function () {
+                            return getPath() + ".stroke";
                        },
-                        color = {
-                            control: "color-picker",
-                            domainObject: selectedParent,
-                            property: path + ".color",
-                            icon: "icon-font",
-                            mandatory: true,
-                            title: "Set text color",
-                            preventNone: true
+                        icon: "icon-line-horz",
+                        title: "Set border color"
+                    },
+                    color = {
+                        control: "color-picker",
+                        domainObject: selectedParent,
+                        property: function () {
+                            return getPath() + ".color";
                        },
-                        size = {
-                            control: "select-menu",
-                            domainObject: selectedParent,
-                            property: path + ".size",
-                            title: "Set text size",
-                            options: TEXT_SIZE.map(size => {
-                                return {
-                                    value: size + "px"
-                                };
-                            })
+                        icon: "icon-font",
+                        mandatory: true,
+                        title: "Set text color",
+                        preventNone: true
+                    },
+                    size = {
+                        control: "select-menu",
+                        domainObject: selectedParent,
+                        property: function () {
+                            return getPath() + ".size";
                        },
-                        x = {
-                            control: "input",
-                            type: "number",
-                            domainObject: selectedParent,
-                            property: path + ".x",
-                            label: "X:",
-                            title: "X position"
-                        },
-                        y = {
-                            control: "input",
-                            type: "number",
-                            domainObject: selectedParent,
-                            property: path + ".y",
-                            label: "Y:",
-                            title: "Y position",
-                        },
-                        width = {
-                            control: 'input',
-                            type: 'number',
-                            domainObject: selectedParent,
-                            property: path + ".width",
-                            label: 'W:',
-                            title: 'Resize object width'
-                        },
-                        height = {
-                            control: 'input',
-                            type: 'number',
-                            domainObject: selectedParent,
-                            property: path + ".height",
-                            label: 'H:',
-                            title: 'Resize object height'
-                        };
+                        title: "Set text size",
+                        options: TEXT_SIZE.map(size => {
+                            return {
+                                value: size + "px"
+                            };
+                        })
+                    };

                    if (layoutItem.type === 'telemetry-view') {
                        let displayMode = {
-                                control: "select-menu",
-                                domainObject: selectedParent,
-                                property: path + ".displayMode",
-                                title: "Set display mode",
-                                options: [
-                                    {
-                                        name: 'Label + Value',
-                                        value: 'all'
-                                    },
-                                    {
-                                        name: "Label only",
-                                        value: "label"
-                                    },
-                                    {
-                                        name: "Value only",
-                                        value: "value"
-                                    }
-                                ]
+                            control: "select-menu",
+                            domainObject: selectedParent,
+                            property: function () {
+                                return getPath() + ".displayMode";
                            },
-                            value = {
-                                control: "select-menu",
-                                domainObject: selectedParent,
-                                property: path + ".value",
-                                title: "Set value",
-                                options: openmct.telemetry.getMetadata(selectedObject).values().map(value => {
-                                    return {
-                                        name: value.name,
-                                        value: value.key
-                                    }
-                                })
-                            };
+                            title: "Set display mode",
+                            options: [
+                                {
+                                    name: 'Label + Value',
+                                    value: 'all'
+                                },
+                                {
+                                    name: "Label only",
+                                    value: "label"
+                                },
+                                {
+                                    name: "Value only",
+                                    value: "value"
+                                }
+                            ]
+                        },
+                        value = {
+                            control: "select-menu",
+                            domainObject: selectedParent,
+                            property: function () {
+                                return getPath() + ".value";
+                            },
+                            title: "Set value",
+                            options: openmct.telemetry.getMetadata(selectedObject).values().map(value => {
+                                return {
+                                    name: value.name,
+                                    value: value.key
+                                }
+                            })
+                        };
                        toolbar = [
                            displayMode,
                            separator,
@@ -292,18 +373,22 @@ define([], function () {
                            separator,
                            size,
                            separator,
+                            stackOrder,
                            x,
                            y,
                            height,
                            width,
+                            useGrid,
                            separator,
                            remove
                        ];
-                    } else if (layoutItem.type === 'text-view' ) {
+                    } else if (layoutItem.type === 'text-view') {
                        let text = {
                            control: "button",
                            domainObject: selectedParent,
-                            property: path,
+                            property: function () {
+                                return getPath();
+                            },
                            icon: "icon-gear",
                            title: "Edit text properties",
                            dialog: DIALOG_FORM['text']
@@ -311,14 +396,16 @@ define([], function () {
                        toolbar = [
                            fill,
                            stroke,
-                            color,
                            separator,
+                            color,
                            size,
                            separator,
+                            stackOrder,
                            x,
                            y,
                            height,
                            width,
+                            useGrid,
                            separator,
                            text,
                            separator,
@@ -329,10 +416,12 @@ define([], function () {
                            fill,
                            stroke,
                            separator,
+                            stackOrder,
                            x,
                            y,
                            height,
                            width,
+                            useGrid,
                            separator,
                            remove
                        ];
@@ -340,7 +429,9 @@ define([], function () {
                        let url = {
                            control: "button",
                            domainObject: selectedParent,
-                            property: path,
+                            property: function () {
+                                return getPath();
+                            },
                            icon: "icon-image",
                            title: "Edit image properties",
                            dialog: DIALOG_FORM['image']
@@ -348,10 +439,12 @@ define([], function () {
                        toolbar = [
                            stroke,
                            separator,
+                            stackOrder,
                            x,
                            y,
                            height,
                            width,
+                            useGrid,
                            separator,
                            url,
                            separator,
@@ -362,7 +455,9 @@ define([], function () {
                            control: "input",
                            type: "number",
                            domainObject: selectedParent,
-                            property: path + ".x2",
+                            property: function () {
+                                return getPath() + ".x2";
+                            },
                            label: "X2:",
                            title: "X2 position"
                        },
@@ -370,17 +465,21 @@ define([], function () {
                            control: "input",
                            type: "number",
                            domainObject: selectedParent,
-                            property: path + ".y2",
+                            property: function () {
+                                return getPath() + ".y2";
+                            },
                            label: "Y2:",
                            title: "Y2 position",
                        };
                        toolbar = [
                            stroke,
                            separator,
+                            stackOrder,
                            x,
                            y,
                            x2,
                            y2,
+                            useGrid,
                            separator,
                            remove
                        ];
--- a/src/plugins/displayLayout/DisplayLayoutType.js
+++ b/src/plugins/displayLayout/DisplayLayoutType.js
@@ -25,6 +25,7 @@ define(function () {
        return {
            name: "Display Layout",
            creatable: true,
+            description: 'Assemble other objects and components together into a reusable screen layout. Simply drag in the objects you want, position and size them. Save your design and view or edit it at any time.',
            cssClass: 'icon-layout',
            initialize(domainObject) {
                domainObject.composition = [];
--- a/src/plugins/displayLayout/components/BoxView.vue
+++ b/src/plugins/displayLayout/components/BoxView.vue
@@ -54,7 +54,8 @@
                x: 1,
                y: 1,
                width: 10, 
-                height: 5 
+                height: 5,
+                useGrid: true
            };
        },
        inject: ['openmct'],
--- a/src/plugins/displayLayout/components/DisplayLayout.vue
+++ b/src/plugins/displayLayout/components/DisplayLayout.vue
@@ -25,30 +25,26 @@
         @dragover="handleDragOver"
         @click="bypassSelection"
         @drop="handleDrop">
-        <div class="l-layout__object">
-            <!-- Background grid -->
-            <div class="l-layout__grid-holder c-grid"
-                 v-if="!drilledIn">
-                <div class="c-grid__x l-grid l-grid-x"
-                     v-if="gridSize[0] >= 3"
-                     :style="[{ backgroundSize: gridSize[0] + 'px 100%' }]">
-                </div>
-                <div class="c-grid__y l-grid l-grid-y"
-                     v-if="gridSize[1] >= 3"
-                     :style="[{ backgroundSize: '100%' + gridSize[1] + 'px' }]"></div>
+        <!-- Background grid -->
+        <div class="l-layout__grid-holder c-grid">
+            <div class="c-grid__x l-grid l-grid-x"
+                 v-if="gridSize[0] >= 3"
+                 :style="[{ backgroundSize: gridSize[0] + 'px 100%' }]">
            </div>
-            <component v-for="(item, index) in layoutItems"
-                :is="item.type"
-                :item="item"
-                :key="item.id"
-                :gridSize="gridSize"
-                :initSelect="initSelectIndex === index"
-                :index="index"
-                @drilledIn="updateDrilledIn"
-                @endDrag="endDrag"
-                >
-            </component>
+            <div class="c-grid__y l-grid l-grid-y"
+                 v-if="gridSize[1] >= 3"
+                 :style="[{ backgroundSize: '100%' + gridSize[1] + 'px' }]"></div>
        </div>
+        <component v-for="(item, index) in layoutItems"
+                   :is="item.type"
+                   :item="item"
+                   :key="item.id"
+                   :gridSize="item.useGrid ? gridSize : [1, 1]"
+                   :initSelect="initSelectIndex === index"
+                   :index="index"
+                   @endDrag="endDrag"
+        >
+        </component>
    </div>
 </template>

@@ -59,30 +55,47 @@
        @include abs();
        display: flex;
        flex-direction: column;
+        overflow: auto;

        &__grid-holder {
            display: none;
        }

-        &__object {
-            flex: 1 1 auto;
-            overflow: auto;
-        }
-
        &__frame {
            position: absolute;
        }
    }

-    .l-shell__main-container {
-        > .l-layout {
-            [s-selected] {
-                border: $browseSelectedBorder;
+    .is-editing {
+        .l-shell__main-container {
+            &[s-selected],
+            &[s-selected-parent] {
+                // Display grid in main layout holder when editing
+                > .l-layout {
+                    background: $editUIGridColorBg;
+
+                    > [class*="__grid-holder"] {
+                        display: block;
+                    }
+                }
+            }
+        }
+
+        .l-layout__frame {
+            &[s-selected],
+            &[s-selected-parent] {
+                // Display grid in nested layouts when editing
+                > * > * > .l-layout {
+                    background: $editUIGridColorBg;
+                    box-shadow: inset $editUIGridColorFg 0 0 2px 1px;
+
+                    > [class*='grid-holder'] {
+                        display: block;
+                    }
+                }
            }
        }
    }
-
-    // Styles moved to _global.scss;
 </style>


@@ -104,6 +117,12 @@
        'text-view': TextView,
        'image-view': ImageView
    };
+    const ORDERS = {
+        top: Number.POSITIVE_INFINITY,
+        up: 1,
+        down: -1,
+        bottom: Number.NEGATIVE_INFINITY
+    };

    function getItemDefinition(itemType, ...options) {
        let itemView = ITEM_TYPE_VIEW_MAP[itemType];
@@ -119,7 +138,6 @@
        data() {
            let domainObject = JSON.parse(JSON.stringify(this.domainObject));
            return {
-                drilledIn: undefined,
                internalDomainObject: domainObject,
                initSelectIndex: undefined
            };
@@ -144,16 +162,49 @@
                    return;
                }

-                this.updateDrilledIn();
+                if (this.removeSelectionListener) {
+                    this.removeSelectionListener();
+                }
+
+                let itemIndex = selection[0].context.index;
+
+                if (itemIndex !== undefined) {
+                    this.attachSelectionListener(itemIndex);
+                }
            },
-            updateDrilledIn(drilledInItem) {
-                let identifier = drilledInItem && this.openmct.objects.makeKeyString(drilledInItem.identifier);
-                this.drilledIn = identifier;
-                this.layoutItems.forEach(item => {
-                    if (item.type === 'subobject-view') {
-                        item.drilledIn = this.openmct.objects.makeKeyString(item.identifier) === identifier;
+            attachSelectionListener(index) {
+                let path = `configuration.items[${index}].useGrid`;
+                this.removeSelectionListener = this.openmct.objects.observe(this.internalDomainObject, path, function (value) {
+                    let item = this.layoutItems[index];
+
+                    if (value) {
+                        item.x = Math.round(item.x / this.gridSize[0]);
+                        item.y = Math.round(item.y / this.gridSize[1]);
+                        item.width = Math.round(item.width / this.gridSize[0]);
+                        item.height = Math.round(item.height / this.gridSize[1]);
+
+                        if (item.x2) {
+                            item.x2 = Math.round(item.x2 / this.gridSize[0]);
+                        }
+                        if (item.y2) {
+                            item.y2 = Math.round(item.y2 / this.gridSize[1]);
+                        }
+                    } else {
+                        item.x = this.gridSize[0] * item.x;
+                        item.y = this.gridSize[1] * item.y;
+                        item.width = this.gridSize[0] * item.width;
+                        item.height = this.gridSize[1] * item.height;
+
+                        if (item.x2) {
+                            item.x2 = this.gridSize[0] * item.x2;
+                        }
+                        if (item.y2) {
+                            item.y2 = this.gridSize[1] * item.y2;
+                        }
                    }
-                });
+                    item.useGrid = value;
+                    this.mutate(`configuration.items[${index}]`, item);
+                }.bind(this));
            },
            bypassSelection($event) {
                if (this.dragInProgress) {
@@ -234,12 +285,17 @@
                this.initSelectIndex = this.layoutItems.length - 1;
            },
            trackItem(item) {
+                if (!item.identifier) {
+                    return;
+                }
+
+                let keyString = this.openmct.objects.makeKeyString(item.identifier);
+
                if (item.type === "telemetry-view") {
-                    let keyString = this.openmct.objects.makeKeyString(item.identifier);
                    let count = this.telemetryViewMap[keyString] || 0;
                    this.telemetryViewMap[keyString] = ++count;
                } else if (item.type === "subobject-view") {
-                    this.objectViewMap[this.openmct.objects.makeKeyString(item.identifier)] = true;
+                    this.objectViewMap[keyString] = true;
                }
            },
            removeItem(item, index) {
@@ -311,13 +367,28 @@
                });
                this.mutate("configuration.items", layoutItems);
                this.$el.click();
+            },
+            orderItem(position, index) {
+                let delta = ORDERS[position];
+                let newIndex = Math.max(Math.min(index + delta, this.layoutItems.length - 1), 0);
+                let item = this.layoutItems[index];
+
+                if (newIndex !== index) {
+                    this.layoutItems.splice(index, 1);
+                    this.layoutItems.splice(newIndex, 0, item);
+                    this.mutate('configuration.items', this.layoutItems);
+
+                    if (this.removeSelectionListener) {
+                        this.removeSelectionListener();
+                        this.attachSelectionListener(newIndex);
+                    }
+                }
            }
        },
        mounted() {
            this.unlisten = this.openmct.objects.observe(this.internalDomainObject, '*', function (obj) {
                this.internalDomainObject = JSON.parse(JSON.stringify(obj));
            }.bind(this));
-
            this.openmct.selection.on('change', this.setSelection);
            this.initializeItems();
            this.composition = this.openmct.composition.get(this.internalDomainObject);
@@ -330,7 +401,10 @@
            this.composition.off('add', this.addChild);
            this.composition.off('remove', this.removeChild);
            this.unlisten();
+
+            if (this.removeSelectionListener) {
+                this.removeSelectionListener();
+            }
        }
    }
-
 </script>
--- a/src/plugins/displayLayout/components/ImageView.vue
+++ b/src/plugins/displayLayout/components/ImageView.vue
@@ -56,7 +56,8 @@
                y: 1,
                width: 10,
                height: 5,
-                url: element.url
+                url: element.url,
+                useGrid: true
            };
        },
        inject: ['openmct'],
--- a/src/plugins/displayLayout/components/LayoutFrame.vue
+++ b/src/plugins/displayLayout/components/LayoutFrame.vue
@@ -25,25 +25,24 @@
         :class="{
             'no-frame': !item.hasFrame,
             'u-inspectable': inspectable,
-             'is-drilled-in': item.drilledIn
+             'is-resizing': isResizing
         }"
-         :style="style"
-         @dblclick="drill($event)">
+         :style="style">

        <slot></slot>

        <!-- Drag handles -->
        <div class="c-frame-edit">
            <div class="c-frame-edit__move"
-                 @mousedown="startDrag([1,1], [0,0], $event)"></div>
+                 @mousedown="startDrag([1,1], [0,0], $event, 'move')"></div>
            <div class="c-frame-edit__handle c-frame-edit__handle--nw"
-                 @mousedown="startDrag([1,1], [-1,-1], $event)"></div>
+                 @mousedown="startDrag([1,1], [-1,-1], $event, 'resize')"></div>
            <div class="c-frame-edit__handle c-frame-edit__handle--ne"
-                 @mousedown="startDrag([0,1], [1,-1], $event)"></div>
+                 @mousedown="startDrag([0,1], [1,-1], $event, 'resize')"></div>
            <div class="c-frame-edit__handle c-frame-edit__handle--sw"
-                 @mousedown="startDrag([1,0], [-1,1], $event)"></div>
+                 @mousedown="startDrag([1,0], [-1,1], $event, 'resize')"></div>
            <div class="c-frame-edit__handle c-frame-edit__handle--se"
-                 @mousedown="startDrag([0,0], [1,1], $event)"></div>
+                 @mousedown="startDrag([0,0], [1,1], $event, 'resize')"></div>
        </div>
    </div>
 </template>
@@ -55,20 +54,167 @@
    .c-frame {
        display: flex;
        flex-direction: column;
-        border: 1px solid transparent;

-        /*************************** NO-FRAME */
-        &.no-frame {
-            > [class*="contents"] > [class*="__header"] {
-                display: none;
-            }
+        // Whatever is placed into the slot, make it fill the entirety of the space, obeying padding
+        > *:first-child {
+            flex: 1 1 auto;
        }

        &:not(.no-frame) {
            background: $colorBodyBg;
-            border: 1px solid $colorInteriorBorder;
+            border: $browseFrameBorder;
            padding: $interiorMargin;
        }
+
+    }
+
+    .c-frame-edit {
+        // In Layouts, this is the editing rect and handles
+        // In Fixed Position, this is a wrapper element
+        @include abs();
+        display: none;
+
+        &__move {
+            @include abs();
+            cursor: move;
+        }
+
+        &__handle {
+            $d: 6px;
+            $o: floor($d * -0.5);
+            background: $editFrameColorHandleFg;
+            box-shadow: $editFrameColorHandleBg 0 0 0 2px;
+            display: none; // Set to block via s-selected selector
+            position: absolute;
+            width: $d; height: $d;
+            top: auto; right: auto; bottom: auto; left: auto;
+
+            &:before {
+                // Extended hit area
+                @include abs(-10px);
+                content: '';
+                display: block;
+                z-index: 0;
+            }
+
+            &:hover {
+                background: $editUIColor;
+            }
+
+            &--nwse {
+                cursor: nwse-resize;
+            }
+
+            &--nw {
+                cursor: nw-resize;
+                left: $o; top: $o;
+            }
+
+            &--ne {
+                cursor: ne-resize;
+                right: $o; top: $o;
+            }
+
+            &--se {
+                cursor: se-resize;
+                right: $o; bottom: $o;
+            }
+
+            &--sw {
+                cursor: sw-resize;
+                left: $o; bottom: $o;
+            }
+        }
+    }
+
+    .c-so-view.has-complex-content + .c-frame-edit {
+        // Target frames that hold domain objects that include header elements, as opposed to drawing and alpha objects
+        // Make the __move element a more affordable drag UI element
+        .c-frame-edit__move {
+            @include userSelectNone();
+            background: $editFrameMovebarColorBg;
+            box-shadow: rgba(black, 0.2) 0 1px;
+            bottom: auto;
+            height: 0; // Height is set on hover on s-selected.c-frame
+            opacity: 0.8;
+            max-height: 100%;
+            overflow: hidden;
+            text-align: center;
+
+            &:before {
+                // Grippy
+                $h: 4px;
+                $tbOffset: ($editFrameMovebarH - $h) / 2;
+                $lrOffset: 25%;
+                @include grippy($editFrameMovebarColorFg);
+                content: '';
+                display: block;
+                position: absolute;
+                top: $tbOffset; right: $lrOffset; bottom: $tbOffset; left: $lrOffset;
+            }
+
+            &:hover {
+                background: $editFrameHovMovebarColorBg;
+                &:before { @include grippy($editFrameHovMovebarColorFg); }
+            }
+        }
+    }
+
+    .is-editing {
+        .c-frame {
+            $moveBarOutDelay: 500ms;
+            &.no-frame {
+                border: $editFrameBorder; // Base border style for a frame element while editing.
+            }
+
+            &-edit {
+                display: contents;
+            }
+
+            &-edit__move,
+            .c-so-view {
+                transition: $transOut;
+                transition-delay: $moveBarOutDelay;
+            }
+
+            &:not([s-selected]) {
+                &:hover {
+                    border: $editFrameBorderHov;
+                }
+            }
+
+            &[s-selected] {
+                // All frames selected while editing
+                border: $editFrameSelectedBorder;
+                box-shadow: $editFrameSelectedShdw;
+
+                > .c-frame-edit {
+                    [class*='__handle'] {
+                        display: block;
+                    }
+                }
+            }
+        }
+
+        .l-layout__frame:not(.is-resizing) {
+            // Show and animate the __move bar for sub-object views with complex content
+            &:hover > .c-so-view.has-complex-content {
+                // Move content down so the __move bar doesn't cover it.
+                padding-top: $editFrameMovebarH;
+                transition: $transIn;
+
+                &.c-so-view--no-frame {
+                    // Move content down with a bit more space
+                    padding-top: $editFrameMovebarH + $interiorMarginSm;
+                }
+
+                // Show the move bar
+                + .c-frame-edit .c-frame-edit__move {
+                    height: $editFrameMovebarH;
+                    transition: $transIn;
+                }
+            }
+        }
    }
 </style>

@@ -84,7 +230,8 @@
        },
        data() {
            return {
-                dragPosition: undefined
+                dragPosition: undefined,
+                isResizing: undefined
            }
        },
        computed: {
@@ -110,24 +257,6 @@
            }
        },
        methods: {
-            drill($event) {
-                if ($event) {
-                    $event.stopPropagation();
-                }
-
-                if (!this.openmct.editor.isEditing() || !this.item.identifier) {
-                    return;
-                }
-
-                this.openmct.objects.get(this.item.identifier)
-                    .then(domainObject => {
-                        if (this.openmct.composition.get(domainObject) === undefined) {
-                            return;
-                        }
-
-                        this.$emit('drilledIn', this.item);
-                    });
-            },
            updatePosition(event) {
                let currentPosition = [event.pageX, event.pageY];
                this.initialPosition = this.initialPosition || currentPosition;
@@ -135,7 +264,7 @@
                    return value - this.initialPosition[index];
                }.bind(this));
            },
-            startDrag(posFactor, dimFactor, event) {
+            startDrag(posFactor, dimFactor, event, type) {
                document.body.addEventListener('mousemove', this.continueDrag);
                document.body.addEventListener('mouseup', this.endDrag);

@@ -145,6 +274,7 @@
                };
                this.updatePosition(event);
                this.activeDrag = new LayoutDrag(this.dragPosition, posFactor, dimFactor, this.gridSize);
+                this.isResizing = type === 'resize';
                event.preventDefault();
            },
            continueDrag(event) {
@@ -162,6 +292,7 @@
                this.dragPosition = undefined;
                this.initialPosition = undefined;
                this.delta = undefined;
+                this.isResizing = undefined;
                event.preventDefault();
            }
        }
--- a/src/plugins/displayLayout/components/LineView.vue
+++ b/src/plugins/displayLayout/components/LineView.vue
@@ -66,7 +66,8 @@
                y: 10,
                x2: 10,
                y2: 5,
-                stroke: '#717171'
+                stroke: '#717171',
+                useGrid: true
            };
        },
        inject: ['openmct'],
--- a/src/plugins/displayLayout/components/SubobjectView.vue
+++ b/src/plugins/displayLayout/components/SubobjectView.vue
@@ -22,8 +22,7 @@
 <template>
    <layout-frame :item="item"
                  :grid-size="gridSize"
-                  @endDrag="(item, updates) => $emit('endDrag', item, updates)"
-                  @drilledIn="item => $emit('drilledIn', item)">
+                  @endDrag="(item, updates) => $emit('endDrag', item, updates)">
        <object-frame v-if="domainObject"
                      :domain-object="domainObject"
                      :object-path="objectPath"
@@ -65,7 +64,8 @@
                x: position[0],
                y: position[1],
                identifier: domainObject.identifier,
-                hasFrame: hasFrameByDefault(domainObject.type)
+                hasFrame: hasFrameByDefault(domainObject.type),
+                useGrid: true
            };
        },
        inject: ['openmct'],
--- a/src/plugins/displayLayout/components/TelemetryView.vue
+++ b/src/plugins/displayLayout/components/TelemetryView.vue
@@ -99,6 +99,7 @@
                fill: "",
                color: "",
                size: "13px",
+                useGrid: true
            };
        },
        inject: ['openmct'],
--- a/src/plugins/displayLayout/components/TextView.vue
+++ b/src/plugins/displayLayout/components/TextView.vue
@@ -59,7 +59,8 @@
                y: 1,
                width: 10,
                height: 5,
-                text: element.text
+                text: element.text,
+                useGrid: true
            };
        },
        inject: ['openmct'],
--- a/src/plugins/displayLayout/plugin.js
+++ b/src/plugins/displayLayout/plugin.js
@@ -61,7 +61,8 @@ export default function () {
                        return {
                            item: domainObject,
                            addElement: component && component.$refs.displayLayout.addElement,
-                            removeItem: component && component.$refs.displayLayout.removeItem
+                            removeItem: component && component.$refs.displayLayout.removeItem,
+                            orderItem: component && component.$refs.displayLayout.orderItem
                        }
                    },
                    destroy() {
--- a/src/plugins/flexibleLayout/components/container.vue
+++ b/src/plugins/flexibleLayout/components/container.vue
@@ -24,7 +24,7 @@
    <div class="c-fl-container"
         :style="[{'flex-basis': sizeString}]"
         :class="{'is-empty': !frames.length}">
-        <div class="c-fl-container__header icon-grippy-ew"
+        <div class="c-fl-container__header"
            v-show="isEditing"
            draggable="true"
            @dragstart="startContainerDrag">
--- a/src/plugins/flexibleLayout/components/flexibleLayout.vue
+++ b/src/plugins/flexibleLayout/components/flexibleLayout.vue
@@ -79,6 +79,22 @@

 <style lang="scss">
    @import '~styles/sass-base';
+    
+    @mixin containerGrippy($headerSize, $dir) {
+        position: absolute;
+        $h: 6px;
+        $minorOffset: ($headerSize - $h) / 2;
+        $majorOffset: 35%;
+        content: '';
+        display: block;
+        position: absolute;
+        @include grippy($c: $editFrameSelectedMovebarColorFg, $dir: $dir);
+        @if $dir == 'x' {
+            top: $minorOffset; right: $majorOffset; bottom: $minorOffset; left: $majorOffset;
+        } @else {
+            top: $majorOffset; right: $minorOffset; bottom: $majorOffset; left: $minorOffset;
+        }
+    }

    .c-fl {
        @include abs();
@@ -100,7 +116,6 @@
            > * + * { margin-left: 1px; }

            &[class*='--rows'] {
-                //@include test(blue, 0.1);
                flex-direction: column;
                > * + * {
                    margin-left: 0;
@@ -128,7 +143,6 @@
        /***************************************************** CONTAINERS */
        $headerSize: 16px;

-        border: 1px solid transparent;
        display: flex;
        flex-direction: column;
        overflow: auto;
@@ -138,9 +152,9 @@
        flex-shrink: 1;

        &__header {
-            // Only displayed when editing
-            background: $editSelectableColor;
-            color: $editSelectableColorFg;
+            // Only displayed when editing, controlled via JS
+            background: $editFrameMovebarColorBg;
+            color: $editFrameMovebarColorFg;
            cursor: move;
            display: flex;
            align-items: center;
@@ -148,12 +162,8 @@

            &:before {
                // Drag grippy
-                font-size: 0.8em;
+                @include containerGrippy($headerSize, 'x');
                opacity: 0.5;
-                position: absolute;
-                left: 50%; top: 50%;
-                transform-origin: center;
-                transform: translate(-50%, -50%);
            }
        }

@@ -173,19 +183,27 @@
        }

        .is-editing & {
-            //background: $editCanvasColorBg;
-            border-color: $editSelectableColor;
-
            &:hover {
-                border-color: $editSelectableColorHov;
+                .c-fl-container__header {
+                    background: $editFrameHovMovebarColorBg;
+                    color: $editFrameHovMovebarColorFg;
+
+                    &:before {
+                        opacity: .75;
+                    }
+                }
            }

            &[s-selected] {
-                border-color: $editSelectableColorSelected;
+                border: $editFrameSelectedBorder;

                .c-fl-container__header {
-                    background: $editSelectableColorSelected;
-                    color: $editSelectableColorSelectedFg;
+                    background:$editFrameSelectedMovebarColorBg;
+                    color: $editFrameSelectedMovebarColorFg;
+                    &:before {
+                        // Grippy
+                        opacity: 1;
+                    }
                }
            }
        }
@@ -194,11 +212,6 @@
        // Frames get styled here because this is particular to their presence in this layout type
        .c-fl-frame {
            @include browserPrefix(margin-collapse, collapse);
-            margin: 1px;
-
-            //&__drag-wrapper {
-                // border: 1px solid $colorInteriorBorder; // Now handled by is-selectable
-            //}
        }

        /****** ROWS LAYOUT */
@@ -211,8 +224,8 @@
                overflow: hidden;

                &:before {
-                    // Drag grippy
-                    transform: rotate(90deg) translate(-50%, 50%);
+                    // Grippy
+                    @include containerGrippy($headerSize, 'y');
                }
            }

@@ -235,8 +248,6 @@
        $dropHintSize: 15px;

        display: flex;
-      //  justify-content: stretch;
-      //  align-items: stretch;
        flex: 1 1;
        flex-direction: column;
        overflow: hidden; // Needed to allow frames to collapse when sized down
@@ -275,7 +286,6 @@
            pointer-events: none;
            text-align: center;
            width: $size;
-            z-index: 2;

            // Changed when layout is different, see below
            border-top-right-radius: $controlCr;
@@ -304,37 +314,16 @@

            &:before {
                // The visible resize line
-                background: $editColor;
+                background: $editUIColor;
                content: '';
                display: block;
                flex: 1 1 auto;
                min-height: $size; min-width: $size;
            }

-            &__grippy {
-                // Grippy element
-                $d: 4px;
-                $c: black;
-                $a: 0.9;
-                $d: 5px;
-                background: $editColor;
-                color: $editColorBg;
-                border-radius: $smallCr;
-                font-size: 0.8em;
-                height: $d;
-                width: $d * 10;
-                position: absolute;
-                left: 50%; top: 50%;
-                text-align: center;
-                transform-origin: center center;
-                transform: translate(-50%, -50%);
-                z-index: 10;
-            }
-
            &.vertical {
                padding: $margin $size;
                &:hover{
-                  //  padding: $marginHov 0;
                    cursor: row-resize;
                }
            }
@@ -342,20 +331,15 @@
            &.horizontal {
                padding: $size $margin;
                &:hover{
-                 //   padding: 0 $marginHov;
                    cursor: col-resize;
                }
-
-                [class*='grippy'] {
-                    transform: translate(-50%) rotate(90deg);
-                }
            }

            &:hover {
                transition: $transOut;
                &:before {
                    // The visible resize line
-                    background: $editColorHov;
+                    background: $editUIColorHov;
                }
            }
        }
--- a/src/plugins/flexibleLayout/components/frame.vue
+++ b/src/plugins/flexibleLayout/components/frame.vue
@@ -26,7 +26,7 @@
            'flex-basis': `${frame.size}%`
        }">

-        <div class="c-frame c-fl-frame__drag-wrapper is-selectable is-moveable"
+        <div class="c-frame c-fl-frame__drag-wrapper is-selectable u-inspectable is-moveable"
             draggable="true"
             @dragstart="initDrag"
             ref="frame">
--- a/src/plugins/flexibleLayout/toolbarProvider.js
+++ b/src/plugins/flexibleLayout/toolbarProvider.js
@@ -57,14 +57,14 @@ function ToolbarProvider(openmct) {
                property: 'configuration.rowsLayout',
                options: [
                    {
-                        value: false,
+                        value: true,
                        icon: 'icon-columns',
-                        title: 'Columns'
+                        title: 'Columns layout'
                    },
                    {
-                        value: true,
+                        value: false,
                        icon: 'icon-rows',
-                        title: 'Rows'
+                        title: 'Rows layout'
                    }
                ]
            };
@@ -120,14 +120,14 @@ function ToolbarProvider(openmct) {
                    property: `configuration.containers[${containerIndex}].frames[${frameIndex}].noFrame`,
                    options: [
                        {
-                            value: true,
+                            value: false,
                            icon: 'icon-frame-hide',
-                            title: "Hide frame"
+                            title: "Frame hidden"
                        },
                        {
-                            value: false,
+                            value: true,
                            icon: 'icon-frame-show',
-                            title: "Show frame"
+                            title: "Frame visible"
                        }
                    ]
                };
--- a/src/plugins/folderView/components/ListItem.vue
+++ b/src/plugins/folderView/components/ListItem.vue
@@ -4,9 +4,8 @@
        @click="navigate">
        <td class="c-list-item__name">
            <a :href="objectLink" ref="objectLink">
-                <div class="c-list-item__type-icon"
-                     :class="item.type.cssClass"></div>
-                {{item.model.name}}
+                <div class="c-list-item__type-icon" :class="item.type.cssClass"></div>
+                <div class="c-list-item__name-value">{{item.model.name}}</div>
            </a>
        </td>
        <td class="c-list-item__type">{{ item.type.name }}</td>
@@ -20,17 +19,24 @@

    /******************************* LIST ITEM */
    .c-list-item {
-        &__name {
-            @include ellipsize();
+        &__name a {
+            display: flex;
+
+            > * + * { margin-left: $interiorMarginSm; }
        }

        &__type-icon {
+            // Have to do it this way instead of using icon-* class, due to need to apply alias to the icon
            color: $colorKey;
            display: inline-block;
            width: 1em;
            margin-right:$interiorMarginSm;
        }

+        &__name-value {
+            @include ellipsize();
+        }
+
        &.is-alias {
            // Object is an alias to an original.
            [class*='__type-icon'] {
@@ -48,7 +54,6 @@
            }
        }
    }
-
 </style>

 <script>
--- a/src/plugins/folderView/components/ListView.vue
+++ b/src/plugins/folderView/components/ListView.vue
@@ -78,9 +78,12 @@

        td {
            $p: floor($interiorMargin * 1.5);
-            font-size: 1.1em;
+            @include ellipsize();
+            line-height: 120%; // Needed for icon alignment
+            max-width: 0;
            padding-top: $p;
            padding-bottom: $p;
+            width: 25%;

            &:not(.c-list-item__name) {
                color: $colorItemFgDetails;
--- a/src/plugins/notebook/res/templates/notebook.html
+++ b/src/plugins/notebook/res/templates/notebook.html
@@ -5,21 +5,17 @@
                @input="search"
                @clear="search">
            </search>
-        <div class="c-notebook__controls">
-            <div class="select c-notebook__controls__time">
-                <select v-model="showTime">
-                    <option value="0" selected="selected">Show all</option>
-                    <option value="1">Last hour</option>
-                    <option value="8">Last 8 hours</option>
-                    <option value="24">Last 24 hours</option>
-                </select>
-            </div>
-            <div class="select c-notebook__controls__sort">
-                <select v-model="sortEntries">
-                    <option value="newest" :selected="sortEntries === 'newest'">Newest first</option>
-                    <option value="oldest" :selected="sortEntries === 'oldest'">Oldest first</option>
-                </select>
-            </div>
+        <div class="c-notebook__controls ">
+            <select class="c-notebook__controls__time" v-model="showTime">
+                <option value="0" selected="selected">Show all</option>
+                <option value="1">Last hour</option>
+                <option value="8">Last 8 hours</option>
+                <option value="24">Last 24 hours</option>
+            </select>
+            <select class="c-notebook__controls__time" v-model="sortEntries">
+                <option value="newest" :selected="sortEntries === 'newest'">Newest first</option>
+                <option value="oldest" :selected="sortEntries === 'oldest'">Oldest first</option>
+            </select>
        </div>
    </div>
    <div class="c-notebook__drag-area icon-plus"
--- a/src/plugins/plot/res/templates/plot-options-edit.html
+++ b/src/plugins/plot/res/templates/plot-options-edit.html
@@ -41,28 +41,24 @@
                    <div class="grid-cell label"
                         title="The field to be plotted as a value for this series.">Value</div>
                    <div class="grid-cell value">
-                        <div class="select">
-                            <select ng-model="form.yKey">
-                                <option ng-repeat="option in yKeyOptions"
-                                        value="{{option.value}}"
-                                        ng-selected="option.value == form.yKey">
-                                    {{option.name}}
-                                </option>
-                            </select>
-                        </div>
+                        <select ng-model="form.yKey">
+                            <option ng-repeat="option in yKeyOptions"
+                                    value="{{option.value}}"
+                                    ng-selected="option.value == form.yKey">
+                                {{option.name}}
+                            </option>
+                        </select>
                    </div>
                </li>
                <li class="grid-row">
                    <div class="grid-cell label"
                         title="The line rendering style for this series.">Line Style</div>
                    <div class="grid-cell value">
-                        <div class="select">
-                            <select ng-model="form.interpolate">
-                                <option value="none">None</option>
-                                <option value="linear">Linear interpolate</option>
-                                <option value="stepAfter">Step after</option>
-                            </select>
-                        </div>
+                        <select ng-model="form.interpolate">
+                            <option value="none">None</option>
+                            <option value="linear">Linear interpolate</option>
+                            <option value="stepAfter">Step after</option>
+                        </select>
                    </div>
                </li>
                <li class="grid-row">
@@ -160,15 +156,13 @@
                <div class="grid-cell label"
                     title="The position of the legend relative to the plot display area.">Position</div>
                <div class="grid-cell value">
-                    <div class="select">
-                        <select ng-model="form.position">
-                            <option value="hidden">Hidden</option>
-                            <option value="top">Top</option>
-                            <option value="right">Right</option>
-                            <option value="bottom">Bottom</option>
-                            <option value="left">Left</option>
-                        </select>
-                    </div>
+                    <select ng-model="form.position">
+                        <option value="hidden">Hidden</option>
+                        <option value="top">Top</option>
+                        <option value="right">Right</option>
+                        <option value="bottom">Bottom</option>
+                        <option value="left">Left</option>
+                    </select>
                </div>
            </li>
            <li class="grid-row">
@@ -180,15 +174,13 @@
                <div class="grid-cell label"
                     title="What to display in the legend when it's collapsed.">When collapsed show</div>
                <div class="grid-cell value">
-                    <div class="select">
-                        <select ng-model="form.valueToShowWhenCollapsed">
-                            <option value="none">nothing</option>
-                            <option value="nearestTimestamp">nearest timestamp</option>
-                            <option value="nearestValue">nearest Value</option>
-                            <option value="min">minimum value</option>
-                            <option value="max">maximum value</option>
-                        </select>
-                    </div>
+                    <select ng-model="form.valueToShowWhenCollapsed">
+                        <option value="none">Nothing</option>
+                        <option value="nearestTimestamp">Nearest timestamp</option>
+                        <option value="nearestValue">Nearest value</option>
+                        <option value="min">Minimum value</option>
+                        <option value="max">Maximum value</option>
+                    </select>
                </div>
            </li>
            <li class="grid-row">
--- a/src/plugins/telemetryTable/components/table.vue
+++ b/src/plugins/telemetryTable/components/table.vue
@@ -34,7 +34,7 @@
    <div class="c-telemetry-table__headers-w js-table__headers-w" ref="headersTable" :style="{ 'max-width': widthWithScroll}">
        <table class="c-table__headers c-telemetry-table__headers">
            <thead>
-                <tr>
+                <tr class="c-telemetry-table__headers__name">
                    <table-column-header
                        v-for="(title, key, headerIndex) in headers"
                        :key="key"
@@ -50,7 +50,7 @@
                        :sortOptions="sortOptions"
                        >{{title}}</table-column-header>
                </tr>
-                <tr>
+                <tr class="c-telemetry-table__headers__filter">
                    <table-column-header
                        v-for="(title, key, headerIndex) in headers"
                        :key="key"
@@ -110,8 +110,8 @@
    .c-telemetry-table__drop-target {
        position: absolute;
        width: 2px;
-        background-color: $editColor;
-        box-shadow: rgba($editColor, 0.5) 0 0 10px;
+        background-color: $editUIColor;
+        box-shadow: rgba($editUIColor, 0.5) 0 0 10px;
        z-index: 1;
        pointer-events: none;
    }
@@ -214,6 +214,22 @@
        }
    }

+    /******************************* EDITING */
+    .is-editing {
+        .c-telemetry-table__headers__name {
+            th[draggable],
+            th[draggable] > * {
+                cursor: move;
+            }
+
+            th[draggable]:hover {
+                $b: $editFrameHovMovebarColorBg;
+                background: $b;
+                > * { background: $b; }
+            }
+        }
+    }
+
    /******************************* LEGACY */
    .s-status-taking-snapshot,
    .overlay.snapshot {
--- a/src/styles-new/_constants-espresso.scss
+++ b/src/styles-new/_constants-espresso.scss
@@ -47,6 +47,14 @@ $bodyFont: $heroFont;
    @return linear-gradient(lighten($c, 5%), $c);
 }

+@function pullForward($val, $amt) {
+    @return lighten($val, $amt);
+}
+
+@function pushBack($val, $amt) {
+    @return darken($val, $amt);
+}
+
 // Constants
 $fontBaseSize: 12px;
 $smallCr: 2px;
@@ -55,7 +63,7 @@ $basicCr: 4px;

 // Base colors
 $colorBodyBg: #393939;
-$colorBodyFg: #aaa;
+$colorBodyFg: #aaaaaa;
 $colorBodyFgEm: #fff;
 $colorGenBg: #222;
 $colorHeadBg: #262626;
@@ -65,10 +73,11 @@ $colorStatusBarFg: $colorBodyFg;
 $colorStatusBarFgHov: #aaa;
 $colorKey: #0099cc;
 $colorKeyFg: #fff;
-$colorKeyHov: #00c0f6;
+$colorKeyHov: #26d8ff;
 $colorKeyFilter: invert(36%) sepia(76%) saturate(2514%) hue-rotate(170deg) brightness(99%) contrast(101%);
 $colorKeyFilterHov: invert(63%) sepia(88%) saturate(3029%) hue-rotate(154deg) brightness(101%) contrast(100%);
 $colorKeySelectedBg: $colorKey;
+$uiColor: #00b2ff; // Resize bars, splitter bars, etc.
 $colorInteriorBorder: rgba($colorBodyFg, 0.2);
 $colorA: #ccc;
 $colorAHov: #fff;
@@ -94,51 +103,52 @@ $colorPausedFg: #fff;
 $colorOk: #33cc33;

 // Base variations
-$colorBodyBgSubtle: lighten($colorBodyBg, 5%);
-$colorBodyBgSubtleHov: darken($colorKey, 50%);
-$colorKeySubtle: darken($colorKey, 10%);
+$colorBodyBgSubtle: pullForward($colorBodyBg, 5%);
+$colorBodyBgSubtleHov: pushBack($colorKey, 50%);
+$colorKeySubtle: pushBack($colorKey, 10%);

 // Time Colors
 $colorTime: #618cff;
 $colorTimeBg: $colorTime;
-$colorTimeFg: lighten($colorTimeBg, 30%);
-$colorTimeHov: lighten($colorTime, 10%);
-$colorTimeSubtle: darken($colorTime, 20%);
+$colorTimeFg: pullForward($colorTimeBg, 30%);
+$colorTimeHov: pullForward($colorTime, 10%);
+$colorTimeSubtle: pushBack($colorTime, 20%);
 $colorTOI: $colorBodyFg; // was $timeControllerToiLineColor
 $colorTOIHov: $colorTime; // was $timeControllerToiLineColorHov

-/************************************************** EDITING */
-// Base Colors
-$dlSpread: 20%;
-$editColor: #00c7c3;
-$editColorAlt: #9971ff;
-$editColorBgBase: darken($editColor, $dlSpread);
-$editColorBg: rgba($editColorBgBase, 0.2);
-$editColorFg: lighten($editColor, $dlSpread);
-$editColorHov: lighten($editColor, 20%);
-// Canvas
-$editCanvasColorBg: $editColorBg; //#002524;
-$editCanvasColorGrid: rgba($editColorBgBase, 0.4); //lighten($editCanvasColorBg, 3%);
-// Selectable
-$editSelectableColor: #006563;
-$editSelectableColorFg: lighten($editSelectableColor, 20%);
-$editSelectableColorHov: lighten($editSelectableColor, 10%);
-// Selectable selected
-$editSelectableColorSelected: $editSelectableColorHov;
-$editSelectableColorSelectedFg: lighten($editSelectableColorSelected, 30%);
-$editSelectableColorFg: darken($editSelectableColor, 40%);
-$editSelectableBorder: 1px dotted $editSelectableColor;
-$editSelectableBorderHov: 1px dotted $editColorAlt;
-$editSelectableBorderSelected: 1px solid $editColor;
-$editSelectableShdwSelected: rgba($editColor, 0.75) 0 0 0 1px;
-$editMoveableSelectedShdw: rgba($editColor, 0.5) 0 0 10px;
-$editBorderDrilledIn: 1px dashed $editColorAlt;
-$colorGridLines: rgba($editColor, 0.2);
-
 /************************************************** BROWSING */
-$browseSelectableBorderHov: 1px dotted rgba($colorBodyFg, 0.2);
-$browseSelectableShdwHov: rgba($colorBodyFg, 0.2) 0 0 3px;
-$browseSelectedBorder: 1px solid rgba($colorBodyFg, 0.6);
+$browseFrameColor: pullForward($colorBodyBg, 10%);
+$browseFrameBorder: 1px solid $browseFrameColor; // Frames in Disp and Flex Layouts when frame is showing
+$browseSelectableShdwHov: rgba($colorBodyFg, 0.3) 0 0 3px;
+$browseSelectedBorder: 1px solid rgba($colorBodyFg, 0.4);
+
+/************************************************** EDITING */
+$editUIColor: $uiColor; // Base color
+$editUIColorHov: pullForward(saturate($uiColor, 10%), 20%); // Hover color when $editUIColor is applied as a base color
+$editUIBaseColor: #344b8d; // Base color, toolbar bg
+$editUIBaseColorHov: pullForward($editUIBaseColor, 20%);
+$editUIBaseColorFg: #ffffff; // Toolbar button icon colors, etc.
+$editUIAreaBaseColor: pullForward(saturate($editUIBaseColor, 30%), 20%);
+$editUIAreaShdw: $editUIAreaBaseColor 0 0 0 2px; // Edit area s-selected-parent
+$editUIAreaShdwSelected: $editUIAreaBaseColor 0 0 0 3px; // Edit area s-selected
+$editUIGridColorBg: rgba($editUIBaseColor, 0.2); // Background of layout editing area
+$editUIGridColorFg: rgba(#000, 0.1); // Grid lines in layout editing area
+$editFrameColor: $browseFrameColor; // Solid or dotted border applied to non-selected frames in a layout; move-bar on frame hover
+$editFrameBorder: 1px dotted $editFrameColor;
+$editFrameColorHov: $editUIColor; // Solid border hover on frames; hover should not be applied to selected objects
+$editFrameBorderHov: 1px solid $editFrameColorHov; // Hover on selectable frames
+$editFrameColorSelected: #ccc; // Border of selected frames
+$editFrameColorHandleBg: $colorBodyBg; // Resize handle 'offset' color to make handle standout
+$editFrameColorHandleFg: $editFrameColorSelected; // Resize handle main color
+$editFrameSelectedShdw: rgba(black, 0.5) 0 1px 10px 1px;
+$editFrameSelectedBorder: 1px dashed $editFrameColorSelected; // Selected frame element
+$editFrameMovebarColorBg: $editFrameColor; // Movebar bg color
+$editFrameMovebarColorFg: pullForward($editFrameMovebarColorBg, 20%);  // Grippy lines, container size text
+$editFrameHovMovebarColorBg: pullForward($editFrameMovebarColorBg, 10%); // Hover style
+$editFrameHovMovebarColorFg: pullForward($editFrameMovebarColorFg, 10%);
+$editFrameSelectedMovebarColorBg: pullForward($editFrameMovebarColorBg, 15%); // Selected style
+$editFrameSelectedMovebarColorFg: pullForward($editFrameMovebarColorFg, 15%);
+$editFrameMovebarH: 10px; // Height of move bar in layout frame

 // Icons
 $colorIconAlias: #4af6f3;
@@ -148,16 +158,16 @@ $colorIconAliasForKeyFilter: #aaa;
 $colorTabsHolderBg: rgba(black, 0.2);

 // Buttons and Controls
-$colorBtnBg: lighten($colorBodyBg, 10%);
-$colorBtnBgHov: lighten($colorBtnBg, 10%);
-$colorBtnFg: lighten($colorBodyFg, 10%);
-$colorBtnReverseFg: lighten($colorBtnFg, 10%);
-$colorBtnReverseBg: lighten($colorBtnBg, 10%);
+$colorBtnBg: pullForward($colorBodyBg, 10%);
+$colorBtnBgHov: pullForward($colorBtnBg, 10%);
+$colorBtnFg: pullForward($colorBodyFg, 10%);
+$colorBtnReverseFg: pullForward($colorBtnFg, 10%);
+$colorBtnReverseBg: pullForward($colorBtnBg, 10%);
 $colorBtnFgHov: $colorBtnFg;
 $colorBtnMajorBg: $colorKey;
 $colorBtnMajorBgHov: $colorKeyHov;
 $colorBtnMajorFg: $colorKeyFg;
-$colorBtnMajorFgHov: darken($colorBtnMajorFg, 10%);
+$colorBtnMajorFgHov: pushBack($colorBtnMajorFg, 10%);
 $colorBtnCautionBg: #f16f6f;
 $colorBtnCautionBgHov: #f1504e;
 $colorBtnCautionFg: $colorBtnFg;
@@ -165,20 +175,20 @@ $colorClickIcon: $colorKey;
 $colorClickIconBgHov: rgba($colorKey, 0.6);
 $colorClickIconFgHov: $colorKeyHov;
 $colorDropHint: $colorKey;
-$colorDropHintBg: darken($colorDropHint, 10%);
+$colorDropHintBg: pushBack($colorDropHint, 10%);
 $colorDropHintBgHov: $colorDropHint;
-$colorDropHintFg: lighten($colorDropHint, 40%);
+$colorDropHintFg: pullForward($colorDropHint, 40%);
 $colorDisclosureCtrl: rgba($colorBodyFg, 0.5);
 $colorDisclosureCtrlHov: rgba($colorBodyFg, 0.7);

 // Menus
-$colorMenuBg: lighten($colorBodyBg, 15%);
-$colorMenuFg: lighten($colorBodyFg, 30%);
-$colorMenuIc: lighten($colorKey, 15%);
+$colorMenuBg: pullForward($colorBodyBg, 15%);
+$colorMenuFg: pullForward($colorBodyFg, 30%);
+$colorMenuIc: pullForward($colorKey, 15%);
 $colorMenuHovBg: $colorMenuIc;
-$colorMenuHovFg: lighten($colorMenuFg, 10%);
+$colorMenuHovFg: pullForward($colorMenuFg, 10%);
 $colorMenuHovIc: $colorMenuHovFg;
-$colorMenuElementHilite: lighten($colorMenuBg, 10%);
+$colorMenuElementHilite: pullForward($colorMenuBg, 10%);
 $shdwMenu: rgba(black, 0.5) 0 1px 5px;
 $shdwMenuText: none;
 $menuItemPad: $interiorMargin, floor($interiorMargin * 1.25);
@@ -200,21 +210,21 @@ $colorFormLines: rgba(#000, 0.1);
 $colorFormSectionHeader: rgba(#000, 0.05);
 $colorInputBg: rgba(black, 0.2);
 $colorInputFg: $colorBodyFg;
-$colorInputPlaceholder: darken($colorBodyFg, 20%);
-$colorFormText: darken($colorBodyFg, 10%);
-$colorInputIcon: darken($colorBodyFg, 25%);
-$colorFieldHint: lighten($colorBodyFg, 40%);
+$colorInputPlaceholder: pushBack($colorBodyFg, 20%);
+$colorFormText: pushBack($colorBodyFg, 10%);
+$colorInputIcon: pushBack($colorBodyFg, 25%);
+$colorFieldHint: pullForward($colorBodyFg, 40%);
 $shdwInput: inset rgba(black, 0.4) 0 0 1px;
 $shdwInputHov: inset rgba(black, 0.7) 0 0 2px;
 $shdwInputFoc: inset rgba(black, 0.8) 0 0.25px 3px;

 // Inspector
-$colorInspectorBg: lighten($colorBodyBg, 5%);
+$colorInspectorBg: pullForward($colorBodyBg, 5%);
 $colorInspectorFg: $colorBodyFg;
-$colorInspectorPropName: darken($colorBodyFg, 20%);
-$colorInspectorPropVal: lighten($colorInspectorFg, 15%);
-$colorInspectorSectionHeaderBg: lighten($colorInspectorBg, 5%);
-$colorInspectorSectionHeaderFg: lighten($colorInspectorBg, 40%);
+$colorInspectorPropName: pushBack($colorBodyFg, 20%);
+$colorInspectorPropVal: pullForward($colorInspectorFg, 15%);
+$colorInspectorSectionHeaderBg: pullForward($colorInspectorBg, 5%);
+$colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);

 // Overlay
 $overlayColorBg: $colorMenuBg;
@@ -229,8 +239,8 @@ $colorIndicatorOn: $colorOk;
 $colorIndicatorOff: #777777;

 // Staleness
-$colorTelemFresh: lighten($colorBodyFg, 20%);
-$colorTelemStale: darken($colorBodyFg, 20%);
+$colorTelemFresh: pullForward($colorBodyFg, 20%);
+$colorTelemStale: pushBack($colorBodyFg, 20%);
 $styleTelemStale: italic;

 // Limits
@@ -256,22 +266,22 @@ $colorInfoBubbleFg: #666;

 // Items
 $colorItemBg: buttonBg($colorBtnBg);
-$colorItemBgHov: buttonBg(lighten($colorBtnBg, 5%));
+$colorItemBgHov: buttonBg(pullForward($colorBtnBg, 5%));
 $colorListItemBg: transparent;
 $colorListItemBgHov: rgba($colorKey, 0.1);
 $colorItemFg: $colorBtnFg;
-$colorItemFgDetails: darken($colorItemFg, 20%);
+$colorItemFgDetails: pushBack($colorItemFg, 20%);
 $shdwItemText: none;

 // Tabular
-$colorTabBorder: lighten($colorBodyBg, 10%);
+$colorTabBorder: pullForward($colorBodyBg, 10%);
 $colorTabBodyBg: $colorBodyBg;
-$colorTabBodyFg: lighten($colorBodyFg, 20%);
-$colorTabHeaderBg: lighten($colorBodyBg, 10%);
+$colorTabBodyFg: pullForward($colorBodyFg, 20%);
+$colorTabHeaderBg: pullForward($colorBodyBg, 10%);
 $colorTabHeaderFg: $colorBodyFg;
 $colorTabHeaderBorder: $colorBodyBg;
-$colorTabGroupHeaderBg: lighten($colorBodyBg, 5%);
-$colorTabGroupHeaderFg: darken($colorTabHeaderFg, 10%);
+$colorTabGroupHeaderBg: pullForward($colorBodyBg, 5%);
+$colorTabGroupHeaderFg: pushBack($colorTabHeaderFg, 10%);

 // Plot
 $colorPlotBg: rgba(black, 0.05);
@@ -280,22 +290,22 @@ $colorPlotHash: black;
 $opacityPlotHash: 0.2;
 $stylePlotHash: dashed;
 $colorPlotAreaBorder: $colorInteriorBorder;
-$colorPlotLabelFg: darken($colorPlotFg, 20%);
+$colorPlotLabelFg: pushBack($colorPlotFg, 20%);
 $legendHoverValueBg: rgba($colorBodyFg, 0.2);

 // Tree
 $colorTreeBg: transparent;
-$colorItemTreeHoverBg: lighten($colorBodyBg, 10%);
-$colorItemTreeHoverFg: lighten($colorBodyFg, 20%);
+$colorItemTreeHoverBg: pullForward($colorBodyBg, 10%);
+$colorItemTreeHoverFg: pullForward($colorBodyFg, 20%);
 $colorItemTreeIcon: $colorKey; // Used
 $colorItemTreeIconHover: $colorItemTreeIcon; // Used
 $colorItemTreeFg: $colorBodyFg;
-$colorItemTreeSelectedBg: darken($colorKey, 15%);
+$colorItemTreeSelectedBg: pushBack($colorKey, 15%);
 $colorItemTreeSelectedFg: $colorItemTreeHoverFg;
 $colorItemTreeSelectedIcon: $colorItemTreeSelectedFg;
-$colorItemTreeEditingBg: darken($editColor, 20%);
-$colorItemTreeEditingFg: $editColorFg;
-$colorItemTreeEditingIcon: $editColorFg;
+$colorItemTreeEditingBg: pushBack($editUIColor, 20%);
+$colorItemTreeEditingFg: $editUIColor;
+$colorItemTreeEditingIcon: $editUIColor;
 $colorItemTreeVC: $colorDisclosureCtrl;
 $colorItemTreeVCHover: $colorDisclosureCtrlHov;
 $shdwItemTreeIcon: none;
@@ -307,18 +317,18 @@ $colorThumbHoverBg: $colorItemTreeHoverBg;
 $scrollbarTrackSize: 7px;
 $scrollbarTrackShdw: rgba(#000, 0.2) 0 1px 2px;
 $scrollbarTrackColorBg: rgba(#000, 0.2);
-$scrollbarThumbColor: darken($colorBodyBg, 50%);
+$scrollbarThumbColor: pushBack($colorBodyBg, 50%);
 $scrollbarThumbColorHov: $colorKey;
-$scrollbarThumbColorMenu: lighten($colorMenuBg, 10%);
-$scrollbarThumbColorMenuHov: lighten($scrollbarThumbColorMenu, 2%);
+$scrollbarThumbColorMenu: pullForward($colorMenuBg, 10%);
+$scrollbarThumbColorMenuHov: pullForward($scrollbarThumbColorMenu, 2%);

 // Splitter
 $splitterHandleD: 2px;
 $splitterHandleHitMargin: 4px;
 $colorSplitterBaseBg: $colorBodyBg;
-$colorSplitterBg: lighten($colorSplitterBaseBg, 10%);
+$colorSplitterBg: pullForward($colorBodyBg, 10%);
 $colorSplitterFg: $colorBodyBg;
-$colorSplitterHover: $colorKey;
+$colorSplitterHover: $uiColor;
 $colorSplitterActive: $colorKey;
 $splitterBtnD: (16px, 35px); // height, width
 $splitterBtnColorBg: $colorBtnBg;
@@ -330,7 +340,7 @@ $splitterCollapsedBtnColorBgHov: $colorKey;
 $splitterCollapsedBtnColorFgHov: $colorKeyFg;

 // Mobile
-$colorMobilePaneLeft: darken($colorBodyBg, 2%);
+$colorMobilePaneLeft: pushBack($colorBodyBg, 2%);
 $colorMobilePaneLeftTreeItemBg: rgba($colorBodyFg, 0.1);
 $colorMobilePaneLeftTreeItemFg: $colorItemTreeFg;
 $colorMobileSelectListTreeItemBg: rgba(#000, 0.05);
@@ -367,21 +377,10 @@ $createBtnTextTransform: uppercase;
 }

@mixin themedButton($c: $colorBtnBg) {
-    background: linear-gradient(lighten($c, 5%), $c);
+    background: linear-gradient(pullForward($c, 5%), $c);
    box-shadow: rgba(black, 0.5) 0 0.5px 2px;
 }

-/**************************************************** NOT USED, LEAVE FOR NOW */
-// Slider controls, not in use
-/*
-$sliderColorBase: $colorKey;
-$sliderColorRangeHolder: rgba(black, 0.07);
-$sliderColorRange: rgba($sliderColorBase, 0.2);
-$sliderColorRangeHov: rgba($sliderColorBase, 0.4);
-$sliderColorKnob: darken($sliderColorBase, 20%);
-$sliderColorKnobHov: rgba($sliderColorBase, 0.7);
-$sliderColorRangeValHovBg: $sliderColorRange;
-$sliderColorRangeValHovFg: $colorBodyFg;
-$sliderKnobW: 15px;
-$sliderKnobR: 2px;
-*/
+@mixin themedSelect($bg: $colorBtnBg, $fg: $colorBtnFg) {
+    @include cSelect(linear-gradient(lighten($bg, 5%), $bg), $fg, lighten($bg, 20%), rgba(black, 0.5) 0 0.5px 3px);
+}
--- a/src/styles-new/_constants-maelstrom.scss
+++ b/src/styles-new/_constants-maelstrom.scss
@@ -51,6 +51,14 @@ $bodyFont: 'Chakra Petch', sans-serif;
    @return linear-gradient(lighten($c, 5%), $c);
 }

+@function pullForward($val, $amt) {
+    @return lighten($val, $amt);
+}
+
+@function pushBack($val, $amt) {
+    @return darken($val, $amt);
+}
+
 // Constants
 $fontBaseSize: 12px;
 $smallCr: 2px;
@@ -69,10 +77,11 @@ $colorStatusBarFg: $colorBodyFg;
 $colorStatusBarFgHov: #aaa;
 $colorKey: #0099cc;
 $colorKeyFg: #fff;
-$colorKeyHov: #00c0f6;
+$colorKeyHov: #26d8ff;
 $colorKeyFilter: invert(36%) sepia(76%) saturate(2514%) hue-rotate(170deg) brightness(99%) contrast(101%);
 $colorKeyFilterHov: invert(63%) sepia(88%) saturate(3029%) hue-rotate(154deg) brightness(101%) contrast(100%);
 $colorKeySelectedBg: $colorKey;
+$uiColor: #00b2ff; // Resize bars, splitter bars, etc.
 $colorInteriorBorder: rgba($colorBodyFg, 0.2);
 $colorA: #ccc;
 $colorAHov: #fff;
@@ -98,51 +107,52 @@ $colorPausedFg: #fff;
 $colorOk: #33cc33;

 // Base variations
-$colorBodyBgSubtle: lighten($colorBodyBg, 5%);
-$colorBodyBgSubtleHov: darken($colorKey, 50%);
-$colorKeySubtle: darken($colorKey, 10%);
+$colorBodyBgSubtle: pullForward($colorBodyBg, 5%);
+$colorBodyBgSubtleHov: pushBack($colorKey, 50%);
+$colorKeySubtle: pushBack($colorKey, 10%);

 // Time Colors
 $colorTime: #618cff;
 $colorTimeBg: $colorTime;
-$colorTimeFg: lighten($colorTimeBg, 30%);
-$colorTimeHov: lighten($colorTime, 10%);
-$colorTimeSubtle: darken($colorTime, 20%);
+$colorTimeFg: pullForward($colorTimeBg, 30%);
+$colorTimeHov: pullForward($colorTime, 10%);
+$colorTimeSubtle: pushBack($colorTime, 20%);
 $colorTOI: $colorBodyFg; // was $timeControllerToiLineColor
 $colorTOIHov: $colorTime; // was $timeControllerToiLineColorHov

-/************************************************** EDITING */
-// Base Colors
-$dlSpread: 20%;
-$editColor: #00c7c3;
-$editColorAlt: #9971ff;
-$editColorBgBase: darken($editColor, $dlSpread);
-$editColorBg: rgba($editColorBgBase, 0.2);
-$editColorFg: lighten($editColor, $dlSpread);
-$editColorHov: lighten($editColor, 20%);
-// Canvas
-$editCanvasColorBg: $editColorBg; //#002524;
-$editCanvasColorGrid: rgba($editColorBgBase, 0.4); //lighten($editCanvasColorBg, 3%);
-// Selectable
-$editSelectableColor: #006563;
-$editSelectableColorFg: lighten($editSelectableColor, 20%);
-$editSelectableColorHov: lighten($editSelectableColor, 10%);
-// Selectable selected
-$editSelectableColorSelected: $editSelectableColorHov;
-$editSelectableColorSelectedFg: lighten($editSelectableColorSelected, 30%);
-$editSelectableColorFg: darken($editSelectableColor, 40%);
-$editSelectableBorder: 1px dotted $editSelectableColor;
-$editSelectableBorderHov: 1px dotted $editColorAlt;
-$editSelectableBorderSelected: 1px solid $editColor;
-$editSelectableShdwSelected: rgba($editColor, 0.75) 0 0 0 1px;
-$editMoveableSelectedShdw: rgba($editColor, 0.5) 0 0 10px;
-$editBorderDrilledIn: 1px dashed $editColorAlt;
-$colorGridLines: rgba($editColor, 0.2);
-
 /************************************************** BROWSING */
-$browseSelectableBorderHov: 1px dotted rgba($colorBodyFg, 0.2);
-$browseSelectableShdwHov: rgba($colorBodyFg, 0.2) 0 0 3px;
-$browseSelectedBorder: 1px solid rgba($colorBodyFg, 0.6);
+$browseFrameColor: pullForward($colorBodyBg, 10%);
+$browseFrameBorder: 1px solid $browseFrameColor; // Frames in Disp and Flex Layouts when frame is showing
+$browseSelectableShdwHov: rgba($colorBodyFg, 0.3) 0 0 3px;
+$browseSelectedBorder: 1px solid rgba($colorBodyFg, 0.4);
+
+/************************************************** EDITING */
+$editUIColor: $uiColor; // Base color
+$editUIColorHov: pullForward(saturate($uiColor, 10%), 20%); // Hover color when $editUIColor is applied as a base color
+$editUIBaseColor: #344b8d; // Base color, toolbar bg
+$editUIBaseColorHov: pullForward($editUIBaseColor, 20%);
+$editUIBaseColorFg: #ffffff; // Toolbar button icon colors, etc.
+$editUIAreaBaseColor: pullForward(saturate($editUIBaseColor, 30%), 20%);
+$editUIAreaShdw: $editUIAreaBaseColor 0 0 0 2px; // Edit area s-selected-parent
+$editUIAreaShdwSelected: $editUIAreaBaseColor 0 0 0 3px; // Edit area s-selected
+$editUIGridColorBg: rgba($editUIBaseColor, 0.2); // Background of layout editing area
+$editUIGridColorFg: rgba(#000, 0.1); // Grid lines in layout editing area
+$editFrameColor: $browseFrameColor; // Solid or dotted border applied to non-selected frames in a layout; move-bar on frame hover
+$editFrameBorder: 1px dotted $editFrameColor;
+$editFrameColorHov: $editUIColor; // Solid border hover on frames; hover should not be applied to selected objects
+$editFrameBorderHov: 1px solid $editFrameColorHov; // Hover on selectable frames
+$editFrameColorSelected: #ccc; // Border of selected frames
+$editFrameColorHandleBg: $colorBodyBg; // Resize handle 'offset' color to make handle standout
+$editFrameColorHandleFg: $editFrameColorSelected; // Resize handle main color
+$editFrameSelectedShdw: rgba(black, 0.5) 0 1px 10px 1px;
+$editFrameSelectedBorder: 1px dashed $editFrameColorSelected; // Selected frame element
+$editFrameMovebarColorBg: $editFrameColor; // Movebar bg color
+$editFrameMovebarColorFg: pullForward($editFrameMovebarColorBg, 20%);  // Grippy lines, container size text
+$editFrameHovMovebarColorBg: pullForward($editFrameMovebarColorBg, 10%); // Hover style
+$editFrameHovMovebarColorFg: pullForward($editFrameMovebarColorFg, 10%);
+$editFrameSelectedMovebarColorBg: pullForward($editFrameMovebarColorBg, 15%); // Selected style
+$editFrameSelectedMovebarColorFg: pullForward($editFrameMovebarColorFg, 15%);
+$editFrameMovebarH: 10px; // Height of move bar in layout frame

 // Icons
 $colorIconAlias: #4af6f3;
@@ -152,16 +162,16 @@ $colorIconAliasForKeyFilter: #aaa;
 $colorTabsHolderBg: rgba(black, 0.2);

 // Buttons and Controls
-$colorBtnBg: lighten($colorBodyBg, 10%);
-$colorBtnBgHov: lighten($colorBtnBg, 10%);
-$colorBtnFg: lighten($colorBodyFg, 10%);
-$colorBtnReverseFg: lighten($colorBtnFg, 10%);
-$colorBtnReverseBg: lighten($colorBtnBg, 10%);
+$colorBtnBg: pullForward($colorBodyBg, 10%);
+$colorBtnBgHov: pullForward($colorBtnBg, 10%);
+$colorBtnFg: pullForward($colorBodyFg, 10%);
+$colorBtnReverseFg: pullForward($colorBtnFg, 10%);
+$colorBtnReverseBg: pullForward($colorBtnBg, 10%);
 $colorBtnFgHov: $colorBtnFg;
 $colorBtnMajorBg: $colorKey;
 $colorBtnMajorBgHov: $colorKeyHov;
 $colorBtnMajorFg: $colorKeyFg;
-$colorBtnMajorFgHov: darken($colorBtnMajorFg, 10%);
+$colorBtnMajorFgHov: pushBack($colorBtnMajorFg, 10%);
 $colorBtnCautionBg: #f16f6f;
 $colorBtnCautionBgHov: #f1504e;
 $colorBtnCautionFg: $colorBtnFg;
@@ -169,20 +179,20 @@ $colorClickIcon: $colorKey;
 $colorClickIconBgHov: rgba($colorKey, 0.6);
 $colorClickIconFgHov: $colorKeyHov;
 $colorDropHint: $colorKey;
-$colorDropHintBg: darken($colorDropHint, 10%);
+$colorDropHintBg: pushBack($colorDropHint, 10%);
 $colorDropHintBgHov: $colorDropHint;
-$colorDropHintFg: lighten($colorDropHint, 40%);
+$colorDropHintFg: pullForward($colorDropHint, 40%);
 $colorDisclosureCtrl: rgba($colorBodyFg, 0.5);
 $colorDisclosureCtrlHov: rgba($colorBodyFg, 0.7);

 // Menus
-$colorMenuBg: lighten($colorBodyBg, 15%);
-$colorMenuFg: lighten($colorBodyFg, 30%);
-$colorMenuIc: lighten($colorKey, 15%);
+$colorMenuBg: pullForward($colorBodyBg, 15%);
+$colorMenuFg: pullForward($colorBodyFg, 30%);
+$colorMenuIc: pullForward($colorKey, 15%);
 $colorMenuHovBg: $colorMenuIc;
-$colorMenuHovFg: lighten($colorMenuFg, 10%);
+$colorMenuHovFg: pullForward($colorMenuFg, 10%);
 $colorMenuHovIc: $colorMenuHovFg;
-$colorMenuElementHilite: lighten($colorMenuBg, 10%);
+$colorMenuElementHilite: pullForward($colorMenuBg, 10%);
 $shdwMenu: rgba(black, 0.5) 0 1px 5px;
 $shdwMenuText: none;
 $menuItemPad: $interiorMargin, floor($interiorMargin * 1.25);
@@ -204,21 +214,21 @@ $colorFormLines: rgba(#000, 0.1);
 $colorFormSectionHeader: rgba(#000, 0.05);
 $colorInputBg: rgba(black, 0.2);
 $colorInputFg: $colorBodyFg;
-$colorInputPlaceholder: darken($colorBodyFg, 20%);
-$colorFormText: darken($colorBodyFg, 10%);
-$colorInputIcon: darken($colorBodyFg, 25%);
-$colorFieldHint: lighten($colorBodyFg, 40%);
+$colorInputPlaceholder: pushBack($colorBodyFg, 20%);
+$colorFormText: pushBack($colorBodyFg, 10%);
+$colorInputIcon: pushBack($colorBodyFg, 25%);
+$colorFieldHint: pullForward($colorBodyFg, 40%);
 $shdwInput: inset rgba(black, 0.4) 0 0 1px;
 $shdwInputHov: inset rgba(black, 0.7) 0 0 2px;
 $shdwInputFoc: inset rgba(black, 0.8) 0 0.25px 3px;

 // Inspector
-$colorInspectorBg: lighten($colorBodyBg, 5%);
+$colorInspectorBg: pullForward($colorBodyBg, 5%);
 $colorInspectorFg: $colorBodyFg;
-$colorInspectorPropName: darken($colorBodyFg, 20%);
-$colorInspectorPropVal: lighten($colorInspectorFg, 15%);
-$colorInspectorSectionHeaderBg: lighten($colorInspectorBg, 5%);
-$colorInspectorSectionHeaderFg: lighten($colorInspectorBg, 40%);
+$colorInspectorPropName: pushBack($colorBodyFg, 20%);
+$colorInspectorPropVal: pullForward($colorInspectorFg, 15%);
+$colorInspectorSectionHeaderBg: pullForward($colorInspectorBg, 5%);
+$colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);

 // Overlay
 $overlayColorBg: $colorMenuBg;
@@ -233,8 +243,8 @@ $colorIndicatorOn: $colorOk;
 $colorIndicatorOff: #777777;

 // Staleness
-$colorTelemFresh: lighten($colorBodyFg, 20%);
-$colorTelemStale: darken($colorBodyFg, 20%);
+$colorTelemFresh: pullForward($colorBodyFg, 20%);
+$colorTelemStale: pushBack($colorBodyFg, 20%);
 $styleTelemStale: italic;

 // Limits
@@ -260,22 +270,22 @@ $colorInfoBubbleFg: #666;

 // Items
 $colorItemBg: buttonBg($colorBtnBg);
-$colorItemBgHov: buttonBg(lighten($colorBtnBg, 5%));
+$colorItemBgHov: buttonBg(pullForward($colorBtnBg, 5%));
 $colorListItemBg: transparent;
 $colorListItemBgHov: rgba($colorKey, 0.1);
 $colorItemFg: $colorBtnFg;
-$colorItemFgDetails: darken($colorItemFg, 20%);
+$colorItemFgDetails: pushBack($colorItemFg, 20%);
 $shdwItemText: none;

 // Tabular
-$colorTabBorder: lighten($colorBodyBg, 10%);
+$colorTabBorder: pullForward($colorBodyBg, 10%);
 $colorTabBodyBg: $colorBodyBg;
-$colorTabBodyFg: lighten($colorBodyFg, 20%);
-$colorTabHeaderBg: lighten($colorBodyBg, 10%);
+$colorTabBodyFg: pullForward($colorBodyFg, 20%);
+$colorTabHeaderBg: pullForward($colorBodyBg, 10%);
 $colorTabHeaderFg: $colorBodyFg;
 $colorTabHeaderBorder: $colorBodyBg;
-$colorTabGroupHeaderBg: lighten($colorBodyBg, 5%);
-$colorTabGroupHeaderFg: darken($colorTabHeaderFg, 10%);
+$colorTabGroupHeaderBg: pullForward($colorBodyBg, 5%);
+$colorTabGroupHeaderFg: pushBack($colorTabHeaderFg, 10%);

 // Plot
 $colorPlotBg: rgba(black, 0.05);
@@ -284,22 +294,22 @@ $colorPlotHash: black;
 $opacityPlotHash: 0.2;
 $stylePlotHash: dashed;
 $colorPlotAreaBorder: $colorInteriorBorder;
-$colorPlotLabelFg: darken($colorPlotFg, 20%);
+$colorPlotLabelFg: pushBack($colorPlotFg, 20%);
 $legendHoverValueBg: rgba($colorBodyFg, 0.2);

 // Tree
 $colorTreeBg: transparent;
-$colorItemTreeHoverBg: lighten($colorBodyBg, 10%);
-$colorItemTreeHoverFg: lighten($colorBodyFg, 20%);
+$colorItemTreeHoverBg: pullForward($colorBodyBg, 10%);
+$colorItemTreeHoverFg: pullForward($colorBodyFg, 20%);
 $colorItemTreeIcon: $colorKey; // Used
 $colorItemTreeIconHover: $colorItemTreeIcon; // Used
 $colorItemTreeFg: $colorBodyFg;
-$colorItemTreeSelectedBg: darken($colorKey, 15%);
+$colorItemTreeSelectedBg: pushBack($colorKey, 15%);
 $colorItemTreeSelectedFg: $colorItemTreeHoverFg;
 $colorItemTreeSelectedIcon: $colorItemTreeSelectedFg;
-$colorItemTreeEditingBg: darken($editColor, 20%);
-$colorItemTreeEditingFg: $editColorFg;
-$colorItemTreeEditingIcon: $editColorFg;
+$colorItemTreeEditingBg: pushBack($editUIColor, 20%);
+$colorItemTreeEditingFg: $editUIColor;
+$colorItemTreeEditingIcon: $editUIColor;
 $colorItemTreeVC: $colorDisclosureCtrl;
 $colorItemTreeVCHover: $colorDisclosureCtrlHov;
 $shdwItemTreeIcon: none;
@@ -311,18 +321,18 @@ $colorThumbHoverBg: $colorItemTreeHoverBg;
 $scrollbarTrackSize: 7px;
 $scrollbarTrackShdw: rgba(#000, 0.2) 0 1px 2px;
 $scrollbarTrackColorBg: rgba(#000, 0.2);
-$scrollbarThumbColor: darken($colorBodyBg, 50%);
+$scrollbarThumbColor: pushBack($colorBodyBg, 50%);
 $scrollbarThumbColorHov: $colorKey;
-$scrollbarThumbColorMenu: lighten($colorMenuBg, 10%);
-$scrollbarThumbColorMenuHov: lighten($scrollbarThumbColorMenu, 2%);
+$scrollbarThumbColorMenu: pullForward($colorMenuBg, 10%);
+$scrollbarThumbColorMenuHov: pullForward($scrollbarThumbColorMenu, 2%);

 // Splitter
 $splitterHandleD: 2px;
 $splitterHandleHitMargin: 4px;
 $colorSplitterBaseBg: $colorBodyBg;
-$colorSplitterBg: lighten($colorSplitterBaseBg, 10%);
+$colorSplitterBg: pullForward($colorBodyBg, 10%);
 $colorSplitterFg: $colorBodyBg;
-$colorSplitterHover: $colorKey;
+$colorSplitterHover: $uiColor;
 $colorSplitterActive: $colorKey;
 $splitterBtnD: (16px, 35px); // height, width
 $splitterBtnColorBg: $colorBtnBg;
@@ -334,7 +344,7 @@ $splitterCollapsedBtnColorBgHov: $colorKey;
 $splitterCollapsedBtnColorFgHov: $colorKeyFg;

 // Mobile
-$colorMobilePaneLeft: darken($colorBodyBg, 2%);
+$colorMobilePaneLeft: pushBack($colorBodyBg, 2%);
 $colorMobilePaneLeftTreeItemBg: rgba($colorBodyFg, 0.1);
 $colorMobilePaneLeftTreeItemFg: $colorItemTreeFg;
 $colorMobileSelectListTreeItemBg: rgba(#000, 0.05);
@@ -371,10 +381,14 @@ $createBtnTextTransform: uppercase;
 }

@mixin themedButton($c: $colorBtnBg) {
-    background: linear-gradient(lighten($c, 5%), $c);
+    background: linear-gradient(pullForward($c, 5%), $c);
    box-shadow: rgba(black, 0.5) 0 0.5px 2px;
 }

+@mixin themedSelect($bg: $colorBtnBg, $fg: $colorBtnFg) {
+    @include cSelect(linear-gradient(lighten($bg, 5%), $bg), $fg, lighten($bg, 20%), rgba(black, 0.5) 0 0.5px 3px);
+}
+
 /**************************************************** OVERRIDES */
 .c-frame {
    &:not(.no-frame) {
--- a/src/styles-new/_constants-snow.scss
+++ b/src/styles-new/_constants-snow.scss
@@ -47,6 +47,14 @@ $bodyFont: $heroFont;
    @return $c;
 }

+@function pullForward($val, $amt) {
+    @return darken($val, $amt);
+}
+
+@function pushBack($val, $amt) {
+    @return lighten($val, $amt);
+}
+
 // Constants
 $fontBaseSize: 12px;
 $smallCr: 2px;
@@ -69,6 +77,7 @@ $colorKeyHov: #00c0f6;
 $colorKeyFilter: invert(37%) sepia(100%) saturate(686%) hue-rotate(157deg) brightness(102%) contrast(102%);
 $colorKeyFilterHov: invert(69%) sepia(87%) saturate(3243%) hue-rotate(151deg) brightness(97%) contrast(102%);
 $colorKeySelectedBg: $colorKey;
+$uiColor: #289fec; // Resize bars, splitter bars, etc.
 $colorInteriorBorder: rgba($colorBodyFg, 0.2);
 $colorA: #999;
 $colorAHov: $colorKey;
@@ -94,51 +103,52 @@ $colorPausedFg: #fff;
 $colorOk: #33cc33;

 // Base variations
-$colorBodyBgSubtle: darken($colorBodyBg, 5%);
-$colorBodyBgSubtleHov: lighten($colorKey, 50%);
-$colorKeySubtle: lighten($colorKey, 50%);
+$colorBodyBgSubtle: pullForward($colorBodyBg, 5%);
+$colorBodyBgSubtleHov: pushBack($colorKey, 50%);
+$colorKeySubtle: pushBack($colorKey, 10%);

 // Time Colors
 $colorTime: #618cff;
 $colorTimeBg: $colorTime;
 $colorTimeFg: $colorBodyBg;
-$colorTimeHov: lighten($colorTime, 5%);
-$colorTimeSubtle: lighten($colorTime, 20%);
+$colorTimeHov: pushBack($colorTime, 5%);
+$colorTimeSubtle: pushBack($colorTime, 20%);
 $colorTOI: $colorBodyFg; // was $timeControllerToiLineColor
 $colorTOIHov: $colorTime; // was $timeControllerToiLineColorHov

-/************************************************** EDITING */
-// Base Colors
-$dlSpread: 20%;
-$editColor: #00c7c3;
-$editColorAlt: #9971ff;
-$editColorBgBase: darken($editColor, $dlSpread);
-$editColorBg: darken($editColor, $dlSpread);
-$editColorFg: lighten($editColor, $dlSpread);
-$editColorHov: lighten($editColor, 20%);
-// Canvas
-$editCanvasColorBg: #e6ffff;
-$editCanvasColorGrid: darken($editCanvasColorBg, 10%);
-// Selectable
-$editSelectableColor: #acdad6;
-$editSelectableColorFg: darken($editSelectableColor, 20%);
-$editSelectableColorHov: darken($editSelectableColor, 10%);
-// Selectable selected
-$editSelectableColorSelected: $editColor;
-$editSelectableColorSelectedFg: lighten($editSelectableColorSelected, 50%);
-$editSelectableColorFg: darken($editSelectableColor, 40%);
-$editSelectableBorder: 1px dotted $editSelectableColor;
-$editSelectableBorderHov: 1px dotted $editColorAlt;
-$editSelectableBorderSelected: 1px solid $editColor;
-$editSelectableShdwSelected: rgba($editColor, 0.75) 0 0 0 1px;
-$editMoveableSelectedShdw: rgba($editColor, 0.5) 0 0 10px;
-$editBorderDrilledIn: 1px dashed $editColorAlt;
-$colorGridLines: rgba($editColor, 0.2);
-
 /************************************************** BROWSING */
-$browseSelectableBorderHov: 1px dotted rgba($colorBodyFg, 0.2);
-$browseSelectableShdwHov: rgba($colorBodyFg, 0.2) 0 0 3px;
-$browseSelectedBorder: 1px solid rgba($colorBodyFg, 0.6);
+$browseFrameColor: pullForward($colorBodyBg, 10%);
+$browseFrameBorder: 1px solid $browseFrameColor; // Frames in Disp and Flex Layouts when frame is showing
+$browseSelectableShdwHov: rgba($colorBodyFg, 0.3) 0 0 3px;
+$browseSelectedBorder: 1px solid rgba($colorBodyFg, 0.4);
+
+/************************************************** EDITING */
+$editUIColor: $uiColor; // Base color
+$editUIColorHov: pullForward(saturate($uiColor, 10%), 20%); // Hover color when $editUIColor is applied as a base color
+$editUIBaseColor: #cae1ff; // Base color, toolbar bg
+$editUIBaseColorHov: pushBack($editUIBaseColor, 20%);
+$editUIBaseColorFg: #4c4c4c; // Toolbar button icon colors, etc.
+$editUIAreaBaseColor: pullForward(saturate($editUIBaseColor, 30%), 20%);
+$editUIAreaShdw: $editUIAreaBaseColor 0 0 0 2px; // Edit area s-selected-parent
+$editUIAreaShdwSelected: $editUIAreaBaseColor 0 0 0 3px; // Edit area s-selected
+$editUIGridColorBg: rgba($editUIBaseColor, 0.2); // Background of layout editing area
+$editUIGridColorFg: rgba($editUIBaseColor, 0.3); // Grid lines in layout editing area
+$editFrameColor: $browseFrameColor; // Solid or dotted border applied to non-selected frames in a layout; move-bar on frame hover
+$editFrameBorder: 1px dotted $editFrameColor;
+$editFrameColorHov: $editUIColor; // Solid border hover on frames; hover should not be applied to selected objects
+$editFrameBorderHov: 1px solid $editFrameColorHov; // Hover on selectable frames
+$editFrameColorSelected: #333; // Border of selected frames
+$editFrameColorHandleBg: $colorBodyBg; // Resize handle 'offset' color to make handle standout
+$editFrameColorHandleFg: $editFrameColorSelected; // Resize handle main color
+$editFrameSelectedShdw: rgba(black, 0.5) 0 1px 10px 1px;
+$editFrameSelectedBorder: 1px dashed $editFrameColorSelected; // Selected frame element
+$editFrameMovebarColorBg: $editFrameColor; // Movebar bg color
+$editFrameMovebarColorFg: pullForward($editFrameMovebarColorBg, 20%);  // Grippy lines, container size text
+$editFrameHovMovebarColorBg: pullForward($editFrameMovebarColorBg, 10%); // Hover style
+$editFrameHovMovebarColorFg: pullForward($editFrameMovebarColorFg, 10%);
+$editFrameSelectedMovebarColorBg: pullForward($editFrameMovebarColorBg, 15%); // Selected style
+$editFrameSelectedMovebarColorFg: pullForward($editFrameMovebarColorFg, 15%);
+$editFrameMovebarH: 10px; // Height of move bar in layout frame

 // Icons
 $colorIconAlias: #4af6f3;
@@ -149,7 +159,7 @@ $colorTabsHolderBg: rgba($colorBodyFg, 0.2);

 // Buttons and Controls
 $colorBtnBg: #aaa;
-$colorBtnBgHov: darken($colorBtnBg, 10%);
+$colorBtnBgHov: pullForward($colorBtnBg, 10%);
 $colorBtnFg: #fff;
 $colorBtnReverseFg: $colorBodyBg;
 $colorBtnReverseBg: $colorBodyFg;
@@ -157,7 +167,7 @@ $colorBtnFgHov: $colorBtnFg;
 $colorBtnMajorBg: $colorKey;
 $colorBtnMajorBgHov: $colorKeyHov;
 $colorBtnMajorFg: $colorKeyFg;
-$colorBtnMajorFgHov: lighten($colorBtnMajorFg, 10%);
+$colorBtnMajorFgHov: pushBack($colorBtnMajorFg, 10%);
 $colorBtnCautionBg: #f16f6f;
 $colorBtnCautionBgHov: #f1504e;
 $colorBtnCautionFg: $colorBtnFg;
@@ -165,15 +175,15 @@ $colorClickIcon: $colorKey;
 $colorClickIconBgHov: rgba($colorKey, 0.2);
 $colorClickIconFgHov: $colorKeyHov;
 $colorDropHint: $colorKey;
-$colorDropHintBg: lighten($colorDropHint, 30%);
-$colorDropHintBgHov: lighten($colorDropHint, 40%);
-$colorDropHintFg: lighten($colorDropHint, 0);
+$colorDropHintBg: pushBack($colorDropHint, 10%);
+$colorDropHintBgHov: pushBack($colorDropHint, 40%);
+$colorDropHintFg: pushBack($colorDropHint, 0);
 $colorDisclosureCtrl: rgba($colorBodyFg, 0.5);
 $colorDisclosureCtrlHov: rgba($colorBodyFg, 0.7);

 // Menus
-$colorMenuBg: lighten($colorBodyBg, 10%);
-$colorMenuFg: darken($colorMenuBg, 70%);
+$colorMenuBg: pushBack($colorBodyBg, 10%);
+$colorMenuFg: pullForward($colorMenuBg, 70%);
 $colorMenuIc: $colorKey;
 $colorMenuHovBg: $colorMenuIc;
 $colorMenuHovFg: $colorMenuBg;
@@ -200,27 +210,27 @@ $colorFormLines: rgba(#000, 0.1);
 $colorFormSectionHeader: rgba(#000, 0.05);
 $colorInputBg: $colorGenBg;
 $colorInputFg: $colorBodyFg;
-$colorInputPlaceholder: lighten($colorBodyFg, 20%);
-$colorFormText: lighten($colorBodyFg, 10%);
-$colorInputIcon: lighten($colorBodyFg, 25%);
-$colorFieldHint: darken($colorBodyFg, 40%);
+$colorInputPlaceholder: pushBack($colorBodyFg, 20%);
+$colorFormText: pushBack($colorBodyFg, 10%);
+$colorInputIcon: pushBack($colorBodyFg, 25%);
+$colorFieldHint: pullForward($colorBodyFg, 40%);
 $shdwInput: inset rgba(black, 0.7) 0 0 1px;
 $shdwInputHov: inset rgba(black, 0.7) 0 0 2px;
 $shdwInputFoc: inset rgba(black, 0.8) 0 0.25px 3px;

 // Inspector
-$colorInspectorBg: darken($colorBodyBg, 5%);
+$colorInspectorBg: pullForward($colorBodyBg, 5%);
 $colorInspectorFg: $colorBodyFg;
-$colorInspectorPropName: lighten($colorBodyFg, 20%);
-$colorInspectorPropVal: darken($colorInspectorFg, 15%);
-$colorInspectorSectionHeaderBg: darken($colorInspectorBg, 5%);
-$colorInspectorSectionHeaderFg: darken($colorInspectorBg, 40%);
+$colorInspectorPropName: pushBack($colorBodyFg, 20%);
+$colorInspectorPropVal: pullForward($colorInspectorFg, 15%);
+$colorInspectorSectionHeaderBg: pullForward($colorInspectorBg, 5%);
+$colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);

 // Overlay
 $overlayColorBg: $colorMenuBg;
 $overlayColorFg: $colorMenuFg;
 $overlayCr: $interiorMarginLg;
-$overlayBrightnessAdjust: brightness(1);
+$overlayBrightnessAdjust: brightness(1.3);

 // Indicator colors
 $colorIndicatorAvailable: $colorKey;
@@ -229,8 +239,8 @@ $colorIndicatorOn: $colorOk;
 $colorIndicatorOff: #666;

 // Staleness
-$colorTelemFresh: darken($colorBodyFg, 20%);
-$colorTelemStale: lighten($colorBodyFg, 20%);
+$colorTelemFresh: pullForward($colorBodyFg, 20%);
+$colorTelemStale: pushBack($colorBodyFg, 20%);
 $styleTelemStale: italic;

 // Limits
@@ -255,23 +265,23 @@ $colorInfoBubbleBg: $colorMenuBg;
 $colorInfoBubbleFg: #666;

 // Items
-$colorItemBg: lighten($colorBtnBg, 20%);
-$colorItemBgHov: lighten($colorItemBg, 5%);
+$colorItemBg: pushBack($colorBtnBg, 20%);
+$colorItemBgHov: pushBack($colorItemBg, 5%);
 $colorListItemBg: transparent;
 $colorListItemBgHov: rgba($colorKey, 0.1);
 $colorItemFg: $colorBodyFg;
-$colorItemFgDetails: lighten($colorItemFg, 15%);
+$colorItemFgDetails: pushBack($colorItemFg, 15%);
 $shdwItemText: none;

 // Tabular
-$colorTabBorder: darken($colorBodyBg, 10%);
+$colorTabBorder: pullForward($colorBodyBg, 10%);
 $colorTabBodyBg: $colorBodyBg;
-$colorTabBodyFg: darken($colorBodyFg, 20%);
-$colorTabHeaderBg: darken($colorBodyBg, 10%);
-$colorTabHeaderFg: darken($colorBodyFg, 20%);
+$colorTabBodyFg: pullForward($colorBodyFg, 20%);
+$colorTabHeaderBg: pullForward($colorBodyBg, 10%);
+$colorTabHeaderFg: pullForward($colorBodyFg, 20%);
 $colorTabHeaderBorder: $colorBodyBg;
-$colorTabGroupHeaderBg: darken($colorBodyBg, 5%);
-$colorTabGroupHeaderFg: darken($colorTabGroupHeaderBg, 40%);
+$colorTabGroupHeaderBg: pullForward($colorBodyBg, 5%);
+$colorTabGroupHeaderFg: pullForward($colorTabGroupHeaderBg, 40%);

 // Plot
 $colorPlotBg: rgba(black, 0.05);
@@ -280,22 +290,22 @@ $colorPlotHash: black;
 $opacityPlotHash: 0.2;
 $stylePlotHash: dashed;
 $colorPlotAreaBorder: $colorInteriorBorder;
-$colorPlotLabelFg: lighten($colorPlotFg, 20%);
+$colorPlotLabelFg: pushBack($colorPlotFg, 20%);
 $legendHoverValueBg: rgba($colorBodyFg, 0.2);

 // Tree
 $colorTreeBg: transparent;
-$colorItemTreeHoverBg: darken($colorBodyBg, 10%);
-$colorItemTreeHoverFg: darken($colorBodyFg, 10%);
+$colorItemTreeHoverBg: pullForward($colorBodyBg, 10%);
+$colorItemTreeHoverFg: pullForward($colorBodyFg, 10%);
 $colorItemTreeIcon: $colorKey; // Used
 $colorItemTreeIconHover: $colorItemTreeIcon; // Used
 $colorItemTreeFg: $colorBodyFg;
-$colorItemTreeSelectedBg: lighten($colorKey, 15%);
+$colorItemTreeSelectedBg: pushBack($colorKey, 15%);
 $colorItemTreeSelectedFg: $colorBodyBg;
 $colorItemTreeSelectedIcon: $colorItemTreeSelectedFg;
-$colorItemTreeEditingBg: $editColor;
-$colorItemTreeEditingFg: $editColorFg;
-$colorItemTreeEditingIcon: $editColorFg;
+$colorItemTreeEditingBg: pushBack($editUIColor, 20%);
+$colorItemTreeEditingFg: $editUIColor;
+$colorItemTreeEditingIcon: $editUIColor;
 $colorItemTreeVC: $colorDisclosureCtrl;
 $colorItemTreeVCHover: $colorDisclosureCtrlHov;
 $shdwItemTreeIcon: none;
@@ -307,16 +317,16 @@ $colorThumbHoverBg: $colorItemTreeHoverBg;
 $scrollbarTrackSize: 7px;
 $scrollbarTrackShdw: rgba(#000, 0.2) 0 1px 2px;
 $scrollbarTrackColorBg: rgba(#000, 0.2);
-$scrollbarThumbColor: darken($colorBodyBg, 50%);
+$scrollbarThumbColor: pullForward($colorBodyBg, 50%);
 $scrollbarThumbColorHov: $colorKey;
-$scrollbarThumbColorMenu: darken($colorMenuBg, 10%);
+$scrollbarThumbColorMenu: pullForward($colorMenuBg, 10%);
 $scrollbarThumbColorMenuHov: darken($scrollbarThumbColorMenu, 2%);

 // Splitter
 $splitterHandleD: 2px;
 $splitterHandleHitMargin: 4px;
 $colorSplitterBaseBg: $colorBodyBg;
-$colorSplitterBg: darken($colorSplitterBaseBg, 20%);
+$colorSplitterBg: pullForward($colorSplitterBaseBg, 20%);
 $colorSplitterFg: $colorBodyBg;
 $colorSplitterHover: $colorKey;
 $colorSplitterActive: $colorKey;
@@ -330,7 +340,7 @@ $splitterCollapsedBtnColorBgHov: $colorKey;
 $splitterCollapsedBtnColorFgHov: $colorKeyFg;

 // Mobile
-$colorMobilePaneLeft: darken($colorBodyBg, 2%);
+$colorMobilePaneLeft: pullForward($colorBodyBg, 2%);
 $colorMobilePaneLeftTreeItemBg: rgba($colorBodyFg, 0.1);
 $colorMobilePaneLeftTreeItemFg: $colorItemTreeFg;
 $colorMobileSelectListTreeItemBg: rgba(#000, 0.05);
@@ -370,16 +380,6 @@ $createBtnTextTransform: uppercase;
    background: $c;
 }

-
-/**************************************************** NOT USED, LEAVE FOR NOW */
-
-// Content status
-/*
-$colorAlert: #ff3c00;
-$colorWarningHi: #990000;
-$colorWarningLo: #ff9900;
-$colorDiagnostic: #a4b442;
-$colorCommand: #3693bd;
-$colorInfo: #2294a2;
-$colorOk: #33cc33;
-*/
+@mixin themedSelect($bg: $colorBtnBg, $fg: $colorBtnFg) {
+    @include cSelect($bg, $fg, lighten($bg, 20%), none);
+}
--- a/src/styles-new/_controls.scss
+++ b/src/styles-new/_controls.scss
@@ -228,6 +228,17 @@ input[type=number]::-webkit-outer-spin-button {
    }
 }

+// SELECTS
+select {
+    @include appearanceNone();
+    @include themedSelect();
+    background-repeat: no-repeat, no-repeat;
+    background-position: right .4em top 80%, 0 0;
+    border: none;
+    border-radius: $controlCr;
+    padding: 1px 20px 1px $interiorMargin;
+}
+
 /******************************************************** HYPERLINKS AND HYPERLINK BUTTONS */
 .c-hyperlink {
    &--link {
@@ -411,7 +422,7 @@ input[type=number]::-webkit-outer-spin-button {
 }

@mixin cToolbarSeparator() {
-    $m: $interiorMargin;
+    $m: 1px;
    $b: 1px;
    display: block;
    width: $m + $b; // Allow for border
@@ -421,21 +432,35 @@ input[type=number]::-webkit-outer-spin-button {

 .c-toolbar {
    $p: $interiorMargin;
-    border-top: 1px solid $colorInteriorBorder;
+    background: $editUIBaseColor;
+    border-radius: $basicCr;
    height: $p + 24px; // Need to standardize the height
-    padding-top: $p;
+    padding: $p;
+
+    > * + * {
+        margin-left: 2px;
+    }

    &__separator {
        @include cToolbarSeparator();
    }

+    .c-click-icon,
+    .c-labeled-input {
+        color: $editUIBaseColorFg;
+    }
+
    .c-click-icon {
        @include cControl();
        $pLR: $interiorMargin - 1;
        $pTB: 2px;
-        color: $colorBodyFg;
        padding: $pTB $pLR;

+        &:hover {
+            background: $editUIBaseColorHov !important;
+            color: $editUIBaseColorFg !important;
+        }
+
        &--swatched {
            padding-bottom: floor($pTB / 2);
            width: 2em; // Standardize the width
--- a/src/styles-new/_global.scss
+++ b/src/styles-new/_global.scss
@@ -191,8 +191,8 @@ body.desktop .has-local-controls {
 .c-grid {
    pointer-events: none;

-    &__x  { @include bgTicks($editCanvasColorGrid, 'x'); }
-    &__y  { @include bgTicks($editCanvasColorGrid, 'y'); }
+    &__x  { @include bgTicks($editUIGridColorFg, 'x'); }
+    &__y  { @include bgTicks($editUIGridColorFg, 'y'); }
 }

 /*************************** SELECTION */
@@ -200,32 +200,14 @@ body.desktop .has-local-controls {
    &:hover {
        box-shadow: $browseSelectableShdwHov;
    }
+
+    &[s-selected] {
+        border: $browseSelectedBorder;
+    }
 }

 /**************************** EDITING */
 .is-editing {
-    *:not(.is-drilled-in).c-frame {
-        border: $editSelectableBorder;
-
-        &:not([s-selected]) {
-            &:hover {
-                border: $editSelectableBorderHov;
-            }
-        }
-
-        &[s-selected] {
-            box-shadow: $editSelectableShdwSelected;
-
-            > .c-frame-edit {
-                display: block; // Show the editing rect and handles
-            }
-        }
-    }
-
-    *.is-drilled-in {
-        border: $editBorderDrilledIn;
-    }
-
    .is-moveable {
        cursor: move;
    }
@@ -234,116 +216,8 @@ body.desktop .has-local-controls {
        // Applied in markup to objects that provide links. Disable while editing.
        pointer-events: none;
    }
-
-    .c-frame-edit {
-        // In Layouts, this is the editing rect and handles
-        // In Fixed Position, this is a wrapper element
-        $z: 10;
-
-        @include abs();
-        display: none;
-
-        &__move {
-            @include abs();
-            box-shadow: $editMoveableSelectedShdw;
-            cursor: move;
-            z-index: $z;
-        }
-
-        &__handle {
-            $d: 8px;
-            $o: floor($d * -0.5);
-            background: rgba($editColor, 0.3);
-            border: 1px solid $editColor;
-            position: absolute;
-            width: $d; height: $d;
-            top: auto; right: auto; bottom: auto; left: auto;
-            z-index: $z + 1;
-
-            &:before {
-                // Extended hit area
-                $m: -5px;
-                content: '';
-                display: block;
-                position: absolute;
-                top: $m; right: $m; bottom: $m; left: $m;
-                z-index: -1;
-            }
-
-            &:hover {
-                background: $editColor;
-            }
-
-            &--nwse {
-                cursor: nwse-resize;
-            }
-
-            &--nw {
-                cursor: nw-resize;
-                left: $o; top: $o;
-            }
-
-            &--ne {
-                cursor: ne-resize;
-                right: $o; top: $o;
-            }
-
-            &--se {
-                cursor: se-resize;
-                right: $o; bottom: $o;
-            }
-
-            &--sw {
-                cursor: sw-resize;
-                left: $o; bottom: $o;
-            }
-        }
-    }
-
-    // TODO: move this into DisplayLayout and Fixed Position vue files respectively
-    .l-shell__main-container > .l-layout,
-    .l-shell__main-container > .c-object-view .l-fixed-position {
-        // Target the top-most layout container and color its background
-        background: $editCanvasColorBg;
-    }
-
-    .l-shell__main-container {
-        box-shadow: $colorBodyBg 0 0 0 1px, rgba($editColor, 0.7) 0 0 0 2px;
-        &[s-selected] {
-            // Provide a clearer selection context articulation
-            box-shadow: $colorBodyBg 0 0 0 1px, $editColor 0 0 0px 3px;
-        }
-    }
-
-    // Layouts
-    [s-selected],
-    [s-selected-parent] {
-        .l-layout {
-            // Show the layout grid for the top-most child of the current selection,
-            // and hide the grid for deeper nested levels.
-            [class*="__grid-holder"] {
-                display: block;
-            }
-
-            .l-layout [class*="__grid-holder"] {
-                display: none;
-            }
-        }
-    }
-
-    // Fixed position
-    .l-fixed-position {
-        &__grid-holder {
-            display: block;
-        }
-
-        .c-frame-edit {
-            display: block;
-        }
-    }
 }

-
 /************************** LEGACY */

 mct-container {
--- a/src/styles-new/_legacy.scss
+++ b/src/styles-new/_legacy.scss
@@ -80,7 +80,7 @@ mct-plot {
        // Holds the plot area and the X-axis only
        position: absolute;
        top: nth($plotDisplayArea, 1);
-        right:0; //nth($plotDisplayArea, 2);
+        right:0;
        bottom: 0;
        left: nth($plotDisplayArea, 4);

@@ -612,3 +612,16 @@ mct-plot {
    min-height: 200px;
 }

+/******************************************************************* EDITING */
+.is-editing {
+    // Fixed position
+    .l-fixed-position {
+        &__grid-holder {
+            display: block;
+        }
+
+        .c-frame-edit {
+            display: block;
+        }
+    }
+}
--- a/src/styles-new/_mixins.scss
+++ b/src/styles-new/_mixins.scss
@@ -60,6 +60,16 @@
    width: $d;
 }

+@mixin appearanceNone() {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+
+    &:focus {
+        outline: none;
+    }
+}
+
@mixin isAlias() {
    &:after {
        color:$colorIconAlias;
@@ -80,8 +90,7 @@
        transparent 50%, rgba($c, $a) 50%,
        rgba($c, $a) 75%, transparent 75%,
        transparent 100%
-    );
-    background-repeat: repeat;
+    ) repeat;
    background-size: $d $d;
 }

@@ -91,8 +100,7 @@
        transparent 50%, rgba($c, $a) 50%,
        rgba($c, $a) 75%, transparent 75%,
        transparent 100%
-    );
-    background-repeat: repeat;
+    ) repeat;
    background-size: $bgsize $bgsize;
 }

@@ -102,6 +110,23 @@
    cursor: default !important;
 }

+@mixin grippy($c: rgba(black, 0.5), $dir: 'x') {
+    $deg: 90deg;
+    $bgSize: 2px 100%;
+
+    @if $dir != 'x' {
+        // Grippy texture runs 'vertically'
+        $deg: 0deg;
+        $bgSize: 100% 2px;
+    }
+
+    background: linear-gradient($deg,
+            $c 1px, transparent 1px,
+            transparent 100%
+    ) repeat;
+    background-size: $bgSize;
+}
+
@mixin noColor() {
    // A "no fill/stroke" selection option. Used in palettes.
    $c: red;
@@ -194,7 +219,7 @@
 }

@mixin htmlInputReset() {
-    appearance: none;
+    @include appearanceNone();
    background: transparent;
    border: none;
    border-radius: 0;
@@ -263,6 +288,7 @@
    display: inline-flex;
    align-items: center;
    justify-content: center;
+    line-height: $fs; // Remove effect on top and bottom padding
    overflow: hidden;

    &:before,
@@ -272,6 +298,10 @@
        flex: 0 0 auto;
    }

+    &:before {
+        font-size: 0.9em;
+    }
+
    &:after {
        font-size: 0.8em;
    }
@@ -279,15 +309,18 @@
    [class*="__label"] {
        @include ellipsize();
        display: block;
-        line-height: $fs; // Remove effect on top and bottom padding
        font-size: $fs;
    }
+
+    &[class*='icon'] > [class*="__label"] {
+        // When button holds both an icon and a label, provide margin between them.
+        margin-left: $interiorMarginSm;
+    }
 }

@mixin cButton() {
    @include cControl();
    @include themedButton();
-    //@include buttonBehavior();
    border-radius: $controlCr;
    color: $colorBtnFg;
    cursor: pointer;
@@ -329,12 +362,12 @@
    // Make the icon bigger relative to its container
    @include cControl();
    $pLR: 4px;
-    $pTB: 3px;
+    $pTB: 4px;
    background: none;
    box-shadow: none;
    border-radius: $controlCr;
    cursor: pointer;
-    padding: $pTB $pLR ;
+    padding: $pTB $pLR;

    @include hover() {
        background: $colorClickIconBgHov;
@@ -421,6 +454,13 @@
    }
 }

+@mixin cSelect($bg, $fg, $arwClr, $shdw) {
+    $svgArwClr: str-slice(inspect($arwClr), 2, str-length(inspect($arwClr))); // Remove initial # in color value
+    background: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3e%3cpath fill='%23#{$svgArwClr}' d='M5 5l5-5H0z'/%3e%3c/svg%3e"), $bg;
+    color: $fg;
+    box-shadow: $shdw;
+}
+
@mixin wrappedInput() {
    // An input that is wrapped. Optionally includes a __label or icon element.
    // Based on .c-search.
--- a/src/ui/components/ObjectFrame.vue
+++ b/src/ui/components/ObjectFrame.vue
@@ -20,9 +20,10 @@
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
 <template>
-    <div class="u-contents c-so-view has-local-controls"
+    <div class="c-so-view has-local-controls"
        :class="{
-            'c-so-view--no-frame': !hasFrame
+            'c-so-view--no-frame': !hasFrame,
+            'has-complex-content': complexContent
        }">
        <div class="c-so-view__header">
            <div class="c-so-view__header__start">
@@ -47,10 +48,15 @@
    @import "~styles/sass-base";

    .c-so-view {
+        display: flex;
+        flex-direction: column;
+
        /*************************** HEADER */
        &__header {
+            flex: 0 0 auto;
            display: flex;
            align-items: center;
+            margin-bottom: $interiorMargin;

            &__start,
            &__end {
@@ -71,7 +77,7 @@
            }
        }

-        &--no-frame .c-so-view__header {
+        &--no-frame > .c-so-view__header {
            display: none;
        }

@@ -107,6 +113,11 @@
    import ObjectView from './ObjectView.vue'
    import ContextMenuDropDown from './contextMenuDropDown.vue';

+    const SIMPLE_CONTENT_TYPES = [
+        'clock',
+        'summary-widget'
+    ];
+
    export default {
        inject: ['openmct'],
        props: {
@@ -114,21 +125,19 @@
            objectPath: Array,
            hasFrame: Boolean,
        },
-        computed: {
-            cssClass() {
-                if (!this.domainObject || !this.domainObject.type) {
-                    return;
-                }
-                let objectType = this.openmct.types.get(this.domainObject.type);
-                if (!objectType || !objectType.definition) {
-                    return; // TODO: return unknown icon type.
-                }
-                return objectType.definition.cssClass;
-            }
-        },
        components: {
            ObjectView,
            ContextMenuDropDown,
+        },
+        data() {
+            let objectType = this.openmct.types.get(this.domainObject.type),
+                cssClass = objectType && objectType.definition ? objectType.definition.cssClass : 'icon-object-unknown',
+                complexContent = !SIMPLE_CONTENT_TYPES.includes(this.domainObject.type);
+
+            return {
+                cssClass,
+                complexContent    
+            }
        }
    }
 </script>
--- a/src/ui/inspector/Elements.vue
+++ b/src/ui/inspector/Elements.vue
@@ -6,7 +6,7 @@
            v-if="elements.length > 0">
            <li :key="element.identifier.key" v-for="(element, index) in elements" @drop="moveTo(index)" @dragover="allowDrop">
                <div class="c-tree__item c-elements-pool__item">
-                    <span class="icon-grippy"
+                    <span class="c-elements-pool__grippy"
                          v-if="elements.length > 1 && isEditing"
                          draggable="true"
                          @dragstart="moveFrom(index)">
@@ -42,12 +42,13 @@
            overflow: auto;
        }

-        &__item {
-            .icon-grippy {
-                font-size: 0.8em;
-            }
+        &__grippy {
+            $d: 8px;
+            @include grippy($c: $colorItemTreeVC, $dir: 'y');
+            margin-right: $interiorMarginSm;
+            transform: translateY(-2px);
+            width: $d; height: $d;
        }
-
    }

    .js-last-place{
--- a/src/ui/layout/Layout.vue
+++ b/src/ui/layout/Layout.vue
@@ -184,7 +184,6 @@
        }

        /******************************* MAIN AREA */
-
        &__main-container {
            // Wrapper for main views
            flex: 1 1 auto !important;
@@ -232,6 +231,17 @@
            }
        }
    }
+
+    .is-editing {
+        .l-shell__main-container {
+            box-shadow: $colorBodyBg 0 0 0 1px, $editUIAreaShdw;
+
+            &[s-selected] {
+                // Provide a clearer selection context articulation for the main edit area
+                box-shadow: $colorBodyBg 0 0 0 1px, $editUIAreaShdwSelected;
+            }
+        }
+    }
 </style>

 <script>
--- a/src/ui/layout/mct-tree.vue
+++ b/src/ui/layout/mct-tree.vue
@@ -33,6 +33,7 @@
            display: flex;
            align-items: center;
            cursor: pointer;
+            line-height: 110%;
            padding: $interiorMargin - $aPad;
            transition: background 150ms ease;

--- a/src/ui/toolbar/Toolbar.vue
+++ b/src/ui/toolbar/Toolbar.vue
@@ -67,7 +67,7 @@
                        if (formKeys.length > 0) {
                            toolbarItem.value = this.getFormValue(domainObject, toolbarItem);
                        } else {
-                            toolbarItem.value = _.get(domainObject, item.property);
+                            toolbarItem.value = _.get(domainObject, this.getItemProperty(item));
                        }

                        this.registerListener(domainObject);
@@ -116,7 +116,7 @@
                            if (toolbarItem.formKeys) {
                                toolbarItem.value = this.getFormValue(newObject, toolbarItem);
                            } else {
-                                toolbarItem.value = _.get(newObject, item.property);
+                                toolbarItem.value = _.get(newObject, this.getItemProperty(item));
                            }
                        }
                    }
@@ -135,10 +135,13 @@
            getFormValue(domainObject, toolbarItem) {
                let value = {};
                toolbarItem.formKeys.map(key => {
-                    value[key] = _.get(domainObject, toolbarItem.property + "." + key);
+                    value[key] = _.get(domainObject, this.getItemProperty(toolbarItem) + "." + key);
                });
                return value;
            },
+            getItemProperty(item) {
+                return (typeof item.property === "function") ? item.property() : item.property;
+            },
            removeListeners() {
                if (this.unObserveObjects) {
                    this.unObserveObjects.forEach((unObserveObject) => {
@@ -156,7 +159,7 @@
                    if (domainObject) {
                        let id = this.openmct.objects.makeKeyString(domainObject.identifier);

-                        if (changedItemId === id && item.property === s.property) {
+                        if (changedItemId === id && this.getItemProperty(item) === this.getItemProperty(s)) {
                            toolbarItem.value = value;
                        }
                    }
@@ -170,12 +173,12 @@
                    this.structure.map(s => {
                        if (s.formKeys) {
                            s.formKeys.forEach(key => {
-                                this.openmct.objects.mutate(item.domainObject, item.property + "." + key, value[key]);
+                                this.openmct.objects.mutate(item.domainObject, this.getItemProperty(item) + "." + key, value[key]);
                            });
                        }
                    });
                } else {
-                    this.openmct.objects.mutate(item.domainObject, item.property, value);
+                    this.openmct.objects.mutate(item.domainObject, this.getItemProperty(item), value);
                }
            },
            triggerMethod(item, event) {
Author	SHA1	Message	Date
charlesh88	1ae678cbea	Fix indentation part deux	2019-01-25 12:39:41 -08:00
charlesh88	488a5a77d5	Fix indentation	2019-01-25 11:21:37 -08:00
charlesh88	88d7da63fa	Toolbar sanding and polishing - Button order tweaked to place stack order near X, Y, etc. inputs; - Improved spacing between items themselves and separators;	2019-01-23 16:09:41 -08:00
charlesh88	4656237b44	Enable all sub-object views in Display Layout to use numeric inputs for x, y, width and height	2019-01-23 15:40:05 -08:00
charlesh88	b9b65ec0b8	Change 'toggle'-style toolbar buttons to reflect current state, rather than what will be the setting once clicked - When frame is hidden, button displays the frame-hidden icon, and tooltip says 'Frame hidden';	2019-01-23 15:07:40 -08:00
charlesh88	8965ba4ed3	Merge latest TCR, resolve conflicts	2019-01-23 14:47:19 -08:00
charlesh88	063e4b3e62	Telemetry Table editing styles - Headers now have hover effects;	2019-01-23 14:41:47 -08:00
charlesh88	f541a79676	Remove updateDrilledIn function and calls	2019-01-23 14:37:16 -08:00
Pegah Sarram	9e811e722f	[Display Layout] support ordering items (#2266 ) * Add a toolbar menu for changing the display order of items. * - Wire up orderItem - Modify the toolbar API to support function as alternative for property path.	2019-01-23 10:51:29 -08:00
charlesh88	155929c97f	List View fixes - Ellipsizing now works; - Better icon and text alignment;	2019-01-23 10:03:05 -08:00
charlesh88	53f773812d	Styling for selects - New cleaner styling approach; - New cSelect and appearanceNone mixins; - Converted selects in Notebook, plot-options-edit;	2019-01-22 16:44:15 -08:00
Charles Hacskaylo	8ef53d85c4	R&I Layout editing mods (#2256 ) * Layout mods for sub object editing without is-drilled-in * Remove drilled-in logic	2019-01-22 11:52:56 -08:00
Andrew Henry	abcc5cb023	Implemented go to parent (#2264 )	2019-01-17 16:32:12 -08:00
Pegah Sarram	931871ff95	[Display Layout] Snap to grid toolbar toggle button (#2262 ) * Add a button in the toolbar to toggle snapp to grid. * Convert item's coordinates and size from grid unit to pixels depending on useGrid value. * Rename selectionListener to removeSelectionListener	2019-01-17 09:24:59 -08:00