Review and integrate UI enhancements (#2078)

* [Frontend] WIP New local-controls classes Fixes #2000 - h-local-controls - Markup in plots changed - Changed reset plot button's icon * [Frontend] WIP local-controls classes Fixes #2000 - Refactoring to use and apply local-control classes consistently; - Plots and imagery done in main view and Display Layout contexts; * [Frontend] WIP local-controls classes Fixes #2000 - Use local-control classes in Timelines; - Group Timeline buttons in l-btn-set; - Use reset icon glyph; * [Frontend] WIP local-controls classes Fixes #2000 - Slight increase in size to buttons in frame context; * [Frontend] local-controls classes Fixes #2000 - Code cleanup; - Update Style Guide content; - Provisionally done, needs unit testing and double-checking; * [Frontend] Better selecting in browse mode Fixes #2000 - Better colors and approach to selecting in browse mode; * [Frontend] Tweaks to pane collapse mini-tabs Fixes #1758 Fixes #2000 - Enlarged mini-tabs and moved to screen top; - Removed duplicative theme-based constants; * [Frontend] Tweaks to "nav up" arrow button Fixes #1758 Fixes #2000 - Increased hit area of .l-back "nav up" arrow in object-browse-bar; * [Frontend] Glyph improvements Fixes #1758 Fixes #2000 - New arrow glyph for view controls; - Increased hit area of view controls in tree for mobile and desktop; - Better "hamburger" menu glyph; * [Frontend] Inspector refactor to CSS grid WIP Fixes #1758 Fixes #2000 - WIP!!!; - Good progress on Properties section; * [Frontend] Inspector refactor to CSS grid WIP Fixes #2000 - Significant mods to CSS and markup; - New grid archetypes classes; - Added title attribs to plot options edit and browse props; - Added value, alarm markers to plot series browse props; - Nearly done (?) but needs unit testing and cleanups; * [Frontend] Minor tweaks to form and form-row Fixes #2000 - Fixing margin problem with .form-row; - h2 instead of div.section-header; * [Frontend] Fixed H2 in Elements pool Fixes #2000 * Refinements to Time Conductor Fixes #2000 - Tweaks size of fixed position grab ticks; - Positioning refinements to ticks and text; - Hide major tick marks; * Hide View Large button for nested hidden-frame Layouts Fixes #2000 - When a layout is nested and has its frame hidden, hide the View Large button; * Better hiding of Time Conductor "Submit" button Fixes #2000 * Re-added new icon-arrow-right-equilateral glyph; Fixes #2000 Fixes #2078 * Remove commented styles/markup Fixes #2000 Fixes #2078 * Repaired approach to hiding Time Conductor Submit button Fixes #2000 Fixes #2078 - Renamed .off to .invisible and added refinements; * Fixed wrong conflict resolutions; polish search Fixes #2000 Fixes #2078 - .invisible instead of .off in search.html; - Minor polishing to search; fixes #1758 fixes #1763 fixes #2011
2018-06-29 11:18:50 -07:00
parent 07fb20c32f
commit 9d2c7a6de5
43 changed files with 873 additions and 784 deletions
--- a/platform/commonUI/general/res/fonts/symbols/icomoon-project-openmct-symbols-16px.json
+++ b/platform/commonUI/general/res/fonts/symbols/icomoon-project-openmct-symbols-16px.json
@@ -2,7 +2,7 @@
  "metadata": {
    "name": "openmct-symbols-16px",
    "lastOpened": 0,
-    "created": 1527895011127
+    "created": 1529545133464
  },
  "iconSets": [
    {
@@ -268,13 +268,21 @@
          "code": 59697,
          "tempChar": ""
        },
+        {
+          "order": 148,
+          "id": 118,
+          "name": "icon-arrow-right-equilateral",
+          "prevSize": 24,
+          "code": 59698,
+          "tempChar": ""
+        },
        {
          "order": 48,
          "prevSize": 24,
          "name": "icon-arrows-out",
          "id": 43,
          "code": 921600,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 49,
@@ -282,7 +290,7 @@
          "name": "icon-arrows-right-left",
          "id": 44,
          "code": 921601,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 50,
@@ -290,7 +298,7 @@
          "name": "icon-arrows-up-down",
          "id": 45,
          "code": 921602,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 9,
@@ -298,7 +306,7 @@
          "name": "icon-bullet",
          "id": 4,
          "code": 921604,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 25,
@@ -306,7 +314,7 @@
          "name": "icon-calendar",
          "id": 20,
          "code": 921605,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 30,
@@ -314,7 +322,7 @@
          "name": "icon-chain-links",
          "id": 25,
          "code": 921606,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 109,
@@ -322,7 +330,7 @@
          "prevSize": 24,
          "code": 921607,
          "name": "icon-pane-collapse-left",
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 110,
@@ -330,7 +338,7 @@
          "prevSize": 24,
          "code": 921608,
          "name": "icon-pane-collapse-right",
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 5,
@@ -338,7 +346,7 @@
          "prevSize": 24,
          "code": 921609,
          "name": "icon-download",
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 60,
@@ -346,7 +354,7 @@
          "name": "icon-duplicate",
          "id": 55,
          "code": 921616,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 61,
@@ -354,7 +362,7 @@
          "name": "icon-folder-new",
          "id": 56,
          "code": 921617,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 64,
@@ -362,7 +370,7 @@
          "name": "icon-fullscreen-expand",
          "id": 59,
          "code": 921618,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 63,
@@ -370,7 +378,7 @@
          "name": "icon-fullscreen-collapse",
          "id": 58,
          "code": 921619,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 67,
@@ -378,7 +386,7 @@
          "name": "icon-layers",
          "id": 62,
          "code": 921620,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 145,
@@ -386,7 +394,7 @@
          "name": "icon-line-horz",
          "id": 64,
          "code": 921621,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 146,
@@ -394,7 +402,7 @@
          "name": "icon-magnify",
          "id": 68,
          "code": 921622,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 71,
@@ -402,7 +410,7 @@
          "name": "icon-magnify-in",
          "id": 66,
          "code": 921623,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 72,
@@ -410,7 +418,7 @@
          "name": "icon-magnify-out",
          "id": 67,
          "code": 921624,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 74,
@@ -418,7 +426,7 @@
          "name": "icon-menu",
          "id": 69,
          "code": 921625,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 75,
@@ -426,7 +434,7 @@
          "name": "icon-move",
          "id": 70,
          "code": 921632,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 76,
@@ -434,7 +442,7 @@
          "name": "icon-new-window",
          "id": 71,
          "code": 921633,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 26,
@@ -442,7 +450,7 @@
          "name": "icon-paint-bucket",
          "id": 21,
          "code": 921634,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 81,
@@ -450,7 +458,7 @@
          "name": "icon-pause",
          "id": 76,
          "code": 921635,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 82,
@@ -458,7 +466,7 @@
          "name": "icon-pencil",
          "id": 77,
          "code": 921636,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 84,
@@ -466,7 +474,7 @@
          "name": "icon-play",
          "id": 79,
          "code": 921637,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 85,
@@ -474,7 +482,7 @@
          "name": "icon-plot-resource",
          "id": 80,
          "code": 921638,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 27,
@@ -482,7 +490,7 @@
          "name": "icon-pointer-left",
          "id": 22,
          "code": 921639,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 28,
@@ -490,7 +498,7 @@
          "name": "icon-pointer-right",
          "id": 23,
          "code": 921640,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 32,
@@ -498,7 +506,7 @@
          "name": "icon-refresh",
          "id": 27,
          "code": 921641,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 16,
@@ -506,7 +514,7 @@
          "name": "icon-save",
          "id": 11,
          "code": 921648,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 88,
@@ -514,7 +522,7 @@
          "name": "icon-sine",
          "id": 83,
          "code": 921649,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 102,
@@ -522,7 +530,7 @@
          "name": "icon-T",
          "id": 84,
          "code": 921650,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 92,
@@ -530,7 +538,7 @@
          "name": "icon-thumbs-strip",
          "id": 87,
          "code": 921651,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 96,
@@ -538,7 +546,7 @@
          "name": "icon-two-parts-both",
          "id": 91,
          "code": 921652,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 97,
@@ -546,7 +554,7 @@
          "name": "icon-two-parts-one-only",
          "id": 92,
          "code": 921653,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 21,
@@ -554,7 +562,7 @@
          "name": "icon-resync",
          "id": 16,
          "code": 921654,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 120,
@@ -562,7 +570,7 @@
          "name": "icon-reset",
          "prevSize": 24,
          "code": 921655,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 121,
@@ -570,7 +578,7 @@
          "name": "icon-x-in-circle",
          "prevSize": 24,
          "code": 921656,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 118,
@@ -578,7 +586,7 @@
          "name": "icon-brightness",
          "prevSize": 24,
          "code": 921657,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 119,
@@ -586,7 +594,7 @@
          "name": "icon-contrast",
          "prevSize": 24,
          "code": 921664,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 124,
@@ -594,7 +602,7 @@
          "name": "icon-expand",
          "prevSize": 24,
          "code": 921665,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 125,
@@ -602,7 +610,7 @@
          "name": "icon-list-view",
          "prevSize": 24,
          "code": 921666,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 133,
@@ -610,7 +618,7 @@
          "name": "icon-grid-snap-to",
          "prevSize": 24,
          "code": 921667,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 128,
@@ -618,7 +626,7 @@
          "name": "icon-grid-snap-no",
          "prevSize": 24,
          "code": 921668,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 131,
@@ -626,7 +634,7 @@
          "name": "icon-frame-show",
          "prevSize": 24,
          "code": 921669,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 130,
@@ -634,7 +642,7 @@
          "name": "icon-frame-hide",
          "prevSize": 24,
          "code": 921670,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 138,
@@ -642,7 +650,7 @@
          "name": "icon-import",
          "prevSize": 24,
          "code": 921671,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 136,
@@ -650,7 +658,7 @@
          "name": "icon-export",
          "prevSize": 24,
          "code": 921672,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 37,
@@ -658,7 +666,7 @@
          "name": "icon-activity",
          "id": 32,
          "code": 921856,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 36,
@@ -666,7 +674,7 @@
          "name": "icon-activity-mode",
          "id": 31,
          "code": 921857,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 52,
@@ -674,7 +682,7 @@
          "name": "icon-autoflow-tabular",
          "id": 47,
          "code": 921858,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 55,
@@ -682,7 +690,7 @@
          "name": "icon-clock",
          "id": 50,
          "code": 921859,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 58,
@@ -690,7 +698,7 @@
          "name": "icon-database",
          "id": 53,
          "code": 921860,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 57,
@@ -698,7 +706,7 @@
          "name": "icon-database-query",
          "id": 52,
          "code": 921861,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 17,
@@ -706,7 +714,7 @@
          "name": "icon-dataset",
          "id": 12,
          "code": 921862,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 22,
@@ -714,7 +722,7 @@
          "name": "icon-datatable",
          "id": 17,
          "code": 921863,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 59,
@@ -722,7 +730,7 @@
          "name": "icon-dictionary",
          "id": 54,
          "code": 921864,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 62,
@@ -730,7 +738,7 @@
          "name": "icon-folder",
          "id": 57,
          "code": 921865,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 66,
@@ -738,7 +746,7 @@
          "name": "icon-image",
          "id": 61,
          "code": 921872,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 68,
@@ -746,7 +754,7 @@
          "name": "icon-layout",
          "id": 63,
          "code": 921873,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 77,
@@ -754,7 +762,7 @@
          "name": "icon-object",
          "id": 72,
          "code": 921874,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 78,
@@ -762,7 +770,7 @@
          "name": "icon-object-unknown",
          "id": 73,
          "code": 921875,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 79,
@@ -770,7 +778,7 @@
          "name": "icon-packet",
          "id": 74,
          "code": 921876,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 80,
@@ -778,7 +786,7 @@
          "name": "icon-page",
          "id": 75,
          "code": 921877,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 135,
@@ -786,7 +794,7 @@
          "name": "icon-plot-overlay",
          "prevSize": 24,
          "code": 921878,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 113,
@@ -794,7 +802,7 @@
          "name": "icon-plot-stacked",
          "prevSize": 24,
          "code": 921879,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 10,
@@ -802,7 +810,7 @@
          "name": "icon-session",
          "id": 5,
          "code": 921880,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 24,
@@ -810,7 +818,7 @@
          "name": "icon-tabular",
          "id": 19,
          "code": 921881,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 7,
@@ -818,7 +826,7 @@
          "name": "icon-tabular-lad",
          "id": 2,
          "code": 921888,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 6,
@@ -826,7 +834,7 @@
          "name": "icon-tabular-lad-set",
          "id": 1,
          "code": 921889,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 8,
@@ -834,7 +842,7 @@
          "name": "icon-tabular-realtime",
          "id": 3,
          "code": 921890,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 23,
@@ -842,7 +850,7 @@
          "name": "icon-tabular-scrolling",
          "id": 18,
          "code": 921891,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 112,
@@ -850,7 +858,7 @@
          "name": "icon-telemetry",
          "id": 86,
          "code": 921892,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 90,
@@ -858,7 +866,7 @@
          "name": "icon-telemetry-panel",
          "id": 85,
          "code": 921893,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 93,
@@ -866,7 +874,7 @@
          "name": "icon-timeline",
          "id": 88,
          "code": 921894,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 116,
@@ -874,7 +882,7 @@
          "name": "icon-timer-v1.5",
          "prevSize": 24,
          "code": 921895,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 11,
@@ -882,7 +890,7 @@
          "name": "icon-topic",
          "id": 6,
          "code": 921896,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 115,
@@ -890,7 +898,7 @@
          "name": "icon-box-with-dashed-lines",
          "id": 29,
          "code": 921897,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 126,
@@ -898,7 +906,7 @@
          "name": "icon-summary-widget",
          "prevSize": 24,
          "code": 921904,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 139,
@@ -906,7 +914,7 @@
          "name": "icon-notebook",
          "prevSize": 24,
          "code": 921905,
-          "tempChar": ""
+          "tempChar": ""
        }
      ],
      "metadata": {
@@ -1639,6 +1647,26 @@
            ]
          }
        },
+        {
+          "id": 118,
+          "paths": [
+            "M962 512l-896 512v-1024z"
+          ],
+          "attrs": [
+            {}
+          ],
+          "isMulticolor": false,
+          "isMulticolor2": false,
+          "grid": 16,
+          "tags": [
+            "icon-arrow-right-equilateral"
+          ],
+          "colorPermutations": {
+            "1161751207457516161751": [
+              {}
+            ]
+          }
+        },
        {
          "paths": [
            "M0 512l256 256v-512z",
@@ -2034,9 +2062,9 @@
        },
        {
          "paths": [
-            "M0 0h1024v256h-1024v-256z",
-            "M0 384h1024v256h-1024v-256z",
-            "M0 768h1024v256h-1024v-256z"
+            "M0 128h1024v128h-1024v-128z",
+            "M0 448h1024v128h-1024v-128z",
+            "M0 768h1024v128h-1024v-128z"
          ],
          "grid": 16,
          "tags": [
@@ -2044,9 +2072,19 @@
          ],
          "defaultCode": 109,
          "id": 69,
-          "attrs": [],
+          "attrs": [
+            {},
+            {},
+            {}
+          ],
+          "isMulticolor": false,
+          "isMulticolor2": false,
          "colorPermutations": {
-            "1161751207457516161751": []
+            "1161751207457516161751": [
+              {},
+              {},
+              {}
+            ]
          }
        },
        {
--- a/platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.eot
+++ b/platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.eot
--- a/platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.svg
+++ b/platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.svg
@@ -39,6 +39,7 @@
 <glyph unicode="&#xe929;" glyph-name="icon-brackets" d="M832 960h-192v-192h191.66l0.34-0.34v-639.32l-0.34-0.34h-191.66v-192h192c105.6 0 192 86.4 192 192v640c0 105.6-86.4 192-192 192zM384 128h-191.66l-0.34 0.34v639.32l0.34 0.34h191.66v192h-192c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h192v192z" />
 <glyph unicode="&#xe930;" glyph-name="icon-crosshair" d="M574 962h-128v-320h128v320zM1022 514h-320v-128h320v128zM574 258h-128v-320h128v320zM318 514h-320v-128h320v128z" />
 <glyph unicode="&#xe931;" glyph-name="icon-grippy-v2" horiz-adv-x="586" d="M146.4 777.2c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM146.4 557.8c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM146.4 338.2c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM146.4 118.8c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM365.8 886.8c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM365.8 667.4c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM365.8 448c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM365.8 228.6c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM365.8 9.2c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM585.2 777.2c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM585.2 557.8c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM585.2 338.2c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM585.2 118.8c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2z" />
+<glyph unicode="&#xe932;" glyph-name="icon-arrow-right-equilateral" d="M962 448l-896-512v1024z" />
 <glyph unicode="&#xe1000;" glyph-name="icon-arrows-out" d="M0 448l256-256v512zM512 960l-256-256h512zM512-64l256 256h-512zM768 704v-512l256 256z" />
 <glyph unicode="&#xe1001;" glyph-name="icon-arrows-right-left" d="M1024 448l-448-512v1024zM448 960l-448-512 448-512z" />
 <glyph unicode="&#xe1002;" glyph-name="icon-arrows-up-down" d="M512 960l512-448h-1024zM0 384l512-448 512 448z" />
@@ -57,7 +58,7 @@
 <glyph unicode="&#xe1016;" glyph-name="icon-magnify" d="M1024 64l-256.8 256.8c42.4 66.6 65 144 64.8 223.2 0 229.8-186.2 416-416 416s-416-186.2-416-416 186.2-416 416-416c79-0.2 156.4 22.4 223.2 64.8l256.8-256.8 128 128zM212.4 340.4c-112.4 112.4-112.4 294.8 0 407.2s294.8 112.4 407.2 0 112.4-294.8 0-407.2c-54-54-127.2-84.4-203.6-84.4-76.4-0.2-149.8 30.2-203.6 84.4z" />
 <glyph unicode="&#xe1017;" glyph-name="icon-magnify-in" d="M1024 64l-256.86 256.86c40.681 62.963 64.861 139.898 64.861 222.481 0 0.232 0 0.464-0.001 0.696v-0.036c0 229.76-186.24 416-416 416s-416-186.24-416-416 186.24-416 416-416c0.196 0 0.427-0.001 0.659-0.001 82.583 0 159.518 24.18 224.112 65.846l-1.631-0.985 256.86-256.86zM212.36 340.36c-52.114 52.117-84.346 124.114-84.346 203.64 0 159.058 128.942 288 288 288s288-128.942 288-288c0-159.058-128.942-288-288-288-0.005 0-0.010 0-0.014 0h0.001c-0.242-0.001-0.529-0.001-0.815-0.001-79.271 0-151.010 32.251-202.811 84.348l-0.013 0.014zM224 608h384v-128h-384v128zM352 736h128v-384h-128v384z" />
 <glyph unicode="&#xe1018;" glyph-name="icon-magnify-out" d="M767.2 320.8c42.4 66.6 65 144 64.8 223.2 0 229.8-186.2 416-416 416s-416-186.2-416-416 186.2-416 416-416c79-0.2 156.4 22.4 223.2 64.8l256.8-256.8 128 128-256.8 256.8zM619.6 340.4c-54-54-127.2-84.4-203.6-84.4-76.4-0.2-149.8 30.2-203.6 84.4-112.4 112.4-112.4 294.8 0 407.2s294.8 112.4 407.2 0c112.4-112.4 112.4-294.8 0-407.2zM224 608h384v-128h-384v128z" />
-<glyph unicode="&#xe1019;" glyph-name="icon-menu" d="M0 960h1024v-256h-1024v256zM0 576h1024v-256h-1024v256zM0 192h1024v-256h-1024v256z" />
+<glyph unicode="&#xe1019;" glyph-name="icon-menu" d="M0 832h1024v-128h-1024v128zM0 512h1024v-128h-1024v128zM0 192h1024v-128h-1024v128z" />
 <glyph unicode="&#xe1020;" glyph-name="icon-move" d="M293.4 448l218.6 218.6 256-256v421.4c0 70.4-57.6 128-128 128h-512c-70.4 0-128-57.6-128-128v-512c0-70.4 57.6-128 128-128h421.4l-256 256zM1024 512h-128v-320l-384 384-128-128 384-384h-320v-128h576z" />
 <glyph unicode="&#xe1021;" glyph-name="icon-new-window" d="M448 960v-128h320l-384-384 128-128 384 384v-320h128v576zM576 285.726v-157.382c-0.1-0.118-0.226-0.244-0.344-0.344h-383.312c-0.118 0.1-0.244 0.226-0.344 0.344v383.312c0.1 0.118 0.226 0.244 0.344 0.344h157.382l192 192h-349.726c-105.6 0-192-86.4-192-192v-384c0-105.6 86.4-192 192-192h384c105.6 0 192 86.4 192 192v349.726l-192-192z" />
 <glyph unicode="&#xe1022;" glyph-name="icon-paint-bucket" d="M544 736v-224c0-88.4-71.6-160-160-160s-160 71.6-160 160v97.2l-197.4-196.4c-50-50-12.4-215.2 112.4-340s290-162.4 340-112.4l417 423.6-352 352zM896-64c70.6 0 128 57.4 128 128 0 108.6-128 192-128 192s-128-83.4-128-192c0-70.6 57.4-128 128-128zM384 448c-35.4 0-64 28.6-64 64v384c0 35.4 28.6 64 64 64s64-28.6 64-64v-384c0-35.4-28.6-64-64-64z" />
--- a/platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.ttf
+++ b/platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.ttf
--- a/platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.woff
+++ b/platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.woff
--- a/platform/commonUI/general/res/sass/_archetypes.scss
+++ b/platform/commonUI/general/res/sass/_archetypes.scss
@@ -157,3 +157,57 @@
 .t-popup {
    z-index: 75;
 }
+
+/********************************************* GRID STYLES */
+.grid-two-column {
+    display: grid;
+    grid-row-gap: 0;
+    grid-template-columns: 1fr 2fr;
+    align-items: top;
+}
+
+.grid-two-column-span-cols {
+    grid-column: 1 / 3;
+}
+
+.grid-elem {
+    &:not(:first-child) {
+        border-top: 1px solid $colorInteriorBorder;
+    }
+    &.label {
+        background-color: rgba(0,0,128,0.2);
+    }
+    &.value {
+        background-color: rgba(0,128,0,0.2);
+    }
+}
+
+// Properties grids
+.grid-properties {
+    @extend .grid-two-column;
+}
+
+.grid-row {
+    display: contents;
+}
+
+.grid-span-all {
+    @extend .grid-two-column-span-cols;
+}
+
+.grid-row {
+    .grid-cell {
+        padding: 3px $interiorMarginLg 3px 0;
+        &[title] {
+            // When a cell has a title, assume it's helpful text
+            cursor: help;
+        }
+    }
+    &.force-border,
+    &:not(:first-of-type) {
+        // Row borders, effected via border-top on child elements of the row
+        .grid-cell {
+            border-top: 1px solid $colorInspectorSectionHeaderBg;
+        }
+    }
+}
--- a/platform/commonUI/general/res/sass/_badges.scss
+++ b/platform/commonUI/general/res/sass/_badges.scss
@@ -37,25 +37,9 @@
    vertical-align: middle;
 }

-//.top-bar .btn-browse .badge {
-// Moved to _controls.scss .btn.browse-btn
-//    border-radius: $controlCr * 1.5;
-//    $d: 20px;
-//    display: block;
-//    font-size: 1em;
-//    line-height: $d;
-////    margin-top: -4px;
-//
-//    position: absolute;
-//    top: 5px; left: 5px; bottom: 5px; right: auto;
-//    width: $d; height: auto;
-//}
-
 .super-menu .badge {
    @include background-image(linear-gradient(lighten($colorCreateBtn, 10%), $colorCreateBtn));
    border-radius: $controlCr;
    @include boxShdwSubtle();
-//    display: inline-block;
-//    margin-right: 10px !important;
    padding: 2px 7px;
 }
--- a/platform/commonUI/general/res/sass/_constants.scss
+++ b/platform/commonUI/general/res/sass/_constants.scss
@@ -43,10 +43,10 @@ $ueColMargin: 1.5%;
 $ueAppLogoW: 80px;
 $ueEditToolBarH: 25px;
 $ueCollapsedPaneEdgeM: 22px;
-$uePaneMiniTabH: 22px;
-$uePaneMiniTabW: 8px;
-$uePaneMiniTabFontSize: 8px;
-$uePaneMiniTabCollapsedW: 18px;
+$uePaneMiniTabH: 36px;
+$uePaneMiniTabW: 10px;
+$uePaneMiniTabFontSize: 9px;
+$uePaneMiniTabCollapsedW: 22px;
 $ueEditLeftPaneW: 75%;
 $treeSearchInputBarH: 25px;
 /*************** Panes */
@@ -70,7 +70,7 @@ $ueBrowseGridItemTopBarH: 20px;
 $ueBrowseGridItemBottomBarH: 30px;
 $itemPadLR: 5px;
 /*************** Tree */
-$treeVCW: 10px;
+$treeVCW: 16px;
 $treeTypeIconH: 1.4em; // was 16px
 $treeTypeIconHPx: 16px;
 $treeTypeIconW: 18px;
@@ -132,7 +132,7 @@ $menuLineHPx: 24px;
 $btnStdH: 25px;
 $btnToolbarH: $btnStdH;
 $controlBarH: $btnStdH;
-$btnFrameH: 16px;
+$btnFrameH: 18px;

 /************************** PATHS */
 // Paths need to be relative to /platform/commonUI/theme/<theme-name>/css/ directory
--- a/platform/commonUI/general/res/sass/_global.scss
+++ b/platform/commonUI/general/res/sass/_global.scss
@@ -141,7 +141,6 @@ a.disabled {

 .s-status-missing {
    // Labels. Expects .s-status-missing to be applied to mct-representation that contains
-    // .t-object-label
    .t-object-label .t-item-icon:before {
        content: $glyph-icon-object-unknown;
    }
@@ -201,6 +200,9 @@ a.disabled {

 .vscroll {
    overflow-y: auto;
+    &.scroll-pad {
+        padding-right: $interiorMargin;
+    }
 }

 .slidable {
@@ -224,6 +226,10 @@ a.disabled {
    box-shadow: rgba(#000, 0.7) 0 4px 10px 2px;
 }

+.capitalize {
+    text-transform: capitalize;
+}
+
 .hide,
 .hidden,
 .t-main-view .hide-in-t-main-view {
@@ -235,14 +241,16 @@ a.disabled {
    pointer-events: none;
 }

-.off {
+.invisible {
+    display: block;
    visibility: hidden;
-    opacity: 0;
    height: 0;
-    margin: 0;
    padding: 0;
    border: 0;
    margin: 0 !important;
+    transform: scale(0);
+    pointer-events: none;
+    position: absolute;
 }

 .sep {
--- a/platform/commonUI/general/res/sass/_glyphs.scss
+++ b/platform/commonUI/general/res/sass/_glyphs.scss
@@ -75,6 +75,7 @@ $glyph-icon-x: '\e928';
 $glyph-icon-brackets: '\e929';
 $glyph-icon-crosshair: '\e930';
 $glyph-icon-grippy: '\e931';
+$glyph-icon-arrow-right-equilateral: '\e932';
 $glyph-icon-arrows-out: '\e1000';
 $glyph-icon-arrows-right-left: '\e1001';
 $glyph-icon-arrows-up-down: '\e1002';
@@ -190,6 +191,7 @@ $glyph-icon-notebook: '\e1131';
 .icon-brackets {  @include glyphBefore($glyph-icon-brackets); }
 .icon-crosshair {  @include glyphBefore($glyph-icon-crosshair); }
 .icon-grippy {  @include glyphBefore($glyph-icon-grippy); }
+.icon-arrow-right-equilateral {  @include glyphBefore($glyph-icon-arrow-right-equilateral); }
 .icon-arrows-out {  @include glyphBefore($glyph-icon-arrows-out); }
 .icon-arrows-right-left {  @include glyphBefore($glyph-icon-arrows-right-left); }
 .icon-arrows-up-down {  @include glyphBefore($glyph-icon-arrows-up-down); }
--- a/platform/commonUI/general/res/sass/_inspector.scss
+++ b/platform/commonUI/general/res/sass/_inspector.scss
@@ -19,23 +19,15 @@
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
-/* Styles for the Inspector pane */
-
-.l-inspect,
-.l-inspect table tr td {
-    font-size: 0.75rem;
-}

+/* New grid layout for the Inspector pane */
 .l-inspect {
+    // Overall layout
    @extend .abs;
    background: $colorInspectorBg;
    color: $colorInspectorFg;
    line-height: 140%;

-    .flex-elem.holder:not(:last-child) {
-        margin-bottom: $interiorMargin;
-    }
-
    .pane-header {
        color: pushBack($colorInspectorFg, 20%);
        font-size: 0.8rem;
@@ -50,80 +42,48 @@
            }
        }
    }
+
    .l-inspector-part {
-        box-sizing: border-box;
-        padding-right: $interiorMargin;
-        .tree .form {
+        display: contents;
+    }
+
+    .tree {
+        .grid-properties {
            margin-left: $treeVCW + $interiorMarginLg;
        }
-        .section-header {
-            background: none;
-            color: $colorInspectorPropName;
-            border-radius: unset;
-            font-size: inherit;
-            padding: $interiorMarginSm 0;
-        }
-
-        mct-form:not(:last-child) .form {
-            border-bottom: 1px solid $colorInspectorSectionHeaderBg;
-        }
-
-        .form {
-            margin-bottom: $interiorMarginSm;
-            padding-bottom: $interiorMarginLg;
-            .l-section-body {
-                margin-bottom: 0;
-                &:not(.first) {
-                    border-top: 1px solid $colorFormLines;
-                }
-            }
-            .form-row {
-                align-items: center;
-                border: none !important;
-                margin-bottom: 0 !important;
-                padding: $interiorMarginSm 0;
-                .label {
-                    min-width: 80px;
-                }
-                input[type='text'],
-                input[type='search'] {
-                    width: 100%;
-                }
-            }
-        }
    }

-    ul li,
-    em.t-inspector-part-header {
-        display: block;
-        position: relative;
-    }
-
-    ul li {
-        margin-bottom: $interiorMarginLg;
-    }
-
-    em.t-inspector-part-header {
-        border-radius: $basicCr;
-        background-color: $colorInspectorSectionHeaderBg;
-        color: $colorInspectorSectionHeaderFg;
-        margin-bottom: $interiorMargin;
-        padding: floor($formTBPad * .75) $formLRPad;
-        text-transform: uppercase;
-    }
-
-    .inspector-properties {
-        &:not(.first) {
-            border-top: 1px solid $colorInspectorSectionHeaderBg;
-        }
-        padding: $interiorMarginSm 0;
+    .grid-properties {
        .label {
            color: $colorInspectorPropName;
-            text-transform: uppercase;
        }
        .value {
            color: $colorInspectorPropVal;
            word-break: break-all;
+            &:first-child {
+                // If there is no preceding .label element, make value span columns
+                @extend .grid-two-column-span-cols;
+            }
+        }
+    }
+
+    .inspector-location {
+        display: inline-block;
+    }
+
+    h2 {
+        // Headers for .l-inspector-part elements
+        @extend .grid-two-column-span-cols;
+        border-radius: $controlCr;
+        background-color: $colorInspectorSectionHeaderBg;
+        color: $colorInspectorSectionHeaderFg;
+        font-size: 0.8rem;
+        font-weight: normal;
+        margin: $interiorMarginLg 0 $interiorMarginSm 0;
+        padding: floor($formTBPad * .75) $formLRPad;
+        text-transform: uppercase;
+        &.first {
+            margin-top: 0;
        }
    }

@@ -162,6 +122,34 @@
            width: 4px;
        }
    }
+
+    // Elements pool
+    .holder-elements {
+        .current-elements {
+            position: relative;
+            .tree-item {
+                .t-object-label {
+                    // Elements pool is a flat list, so don't indent items.
+                    font-size: 0.75rem;
+                    left: 0;
+                }
+            }
+        }
+    }
+}
+
+/* Styles for the Inspector pane */
+
+.l-inspect,
+.l-inspect table tr td {
+    font-size: 0.75rem;
+}
+
+.l-inspect {
+    .flex-elem.holder:not(:last-child) {
+        margin-bottom: $interiorMargin;
+    }
+
    .holder-elements {
        .current-elements {
            position: relative;
--- a/platform/commonUI/general/res/sass/controls/_buttons.scss
+++ b/platform/commonUI/general/res/sass/controls/_buttons.scss
@@ -113,10 +113,11 @@ body.desktop .mini-tab-icon {
 .l-btn-set {
    // Buttons that have a very tight conceptual grouping - no internal space between them.
    font-size: 0; // Remove space between s-button elements due to white space in markup
+    white-space: nowrap;

    .s-button {
        border-radius: 0;
-        margin-left: 1px;
+        margin-left: 1px !important;
    }

    > .s-button {
--- a/platform/commonUI/general/res/sass/controls/_controls.scss
+++ b/platform/commonUI/general/res/sass/controls/_controls.scss
@@ -128,40 +128,80 @@
    }
 }

-.l-local-controls {
-    // Control shown when hovering over an object, like plots and imagery
-    // Default position is upper right
-    $p: $interiorMargin;
-    position: absolute;
-    top: $p; right: $p; bottom: auto;
-    text-align: right;
-    z-index: 5;
+
+
+/******************************************************** LOCAL CONTROLS */
+// Controls placed in proximity to or overlaid on components and views
+
+.local-controls-persist {
+
 }

-.s-local-controls {
-    font-size: 0.7rem;
-    &.s-wrapper-transluc {
-        // Semi-opaque wrapper to visually distinguish a control
-        // from the background
-        background: rgba($colorTransLucBg, 0.7);
-        box-sizing: border-box;
-        border-radius: $controlCr;
+.local-controls-hidden {
+    // Used within .has-local-controls, hidden by default
+
+}
+
+.local-controls-flyout {
+
+}
+
+body.desktop .has-local-controls {
+    // Helper class, provides hover ability to show local controls
+
+    &:hover .local-controls-hidden {
+        @include trans-prop-nice($props: opacity, $dur: 50ms);
+        opacity: 1;
+        pointer-events: inherit;
    }
-}

-.has-local-controls {
-    .local-control {
-        @include trans-prop-nice($props: opacity, $dur: 250ms);
+    .local-controls-hidden {
+        @include trans-prop-nice($props: opacity, $dur: 1000ms);
        opacity: 0;
+        pointer-events: none;
    }
-    &:hover {
-        .local-control {
-            @include trans-prop-nice($props: opacity, $dur: 10ms);
-            opacity: 1;
+}
+
+.h-local-controls {
+    // An explicit outer holder for controls. Typically placed in upper right.
+    align-items: center;
+    font-size: 0.7rem;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+
+
+    &.h-local-controls-overlay-content {
+        $p: $interiorMargin;
+        position: absolute;
+        top: $p; right: $p;
+        z-index: 2;
+    }
+
+    .l-btn-set,
+    .s-button {
+        &:not(:first-child) {
+            margin-left: $interiorMargin;
        }
    }
 }

+.h-local-controls-overlay-content {
+    background: $colorBodyBg;
+    border-radius: $controlCr + 1;
+    box-sizing: border-box;
+    border-radius: $controlCr;
+    padding: 1px;
+    .s-button {
+        background: $colorBtnBg;
+    }
+}
+
+.h-local-controls-trans {
+    background: rgba($colorTransLucBg, 0.5);
+    padding: $interiorMargin;
+}
+
 /******************************************************** VIEW CONTROLS */
 // Expand/collapse > and v arrows, used in tree and plot legend
 // Moved this over from a tree-only context 5/18/17
@@ -174,7 +214,7 @@
    &:before {
        position: absolute;
        @include trans-prop-nice(transform, 100ms);
-        content: $glyph-icon-arrow-right;
+        content: $glyph-icon-arrow-right-equilateral;
        @include transform-origin(center);
    }
    &.expanded:before {
@@ -773,13 +813,17 @@ textarea {
    @extend .icon-arrow-right;
    cursor: pointer;
    font-size: 0.75em;
+    width: $treeVCW;
    &:before {
+        // Arrow glyph
+        left: 50%;
        position: absolute;
        @include trans-prop-nice(transform, 100ms);
+        transform: translateX(-50%);
        transform-origin: center;
    }
    &.expanded:before {
-        transform: rotate(90deg);
+        transform: translateX(-50%) rotate(90deg);
    }
 }

--- a/platform/commonUI/general/res/sass/features/_imagery.scss
+++ b/platform/commonUI/general/res/sass/features/_imagery.scss
@@ -138,54 +138,51 @@
 }

 /*************************************** LOCAL CONTROLS */
-.l-local-controls {
-    max-width: 200px;
-    min-width: 100px;
-    width: 35%;
-    input[type="range"] {
-        display: block;
-        width: 100%;
-        &:not(:first-child) {
-            margin-top: $interiorMarginLg;
-        }
-
-        &:before {
-            margin-right: $interiorMarginSm;
-        }
-    }
-
-    .t-reset-btn-holder {
-        $bc: $scrollbarTrackColorBg;
-        &:before,
-        &:after {
-            border-right: 1px solid $bc;
-            content:'';
-            display: block;
-            width: 5px;
-            height: 4px;
-        }
-
-        &:before {
-            border-top: 1px solid $bc;
-            margin-bottom: 2px;
-        }
-
-        &:after {
-            border-bottom: 1px solid $bc;
-            margin-top: 2px;
-        }
-    }
-
-    &.s-wrapper-transluc {
-        left: auto;
-        padding: $interiorMargin $interiorMarginLg;
-    }
-
-    &.l-flex-row {
+.t-imagery {
+	.h-local-controls.h-local-controls-overlay-content {
+		max-width: 200px;
+		min-width: 100px;
+		width: 35%;
        align-items: center;
-    }
+        padding: $interiorMargin $interiorMarginLg;
+
+		input[type="range"] {
+			display: block;
+			width: 100%;
+			&:not(:first-child) {
+				margin-top: $interiorMarginLg;
+			}
+
+			&:before {
+				margin-right: $interiorMarginSm;
+			}
+		}
+
+		.t-reset-btn-holder {
+			$bc: $scrollbarTrackColorBg;
+			&:before,
+			&:after {
+				border-right: 1px solid $bc;
+				content:'';
+				display: block;
+				width: 5px;
+				height: 4px;
+			}
+
+			&:before {
+				border-top: 1px solid $bc;
+				margin-bottom: 2px;
+			}
+
+			&:after {
+				border-bottom: 1px solid $bc;
+				margin-top: 2px;
+			}
+		}
+	}
 }

+
 /*************************************** WHEN IN FRAME */
 .frame .t-imagery {
 	.l-image-main-wrapper {
--- a/platform/commonUI/general/res/sass/forms/_elems.scss
+++ b/platform/commonUI/general/res/sass/forms/_elems.scss
@@ -41,6 +41,7 @@
    width: 100%;

    .l-form-section {
+        margin-bottom: $interiorMarginLg * 2;
        position: relative;
        &.grows {
            .l-section-body,
@@ -57,7 +58,6 @@
 		$m: $interiorMargin;
 		box-sizing: border-box;
 		border-top: 1px solid $colorFormLines;
-        margin-bottom: $interiorMarginLg * 2;
 		padding: $formTBPad 0;
 		position: relative;

@@ -132,6 +132,7 @@
        width: auto;
        order: 2;
    }
+    >.control,
    >.controls {
        flex: 0 0 auto;
        margin-right: $interiorMargin;
@@ -258,19 +259,19 @@
            }
        }
    }
+}

-    .form-error {
-        // Block element that visually flags an error and contains a message
-        background-color: $colorFormFieldErrorBg;
-        color: $colorFormFieldErrorFg;
-        border-radius: $basicCr;
-        display: block;
-        padding: 1px 6px;
-        &:before {
-            content: $glyph-icon-alert-triangle;
-            display: inline;
-            font-family: symbolsfont;
-            margin-right: $interiorMarginSm;
-        }
+.form-error {
+    // Block element that visually flags an error and contains a message
+    background-color: $colorFormFieldErrorBg;
+    color: $colorFormFieldErrorFg;
+    border-radius: $basicCr;
+    display: block;
+    padding: 1px 6px;
+    &:before {
+        content: $glyph-icon-alert-triangle;
+        display: inline-block;
+        font-family: symbolsfont;
+        margin-right: $interiorMarginSm;
    }
 }
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -91,7 +91,7 @@ body.mobile {

    .object-browse-bar {
        &.t-primary {
-            margin-left: 45px;
+            margin-left: 30px;

            .title-label {
                // Prevent inline editing of the object title in the main view in mobile
--- a/platform/commonUI/general/res/sass/mobile/_tree.scss
+++ b/platform/commonUI/general/res/sass/mobile/_tree.scss
@@ -34,18 +34,7 @@ body.touch {
 		line-height: $mobileTreeItemH !important;
 		.view-control {
            font-size: 1em;
-            margin-right: $interiorMargin;
            width: ceil($mobileTreeItemH * 0.75);
-            &.has-children {
-                &:before {
-                    content: $glyph-icon-arrow-down;
-                    left: 50%;
-                    transform: translateX(-50%) rotate(-90deg);
-                }
-                &.expanded:before {
-                    transform: translateX(-50%) rotate(0deg);
-                }
-            }
 		}
 		.t-object-label {
 			line-height: inherit;
--- a/platform/commonUI/general/res/sass/plots/_plots-main.scss
+++ b/platform/commonUI/general/res/sass/plots/_plots-main.scss
@@ -246,21 +246,6 @@
 	}
 }

-.gl-plot-display-area,
-.plot-display-area,
-.gl-plot-axis-area {
-    .gl-plot-local-controls,
-    .l-local-controls {
-        @include trans-prop-nice(opacity, 150ms);
-        opacity: 0;
-        pointer-events: none;
-    }
-    &:hover .gl-plot-local-controls,
-    &:hover .l-local-controls {
-        opacity: 1;
-        pointer-events: inherit;
-    }
-}

 .gl-plot-display-area,
 .plot-display-area {
--- a/platform/commonUI/general/res/sass/search/_search.scss
+++ b/platform/commonUI/general/res/sass/search/_search.scss
@@ -111,14 +111,15 @@ input.c-search__search-input {

    .results-msg {
        font-size: 0.8rem;
+        opacity: 0.6;
    }

 	.active-filter-display {
-		$s: 0.7em;
+		$s: 0.7rem;
 		$p: $interiorMargin;
 		box-sizing: border-box;
 		line-height: 130%;
-		padding-left: $s * 2;
+		padding-left: $s * 1.5;
 		font-size: $s;

 		.clear-filters {
--- a/platform/commonUI/general/res/sass/user-environ/_frame.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_frame.scss
@@ -64,14 +64,16 @@
        left: $m;
    }
    &.frame-template {
-        .s-button,
-        .s-menu-button {
-            height: $ohH;
-            line-height: $ohH;
-            padding: 0 $interiorMargin;
-            > span,
-            &:before {
-                font-size: 0.65rem;
+        .h-local-controls {
+            .s-button,
+            .s-menu-button {
+                height: $btnFrameH;
+                line-height: $btnFrameH;
+                padding: 0 $interiorMargin;
+                > span,
+                &:before {
+                    font-size: 0.65rem;
+                }
            }
        }

@@ -96,8 +98,6 @@
        border-color: transparent;
        .object-browse-bar .right {
            $m: 0;
-            background: rgba(black, 0.3);
-            border-radius: $basicCr;
            padding: $interiorMarginSm;
            position: absolute;
            top: $m; right: $m;
@@ -111,10 +111,23 @@
                bottom: $m;
                left: $m;
            }
+
            > .t-frame-inner {
-                > .object-browse-bar .left {
-                    display: none;
+                &.t-object-type-layout {
+                    > .object-browse-bar {
+                        .t-btn-view-large {
+                            // When a nested layout has its frame hidden, don't display a view large button
+                            display: none;
+                        }
+                    }
                }
+
+                > .object-browse-bar {
+                    .left {
+                        display: none;
+                    }
+                }
+
                > .object-holder.abs {
                    overflow: hidden;
                    top: 0 !important;
--- a/platform/commonUI/general/res/sass/user-environ/_layout.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss
@@ -145,20 +145,18 @@
 body.desktop .pane .mini-tab-icon.toggle-pane {
    $hi: splitterHandleInset($splitterD, $splitterHandleD);
    $paneExpandedOffset: $hi + $splitterHandleD + $uePaneMiniTabW;
-    top: $bodyMargin + ($ueTopBarH - $uePaneMiniTabH)/2;
+    top: 0;

    &.toggle-tree.anchor-left.collapsed,
    &.toggle-inspect.anchor-right:not(.collapsed) {
        @extend .icon-arrow-right;
        border-bottom-right-radius: $controlCr;
-        border-top-right-radius: $controlCr;
    }

    &.toggle-tree.anchor-left:not(.collapsed),
    &.toggle-inspect.anchor-right.collapsed {
        @extend .icon-arrow-left;
        border-bottom-left-radius: $controlCr;
-        border-top-left-radius: $controlCr;
    }

    &.toggle-tree.anchor-left {
@@ -240,7 +238,6 @@ body.desktop .pane .mini-tab-icon.toggle-pane {
    }
 }

-.object-browse-bar .s-button,
 .top-bar .buttons-main .s-button,
 .top-bar .s-menu-button,
 .tool-bar .s-button,
@@ -268,7 +265,12 @@ body.desktop .pane .mini-tab-icon.toggle-pane {

    .left {
        .l-back {
-            margin-right: $interiorMarginLg;
+            a {
+                display: inline-block;
+                text-align: center;
+                width: 24px;
+            }
+            margin-right: $interiorMargin;
            &.s-status-editing { display: none; }
        }
    }
--- a/platform/commonUI/general/res/sass/user-environ/_selecting.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_selecting.scss
@@ -19,51 +19,62 @@
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
+
 .s-hover-border {
    border: 1px solid transparent;
-    &:hover {
-        border-color: rgba($colorSelectableSelectedPrimary, 0.5) !important;
-    }
 }

-.s-status-editing {
-    // Limit to editing mode
-    $o: 0.5;
-    $oHover: 0.8;
-    $bc: $colorSelectableSelectedPrimary;
+body.desktop {
    .s-hover-border {
-        // Show a border by default so user can see object bounds and empty objects
-        border-color: rgba($bc, $o) !important;
-        border-style: dotted !important;
-
        &:hover {
-            border-color: rgba($bc, $oHover) !important;
-        }
-
-        &.t-object-type-layout {
-            border-style: dashed !important;
+            border-color: rgba($colorBodyFg, 0.3) !important;
        }
    }
-    .s-selected {
-        &.s-moveable {
-            &:not(.s-drilled-in) {
-                cursor: move;
+
+    .s-status-editing {
+        // Limit to editing mode
+        $o: 0.5;
+        $oHover: 0.8;
+        $bc: $colorSelectableSelectedPrimary;
+        .s-hover-border {
+            // Show a border by default so user can see object bounds and empty objects
+            border-color: rgba($bc, $o) !important;
+            border-style: dotted !important;
+
+            &:hover {
+                border-color: rgba($bc, $oHover) !important;
+            }
+
+            &.t-object-type-layout {
+                border-style: dashed !important;
+            }
+        }
+        .s-selected {
+            > .s-hover-border,
+            &.s-hover-border {
+                // Styles for a selected object. Also used by legacy Fixed Position/Panel objects.
+                @include boxShdwLarge();
+                // Show edit-corners if you got 'em
+                .edit-corner {
+                    display: block;
+                    &:hover {
+                        background-color: rgba($colorKey, 1);
+                    }
+                }
+            }
+
+            &.s-moveable {
+                &:not(.s-drilled-in) {
+                    cursor: move;
+                }
            }
        }
    }
-}

-.s-selected > .s-hover-border,
-.s-selected.s-hover-border {
-    // Styles for a selected object. Also used by legacy Fixed Position/Panel objects.
-    border-color: $colorSelectableSelectedPrimary !important;
-    @include boxShdwLarge();
-    // Show edit-corners if you got 'em
-    .edit-corner {
-        display: block;
-        &:hover {
-            background-color: rgba($colorKey, 1);
-        }
+    .s-selected > .s-hover-border,
+    .s-selected.s-hover-border {
+        border-color: $colorSelectableSelectedPrimary !important;
+        //z-index: 1; // Bring selected item from beneath others. BUT, this breaks editing in Fixed Position.
    }
 }

--- a/platform/commonUI/general/res/templates/controls/selector.html
+++ b/platform/commonUI/general/res/templates/controls/selector.html
@@ -23,17 +23,6 @@
     ng-controller="SelectorController as selector">
    <div class='col col-15'>
        <div class='line field-hints'>Available</div>
-        <!--div id='_form_filter' class='line filter'>
-            <input type='text' class='control filter' name='filter-available' />
-            <a class='icon ui-symbol t-available-trigger'
-               href=''
-               title="Filter is case sensitive">M</a>
-        </div>
-
-        <div class="line">
-            Showing {{shown}} of {{count}} available options.
-        </div -->
-
        <div class='line treeview' name='available'>
            <mct-representation key="'tree'"
                                mct-object="selector.root()"
@@ -55,18 +44,6 @@
    </div>
    <div class='col col-15'>
        <div class='line field-hints'>Selected</div>
-        <!-- div id='_form_filter' class='line filter'>
-            <input type='text' class='control filter' name='filter-selected' />
-            <a class='icon ui-symbol t-selected-trigger'
-               href=''
-               title="Filter is case sensitive">
-                M
-            </a>
-        </div>
-        <div class="line">
-            Showing {{shown}} of {{count}} available options.
-        </div -->
-
        <div class='line treeview l-tree-item-flat-list' name='selected'>
            <ul class="tree">
                <li ng-repeat="selectedObject in selector.selected()">
--- a/platform/commonUI/general/res/templates/object-inspector.html
+++ b/platform/commonUI/general/res/templates/object-inspector.html
@@ -29,14 +29,14 @@
                            key="'inspector-region'"
                            mct-object="domainObject"
                            ng-model="ngModel"
-                            class="flex-elem grows vscroll l-flex-col">
+                            class="flex-elem grows vscroll scroll-pad l-flex-col inspector-properties">
                    </mct-representation>
                </div>
            </div>
            <mct-splitter class="splitter-inspect-panel mobile-hide"></mct-splitter>
            <div class="split-pane-component pane bottom">
                <div class="abs holder holder-elements l-flex-col">
-                    <em class="flex-elem t-inspector-part-header">Elements</em>
+                    <h2>Elements</h2>
                    <mct-representation
                            key="'edit-elements'"
                            mct-object="domainObject"