Only show marquee for selected item (#7180)

* only show marquee for selected item

* Revert "only show marquee for selected item"

This reverts commit d17af210c2.

* revert change made in #6767

* create framework for displayLayout visual test

* WIP create display layout for test

* only show marquee for selected

* fix selection of object in nested layout

* fix grid and code cleanup

* add child layouts side by side

* code cleanup

* externalize setup for reuse in multiple tests

* write marquee and grid tests

* fix object in layout locator

* fix nested layout selector

* add aria label to layouts

* fix layout locator

* add jsdoc for test setup function

* make test more efficient

* cleanup and linting

* update locator

* update locators

---------

Co-authored-by: John Hill <john.c.hill@nasa.gov>

src/plugins/displayLayout/components/DisplayLayout.vue

@@ -27,6 +27,7 @@
       'is-multi-selected': selectedLayoutItems.length > 1,
       'allow-editing': isEditing
     }"
+    :aria-label="`${domainObject.name} Layout`"
     @dragover="handleDragOver"
     @click.capture="bypassSelection"
     @drop="handleDrop"

src/plugins/displayLayout/components/display-layout.scss

@@ -1,4 +1,4 @@
-@mixin displayMarquee($c) {
+@mixin displayMarquee() {
   > .c-frame-edit {
     // All other frames
     //@include test($c, 0.4);
@@ -11,12 +11,29 @@
   }
 }
 
+@mixin displayGrid() {
+  background: $editUIGridColorBg;
+
+  > [class*='__dimensions'] {
+    display: block;
+  }
+
+  > [class*='grid-holder'] {
+    display: block;
+  }
+}
+
 .l-layout {
   @include abs();
   display: flex;
   flex-direction: column;
   overflow: auto;
 
+  &__grid-holder,
+  &__dimensions {
+    display: none;
+  }
+
   &__dimensions {
     $b: 1px dashed $editDimensionsColor;
     border-right: $b;
@@ -45,35 +62,20 @@
   .l-shell__main-container {
     [s-selected],
     [s-selected-parent] {
-      // Display grid and allow edit marquee to display in main layout holder when editing
+      // Display grid in main layout holder when editing
       > .l-layout {
-        background: $editUIGridColorBg;
-
-        > [class*='__dimensions'] {
-          display: block;
-        }
-
-        > [class*='__grid-holder'] {
-          display: block;
-        }
+        @include displayGrid();
       }
     }
   }
 
   .l-layout__frame {
-    &[s-selected]:not([multi-select='true']),
     &[s-selected-parent] {
-      // Display grid and allow edit marquee to display in nested layouts when editing
-      > * > * > .l-layout.allow-editing {
+      // Display grid in nested layouts when editing
+      > * > * > * > .l-layout.allow-editing {
         box-shadow: inset $editUIGridColorFg 0 0 2px 1px;
-
-        > [class*='__dimensions'] {
-          display: block;
-        }
-
-        > [class*='grid-holder'] {
-          display: block;
-        }
+      
+        @include displayGrid();
       }
     }
   }
@@ -82,11 +84,11 @@
   *[s-selected-parent] {
     > .l-layout {
       // When main shell layout is the parent
-      @include displayMarquee(deeppink); // TEMP
+      @include displayMarquee();
     }
-    > * > * > * {
+    > * > * > * > * {
       // When a sub-layout is the parent
-      @include displayMarquee(blue);
+      @include displayMarquee();
     }
   }
 }

src/plugins/displayLayout/components/edit-marquee.scss

@@ -1,5 +1,6 @@
 .c-frame-edit {
   // In Layouts, this is the editing rect and handles
+  display: none; // Set to display: block in display-layout.scss
   pointer-events: none;
   @include abs();
   border: $editMarqueeBorder;