From ddef16795cdc7e18f1030ee85c123a23c10088a4 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charlesh88@gmail.com>
Date: Wed, 8 Apr 2020 09:36:23 -0700
Subject: [PATCH 1/2] Conditionals and Notebook UI fixes (#2868)

- Significant fixes for Safari-compatible Flex layout in Condition Set
view;
- Changed visual approach to current-value section;
- Firefox scrollbar coloring
- Fix layout issues in Firefox;
- Consolidate Conditionals styles into single scss file;
- Fix test datum elements layout, better wrapping;
- Better approach to presence/absence of URL property in Condition
Widget;
- Fixes #2853;
- Fix errors in URL property handling in Condition Widget;
- Fixes #2853;
- Fixes #2867 - hide the View Switcher when an object is being edited;
- Refined titling on View Switcher and Notebook menu button;
- Cleaned up styles in l-browse-bar and moved into
ui/layout/layout.scss;
- Removed styles/_layout.scss;
- Hide the main view Edit button when in mobile
---
 .../components/ConditionCollection.vue        |   1 -
 .../condition/components/ConditionSet.vue     |  45 ++---
 src/plugins/condition/components/TestData.vue |   3 +-
 .../condition/components/condition-set.scss   | 116 -------------
 .../{condition.scss => conditionals.scss}     | 155 +++++++++++++++++-
 .../components/ConditionWidget.vue            |  12 +-
 .../components/condition-widget.scss          |  10 +-
 .../components/notebook-menu-switcher.vue     |   4 +-
 src/plugins/themes/espresso-theme.scss        |   1 -
 src/plugins/themes/maelstrom-theme.scss       |   1 -
 src/plugins/themes/snow-theme.scss            |   1 -
 src/styles/_controls.scss                     |  10 +-
 src/styles/_global.scss                       |   6 +
 src/styles/_layout.scss                       |  87 ----------
 src/styles/vue-styles.scss                    |   3 +-
 src/ui/layout/BrowseBar.vue                   |   1 +
 src/ui/layout/ViewSwitcher.vue                |   2 +-
 src/ui/layout/layout.scss                     |  98 ++++++++++-
 18 files changed, 299 insertions(+), 257 deletions(-)
 delete mode 100644 src/plugins/condition/components/condition-set.scss
 rename src/plugins/condition/components/{condition.scss => conditionals.scss} (51%)
 delete mode 100644 src/styles/_layout.scss

diff --git a/src/plugins/condition/components/ConditionCollection.vue b/src/plugins/condition/components/ConditionCollection.vue
index e96621f3d3..f3c290c7b6 100644
--- a/src/plugins/condition/components/ConditionCollection.vue
+++ b/src/plugins/condition/components/ConditionCollection.vue
@@ -22,7 +22,6 @@
 
 <template>
 <section id="conditionCollection"
-         class="c-cs__conditions"
          :class="{ 'is-expanded': expanded }"
 >
     <div class="c-cs__header c-section__header">
diff --git a/src/plugins/condition/components/ConditionSet.vue b/src/plugins/condition/components/ConditionSet.vue
index d3ea6f4949..3a0f2e9dc4 100644
--- a/src/plugins/condition/components/ConditionSet.vue
+++ b/src/plugins/condition/components/ConditionSet.vue
@@ -23,30 +23,33 @@
 <template>
 <div class="c-cs">
     <section class="c-cs__current-output c-section">
-        <div class="c-cs__header c-section__header">
-            <span class="c-cs__header-label c-section__label">Current Output</span>
-        </div>
         <div class="c-cs__content c-cs__current-output-value">
-            <template v-if="currentConditionOutput">
-                {{ currentConditionOutput }}
-            </template>
-            <template v-else>
-                {{ defaultConditionOutput }}
-            </template>
+            <span class="c-cs__current-output-value__label">Current Output</span>
+            <span class="c-cs__current-output-value__value">
+                <template v-if="currentConditionOutput">
+                    {{ currentConditionOutput }}
+                </template>
+                <template v-else>
+                    {{ defaultConditionOutput }}
+                </template>
+            </span>
         </div>
     </section>
-    <TestData :is-editing="isEditing"
-              :test-data="testData"
-              :telemetry="telemetryObjs"
-              @updateTestData="updateTestData"
-    />
-    <ConditionCollection
-        :is-editing="isEditing"
-        :test-data="testData"
-        @conditionSetResultUpdated="updateCurrentOutput"
-        @updateDefaultOutput="updateDefaultOutput"
-        @telemetryUpdated="updateTelemetry"
-    />
+    <div class="c-cs__test-data-and-conditions-w">
+        <TestData class="c-cs__test-data"
+                  :is-editing="isEditing"
+                  :test-data="testData"
+                  :telemetry="telemetryObjs"
+                  @updateTestData="updateTestData"
+        />
+        <ConditionCollection class="c-cs__conditions"
+                             :is-editing="isEditing"
+                             :test-data="testData"
+                             @conditionSetResultUpdated="updateCurrentOutput"
+                             @updateDefaultOutput="updateDefaultOutput"
+                             @telemetryUpdated="updateTelemetry"
+        />
+    </div>
 </div>
 </template>
 
diff --git a/src/plugins/condition/components/TestData.vue b/src/plugins/condition/components/TestData.vue
index 24ac3ceb93..233fdaf1d5 100644
--- a/src/plugins/condition/components/TestData.vue
+++ b/src/plugins/condition/components/TestData.vue
@@ -23,7 +23,6 @@
 <template>
 <section v-show="isEditing"
          id="test-data"
-         class="c-cs__test-data"
          :class="{ 'is-expanded': expanded }"
 >
     <div class="c-cs__header c-section__header">
@@ -96,7 +95,7 @@
                         >
                     </span>
                 </span>
-                <div class="c-test-datum__buttons">
+                <div class="c-cs-test__buttons">
                     <button class="c-click-icon c-test-data__duplicate-button icon-duplicate"
                             title="Duplicate this test datum"
                             @click="addTestInput(testInput)"
diff --git a/src/plugins/condition/components/condition-set.scss b/src/plugins/condition/components/condition-set.scss
deleted file mode 100644
index 691091c36a..0000000000
--- a/src/plugins/condition/components/condition-set.scss
+++ /dev/null
@@ -1,116 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2020, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-.c-cs {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    overflow: hidden;
-
-    &__content {
-        display: flex;
-        flex-direction: column;
-        flex: 0 1 auto;
-        overflow: hidden;
-
-        > * {
-            flex: 0 0 auto;
-            overflow: hidden;
-            + * {
-                margin-top: $interiorMarginSm;
-            }
-        }
-
-        .c-button {
-            align-self: start;
-        }
-    }
-
-    .is-editing & {
-        // Add some space to kick away from blue editing border indication
-        padding: $interiorMargin;
-    }
-
-    section {
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
-    }
-
-    &__conditions-h {
-        display: flex;
-        flex-direction: column;
-        flex: 1 1 auto;
-        overflow: auto;
-        padding-right: $interiorMarginSm;
-
-        > * + * {
-            margin-top: $interiorMarginSm;
-        }
-    }
-
-    &__conditions {
-        > * + * {
-            margin-top: $interiorMarginSm;
-        }
-    }
-
-    .hint {
-        padding: $interiorMarginSm;
-    }
-
-    /************************** SPECIFIC ITEMS */
-    &__current-output-value {
-        font-size: 1.25em;
-        padding: $interiorMargin;
-    }
-}
-
-/***************************** TEST DATA */
-.c-cs-tests {
-    flex: 0 1 auto;
-    overflow: auto;
-    padding-right: $interiorMarginSm;
-
-    > * + * {
-        margin-top: $interiorMarginSm;
-    }
-}
-
-.c-cs-test {
-    > * {
-        flex: 0 0 auto;
-        + * {
-            margin-left: $interiorMargin;
-        }
-    }
-
-    &__controls {
-        display: flex;
-        flex: 1 1 auto;
-
-        > * + * {
-            margin-left: $interiorMargin;
-        }
-    }
-}
-
diff --git a/src/plugins/condition/components/condition.scss b/src/plugins/condition/components/conditionals.scss
similarity index 51%
rename from src/plugins/condition/components/condition.scss
rename to src/plugins/condition/components/conditionals.scss
index 1f20e67146..8dd1cceb2d 100644
--- a/src/plugins/condition/components/condition.scss
+++ b/src/plugins/condition/components/conditionals.scss
@@ -20,14 +20,145 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
+.c-cs {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+
+    /************************** CONDITION SET LAYOUT */
+    &__current-output {
+        flex: 0 0 auto;
+    }
+
+    &__test-data-and-conditions-w {
+        display: flex;
+        flex-direction: column;
+        flex: 1 1 auto;
+        height: 100%;
+        overflow: hidden;
+    }
+
+    &__test-data,
+    &__conditions {
+        flex: 0 0 auto;
+        overflow: hidden;
+    }
+
+    &__test-data {
+        flex: 0 0 auto;
+        max-height: 50%;
+
+        &.is-expanded {
+            margin-bottom: $interiorMargin * 4;
+        }
+    }
+
+    &__conditions {
+        flex: 1 1 auto;
+
+        > * + * {
+            margin-top: $interiorMarginSm;
+        }
+    }
+
+    &__content {
+        display: flex;
+        flex-direction: column;
+        flex: 0 1 auto;
+        overflow: hidden;
+
+        > * {
+            flex: 0 0 auto;
+            overflow: hidden;
+            + * {
+                margin-top: $interiorMarginSm;
+            }
+        }
+
+        .c-button {
+            align-self: start;
+        }
+    }
+
+    .is-editing & {
+        // Add some space to kick away from blue editing border indication
+        padding: $interiorMargin;
+    }
+
+    section {
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+    }
+
+    &__conditions-h {
+        display: flex;
+        flex-direction: column;
+        flex: 1 1 auto;
+        overflow: auto;
+        padding-right: $interiorMarginSm;
+
+        > * + * {
+            margin-top: $interiorMarginSm;
+        }
+    }
+
+    .hint {
+        padding: $interiorMarginSm;
+    }
+
+    /************************** SPECIFIC ITEMS */
+    &__current-output-value {
+        flex-direction: row;
+        align-items: baseline;
+        padding: 0 $interiorMargin $interiorMarginLg $interiorMargin;
+
+        > * {
+            padding: $interiorMargin 0; // Must do this to align label and value
+        }
+
+        &__label {
+            color: $colorInspectorSectionHeaderFg;
+            opacity: 0.9;
+            text-transform: uppercase;
+        }
+
+        &__value {
+            $p: $interiorMargin * 3;
+            font-size: 1.25em;
+            margin-left: $interiorMargin;
+            padding-left: $p;
+            padding-right: $p;
+            background: rgba(black, 0.2);
+            border-radius: 5px;
+        }
+    }
+}
+
+/***************************** CONDITIONS AND TEST DATUM ELEMENTS */
 .c-condition,
 .c-test-datum {
     @include discreteItem();
     display: flex;
     padding: $interiorMargin;
+    line-height: 170%; // Aligns text with controls like selects
+}
 
-    &--edit {
-        line-height: 160%; // For layout when inputs wrap, like in criteria
+.c-cdef,
+.c-cs-test {
+    &__controls {
+        display: flex;
+        flex: 1 1 auto;
+        flex-wrap: wrap;
+
+        > * > * {
+            margin-right: $interiorMarginSm;
+        }
+    }
+
+    &__buttons {
+        white-space: nowrap;
     }
 }
 
@@ -105,8 +236,6 @@
     }
 
     &__controls {
-        display: flex;
-        flex-wrap: wrap;
         align-items: flex-start;
         grid-column: 2;
 
@@ -129,5 +258,21 @@
         background-color: lightblue;
         border-radius: 2px;
     }
-
+}
+
+/***************************** TEST DATA */
+.c-cs-tests {
+    flex: 0 1 auto;
+    overflow: auto;
+    padding-right: $interiorMarginSm;
+
+    > * + * {
+        margin-top: $interiorMarginSm;
+    }
+}
+
+.c-cs-test {
+    > * + * {
+        margin-left: $interiorMargin;
+    }
 }
diff --git a/src/plugins/conditionWidget/components/ConditionWidget.vue b/src/plugins/conditionWidget/components/ConditionWidget.vue
index c6011eba25..03b282cffd 100644
--- a/src/plugins/conditionWidget/components/ConditionWidget.vue
+++ b/src/plugins/conditionWidget/components/ConditionWidget.vue
@@ -21,13 +21,14 @@
 *****************************************************************************/
 
 <template>
-<a class="c-condition-widget"
-   :href="internalDomainObject.url"
+<component :is="urlDefined ? 'a' : 'span'"
+           class="c-condition-widget"
+           :href="urlDefined ? internalDomainObject.url : null"
 >
     <div class="c-condition-widget__label">
         {{ internalDomainObject.label }}
     </div>
-</a>
+</component>
 </template>
 
 <script>
@@ -38,6 +39,11 @@ export default {
             internalDomainObject: this.domainObject
         }
     },
+    computed: {
+        urlDefined() {
+            return this.internalDomainObject.url && this.internalDomainObject.url.length > 0;
+        }
+    },
     mounted() {
         this.unlisten = this.openmct.objects.observe(this.internalDomainObject, '*', this.updateInternalDomainObject);
     },
diff --git a/src/plugins/conditionWidget/components/condition-widget.scss b/src/plugins/conditionWidget/components/condition-widget.scss
index f25231aa88..951530cf02 100644
--- a/src/plugins/conditionWidget/components/condition-widget.scss
+++ b/src/plugins/conditionWidget/components/condition-widget.scss
@@ -28,10 +28,12 @@
     border: 1px solid transparent;
     display: inline-block;
     padding: $interiorMarginLg $interiorMarginLg * 2;
-    cursor: inherit !important;
-    &[href] {
-        cursor: pointer !important;
-    }
+}
+
+a.c-condition-widget {
+    // Widget is conditionally made into a <a> when URL property has been defined
+    cursor: pointer !important;
+    pointer-events: inherit;
 }
 
 // Make Condition Widget expand when in a hidden frame Layout context
diff --git a/src/plugins/notebook/components/notebook-menu-switcher.vue b/src/plugins/notebook/components/notebook-menu-switcher.vue
index 069df76358..ed1b04bfae 100644
--- a/src/plugins/notebook/components/notebook-menu-switcher.vue
+++ b/src/plugins/notebook/components/notebook-menu-switcher.vue
@@ -1,8 +1,8 @@
 <template>
-<div class="l-browse-bar__view-switcher c-ctrl-wrapper c-ctrl-wrapper--menus-left">
+<div class="c-menu-button c-ctrl-wrapper c-ctrl-wrapper--menus-left">
     <button
         class="c-button--menu icon-notebook"
-        title="Switch view type"
+        title="Take a Notebook Snapshot"
         @click="setNotebookTypes"
         @click.stop="toggleMenu"
     >
diff --git a/src/plugins/themes/espresso-theme.scss b/src/plugins/themes/espresso-theme.scss
index df9575918a..d73a81bad7 100644
--- a/src/plugins/themes/espresso-theme.scss
+++ b/src/plugins/themes/espresso-theme.scss
@@ -13,7 +13,6 @@
 @import "~styles/controls";
 @import "~styles/forms";
 @import "~styles/table";
-@import "~styles/layout";
 @import "~styles/legacy";
 @import "~styles/legacy-plots";
 @import "~styles/plotly";
diff --git a/src/plugins/themes/maelstrom-theme.scss b/src/plugins/themes/maelstrom-theme.scss
index 573fb2832b..b29cc5d043 100644
--- a/src/plugins/themes/maelstrom-theme.scss
+++ b/src/plugins/themes/maelstrom-theme.scss
@@ -13,7 +13,6 @@
 @import "~styles/controls";
 @import "~styles/forms";
 @import "~styles/table";
-@import "~styles/layout";
 @import "~styles/legacy";
 @import "~styles/legacy-plots";
 @import "~styles/plotly";
diff --git a/src/plugins/themes/snow-theme.scss b/src/plugins/themes/snow-theme.scss
index 1af11c3cc5..3bacab5cce 100644
--- a/src/plugins/themes/snow-theme.scss
+++ b/src/plugins/themes/snow-theme.scss
@@ -13,7 +13,6 @@
 @import "~styles/controls";
 @import "~styles/forms";
 @import "~styles/table";
-@import "~styles/layout";
 @import "~styles/legacy";
 @import "~styles/legacy-plots";
 @import "~styles/plotly";
diff --git a/src/styles/_controls.scss b/src/styles/_controls.scss
index d7bdaadc13..8df0346b5d 100644
--- a/src/styles/_controls.scss
+++ b/src/styles/_controls.scss
@@ -244,18 +244,10 @@ button {
 
 /******************************************************** SECTION */
 section {
-    flex: 0 0 auto;
+    flex: 0 1 auto;
     overflow: hidden;
     + section {
         margin-top: $interiorMargin;
-
-        &.is-expanded {
-            margin-bottom: $interiorMargin * 3;
-        }
-    }
-
-    &.is-expanded {
-        flex: 0 1 auto;
     }
 
     .c-section__header {
diff --git a/src/styles/_global.scss b/src/styles/_global.scss
index 29cfa82ebc..c8c7e9f33a 100644
--- a/src/styles/_global.scss
+++ b/src/styles/_global.scss
@@ -88,6 +88,12 @@ body.desktop {
             background: $scrollbarThumbColorMenuHov;
         }
     }
+
+    div, span {
+        // Firefox
+        scrollbar-color: $scrollbarThumbColor $scrollbarTrackColorBg;
+        scrollbar-width: thin;
+    }
 }
 
 /******************************************************** HTML ENTITIES */
diff --git a/src/styles/_layout.scss b/src/styles/_layout.scss
deleted file mode 100644
index e57627a00d..0000000000
--- a/src/styles/_layout.scss
+++ /dev/null
@@ -1,87 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/************************** BROWSE BAR */
-.l-browse-bar {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    [class*="__"] {
-        // Removes extraneous horizontal white space
-        display: inline-flex;
-    }
-
-    &__start {
-        display: flex;
-        align-items: center;
-        flex: 1 1 auto;
-        margin-right: $interiorMargin;
-        min-width: 0; // Forces interior to compress when pushed on
-    }
-
-    &__end {
-        display: flex;
-        align-items: center;
-        flex: 0 0 auto;
-
-        [class*="__"] + [class*="__"] {
-            margin-left: $interiorMarginSm;
-        }
-    }
-
-    &__nav-to-parent-button,
-    &__disclosure-button {
-        flex: 0 0 auto;
-    }
-
-    &__nav-to-parent-button {
-        // This is an icon-button
-        $p: $interiorMargin;
-        margin-right: $interiorMargin;
-        padding-left: $p;
-        padding-right: $p;
-
-        .is-editing & {
-            display: none;
-        }
-    }
-
-    &__object-name--w {
-        flex: 0 1 auto;
-        @include headerFont(1.4em);
-        min-width: 0;
-
-        &:before {
-            // Icon
-            margin-right: $interiorMargin;
-        }
-    }
-
-    &__object-name {
-        flex: 0 1 auto;
-    }
-
-    &__object-details {
-        opacity: 0.5;
-    }
-}
diff --git a/src/styles/vue-styles.scss b/src/styles/vue-styles.scss
index 1e8b2815ee..2837d80e83 100644
--- a/src/styles/vue-styles.scss
+++ b/src/styles/vue-styles.scss
@@ -1,7 +1,6 @@
 @import "../api/overlays/components/dialog-component.scss";
 @import "../api/overlays/components/overlay-component.scss";
-@import "../plugins/condition/components/condition.scss";
-@import "../plugins/condition/components/condition-set.scss";
+@import "../plugins/condition/components/conditionals.scss";
 @import "../plugins/conditionWidget/components/condition-widget.scss";
 @import "../plugins/condition/components/inspector/conditional-styles.scss";
 @import "../plugins/displayLayout/components/box-view.scss";
diff --git a/src/ui/layout/BrowseBar.vue b/src/ui/layout/BrowseBar.vue
index e4daa259d1..0197e5a36d 100644
--- a/src/ui/layout/BrowseBar.vue
+++ b/src/ui/layout/BrowseBar.vue
@@ -28,6 +28,7 @@
 
     <div class="l-browse-bar__end">
         <view-switcher
+            v-if="!isEditing"
             :current-view="currentView"
             :views="views"
             @setView="setView"
diff --git a/src/ui/layout/ViewSwitcher.vue b/src/ui/layout/ViewSwitcher.vue
index dd3fb29ba8..7a3f44f3f4 100644
--- a/src/ui/layout/ViewSwitcher.vue
+++ b/src/ui/layout/ViewSwitcher.vue
@@ -6,7 +6,7 @@
     <button
         class="c-button--menu"
         :class="currentView.cssClass"
-        title="Switch view type"
+        title="Change the current view"
         @click.stop="toggleViewMenu"
     >
         <span class="c-button__label">
diff --git a/src/ui/layout/layout.scss b/src/ui/layout/layout.scss
index c9566d027a..eafbfdd85c 100644
--- a/src/ui/layout/layout.scss
+++ b/src/ui/layout/layout.scss
@@ -1,3 +1,24 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2020, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
 /******************************* SHELL */
 .l-shell {
     position: absolute;
@@ -126,6 +147,9 @@
 
     body.mobile & .l-shell__main-view-browse-bar {
         margin-left: $mobileMenuIconD; // Make room for the hamburger!
+        .c-button[class*='__actions__edit'] {
+            display: none; // Hide the main view edit button when in mobile context
+        }
     }
 
     &__head {
@@ -269,6 +293,79 @@
     }
 }
 
+/************************** BROWSE BAR */
+.l-browse-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    [class*="__"] {
+        // Removes extraneous horizontal white space
+        display: inline-flex;
+    }
+
+    &__start,
+    &__end,
+    &__actions {
+        display: flex;
+        align-items: center;
+    }
+
+    &__actions,
+    &__end {
+        > * + * {
+            margin-left: $interiorMarginSm;
+        }
+    }
+
+    &__start {
+        flex: 1 1 auto;
+        margin-right: $interiorMargin;
+        min-width: 0; // Forces interior to compress when pushed on
+    }
+
+    &__end {
+        flex: 0 0 auto;
+    }
+
+    &__nav-to-parent-button,
+    &__disclosure-button {
+        flex: 0 0 auto;
+    }
+
+    &__nav-to-parent-button {
+        // This is an icon-button
+        $p: $interiorMargin;
+        margin-right: $interiorMargin;
+        padding-left: $p;
+        padding-right: $p;
+
+        .is-editing & {
+            display: none;
+        }
+    }
+
+    &__object-name--w,
+    &__object-name {
+        flex: 0 1 auto;
+    }
+
+    &__object-name--w {
+        @include headerFont(1.4em);
+        min-width: 0;
+
+        &:before {
+            // Icon
+            margin-right: $interiorMargin;
+        }
+    }
+
+    &__object-details {
+        opacity: 0.5;
+    }
+}
+
+/************************** DRAWER */
 .c-drawer {
     /* New sliding overlay or push element to contain things
     * Designed for mobile and compact desktop scenarios
@@ -332,4 +429,3 @@
         }
     }
 }
-

From de4c5b37294e9ea2a4c655d261148e0770abf009 Mon Sep 17 00:00:00 2001
From: Shefali Joshi <simplyrender@gmail.com>
Date: Wed, 8 Apr 2020 12:30:59 -0700
Subject: [PATCH 2/2] Disables conditional and static styles for hyperlinks and
 summary widgets. (#2887)

---
 src/ui/inspector/Inspector.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ui/inspector/Inspector.vue b/src/ui/inspector/Inspector.vue
index c4076c5796..1b822263ff 100644
--- a/src/ui/inspector/Inspector.vue
+++ b/src/ui/inspector/Inspector.vue
@@ -81,7 +81,7 @@ export default {
         }
     },
     mounted() {
-        this.excludeObjectTypes = ['folder', 'webPage', 'conditionSet'];
+        this.excludeObjectTypes = ['folder', 'webPage', 'conditionSet', 'summary-widget', 'hyperlink'];
         this.openmct.selection.on('change', this.updateInspectorViews);
     },
     destroyed() {