Fix #10173 - Prevent lag in external monitors when using Mac + Chrome (#10952)

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 } });
+  }
 }

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();
   }

app/scripts/metamask-controller.test.js

@@ -52,6 +52,7 @@ const ExtensionizerMock = {
     onInstalled: {
       addListener: () => undefined,
     },
+    getPlatformInfo: async () => 'mac',
   },
 };
 

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;

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) => {

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,
   };
 }