feat: popup a notification when switch off (#104)

Author: talisk

src/renderer/components/connection/DeviceSelect.tsx

@@ -11,25 +11,92 @@ import debugDriver from '@/renderer/utils/debugDriver';
 import { setSimulatorViewMode } from '@/renderer/utils/ldtApi';
 import { IDevice } from '@lynx-js/devtool-plugin-core/renderer';
 import { DesktopOutlined, MobileOutlined } from '@ant-design/icons';
-import { Dropdown, Button } from 'antd';
+import { Dropdown, Button, notification } from 'antd';
 import { MenuProps } from 'antd';
 import { useEffect, useMemo } from 'react';
 import './DeviceSelect.scss';
 import IconPlatform from './IconPlatform/IconPlatform';
 import useldtConnection from '@/renderer/ldt/store/ldtConnection';
-import { getStopAtEntry, getFetchDebugInfo } from '@/renderer/utils/switchUtils';
+import { getStopAtEntry, getFetchDebugInfo, getSwitchStatus, openDevtool, openDomTree } from '@/renderer/utils/switchUtils';
+
+let notificationKey = '';
+
+interface SwitchNotificationContentProps {
+  devtoolSwitch: boolean;
+  domTreeSwitch: boolean;
+  close: () => void;
+}
+
+function SwitchNotificationContent({ devtoolSwitch, domTreeSwitch, close }: SwitchNotificationContentProps) {
+  const handleEnableAll = async () => {
+    const results = await Promise.all([
+      !devtoolSwitch ? openDevtool(true) : Promise.resolve(true),
+      !domTreeSwitch ? openDomTree(true) : Promise.resolve(true)
+    ]);
+    if (results.every(Boolean)) {
+      close();
+    }
+  };
+
+  return (
+    <div>
+      <p style={{ marginBottom: 8 }}>
+        The following switches need to be enabled for DevTool to work properly:
+      </p>
+      <ul style={{ marginBottom: 12, paddingLeft: 20 }}>
+        {!devtoolSwitch && <li>enable_devtool</li>}
+        {!domTreeSwitch && <li>enable_dom_tree</li>}
+      </ul>
+      <Button type="primary" size="small" onClick={handleEnableAll}>
+        Enable All
+      </Button>
+    </div>
+  );
+}
 
 export default function DeviceSelect() {
   const { deviceList, selectedDevice, setSelectedDevice } = useConnection();
   const { selectedDevice: currentDevice, setCurrentDevice } = useldtConnection();
 
   useEffect(() => {
     setCurrentDevice(xdbDriver.getCurrentDevice());
+    checkDevtoolSwitch();
     getStopAtEntry('DEFAULT');
     getStopAtEntry('MTS');
     getFetchDebugInfo('MTS');
   }, [selectedDevice]);
 
+  const checkDevtoolSwitch = async () => {
+    const devtoolSwitch = await getSwitchStatus('enable_devtool');
+    const domTreeSwitch = await getSwitchStatus('enable_dom_tree');
+    const currentClientId = debugDriver.getSelectClientId();
+    if ((!devtoolSwitch || !domTreeSwitch) && currentClientId === selectedDevice?.clientId) {
+      if (notificationKey !== '') {
+        notification.destroy(notificationKey);
+      }
+      notificationKey = `devtool-switch-${Date.now()}`;
+      notification.warning({
+        key: notificationKey,
+        message: 'DevTool Switch Required',
+        description: (
+          <SwitchNotificationContent
+            devtoolSwitch={devtoolSwitch}
+            domTreeSwitch={domTreeSwitch}
+            close={closeNotification}
+          />
+        ),
+        duration: 0
+      });
+    }
+  };
+
+  const closeNotification = () => {
+    if (notificationKey !== '') {
+      notification.destroy(notificationKey);
+      notificationKey = '';
+    }
+  };
+  
   function combieDevices(groupKey: 'App' | 'deviceModel' = 'App'): IDevice[] {
     const sortList = deviceList
       .filter((item) => item.clientId && item.info?.deviceType !== 'simulator')

src/renderer/utils/switchUtils.ts

@@ -6,6 +6,75 @@ import debugDriver from './debugDriver';
 import { getStore } from './flooks';
 import useConnection from '../hooks/connection';
 
+export async function setGlobalSwitch(params: any) {
+  try {
+    const result = await debugDriver.sendCustomMessageAsync({ params, type: 'SetGlobalSwitch' });
+    if (typeof result === 'object') {
+      return result?.global_value === 'true' || result?.global_value === true;
+    } else {
+      return result === 'true' || result === true;
+    }
+  } catch (error) {
+    console.error('setGlobalSwitch error', error);
+    return false;
+  }
+}
+
+export async function getGlobalSwitch(params: any) {
+  try {
+    const result = await debugDriver.sendCustomMessageAsync({ params, type: 'GetGlobalSwitch' });
+    if (typeof result === 'object') {
+      return result?.global_value === 'true' || result?.global_value === true;
+    } else {
+      return result === 'true' || result === true;
+    }
+  } catch (error) {
+    console.error('getGlobalSwitch error', error);
+    return true;
+  }
+}
+
+export async function getSwitchStatus(key: string) {
+  const params = {
+    global_key: key
+  };
+  return await getGlobalSwitch(params);
+}
+
+export async function openDevtool(open: boolean) {
+  try {
+    const params = {
+      global_key: 'enable_devtool',
+      global_value: open
+    };
+    const result = await setGlobalSwitch(params);
+    if (result !== open) {
+      return false;
+    }
+  } catch (error) {
+    console.error('openDevtool error', error);
+    return false;
+  }
+  return true;
+}
+
+export async function openDomTree(open: boolean) {
+  try {
+    const params = {
+      global_key: 'enable_dom_tree',
+      global_value: open
+    };
+    const result = await setGlobalSwitch(params);
+    if (result !== open) {
+      return false;
+    }
+  } catch (error) {
+    console.error('openDomTree error', error);
+    return false;
+  }
+  return true;
+}
+
 function updateDeviceInfo(info: string, type: string, value: boolean) {
   const currentClientId = debugDriver.getSelectClientId();
   if (currentClientId === undefined) {