Merge 7ad7c05 into 227815a

easyops-cn · Nov 23, 2021 · b691b4b · b691b4b
2 parents 227815a + 7ad7c05
commit b691b4b
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 22 deletions.
diff --git a/extension/manifest.json b/extension/manifest.json
@@ -1,16 +1,15 @@
 {
-  "manifest_version": 2,
+  "manifest_version": 3,
   "name": "Brick Next Developer Tools",
   "description": "Adds Brick Next debugging tools to the Chrome Developer Tools.",
   "version": "0.6.1",
   "icons": {
     "128": "icons/128-production.png"
   },
   "devtools_page": "build/devtools.html",
-  "permissions": ["http://*/*", "https://*/*"],
+  "host_permissions": ["<all_urls>"],
   "background": {
-    "scripts": ["build/background.js"],
-    "persistent": false
+    "service_worker": "build/background.js"
   },
   "content_scripts": [
     {
@@ -20,17 +19,9 @@
     }
   ],
   "web_accessible_resources": [
-    "build/devtools.js",
-    "build/hook.js",
-    "build/panel.html",
-    "build/panel.css",
-    "build/panel.js",
-    "build/panel.js.map",
-    "build/icons-16.eot",
-    "build/icons-16.ttf",
-    "build/icons-16.woff",
-    "build/icons-20.eot",
-    "build/icons-20.ttf",
-    "build/icons-20.woff"
+    {
+      "resources": ["build/hook.js"],
+      "matches": ["<all_urls>"]
+    }
   ]
 }
diff --git a/src/panel/components/Layout.spec.tsx b/src/panel/components/Layout.spec.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { act } from "react-dom/test-utils";
-import { shallow, mount } from "enzyme";
+import { mount } from "enzyme";
 import { Layout } from "./Layout";
 import { Storage } from "../libs/Storage";
 import { BricksPanel } from "./BricksPanel";
@@ -63,37 +63,44 @@ describe("Layout", () => {
   });
 
   it("should work as default theme", () => {
-    const wrapper = shallow(<Layout />);
-    expect(wrapper.hasClass("bp3-dark")).toBe(false);
+    const wrapper = mount(<Layout />);
+    expect(document.documentElement.dataset.theme).toBe("light");
+    expect(wrapper.childAt(0).hasClass("bp3-dark")).toBe(false);
     expect(wrapper.find(BricksPanel).length).toBe(1);
     expect(wrapper.find(EvaluationsPanel).length).toBe(0);
     expect(wrapper.find(TransformationsPanel).length).toBe(0);
+    wrapper.unmount();
   });
 
   it("should work as dark theme", () => {
     mockPanels.themeName = "dark";
-    const wrapper = shallow(<Layout />);
-    expect(wrapper.hasClass("bp3-dark")).toBe(true);
+    const wrapper = mount(<Layout />);
+    expect(document.documentElement.dataset.theme).toBe("dark");
+    expect(wrapper.childAt(0).hasClass("bp3-dark")).toBe(true);
+    wrapper.unmount();
   });
 
   it("should work for bricks panel", () => {
     const wrapper = mount(<Layout />);
     expect(wrapper.text()).toBe("BricksPanel");
     expect(storageSetItem).toBeCalledWith("selectedPanel", "Bricks");
+    wrapper.unmount();
   });
 
   it("should work for evaluations panel", () => {
     storageGetItem.mockReturnValue("Evaluations");
     const wrapper = mount(<Layout />);
     expect(wrapper.text()).toBe("EvaluationsPanel (0)");
     expect(storageSetItem).toBeCalledWith("selectedPanel", "Evaluations");
+    wrapper.unmount();
   });
 
   it("should work for transformations panel", () => {
     storageGetItem.mockReturnValue("Transformations");
     const wrapper = mount(<Layout />);
     expect(wrapper.text()).toBe("TransformationsPanel (0)");
     expect(storageSetItem).toBeCalledWith("selectedPanel", "Transformations");
+    wrapper.unmount();
   });
 
   it("should work for new evaluations", async () => {

diff --git a/src/panel/components/Layout.tsx b/src/panel/components/Layout.tsx
@@ -120,6 +120,10 @@ export function Layout(): React.ReactElement {
 
   const theme = chrome.devtools.panels.themeName === "dark" ? "dark" : "light";
 
+  React.useEffect(() => {
+    document.documentElement.dataset.theme = theme;
+  }, [theme]);
+
   return (
     <div
       className={classNames("layout bp3-focus-disabled", {

diff --git a/src/panel/style.css b/src/panel/style.css
@@ -1,4 +1,5 @@
 :root {
+  --root-bg-color: white;
   --text-color: #182026;
   --pane-border-color: rgba(16, 22, 26, 0.15);
   --brick-label-color: rgb(136, 18, 128);
@@ -12,7 +13,8 @@
   --source-code-type: #0f9960;
 }
 
-.bp3-dark {
+:root[data-theme="dark"] {
+  --root-bg-color: rgb(32, 33, 36);
   --text-color: #f5f8fa;
   --pane-border-color: rgba(255, 255, 255, 0.15);
   --brick-label-color: rgb(93, 176, 215);
@@ -28,6 +30,7 @@
 body {
   margin: 0;
   padding: 0;
+  background-color: var(--root-bg-color);
 }
 
 #root {