From f8e400f51c915c082b73127b211f38f4a475eaa7 Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Fri, 30 Apr 2021 10:28:07 -0500
Subject: [PATCH] Fix #10173 - Prevent lag in external monitors when using Mac
 + Chrome (#10952)

---
 app/scripts/controllers/app-state.js        |  9 +++++++++
 app/scripts/metamask-controller.js          | 11 +++++++++++
 app/scripts/metamask-controller.test.js     |  1 +
 ui/css/itcss/components/newui-sections.scss | 17 +++++++++++++++++
 ui/pages/routes/routes.component.js         |  9 ++++++++-
 ui/pages/routes/routes.container.js         |  1 +
 6 files changed, 47 insertions(+), 1 deletion(-)

diff --git a/app/scripts/controllers/app-state.js b/app/scripts/controllers/app-state.js
index 261b735dc..ce92798e0 100644
--- a/app/scripts/controllers/app-state.js
+++ b/app/scripts/controllers/app-state.js
@@ -23,6 +23,7 @@ export default class AppStateController extends EventEmitter {
       timeoutMinutes: 0,
       connectedStatusPopoverHasBeenShown: true,
       defaultHomeActiveTabName: null,
+      browserEnvironment: {},
       ...initState,
     });
     this.timer = null;
@@ -158,4 +159,12 @@ export default class AppStateController extends EventEmitter {
       timeoutMinutes * 60 * 1000,
     );
   }
+
+  /**
+   * Sets the current browser and OS environment
+   * @returns {void}
+   */
+  setBrowserEnvironment(os, browser) {
+    this.store.updateState({ browserEnvironment: { os, browser } });
+  }
 }
diff --git a/app/scripts/metamask-controller.js b/app/scripts/metamask-controller.js
index 950601e5d..7f928d8cc 100644
--- a/app/scripts/metamask-controller.js
+++ b/app/scripts/metamask-controller.js
@@ -478,6 +478,17 @@ export default class MetamaskController extends EventEmitter {
       this.submitPassword(password);
     }
 
+    // Lazily update the store with the current extension environment
+    this.extension.runtime.getPlatformInfo(({ os }) => {
+      this.appStateController.setBrowserEnvironment(
+        os,
+        // This method is presently only supported by Firefox
+        this.extension.runtime.getBrowserInfo === undefined
+          ? 'chrome'
+          : 'firefox',
+      );
+    });
+
     // TODO:LegacyProvider: Delete
     this.publicConfigStore = this.createPublicConfigStore();
   }
diff --git a/app/scripts/metamask-controller.test.js b/app/scripts/metamask-controller.test.js
index 25caa7892..f458f62b9 100644
--- a/app/scripts/metamask-controller.test.js
+++ b/app/scripts/metamask-controller.test.js
@@ -52,6 +52,7 @@ const ExtensionizerMock = {
     onInstalled: {
       addListener: () => undefined,
     },
+    getPlatformInfo: async () => 'mac',
   },
 };
 
diff --git a/ui/css/itcss/components/newui-sections.scss b/ui/css/itcss/components/newui-sections.scss
index 57c1f6d77..51f485600 100644
--- a/ui/css/itcss/components/newui-sections.scss
+++ b/ui/css/itcss/components/newui-sections.scss
@@ -14,6 +14,23 @@ $sub-mid-size-breakpoint-range: "screen and (min-width: #{$break-large}) and (ma
   align-items: center;
 }
 
+// Fix for UI lag on external monitor: https://github.com/MetaMask/metamask-extension/issues/10173
+.app.os-mac.browser-chrome::after {
+  content: "";
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 1px;
+  height: 1px;
+  background-color: $Grey-000;
+  animation: emptySpinningDiv 1s infinite linear;
+}
+
+@keyframes emptySpinningDiv {
+  0% { transform: rotate(0deg); }
+  to { transform: rotate(1turn); }
+}
+
 // Main container
 .main-container {
   z-index: $main-container-z-index;
diff --git a/ui/pages/routes/routes.component.js b/ui/pages/routes/routes.component.js
index 3248799d2..d70256e17 100644
--- a/ui/pages/routes/routes.component.js
+++ b/ui/pages/routes/routes.component.js
@@ -90,6 +90,7 @@ export default class Routes extends Component {
     autoLockTimeLimit: PropTypes.number,
     pageChanged: PropTypes.func.isRequired,
     prepareToLeaveSwaps: PropTypes.func,
+    browserEnvironment: PropTypes.object,
   };
 
   static contextTypes = {
@@ -275,6 +276,7 @@ export default class Routes extends Component {
       submittedPendingTransactions,
       isMouseUser,
       prepareToLeaveSwaps,
+      browserEnvironment,
     } = this.props;
     const loadMessage =
       loadingMessage || isNetworkLoading
@@ -296,9 +298,14 @@ export default class Routes extends Component {
         ({ id }) => id === sidebarTransaction.id,
       );
 
+    const { os, browser } = browserEnvironment;
     return (
       <div
-        className={classnames('app', { 'mouse-user-styles': isMouseUser })}
+        className={classnames('app', {
+          [`os-${os}`]: os,
+          [`browser-${browser}`]: browser,
+          'mouse-user-styles': isMouseUser,
+        })}
         dir={textDirection}
         onClick={() => setMouseUserState(true)}
         onKeyDown={(e) => {
diff --git a/ui/pages/routes/routes.container.js b/ui/pages/routes/routes.container.js
index 527f9791c..952e077d8 100644
--- a/ui/pages/routes/routes.container.js
+++ b/ui/pages/routes/routes.container.js
@@ -45,6 +45,7 @@ function mapStateToProps(state) {
     isMouseUser: state.appState.isMouseUser,
     providerId: getNetworkIdentifier(state),
     autoLockTimeLimit,
+    browserEnvironment: state.metamask.browserEnvironment,
   };
 }