@midscene/visualizer 0.2.2 → 0.2.3-beta-20240815085544.0

package/dist/lib/component/blackboard.js

@@ -66,9 +66,6 @@ const noop = () => {
 };
 const BlackBoard = () => {
   const dump = (0, import_store.useInsightDump)((store) => store.data);
-  const setHighlightSectionNames = (0, import_store.useInsightDump)(
-    (store) => store.setHighlightSectionNames
-  );
   const setHighlightElements = (0, import_store.useInsightDump)(
     (store) => store.setHighlightElements
   );
@@ -76,17 +73,18 @@ const BlackBoard = () => {
     (store) => store.highlightSectionNames
   );
   const highlightElements = (0, import_store.useInsightDump)((store) => store.highlightElements);
-  const { context, matchedSection: sections, matchedElement: elements } = dump;
+  const highlightIds = highlightElements.map((e) => e.id);
+  const { context } = dump;
   const { size, screenshotBase64 } = context;
   const screenWidth = size.width;
   const screenHeight = size.height;
   const domRef = (0, import_react.useRef)(null);
   const app = (0, import_react.useMemo)(() => new PIXI.Application(), []);
   const [appInitialed, setAppInitialed] = (0, import_react.useState)(false);
-  const itemMarkContainer = (0, import_react.useMemo)(() => new PIXI.Container(), []);
-  const textContainer = (0, import_react.useMemo)(() => new PIXI.Container(), []);
+  const highlightContainer = (0, import_react.useMemo)(() => new PIXI.Container(), []);
+  const elementMarkContainer = (0, import_react.useMemo)(() => new PIXI.Container(), []);
   const pixiBgRef = (0, import_react.useRef)();
-  const { bgVisible, setBgVisible, textsVisible, setTextsVisible } = (0, import_store.useBlackboardPreference)();
+  const { bgVisible, setBgVisible, elementsVisible, setTextsVisible } = (0, import_store.useBlackboardPreference)();
   (0, import_react.useEffect)(() => {
     Promise.resolve(
       (() => __async(void 0, null, function* () {
@@ -108,8 +106,8 @@ const BlackBoard = () => {
           canvasEl.style.width = `${Math.floor(screenWidth * ratio)}px`;
           canvasEl.style.height = `${Math.floor(screenHeight * ratio)}px`;
         }
-        app.stage.addChild(itemMarkContainer);
-        app.stage.addChild(textContainer);
+        app.stage.addChild(highlightContainer);
+        app.stage.addChild(elementMarkContainer);
         setAppInitialed(true);
       }))()
     );
@@ -159,52 +157,25 @@ const BlackBoard = () => {
     texts.y = Math.max(top - (nameFontSize + 4), 0);
     return [graphics, texts];
   };
-  const { highlightSectionRects, highlightElementRects } = (0, import_react.useMemo)(() => {
-    const highlightSectionRects2 = [];
+  const { highlightElementRects } = (0, import_react.useMemo)(() => {
     const highlightElementRects2 = [];
-    itemMarkContainer.removeChildren();
-    textContainer.removeChildren();
-    sections.forEach((section) => {
-      const ifHighlight = highlightSectionNames.includes(section.name);
+    highlightContainer.removeChildren();
+    elementMarkContainer.removeChildren();
+    context.content.forEach((element) => {
+      const { rect, content, id } = element;
+      const ifHighlight = highlightIds.includes(id);
       if (ifHighlight) {
-        highlightSectionRects2.push(section.rect);
-      }
-      const [graphics, texts] = rectMarkForItem(
-        section.rect,
-        section.name,
-        ifHighlight ? (0, import_color.highlightColorForType)("section") : (0, import_color.colorForName)("section", section.name),
-        ifHighlight ? 1 : itemFillAlpha,
-        () => {
-          setHighlightSectionNames([section.name]);
-        },
-        () => {
-          setHighlightSectionNames([]);
-        }
-      );
-      itemMarkContainer.addChild(graphics);
-      textContainer.addChild(texts);
-    });
-    highlightElements.forEach((element) => {
-      const { rect } = element;
-      highlightElementRects2.push(rect);
-      if (elements.includes(element)) {
-        return;
+        const [graphics2] = rectMarkForItem(
+          rect,
+          content,
+          ifHighlight ? (0, import_color.highlightColorForType)("element") : (0, import_color.colorForName)("element", content),
+          ifHighlight ? 1 : itemFillAlpha,
+          noop,
+          noop
+        );
+        highlightContainer.addChild(graphics2);
       }
-      const [graphics, texts] = rectMarkForItem(
-        rect,
-        "",
-        (0, import_color.highlightColorForType)("element"),
-        1,
-        noop,
-        noop
-      );
-      itemMarkContainer.addChild(graphics);
-      textContainer.addChild(texts);
-    });
-    elements.forEach((element) => {
-      const { rect, content } = element;
-      const ifHighlight = highlightElements.includes(element);
-      const [graphics, texts] = rectMarkForItem(
+      const [graphics] = rectMarkForItem(
         rect,
         content,
         ifHighlight ? (0, import_color.highlightColorForType)("element") : (0, import_color.colorForName)("element", content),
@@ -216,47 +187,19 @@ const BlackBoard = () => {
           setHighlightElements([]);
         }
       );
-      itemMarkContainer.addChild(graphics);
-      textContainer.addChild(texts);
-    });
-    sections.forEach((section) => {
-      const { content } = section;
-      const ifHighlight = highlightSectionNames.includes(section.name);
-      const sectionTheme = ifHighlight ? "#FFFFFF" : (0, import_color.colorForName)("section", section.name);
-      content.forEach((text) => {
-        const { content: content2, rect } = text;
-        const { left, top } = rect;
-        const style = new PIXI.TextStyle({
-          wordWrap: true,
-          wordWrapWidth: rect.width,
-          fontSize: 18,
-          fill: sectionTheme
-        });
-        const textElement = new PIXI.Text(content2, style);
-        textElement.x = left;
-        textElement.y = top;
-        textContainer.addChild(textElement);
-        const textBorder = new PIXI.Graphics();
-        textBorder.beginFill(11184810, 0.2);
-        textBorder.lineStyle(1, 0, 1);
-        textBorder.drawRect(left, top, rect.width, rect.height);
-        textBorder.endFill();
-        textContainer.addChild(textBorder);
-      });
+      elementMarkContainer.addChild(graphics);
     });
-    textContainer.visible = textsVisible;
+    elementMarkContainer.visible = elementsVisible;
     return {
-      highlightSectionRects: highlightSectionRects2,
       highlightElementRects: highlightElementRects2
     };
   }, [
     app,
     appInitialed,
-    sections,
-    highlightSectionNames,
-    highlightElements
+    highlightElements,
+    context.content
     // bgVisible,
-    // textsVisible,
+    // elementsVisible,
   ]);
   const onSetBg = (e) => {
     setBgVisible(e.target.checked);
@@ -264,9 +207,9 @@ const BlackBoard = () => {
       pixiBgRef.current.alpha = e.target.checked ? bgOnAlpha : bgOffAlpha;
     }
   };
-  const onSetTextsVisible = (e) => {
+  const onSetElementsVisible = (e) => {
     setTextsVisible(e.target.checked);
-    textContainer.visible = e.target.checked;
+    elementMarkContainer.visible = e.target.checked;
   };
   let bottomTipA = null;
   if (highlightElementRects.length === 1) {
@@ -280,18 +223,6 @@ const BlackBoard = () => {
       JSON.stringify(highlightElementRects)
     ] }) });
   }
-  let bottomTipB = null;
-  if (highlightSectionRects.length === 1) {
-    bottomTipB = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "bottom-tip", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bottom-tip-item", children: [
-      "Section: ",
-      JSON.stringify(highlightSectionRects[0])
-    ] }) });
-  } else if (highlightSectionRects.length > 1) {
-    bottomTipB = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "bottom-tip", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bottom-tip-item", children: [
-      "Sections: ",
-      JSON.stringify(highlightSectionRects)
-    ] }) });
-  }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "blackboard", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
@@ -303,12 +234,9 @@ const BlackBoard = () => {
     ),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "blackboard-filter", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "overlay-control", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Checkbox, { checked: bgVisible, onChange: onSetBg, children: "Screenshot" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Checkbox, { checked: textsVisible, onChange: onSetTextsVisible, children: "Text Mark" })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Checkbox, { checked: elementsVisible, onChange: onSetElementsVisible, children: "Elements" })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bottom-tip", children: [
-      bottomTipA,
-      bottomTipB
-    ] })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "bottom-tip", children: bottomTipA })
   ] });
 };
 var blackboard_default = BlackBoard;

package/dist/lib/component/detail-panel.css

@@ -22,6 +22,12 @@
 .detail-panel .blackboard {
   margin: 0 auto;
 }
+.detail-panel .screenshot-item-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  align-items: center;
+}
 .detail-panel .screenshot-item {
   margin-bottom: 10px;
 }

package/dist/lib/component/detail-panel.js

@@ -70,7 +70,7 @@ const DetailPanel = () => {
     }
   } else if (viewType === VIEW_TYPE_SCREENSHOT) {
     if ((_a = activeTask.recorder) == null ? void 0 : _a.length) {
-      content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: activeTask.recorder.filter((item) => item.screenshot).map((item, index) => {
+      content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "screenshot-item-wrapper", children: activeTask.recorder.filter((item) => item.screenshot).map((item, index) => {
         const fullTime = (0, import_utils.timeStr)(item.ts);
         const str = item.timing ? `${fullTime} / ${item.timing}` : fullTime;
         return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ScreenshotItem, { time: str, img: item.screenshot }, index);

package/dist/lib/component/misc.js

@@ -18,10 +18,12 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var misc_exports = {};
 __export(misc_exports, {
+  iconForStatus: () => iconForStatus,
   timeCostStrElement: () => timeCostStrElement
 });
 module.exports = __toCommonJS(misc_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_icons = require("@ant-design/icons");
 function timeCostStrElement(timeCost) {
   let str;
   if (typeof timeCost !== "number") {
@@ -42,7 +44,28 @@ function timeCostStrElement(timeCost) {
     }
   );
 }
+const iconForStatus = (status) => {
+  switch (status) {
+    case "success":
+    case "passed":
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { color: "#2B8243" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CheckCircleFilled, {}) });
+    case "failed":
+    case "timedOut":
+    case "interrupted":
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { color: "#FF0A0A" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CloseCircleFilled, {}) });
+    case "pending":
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.ClockCircleFilled, {});
+    case "cancelled":
+    case "skipped":
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.LogoutOutlined, {});
+    case "running":
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.ArrowRightOutlined, {});
+    default:
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.MinusOutlined, {});
+  }
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  iconForStatus,
   timeCostStrElement
 });

package/dist/lib/component/panel-title.css

@@ -1,8 +1,10 @@
-.task-list-name {
-  padding: 2px 10px;
-  font-weight: bold;
+.panel-title {
   background: #F8F8F8;
   border-top: 1px solid #E5E5E5;
   border-bottom: 1px solid #E5E5E5;
   margin-top: -1px;
+  padding: 2px 10px;
+}
+.panel-title .task-list-name {
+  font-weight: bold;
 }

package/dist/lib/component/panel-title.js

@@ -24,6 +24,10 @@ module.exports = __toCommonJS(panel_title_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_panel_title = require("./panel-title.css");
 const PanelTitle = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "task-list-name", children: props.title }) });
+  const subTitleEl = props.subTitle ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "task-list-sub-name", children: props.subTitle }) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "panel-title", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "task-list-name", children: props.title }),
+    subTitleEl
+  ] });
 };
 var panel_title_default = PanelTitle;

package/dist/lib/component/sidebar.css

@@ -7,11 +7,7 @@
   border-right: 1px solid #E5E5E5;
   overflow: auto;
   background: #F8F8F8;
-}
-.side-bar .brand {
-  padding: 10px 5px;
-  cursor: pointer;
-  display: flex;
+  box-sizing: border-box;
 }
 .side-bar .task-meta-section {
   margin-top: 6px;
@@ -72,12 +68,6 @@
   top: 50%;
   margin-top: -5px;
 }
-.side-bar .side-item-name .status-icon-success {
-  color: #2B8243;
-}
-.side-bar .side-item-name .status-icon-fail {
-  color: #ff0a0a;
-}
 .side-bar .side-item-name .status-text {
   color: #777;
 }

package/dist/lib/component/sidebar.js

@@ -38,25 +38,12 @@ var import_utils = require("../utils");
 var import_icons = require("@ant-design/icons");
 var import_antd = require("antd");
 var import_react = require("react");
-var import_logo_plain2 = __toESM(require("./assets/logo-plain2.js"));
 var import_misc = require("./misc");
 var import_panel_title = __toESM(require("./panel-title"));
 const SideItem = (props) => {
   var _a;
   const { task, onClick, selected } = props;
   const selectedClass = selected ? "selected" : "";
-  let statusIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.MinusOutlined, {});
-  if (task.status === "success") {
-    statusIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CheckCircleFilled, {});
-  } else if (task.status === "fail") {
-    statusIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CloseCircleFilled, {});
-  } else if (task.status === "pending") {
-    statusIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.ClockCircleFilled, {});
-  } else if (task.status === "cancelled") {
-    statusIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.LogoutOutlined, {});
-  } else if (task.status === "running") {
-    statusIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.ArrowRightOutlined, {});
-  }
   let statusText = task.status;
   if ((_a = task.timing) == null ? void 0 : _a.cost) {
     statusText = (0, import_misc.timeCostStrElement)(task.timing.cost);
@@ -80,7 +67,7 @@ const SideItem = (props) => {
       children: [
         " ",
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "side-item-name", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `status-icon status-icon-${task.status}`, children: statusIcon }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "status-icon", children: (0, import_misc.iconForStatus)(task.status) }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "title", children: (0, import_utils.typeStr)(task) }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "status-text", children: statusText })
         ] })
@@ -89,7 +76,7 @@ const SideItem = (props) => {
   );
 };
 const Sidebar = (props) => {
-  const groupedDumps = (0, import_store.useExecutionDump)((store) => store.dump);
+  const groupedDump = (0, import_store.useExecutionDump)((store) => store.dump);
   const setActiveTask = (0, import_store.useExecutionDump)((store) => store.setActiveTask);
   const activeTask = (0, import_store.useExecutionDump)((store) => store.activeTask);
   const setHoverTask = (0, import_store.useExecutionDump)((store) => store.setHoverTask);
@@ -129,7 +116,7 @@ const Sidebar = (props) => {
       document.removeEventListener("keydown", handleKeyDown);
     };
   }, [currentSelectedIndex, allTasks, setActiveTask]);
-  const sideList = (groupedDumps == null ? void 0 : groupedDumps.length) ? groupedDumps.map((group, groupIndex) => {
+  const sideList = groupedDump ? [groupedDump].map((group, groupIndex) => {
     const executions = group.executions.map((execution, indexOfExecution) => {
       const { tasks } = execution;
       const taskList = tasks.map((task, index) => {
@@ -179,27 +166,6 @@ const Sidebar = (props) => {
   }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "no tasks" });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "side-bar", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "top-controls", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "div",
-        {
-          className: "brand",
-          onClick: reset,
-          style: { display: (props == null ? void 0 : props.hideLogo) ? "none" : "flex" },
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_logo_plain2.default,
-            {
-              style: { width: 70, height: 70, margin: "auto" },
-              onClick: () => {
-                if (props.logoAction) {
-                  props.logoAction();
-                } else {
-                  location.reload();
-                }
-              }
-            }
-          )
-        }
-      ),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "task-list", children: sideList }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "side-seperator side-seperator-line side-seperator-space-up" }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "task-meta-section", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "task-meta", children: "switch: Command + Up / Down" }) })

package/dist/lib/component/store.js

@@ -1,10 +1,12 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
@@ -32,6 +34,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var store_exports = {};
 __export(store_exports, {
@@ -41,18 +51,19 @@ __export(store_exports, {
   useInsightDump: () => useInsightDump
 });
 module.exports = __toCommonJS(store_exports);
-var import_zustand = require("zustand");
-const useBlackboardPreference = (0, import_zustand.create)((set) => ({
-  bgVisible: false,
-  textsVisible: true,
+var Z = __toESM(require("zustand"));
+const { create } = Z;
+const useBlackboardPreference = create((set) => ({
+  bgVisible: true,
+  elementsVisible: false,
   setBgVisible: (visible) => {
     set({ bgVisible: visible });
   },
   setTextsVisible: (visible) => {
-    set({ textsVisible: visible });
+    set({ elementsVisible: visible });
   }
 }));
-const useExecutionDump = (0, import_zustand.create)((set, get) => {
+const useExecutionDump = create((set, get) => {
   const initData = {
     dump: null,
     activeTask: null,
@@ -71,14 +82,12 @@ const useExecutionDump = (0, import_zustand.create)((set, get) => {
   return __spreadProps(__spreadValues({}, initData), {
     setGroupedDump: (dump) => {
       console.log("will set ExecutionDump", dump);
-      set({
+      set(__spreadProps(__spreadValues({}, initData), {
         dump
-      });
-      for (const item of dump) {
-        if (item.executions.length > 0 && item.executions[0].tasks.length > 0) {
-          get().setActiveTask(item.executions[0].tasks[0]);
-          break;
-        }
+      }));
+      resetInsightDump();
+      if (dump.executions.length > 0 && dump.executions[0].tasks.length > 0) {
+        get().setActiveTask(dump.executions[0].tasks[0]);
       }
     },
     setActiveTask(task) {
@@ -113,17 +122,16 @@ const useExecutionDump = (0, import_zustand.create)((set, get) => {
   });
 });
 const useAllCurrentTasks = () => {
-  const groupedDumps = useExecutionDump((store) => store.dump);
-  const allTasks = (groupedDumps == null ? void 0 : groupedDumps.reduce((acc, group) => {
-    const tasksInside = group.executions.reduce(
-      (acc2, execution) => acc2.concat(execution.tasks),
-      []
-    );
-    return acc.concat(tasksInside);
-  }, [])) || [];
-  return allTasks;
+  const groupedDump = useExecutionDump((store) => store.dump);
+  if (!groupedDump)
+    return [];
+  const tasksInside = groupedDump.executions.reduce(
+    (acc2, execution) => acc2.concat(execution.tasks),
+    []
+  );
+  return tasksInside;
 };
-const useInsightDump = (0, import_zustand.create)((set) => {
+const useInsightDump = create((set) => {
   let loadId = 0;
   const initData = {
     _loadId: 0,

package/dist/lib/index.css

@@ -2,6 +2,7 @@ html,
 body {
   padding: 0;
   margin: 0;
+  line-height: 1;
 }
 .rspress-nav {
   transition: 0.2s;
@@ -46,6 +47,46 @@ footer.mt-8 {
   font-size: 14px;
   border-top: 1px solid #E5E5E5;
   border-bottom: 1px solid #E5E5E5;
+  font-synthesis: style;
+  text-rendering: optimizelegibility;
+  -webkit-font-smoothing: antialiased;
+  line-height: 1.5;
+}
+.page-container blockquote,
+.page-container dl,
+.page-container dd,
+.page-container h1,
+.page-container h2,
+.page-container h3,
+.page-container h4,
+.page-container h5,
+.page-container h6,
+.page-container hr,
+.page-container figure,
+.page-container p,
+.page-container pre {
+  margin: 0;
+}
+.page-nav {
+  height: 30px;
+  padding: 10px;
+  border-bottom: 1px solid #E5E5E5;
+  display: flex;
+  flex-direction: row;
+}
+.page-nav .logo img {
+  height: 20px;
+  line-height: 30px;
+  vertical-align: baseline;
+  vertical-align: -webkit-baseline-middle;
+}
+.page-nav .playwright-case-selector {
+  margin-left: 20px;
+  line-height: 30px;
+  width: 320px;
+}
+.cost-str {
+  color: #777;
 }
 .ant-layout {
   flex-grow: 1;
@@ -91,6 +132,7 @@ footer.mt-8 {
 .main-right .main-side {
   box-sizing: border-box;
   overflow-y: scroll;
+  height: 100%;
 }
 .main-right .json-content {
   word-wrap: break-word;