1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00

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

This commit is contained in:
David Walsh 2021-04-30 10:28:07 -05:00 committed by Dan Miller
parent 29742b9519
commit f8e400f51c
6 changed files with 47 additions and 1 deletions

View File

@ -23,6 +23,7 @@ export default class AppStateController extends EventEmitter {
timeoutMinutes: 0, timeoutMinutes: 0,
connectedStatusPopoverHasBeenShown: true, connectedStatusPopoverHasBeenShown: true,
defaultHomeActiveTabName: null, defaultHomeActiveTabName: null,
browserEnvironment: {},
...initState, ...initState,
}); });
this.timer = null; this.timer = null;
@ -158,4 +159,12 @@ export default class AppStateController extends EventEmitter {
timeoutMinutes * 60 * 1000, timeoutMinutes * 60 * 1000,
); );
} }
/**
* Sets the current browser and OS environment
* @returns {void}
*/
setBrowserEnvironment(os, browser) {
this.store.updateState({ browserEnvironment: { os, browser } });
}
} }

View File

@ -478,6 +478,17 @@ export default class MetamaskController extends EventEmitter {
this.submitPassword(password); 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 // TODO:LegacyProvider: Delete
this.publicConfigStore = this.createPublicConfigStore(); this.publicConfigStore = this.createPublicConfigStore();
} }

View File

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

View File

@ -14,6 +14,23 @@ $sub-mid-size-breakpoint-range: "screen and (min-width: #{$break-large}) and (ma
align-items: center; 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
.main-container { .main-container {
z-index: $main-container-z-index; z-index: $main-container-z-index;

View File

@ -90,6 +90,7 @@ export default class Routes extends Component {
autoLockTimeLimit: PropTypes.number, autoLockTimeLimit: PropTypes.number,
pageChanged: PropTypes.func.isRequired, pageChanged: PropTypes.func.isRequired,
prepareToLeaveSwaps: PropTypes.func, prepareToLeaveSwaps: PropTypes.func,
browserEnvironment: PropTypes.object,
}; };
static contextTypes = { static contextTypes = {
@ -275,6 +276,7 @@ export default class Routes extends Component {
submittedPendingTransactions, submittedPendingTransactions,
isMouseUser, isMouseUser,
prepareToLeaveSwaps, prepareToLeaveSwaps,
browserEnvironment,
} = this.props; } = this.props;
const loadMessage = const loadMessage =
loadingMessage || isNetworkLoading loadingMessage || isNetworkLoading
@ -296,9 +298,14 @@ export default class Routes extends Component {
({ id }) => id === sidebarTransaction.id, ({ id }) => id === sidebarTransaction.id,
); );
const { os, browser } = browserEnvironment;
return ( return (
<div <div
className={classnames('app', { 'mouse-user-styles': isMouseUser })} className={classnames('app', {
[`os-${os}`]: os,
[`browser-${browser}`]: browser,
'mouse-user-styles': isMouseUser,
})}
dir={textDirection} dir={textDirection}
onClick={() => setMouseUserState(true)} onClick={() => setMouseUserState(true)}
onKeyDown={(e) => { onKeyDown={(e) => {

View File

@ -45,6 +45,7 @@ function mapStateToProps(state) {
isMouseUser: state.appState.isMouseUser, isMouseUser: state.appState.isMouseUser,
providerId: getNetworkIdentifier(state), providerId: getNetworkIdentifier(state),
autoLockTimeLimit, autoLockTimeLimit,
browserEnvironment: state.metamask.browserEnvironment,
}; };
} }