TheDude
/
ciphermask
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Minor scripts/ui.js file cleanup (#16566)

Browse Source 
* clean:ui: mv comments

* clean:ui: fix typo recieved -> received

* clean:ui: rn handle -> keepAliveInterval

* clean:ui: rn timeoutHandle -> ackTimeoutToDisplayError

* clean: replace "Xs" w/ variable name

* clean:ui: rm duplicate comment

* add EXTENSION_MESSAGES.CONNECTION_READY const

* clean:ui: bit more clean up
feature/default_network_editable
Ariella Vu 2 years ago committed by GitHub
parent e6070df4b4
commit e01b067d0c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 30 additions and 24 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      app/scripts/background.js
  2. 4
      app/scripts/lib/stream-utils.js
  3. 47
      app/scripts/ui.js
  4. 1
      shared/constants/app.ts

2
app/scripts/background.js
Unescape View File

@ -494,7 +494,7 @@ function setupController(initState, initLangCode, remoteSourcePort) {
// Message below if captured by UI code in app/scripts/ui.js which will trigger UI initialisation
// This ensures that UI is initialised only after background is ready
// It fixes the issue of blank screen coming when extension is loaded, the issue is very frequent in MV3
remotePort.postMessage({ name: 'CONNECTION_READY' });
remotePort.postMessage({ name: EXTENSION_MESSAGES.CONNECTION_READY });
// If we get a WORKER_KEEP_ALIVE message, we respond with an ACK
remotePort.onMessage.addListener((message) => {

4
app/scripts/lib/stream-utils.js
Unescape View File

@ -1,6 +1,8 @@
import ObjectMultiplex from 'obj-multiplex';
import pump from 'pump';
import { EXTENSION_MESSAGES } from '../../../shared/constants/app';
/**
* Sets up stream multiplexing for the given stream
*
@ -14,7 +16,7 @@ export function setupMultiplex(connectionStream) {
* We need to tell the multiplexer to ignore them, else we get the " orphaned data for stream " warnings
* https://github.com/MetaMask/object-multiplex/blob/280385401de84f57ef57054d92cfeb8361ef2680/src/ObjectMultiplex.ts#L63
*/
mux.ignoreStream('CONNECTION_READY');
mux.ignoreStream(EXTENSION_MESSAGES.CONNECTION_READY);
mux.ignoreStream('ACK_KEEP_ALIVE_MESSAGE');
mux.ignoreStream('WORKER_KEEP_ALIVE_MESSAGE');
pump(connectionStream, mux, connectionStream, (err) => {

47
app/scripts/ui.js
Unescape View File

@ -15,6 +15,7 @@ import launchMetaMaskUi, { updateBackgroundConnection } from '../../ui';
import {
ENVIRONMENT_TYPE_FULLSCREEN,
ENVIRONMENT_TYPE_POPUP,
EXTENSION_MESSAGES,
PLATFORM_FIREFOX,
} from '../../shared/constants/app';
import { isManifestV3 } from '../../shared/modules/mv3.utils';
@ -29,8 +30,8 @@ const container = document.getElementById('app-content');
const ONE_SECOND_IN_MILLISECONDS = 1_000;
const WORKER_KEEP_ALIVE_INTERVAL = ONE_SECOND_IN_MILLISECONDS;
// Service Worker Keep Alive Message Constants
const WORKER_KEEP_ALIVE_INTERVAL = ONE_SECOND_IN_MILLISECONDS;
const WORKER_KEEP_ALIVE_MESSAGE = 'WORKER_KEEP_ALIVE_MESSAGE';
const ACK_KEEP_ALIVE_WAIT_TIME = 60_000; // 1 minute
const ACK_KEEP_ALIVE_MESSAGE = 'ACK_KEEP_ALIVE_MESSAGE';
@ -40,33 +41,35 @@ const PHISHING_WARNING_PAGE_TIMEOUT = ONE_SECOND_IN_MILLISECONDS;
const PHISHING_WARNING_SW_STORAGE_KEY = 'phishing-warning-sw-registered';
let lastMessageRecievedTimestamp = Date.now();
let lastMessageReceivedTimestamp = Date.now();
let extensionPort;
let ackTimeoutToDisplayError;
/*
* As long as UI is open it will keep sending messages to service worker
* In service worker as this message is received
* if service worker is inactive it is reactivated and script re-loaded
* Time has been kept to 1000ms but can be reduced for even faster re-activation of service worker
*/
let extensionPort;
let timeoutHandle;
if (isManifestV3) {
// Checking for SW aliveness (or stuckness) flow
// 1. Check if we have an extensionPort, if yes
// 2a. Send a keep alive message to the background via extensionPort
// 2b. Add a listener to it (if not already added)
// 3a. Set a timeout to check if we have received an ACK from background
// 3b. If we have not received an ACK within Xs, we know the background is stuck or dead
// 3b. If we have not received an ACK within ACK_KEEP_ALIVE_WAIT_TIME,
// we know the background is stuck or dead
// 4. If we recieve an ACK_KEEP_ALIVE_MESSAGE from the service worker, we know it is alive
const ackKeepAliveListener = (message) => {
if (message.name === ACK_KEEP_ALIVE_MESSAGE) {
lastMessageRecievedTimestamp = Date.now();
clearTimeout(timeoutHandle);
lastMessageReceivedTimestamp = Date.now();
clearTimeout(ackTimeoutToDisplayError);
}
};
const handle = setInterval(() => {
const keepAliveInterval = setInterval(() => {
browser.runtime.sendMessage({ name: WORKER_KEEP_ALIVE_MESSAGE });
if (extensionPort !== null && extensionPort !== undefined) {
@ -77,12 +80,12 @@ if (isManifestV3) {
}
}
timeoutHandle = setTimeout(() => {
ackTimeoutToDisplayError = setTimeout(() => {
if (
Date.now() - lastMessageRecievedTimestamp >
Date.now() - lastMessageReceivedTimestamp >
ACK_KEEP_ALIVE_WAIT_TIME
) {
clearInterval(handle);
clearInterval(keepAliveInterval);
displayCriticalError(
'somethingIsWrong',
new Error("Something's gone wrong. Try reloading the page."),
@ -110,10 +113,7 @@ async function start() {
const activeTab = await queryCurrentActiveTab(windowType);
let loadPhishingWarningPage;
/**
* In case of MV3 the issue of blank screen was very frequent, it is caused by UI initialising before background is ready to send state.
* Code below ensures that UI is rendered only after background is ready.
*/
if (isManifestV3) {
/*
* In case of MV3 the issue of blank screen was very frequent, it is caused by UI initialising before background is ready to send state.
@ -121,7 +121,7 @@ async function start() {
* In case the UI is already rendered, only update the streams.
*/
const messageListener = async (message) => {
if (message?.name === 'CONNECTION_READY') {
if (message?.name === EXTENSION_MESSAGES.CONNECTION_READY) {
if (isUIInitialised) {
// Currently when service worker is revived we create new streams
// in later version we might try to improve it by reviving same streams.
@ -147,10 +147,8 @@ async function start() {
* worker has been registered, so that the warning page works offline.
*/
loadPhishingWarningPage = async function () {
const currentPlatform = getPlatform();
// Check session storage for whether we've already initalized the phishing warning
// service worker this browser session and do not attempt to re-initialize if so.
// Check session storage for whether we've already initialized the phishing warning
// service worker in this browser session and do not attempt to re-initialize if so.
const phishingSWMemoryFetch = await browser.storage.session.get(
PHISHING_WARNING_SW_STORAGE_KEY,
);
@ -159,7 +157,9 @@ async function start() {
return;
}
const currentPlatform = getPlatform();
let iframe;
try {
const extensionStartupPhishingPageUrl = new URL(
process.env.PHISHING_WARNING_PAGE_URL,
@ -195,7 +195,9 @@ async function start() {
() => deferredReject(new PhishingWarningPageTimeoutError()),
PHISHING_WARNING_PAGE_TIMEOUT,
);
await loadComplete;
// store a flag in sessions storage that we've already loaded the service worker
// and don't need to try again
if (currentPlatform === PLATFORM_FIREFOX) {
@ -225,12 +227,13 @@ async function start() {
};
// resetExtensionStreamAndListeners takes care to remove listeners from closed streams
// it also creates new streams and attach event listeners to them
// it also creates new streams and attaches event listeners to them
const resetExtensionStreamAndListeners = () => {
extensionPort.onMessage.removeListener(messageListener);
extensionPort.onDisconnect.removeListener(
resetExtensionStreamAndListeners,
);
// message below will try to activate service worker
// in MV3 is likely that reason of stream closing is service worker going in-active
browser.runtime.sendMessage({ name: WORKER_KEEP_ALIVE_MESSAGE });

1
shared/constants/app.ts
Unescape View File

@ -61,6 +61,7 @@ export const MESSAGE_TYPE = {
* Custom messages to send and be received by the extension
*/
export const EXTENSION_MESSAGES = {
CONNECTION_READY: 'CONNECTION_READY',
READY: 'METAMASK_EXTENSION_READY',
} as const;

Write Preview
Loading…
Cancel
Save