Merge branch 'dev' into feature-recycle-scroller

Tencent · Oct 28, 2022 · 133886f · 133886f
2 parents 0e26311 + 52d32de
commit 133886f
Show file tree

Hide file tree

Showing 18 changed files with 335 additions and 65 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,14 @@
 English | [简体中文](./CHANGELOG_CN.md)
 
+## 3.15.0-rc (2022-11-??)
+
+- `Feat(Log)` Add recycle scrolling to imporove performance, and add scroll to top/bottom buttons. (PR #570)
+- `Feat(Log)` Add support for `console.group(), console.groupCollapsed(), console.groupEnd()`. (issue #545)
+- `Feat(Network)` Add recycle scrolling to imporove performance.
+- `Feat(Network)` Add "Start Time" of a request.
+- `Feat(Network)` Use `curl` instead of `url` as the copy value of a request. (issue #410)
+
+
 ## 3.14.7 (2022-09-23)
 
 - `Perf(Log)` Optimize rendering performance when adding logs. (PR #567)

diff --git a/CHANGELOG_CN.md b/CHANGELOG_CN.md
@@ -1,5 +1,14 @@
 [English](./CHANGELOG.md) | 简体中文
 
+## 3.15.0-rc (2022-11-??)
+
+- `Feat(Log)` 新增虚拟滚动列表以提升性能，并支持快速滚动到顶部/底部。 (PR #570)
+- `Feat(Log)` 新增对 `console.group(), console.groupCollapsed(), console.groupEnd()` 方法的支持。 (issue #545)
+- `Feat(Network)` 新增虚拟滚动列表以提升性能。
+- `Feat(Network)` 新增 request 的 "Start Time"（发起时间）。
+- `Feat(Network)` 使用 `curl` 格式作为 request 的复制内容，而非 `url`。 (issue #410)
+
+
 ## 3.14.7 (2022-09-23)
 
 - `Perf(Log)` 优化打印日志时的性能。 (PR #567)

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/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vconsole",
-  "version": "3.14.7",
+  "version": "3.15.0-rc",
   "description": "A lightweight, extendable front-end developer tool for mobile web page.",
   "homepage": "https://github.com/Tencent/vConsole",
   "files": [

diff --git a/src/component/recycleScroller/recycleScroller.less b/src/component/recycleScroller/recycleScroller.less
@@ -11,6 +11,7 @@
 
 .vc-scroller-items {
   will-change: height;
+  position: relative;
 }
 
 .vc-scroller-item {

diff --git a/src/component/recycleScroller/recycleScroller.svelte b/src/component/recycleScroller/recycleScroller.svelte
@@ -19,11 +19,13 @@
   export let end = 0;
 
   // local state
+  let header: HTMLElement | undefined;
   let footer: HTMLElement | undefined;
   let viewport: HTMLElement | undefined;
   let contents: HTMLElement | undefined;
   let frame: HTMLElement | undefined;
 
+  let headerHeight = 0;
   let footerHeight = 0;
   let viewportHeight = 0;
   let frameHeight = 0;
@@ -39,7 +41,7 @@
   const updateVisible = createRecycleManager();
 
   const getScrollExtent = () =>
-    Math.max(0, frameHeight + footerHeight - viewportHeight);
+    Math.max(0, frameHeight + headerHeight + footerHeight - viewportHeight);
 
   let isOnBottom = true;
   let avoidRefresh = false;
@@ -53,6 +55,7 @@
     isOnBottom = Math.abs(pos - scrollExtent) <= 1;
 
     contents.style.transform = `translateY(${-pos}px) translateZ(0)`;
+    // (window as any)._vcOrigConsole.log('pos', pos);
     refreshScrollbar();
 
     if (avoidRefresh) {
@@ -66,7 +69,7 @@
 
   const refreshScrollbar = () => {
     const pos = scrollHandler.getPosition();
-    const fac = 100 / (frameHeight + footerHeight);
+    const fac = 100 / (frameHeight + headerHeight + footerHeight);
     scrollbarThumbPos = pos * fac;
     scrollbarThumbHeight = viewportHeight * fac;
   };
@@ -120,8 +123,9 @@
       topMap[i] = y;
       y += heightMap[i];
     }
-    frameHeight = Math.max(y, viewportHeight - footerHeight);
+    frameHeight = Math.max(y, viewportHeight - headerHeight - footerHeight);
 
+    // (window as any)._vcOrigConsole.log("init(): frameHeight", frameHeight);
     // (window as any)._vcOrigConsole.log("heightMap", heightMap);
     // (window as any)._vcOrigConsole.log("reuseHeightCount", reuseHeightCount);
     // (window as any)._vcOrigConsole.log(
@@ -213,6 +217,7 @@
       // setTimeout to avoid ResizeObserver loop limit exceeded error
       await new Promise((resolve) => setTimeout(resolve, 0));
 
+      initItems(items);
       refresh(items, scrollHandler.getPosition(), viewportHeight);
       if (viewportHeight !== 0) scrollToBottom(isOnBottom && stickToBottom);
       refreshScrollbar();
@@ -231,14 +236,26 @@
       for (let i = 0; i < items.length; i += 1) {
         y += heightMap[i];
       }
-      frameHeight = Math.max(y, viewportHeight - footerHeight);
+      frameHeight = Math.max(y, viewportHeight - headerHeight - footerHeight);
       frame.style.height = `${frameHeight}px`;
 
       if (viewportHeight !== 0) scrollToBottom(isOnBottom && stickToBottom);
       refreshScrollbar();
     }
   );
 
+  registerHeightObserver(
+    () => header,
+    (height) => {
+      if (headerHeight === height) return;
+      // ;(window as any)._vcOrigConsole.log('header height resize', height);
+      // no need to fresh
+      headerHeight = height;
+      initItems(items);
+      refreshScrollbar();
+    }
+  );
+
   const onRowResize = async (index: number, height: number) => {
     if (heightMap[index] === height || viewportHeight === 0) return;
 
@@ -258,7 +275,7 @@
     }
     frameHeight = Math.max(
       topMap[n - 1] + heightMap[n - 1],
-      viewportHeight - footerHeight
+      viewportHeight - headerHeight - footerHeight
     );
 
     const scrollPos = scrollHandler.getPosition();
@@ -326,6 +343,11 @@
   class="vc-scroller-viewport"
 >
   <div bind:this={contents} class="vc-scroller-contents">
+    {#if $$slots.header}
+      <div bind:this={header} class="vc-scroller-header">
+        <slot name="header" />
+      </div>
+    {/if}
     <div bind:this={frame} class="vc-scroller-items">
       {#if items.length}
         {#each visible as row, i (row.key)}

diff --git a/src/core/style/theme.less b/src/core/style/theme.less
@@ -78,6 +78,7 @@
 
 // table
 .vc-table {
+  height: 100%;
 
   .vc-table-row {
     line-height: 1.5;

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);