From d81c9e80c92a68194e7586ee2a2b1a56b376ab87 Mon Sep 17 00:00:00 2001
From: Blake Stephens <brak.stephens@gmail.com>
Date: Thu, 16 Jul 2020 19:43:37 -0700
Subject: [PATCH] Optimized some UI layers for fewer paints on interaction

---
 src/css/ingame_hud/buildings_toolbar.scss   | 59 ++++++++++++++-------
 src/css/ingame_hud/game_menu.scss           |  1 +
 src/css/ingame_hud/keybindings_overlay.scss |  4 ++
 src/css/ingame_hud/pinned_shapes.scss       |  5 +-
 src/css/mixins.scss                         |  4 +-
 5 files changed, 52 insertions(+), 21 deletions(-)

diff --git a/src/css/ingame_hud/buildings_toolbar.scss b/src/css/ingame_hud/buildings_toolbar.scss
index ed5bb7a2..d4b3c9e8 100644
--- a/src/css/ingame_hud/buildings_toolbar.scss
+++ b/src/css/ingame_hud/buildings_toolbar.scss
@@ -4,17 +4,18 @@
     left: 50%;
     transform: translateX(-50%);
 
+    // NOTE: This flex rule may not be necessary. Need to find out intent.
     display: flex;
     flex-direction: column;
-    background-color: rgb(255, 255, 255);
     background: transparent;
     border-bottom-width: 0;
-    transition: transform 0.12s ease-in-out;
+    transition: transform 120ms ease-in-out;
+    will-change: transform;
 
-    background: rgba(mix(#ddd, $colorBlueBright, 90%), 0.75);
+    background-color: rgba(mix(#ddd, $colorBlueBright, 90%), 0.75);
 
     @include DarkThemeOverride {
-        background: #222428;
+        background-color: #222428;
     }
 
     &:not(.visible) {
@@ -60,21 +61,43 @@
 
             @include S(border-radius, $globalBorderRadius);
 
-            &.selected {
-                background-color: rgba($colorBlueBright, 0.6) !important;
-                transform: scale(1.05);
-                .keybinding {
-                    color: #111;
-                }
-            }
-
-            pointer-events: all;
-            transition: all 0.05s ease-in-out;
-            transition-property: background-color, transform;
-
-            &.unlocked:hover {
-                background-color: rgba($accentColorDark, 0.1);
+            &.unlocked {
+                pointer-events: all;
+                transition: all 50ms ease-in-out;
+                transition-property: background-color, transform;
                 cursor: pointer;
+                will-change: transform;
+
+                &::before {
+                    content: "";
+                    position: absolute;
+                    top: 0;
+                    right: 0;
+                    bottom: 0;
+                    left: 0;
+                    background-color: $accentColorDark;
+                    opacity: 0;
+                    will-change: opacity;
+                }
+
+                &:hover {
+                    &::before {
+                        opacity: 0.1;
+                    }
+                }
+
+                &.selected {
+                    transform: scale(1.05);
+
+                    &::before {
+                        background-color: $colorBlueBright;
+                        opacity: 0.6;
+                    }
+
+                    .keybinding {
+                        color: #111;
+                    }
+                }
             }
         }
     }
diff --git a/src/css/ingame_hud/game_menu.scss b/src/css/ingame_hud/game_menu.scss
index 41ea600f..54216600 100644
--- a/src/css/ingame_hud/game_menu.scss
+++ b/src/css/ingame_hud/game_menu.scss
@@ -22,6 +22,7 @@
             cursor: pointer;
             transition: all 0.12s ease-in-out;
             transition-property: opacity, transform;
+            will-change: opacity;
             opacity: 0.9;
             @include S(margin-left, 5px);
             position: relative;
diff --git a/src/css/ingame_hud/keybindings_overlay.scss b/src/css/ingame_hud/keybindings_overlay.scss
index 38b560d8..44b6f86a 100644
--- a/src/css/ingame_hud/keybindings_overlay.scss
+++ b/src/css/ingame_hud/keybindings_overlay.scss
@@ -8,6 +8,10 @@
     align-items: flex-start;
     color: #333438;
     // text-shadow: #{D(1px)} #{D(1px)} 0 rgba(0, 10, 20, 0.1);
+    backdrop-filter: blur(D(3px));
+    border: D(1px) solid #d2d2d2;
+    border-radius: D(6px);
+    padding: D(3px);
 
     @include DarkThemeOverride {
         color: #fff;
diff --git a/src/css/ingame_hud/pinned_shapes.scss b/src/css/ingame_hud/pinned_shapes.scss
index 60e9159e..48e5b70e 100644
--- a/src/css/ingame_hud/pinned_shapes.scss
+++ b/src/css/ingame_hud/pinned_shapes.scss
@@ -18,6 +18,7 @@
         @include S(margin-bottom, 4px);
         color: #333438;
         // text-shadow: #{D(1px)} #{D(1px)} 0 rgba(0, 10, 20, 0.2);
+        filter: drop-shadow(#{D(1px)} #{D(1px)} 0 rgba(0, 10, 20, 0.2));
 
         &.unpinable {
             > canvas {
@@ -33,10 +34,12 @@
             grid-row: 1 / 3;
             pointer-events: all;
             transition: transform 0.1s ease-in-out;
+            transform-origin: D(2px) center;
+            will-change: transform;
             position: relative;
             z-index: 20;
             &:hover {
-                transform: scale(2) translateX(#{D(5px)});
+                transform: scale(2);
                 z-index: 21;
             }
         }
diff --git a/src/css/mixins.scss b/src/css/mixins.scss
index ee0a9752..b40afe3e 100644
--- a/src/css/mixins.scss
+++ b/src/css/mixins.scss
@@ -2,8 +2,8 @@
 /* Forces an element to get rendered on its own layer, increasing
 the performance when animated. Use only transform and opacity in animations! */
 @mixin FastAnimation {
-    // will-change: transform, opacity;
-    transform: translateZ(0);
+    will-change: transform, opacity, filter;
+    // transform: translateZ(0);
     backface-visibility: hidden;
     -webkit-backface-visibility: hidden;
 }