feat: add inactive status style

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [1.4.3](https://github.com/HuolalaTech/page-spy/compare/v1.4.2...v1.4.3) (2023-12-01)
+
 ### [1.4.2](https://github.com/HuolalaTech/page-spy/compare/v1.4.1...v1.4.2) (2023-11-15)
 
 ### [1.3.1](https://github.com/HuolalaTech/page-spy/compare/v1.2.5...v1.3.1) (2023-10-16)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@huolala-tech/page-spy",
-  "version": "1.4.2",
+  "version": "1.4.3",
   "description": "A developer tool for debugging remote web page.",
   "main": "dist/index.min.js",
   "types": "dist/types/index.d.ts",

src/index.less

@@ -20,6 +20,10 @@
     box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.2);
     cursor: pointer;
     z-index: 13000;
+    &.inactive {
+      background-color: #a2a2a2;
+      filter: grayscale(1);
+    }
   }
   .page-spy-modal {
     position: fixed;

src/index.ts

@@ -223,6 +223,9 @@ export default class PageSpy {
     img.height = 50;
     logo.append(img);
     root.insertAdjacentElement('afterbegin', logo);
+    window.addEventListener('sdk-inactive', () => {
+      logo.classList.add('inactive');
+    });
 
     const modal = new Modal();
     const content = new Content({

src/utils/socket.ts

@@ -62,10 +62,6 @@ export class SocketStore {
 
   private reconnectTimes = 3;
 
-  // Don't try to reconnect and close immediately
-  // when user refresh the page.
-  private closeImmediately: boolean = false;
-
   // indicated connected  whether or not
   public connectionStatus: boolean = false;
 
@@ -121,7 +117,8 @@ export class SocketStore {
 
   public close() {
     this.clearPing();
-    this.closeImmediately = true;
+    this.reconnectTimes = 0;
+    this.reconnectable = false;
     this.socket?.close();
   }
 
@@ -136,27 +133,21 @@ export class SocketStore {
     this.connectionStatus = false;
     this.socketConnection = null;
     this.clearPing();
-
-    if (this.closeImmediately) return;
-    this.tryReconnect();
-  }
-
-  private tryReconnect() {
-    if (!this.reconnectable) {
+    if (!this.reconnectable || this.reconnectTimes <= 0) {
+      window.dispatchEvent(new CustomEvent('sdk-inactive'));
       sessionStorage.setItem(
         ROOM_SESSION_KEY,
         JSON.stringify({ usable: false }),
       );
       return;
     }
-    if (this.reconnectTimes > 0) {
-      this.reconnectTimes -= 1;
-      this.init(this.socketUrl);
-    } /* c8 ignore start */ else {
-      this.reconnectable = false;
-      psLog.error('Websocket reconnect failed');
-    }
-    /* c8 ignore stop */
+
+    this.tryReconnect();
+  }
+
+  tryReconnect() {
+    this.reconnectTimes -= 1;
+    this.init(this.socketUrl);
   }
 
   private pingConnect() {

tests/utils/socket.test.ts

@@ -1,12 +1,7 @@
 import { WS } from 'jest-websocket-mock';
 import { DEBUG_MESSAGE_TYPE } from 'src/utils/message';
 import { SocketStore } from 'src/utils/socket';
-import {
-  ConnectEvent,
-  UnicastEvent,
-  ErrorEvent,
-  JoinEvent,
-} from 'types/lib/socket-event';
+import { ConnectEvent, ErrorEvent } from 'types/lib/socket-event';
 import * as SERVER_MESSAGE_TYPE from 'src/utils/message/server-type';
 
 // Mock micro task delay