Improvements to reduce repainting (#5876)

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/functional/search.e2e.spec.js

@@ -63,7 +63,7 @@ test.describe('Grand Search', () => {
         await expect(page.locator('[aria-label="Search Result"] >> nth=0')).toContainText(`Clock A ${myItemsFolderName} Red Folder Blue Folder`);
 
         // Click [aria-label="OpenMCT Search"] a >> nth=0
-        await page.locator('[aria-label="OpenMCT Search"] a').first().click();
+        await page.locator('[aria-label="Search Result"] >> nth=0').click();
         await expect(page.locator('[aria-label="Search Result"] >> nth=0')).toBeHidden();
 
         // Fill [aria-label="OpenMCT Search"] input[type="search"]

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"));
 

e2e/tests/visual/plan.visual.spec.js

@@ -20,11 +20,11 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-const { test } = require('../../../pluginFixtures');
+const { test } = require('../../pluginFixtures');
-const { setBoundsToSpanAllActivities } = require('../../../helper/planningUtils');
+const { setBoundsToSpanAllActivities } = require('../../helper/planningUtils');
-const { createDomainObjectWithDefaults, createPlanFromJSON } = require('../../../appActions');
+const { createDomainObjectWithDefaults, createPlanFromJSON } = require('../../appActions');
 const percySnapshot = require('@percy/playwright');
-const examplePlanLarge = require('../../../test-data/ExamplePlan_Large.json');
+const examplePlanLarge = require('../../test-data/examplePlans/ExamplePlan_Large.json');
 
 test.describe('Visual - Planning', () => {
     test.beforeEach(async ({ page }) => {

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;
+        @include transition($prop: transform, $dur: $transOutTime, $delay: $moveBarOutDelay);
-        transition-delay: $moveBarOutDelay;
 
         > .c-so-view__local-controls {
-            transition: transform 250ms ease-in-out;
+            @include transition($prop: transform, $dur: 250ms, $delay: $moveBarOutDelay);
-            transition-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;
+                        @include transition($prop: transform, $dur: $transOutTime, $delay: $moveBarOutDelay);
-                        transition-delay: $moveBarOutDelay;
                     }
 
                     + .c-frame__move-bar {
-                        transition: $transOut;
+                        @include transition($prop: height, $delay: $moveBarOutDelay);
-                        transition-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;
+                            @include transition(height);
-                            transition-delay: 0s;
                             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);
-    }
 }

src/plugins/inspectorViews/annotations/tags/tags.scss

@@ -13,6 +13,24 @@
 
 /******************************* TAGS */
 .c-tag {
+/* merge conflict in 5247
+    border-radius: 10px; //TODO: convert to theme constant
+    display: inline-flex;
+    padding: 1px 10px; //TODO: convert to theme constant
+
+    > * + * {
+        margin-left: $interiorMargin;
+    }
+
+    &__remove-btn {
+        color: inherit !important;
+        display: none;
+        opacity: 0;
+        overflow: hidden;
+        padding: 1px !important;
+        @include transition(opacity);
+        width: 0;
+ */
   border-radius: $tagBorderRadius;
   display: inline-flex;
   overflow: hidden;
@@ -28,15 +46,15 @@
     transition: $transIn;
     width: 0;
 
-    &:hover {
+        &:hover {
-      opacity: 1;
+            opacity: 1;
+        }
     }
-  }
 
-  /* SEARCH RESULTS */
+    /* SEARCH RESULTS */
-  &.--is-not-search-match {
+    &.--is-not-search-match {
-    opacity: 0.5;
+        opacity: 0.5;
-  }
+    }
 }
 
 .c-tag-holder {
@@ -51,6 +69,31 @@
 
 /******************************* TAGS IN INSPECTOR / TAG SELECTION & APPLICATION */
 .c-tag-applier {
+/* merge conflict in fix-repaint-5247
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+
+    > * + * {
+        margin-left: $interiorMargin;
+    }
+
+    &__add-btn {
+        &:before {
+            font-size: 0.9em;
+        }
+    }
+
+    .c-tag {
+        flex-direction: row;
+        align-items: center;
+        padding-right: 3px !important;
+
+        &__remove-btn {
+            display: block;
+        }
+*/
   $tagApplierPadding: 3px 6px;
   @include tagHolder;
   grid-column: 1 / 3;
@@ -81,7 +124,6 @@
       min-height: auto !important;
       padding: $tagApplierPadding;
     }
-  }
 }
 
 .c-tag-btn__label {
@@ -90,6 +132,21 @@
 
 /******************************* HOVERS */
 .has-tag-applier {
+/* merge conflict in fix-repaint-5247
+    $p: opacity, width;
+    // Apply this class to all components that should trigger tag removal btn on hover
+    .c-tag__remove-btn {
+        @include transition($prop: $p, $dur: $transOutTime);
+    }
+
+    &:hover {
+        .c-tag__remove-btn {
+            width: 1.1em;
+            opacity: 0.7;
+        }
+    }
+}
+*/
   // Apply this class to all components that should trigger tag removal btn on hover
    &:hover {
      .c-tag {
@@ -120,3 +177,4 @@
      }
    }
  }
+}

src/plugins/inspectorViews/properties/location.scss

@@ -26,12 +26,13 @@
     flex-wrap: wrap;
 
     &__item {
+        $m: 1px;
         cursor: pointer;
-        margin: 0 $interiorMarginSm $interiorMarginSm 0;
+        margin: 0 $m $m 0;
 
         .c-object-label {
-            padding: 0;
+            border-radius: $smallCr;
-            transition: $transOut;
+            padding: 2px 3px;
 
             &__type-icon {
                 width: auto;
@@ -39,9 +40,8 @@
                 min-width: auto;
             }
 
-            &:hover {
+            @include hover() {
-                transition: $transIn;
+                background: $colorItemTreeHoverBg;
-                filter: $filterHov;
             }
         }
     }

src/plugins/notebook/components/sidebar.scss

@@ -76,13 +76,6 @@
     }
 
     .c-list__item {
-        @include hover() {
-            [class*="__menu-indicator"] {
-                opacity: 0.7;
-                transition: $transIn;
-            }
-        }
-
         > * + * {
             margin-left: $interiorMargin;
         }
@@ -92,10 +85,10 @@
         }
 
         &__menu-indicator {
+            // Not sure this is being used
             flex: 0 0 auto;
             font-size: 0.8em;
             opacity: 0;
-            transition: $transOut;
         }
     }
 }

src/plugins/timeConductor/conductor-axis.scss

@@ -49,12 +49,10 @@
         background-size: 3px 30%;
         background-color: $colorBodyBgSubtle;
         box-shadow: inset rgba(black, 0.4) 0 1px 1px;
-        transition: $transOut;
 
         svg text {
             fill: $colorBodyFg;
             stroke: $colorBodyBgSubtle;
-            transition: $transOut;
         }
     }
 

src/plugins/timeConductor/conductor.scss

@@ -68,7 +68,6 @@
                 &:hover,
                 &:active {
                     cursor: col-resize;
-                    filter: $timeConductorAxisHoverFilter;
                 }
             }
         }
@@ -269,7 +268,6 @@
     grid-column-gap: 3px;
     grid-row-gap: 4px;
     align-items: start;
-    filter: $filterMenu;
     box-shadow: $shdwMenu;
     padding: $interiorMargin;
     position: absolute;

src/styles/_constants-espresso.scss

@@ -72,7 +72,7 @@ $colorHeadBg: #262626;
 $colorHeadFg: $colorBodyFg;
 $colorKey: #0099cc;
 $colorKeyFg: #fff;
-$colorKeyHov: #26d8ff;
+$colorKeyHov: lighten($colorKey, 10%);
 $colorKeyFilter: invert(36%) sepia(76%) saturate(2514%) hue-rotate(170deg) brightness(99%) contrast(101%);
 $colorKeyFilterHov: invert(63%) sepia(88%) saturate(3029%) hue-rotate(154deg) brightness(101%) contrast(100%);
 $colorKeySelectedBg: $colorKey;
@@ -86,7 +86,7 @@ $colorSelectedFg: pullForward($colorBodyFg, 20%);
 
 // Object labels
 $objectLabelTypeIconOpacity: 0.7;
-$objectLabelNameFilter: brightness(1.3);
+$objectLabelNameColorFg: lighten($colorBodyFg, 10%);
 
 // Layout
 $shellMainPad: 4px 0;
@@ -135,7 +135,7 @@ $colorPausedFg: #333;
 
 // Base variations
 $colorBodyBgSubtle: pullForward($colorBodyBg, 5%);
-$colorBodyBgSubtleHov: pushBack($colorKey, 50%);
+$colorBodyBgSubtleHov: pullForward($colorBodyBg, 10%);
 $colorKeySubtle: pushBack($colorKey, 10%);
 
 // Time Colors
@@ -202,6 +202,7 @@ $colorTabsHolderBg: rgba(black, 0.2);
 // Buttons and Controls
 $colorBtnBg: pullForward($colorBodyBg, 10%);
 $colorBtnBgHov: pullForward($colorBtnBg, 10%);
+$shdwBtnHov: inset rgba(white, 10%) 0 0 0 100px;
 $colorBtnFg: pullForward($colorBodyFg, 10%);
 $colorBtnReverseFg: pullForward($colorBtnFg, 10%);
 $colorBtnReverseBg: pullForward($colorBtnBg, 10%);
@@ -470,6 +471,8 @@ $transInTime: 50ms;
 $transOutTime: 250ms;
 $transIn: all $transInTime ease-in-out;
 $transOut: all $transOutTime ease-in-out;
+$transInTransform: transform $transInTime ease-in-out;
+$transOutTransform: transform $transOutTime ease-in-out;
 $transInBounce: all 200ms cubic-bezier(.47,.01,.25,1.5);
 $transInBounceBig: all 300ms cubic-bezier(.2,1.6,.6,3);
 

src/styles/_constants-maelstrom.scss

@@ -474,6 +474,8 @@ $transInTime: 50ms;
 $transOutTime: 250ms;
 $transIn: all $transInTime ease-in-out;
 $transOut: all $transOutTime ease-in-out;
+$transInTransform: transform $transInTime ease-in-out;
+$transOutTransform: transform $transOutTime ease-in-out;
 $transInBounce: all 200ms cubic-bezier(.47,.01,.25,1.5);
 $transInBounceBig: all 300ms cubic-bezier(.2,1.6,.6,3);
 

src/styles/_constants-mobile.scss

@@ -30,6 +30,7 @@ $mobileOverlayMargin: 20px;
 $mobileMenuIconD: 25px;
 $phoneItemH: floor(math.div($gridItemMobile, 4));
 $tabletItemH: floor(math.div($gridItemMobile, 3));
+$shellTimeConductorMobileH: 90px;
 
 /************************** MOBILE TREE MENU DIMENSIONS */
 $mobileTreeItemH: 35px;

src/styles/_constants-snow.scss

@@ -86,7 +86,7 @@ $colorSelectedFg: pullForward($colorBodyFg, 10%);
 
 // Object labels
 $objectLabelTypeIconOpacity: 0.5;
-$objectLabelNameFilter: brightness(0.9);
+$objectLabelNameColorFg: darken($colorBodyFg, 10%);
 
 // Layout
 $shellMainPad: 4px 0;
@@ -135,7 +135,7 @@ $colorPausedFg: #fff;
 
 // Base variations
 $colorBodyBgSubtle: pullForward($colorBodyBg, 5%);
-$colorBodyBgSubtleHov: pushBack($colorKey, 50%);
+$colorBodyBgSubtleHov: pullForward($colorBodyBg, 10%);
 $colorKeySubtle: pushBack($colorKey, 20%);
 
 // Time Colors
@@ -202,6 +202,7 @@ $colorTabsHolderBg: rgba($colorBodyFg, 0.2);
 // Buttons and Controls
 $colorBtnBg: #aaa;
 $colorBtnBgHov: pullForward($colorBtnBg, 10%);
+$shdwBtnHov: inset rgba(white, 10%) 0 0 0 20px;
 $colorBtnFg: #fff;
 $colorBtnReverseFg: $colorBodyBg;
 $colorBtnReverseBg: $colorBodyFg;
@@ -470,6 +471,8 @@ $transInTime: 50ms;
 $transOutTime: 250ms;
 $transIn: all $transInTime ease-in-out;
 $transOut: all $transOutTime ease-in-out;
+$transInTransform: transform $transInTime ease-in-out;
+$transOutTransform: transform $transOutTime ease-in-out;
 $transInBounce: all 200ms cubic-bezier(.47,.01,.25,1.5);
 $transInBounceBig: all 300ms cubic-bezier(.2,1.6,.6,3);
 

src/styles/_constants.scss

@@ -47,6 +47,9 @@ $overlayOuterMarginDialog: (5%, 20%);
 $overlayInnerMargin: 25px;
 $mainViewPad: 0px;
 $treeNavArrowD: 20px;
+$shellMainBrowseBarH: 22px;
+$shellTimeConductorH: 55px;
+$shellToolBarH: 29px;
 /*************** Items */
 $itemPadLR: 5px;
 $gridItemDesk: 175px;

src/styles/_controls.scss

@@ -565,7 +565,7 @@ select {
     }
 
     @include hover() {
-        filter: $filterHov;
+        box-shadow: $shdwBtnHov;
     }
 
     &.is-current {
@@ -725,11 +725,6 @@ select {
         width: $d;
         height: $d;
         text-align: center;
-        transition: $transOut;
-
-        &:hover {
-            transition: $transIn;
-        }
 
         &.is-selected {
             border-width: 1px;
@@ -1084,7 +1079,7 @@ input[type="range"] {
     // Controls that are in close proximity to an element they effect
     &--show-on-hover {
         // Hidden by default; requires a hover 1 - 3 levels above to display
-        transition: $transOut;
+        @include transition(opacity, $transOutTime);
         opacity: 0;
         pointer-events: none;
     }
@@ -1096,7 +1091,7 @@ input[type="range"] {
     > * > * > .c-local-controls--show-on-hover,
     > * > * > * > .c-local-controls--show-on-hover
     {
-        transition: $transIn;
+        @include transition(opacity);
         opacity: 1;
         pointer-events: inherit;
 
@@ -1109,6 +1104,7 @@ input[type="range"] {
 .c-drop-hint {
     // Used in Tabs View, Flexible Grid Layouts
     @include abs();
+    @include transition($prop: background-color, $dur: $transOutTime);
     background-color: $colorDropHintBg;
     color: $colorDropHintFg;
     border-radius: $basicCr;
@@ -1117,7 +1113,6 @@ input[type="range"] {
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    transition: $transOut;
     z-index: 50;
 
     &:not(.c-drop-hint--always-show) {
@@ -1142,13 +1137,11 @@ input[type="range"] {
     .is-dragging &,
     &.is-dragging {
         pointer-events: inherit;
-        transition: $transIn;
         opacity: 0.8;
     }
 
     .is-mouse-over &,
     &.is-mouse-over {
-        transition: $transIn;
         background-color: $colorDropHintBgHov;
         opacity: 0.9;
     }

src/styles/_legacy.scss

@@ -60,7 +60,7 @@
         margin-right: 0;
         min-width: 0;
         overflow: hidden;
-        transition: $transOut;
+        @include transition($prop: width, $dur: $transOutTime);
         width: 0;
 
         .c-icon-button:before { font-size: 1em; }
@@ -78,7 +78,7 @@
 
     &:hover {
         .c-timer__controls {
-            transition: $transOut; // On purpose: want this to take a bit longer
+            @include transition($prop: width, $dur: $transOutTime); // On purpose: want this to take a bit longer
             margin-right: $interiorMargin;
             width: $ctrlW * 2;
         }
@@ -168,7 +168,6 @@
 .widget-rules-wrapper,
 .widget-rule-content,
 .w-widget-test-data-content {
-    transition: $transIn;
     min-height: 0;
     height: 0;
     opacity: 0;
@@ -430,7 +429,6 @@
 
     &:hover {
         .l-autoflow-header .s-button.change-column-width {
-            transition: $transIn;
             opacity: 1;
         }
     }
@@ -444,7 +442,7 @@
             overflow: hidden;
         }
         .s-button.change-column-width {
-            transition: $transOut;
+            @include transition($prop: opacity, $dur: $transOutTime);
             opacity: 0;
         }
         .l-filter {
@@ -737,7 +735,7 @@ body.desktop {
             &:hover {
                 &:after {
                     background-color: $colorSplitterHover !important;
-                    transiiton: background-color, 150ms;
+                    @include transition($prop: background-color, $dur: 150ms);
                 }
             }
         }

src/styles/_mixins.scss

@@ -96,6 +96,13 @@
     animation-timing-function: ease-in-out;
 }
 
+@mixin transition($prop: all, $dur: $transInTime, $timing: ease-in-out, $delay: 0ms) {
+    transition-property: $prop;
+    transition-duration: $dur;
+    transition-timing-function: $timing;
+    transition-delay: $delay;
+}
+
 /************************** VISUALS */
 @mixin ancillaryIcon($d, $c) {
     // Used for small icons used in combination with larger icons,
@@ -463,22 +470,12 @@
 }
 
 @mixin button($bg: $colorBtnBg, $fg: $colorBtnFg, $radius: $controlCr, $shdw: none) {
-    // Is this being used? Remove if not.
     background: $bg;
     color: $fg;
     border-radius: $radius;
     box-shadow: $shdw;
 }
 
-@mixin buttonBehavior() {
-    // Assign transition timings
-    transition: $transOut;
-
-    @include hover() {
-        transition: $transIn;
-    }
-}
-
 @mixin cControl() {
     $fs: 1em;
     @include userSelectNone();
@@ -515,8 +512,18 @@
     }
 }
 
+@mixin cControlHov($styleConst: $shdwBtnHov) {
+    transition: box-shadow $transOutTime;
+
+    @include hover() {
+        transition: box-shadow $transInTime;
+        box-shadow: $styleConst !important;
+    }
+}
+
 @mixin cButton() {
     @include cControl();
+    @include cControlHov();
     @include themedButton();
     border-radius: $controlCr;
     color: $colorBtnFg;
@@ -528,10 +535,6 @@
         margin-left: $interiorMarginSm;
     }
 
-    @include hover() {
-        filter: $filterHov;
-    }
-
     &[class*="--major"],
     &[class*='is-active']{
         background: $colorBtnMajorBg;
@@ -546,11 +549,11 @@
 
 @mixin cClickIcon() {
     @include cControl();
+    @include cControlHov();
     color: $colorBodyFg;
     cursor: pointer;
     padding: 4px; // Bigger hit area
     opacity: 0.7;
-    transition: $transOut;
     transform-origin: center;
 
     &[class*="--major"] {
@@ -560,7 +563,6 @@
 
     @include hover() {
         transform: scale(1.1);
-        transition: $transIn;
         opacity: 1;
     }
 }
@@ -584,21 +586,14 @@
     // Padding is included to facilitate a bigger hit area
     // Make the icon bigger relative to its container
     @include cControl();
+    @include cControlHov();
     @include cClickIconButtonLayout();
     background: none;
     color: $colorClickIconButton;
     box-shadow: none;
     cursor: pointer;
-    transition: $transOut;
     border-radius: $controlCr;
 
-    @include hover() {
-        transition: $transIn;
-        background: $colorClickIconButtonBgHov;
-        //color: $colorClickIconButtonFgHov;
-        filter: $filterHov;
-    }
-
     &[class*="--major"] {
         color: $colorBtnMajorBg !important;
     }
@@ -654,10 +649,6 @@
         border-color: $colorFg;
     }
 
-    @include hover {
-        filter: $filterHov;
-    }
-
     &--up, &--prev {
         &:before {
             transform: translate(-30%, -50%) rotate(135deg);

src/ui/components/List/list-view.scss

@@ -2,7 +2,6 @@
 .c-list-view {
     tbody tr {
         background: $colorListItemBg;
-        transition: $transOut;
     }
 
     td {
@@ -22,8 +21,6 @@
 
                 &:hover {
                     background: $colorListItemBgHov;
-                    filter: $filterHov;
-                    transition: $transIn;
                 }
             }
         }

src/ui/components/object-frame.scss

@@ -20,7 +20,7 @@
             }
 
             &__name {
-                filter: $objectLabelNameFilter;
+                color: $objectLabelNameColorFg;
             }
         }
     }

src/ui/components/object-label.scss

@@ -22,6 +22,7 @@
 
     &__name {
         @include ellipsize();
+        color: $objectLabelNameColorFg;
         display: inline;
         padding: 1px 0;
     }

src/ui/components/search.scss

@@ -1,7 +1,7 @@
 @mixin visibleRegexButton {
     opacity: 1;
     padding: 1px 3px;
-    width: 24px;
+    min-width: 24px;
 }
 
 .c-search {
@@ -31,7 +31,7 @@
         overflow: hidden;
         padding: 1px 0;
         transform-origin: left;
-        transition: $transOut;
+        @include transition($prop: min-width, $dur: $transOutTime);
         width: 0;
 
         &.is-active {
@@ -54,8 +54,19 @@
             margin-left: 0;
         }
 
-        .c-search__clear-input {
+        &:before {
-            display: block;
+            width: 0;
+        }
+
+        input[type='text'],
+        input[type='search'] {
+            margin-left: 0;
+        }
+
+        @include hover {
+            .c-search__clear-input {
+                display: block;
+            }
         }
     }
 
@@ -66,10 +77,9 @@
         text-align: left;
     }
 
-    &:hover {
+    @include hover {
         .c-search__use-regex {
             @include visibleRegexButton();
-            transition: $transIn;
         }
     }
 }

src/ui/inspector/inspector.scss

@@ -25,10 +25,6 @@
     }
 
     &__selected {
-        .c-object-label__name {
-            filter: $objectLabelNameFilter;
-        }
-
         .c-object-label__type-icon {
             opacity: $objectLabelTypeIconOpacity;
         }

src/ui/layout/create-button.scss

@@ -20,7 +20,7 @@
     z-index: 70;
 
     [class*="__icon"] {
-        filter: $colorKeyFilter;
+            filter: $colorKeyFilter;
     }
 
     [class*="__item-description"] {

src/ui/layout/layout.scss

@@ -35,7 +35,7 @@
         min-height: 0;
         max-height: 15%;
         overflow: hidden;
-        transition: $transIn;
+        @include transition(min-height);
 
         &.is-expanded {
             min-height: 100px;
@@ -65,8 +65,7 @@
     }
 
     &__pane-tree,
-    &__pane-inspector,
+    &__pane-inspector {
-    &__pane-main {
         .l-pane__contents {
             display: flex;
             flex-flow: column nowrap;
@@ -74,8 +73,7 @@
         }
     }
 
-    &__pane-tree,
+    &__pane-tree {
-    &__pane-main {
         .l-pane__contents {
             > * {
                 flex: 0 0 auto;
@@ -89,6 +87,37 @@
 
     &__pane-main {
         .l-pane__header { display: none; }
+
+        .l-pane__contents {
+            .l-shell__main-.l-shell__main-view-browse-bar {
+                position: relative;
+            }
+            // Using `position: absolute` due to flex having repaint issues with the Time Conductor, #5247
+            .l-shell__time-conductor,
+            .l-shell__main-container {
+                position: absolute;
+                left: 0;
+                right: 0;
+                height: auto;
+                width: auto;
+            
+            }
+
+            .l-shell__main-container {
+                top: $shellMainBrowseBarH + $interiorMarginLg;
+                bottom: $shellTimeConductorH + $interiorMargin;
+            }
+
+            @include phonePortrait() {
+                .l-shell__main-container {
+                    bottom: $shellTimeConductorMobileH + $interiorMargin;
+                }
+            }
+
+            .l-shell__time-conductor {
+                bottom: 0;
+            }
+        }
     }
 
     body.mobile & {
@@ -307,6 +336,7 @@
         height: $p + 24px; // Need to standardize the height
         justify-content: space-between;
         padding: $p;
+        z-index: 2;
     }
 
     &__resizing {
@@ -332,6 +362,7 @@
         box-shadow: $colorBodyBg 0 0 0 1px, $editUIAreaShdw;
         margin-left: $m;
         margin-right: $m;
+        top: $shellToolBarH + $shellMainBrowseBarH + $interiorMarginLg !important;
 
         &[s-selected] {
             // Provide a clearer selection context articulation for the main edit area
@@ -408,10 +439,6 @@
         flex: 0 1 auto;
     }
 
-    .c-object-label__name {
-        filter: $objectLabelNameFilter;
-    }
-
     .c-object-label__type-icon {
         opacity: $objectLabelTypeIconOpacity;
     }
@@ -433,7 +460,7 @@
 
 /************************** DRAWER */
 .c-drawer {
-    /* New sliding overlay or push element to contain things
+    /* Sliding overlay or push element to contain things
     * Designed for mobile and compact desktop scenarios
     * Variations:
     * --overlays: position absolute, overlays neighboring elements
@@ -442,7 +469,8 @@
     * &.is-expanded: applied when expanded.
      */
 
-    transition: $transOut;
+    $transProps: width, min-width, height, min-height;
+
     min-height: 0;
     min-width: 0;
     overflow: hidden;
@@ -455,11 +483,12 @@
     }
 
     &.c-drawer--align-left {
+        @include transition($prop: $transProps, $dur: $transOutTime);
         height: 100%;
     }
 
     &.c-drawer--align-top {
-        // Need anything here?
+        @include transition($prop: $transProps, $dur: $transOutTime);
     }
 
     &.c-drawer--overlays {

src/ui/layout/mct-tree.scss

@@ -97,7 +97,7 @@
 
         @include hover {
             background: $colorItemTreeHoverBg;
-            filter: $filterHov;
+            //filter: $filterHov; // FILTER REMOVAL, CONVERT TO THEME CONSTANT
         }
 
         &.is-navigated-object,
@@ -192,14 +192,6 @@
             }
         }
     }
-
-    &__item__label {
-        @include desktop {
-            &:hover {
-                filter: $filterHov;
-            }
-        }
-    }
 }
 
 .is-editing .is-navigated-object {

src/ui/layout/pane.scss

@@ -107,10 +107,10 @@
     /************************************************ DESKTOP STYLES */
     body.desktop & {
         &__handle {
-            background: $colorSplitterBg;
+            background-color: $colorSplitterBg;
             display: block;
             position: absolute;
-            transition: $transOut;
+            @include transition(background-color, $transOutTime);
 
             &:before {
                 // Extended hit area
@@ -121,8 +121,8 @@
             }
 
             &:hover {
-                background: $colorSplitterHover;
+                background-color: $colorSplitterHover;
-                transition: $transIn;
+                @include transition(background-color);
             }
         }
 
@@ -142,14 +142,14 @@
 
         [class*="expand-button"] {
             display: none; // Hidden by default
-            background: $splitterCollapsedBtnColorBg;
+            background-color: $splitterCollapsedBtnColorBg;
             color: $splitterCollapsedBtnColorFg;
             font-size: 0.9em;
 
             &:hover {
-                background: $splitterCollapsedBtnColorBgHov;
+                background-color: $splitterCollapsedBtnColorBgHov;
                 color: inherit;
-                transition: $transIn;
+                @include transition(background-color);
             }
         }
 
@@ -163,7 +163,7 @@
 
             .l-pane {
                 &__handle {
-                    background: $colorSplitterHover;
+                    background-color: $colorSplitterHover;
                 }
             }
         }

src/ui/layout/status-bar/indicators.scss

@@ -43,8 +43,8 @@
     .s-button,
     .c-button {
         // Make <a> in label look like buttons
-        transition: $transIn;
+        @include transition(background-color);
-        background: transparent;
+        background-color: transparent;
         border: 1px solid rgba($colorIndicatorMenuFg, 0.5);
         border-radius: $controlCr;
         box-sizing: border-box;
@@ -53,8 +53,8 @@
         height: auto;
         line-height: normal;
         padding: 0 2px;
-        &:hover {
+        @include hover {
-            background: rgba($colorIndicatorMenuFg, 0.1);
+            background-color: rgba($colorIndicatorMenuFg, 0.1);
             border-color: rgba($colorIndicatorMenuFg, 0.75);
             color: $colorIndicatorMenuFgHov;
         }