From 075d4deecb0cb791c7ae3ebe1b292623eae835ca Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charlesh88@gmail.com>
Date: Fri, 25 Jan 2019 12:50:16 -0800
Subject: [PATCH] R&I Misc UI 4b (#2271)

* Styling for selects
- New cleaner styling approach;
- New cSelect and appearanceNone mixins;
- Converted selects in Notebook, plot-options-edit;

* List View fixes
- Ellipsizing now works;
- Better icon and text alignment;

* Remove updateDrilledIn function and calls

* Telemetry Table editing styles

- Headers now have hover effects;

* 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';

* Enable all sub-object views in Display Layout to use numeric inputs for
x, y, width and height

* Toolbar sanding and polishing
- Button order tweaked to place stack order near X, Y, etc. inputs;
- Improved spacing between items themselves and separators;

* Fix indentation

* Fix indentation part deux
---
 .../displayLayout/DisplayLayoutToolbar.js     | 259 +++++++++---------
 .../components/DisplayLayout.vue              |  11 -
 src/plugins/flexibleLayout/toolbarProvider.js |  16 +-
 .../folderView/components/ListItem.vue        |  17 +-
 .../folderView/components/ListView.vue        |   5 +-
 .../notebook/res/templates/notebook.html      |  26 +-
 .../plot/res/templates/plot-options-edit.html |  60 ++--
 .../telemetryTable/components/table.vue       |  20 +-
 src/styles-new/_constants-espresso.scss       |  17 +-
 src/styles-new/_constants-maelstrom.scss      |   4 +
 src/styles-new/_constants-snow.scss           |  16 +-
 src/styles-new/_controls.scss                 |  17 +-
 src/styles-new/_mixins.scss                   |  31 ++-
 13 files changed, 263 insertions(+), 236 deletions(-)

diff --git a/src/plugins/displayLayout/DisplayLayoutToolbar.js b/src/plugins/displayLayout/DisplayLayoutToolbar.js
index c7f3759c35..ded2cf91ee 100644
--- 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 = {
@@ -196,24 +196,62 @@ define([], function () {
                     options: [
                         {
                             value: false,
-                            icon: "icon-grid-snap-no",
-                            title: "Do not snap to grid"
+                            icon: "icon-grid-snap-to",
+                            title: "Grid snapping enabled"
                         },
                         {
                             value: true,
-                            icon: "icon-grid-snap-to",
-                            title: "Snap to grid"
+                            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) {
                         toolbar.push(separator);
                     }
 
-                    toolbar.push(stackOrder);
-                    toolbar.push(separator);
                     toolbar.push({
                         control: "toggle-button",
                         domainObject: selectedParent,
@@ -223,154 +261,119 @@ define([], function () {
                         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: function () {
-                                return getPath() + ".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: function () {
-                                return getPath() + ".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: function () {
-                                return getPath() + ".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: function () {
-                                return getPath() + ".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: 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'
-                        };
+                        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: function () {
-                                    return getPath() + ".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: function () {
-                                    return getPath() + ".value";
+                            title: "Set display mode",
+                            options: [
+                                {
+                                    name: 'Label + Value',
+                                    value: 'all'
                                 },
-                                title: "Set value",
-                                options: openmct.telemetry.getMetadata(selectedObject).values().map(value => {
-                                    return {
-                                        name: value.name,
-                                        value: value.key
-                                    }
-                                })
-                            };
+                                {
+                                    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,
                             value,
                             separator,
-                            stackOrder,
                             fill,
                             stroke,
                             color,
                             separator,
                             size,
                             separator,
+                            stackOrder,
                             x,
                             y,
                             height,
@@ -379,7 +382,7 @@ define([], function () {
                             separator,
                             remove
                         ];
-                    } else if (layoutItem.type === 'text-view' ) {
+                    } else if (layoutItem.type === 'text-view') {
                         let text = {
                             control: "button",
                             domainObject: selectedParent,
@@ -391,13 +394,13 @@ define([], function () {
                             dialog: DIALOG_FORM['text']
                         };
                         toolbar = [
-                            stackOrder,
                             fill,
                             stroke,
                             separator,
                             color,
                             size,
                             separator,
+                            stackOrder,
                             x,
                             y,
                             height,
@@ -410,10 +413,10 @@ define([], function () {
                         ];
                     } else if (layoutItem.type === 'box-view') {
                         toolbar = [
-                            stackOrder,
                             fill,
                             stroke,
                             separator,
+                            stackOrder,
                             x,
                             y,
                             height,
@@ -434,9 +437,9 @@ define([], function () {
                             dialog: DIALOG_FORM['image']
                         };
                         toolbar = [
-                            stackOrder,
                             stroke,
                             separator,
+                            stackOrder,
                             x,
                             y,
                             height,
@@ -469,9 +472,9 @@ define([], function () {
                             title: "Y2 position",
                         };
                         toolbar = [
-                            stackOrder,
                             stroke,
                             separator,
+                            stackOrder,
                             x,
                             y,
                             x2,
diff --git a/src/plugins/displayLayout/components/DisplayLayout.vue b/src/plugins/displayLayout/components/DisplayLayout.vue
index ac1e1aa875..0305464d83 100644
--- a/src/plugins/displayLayout/components/DisplayLayout.vue
+++ b/src/plugins/displayLayout/components/DisplayLayout.vue
@@ -171,8 +171,6 @@
                 if (itemIndex !== undefined) {
                     this.attachSelectionListener(itemIndex);
                 }
-
-                this.updateDrilledIn();
             },
             attachSelectionListener(index) {
                 let path = `configuration.items[${index}].useGrid`;
@@ -208,15 +206,6 @@
                     this.mutate(`configuration.items[${index}]`, item);
                 }.bind(this));
             },
-            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;
-                    }
-                });
-            },
             bypassSelection($event) {
                 if (this.dragInProgress) {
                     if ($event) {
diff --git a/src/plugins/flexibleLayout/toolbarProvider.js b/src/plugins/flexibleLayout/toolbarProvider.js
index 29176c156a..eacc3ebc6e 100644
--- 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"
                         }
                     ]
                 };
diff --git a/src/plugins/folderView/components/ListItem.vue b/src/plugins/folderView/components/ListItem.vue
index 0b678fa813..7cd3ef7c1a 100644
--- 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>
diff --git a/src/plugins/folderView/components/ListView.vue b/src/plugins/folderView/components/ListView.vue
index 15f2bc77d4..2228d3d3cf 100644
--- 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;
diff --git a/src/plugins/notebook/res/templates/notebook.html b/src/plugins/notebook/res/templates/notebook.html
index 59a6f88a44..cbc14af170 100644
--- 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"
diff --git a/src/plugins/plot/res/templates/plot-options-edit.html b/src/plugins/plot/res/templates/plot-options-edit.html
index f97aaf3f9d..e3e5c32c19 100644
--- 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">
diff --git a/src/plugins/telemetryTable/components/table.vue b/src/plugins/telemetryTable/components/table.vue
index 5254634727..69287978d5 100644
--- 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"
@@ -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 {
diff --git a/src/styles-new/_constants-espresso.scss b/src/styles-new/_constants-espresso.scss
index 75385bd4e4..794468908d 100644
--- a/src/styles-new/_constants-espresso.scss
+++ b/src/styles-new/_constants-espresso.scss
@@ -381,17 +381,6 @@ $createBtnTextTransform: uppercase;
     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: pushBack($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);
+}
diff --git a/src/styles-new/_constants-maelstrom.scss b/src/styles-new/_constants-maelstrom.scss
index ddcb9c9fac..3865572493 100644
--- a/src/styles-new/_constants-maelstrom.scss
+++ b/src/styles-new/_constants-maelstrom.scss
@@ -385,6 +385,10 @@ $createBtnTextTransform: uppercase;
     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) {
diff --git a/src/styles-new/_constants-snow.scss b/src/styles-new/_constants-snow.scss
index ddecb6f880..83c6b60442 100644
--- a/src/styles-new/_constants-snow.scss
+++ b/src/styles-new/_constants-snow.scss
@@ -380,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);
+}
diff --git a/src/styles-new/_controls.scss b/src/styles-new/_controls.scss
index cb07505d21..94efdc6d8d 100644
--- 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
@@ -426,6 +437,10 @@ input[type=number]::-webkit-outer-spin-button {
     height: $p + 24px; // Need to standardize the height
     padding: $p;
 
+    > * + * {
+        margin-left: 2px;
+    }
+
     &__separator {
         @include cToolbarSeparator();
     }
diff --git a/src/styles-new/_mixins.scss b/src/styles-new/_mixins.scss
index eb7687f79f..d39690c9c3 100644
--- 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;
@@ -209,7 +219,7 @@
 }
 
 @mixin htmlInputReset() {
-    appearance: none;
+    @include appearanceNone();
     background: transparent;
     border: none;
     border-radius: 0;
@@ -278,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,
@@ -287,6 +298,10 @@
         flex: 0 0 auto;
     }
 
+    &:before {
+        font-size: 0.9em;
+    }
+
     &:after {
         font-size: 0.8em;
     }
@@ -294,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;
@@ -436,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.