Manifest v3 + speedscope

Shopify · Jan 17, 2025 · 1595fdb · 1595fdb
1 parent 904857f
commit 1595fdb
Show file tree

Hide file tree

Showing 49 changed files with 1,935 additions and 5,075 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,7 +1,6 @@
 {
   "extends": [
     "plugin:shopify/typescript",
-    "plugin:shopify/jest",
     "plugin:shopify/node",
     "plugin:shopify/prettier"
   ],
@@ -16,18 +15,10 @@
     "jsx-a11y/control-has-associated-label": "off",
     "node/no-extraneous-require": "off",
     "import/no-cycle": "off",
-    "jest/require-tothrow-message": "off",
     "callback-return": "off",
-    "jest/no-if": "off",
     "import/named": "off",
     "func-style": "off",
     "shopify/restrict-full-import": ["error", "lodash"],
-    "shopify/jsx-no-hardcoded-content": "off",
-    "shopify/jest/no-vague-titles": [
-      "error",
-      {
-        "allow": ["all"]
-      }
-    ]
+    "shopify/jsx-no-hardcoded-content": "off"
   }
 }
diff --git a/.travis.yml b/.travis.yml
@@ -17,10 +17,9 @@ shared:
 matrix:
   include:
     - <<: *node_container
-      name: 'Node - build, type-check, and test'
+      name: 'Node - build, type-check'
       script:
         - yarn build
-        - yarn test
     - <<: *node_container
       name: 'Node - lint'
       script:

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,8 @@
 # Change Log
 
+## v3.0.0 (Jan. 17, 2025)
+* [#153](https://github.com/Shopify/shopify-theme-inspector/pull/153) Add support for Manifest v3 and Speedscope
+
 ## v2.0.7 (June 6, 2024)
 * [#149](https://github.com/Shopify/shopify-theme-inspector/pull/149) Ignore empty partials coming from dynamic sources
 

diff --git a/jest-puppeteer.config.js b/jest-puppeteer.config.js
diff --git a/jest.config.js b/jest.config.js
diff --git a/package.json b/package.json
@@ -5,8 +5,6 @@
   "main": "src/background.ts",
   "scripts": {
     "lint": "eslint '**/*.{ts,tsx}'",
-    "test": "jest",
-    "test:watch": "jest --watch",
     "build": "webpack --config webpack.prod.js",
     "start": "webpack --config webpack.dev.js",
     "zip": "yarn build && cd dist && zip -r -X ../shopify_devtools.zip ."
@@ -25,50 +23,32 @@
   },
   "homepage": "https://github.com/Shopify/shopify-devtools#readme",
   "dependencies": {
-    "@types/d3": "^5.16.4",
-    "@types/jsdom": "^12.2.4",
+    "@types/chrome": "^0.0.297",
+    "@types/jsdom": "^21.1.7",
     "auth0-chrome": "^0.1.2",
     "autobind-decorator": "^2.4.0",
     "buffer": "^6.0.3",
     "copy-webpack-plugin": "^8.1.1",
-    "crypto-browserify": "^3.12.0",
-    "d3": "^5.16.0",
-    "d3-flame-graph": "^2.2.2",
-    "jsdom": "^15.2.1",
-    "lodash.debounce": "^4.0.8",
-    "lodash.escape": "^4.0.1",
-    "nullthrows": "^1.1.1",
-    "stream-browserify": "^3.0.0"
+    "jsdom": "^15.2.1"
   },
   "devDependencies": {
-    "@types/chrome": "^0.0.91",
-    "@types/jest": "^24.9.1",
-    "@types/jest-environment-puppeteer": "^4.4.1",
-    "@types/lodash.debounce": "^4.0.6",
-    "@types/lodash.escape": "^4.0.6",
-    "@types/puppeteer": "^1.20.7",
     "clean-webpack-plugin": "^3.0.0",
     "closure-webpack-plugin": "^2.5.0",
-    "css-loader": "^3.6.0",
+    "css-loader": "^7.1.2",
     "eslint": "^6.8.0",
     "eslint-plugin-shopify": "^30.0.1",
     "google-closure-compiler": "^20210406.0.0",
     "html-webpack-inline-svg-plugin": "^2.3.0",
     "html-webpack-plugin": "^5.3.1",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^24.9.0",
-    "jest-fetch-mock": "^2.1.2",
-    "jest-puppeteer": "^5.0.2",
     "mini-css-extract-plugin": "^1.5.0",
-    "prettier": "^1.19.1",
-    "puppeteer": "^9.0.0",
+    "prettier": "^3.4.2",
     "sinon-chrome": "^3.0.1",
     "style-loader": "^1.3.0",
-    "ts-jest": "^24.3.0",
-    "ts-loader": "^6.2.2",
-    "typescript": "^3.9.9",
-    "webpack": "^5.35.1",
-    "webpack-cli": "^4.6.0",
-    "webpack-merge": "^4.2.2"
+    "ts-loader": "^9.5.2",
+    "typescript": "^5.7.3",
+    "webpack": "^5.97.1",
+    "webpack-cli": "^6.0.1",
+    "webpack-merge": "^6.0.1"
   }
 }
diff --git a/src/background.ts b/src/background.ts
@@ -1,5 +1,6 @@
 import {env, RenderBackend} from './env';
 import {isDev, Oauth2} from './utils';
+import type { ChromeMessage } from './types/messages';
 
 const COLLABORATORS_SCOPE =
   'https://api.shopify.com/auth/partners.collaborator-relationships.readonly';
@@ -29,9 +30,9 @@ function getOauth2Client(origin: string) {
 
 // Change icon from colored to greyscale depending on whether or not Shopify has
 // been detected
-function setIconAndPopup(active: string, tabId: number) {
+function setIconAndPopup(active: boolean, tabId: number) {
   const iconType = active ? 'shopify' : 'shopify-dimmed';
-  chrome.pageAction.setIcon({
+  chrome.action.setIcon({
     tabId,
     path: {
       '16': `images/16-${iconType}.png`,
@@ -42,9 +43,9 @@ function setIconAndPopup(active: string, tabId: number) {
   });
 
   if (active) {
-    chrome.pageAction.setPopup({tabId, popup: './popupAuthFlow.html'});
+    chrome.action.setPopup({tabId, popup: './popupAuthFlow.html'});
   }
-  chrome.pageAction.show(tabId);
+  chrome.action.enable(tabId);
 }
 
 function getSubjectId(oauth: Oauth2, origin: string) {
@@ -54,137 +55,91 @@ function getSubjectId(oauth: Oauth2, origin: string) {
   return Promise.resolve(env.OAUTH2_SUBJECT_ID[renderBackend]);
 }
 
-chrome.runtime.onMessage.addListener(({type, origin}, _, sendResponse) => {
-  if (type !== 'signOut') return false;
-
-  getOauth2Client(origin)
-    .logoutUser()
-    .then(() => {
-      sendResponse();
-    })
-    .catch(({message}) => {
-      sendResponse({error: message});
-    });
-
-  return true;
-});
-
-// Create a listener which handles when detectShopify.js, which executes in the
-// the same context as a tab, sends the results of of whether or not a Shopify
-// employee was detected
-chrome.runtime.onMessage.addListener((event, sender) => {
-  if (
-    sender.tab &&
-    sender.tab.id &&
-    event.type === 'detect-shopify-employee' &&
-    event.hasDetectedShopifyEmployee === true
-  ) {
-    shopifyEmployee = true;
-  }
-});
-
-// Create a listener which handles when detectShopify.js, which executes in the
-// the same context as a tab, sends the results of of whether or not Shopify was
-// detected
-chrome.runtime.onMessage.addListener((event, sender) => {
-  if (sender.tab && sender.tab.id && event.type === 'detect-shopify') {
-    setIconAndPopup(event.hasDetectedShopify, sender.tab.id);
-  }
-});
-
-// Create a listener which handles when the Sign In button is click from the popup
-// or DevTools panel.
-chrome.runtime.onMessage.addListener(({type, origin}, _, sendResponse) => {
-  if (type !== 'authenticate') {
-    return false;
-  }
-
-  getOauth2Client(origin)
-    .authenticate()
-    .then(() => {
-      sendResponse({success: true});
-    })
-    .catch(error => {
-      console.log('Authentication Error:', error.message);
-      sendResponse({success: false, error});
-    });
-
-  return true;
-});
-
-// Listen for 'request-core-access-token' event and respond to the messenger
-// with a valid access token. This may trigger a login popup window if needed.
-chrome.runtime.onMessage.addListener(
-  ({type, origin, isCore}, _, sendResponse) => {
-    if (type !== 'request-core-access-token') {
-      return false;
+chrome.runtime.onMessage.addListener((message: ChromeMessage, sender, sendResponse) => {
+  switch (message.type) {
+    case 'detect-shopify':
+      if (sender.tab?.id) {
+        setIconAndPopup(message.hasDetectedShopify, sender.tab.id);
+      }
+      break;
+
+    case 'detect-shopify-employee':
+      if (message.hasDetectedShopifyEmployee) {
+        shopifyEmployee = true;
+      }
+      break;
+
+    case 'signOut':
+      getOauth2Client(message.origin)
+        .logoutUser()
+        .then(() => {
+          sendResponse();
+        })
+        .catch(({message}) => {
+          sendResponse({error: message});
+        });
+      return true;
+
+    case 'authenticate':
+      getOauth2Client(message.origin)
+        .authenticate()
+        .then(() => {
+          sendResponse({success: true});
+        })
+        .catch(error => {
+          console.log('Authentication Error:', error.message);
+          sendResponse({success: false, error});
+        });
+      return true;
+
+    case 'request-core-access-token': {
+      const params = [
+        [
+          'scope',
+          `${shopifyEmployee === true ? 'employee' : ''} ${
+            env.DEVTOOLS_SCOPE[RenderBackend.StorefrontRenderer]
+          } ${COLLABORATORS_SCOPE}`,
+        ],
+      ];
+
+      const oauth = getOauth2Client(message.origin);
+
+      getSubjectId(oauth, message.origin)
+        .then(subjectId => {
+          return oauth.getSubjectAccessToken(subjectId, params);
+        })
+        .then(token => {
+          sendResponse({token});
+        })
+        .catch(error => {
+          sendResponse({error});
+        });
+      return true;
     }
 
-    renderBackend = isCore
-      ? RenderBackend.Core
-      : RenderBackend.StorefrontRenderer;
-
-    const params = [
-      [
-        'scope',
-        `${shopifyEmployee === true ? 'employee' : ''} ${
-          env.DEVTOOLS_SCOPE[renderBackend]
-        } ${COLLABORATORS_SCOPE}`,
-      ],
-    ];
-
-    // SFR does not need a destination.
-    const destination =
-      renderBackend === RenderBackend.Core ? `${origin}/admin` : '';
-
-    const oauth = getOauth2Client(origin);
-
-    getSubjectId(oauth, origin)
-      .then(subjectId => {
-        return oauth.getSubjectAccessToken(destination, subjectId, params);
-      })
-      .then(token => {
-        sendResponse({token});
-      })
-      .catch(error => {
-        sendResponse({error});
-      });
-
-    return true;
-  },
-);
-
-// Listen for the 'request-user-info' event and respond to the messenger
-// with a the given_name of the currently logged in user.
-chrome.runtime.onMessage.addListener(({type, origin}, _, sendResponse) => {
-  if (type !== 'request-user-name') return false;
-
-  getOauth2Client(origin)
-    .getUserInfo()
-    .then(userInfo => {
-      const name = userInfo.given_name;
-      sendResponse({name});
-    })
-    .catch(error => {
-      sendResponse({error});
-    });
-
-  return true;
-});
-
-// Listen for the 'request-auth-status' event and respond to the messenger
-// with a boolean of user login status.
-chrome.runtime.onMessage.addListener(({type, origin}, _, sendResponse) => {
-  if (type !== 'request-auth-status') return false;
-
-  getOauth2Client(origin)
-    .hasValidClientToken()
-    .then(isLoggedIn => {
-      sendResponse({isLoggedIn});
-    })
-    .catch(error => {
-      sendResponse({error});
-    });
+    case 'request-user-name': {
+      getOauth2Client(message.origin)
+        .getUserInfo()
+        .then(userInfo => {
+          const name = userInfo.given_name;
+          sendResponse({name});
+        })
+        .catch(error => {
+          sendResponse({error});
+        });
+      return true;
+    }
 
-  return true;
+    case 'request-auth-status': {
+      getOauth2Client(message.origin)
+        .hasValidClientToken()
+        .then(isLoggedIn => {
+          sendResponse({isLoggedIn});
+        })
+        .catch(error => {
+          sendResponse({error});
+        });
+      return true;
+    }
+  }
 });