cherry-pick #7850

src/styles/_constants.scss

@@ -229,6 +229,8 @@ $glyph-icon-grid-on: '\ea38';
 $glyph-icon-grid-off: '\ea39';
 $glyph-icon-camera: '\ea3a';
 $glyph-icon-folders-collapse: '\ea3b';
+$glyph-icon-multiline: '\ea3c';
+$glyph-icon-singleline: '\ea3d';
 $glyph-icon-activity: '\eb00';
 $glyph-icon-activity-mode: '\eb01';
 $glyph-icon-autoflow-tabular: '\eb02';

src/styles/_glyphs.scss

@@ -42,501 +42,675 @@
 .icon-alert-rect {
     @include glyphBefore($glyph-icon-alert-rect);
 }
+
 .icon-alert-triangle {
     @include glyphBefore($glyph-icon-alert-triangle);
 }
+
 .icon-arrow-up {
     @include glyphBefore($glyph-icon-arrow-up);
 }
+
 .icon-arrow-double-up {
     @include glyphBefore($glyph-icon-arrow-double-up);
 }
+
 .icon-arrow-tall-up {
     @include glyphBefore($glyph-icon-arrow-tall-up);
 }
+
 .icon-arrow-right {
     @include glyphBefore($glyph-icon-arrow-right);
 }
+
 .icon-arrow-right-equilateral {
     @include glyphBefore($glyph-icon-arrow-right-equilateral);
 }
+
 .icon-arrow-down {
     @include glyphBefore($glyph-icon-arrow-down);
 }
+
 .icon-arrow-double-down {
     @include glyphBefore($glyph-icon-arrow-double-down);
 }
+
 .icon-arrow-tall-down {
     @include glyphBefore($glyph-icon-arrow-tall-down);
 }
+
 .icon-arrow-left {
     @include glyphBefore($glyph-icon-arrow-left);
 }
+
 .icon-asterisk {
     @include glyphBefore($glyph-icon-asterisk);
 }
+
 .icon-bell {
     @include glyphBefore($glyph-icon-bell);
 }
+
 .icon-box-round-corners {
     @include glyphBefore($glyph-icon-box-round-corners);
 }
+
 .icon-box-with-arrow {
     @include glyphBefore($glyph-icon-box-with-arrow);
 }
+
 .icon-check {
     @include glyphBefore($glyph-icon-check);
 }
+
 .icon-connectivity {
     @include glyphBefore($glyph-icon-connectivity);
 }
+
 .icon-database-in-brackets {
     @include glyphBefore($glyph-icon-database-in-brackets);
 }
+
 .icon-eye-open {
     @include glyphBefore($glyph-icon-eye-open);
 }
+
 .icon-gear {
     @include glyphBefore($glyph-icon-gear);
 }
+
 .icon-gear-after {
     @include glyphAfter($glyph-icon-gear);
 }
+
 .icon-hourglass {
     @include glyphBefore($glyph-icon-hourglass);
 }
+
 .icon-info {
     @include glyphBefore($glyph-icon-info);
 }
+
 .icon-link {
     @include glyphBefore($glyph-icon-link);
 }
+
 .icon-lock {
     @include glyphBefore($glyph-icon-lock);
 }
+
 .icon-minus {
     @include glyphBefore($glyph-icon-minus);
 }
+
 .icon-people {
     @include glyphBefore($glyph-icon-people);
 }
+
 .icon-person {
     @include glyphBefore($glyph-icon-person);
 }
+
 .icon-plus {
     @include glyphBefore($glyph-icon-plus);
 }
+
 .icon-plus-in-rect {
     @include glyphBefore($glyph-icon-plus-in-rect);
 }
+
 .icon-trash {
     @include glyphBefore($glyph-icon-trash);
 }
+
 .icon-x {
     @include glyphBefore($glyph-icon-x);
 }
+
 .icon-brackets {
     @include glyphBefore($glyph-icon-brackets);
 }
+
 .icon-crosshair {
     @include glyphBefore($glyph-icon-crosshair);
 }
+
 .icon-grippy {
     @include glyphBefore($glyph-icon-grippy);
 }
+
 .icon-grid {
     @include glyphBefore($glyph-icon-grid);
 }
+
 .icon-grippy-ew {
     @include glyphBefore($glyph-icon-grippy-ew);
 }
+
 .icon-columns {
     @include glyphBefore($glyph-icon-columns);
 }
+
 .icon-rows {
     @include glyphBefore($glyph-icon-rows);
 }
+
 .icon-filter {
     @include glyphBefore($glyph-icon-filter);
 }
+
 .icon-filter-outline {
     @include glyphBefore($glyph-icon-filter-outline);
 }
+
 .icon-suitcase {
     @include glyphBefore($glyph-icon-suitcase);
 }
+
 .icon-cursor-lock {
     @include glyphBefore($glyph-icon-cursor-lock);
 }
+
 .icon-flag {
     @include glyphBefore($glyph-icon-flag);
 }
+
 .icon-eye-disabled {
     @include glyphBefore($glyph-icon-eye-disabled);
 }
+
 .icon-notebook-page {
     @include glyphBefore($glyph-icon-notebook-page);
 }
+
 .icon-unlocked {
     @include glyphBefore($glyph-icon-unlocked);
 }
+
 .icon-circle {
     @include glyphBefore($glyph-icon-circle);
 }
+
 .icon-draft {
     @include glyphBefore($glyph-icon-draft);
 }
+
 .icon-question-mark {
     @include glyphBefore($glyph-icon-question-mark);
 }
+
 .icon-circle-slash {
     @include glyphBefore($glyph-icon-circle-slash);
 }
+
 .icon-status-poll-check {
     @include glyphBefore($glyph-icon-status-poll-check);
 }
+
 .icon-status-poll-caution {
     @include glyphBefore($glyph-icon-status-poll-caution);
 }
+
 .icon-status-poll-circle-slash {
     @include glyphBefore($glyph-icon-status-poll-circle-slash);
 }
+
 .icon-status-poll-question-mark {
     @include glyphBefore($glyph-icon-status-poll-question-mark);
 }
+
 .icon-status-poll-edit {
     @include glyphBefore($glyph-icon-status-poll-edit);
 }
+
 .icon-stale {
     @include glyphBefore($glyph-icon-stale);
 }
+
 .icon-arrows-right-left {
     @include glyphBefore($glyph-icon-arrows-right-left);
 }
+
 .icon-arrows-up-down {
     @include glyphBefore($glyph-icon-arrows-up-down);
 }
+
 .icon-bullet {
     @include glyphBefore($glyph-icon-bullet);
 }
+
 .icon-calendar {
     @include glyphBefore($glyph-icon-calendar);
 }
+
 .icon-chain-links {
     @include glyphBefore($glyph-icon-chain-links);
 }
+
 .icon-download {
     @include glyphBefore($glyph-icon-download);
 }
+
 .icon-duplicate {
     @include glyphBefore($glyph-icon-duplicate);
 }
+
 .icon-folder-new {
     @include glyphBefore($glyph-icon-folder-new);
 }
+
 .icon-fullscreen-collapse {
     @include glyphBefore($glyph-icon-fullscreen-collapse);
 }
+
 .icon-fullscreen-expand {
     @include glyphBefore($glyph-icon-fullscreen-expand);
 }
+
 .icon-layers {
     @include glyphBefore($glyph-icon-layers);
 }
+
 .icon-line-horz {
     @include glyphBefore($glyph-icon-line-horz);
 }
+
 .icon-magnify {
     @include glyphBefore($glyph-icon-magnify);
 }
+
 .icon-magnify-in {
     @include glyphBefore($glyph-icon-magnify-in);
 }
+
 .icon-magnify-out {
     @include glyphBefore($glyph-icon-magnify-out);
 }
+
 .icon-menu-hamburger {
     @include glyphBefore($glyph-icon-menu-hamburger);
 }
+
 .icon-move {
     @include glyphBefore($glyph-icon-move);
 }
+
 .icon-new-window {
     @include glyphBefore($glyph-icon-new-window);
 }
+
 .icon-paint-bucket {
     @include glyphBefore($glyph-icon-paint-bucket);
 }
+
 .icon-pencil {
     @include glyphBefore($glyph-icon-pencil);
 }
+
 .icon-pencil-in-brackets {
     @include glyphBefore($glyph-icon-pencil-in-brackets);
 }
+
 .icon-play {
     @include glyphBefore($glyph-icon-play);
 }
+
 .icon-pause {
     @include glyphBefore($glyph-icon-pause);
 }
+
 .icon-plot-resource {
     @include glyphBefore($glyph-icon-plot-resource);
 }
+
 .icon-pointer-left {
     @include glyphBefore($glyph-icon-pointer-left);
 }
+
 .icon-pointer-right {
     @include glyphBefore($glyph-icon-pointer-right);
 }
+
 .icon-refresh {
     @include glyphBefore($glyph-icon-refresh);
 }
+
 .icon-save {
     @include glyphBefore($glyph-icon-save);
 }
+
 .icon-save-as {
     @include glyphBefore($glyph-icon-save-as);
 }
+
 .icon-sine {
     @include glyphBefore($glyph-icon-sine);
 }
+
 .icon-font {
     @include glyphBefore($glyph-icon-font);
 }
+
 .icon-thumbs-strip {
     @include glyphBefore($glyph-icon-thumbs-strip);
 }
+
 .icon-two-parts-both {
     @include glyphBefore($glyph-icon-two-parts-both);
 }
+
 .icon-two-parts-one-only {
     @include glyphBefore($glyph-icon-two-parts-one-only);
 }
+
 .icon-resync {
     @include glyphBefore($glyph-icon-resync);
 }
+
 .icon-reset {
     @include glyphBefore($glyph-icon-reset);
 }
+
 .icon-x-in-circle {
     @include glyphBefore($glyph-icon-x-in-circle);
 }
+
 .icon-brightness {
     @include glyphBefore($glyph-icon-brightness);
 }
+
 .icon-contrast {
     @include glyphBefore($glyph-icon-contrast);
 }
+
 .icon-expand {
     @include glyphBefore($glyph-icon-expand);
 }
+
 .icon-list-view {
     @include glyphBefore($glyph-icon-list-view);
 }
+
 .icon-grid-snap-to {
     @include glyphBefore($glyph-icon-grid-snap-to);
 }
+
 .icon-grid-snap-no {
     @include glyphBefore($glyph-icon-grid-snap-no);
 }
+
 .icon-frame-show {
     @include glyphBefore($glyph-icon-frame-show);
 }
+
 .icon-frame-hide {
     @include glyphBefore($glyph-icon-frame-hide);
 }
+
 .icon-import {
     @include glyphBefore($glyph-icon-import);
 }
+
 .icon-export {
     @include glyphBefore($glyph-icon-export);
 }
+
 .icon-font-size {
     @include glyphBefore($glyph-icon-font-size);
 }
+
 .icon-clear-data {
     @include glyphBefore($glyph-icon-clear-data);
 }
+
 .icon-history {
     @include glyphBefore($glyph-icon-history);
 }
+
 .icon-arrow-nav-to-parent {
     @include glyphBefore($glyph-icon-arrow-nav-to-parent);
 }
+
 .icon-crosshair-in-circle {
     @include glyphBefore($glyph-icon-crosshair-in-circle);
 }
+
 .icon-target {
     @include glyphBefore($glyph-icon-target);
 }
+
 .icon-items-collapse {
     @include glyphBefore($glyph-icon-items-collapse);
 }
+
 .icon-items-expand {
     @include glyphBefore($glyph-icon-items-expand);
 }
+
 .icon-3-dots {
     @include glyphBefore($glyph-icon-3-dots);
 }
+
 .icon-grid-on {
     @include glyphBefore($glyph-icon-grid-on);
 }
+
 .icon-grid-off {
     @include glyphBefore($glyph-icon-grid-off);
 }
+
 .icon-camera {
     @include glyphBefore($glyph-icon-camera);
 }
+
 .icon-folders-collapse {
     @include glyphBefore($glyph-icon-folders-collapse);
 }
+
+.icon-multiline {
+    @include glyphBefore($glyph-icon-multiline);
+}
+
+.icon-singleline {
+    @include glyphBefore($glyph-icon-singleline);
+}
+
 .icon-activity {
     @include glyphBefore($glyph-icon-activity);
 }
+
 .icon-activity-mode {
     @include glyphBefore($glyph-icon-activity-mode);
 }
+
 .icon-autoflow-tabular {
     @include glyphBefore($glyph-icon-autoflow-tabular);
 }
+
 .icon-clock {
     @include glyphBefore($glyph-icon-clock);
 }
+
 .icon-database {
     @include glyphBefore($glyph-icon-database);
 }
+
 .icon-database-query {
     @include glyphBefore($glyph-icon-database-query);
 }
+
 .icon-dataset {
     @include glyphBefore($glyph-icon-dataset);
 }
+
 .icon-datatable {
     @include glyphBefore($glyph-icon-datatable);
 }
+
 .icon-dictionary {
     @include glyphBefore($glyph-icon-dictionary);
 }
+
 .icon-folder {
     @include glyphBefore($glyph-icon-folder);
 }
+
 .icon-image {
     @include glyphBefore($glyph-icon-image);
 }
+
 .icon-layout {
     @include glyphBefore($glyph-icon-layout);
 }
+
 .icon-object {
     @include glyphBefore($glyph-icon-object);
 }
+
 .icon-object-unknown {
     @include glyphBefore($glyph-icon-object-unknown);
 }
+
 .icon-packet {
     @include glyphBefore($glyph-icon-packet);
 }
+
 .icon-page {
     @include glyphBefore($glyph-icon-page);
 }
+
 .icon-plot-overlay {
     @include glyphBefore($glyph-icon-plot-overlay);
 }
+
 .icon-plot-stacked {
     @include glyphBefore($glyph-icon-plot-stacked);
 }
+
 .icon-session {
     @include glyphBefore($glyph-icon-session);
 }
+
 .icon-tabular {
     @include glyphBefore($glyph-icon-tabular);
 }
+
 .icon-tabular-lad {
     @include glyphBefore($glyph-icon-tabular-lad);
 }
+
 .icon-tabular-lad-set {
     @include glyphBefore($glyph-icon-tabular-lad-set);
 }
+
 .icon-tabular-realtime {
     @include glyphBefore($glyph-icon-tabular-realtime);
 }
+
 .icon-tabular-scrolling {
     @include glyphBefore($glyph-icon-tabular-scrolling);
 }
+
 .icon-telemetry {
     @include glyphBefore($glyph-icon-telemetry);
 }
+
 .icon-timeline {
     @include glyphBefore($glyph-icon-timeline);
 }
+
 .icon-timer {
     @include glyphBefore($glyph-icon-timer);
 }
+
 .icon-topic {
     @include glyphBefore($glyph-icon-topic);
 }
+
 .icon-box-with-dashed-lines {
     @include glyphBefore($glyph-icon-box-with-dashed-lines);
 }
+
 .icon-summary-widget {
     @include glyphBefore($glyph-icon-summary-widget);
 }
+
 .icon-notebook {
     @include glyphBefore($glyph-icon-notebook);
 }
+
 .icon-tabs-view {
     @include glyphBefore($glyph-icon-tabs-view);
 }
+
 .icon-flexible-layout {
     @include glyphBefore($glyph-icon-flexible-layout);
 }
+
 .icon-generator-telemetry {
     @include glyphBefore($glyph-icon-generator-telemetry);
 }
+
 .icon-generator-events {
     @include glyphBefore($glyph-icon-generator-events);
 }
+
 .icon-gauge {
     @include glyphBefore($glyph-icon-gauge);
 }
+
 .icon-spectra {
     @include glyphBefore($glyph-icon-spectra);
 }
+
 .icon-spectra-telemetry {
     @include glyphBefore($glyph-icon-spectra-telemetry);
 }
+
 .icon-command {
     @include glyphBefore($glyph-icon-command);
 }
+
 .icon-conditional {
     @include glyphBefore($glyph-icon-conditional);
 }
+
 .icon-condition-widget {
     @include glyphBefore($glyph-icon-condition-widget);
 }
+
 .icon-alphanumeric {
     @include glyphBefore($glyph-icon-alphanumeric);
 }
+
 .icon-image-telemetry {
     @include glyphBefore($glyph-icon-image-telemetry);
 }
+
 .icon-telemetry-aggregate {
     @include glyphBefore($glyph-icon-telemetry-aggregate);
 }
+
 .icon-bar-chart {
     @include glyphBefore($glyph-icon-bar-chart);
 }
+
 .icon-map {
     @include glyphBefore($glyph-icon-map);
 }
+
 .icon-plan {
     @include glyphBefore($glyph-icon-plan);
 }
+
 .icon-timelist {
     @include glyphBefore($glyph-icon-timelist);
 }
+
 .icon-notebook-shift-log {
     @include glyphBefore($glyph-icon-notebook-shift-log);
 }
+
 .icon-plot-scatter {
     @include glyphBefore($glyph-icon-plot-scatter);
 }
@@ -546,18 +720,23 @@
 .icon-filter-12px {
     @include glyphBefore($glyph-icon-filter, 'symbolsfont-12px');
 }
+
 .icon-filter-outline-12px {
     @include glyphBefore($glyph-icon-filter-outline, 'symbolsfont-12px');
 }
+
 .icon-crosshair-12px {
     @include glyphBefore($glyph-icon-crosshair, 'symbolsfont-12px');
 }
+
 .icon-folder-12px {
     @include glyphBefore($glyph-icon-folder, 'symbolsfont-12px');
 }
+
 .icon-list-view-12px {
     @include glyphBefore($glyph-icon-list-view, 'symbolsfont-12px');
 }
+
 .icon-grippy-12px {
     @include glyphBefore($glyph-icon-grippy, 'symbolsfont-12px');
 }
@@ -566,159 +745,211 @@
 .bg-icon-alert-rect {
     @include glyphBg($bg-icon-alert-rect);
 }
+
 .bg-icon-alert-triangle {
     @include glyphBg($bg-icon-alert-triangle);
 }
+
 .bg-icon-bell {
     @include glyphBg($bg-icon-bell);
 }
+
 .bg-icon-info {
     @include glyphBg($bg-icon-info);
 }
+
 .bg-icon-plus {
     @include glyphBg($bg-icon-plus);
 }
+
 .bg-icon-grippy-ew {
     @include glyphBg($bg-icon-grippy-ew);
 }
+
 .bg-icon-chain-links {
     @include glyphBg($bg-icon-chain-links);
 }
+
 .bg-icon-clock {
     @include glyphBg($bg-icon-clock);
 }
+
 .bg-icon-database {
     @include glyphBg($bg-icon-database);
 }
+
 .bg-icon-database-query {
     @include glyphBg($bg-icon-database-query);
 }
+
 .bg-icon-dataset {
     @include glyphBg($bg-icon-dataset);
 }
+
 .bg-icon-datatable {
     @include glyphBg($bg-icon-datatable);
 }
+
 .bg-icon-dictionary {
     @include glyphBg($bg-icon-dictionary);
 }
+
 .bg-icon-folder {
     @include glyphBg($bg-icon-folder);
 }
+
 .bg-icon-image {
     @include glyphBg($bg-icon-image);
 }
+
 .bg-icon-layout {
     @include glyphBg($bg-icon-layout);
 }
+
 .bg-icon-object {
     @include glyphBg($bg-icon-object);
 }
+
 .bg-icon-object-unknown {
     @include glyphBg($bg-icon-object-unknown);
 }
+
 .bg-icon-packet {
     @include glyphBg($bg-icon-packet);
 }
+
 .bg-icon-page {
     @include glyphBg($bg-icon-page);
 }
+
 .bg-icon-plot-overlay {
     @include glyphBg($bg-icon-plot-overlay);
 }
+
 .bg-icon-plot-stacked {
     @include glyphBg($bg-icon-plot-stacked);
 }
+
 .bg-icon-session {
     @include glyphBg($bg-icon-session);
 }
+
 .bg-icon-tabular {
     @include glyphBg($bg-icon-tabular);
 }
+
 .bg-icon-tabular-lad {
     @include glyphBg($bg-icon-tabular-lad);
 }
+
 .bg-icon-tabular-lad-set {
     @include glyphBg($bg-icon-tabular-lad-set);
 }
+
 .bg-icon-tabular-scrolling {
     @include glyphBg($bg-icon-tabular-scrolling);
 }
+
 .bg-icon-telemetry {
     @include glyphBg($bg-icon-telemetry);
 }
+
 .bg-icon-timeline {
     @include glyphBg($bg-icon-timeline);
 }
+
 .bg-icon-timer {
     @include glyphBg($bg-icon-timer);
 }
+
 .bg-icon-box-with-dashed-lines {
     @include glyphBg($bg-icon-box-with-dashed-lines);
 }
+
 .bg-icon-summary-widget {
     @include glyphBg($bg-icon-summary-widget);
 }
+
 .bg-icon-notebook {
     @include glyphBg($bg-icon-notebook);
 }
+
 .bg-icon-tabs-view {
     @include glyphBg($bg-icon-tabs-view);
 }
+
 .bg-icon-flexible-layout {
     @include glyphBg($bg-icon-flexible-layout);
 }
+
 .bg-icon-generator-telemetry {
     @include glyphBg($bg-icon-generator-telemetry);
 }
+
 .bg-icon-generator-events {
     @include glyphBg($bg-icon-generator-events);
 }
+
 .bg-icon-gauge {
     @include glyphBg($bg-icon-gauge);
 }
+
 .bg-icon-spectra {
     @include glyphBg($bg-icon-spectra);
 }
+
 .bg-icon-spectra-telemetry {
     @include glyphBg($bg-icon-spectra-telemetry);
 }
+
 .bg-icon-command {
     @include glyphBg($bg-icon-command);
 }
+
 .bg-icon-conditional {
     @include glyphBg($bg-icon-conditional);
 }
+
 .bg-icon-condition-widget {
     @include glyphBg($bg-icon-condition-widget);
 }
+
 .bg-icon-bar-chart {
     @include glyphBg($bg-icon-bar-chart);
 }
+
 .bg-icon-map {
     @include glyphBg($bg-icon-map);
 }
+
 .bg-icon-plan {
     @include glyphBg($bg-icon-plan);
 }
+
 .bg-icon-timelist {
     @include glyphBg($bg-icon-timelist);
 }
+
 .bg-icon-plot-scatter {
     @include glyphBg($bg-icon-plot-scatter);
 }
+
 .bg-icon-notebook-shift-log {
     @include glyphBg($bg-icon-notebook-shift-log);
 }
+
 .bg-icon-telemetry-aggregate {
     @include glyphBg($bg-icon-telemetry-aggregate);
 }
+
 .bg-icon-trash {
     @include glyphBg($bg-icon-trash);
 }
+
 .bg-icon-eye-open {
     @include glyphBg($bg-icon-eye-open);
 }
+
 .bg-icon-camera {
     @include glyphBg($bg-icon-camera);
 }

src/styles/fonts/Open-MCT-Symbols-16px.svg

@@ -123,6 +123,8 @@
 <glyph unicode="&#xea39;" glyph-name="icon-grid-off" d="M256 344.6l128 157.6v9.8h8l104 128h-112v256h-128v-256h-256v-128h256v-167.4zM184 256h-184v-128h80l104 128zM768 423.4l-128-157.6v-9.8h-8l-104-128h112v-256h128v256h256v128h-256v167.4zM840 512h184v128h-80l-104-128zM832 896l-832-1024h192l832 1024h-192z" />
 <glyph unicode="&#xea3a;" glyph-name="icon-camera" d="M896 640h-128l-128 256h-256l-128-256h-128c-70.601-0.227-127.773-57.399-128-127.978v-512.022c0.227-70.601 57.399-127.773 127.978-128h768.022c70.601 0.227 127.773 57.399 128 127.978v512.022c-0.227 70.601-57.399 127.773-127.978 128h-0.022zM512 32c-141.385 0-256 114.615-256 256s114.615 256 256 256c141.385 0 256-114.615 256-256v0c0-141.385-114.615-256-256-256v0z" />
 <glyph unicode="&#xea3b;" glyph-name="icon-folders-collapse" d="M896 576v-448c-0.215-70.606-57.394-127.785-127.979-128h-576.021c0.215-70.606 57.394-127.785 127.979-128h576.021c70.606 0.215 127.785 57.394 128 127.979v448.021c-0.215 70.606-57.394 127.785-127.979 128h-0.021zM832 192v448c-0.215 70.606-57.394 127.785-127.979 128h-192.021l-101.5 82.74c-24.88 24.9-74.040 45.26-109.24 45.26h-237.26c-35.305-0.102-63.898-28.695-64-63.99v-640.010c0.215-70.606 57.394-127.785 127.979-128h576.021c70.606 0.215 127.785 57.394 128 127.979v0.021zM128 252v516l256-260z" />
+<glyph unicode="&#xea3c;" glyph-name="icon-multiline" d="M832.4 767.4c22.8 0 38-11.8 45-19 7-7 19-22.4 19-45v-640c0-22.8-11.8-38-19-45-7-7-22.4-19-45-19h-640c-22.8 0-38 11.8-45 19-7 7-19 22.4-19 45v640c0 22.8 11.8 38 19 45 7 7 22.4 19 45 19h640zM832.4 895.4h-640c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h640c105.6 0 192 86.4 192 192v640c0 105.6-86.4 192-192 192v0zM256.4 575.4h512v-128h-512v128zM384.4 319.4h384v-128h-384v128z" />
+<glyph unicode="&#xea3d;" glyph-name="icon-singleline" d="M832.4 895.4h-640c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h640c105.6 0 192 86.4 192 192v640c0 105.6-86.4 192-192 192zM896.4 447.4h-512v-128h512v-256c0-22.8-11.8-38-19-45-7-7-22.4-19-45-19h-640c-22.8 0-38 11.8-45 19-7 7-19 22.4-19 45v640c0 22.8 11.8 38 19 45 7 7 22.4 19 45 19h640c22.8 0 38-11.8 45-19 7-7 19-22.4 19-45v-256z" />
 <glyph unicode="&#xeb00;" glyph-name="icon-activity" d="M576 832h-256l320-320h-290.256c-44.264 76.516-126.99 128-221.744 128h-128v-512h128c94.754 0 177.48 51.484 221.744 128h290.256l-320-320h256l448 448-448 448z" />
 <glyph unicode="&#xeb01;" glyph-name="icon-activity-mode" d="M512 896c-214.8 0-398.8-132.4-474.8-320h90.8c56.8 0 108-24.8 143-64h241l-192 192h256l320-320-320-320h-256l192 192h-241c-35-39.2-86.2-64-143-64h-90.8c76-187.6 259.8-320 474.8-320 282.8 0 512 229.2 512 512s-229.2 512-512 512z" />
 <glyph unicode="&#xeb02;" glyph-name="icon-autoflow-tabular" d="M192 896c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h64v1024h-64zM384 896h256v-1024h-256v1024zM832 896h-64v-704h256v512c0 105.6-86.4 192-192 192z" />

src/ui/layout/AppLayout.vue

@@ -32,21 +32,25 @@
       class="l-shell__head"
       :class="{
         'l-shell__head--expanded': headExpanded,
-        'l-shell__head--minify-indicators': !headExpanded
+        'l-shell__head--minify-indicators': !headExpanded,
+        'l-shell__head--indicators-single-line': !indicatorsMultiline
       }"
     >
       <CreateButton class="l-shell__create-button" />
       <GrandSearch ref="grand-search" />
-      <StatusIndicators />
+      <StatusIndicators ref="indicatorsComponent" />
       <button
-        class="l-shell__head__collapse-button c-icon-button"
+        class="l-shell__head__button"
-        :class="
+        :class="indicatorsMultilineCssClass"
-          headExpanded
+        :aria-label="indicatorsMultilineLabel"
-            ? 'l-shell__head__collapse-button--collapse'
+        :title="indicatorsMultilineLabel"
-            : 'l-shell__head__collapse-button--expand'
+        @click="toggleIndicatorsMultiline"
-        "
+      ></button>
-        :aria-label="`Click to ${headExpanded ? 'collapse' : 'expand'} items`"
+      <button
-        :title="`Click to ${headExpanded ? 'collapse' : 'expand'} items`"
+        class="l-shell__head__button"
+        :class="headExpanded ? 'icon-items-collapse' : 'icon-items-expand'"
+        :aria-label="`Show ${headExpanded ? 'icon only' : 'icon and name'}`"
+        :title="`Show ${headExpanded ? 'icon only' : 'icon and name'}`"
         @click="toggleShellHead"
       ></button>
       <NotificationBanner />
@@ -167,6 +171,8 @@
 </template>
 
 <script>
+import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue';
+
 import ObjectView from '../components/ObjectView.vue';
 import Inspector from '../inspector/InspectorPanel.vue';
 import Toolbar from '../toolbar/ToolbarContainer.vue';
@@ -181,6 +187,10 @@ import GrandSearch from './search/GrandSearch.vue';
 import NotificationBanner from './status-bar/NotificationBanner.vue';
 import StatusIndicators from './status-bar/StatusIndicators.vue';
 
+const SHELL_HEAD_LOCAL_STORAGE_KEY = 'openmct-shell-head';
+const DEFAULT_HEAD_EXPANDED = true;
+const DEFAULT_INDICATORS_MULTILINE = true;
+
 export default {
   components: {
     Inspector,
@@ -198,13 +208,120 @@ export default {
     RecentObjectsList
   },
   inject: ['openmct'],
-  data: function () {
+  setup() {
-    let storedHeadProps = window.localStorage.getItem('openmct-shell-head');
+    let resizeObserver;
-    let headExpanded = true;
+    let element;
-    if (storedHeadProps) {
+
-      headExpanded = JSON.parse(storedHeadProps).expanded;
+    const storedHeadProps = localStorage.getItem(SHELL_HEAD_LOCAL_STORAGE_KEY);
+    const storedHeadPropsObject = JSON.parse(storedHeadProps);
+    const storedHeadExpanded = storedHeadPropsObject?.expanded;
+    const storedIndicatorsMultiline = storedHeadPropsObject?.multiline;
+
+    // template ref of StatusIndicators component
+    const indicatorsComponent = ref(null);
+
+    const width = ref(null);
+    const scrollWidth = ref(null);
+    const headExpanded = ref(storedHeadExpanded ?? DEFAULT_HEAD_EXPANDED);
+    const indicatorsMultiline = ref(storedIndicatorsMultiline ?? DEFAULT_INDICATORS_MULTILINE);
+
+    const isOverflowing = computed(() => scrollWidth.value > width.value);
+    const indicatorsMultilineCssClass = computed(() => {
+      const multilineClass = indicatorsMultiline.value ? 'icon-singleline' : 'icon-multiline';
+      const overflowingClass =
+        isOverflowing.value && !indicatorsMultiline.value
+          ? 'c-button c-button--major'
+          : 'c-icon-button';
+      return `${multilineClass} ${overflowingClass}`;
+    });
+    const indicatorsMultilineLabel = computed(() => {
+      return `Display as ${indicatorsMultiline.value ? 'single line' : 'multiple lines'}`;
+    });
+
+    const initialHeadProps = JSON.stringify({
+      expanded: headExpanded.value,
+      multiline: indicatorsMultiline.value
+    });
+
+    if (initialHeadProps !== storedHeadProps) {
+      localStorage.setItem(SHELL_HEAD_LOCAL_STORAGE_KEY, initialHeadProps);
     }
 
+    onMounted(() => {
+      resizeObserver = new ResizeObserver((entries) => {
+        width.value = entries[0].target.clientWidth;
+        scrollWidth.value = entries[0].target.scrollWidth;
+      });
+
+      // indicatorsContainer is a template ref inside of indicatorsComponent
+      element = indicatorsComponent.value.$refs.indicatorsContainer;
+
+      if (!indicatorsMultiline.value) {
+        observeIndicatorsOverflow();
+      }
+    });
+
+    onUnmounted(() => {
+      resizeObserver.disconnect();
+    });
+
+    function observeIndicatorsOverflow() {
+      resizeObserver.observe(element);
+    }
+
+    function unObserveIndicatorsOverflow() {
+      resizeObserver.unobserve(element);
+    }
+
+    function checkIndicatorsElementWidths() {
+      if (!indicatorsMultiline.value) {
+        width.value = element.clientWidth;
+        scrollWidth.value = element.scrollWidth;
+      }
+    }
+
+    async function toggleShellHead() {
+      headExpanded.value = !headExpanded.value;
+      setLocalStorageShellHead();
+
+      // nextTick is used because the element width on toggle is updated using css
+      await nextTick();
+      checkIndicatorsElementWidths();
+    }
+
+    function toggleIndicatorsMultiline() {
+      indicatorsMultiline.value = !indicatorsMultiline.value;
+      setLocalStorageShellHead();
+
+      if (indicatorsMultiline.value) {
+        unObserveIndicatorsOverflow();
+      } else {
+        observeIndicatorsOverflow();
+      }
+    }
+
+    function setLocalStorageShellHead() {
+      localStorage.setItem(
+        SHELL_HEAD_LOCAL_STORAGE_KEY,
+        JSON.stringify({
+          expanded: headExpanded.value,
+          multiline: indicatorsMultiline.value
+        })
+      );
+    }
+
+    return {
+      indicatorsComponent,
+      isOverflowing,
+      headExpanded,
+      indicatorsMultiline,
+      indicatorsMultilineCssClass,
+      indicatorsMultilineLabel,
+      toggleIndicatorsMultiline,
+      toggleShellHead
+    };
+  },
+  data() {
     return {
       fullScreen: false,
       conductorComponent: undefined,
@@ -213,7 +330,6 @@ export default {
       actionCollection: undefined,
       triggerSync: false,
       triggerReset: false,
-      headExpanded,
       isResizing: false,
       disableClearButton: false
     };
@@ -261,16 +377,6 @@ export default {
         document.msExitFullscreen();
       }
     },
-    toggleShellHead() {
-      this.headExpanded = !this.headExpanded;
-
-      window.localStorage.setItem(
-        'openmct-shell-head',
-        JSON.stringify({
-          expanded: this.headExpanded
-        })
-      );
-    },
     fullScreenToggle() {
       if (this.fullScreen) {
         this.fullScreen = false;

src/ui/layout/layout.scss

@@ -213,27 +213,14 @@
     align-items: center;
     background: $colorHeadBg;
     display: grid;
-    grid-template-columns: min-content 1fr 3fr repeat(3, min-content);
+    grid-template-columns: min-content 1fr 3fr repeat(4, min-content);
     grid-column-gap: $interiorMargin;
-    min-height: 34px;
     padding: $interiorMargin $interiorMargin + 2;
 
-    .l-shell__head__collapse-button {
+    .l-shell__head__button {
       color: $colorBtnMajorBg;
       flex: 0 0 auto;
       font-size: 0.9em;
-
-      &--collapse {
-        &:before {
-          content: $glyph-icon-items-collapse;
-        }
-      }
-
-      &--expand {
-        &:before {
-          content: $glyph-icon-items-expand;
-        }
-      }
     }
 
     &-section {
@@ -271,14 +258,21 @@
   }
 
   &__indicators {
+    // Style as multiline by default
+    display: flex;
     flex-wrap: wrap;
     font-size: 11px;
+    min-height: 25px;
     justify-content: flex-end;
 
-    .l-shell__head--expanded & {
+    .l-shell__head--indicators-single-line & {
-      // Force elements to wrap down when width constrained
+      flex-wrap: nowrap;
-      height: 24px;
+      justify-content: flex-start; // Overflow detection doesn't work with flex-end.
       overflow: hidden;
+
+      > *:first-child {
+        margin-left: auto; // Mimics justify-content: flex-end when in single line mode.
+      }
     }
   }
 

src/ui/layout/status-bar/StatusIndicators.vue

@@ -17,7 +17,7 @@
  at runtime from the About dialog for additional information.
 -->
 <template>
-  <div class="l-shell__head-section l-shell__indicators">
+  <div ref="indicatorsContainer" class="l-shell__head-section l-shell__indicators">
     <component
       :is="indicator.value.vueComponent"
       v-for="indicator in sortedIndicators"
@@ -28,9 +28,15 @@
 </template>
 
 <script>
-import { shallowRef } from 'vue';
+import { defineExpose, ref, shallowRef } from 'vue';
+
 export default {
   inject: ['openmct'],
+  setup() {
+    const indicatorsContainer = ref(null);
+
+    defineExpose({ indicatorsContainer });
+  },
   data() {
     return {
       indicators: this.openmct.indicators.getIndicatorObjectsByPriority().map(shallowRef)