Improvements to reduce repainting

e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js

@@ -24,7 +24,7 @@
 Testsuite for plot autoscale.
 */
 
-const { selectInspectorTab } = require('../../../../appActions');
+const { createDomainObjectWithDefaults, selectInspectorTab } = require('../../../../appActions');
 const { test, expect } = require('../../../../pluginFixtures');
 test.use({
     viewport: {
@@ -34,7 +34,7 @@ test.use({
 });
 
 test.describe('Autoscale', () => {
-    test('User can set autoscale with a valid range @snapshot', async ({ page, openmctConfig }) => {
+    test.only('User can set autoscale with a valid range @snapshot', async ({ page, openmctConfig }) => {
         const { myItemsFolderName } = openmctConfig;
 
         //This is necessary due to the size of the test suite.
@@ -100,6 +100,9 @@ test.describe('Autoscale', () => {
         await canvas.hover({trial: true});
 
         expect.soft(await canvas.screenshot()).toMatchSnapshot('autoscale-canvas-panned.png', { animations: 'disabled' });
+
+        await createDisplayLayoutWith2OverlayPlots(page);
+
     });
 });
 
@@ -123,48 +126,46 @@ async function setTimeRange(page, start = '2022-03-29 22:00:00.000Z', end = '202
 /**
  * @param {import('@playwright/test').Page} page
  * @param {string} myItemsFolderName
+ * @returns {Promise<CreatedObjectInfo>} An object containing information about the newly created domain object.
  */
 async function createSinewaveOverlayPlot(page, myItemsFolderName) {
-    // click create button
-    await page.locator('button:has-text("Create")').click();
-
-    // add overlay plot with defaults
-    await page.locator('li[role="menuitem"]:has-text("Overlay Plot")').click();
-    await Promise.all([
-        page.waitForNavigation(),
-        page.locator('button:has-text("OK")').click(),
-        //Wait for Save Banner to appear1
-        page.waitForSelector('.c-message-banner__message')
-    ]);
-    //Wait until Save Banner is gone
-    await page.locator('.c-message-banner__close-button').click();
-    await page.waitForSelector('.c-message-banner__message', { state: 'detached'});
-
-    // save (exit edit mode)
-    await page.locator('text=Snapshot Save and Finish Editing Save and Continue Editing >> button').nth(1).click();
-    await page.locator('text=Save and Finish Editing').click();
-
-    // click create button
-    await page.locator('button:has-text("Create")').click();
-
-    // add sine wave generator with defaults
-    await page.locator('li[role="menuitem"]:has-text("Sine Wave Generator")').click();
-    await Promise.all([
-        page.waitForNavigation(),
-        page.locator('button:has-text("OK")').click(),
-        //Wait for Save Banner to appear1
-        page.waitForSelector('.c-message-banner__message')
-    ]);
-    //Wait until Save Banner is gone
-    await page.locator('.c-message-banner__close-button').click();
-    await page.waitForSelector('.c-message-banner__message', { state: 'detached'});
-
-    // focus the overlay plot
-    await page.locator(`text=Open MCT ${myItemsFolderName} >> span`).nth(3).click();
-    await Promise.all([
-        page.waitForNavigation(),
-        page.locator('text=Unnamed Overlay Plot').first().click()
-    ]);
+
+    //Create overlayPlot
+    let overlayPlot = await createDomainObjectWithDefaults(page, {
+        type: 'Overlay Plot'
+    });
+
+    //Create sinewaveObject
+    let sineWaveObject = await createDomainObjectWithDefaults(page, {
+        type: 'Sine Wave Generator'
+    });
+
+    //Add sinewaveObject into overlayPlot
+    await page.pause();
+
+    return {
+        overlayPlot: overlayPlot.name
+    };
+}
+
+/**
+ * 
+ * @param {import('@playwright/test').Page} page
+ * @param {string} myItemsFolderName
+ * @returns {Promise<CreatedObjectInfo>} An object containing information about the newly created domain object.
+ */
+async function createDisplayLayoutWith2OverlayPlots(page, myItemsFolderName) {
+
+    //Create overlayPlot
+    let overlayPlot = await createDomainObjectWithDefaults(page, {
+        type: 'Display Layout'
+    });
+
+    //Add 2 createSinewaveOverlayPlot to this display
+
+    return {
+        overlayPlot: overlayPlot.name
+    };
 }
 
 /**

e2e/tests/functional/plugins/plot/stackedPlot.e2e.spec.js

@@ -115,6 +115,9 @@ test.describe('Stacked Plot', () => {
         await expect(stackedPlotItem2).toHaveAttribute('aria-label', `Stacked Plot Item ${swgC.name}`);
         await expect(stackedPlotItem3).toHaveAttribute('aria-label', `Stacked Plot Item ${swgA.name}`);
 
+        // collapse inspector
+        await page.locator('.l-shell__pane-inspector .l-pane__collapse-button').click();
+
         // Save (exit edit mode)
         await page.locator('button[title="Save"]').click();
         await page.locator('li[title="Save and Finish Editing"]').click();

e2e/tests/performance/notebook.perf.spec.js

@@ -138,6 +138,7 @@ test.describe('Performance tests', () => {
         await page.evaluate(() => window.performance.mark("notebook-search-processed"));
 
         //Clear Search
+        await page.locator('.c-search.c-notebook__search .c-search__input').hover();
         await page.locator('.c-search.c-notebook__search .c-search__clear-input').click();
         await page.evaluate(() => window.performance.mark("notebook-search-processed"));
 

src/api/overlays/components/overlay-component.scss

@@ -81,7 +81,7 @@
     }
 
     .c-object-label__name {
-        filter: $objectLabelNameFilter;
+        color: $objectLabelNameColorFg;
     }
 }
 

src/plugins/condition/components/inspector/conditional-styles.scss

@@ -80,11 +80,9 @@
         .is-editing & {
             cursor: pointer;
             pointer-events: initial;
-            transition: $transOut;
 
             &:hover {
                 background: rgba($colorBodyFg, 0.1);
-                transition: $transIn;
             }
 
             &.is-current {

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

@@ -86,7 +86,7 @@
     *[s-selected-parent] {
         > .l-layout {
             // When main shell layout is the parent
-            @include displayMarquee(deeppink);
+            @include displayMarquee(deeppink); // TEMP
         }
         > * > * > * {
             // When a sub-layout is the parent

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

@@ -45,18 +45,15 @@
 
     // Has-complex-content objects
     .c-so-view.has-complex-content {
-        transition: $transOut;
-        transition-delay: $moveBarOutDelay;
+        @include transition($prop: transform, $dur: $transOutTime, $delay: $moveBarOutDelay);
 
         > .c-so-view__local-controls {
-            transition: transform 250ms ease-in-out;
-            transition-delay: $moveBarOutDelay;
+            @include transition($prop: transform, $dur: 250ms, $delay: $moveBarOutDelay);
         }
 
         + .c-frame__move-bar {
             display: none;
         }
-
     }
 
     .l-layout {
@@ -65,13 +62,11 @@
             > .l-layout__frame {
                 > .c-so-view.has-complex-content {
                     > .c-so-view__local-controls {
-                        transition: transform $transOutTime ease-in-out;
-                        transition-delay: $moveBarOutDelay;
+                        @include transition($prop: transform, $dur: $transOutTime, $delay: $moveBarOutDelay);
                     }
 
                     + .c-frame__move-bar {
-                        transition: $transOut;
-                        transition-delay: $moveBarOutDelay;
+                        @include transition($prop: height, $delay: $moveBarOutDelay);
                         @include userSelectNone();
                         background: $editFrameMovebarColorBg;
                         box-shadow: rgba(black, 0.3) 0 2px;
@@ -103,18 +98,17 @@
 
                 &:hover {
                     > .c-so-view.has-complex-content {
-                        transition: $transIn;
+                        transition: $transInTransform;
                         transition-delay: 0s;
 
                         > .c-so-view__local-controls {
                             transform: translateY($editFrameMovebarH);
-                            transition: transform $transInTime ease-in-out;
+                            @include transition(height, $transOutTime);
                             transition-delay: 0s;
                         }
 
                         + .c-frame__move-bar {
-                            transition: $transIn;
-                            transition-delay: 0s;
+                            @include transition(height);
                             height: $editFrameMovebarH;
                         }
                     }

src/plugins/flexibleLayout/components/flexible-layout.scss

@@ -244,11 +244,10 @@
         display: flex;
         flex-direction: column;
         flex: 0 0 ($margin * 2) + $size;
-        transition: $transOut;
 
         &:before {
             // The visible resize line
-            background: $editUIColor;
+            background-color: $editUIColor;
             content: '';
             display: block;
             flex: 1 1 auto;
@@ -270,10 +269,9 @@
         }
 
         &:hover {
-            transition: $transOut;
             &:before {
                 // The visible resize line
-                background: $editUIColorHov;
+                background-color: $editUIColorHov;
             }
         }
     }

src/plugins/folderView/components/grid-view.scss

@@ -37,6 +37,7 @@
 .c-grid-item {
     // Mobile-first
     @include button($bg: $colorItemBg, $fg: $colorItemFg);
+    @include cControlHov();
     cursor: pointer;
     display: flex;
     padding: $interiorMarginLg;
@@ -142,15 +143,10 @@
     body.desktop & {
         $transOutMs: 300ms;
         flex-flow: column nowrap;
-        transition: $transOutMs ease-in-out;
 
         &:hover {
-            filter: $filterItemHoverFg;
-            transition: $transIn;
-
             .c-grid-item__type-icon {
                 transform: scale(1.1);
-                transition: $transInBounce;
             }
         }
 
@@ -171,8 +167,6 @@
             font-size: floor(math.div($gridItemDesk, 3));
             margin: $interiorMargin 22.5% $interiorMargin * 3 22.5%;
             order: 2;
-            transform-origin: center;
-            transition: all $transOutMs ease-in-out;
         }
 
         &__details {

src/plugins/imagery/components/imagery-view.scss

@@ -495,7 +495,6 @@
         &:hover {
             z-index: 2;
 
-            filter: brightness(1) contrast(1) !important;
             [class*='__image-handle'] {
                 background-color: $colorBodyFg;
             }
@@ -519,9 +518,4 @@
         display: block;
         align-self: flex-end;
     }
-
-    &:hover div.c-imagery-tsv__image-wrapper {
-        // TODO CH: convert to theme constants
-        filter: brightness(0.5) contrast(0.7);
-    }
 }