Feat(Log): Add support for `console.group(), console.groupCollapsed()…

…, console.groupEnd()`. (issue #545)
Tencent · Oct 21, 2022 · beaa94c · beaa94c
1 parent d50af99
commit beaa94c
Show file tree

Hide file tree

Showing 9 changed files with 206 additions and 35 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,7 @@ English | [简体中文](./CHANGELOG_CN.md)
 ## 3.15.0-rc (2022-10-??)
 
 - `Feat(Log)` Add recycle scrolling and scroll to top/bottom. (PR #570)
+- `Feat(Log)` Add support for `console.group(), console.groupCollapsed(), console.groupEnd()`. (issue #545)
 - `Feat(Network)` Add "Start Time" of a request.
 - `Feat(Network)` Use `curl` instead of `url` as the copy value of a request. (issue #410)
 

diff --git a/CHANGELOG_CN.md b/CHANGELOG_CN.md
@@ -3,6 +3,7 @@
 ## 3.15.0-rc (2022-10-??)
 
 - `Feat(Log)` 新增虚拟滚动列表以提升性能，并支持快速滚动到顶部/底部。 (PR #570)
+- `Feat(Log)` 新增对 `console.group(), console.groupCollapsed(), console.groupEnd()` 方法的支持。 (issue #545)
 - `Feat(Network)` 新增 request 的 "Start Time"（发起时间）。
 - `Feat(Network)` 使用 `curl` 格式作为 request 的复制内容，而非 `url`。 (issue #410)
 

diff --git a/dev/log.html b/dev/log.html
@@ -37,6 +37,7 @@
       <a onclick="logTypes()" href="javascript:;" class="weui_btn weui_btn_default">Log/Info/Debug/Warn/Error</a>
       <a onclick="differentPanelLog()" href="javascript:;" class="weui_btn weui_btn_default">Output to Different Panels</a>
       <a onclick="logTime()" href="javascript:;" class="weui_btn weui_btn_default">console.time</a>
+      <a onclick="logGroup()" href="javascript:;" class="weui_btn weui_btn_default">console.group</a>
     </div>
 
     <div class="section">
@@ -160,6 +161,25 @@
     console.log('Wait...', i);
   }
   console.timeEnd(label);
+  console.timeEnd(label);
+}
+
+function logGroup() {
+  vConsole.show();
+  console.log('This is the outer level');
+  console.group();
+    console.log('Level 2');
+    console.group(aa);
+      console.log('Level 3');
+      console.groupCollapsed('LV4');
+        console.warn('More of level 4');
+        console.info(aa);
+      console.groupEnd();
+      console.log('Back to level 3')
+    console.groupEnd();
+    console.log('Back to level 2');
+  console.groupEnd();
+  console.log('Back to the outer level');
 }
 
 function formattingLog() {

diff --git a/src/log/log.model.ts b/src/log/log.model.ts
@@ -24,6 +24,11 @@ export interface IVConsoleLog {
   toggle: Record<string, boolean>;
   date: number;
   data: IVConsoleLogData[]; // the `args: any[]` of `console.log(...args)`
+  // hide?: boolean;
+  groupLevel: number;
+  groupLabel?: symbol;
+  groupHeader?: 0 | 1 | 2; // 0=not_header, 1=is_header(no_collapsed), 2=is_header(collapsed)
+  groupCollapsed?: boolean; // collapsed by it's group header
 }
 
 export type IVConsoleLogListMap = { [pluginId: string]: IVConsoleLog[] };
@@ -56,6 +61,8 @@ export class VConsoleLogModel extends VConsoleModel {
   public ADDED_LOG_PLUGIN_ID: string[] = [];
   public maxLogNumber: number = 1000;
   protected logCounter: number = 0; // a counter used to do some tasks on a regular basis
+  protected groupLevel: number = 0; // for `console.group()`
+  protected groupLabelCollapsedStack: { label: symbol, collapsed: boolean }[] = [];
   protected pluginPattern: RegExp;
   protected logQueue: IVConsoleLog[] = [];
   protected flushLogScheduled: boolean = false;
@@ -122,56 +129,101 @@ export class VConsoleLogModel extends VConsoleModel {
     if (typeof this.origConsole.log === 'function') {
       return;
     }
-    const methodList = this.LOG_METHODS;
-
+
     // save original console object
     if (!window.console) {
       (<any>window.console) = {};
     } else {
-      methodList.map((method) => {
+      this.LOG_METHODS.map((method) => {
         this.origConsole[method] = window.console[method];
       });
       this.origConsole.time = window.console.time;
       this.origConsole.timeEnd = window.console.timeEnd;
       this.origConsole.clear = window.console.clear;
+      this.origConsole.group = window.console.group;
+      this.origConsole.groupCollapsed = window.console.groupCollapsed;
+      this.origConsole.groupEnd = window.console.groupEnd;
     }
 
-    methodList.map((method) => {
+    this._mockConsoleLog();
+    this._mockConsoleTime();
+    this._mockConsoleGroup();
+    this._mockConsoleClear();
+
+    // convenient for other uses
+    (<any>window)._vcOrigConsole = this.origConsole;
+  }
+
+  protected _mockConsoleLog() {
+    this.LOG_METHODS.map((method) => {
       window.console[method] = ((...args) => {
         this.addLog({
           type: method,
           origData: args || [],
         });
       }).bind(window.console);
     });
+  }
 
+  protected _mockConsoleTime() {
     const timeLog: { [label: string]: number } = {};
+
     window.console.time = ((label: string = '') => {
       timeLog[label] = Date.now();
     }).bind(window.console);
+
     window.console.timeEnd = ((label: string = '') => {
       const pre = timeLog[label];
+      let t = 0;
       if (pre) {
-        this.addLog({
-          type: 'log',
-          origData: [label + ':', (Date.now() - pre) + 'ms'],
-        });
+        t = Date.now() - pre;
         delete timeLog[label];
-      } else {
+      }
+      this.addLog({
+        type: 'log',
+        origData: [`${label}: ${t}ms`],
+      });
+    }).bind(window.console);
+  }
+
+  protected _mockConsoleGroup() {
+    const groupFunction = (isCollapsed: boolean) => {
+      return ((label = 'console.group') => {
+        const labelSymbol = Symbol(label);
+        this.groupLabelCollapsedStack.push({ label: labelSymbol, collapsed: isCollapsed });
+
         this.addLog({
           type: 'log',
-          origData: [label + ': 0ms'],
+          origData: [label],
+          isGroupHeader: isCollapsed ? 2 : 1,
+          isGroupCollapsed: false,
+        }, {
+          noOrig: true,
         });
-      }
+
+        this.groupLevel++;
+        if (isCollapsed) {
+          this.origConsole.groupCollapsed(label);
+        } else {
+          this.origConsole.group(label);
+        }
+      }).bind(window.console);
+    };
+    window.console.group = groupFunction(false);
+    window.console.groupCollapsed = groupFunction(true);
+
+    window.console.groupEnd = (() => {
+      this.groupLabelCollapsedStack.pop();
+      this.groupLevel = Math.max(0, this.groupLevel - 1);
+      this.origConsole.groupEnd();
     }).bind(window.console);
+  }
 
+  protected _mockConsoleClear() {
     window.console.clear = ((...args) => {
       this.clearLog();
       this.callOriginalConsole('clear', ...args);
     }).bind(window.console);
-
-    // convenient for other uses
-    (<any>window)._vcOrigConsole = this.origConsole;
   }
 
   /**
@@ -235,7 +287,18 @@ export class VConsoleLogModel extends VConsoleModel {
   /**
    * Add a vConsole log.
    */
-  public addLog(item: { type: IConsoleLogMethod, origData: any[] } = { type: 'log', origData: [] }, opt?: IVConsoleAddLogOptions) {
+  public addLog(
+    item: {
+      type: IConsoleLogMethod,
+      origData: any[],
+      isGroupHeader?: 0 | 1 | 2,
+      isGroupCollapsed?: boolean,
+    } = { type: 'log', origData: [], isGroupHeader: 0, isGroupCollapsed: false, }, 
+    opt?: IVConsoleAddLogOptions
+  ) {
+    // get group
+    const previousGroup = this.groupLabelCollapsedStack[this.groupLabelCollapsedStack.length - 2];
+    const currentGroup = this.groupLabelCollapsedStack[this.groupLabelCollapsedStack.length - 1];
     // prepare data
     const log: IVConsoleLog = {
       _id: tool.getUniqueID(),
@@ -245,14 +308,11 @@ export class VConsoleLogModel extends VConsoleModel {
       date: Date.now(),
       data: getLogDatasWithFormatting(item.origData || []),
       repeated: 0,
+      groupLabel: currentGroup?.label,
+      groupLevel: this.groupLevel,
+      groupHeader: item.isGroupHeader,
+      groupCollapsed: item.isGroupHeader ? !!previousGroup?.collapsed : !!currentGroup?.collapsed,
     };
-    // for (let i = 0; i < item?.origData.length; i++) {
-    //   const data: IVConsoleLogData = {
-    //     origData: item.origData[i],
-    //   };
-    //   log.data.push(data);
-    // }
-    // log.data = getLogDatasWithFormatting(item?.origData);
 
     this._signalLog(log);
 

diff --git a/src/log/log.svelte b/src/log/log.svelte
@@ -18,25 +18,26 @@
   let filterText: string = "";
   let store: ReturnType<typeof Store.get>;
   let scrollerHandler;
+  let logList: IVConsoleLog[] = [];
 
   $: {
     if (!isInited) {
       store = Store.get(pluginId);
       isInited = true;
-      // (window as any)._vcOrigConsole.log('log.svelte update', pluginId);
+      // (window as any)._vcOrigConsole.log('log.svelte init update', pluginId);
     }
-  }
-
-  let logList: IVConsoleLog[] = [];
 
-  $: {
-    logList = $store.logList.filter(
-      (log) =>
+    // (window as any)._vcOrigConsole.log('log.svelte update', pluginId);
+    logList = $store.logList.filter((log) => {
+      let ret = 
         // filterType
         (filterType === "all" || filterType === log.type) &&
         // filterText
-        (filterText === "" || isMatchedFilterText(log, filterText))
-    );
+        (filterText === "" || isMatchedFilterText(log, filterText)) &&
+        // group
+        !log.groupCollapsed;
+      return ret;
+    });
   }
 
   onMount(() => {
@@ -51,6 +52,27 @@
     filterText = e.detail.filterText || "";
   };
 
+  const onGroupCollapsed = (e) => {
+    const groupLabel = e.detail.groupLabel;
+    const groupHeader = e.detail.groupHeader;
+    const isGroupCollapsed = e.detail.isGroupCollapsed;
+    // (window as any)._vcOrigConsole.log('log.svelte onGroupCollapsed', e.detail);
+    store.update((st) => {
+      st.logList.forEach((log) => {
+        if (log.groupLabel === groupLabel) {
+          if (log.groupHeader > 0) {
+            // (window as any)._vcOrigConsole.log('log.svelte foreach', log);
+            log.groupHeader = groupHeader;
+          } else {
+            log.groupCollapsed = isGroupCollapsed;
+          }
+        }
+      });
+      return st;
+    });
+    
+  };
+
   export const scrollToTop = () => {
     scrollerHandler.scrollTo(0);
   };
@@ -75,7 +97,14 @@
     bind:handler={scrollerHandler}
   >
     <div slot="empty" class="vc-plugin-empty">Empty</div>
-    <LogRow slot="item" let:item={log} log={log} showTimestamps={showTimestamps} />
+    <LogRow
+      slot="item"
+      let:item={log}
+      log={log}
+      showTimestamps={showTimestamps}
+      groupHeader={log.groupHeader}
+      on:groupCollapsed={onGroupCollapsed}
+    />
     <svelte:fragment slot="footer">
       {#if showCmd}
         <LogCommand on:filterText={onFilterText} />

diff --git a/src/log/logCommand.svelte b/src/log/logCommand.svelte
@@ -4,7 +4,6 @@
   import { getLastIdentifier } from './logTool';
   import { VConsoleLogModel } from './log.model';
   import Style from './logCommand.less';
-  // import LogRow from './logRow.svelte';
 
   interface ICmdPromptedItem {
     text: string;

diff --git a/src/log/logRow.less b/src/log/logRow.less
@@ -35,6 +35,43 @@
   margin-left: auto;
 }
 
+// group
+.vc-log-padding {
+  width: (20em / @font);
+  border-left: 1px solid var(--VC-FG-3);
+}
+.vc-log-group .vc-log-content {
+  font-weight: bold;
+}
+.vc-log-group-toggle {
+  padding-left: (10em / @font);
+}
+.vc-log-group-toggle {
+  display: block;
+  font-style: italic;
+  padding-left: (10em / @font);
+  position: relative;
+}
+.vc-log-group-toggle:active {
+  background-color: var(--VC-BG-COLOR-ACTIVE);
+}
+.vc-log-group > .vc-log-group-toggle::before {
+  content: "";
+  position: absolute;
+  top: (4em / @font);
+  left: (2em / @font);
+  width: 0;
+  height: 0;
+  border: transparent solid (4em / @font);
+  border-left-color: var(--VC-FG-1);
+}
+.vc-log-group.vc-toggle > .vc-log-group-toggle::before {
+  top: (6em / @font);
+  left: 0;
+  border-top-color: var(--VC-FG-1);
+  border-left-color: transparent;
+}
+
 // time
 .vc-log-time {
   width: (80em / @font);