chore(update-deps): start 3.0.0 rebuild in vite

packages/utilities/src/activeTab.js

@@ -1,11 +1,11 @@
 function activeTab(callback) {
-  chrome.tabs.query({ currentWindow: true, active: true }, (tabs) =>
+  chrome.tabs.query({ active: true }, (tabs) =>
     callback(tabs[0])
   );
 }
 
 async function activeTabAsync() {
-  const tabs = await chrome.tabs.query({ active: true, currentWindow: true });
+  const tabs = await chrome.tabs.query({ active: true });
   return tabs[0];
 }
 

packages/webext/.gitignore

@@ -0,0 +1,28 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Config files
+.webextrc
+.webextrc.*

packages/webext/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "carbon-devtools",
+  "private": true,
+  "version": "3.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build"
+  },
+  "dependencies": {
+    "@carbon/ibm-products": "^2.48.0",
+    "@carbon/ibm-security": "^2.15.0",
+    "@carbon/ibmdotcom-utilities": "^2.12.0",
+    "@carbon/ibmdotcom-web-components": "^2.12.0",
+    "@carbon/icons-react": "^10.49.5",
+    "@carbon/react": "^1.65.0",
+    "@carbon/web-components": "^2.12.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.2.1",
+    "sass": "^1.78.0",
+    "vite": "^5.0.0",
+    "vite-plugin-web-extension": "^4.0.0",
+    "webextension-polyfill": "^0.10.0"
+  }
+}

packages/webext/src/background.js

@@ -0,0 +1,7 @@
+import browser from "webextension-polyfill";
+
+console.log("Hello from the background!");
+
+browser.runtime.onInstalled.addListener((details) => {
+  console.log("Extension installed:", details);
+});

packages/webext/src/background/index.js

@@ -0,0 +1,8 @@
+import { validatePage, injectGrid, setBadge } from './tasks';
+import { setStorage } from '@carbon/devtools-utilities/src/setStorage';
+import packageJSON from '../../package.json';
+
+setStorage({ version: packageJSON.version });
+setBadge();
+validatePage();
+injectGrid();

packages/webext/src/background/tasks/index.js

@@ -0,0 +1,3 @@
+export * from './validatePage';
+export * from './injectGrid';
+export * from './setBadge';

packages/webext/src/background/tasks/injectGrid.js

@@ -0,0 +1,33 @@
+import { getMessage } from '@carbon/devtools-utilities/src/getMessage';
+import { insertScriptManifestV3 } from '@carbon/devtools-utilities/src/insertScript';
+import { insertCSSManifestV3 } from '@carbon/devtools-utilities/src/insertCSS';
+import { activeTabAsync } from '@carbon/devtools-utilities/src/activeTab';
+
+function injectGrid() {
+  getMessage(async (msg, sender) => {
+    /* only inject if carbon is found
+           and we haven't injected before */
+    if (msg.runningCarbon && !msg.carbonDevtoolsInjected) {
+      const frameId = msg.ignoreValidation ? 0 : sender.frameId;
+
+      const { id: tabId } = await activeTabAsync();
+      insertScriptManifestV3({
+        files: ['src/inject/index.js'],
+        target: {
+          frameIds: [frameId],
+          tabId,
+        },
+      });
+
+      insertCSSManifestV3({
+        files: ['src/inject/index.css'],
+        target: {
+          frameIds: [frameId],
+          tabId,
+        },
+      });
+    }
+  });
+}
+
+export { injectGrid };

packages/webext/src/background/tasks/setBadge.js

@@ -0,0 +1,72 @@
+import {
+  experimentalStatusChanged,
+  getExperimentalStatus,
+} from '@carbon/devtools-utilities/src/experimental';
+import { magenta } from '@carbon/colors';
+import { defaults } from '../../globals/defaults';
+
+let iconColor = '#888D94';
+let experimental = defaults.generalSettings.experimental;
+
+function setBadge() {
+  manageIcon();
+  experimentalStatusChanged(manageExperimentalBadge);
+  getExperimentalStatus(manageExperimentalBadge);
+}
+
+function manageExperimentalBadge(status) {
+  experimental = status;
+  updateBadgeByRules();
+}
+
+function updateBadgeByRules() {
+  const dev = process.env.NODE_ENV === 'development';
+
+  if (experimental && dev) {
+    createBadge('DEV', magenta[50]);
+  } else if (experimental) {
+    createBadge('EXP', magenta[50]);
+  } else if (dev) {
+    createBadge('DEV', iconColor);
+  } else {
+    createBadge('', iconColor);
+  }
+}
+
+function createBadge(text, color) {
+  chrome.action.setBadgeText({ text: text });
+  chrome.action.setBadgeBackgroundColor({ color: color });
+}
+
+// https://github.com/w3c/ServiceWorker/issues/1577
+function manageIcon() {
+  if (self.matchMedia) {
+    let manualListener;
+
+    setIcon(self.matchMedia('(prefers-color-scheme: dark)').matches);
+
+    self
+      .matchMedia('(prefers-color-scheme: dark)')
+      .addEventListener('change', (e) => {
+        window.clearInterval(manualListener);
+        manualListener = true;
+        setIcon(e.matches);
+      });
+
+    if (!manualListener) {
+      manualListener = window.setInterval(() => {
+        setIcon(window.matchMedia('(prefers-color-scheme: dark)').matches);
+      }, 1000);
+    }
+  }
+}
+
+function setIcon(darkTheme) {
+  darkTheme
+    ? chrome.action.setIcon({ path: '/media/16x16-dark.png' })
+    : chrome.action.setIcon({ path: '/media/16x16-light.png' });
+
+  updateBadgeByRules();
+}
+
+export { setBadge, createBadge };

packages/webext/src/background/tasks/validatePage.js

@@ -0,0 +1,43 @@
+import { getMessage } from '@carbon/devtools-utilities/src/getMessage';
+import { getStorage } from '@carbon/devtools-utilities/src/getStorage';
+import { insertScriptManifestV3 } from '@carbon/devtools-utilities/src/insertScript';
+import { activeTabAsync } from '@carbon/devtools-utilities/src/activeTab';
+
+/// WHEN POP UP IS OPENED VALIDATE PAGE
+function validatePage() {
+  getMessage((msg) => {
+    if (msg.popup) {
+      console.log('popup open detected.');
+
+      insertValidation();
+    }
+  });
+}
+
+function insertValidation(callback) {
+  getStorage(['generalNonCarbon'], async ({ generalNonCarbon }) => {
+    const tab = await activeTabAsync();
+
+    if (tab) {
+      insertScriptManifestV3(
+        {
+          files: ['/src/validate/index.js'],
+          target: {
+            allFrames: !generalNonCarbon, // only top level injection if non carbon option is selected
+            tabId: tab.id,
+          },
+        },
+        () => {
+          if (chrome.runtime.lastError) {
+            console.log(chrome.runtime.lastError.message);
+          } else if (typeof callback === 'function') {
+            callback();
+          }
+        }
+      );
+    }
+
+  });
+}
+
+export { validatePage };

packages/webext/src/globals/componentList.js

@@ -0,0 +1,13 @@
+import {
+  libraries,
+  _results,
+} from '@carbon/devtools-component-list/dist/index.json';
+
+const libraryKeys = Object.keys(libraries);
+const allComponents = {};
+
+libraryKeys.forEach((key) => {
+  Object.assign(allComponents, libraries[key]);
+});
+
+export { allComponents };

packages/webext/src/globals/defaults.js

@@ -0,0 +1,56 @@
+import { gridVersions } from './options';
+
+const defaults = {};
+
+defaults.global = {
+  gridoverlay: true,
+};
+
+defaults.popup = {
+  carbonStatus: 'loading',
+  panelState: {
+    open: false,
+    children: null,
+  },
+};
+
+defaults.grid = {
+  toggle2xGrid: true,
+};
+
+defaults.toggle2x = {
+  toggle2xColumns: true,
+  toggle2xBreakpoints: true,
+  toggle2xPosition: 'Center',
+  toggle2xLeftInfluencer: 0,
+  toggle2xRightLeftInfluencer: 0,
+};
+
+defaults.miniUnit = {
+  miniUnitVerticalBorders: true,
+  miniUnitHorizontalBorders: true,
+};
+
+defaults.specs = {
+  type: 'typography',
+  outline: true,
+};
+
+defaults.gridVersion = Object.keys(gridVersions)[0];
+
+defaults.generalSettings = {
+  theme: 'g90',
+  experimental: false,
+  nonCarbon: false,
+};
+
+defaults.ga = {
+  isIBMer: 'unknown',
+  clientId: 5555,
+  gridVersion: defaults.gridVersion,
+  generalTheme: defaults.generalSettings.theme,
+  generalExperimental: defaults.generalSettings.experimental,
+  generalNonCarbon: defaults.generalSettings.nonCarbon,
+};
+
+export { defaults };

packages/webext/src/globals/index.js

@@ -0,0 +1,3 @@
+export * from './prefixSelectors';
+export * from './options';
+export * from './defaults';

packages/webext/src/globals/options.js

@@ -0,0 +1,37 @@
+import {
+  AlignHorizontalLeft32,
+  AlignHorizontalCenter32,
+  AlignHorizontalRight32,
+  FitToWidth32,
+} from '@carbon/icons-react';
+
+const positions = {
+  'Full width': FitToWidth32,
+  Left: AlignHorizontalLeft32,
+  Center: AlignHorizontalCenter32,
+  Right: AlignHorizontalRight32,
+};
+
+const gridVersions = {
+  'carbon-v10': '2x grid',
+  'carbon-v9': 'v9 grid',
+  // "northstar-fluid": 'Northstar fluid',
+  // "northstar-v19a": 'Northstar fluid v19a',
+  // "northstar-adaptive": 'Northstar adaptive'
+};
+
+const aspectRatios = [
+  '16:9',
+  '9:16',
+  '2:1',
+  '1:2',
+  '4:3',
+  '3:4',
+  '3:2',
+  '2:3',
+  '1:1',
+];
+
+const svgMarkup = ['svg', 'g', 'path', 'rect', 'polygon', 'circle'];
+
+export { positions, gridVersions, aspectRatios, svgMarkup };