@midscene/visualizer 0.1.4 → 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021-present Midscene.js
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,24 +1,7 @@
-# visualizer
+## Documentation
 
-## Get Started
+See https://midscenejs.com/ for details.
 
-按开发环境的要求，运行和调试项目
-
-运行和调试组件
-
-```
-pnpm run dev
-```
-
-按照社区规范和最佳实践，生成构建产物
-
-```
-pnpm run build
-```
-
-继续创建更多项目要素
-
-```
-pnpm run new
-```
+## License
 
+Midscene is MIT licensed.

package/dist/es/component/blackboard.js

@@ -20,10 +20,10 @@ var __async = (__this, __arguments, generator) => {
   });
 };
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Checkbox } from "antd";
 import * as PIXI from "pixi.js";
 import { useEffect, useMemo, useRef, useState } from "react";
-import { Checkbox } from "antd";
-import { highlightColorForType, colorForName } from "./color";
+import { colorForName, highlightColorForType } from "./color";
 import "./blackboard.css";
 import { useBlackboardPreference, useInsightDump } from "./store";
 const itemFillAlpha = 0.3;
@@ -33,9 +33,15 @@ const noop = () => {
 };
 const BlackBoard = () => {
   const dump = useInsightDump((store) => store.data);
-  const setHighlightSectionNames = useInsightDump((store) => store.setHighlightSectionNames);
-  const setHighlightElements = useInsightDump((store) => store.setHighlightElements);
-  const highlightSectionNames = useInsightDump((store) => store.highlightSectionNames);
+  const setHighlightSectionNames = useInsightDump(
+    (store) => store.setHighlightSectionNames
+  );
+  const setHighlightElements = useInsightDump(
+    (store) => store.setHighlightElements
+  );
+  const highlightSectionNames = useInsightDump(
+    (store) => store.highlightSectionNames
+  );
   const highlightElements = useInsightDump((store) => store.highlightElements);
   const { context, matchedSection: sections, matchedElement: elements } = dump;
   const { size, screenshotBase64 } = context;
@@ -54,7 +60,11 @@ const BlackBoard = () => {
         if (!domRef.current || !screenWidth) {
           return;
         }
-        yield app.init({ width: screenWidth, height: screenHeight, background: 16777215 });
+        yield app.init({
+          width: screenWidth,
+          height: screenHeight,
+          background: 16777215
+        });
         const canvasEl = domRef.current;
         domRef.current.appendChild(app.canvas);
         const { clientWidth } = domRef.current.parentElement;
@@ -147,7 +157,14 @@ const BlackBoard = () => {
       if (elements.includes(element)) {
         return;
       }
-      const [graphics, texts] = rectMarkForItem(rect, "", highlightColorForType("element"), 1, noop, noop);
+      const [graphics, texts] = rectMarkForItem(
+        rect,
+        "",
+        highlightColorForType("element"),
+        1,
+        noop,
+        noop
+      );
       itemMarkContainer.addChild(graphics);
       textContainer.addChild(texts);
     });
@@ -243,7 +260,14 @@ const BlackBoard = () => {
     ] }) });
   }
   return /* @__PURE__ */ jsxs("div", { className: "blackboard", children: [
-    /* @__PURE__ */ jsx("div", { className: "blackboard-main-content", style: { width: "100%" }, ref: domRef }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "blackboard-main-content",
+        style: { width: "100%" },
+        ref: domRef
+      }
+    ),
     /* @__PURE__ */ jsx("div", { className: "blackboard-filter", children: /* @__PURE__ */ jsxs("div", { className: "overlay-control", children: [
       /* @__PURE__ */ jsx(Checkbox, { checked: bgVisible, onChange: onSetBg, children: "Screenshot" }),
       /* @__PURE__ */ jsx(Checkbox, { checked: textsVisible, onChange: onSetTextsVisible, children: "Text Mark" })

package/dist/es/component/color.js

@@ -17,16 +17,14 @@ function colorForName(type, name) {
   const hashNumber = djb2Hash(name);
   if (type === "section") {
     return sectionColor[hashNumber % sectionColor.length];
-  } else {
-    return elementColor[hashNumber % elementColor.length];
   }
+  return elementColor[hashNumber % elementColor.length];
 }
 function highlightColorForType(type) {
   if (type === "section") {
     return highlightColorForSection;
-  } else {
-    return highlightColorForElement;
   }
+  return highlightColorForElement;
 }
 export {
   colorForName,

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

@@ -1,16 +1,20 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import "./detail-panel.css";
-import { Segmented, ConfigProvider } from "antd";
-import { CameraOutlined, FileTextOutlined, ScheduleOutlined } from "@ant-design/icons";
+import { useExecutionDump, useInsightDump } from "./store";
+import { filterBase64Value, timeStr } from "../utils";
+import {
+  CameraOutlined,
+  FileTextOutlined,
+  ScheduleOutlined
+} from "@ant-design/icons";
+import { ConfigProvider, Segmented } from "antd";
 import { useEffect, useState } from "react";
 import BlackBoard from "./blackboard";
-import { useExecutionDump, useInsightDump } from "./store";
-import { timeStr, filterBase64Value } from "../utils";
 const ScreenshotItem = (props) => {
   return /* @__PURE__ */ jsxs("div", { className: "screenshot-item", children: [
     /* @__PURE__ */ jsx("div", { className: "screenshot-item-title", children: props.time }),
-    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("img", { src: props.img }) })
+    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("img", { src: props.img, alt: "screenshot" }) })
   ] });
 };
 const VIEW_TYPE_BLACKBOARD = "blackboard";
@@ -18,18 +22,19 @@ const VIEW_TYPE_SCREENSHOT = "screenshot";
 const VIEW_TYPE_JSON = "json";
 const DetailPanel = () => {
   var _a;
+  const dumpContext = useInsightDump((store) => store.data);
   const dumpId = useInsightDump((store) => store._loadId);
-  const blackboardViewAvailable = Boolean(dumpId);
+  const blackboardViewAvailable = Boolean(dumpContext);
   const activeTask = useExecutionDump((store) => store.activeTask);
   const [preferredViewType, setViewType] = useState(VIEW_TYPE_BLACKBOARD);
-  const viewType = preferredViewType === VIEW_TYPE_BLACKBOARD && !dumpId ? VIEW_TYPE_SCREENSHOT : preferredViewType;
+  const viewType = preferredViewType === VIEW_TYPE_BLACKBOARD && !blackboardViewAvailable ? VIEW_TYPE_SCREENSHOT : preferredViewType;
   let content;
   if (!activeTask) {
     content = /* @__PURE__ */ jsx("div", { children: "please select a task" });
   } else if (viewType === VIEW_TYPE_JSON) {
     content = /* @__PURE__ */ jsx("div", { className: "json-content", children: filterBase64Value(JSON.stringify(activeTask, void 0, 2)) });
   } else if (viewType === VIEW_TYPE_BLACKBOARD) {
-    if (dumpId) {
+    if (blackboardViewAvailable) {
       content = /* @__PURE__ */ jsx(BlackBoard, {}, `${dumpId}`);
     } else {
       content = /* @__PURE__ */ jsx("div", { children: "invalid view" });
@@ -53,7 +58,9 @@ const DetailPanel = () => {
         } else if (viewType === VIEW_TYPE_SCREENSHOT) {
           setViewType(VIEW_TYPE_JSON);
         } else {
-          setViewType(blackboardViewAvailable ? VIEW_TYPE_BLACKBOARD : VIEW_TYPE_SCREENSHOT);
+          setViewType(
+            blackboardViewAvailable ? VIEW_TYPE_BLACKBOARD : VIEW_TYPE_SCREENSHOT
+          );
         }
         e.preventDefault();
       }
@@ -64,11 +71,19 @@ const DetailPanel = () => {
     };
   });
   const options = [
-    { label: "Screenshots", value: VIEW_TYPE_SCREENSHOT, icon: /* @__PURE__ */ jsx(CameraOutlined, {}) },
+    {
+      label: "Screenshots",
+      value: VIEW_TYPE_SCREENSHOT,
+      icon: /* @__PURE__ */ jsx(CameraOutlined, {})
+    },
     { label: "JSON View", value: VIEW_TYPE_JSON, icon: /* @__PURE__ */ jsx(FileTextOutlined, {}) }
   ];
   if (blackboardViewAvailable) {
-    options.unshift({ label: "Visualization", value: VIEW_TYPE_BLACKBOARD, icon: /* @__PURE__ */ jsx(ScheduleOutlined, {}) });
+    options.unshift({
+      label: "Visualization",
+      value: VIEW_TYPE_BLACKBOARD,
+      icon: /* @__PURE__ */ jsx(ScheduleOutlined, {})
+    });
   }
   return /* @__PURE__ */ jsxs("div", { className: "detail-panel", children: [
     /* @__PURE__ */ jsx("div", { className: "view-switcher", children: /* @__PURE__ */ jsx(
@@ -77,11 +92,10 @@ const DetailPanel = () => {
         theme: {
           components: {
             Segmented: {
-              itemSelectedBg: "#D7D7D7",
+              itemSelectedBg: "#bfc4da50",
               itemSelectedColor: "#000000"
               // itemHoverColor: '#ffffff',
-              // itemHoverBg: '#A3D6D2', // @sub-blue
-              /* 这里是你的组件 token */
+              // itemHoverBg: '#A3D6D2',
             }
           }
         },

package/dist/es/component/detail-side.css

@@ -18,7 +18,6 @@
   line-height: 1.5;
 }
 .detail-side .meta-kv .meta .meta-key {
-  font-weight: bold;
   width: 100px;
   text-align: right;
   padding-right: 16px;
@@ -82,6 +81,7 @@
   font-size: 14px;
   margin-top: 10px;
   white-space: break-spaces;
+  word-wrap: break-word;
   margin: 0;
 }
 .detail-side .item-list .element-button:hover {

package/dist/es/component/detail-side.js

@@ -17,18 +17,34 @@ var __spreadValues = (a, b) => {
 };
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import "./detail-side.css";
+import { timeStr, typeStr } from "../utils";
 import { RadiusSettingOutlined } from "@ant-design/icons";
-import { Tooltip, Tag, Timeline } from "antd";
+import { Tag, Timeline, Tooltip } from "antd";
 import { highlightColorForType } from "./color";
-import { useExecutionDump, useInsightDump } from "./store";
-import PanelTitle from "./panel-title";
 import { timeCostStrElement } from "./misc";
-import { timeStr, typeStr } from "../utils";
+import PanelTitle from "./panel-title";
+import { useExecutionDump, useInsightDump } from "./store";
 const noop = () => {
 };
 const Card = (props) => {
-  const { highlightWithColor, title, subtitle, onMouseEnter, onMouseLeave, content, characteristic } = props;
-  const titleTag = props.characteristic ? /* @__PURE__ */ jsx("div", { className: "item-extra", children: /* @__PURE__ */ jsx("div", { className: "title-tag", children: /* @__PURE__ */ jsx(Tooltip, { placement: "bottomRight", title: characteristic, mouseEnterDelay: 0, children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(RadiusSettingOutlined, {}) }) }) }) }) : null;
+  const {
+    highlightWithColor,
+    title,
+    subtitle,
+    onMouseEnter,
+    onMouseLeave,
+    content,
+    characteristic
+  } = props;
+  const titleTag = props.characteristic ? /* @__PURE__ */ jsx("div", { className: "item-extra", children: /* @__PURE__ */ jsx("div", { className: "title-tag", children: /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      placement: "bottomRight",
+      title: characteristic,
+      mouseEnterDelay: 0,
+      children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(RadiusSettingOutlined, {}) })
+    }
+  ) }) }) : null;
   const titleRightPaddingClass = props.characteristic ? "title-right-padding" : "";
   const modeClass = props.liteMode ? "item-lite" : "";
   const highlightStyle = highlightWithColor ? { backgroundColor: highlightWithColor } : {};
@@ -40,12 +56,33 @@ const Card = (props) => {
       onMouseEnter,
       onMouseLeave,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: `title ${titleRightPaddingClass}`, style: { display: title ? "block" : "none" }, children: [
-          title,
-          titleTag
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: `subtitle ${titleRightPaddingClass}`, style: { display: subtitle ? "block" : "none" }, children: subtitle }),
-        /* @__PURE__ */ jsx("div", { className: "description", style: { display: content ? "block" : "none" }, children: content })
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `title ${titleRightPaddingClass}`,
+            style: { display: title ? "block" : "none" },
+            children: [
+              title,
+              titleTag
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `subtitle ${titleRightPaddingClass}`,
+            style: { display: subtitle ? "block" : "none" },
+            children: subtitle
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "description",
+            style: { display: content ? "block" : "none" },
+            children: content
+          }
+        )
       ]
     }
   );
@@ -65,27 +102,33 @@ const objectWithoutKeys = (obj, keys) => Object.keys(obj).reduce((acc, key) => {
   return acc;
 }, {});
 const DetailSide = () => {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
   const task = useExecutionDump((store) => store.activeTask);
   const dump = useInsightDump((store) => store.data);
   const { matchedSection: sections, matchedElement: elements } = dump || {};
-  const highlightSectionNames = useInsightDump((store) => store.highlightSectionNames);
+  const highlightSectionNames = useInsightDump(
+    (store) => store.highlightSectionNames
+  );
   const highlightElements = useInsightDump((store) => store.highlightElements);
-  const setHighlightSectionNames = useInsightDump((store) => store.setHighlightSectionNames);
-  const setHighlightElements = useInsightDump((store) => store.setHighlightElements);
-  const setHighlightSectionName = function(name) {
+  const setHighlightSectionNames = useInsightDump(
+    (store) => store.setHighlightSectionNames
+  );
+  const setHighlightElements = useInsightDump(
+    (store) => store.setHighlightElements
+  );
+  const setHighlightSectionName = (name) => {
     setHighlightSectionNames([name]);
   };
-  const setHighlightElement = function(element) {
+  const setHighlightElement = (element) => {
     setHighlightElements([element]);
   };
-  const unhighlightSection = function() {
+  const unhighlightSection = () => {
     setHighlightSectionNames([]);
   };
-  const unhighlightElement = function() {
+  const unhighlightElement = () => {
     setHighlightElements([]);
   };
-  const kv = function(data) {
+  const kv = (data) => {
     const isElementItem = (value) => Boolean(value) && typeof value === "object" && typeof value.content !== "undefined" && Boolean(value.center) && Boolean(value.rect);
     const isSectionItem = (value) => Boolean(value) && typeof (value == null ? void 0 : value.sectionCharacteristics) !== "undefined" && typeof (value == null ? void 0 : value.rect) !== "undefined";
     const elementEl = (value) => /* @__PURE__ */ jsx(
@@ -149,6 +192,10 @@ const DetailSide = () => {
       {
         key: "time cost",
         content: timeCostStrElement((_c = task == null ? void 0 : task.timing) == null ? void 0 : _c.cost)
+      },
+      {
+        key: "cache",
+        content: (task == null ? void 0 : task.cache) ? JSON.stringify(task == null ? void 0 : task.cache) : "false"
       }
     ]
   });
@@ -157,7 +204,10 @@ const DetailSide = () => {
     taskParam = MetaKV({
       data: [
         { key: "type", content: task && typeStr(task) || "" },
-        { key: "param", content: (_d = task == null ? void 0 : task.param) == null ? void 0 : _d.userPrompt }
+        {
+          key: "param",
+          content: (_d = task == null ? void 0 : task.param) == null ? void 0 : _d.userPrompt
+        }
       ]
     });
   } else if ((task == null ? void 0 : task.type) === "Insight") {
@@ -167,7 +217,7 @@ const DetailSide = () => {
         {
           key: "param",
           content: JSON.stringify(
-            ((_e = task == null ? void 0 : task.param) == null ? void 0 : _e.prompt) || ((_f = task == null ? void 0 : task.param) == null ? void 0 : _f.dataDemand)
+            ((_e = task == null ? void 0 : task.param) == null ? void 0 : _e.prompt) || ((_f = task == null ? void 0 : task.param) == null ? void 0 : _f.dataDemand) || ((_g = task == null ? void 0 : task.param) == null ? void 0 : _g.assertion)
           )
         }
       ]
@@ -178,7 +228,11 @@ const DetailSide = () => {
         { key: "type", content: task && typeStr(task) || "" },
         {
           key: "value",
-          content: JSON.stringify((_g = task == null ? void 0 : task.param) == null ? void 0 : _g.value, void 0, 2)
+          content: JSON.stringify(
+            (_h = task == null ? void 0 : task.param) == null ? void 0 : _h.value,
+            void 0,
+            2
+          )
         }
       ]
     });
@@ -237,14 +291,14 @@ const DetailSide = () => {
       idx
     );
   }) : null;
-  const errorSection = (dump == null ? void 0 : dump.error) ? /* @__PURE__ */ jsx(
+  const errorSection = (task == null ? void 0 : task.error) ? /* @__PURE__ */ jsx(
     Card,
     {
       liteMode: true,
       title: "Error",
       onMouseEnter: noop,
       onMouseLeave: noop,
-      content: /* @__PURE__ */ jsx("pre", { className: "description-content", style: { color: "#F00" }, children: dump.error })
+      content: /* @__PURE__ */ jsx("pre", { className: "description-content", style: { color: "#F00" }, children: task.error })
     }
   ) : null;
   const dataCard = (dump == null ? void 0 : dump.data) ? /* @__PURE__ */ jsx(
@@ -256,8 +310,24 @@ const DetailSide = () => {
       content: /* @__PURE__ */ jsx("pre", { children: JSON.stringify(dump.data, void 0, 2) })
     }
   ) : null;
-  console.log("dump is", dump);
-  const plans = (_h = task == null ? void 0 : task.output) == null ? void 0 : _h.plans;
+  let assertionCard = null;
+  if ((task == null ? void 0 : task.type) === "Insight" && task.subType === "Assert") {
+    assertionCard = /* @__PURE__ */ jsx(
+      Card,
+      {
+        liteMode: true,
+        title: "Assert",
+        onMouseEnter: noop,
+        onMouseLeave: noop,
+        content: /* @__PURE__ */ jsx("pre", { className: "description-content", children: JSON.stringify(
+          task.output,
+          void 0,
+          2
+        ) })
+      }
+    );
+  }
+  const plans = (_i = task == null ? void 0 : task.output) == null ? void 0 : _i.plans;
   let timelineData = [];
   if (plans) {
     timelineData = timelineData.concat(
@@ -282,6 +352,7 @@ const DetailSide = () => {
     /* @__PURE__ */ jsxs("div", { className: "item-list item-list-space-up", children: [
       errorSection,
       dataCard,
+      assertionCard,
       matchedSectionsEl,
       matchedElementsEl,
       /* @__PURE__ */ jsx(Timeline, { items: timelineData })

package/dist/es/component/global-hover-preview.css

@@ -6,9 +6,9 @@
   overflow: hidden;
   z-index: 10;
   text-align: center;
-  border: 1px solid #CCCCCC;
+  border: 1px solid #E5E5E5;
   box-sizing: border-box;
-  background: #f7f7f7;
+  background: #F8F8F8;
   box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.2);
 }
 .global-hover-preview img {

package/dist/es/component/global-hover-preview.js

@@ -8,7 +8,9 @@ const GlobalHoverPreview = () => {
   const wrapperRef = useRef(null);
   const hoverTask = useExecutionDump((store) => store.hoverTask);
   const hoverTimestamp = useExecutionDump((store) => store.hoverTimestamp);
-  const hoverPreviewConfig = useExecutionDump((store) => store.hoverPreviewConfig);
+  const hoverPreviewConfig = useExecutionDump(
+    (store) => store.hoverPreviewConfig
+  );
   const [imageW, setImageW] = useState(size);
   const [imageH, setImageH] = useState(size);
   const images = (_a = hoverTask == null ? void 0 : hoverTask.recorder) == null ? void 0 : _a.filter((item) => {
@@ -29,19 +31,30 @@ const GlobalHoverPreview = () => {
     left = x + widthInPractice > clientWidth ? clientWidth - widthInPractice : x;
     top = y + heightInPractice > clientHeight ? clientHeight - heightInPractice : y;
   }
-  return shouldShow ? /* @__PURE__ */ jsx("div", { className: "global-hover-preview", style: { left, top }, ref: wrapperRef, children: (images == null ? void 0 : images.length) ? /* @__PURE__ */ jsx(
-    "img",
+  return shouldShow ? /* @__PURE__ */ jsx(
+    "div",
     {
-      src: images[0],
-      onLoad: (img) => {
-        const imgElement = img.target;
-        const width = imgElement.naturalWidth;
-        const height = imgElement.naturalHeight;
-        setImageW(width);
-        setImageH(height);
-      }
+      className: "global-hover-preview",
+      style: { left, top },
+      ref: wrapperRef,
+      children: (images == null ? void 0 : images.length) ? (
+        // biome-ignore lint/a11y/useAltText: <explanation>
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: images[0],
+            onLoad: (img) => {
+              const imgElement = img.target;
+              const width = imgElement.naturalWidth;
+              const height = imgElement.naturalHeight;
+              setImageW(width);
+              setImageH(height);
+            }
+          }
+        )
+      ) : null
     }
-  ) : null }) : null;
+  ) : null;
 };
 var global_hover_preview_default = GlobalHoverPreview;
 export {

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

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

package/dist/es/component/sidebar.css

@@ -4,9 +4,9 @@
   justify-content: space-between;
   width: 100%;
   height: 100%;
-  border-right: 1px solid #CCCCCC;
+  border-right: 1px solid #E5E5E5;
   overflow: auto;
-  background: #f7f7f7;
+  background: #F8F8F8;
 }
 .side-bar .brand {
   padding: 10px 5px;
@@ -25,7 +25,7 @@
   border-top: 1px solid none;
 }
 .side-bar .side-seperator.side-seperator-line {
-  border-top: 1px solid #CCCCCC;
+  border-top: 1px solid #E5E5E5;
 }
 .side-bar .side-seperator.side-seperator-space-up {
   margin-top: 10px;
@@ -35,7 +35,7 @@
 }
 .side-bar .side-sub-title {
   padding: 0 10px;
-  font-weight: bold;
+  margin-bottom: 6px;
 }
 .side-bar .side-item {
   cursor: pointer;
@@ -43,15 +43,10 @@
   padding: 2px 0;
 }
 .side-bar .side-item:hover {
-  background: #A3D6D2;
-  color: #333;
+  background: #dcdcdc80;
 }
 .side-bar .side-item.selected {
-  background: #06B1AB;
-  color: #ffffff;
-}
-.side-bar .side-item.selected .status-text {
-  color: #ffffff;
+  background: #bfc4da80;
 }
 .side-bar .side-item .side-item-content {
   padding: 0 10px 0 calc(10px + 16px);
@@ -73,7 +68,7 @@
   margin-top: -5px;
 }
 .side-bar .side-item-name .status-icon-success {
-  color: #3a773a;
+  color: #2B8243;
 }
 .side-bar .side-item-name .status-icon-fail {
   color: #ff0a0a;