@lvce-editor/static-server 0.53.1 → 0.53.3

package/static/{bd5d499 → d4964b6}/packages/debug-worker/dist/debugWorkerMain.js

@@ -513,7 +513,7 @@ const create$4$1 = (method, params) => {
   };
 };
 const callbacks = Object.create(null);
-const set$5 = (id, fn) => {
+const set$4 = (id, fn) => {
   callbacks[id] = fn;
 };
 const get$2 = id => {
@@ -532,7 +532,7 @@ const registerPromise = () => {
     resolve,
     promise
   } = Promise.withResolvers();
-  set$5(id, resolve);
+  set$4(id, resolve);
   return {
     id,
     promise
@@ -994,207 +994,31 @@ const WebWorkerRpcClient = {
   create: create$4
 };
 
-const getNewWatchExpressionsAccept = (watchExpressions, editingValue) => {
-  const editingIndex = watchExpressions.findIndex(expr => expr.isEditing);
-  if (editingIndex === -1) {
-    return watchExpressions;
-  }
-  if (editingValue === '') {
-    return watchExpressions.toSpliced(editingIndex, 1);
-  }
-  const newExpression = {
-    expression: editingValue,
-    value: null,
-    isEditing: false
-  };
-  return watchExpressions.toSpliced(editingIndex, 1, newExpression);
-};
-
-const acceptWatchExpressionEdit = state => {
-  const {
-    watchExpressions,
-    editingValue
-  } = state;
-  const newWatchExpressions = getNewWatchExpressionsAccept(watchExpressions, editingValue);
-  return {
-    ...state,
-    watchExpressions: newWatchExpressions,
-    focus: 0
-  };
-};
-
-const FocusDebugScope = 30;
-const FocusDebugWatchInput = 1290;
-
-const addWatchExpression = (state, expression) => {
-  const {
-    watchExpressions
-  } = state;
-  const watchExpression = {
-    expression,
-    value: null,
-    isEditing: true
-  };
-  return {
-    ...state,
-    watchExpressions: [...watchExpressions, watchExpression],
-    focus: FocusDebugWatchInput
-  };
-};
-
-const getNewWatchExpressionsCancel = watchExpressions => {
-  const lastExpression = watchExpressions[watchExpressions.length - 1];
-  if (lastExpression && lastExpression.expression === '') {
-    return watchExpressions.toSpliced(-1, 1);
-  }
-  return watchExpressions;
-};
-
-const cancelWatchExpressionEdit = state => {
-  const {
-    watchExpressions
-  } = state;
-  const newWatchExpressions = getNewWatchExpressionsCancel(watchExpressions);
-  return {
-    ...state,
-    watchExpressions: newWatchExpressions
-  };
-};
-
-const None$5 = 'none';
-const Exception$2 = 'exception';
-const Other = 'other';
-
-const None$4 = 0;
+const None$6 = 0;
 const Paused = 1;
 const Default = 2;
 
-const All = 1;
-const Uncaught = 2;
-const None$3 = 0;
-
-const None$2 = 'none';
-
-const create$2 = () => {
-  const states = Object.create(null);
-  return {
-    get(uid) {
-      return states[uid];
-    },
-    set(uid, oldState, newState) {
-      states[uid] = {
-        oldState,
-        newState
-      };
-    },
-    dispose(uid) {
-      delete states[uid];
-    },
-    getKeys() {
-      return Object.keys(states).map(key => {
-        return Number.parseInt(key);
-      });
-    },
-    clear() {
-      for (const key of Object.keys(states)) {
-        delete states[key];
-      }
-    },
-    wrapCommand(fn) {
-      const wrapped = async (uid, ...args) => {
-        const {
-          newState
-        } = states[uid];
-        const newerState = await fn(newState, ...args);
-        if (newState === newerState) {
-          return;
-        }
-        const latest = states[uid];
-        states[uid] = {
-          oldState: latest.oldState,
-          newState: newerState
-        };
-      };
-      return wrapped;
-    },
-    diff(uid, modules, numbers) {
-      const {
-        oldState,
-        newState
-      } = states[uid];
-      const diffResult = [];
-      for (let i = 0; i < modules.length; i++) {
-        const fn = modules[i];
-        if (!fn(oldState, newState)) {
-          diffResult.push(numbers[i]);
-        }
-      }
-      return diffResult;
-    }
-  };
-};
-
-const {
-  get: get$1,
-  set: set$4,
-  wrapCommand,
-  dispose: dispose$1,
-  getKeys
-} = create$2();
-
-const create$1 = (id, uri, x, y, width, height) => {
-  const state = {
-    id,
-    disposed: false,
-    processes: [],
-    debugState: None$4,
-    watchExpanded: false,
-    breakPointsExpanded: false,
-    scopeExpanded: false,
-    callStackExpanded: false,
-    scopeChain: [],
-    callStack: [],
-    parsedScripts: Object.create(null),
-    pausedReason: None$5,
-    pausedMessage: '',
-    debugInputValue: '',
-    debugOutputValue: '',
-    callFrameId: '',
-    expandedIds: [],
-    scopeFocusedIndex: -1,
-    focusedIndex: -1,
-    pauseOnExceptionState: None$2,
-    cache: Object.create(null),
-    // TODO maybe store cache in extension host worker
-    exceptionBreakPoints: None$3,
-    watchExpressions: [],
-    focus: 0,
-    editingValue: ''
-  };
-  set$4(id, state, state);
-};
-
 const rpcs = Object.create(null);
 const set$d = (id, rpc) => {
   rpcs[id] = rpc;
 };
-const get = id => {
+const get$1 = id => {
   return rpcs[id];
 };
 
 /* eslint-disable  @typescript-eslint/explicit-function-return-type */
 
-const create = rpcId => {
+const create$2 = rpcId => {
   return {
     // @ts-ignore
     invoke(method, ...params) {
-      const rpc = get(rpcId);
+      const rpc = get$1(rpcId);
       // @ts-ignore
       return rpc.invoke(method, ...params);
     },
     // @ts-ignore
     invokeAndTransfer(method, ...params) {
-      const rpc = get(rpcId);
+      const rpc = get$1(rpcId);
       // @ts-ignore
       return rpc.invokeAndTransfer(method, ...params);
     },
@@ -1202,7 +1026,7 @@ const create = rpcId => {
       set$d(rpcId, rpc);
     },
     async dispose() {
-      const rpc = get(rpcId);
+      const rpc = get$1(rpcId);
       await rpc.dispose();
     }
   };
@@ -1217,7 +1041,7 @@ const RpcId = {
 const {
   invoke: invoke$b,
   set: set$b
-} = create(EditorWorker$1);
+} = create$2(EditorWorker$1);
 const EditorWorker = {
   __proto__: null,
   invoke: invoke$b,
@@ -1226,7 +1050,7 @@ const EditorWorker = {
 const {
   invoke: invoke$8,
   set: set$8
-} = create(ExtensionHostWorker);
+} = create$2(ExtensionHostWorker);
 const ExtensionHost = {
   __proto__: null,
   invoke: invoke$8,
@@ -1235,19 +1059,19 @@ const ExtensionHost = {
 const {
   invoke: invoke$3,
   invokeAndTransfer: invokeAndTransfer$3,
-  set: set$3
-} = create(RendererWorker$1);
+  set: set$3$1
+} = create$2(RendererWorker$1);
 const RendererWorker = {
   __proto__: null,
   invoke: invoke$3,
   invokeAndTransfer: invokeAndTransfer$3,
-  set: set$3
+  set: set$3$1
 };
 
 const {
   invoke: invoke$2,
   invokeAndTransfer,
-  set: set$2
+  set: set$3
 } = RendererWorker;
 
 const activateByEvent = event => {
@@ -1256,7 +1080,7 @@ const activateByEvent = event => {
 
 const {
   invoke: invoke$1,
-  set: set$1
+  set: set$2
 } = ExtensionHost;
 
 const executeProvider = async ({
@@ -1270,93 +1094,97 @@ const executeProvider = async ({
   return result;
 };
 
+const getDebugEvent = debugId => {
+  return `onDebug:${debugId}`;
+};
+
 const resume$3 = debugId => {
   return executeProvider({
-    event: `onDebug:${debugId}`,
+    event: getDebugEvent(debugId),
     method: 'ExtensionHostDebug.resume',
     params: [debugId]
   });
 };
 const pause$3 = debugId => {
   return executeProvider({
-    event: `onDebug:${debugId}`,
+    event: getDebugEvent(debugId),
     method: 'ExtensionHostDebug.pause',
     params: [debugId]
   });
 };
 const stepOver$3 = debugId => {
   return executeProvider({
-    event: `onDebug:${debugId}`,
+    event: getDebugEvent(debugId),
     method: 'ExtensionHostDebug.stepOver',
     params: [debugId]
   });
 };
 const stepInto$3 = debugId => {
   return executeProvider({
-    event: `onDebug:${debugId}`,
+    event: getDebugEvent(debugId),
     method: 'ExtensionHostDebug.stepInto',
     params: [debugId]
   });
 };
 const stepOut$3 = debugId => {
   return executeProvider({
-    event: `onDebug:${debugId}`,
+    event: getDebugEvent(debugId),
     method: 'ExtensionHostDebug.stepOut',
     params: [debugId]
   });
 };
 const setPauseOnExceptions$2 = (debugId, value) => {
   return executeProvider({
-    event: `onDebug:${debugId}`,
+    event: getDebugEvent(debugId),
     method: 'ExtensionHostDebug.setPauseOnExceptions',
     params: [debugId, value]
   });
 };
 const start$1 = debugId => {
   return executeProvider({
-    event: `onDebug:${debugId}`,
+    event: getDebugEvent(debugId),
     method: 'ExtensionHostDebug.start',
     params: [debugId]
   });
 };
 const getProperties$1 = (debugId, objectId) => {
   return executeProvider({
-    event: `onDebug:${debugId}`,
+    event: getDebugEvent(debugId),
     method: 'ExtensionHostDebug.getProperties',
     params: [debugId, objectId]
   });
 };
 const evaluate$1 = (debugId, expression, callFrameId) => {
   return executeProvider({
-    event: `onDebug:${debugId}`,
+    event: getDebugEvent(debugId),
     method: 'ExtensionHostDebug.evaluate',
     params: [debugId, expression, callFrameId]
   });
 };
 const getScriptSource = (debugId, scriptId) => {
   return executeProvider({
-    event: `onDebug:${debugId}`,
+    event: getDebugEvent(debugId),
     method: 'ExtensionHostDebug.getScriptSource',
     params: [debugId, scriptId]
   });
 };
 const getPausedStatus = debugId => {
   return executeProvider({
-    event: `onDebug:${debugId}`,
+    event: getDebugEvent(debugId),
     method: 'ExtensionHostDebug.getPausedStatus',
     params: [debugId]
   });
 };
 const getCallStack$1 = debugId => {
   return executeProvider({
-    event: `onDebug:${debugId}`,
+    event: getDebugEvent(debugId),
     method: 'ExtensionHostDebug.getCallStack',
     params: [debugId]
   });
 };
 const getScripts = debugId => {
   return executeProvider({
-    event: `onDebug:${debugId}`,
+    event: getDebugEvent(debugId),
     method: 'ExtensionHostDebug.getScripts',
     params: [debugId]
   });
@@ -1364,7 +1192,7 @@ const getScripts = debugId => {
 
 const {
   invoke,
-  set
+  set: set$1
 } = EditorWorker;
 
 const getDebugUri = (key, scriptId) => {
@@ -1382,16 +1210,83 @@ const openUri = async (uri, languageId, rowIndex, columnIndex) => {
   await invoke$2('Main.openUri', uri, focus, options);
 };
 
+const create$1 = () => {
+  const states = Object.create(null);
+  return {
+    get(uid) {
+      return states[uid];
+    },
+    set(uid, oldState, newState) {
+      states[uid] = {
+        oldState,
+        newState
+      };
+    },
+    dispose(uid) {
+      delete states[uid];
+    },
+    getKeys() {
+      return Object.keys(states).map(key => {
+        return Number.parseInt(key);
+      });
+    },
+    clear() {
+      for (const key of Object.keys(states)) {
+        delete states[key];
+      }
+    },
+    wrapCommand(fn) {
+      const wrapped = async (uid, ...args) => {
+        const {
+          newState
+        } = states[uid];
+        const newerState = await fn(newState, ...args);
+        if (newState === newerState) {
+          return;
+        }
+        const latest = states[uid];
+        states[uid] = {
+          oldState: latest.oldState,
+          newState: newerState
+        };
+      };
+      return wrapped;
+    },
+    diff(uid, modules, numbers) {
+      const {
+        oldState,
+        newState
+      } = states[uid];
+      const diffResult = [];
+      for (let i = 0; i < modules.length; i++) {
+        const fn = modules[i];
+        if (!fn(oldState, newState)) {
+          diffResult.push(numbers[i]);
+        }
+      }
+      return diffResult;
+    }
+  };
+};
+
+const {
+  get,
+  set,
+  wrapCommand,
+  dispose: dispose$1,
+  getKeys
+} = create$1();
+
 const getKey = () => {
   const keys = getKeys();
-  return keys[0];
+  return keys.at(-1) || 0;
 };
 const openAtPausedLocation = async () => {
   const key = getKey();
   // TODO ask renderer worker to open file
   const {
     newState
-  } = get$1(key);
+  } = get(key);
   const {
     callStack
   } = newState;
@@ -1458,21 +1353,202 @@ const paused = async params => {
   await invoke$2('Run And Debug.handlePaused', params);
   await openAtPausedLocation();
 };
-const resumed = async params => {
-  await invoke$2('Run And Debug.handleResumed', params);
-  const key = getKey();
-  await updateDebugInfo(key);
+const resumed = async params => {
+  await invoke$2('Run And Debug.handleResumed', params);
+  const key = getKey();
+  await updateDebugInfo(key);
+};
+const handleChange$1 = async params => {
+  // @ts-ignore
+  await invoke$2('Run And Debug.handleChange', params);
+};
+
+const evaluateWatchExpression = async (debugId, callFrameId, expression) => {
+  const result = await evaluate(debugId, expression, callFrameId);
+  return result;
+};
+
+const evaluateWatchExpressions = async (debugId, callFrameId, watchExpressions) => {
+  const results = await Promise.all(watchExpressions.map(async expression => {
+    try {
+      const result = await evaluateWatchExpression(debugId, callFrameId, expression.expression);
+      const resultString = result.description;
+      return {
+        ...expression,
+        value: resultString
+      };
+    } catch (error) {
+      console.error(`Failed to evaluate expression: ${error}`);
+      return {
+        ...expression
+      };
+    }
+  }));
+  return results;
+};
+
+const getNewWatchExpressions = async (debugId, callFrameId, debugState, watchExpressions) => {
+  if (debugState === Paused) {
+    const newWatchExpressions = await evaluateWatchExpressions(debugId, callFrameId, watchExpressions);
+    return newWatchExpressions;
+  }
+  return watchExpressions;
+};
+const getNewWatchExpressionsAccept = async (debugId, callFrameId, debugState, watchExpressions, editingValue) => {
+  const editingIndex = watchExpressions.findIndex(expr => expr.isEditing);
+  if (editingIndex === -1) {
+    return watchExpressions;
+  }
+  if (editingValue === '') {
+    return watchExpressions.toSpliced(editingIndex, 1);
+  }
+  const newExpression = {
+    expression: editingValue,
+    value: null,
+    isEditing: false
+  };
+  const newWatchExpressions1 = watchExpressions.toSpliced(editingIndex, 1, newExpression);
+  const newWatchExpressions2 = await getNewWatchExpressions(debugId, callFrameId, debugState, newWatchExpressions1);
+  return newWatchExpressions2;
+};
+
+const acceptWatchExpressionEdit = async state => {
+  const {
+    watchExpressions,
+    editingValue,
+    debugId,
+    debugState,
+    callFrameId
+  } = state;
+  const newWatchExpressions = await getNewWatchExpressionsAccept(debugId, callFrameId, debugState, watchExpressions, editingValue);
+  return {
+    ...state,
+    watchExpressions: newWatchExpressions,
+    focus: 0,
+    editingValue: '',
+    editingselectionstart: 0,
+    editingselectionend: 0
+  };
+};
+
+const FocusDebugScope = 30;
+const FocusDebugWatchInput = 1290;
+
+const addWatchExpression$1 = async (state, expression) => {
+  const {
+    watchExpressions
+  } = state;
+  const watchExpression = {
+    expression,
+    value: null,
+    isEditing: true
+  };
+  const newWatchExpressions1 = [...watchExpressions, watchExpression];
+  return {
+    ...state,
+    watchExpressions: newWatchExpressions1,
+    focus: FocusDebugWatchInput,
+    editingselectionstart: 0,
+    editingselectionend: expression.length
+  };
+};
+
+const getNewWatchExpressionsCancel = watchExpressions => {
+  const lastExpression = watchExpressions[watchExpressions.length - 1];
+  if (lastExpression && lastExpression.expression === '') {
+    return watchExpressions.toSpliced(-1, 1);
+  }
+  return watchExpressions;
+};
+
+const cancelWatchExpressionEdit = state => {
+  const {
+    watchExpressions
+  } = state;
+  const newWatchExpressions = getNewWatchExpressionsCancel(watchExpressions);
+  return {
+    ...state,
+    watchExpressions: newWatchExpressions,
+    focus: 0,
+    editingselectionstart: 0,
+    editingselectionend: 0
+  };
+};
+
+const None$5 = 'none';
+const Exception$2 = 'exception';
+const Other = 'other';
+
+const All = 1;
+const Uncaught = 2;
+const None$4 = 0;
+
+const None$3 = 'none';
+
+const create = (id, uri, x, y, width, height) => {
+  const state = {
+    id,
+    disposed: false,
+    processes: [],
+    debugState: None$6,
+    watchExpanded: false,
+    breakPointsExpanded: false,
+    scopeExpanded: false,
+    callStackExpanded: false,
+    watchVisible: true,
+    breakPointsVisible: true,
+    scopeVisible: true,
+    callStackVisible: true,
+    scopeChain: [],
+    callStack: [],
+    parsedScripts: Object.create(null),
+    pausedReason: None$5,
+    pausedMessage: '',
+    debugInputValue: '',
+    debugOutputValue: '',
+    callFrameId: '',
+    expandedIds: [],
+    scopeFocusedIndex: -1,
+    focusedIndex: -1,
+    pauseOnExceptionState: None$3,
+    cache: Object.create(null),
+    // TODO maybe store cache in extension host worker
+    exceptionBreakPoints: None$4,
+    watchExpressions: [],
+    focus: 0,
+    editingValue: '',
+    debugId: 0,
+    inputSource: 0,
+    editingselectionstart: 0,
+    editingselectionend: 0,
+    openFilesOnPause: true,
+    maxDescriptionLength: 100
+  };
+  set(id, state, state);
+};
+
+const deleteAllWatchExpressions$1 = state => {
+  return {
+    ...state,
+    watchExpressions: []
+  };
 };
-const handleChange$1 = async params => {
-  // @ts-ignore
-  await invoke$2('Run And Debug.handleChange', params);
+
+const deleteWatchExpression$1 = (state, index) => {
+  if (index < 0 || index >= state.watchExpressions.length) {
+    return state;
+  }
+  return {
+    ...state,
+    watchExpressions: state.watchExpressions.toSpliced(index, 1)
+  };
 };
 
-const isEqual$2 = (oldState, newState) => {
+const isEqual$4 = (oldState, newState) => {
   return oldState.focus === newState.focus;
 };
 
-const isEqual$1 = (oldState, newState) => {
+const isEqual$3 = (oldState, newState) => {
   if (!newState.focus) {
     return true;
   }
@@ -1481,15 +1557,30 @@ const isEqual$1 = (oldState, newState) => {
 
 const RenderItems = 1;
 const RenderFocus = 2;
+const RenderValue = 3;
 const RenderFocusContext = 7;
+const RenderSelection = 8;
 
 const diffType = RenderItems;
-const isEqual = (oldState, newState) => {
+const isEqual$2 = (oldState, newState) => {
   return oldState.scopeChain === newState.scopeChain && oldState.scopeExpanded === newState.scopeExpanded && oldState.callFrameId === newState.callFrameId && oldState.breakPointsExpanded === newState.breakPointsExpanded && oldState.debugState === newState.debugState && oldState.watchExpanded === newState.watchExpanded && oldState.callStackExpanded === newState.callStackExpanded && oldState.watchExpressions === newState.watchExpressions;
 };
 
-const modules = [isEqual, isEqual$1, isEqual$2];
-const numbers = [diffType, RenderFocusContext, RenderFocus];
+const isEqual$1 = (oldState, newState) => {
+  return oldState.editingselectionstart === newState.editingselectionstart && oldState.editingselectionend === newState.editingselectionend;
+};
+
+const Script$2 = 2;
+
+const isEqual = (oldState, newState) => {
+  if (newState.inputSource === Script$2) {
+    return newState.editingValue.length === 0;
+  }
+  return true;
+};
+
+const modules = [isEqual$2, isEqual$3, isEqual, isEqual$4, isEqual$1];
+const numbers = [diffType, RenderFocusContext, RenderValue, RenderFocus, RenderSelection];
 
 const diff = (oldState, newState) => {
   const diffResult = [];
@@ -1506,7 +1597,7 @@ const diff2 = uid => {
   const {
     oldState,
     newState
-  } = get$1(uid);
+  } = get(uid);
   const diffResult = diff(oldState, newState);
   return diffResult;
 };
@@ -1515,7 +1606,7 @@ const dispose = async uid => {
   dispose$1(uid);
 };
 
-const commandIds = ['acceptWatchExpressionEdit', 'addWatchExpression', 'cancelWatchExpressionEdit', 'create', 'diff2', 'dispose', 'focusNext', 'focusPrevious', 'getCommandIds', 'getKeyBindings', 'handleArrowDown', 'handleArrowLeft', 'handleArrowUp', 'handleChange', 'handleClickCallStackItem', 'handleClickCheckBox', 'handleClickDebugButton', 'handleClickPauseOnExceptions', 'handleClickPauseOnUncaughtExceptions', 'handleClickScopeValue', 'handleClickSectionAction', 'handleClickSectionBreakPoints', 'handleClickSectionCallstack', 'handleClickSectionHeading', 'handleClickSectionScope', 'handleDebugInput', 'handleEvaluate', 'handleInputFieldChange', 'handlePaused', 'handleResumed', 'handleScriptParsed', 'loadContent', 'loadContentLater', 'pause', 'refresh', 'removeWatchExpression', 'render2', 'renderActions', 'renderEventListeners', 'resize', 'resume', 'setPauseOnExceptions', 'stepInto', 'stepOut', 'stepOver', 'terminate', 'togglePause'];
+const commandIds = ['acceptWatchExpressionEdit', 'addWatchExpression', 'cancelWatchExpressionEdit', 'create', 'diff2', 'dispose', 'focusNext', 'focusPrevious', 'getCommandIds', 'getKeyBindings', 'handleArrowDown', 'handleArrowLeft', 'handleArrowUp', 'handleChange', 'handleClickCallStackItem', 'handleClickCheckBox', 'handleClickDebugButton', 'handleClickPauseOnExceptions', 'handleClickPauseOnUncaughtExceptions', 'handleClickScopeValue', 'handleClickSectionAction', 'handleClickSectionBreakPoints', 'handleClickSectionCallstack', 'handleClickSectionHeading', 'handleClickSectionScope', 'handleClickSectionWatch', 'handleClickWatchExpression', 'handleWatchExpressionDoubleClick', 'handleClickWatchExpressionDelete', 'handleDebugInput', 'handleEvaluate', 'handleInputBlur', 'handleInputFieldChange', 'handlePaused', 'handleResumed', 'handleScriptParsed', 'handleSectionHeaderContextMenu', 'handleWatchExpressionContextMenu', 'handleWatchValueChange', 'loadContent', 'loadContentLater', 'pause', 'refresh', 'removeWatchExpression', 'deleteWatchExpression', 'deleteAllWatchExpressions', 'render2', 'renderActions', 'renderEventListeners', 'resize', 'restoreState', 'resume', 'setPauseOnExceptions', 'stepInto', 'stepOut', 'stepOver', 'terminate', 'togglePause', 'showWatch', 'hideWatch', 'showScope', 'hideScope', 'showCallStack', 'hideCallStack'];
 
 const getCommandIds = () => {
   return commandIds;
@@ -1527,7 +1618,7 @@ const emptyHighlight = {
   columnIndex: 0
 };
 const getHighlight = uid => {
-  const state = get$1(uid);
+  const state = get(uid);
   if (!state) {
     return emptyHighlight;
   }
@@ -1659,27 +1750,6 @@ const getKeyBindings = () => {
   }];
 };
 
-const createScriptMap = scripts => {
-  const parsedScripts = Object.create(null);
-  for (const script of scripts) {
-    parsedScripts[script.scriptId] = script;
-  }
-  return parsedScripts;
-};
-
-const getCallStack = callFrames => {
-  array(callFrames);
-  const callStack = [];
-  for (const callFrame of callFrames) {
-    callStack.push({
-      functionName: callFrame.functionName || '(anonymous)',
-      functionLocation: callFrame.functionLocation,
-      location: callFrame.location
-    });
-  }
-  return callStack;
-};
-
 const emptyObject = {};
 const RE_PLACEHOLDER = /\{(PH\d+)\}/g;
 const i18nString = (key, placeholders = emptyObject) => {
@@ -1720,6 +1790,9 @@ const With$1 = '`With` block';
 const PauseOnExceptions$1 = 'Pause on Exceptions';
 const PauseOnUncaughtExceptions$1 = 'Pause on uncaught Exceptions';
 const NoWatchExpression = 'No Watch Expression';
+const DeleteWatchExpression$2 = 'Delete Watch Expression';
+const DeleteAllWatchExpressions = 'Delete All Watch Expressions';
+const AddWatchExpression$1 = 'Add Watch Expression';
 
 const local = () => {
   return i18nString(Local$1);
@@ -1807,6 +1880,70 @@ const pauseOnUncaughtExceptions = () => {
 const noWatchExpression = () => {
   return i18nString(NoWatchExpression);
 };
+const deleteWatchExpression = () => {
+  return i18nString(DeleteWatchExpression$2);
+};
+const deleteAllWatchExpressions = () => {
+  return i18nString(DeleteAllWatchExpressions);
+};
+const addWatchExpression = () => {
+  return i18nString(AddWatchExpression$1);
+};
+
+const None$2 = 0;
+
+const getMenuEntriesWatchExpression = () => {
+  const addMenuEntry = {
+    id: 'addWatchExpression',
+    label: addWatchExpression(),
+    flags: None$2,
+    command: 'RunAndDebug.addWatchExpression'
+  };
+  const deleteMenuEntry = {
+    id: 'deleteWatchExpression',
+    label: deleteWatchExpression(),
+    flags: None$2,
+    command: 'RunAndDebug.deleteWatchExpression'
+  };
+  const deleteAllMenuEntry = {
+    id: 'deleteAllWatchExpressions',
+    label: deleteAllWatchExpressions(),
+    flags: None$2,
+    command: 'RunAndDebug.deleteAllWatchExpressions'
+  };
+  return [addMenuEntry, deleteMenuEntry, deleteAllMenuEntry];
+};
+
+const DebugWatchExpression = 21_900;
+const DebugWatchSectionHeading = 21_901;
+
+const getMenuEntries = () => {
+  return [{
+    id: DebugWatchExpression,
+    entries: getMenuEntriesWatchExpression()
+  }];
+};
+
+const createScriptMap = scripts => {
+  const parsedScripts = Object.create(null);
+  for (const script of scripts) {
+    parsedScripts[script.scriptId] = script;
+  }
+  return parsedScripts;
+};
+
+const getCallStack = callFrames => {
+  array(callFrames);
+  const callStack = [];
+  for (const callFrame of callFrames) {
+    callStack.push({
+      functionName: callFrame.functionName || '(anonymous)',
+      functionLocation: callFrame.functionLocation,
+      location: callFrame.location
+    });
+  }
+  return callStack;
+};
 
 const getDebugPausedMessage = reason => {
   switch (reason) {
@@ -1882,8 +2019,20 @@ const getDebugPropertyValueLabelBoolean = property => {
   return `${property.value}`;
 };
 
-const getDebugPropertyValueLabelCommon = property => {
-  return property.description;
+const getDebugPropertyValueLabelCommon = (property, maxDescriptionLength) => {
+  const description = property.description;
+  if (description && description.length > maxDescriptionLength) {
+    return description.slice(0, Math.max(0, maxDescriptionLength)) + '...';
+  }
+  return description;
+};
+
+const getArrayPropertyPreview = item => {
+  return `"${item.value}"`;
+};
+const getArrayPropertiesPreview = properties => {
+  const formattedItems = properties.map(getArrayPropertyPreview);
+  return formattedItems.join(', ');
 };
 
 const RE_ARRAY_DESCRIPTION = /\((\d+)\)/;
@@ -1894,13 +2043,6 @@ const parseLength = description => {
   }
   return '';
 };
-const getArrayPropertyPreview = item => {
-  return `"${item.value}"`;
-};
-const getArrayPropertiesPreview = properties => {
-  const formattedItems = properties.map(getArrayPropertyPreview);
-  return formattedItems.join(', ');
-};
 const getDebugPropertyValueLabelArray = property => {
   if (property.preview) {
     const innerLabel = getArrayPropertiesPreview(property.preview.properties);
@@ -1938,7 +2080,7 @@ const getDebugPropertyValueLabelString = property => {
   return 'undefined';
 };
 
-const getDebugPropertyValueLabel = property => {
+const getDebugPropertyValueLabel = (property, maxDescriptionLength) => {
   if (!property) {
     return 'n/a';
   }
@@ -1946,7 +2088,7 @@ const getDebugPropertyValueLabel = property => {
     case Number$1:
     case Symbol:
     case Function:
-      return getDebugPropertyValueLabelCommon(property);
+      return getDebugPropertyValueLabelCommon(property, maxDescriptionLength);
     case Object$1:
       return getDebugPropertyValueLabelObject(property);
     case Undefined:
@@ -1983,7 +2125,7 @@ const getDescriptionValueLabel = params => {
   }
   return `${params.data.value}`;
 };
-const getScopeChain = (params, thisObject, scopeChain, knownProperties) => {
+const getScopeChain = (params, thisObject, scopeChain, knownProperties, descriptionLength) => {
   const elements = [];
   for (const scope of scopeChain) {
     const label = getScopeLabel(scope);
@@ -2009,7 +2151,7 @@ const getScopeChain = (params, thisObject, scopeChain, knownProperties) => {
           indent: 20
         });
       }
-      const valueLabel = getDebugPropertyValueLabel(thisObject);
+      const valueLabel = getDebugPropertyValueLabel(thisObject, descriptionLength);
       elements.push({
         type: This,
         key: 'this',
@@ -2022,7 +2164,7 @@ const getScopeChain = (params, thisObject, scopeChain, knownProperties) => {
     const children = knownProperties[scope.object.objectId];
     if (children) {
       for (const child of children.result.result) {
-        const valueLabel = getDebugPropertyValueLabel(child.value);
+        const valueLabel = getDebugPropertyValueLabel(child.value, descriptionLength);
         elements.push({
           type: Property$1,
           key: child.name,
@@ -2037,7 +2179,7 @@ const getScopeChain = (params, thisObject, scopeChain, knownProperties) => {
   return elements;
 };
 
-const getPausedInfo2 = async debugId => {
+const getPausedInfo2 = async (debugId, maxDescriptionLength) => {
   const callFrames = await getCallStack$1(debugId);
   const callStack = getCallStack(callFrames);
   const {
@@ -2057,7 +2199,7 @@ const getPausedInfo2 = async debugId => {
   };
   const scopeChain = getScopeChain(params, thisObject, callFrames[0].scopeChain, {
     [objectId]: properties
-  });
+  }, maxDescriptionLength);
   const pausedReason = reason;
   const pausedMessage = getDebugPausedMessage(reason);
   return {
@@ -2071,21 +2213,10 @@ const getPausedInfo2 = async debugId => {
   };
 };
 
-const handleResumed = state => {
-  return {
-    ...state,
-    debugState: Default,
-    scopeChain: [],
-    callStack: [],
-    pausedMessage: '',
-    pausedReason: None$5,
-    callFrameId: ''
-  };
-};
-
-const handlePaused$1 = async state => {
+const handlePaused2 = async state => {
   const {
-    debugId
+    debugId,
+    watchExpressions
   } = state;
   try {
     const {
@@ -2096,7 +2227,9 @@ const handlePaused$1 = async state => {
       pausedReason,
       expandedIds,
       scriptMap
-    } = await getPausedInfo2(debugId);
+    } = await getPausedInfo2(debugId, state.maxDescriptionLength);
+    // TODO move this to getPausedInfo2
+    const newWatchExpressions = await evaluateWatchExpressions(debugId, callFrameId, watchExpressions);
     return {
       ...state,
       debugState: Paused,
@@ -2107,18 +2240,32 @@ const handlePaused$1 = async state => {
       pausedMessage,
       callFrameId,
       expandedIds,
-      parsedScripts: scriptMap
+      parsedScripts: scriptMap,
+      watchExpressions: newWatchExpressions
     };
   } catch {
     return state;
   }
 };
+
+const handleResumed = state => {
+  return {
+    ...state,
+    debugState: Default,
+    scopeChain: [],
+    callStack: [],
+    pausedMessage: '',
+    pausedReason: None$5,
+    callFrameId: ''
+  };
+};
+
 const handleChange = async (state, params) => {
   if (params.type === 'resumed') {
     return handleResumed(state);
   }
   if (params.type === 'paused') {
-    return handlePaused$1(state);
+    return handlePaused2(state);
   }
   return state;
 };
@@ -2161,8 +2308,13 @@ const getOpenInfo = (id, parsedScripts, item) => {
   };
 };
 
-const handleClickCallstackItem = async (state, dataIndex) => {
+const parseIndex = dataIndex => {
   const index = Number.parseInt(dataIndex);
+  return index;
+};
+
+const handleClickCallstackItem = async (state, dataIndex) => {
+  const index = parseIndex(dataIndex);
   const {
     callStack,
     parsedScripts,
@@ -2202,12 +2354,12 @@ const handleClickPauseOnExceptions = async state => {
     exceptionBreakPoints
   } = state;
   switch (exceptionBreakPoints) {
-    case None$3:
+    case None$4:
       return setPauseOnExceptions(state, All);
     case Uncaught:
       return setPauseOnExceptions(state, All);
     case All:
-      return setPauseOnExceptions(state, None$3);
+      return setPauseOnExceptions(state, None$4);
     default:
       return state;
   }
@@ -2215,12 +2367,12 @@ const handleClickPauseOnExceptions = async state => {
 
 const getNewExceptionState = exceptionState => {
   switch (exceptionState) {
-    case None$3:
+    case None$4:
       return Uncaught;
     case Uncaught:
-      return None$3;
+      return None$4;
     case All:
-      return None$3;
+      return None$4;
     default:
       return exceptionState;
   }
@@ -2313,14 +2465,14 @@ const collapseScopeChain = (state, expandedIds, scopeChain, element, index) => {
   };
 };
 
-const getInnerChildScopeChain = async (cache, debugId, objectId, indent) => {
+const getInnerChildScopeChain = async (cache, debugId, objectId, indent, maxDescriptionLength) => {
   if (cache[objectId]) {
     return cache[objectId];
   }
   const childScopes = await getProperties(debugId, objectId);
   const childScopeChain = [];
   for (const child of childScopes.result.result) {
-    const valueLabel = getDebugPropertyValueLabel(child.value || child.get || {});
+    const valueLabel = getDebugPropertyValueLabel(child.value || child.get || {}, maxDescriptionLength);
     childScopeChain.push({
       type: Property$1,
       key: child.name,
@@ -2333,19 +2485,20 @@ const getInnerChildScopeChain = async (cache, debugId, objectId, indent) => {
   return childScopeChain;
 };
 
-const getChildScopeChain = async (cache, index, debugId, scopeChain) => {
+const getChildScopeChain = async (cache, index, debugId, scopeChain, maxDescriptionLength) => {
   const element = scopeChain[index];
   const objectId = element.objectId;
-  const childScopeChain = await getInnerChildScopeChain(cache, debugId, objectId, element.indent);
+  const childScopeChain = await getInnerChildScopeChain(cache, debugId, objectId, element.indent, maxDescriptionLength);
   const newScopeChain = [...scopeChain.slice(0, index + 1), ...childScopeChain, ...scopeChain.slice(index + 1)];
   return newScopeChain;
 };
 
 const expandScopeChain = async (state, expandedIds, scopeChain, element, index, debugId) => {
   const {
-    cache
+    cache,
+    maxDescriptionLength
   } = state;
-  const newScopeChain = await getChildScopeChain(cache, index, debugId, scopeChain);
+  const newScopeChain = await getChildScopeChain(cache, index, debugId, scopeChain, maxDescriptionLength);
   const objectId = scopeChain[index].objectId;
   const newExpandedIds = [...expandedIds, objectId];
   return {
@@ -2540,7 +2693,7 @@ const handleClickSectionAction = async (state, actionId) => {
     return state;
   }
   if (actionId === AddWatchExpression) {
-    return addWatchExpression(state, '');
+    return addWatchExpression$1(state, '');
   }
   return state;
 };
@@ -2619,11 +2772,68 @@ const getSectionClickHandler = id => {
   }
 };
 
-const handleClickSectionHeading = async (state, id) => {
+const LeftClick = 0;
+
+const handleClickSectionHeading = async (state, id, button) => {
+  if (button !== LeftClick) {
+    return state;
+  }
   const fn = getSectionClickHandler(id);
   return fn(state);
 };
 
+const editWatchExpression = (state, index) => {
+  const {
+    watchExpressions
+  } = state;
+  const item = watchExpressions[index];
+  if (!item) {
+    return state;
+  }
+  const newItem = {
+    ...item,
+    isEditing: true
+  };
+  const newWatchExpressions = watchExpressions.toSpliced(index, 1, newItem);
+  return {
+    ...state,
+    watchExpressions: newWatchExpressions,
+    focus: FocusDebugWatchInput,
+    inputSource: Script$2,
+    editingValue: item.expression,
+    editingselectionstart: 0,
+    editingselectionend: item.expression.length
+  };
+};
+
+const handleClickWatchExpression = async (state, dataIndex, defaultPrevented) => {
+  if (defaultPrevented) {
+    return state;
+  }
+  const index = parseIndex(dataIndex);
+  return editWatchExpression(state, index);
+};
+
+const handleClickWatchExpressionDelete = async (state, dataIndex) => {
+  const index = parseIndex(dataIndex);
+  return deleteWatchExpression$1(state, index);
+};
+
+const handleWatchExpressionDoubleClick = async (state, dataIndex) => {
+  return state;
+};
+
+const handleInputBlur = async state => {
+  const {
+    watchExpressions
+  } = state;
+  const editingIndex = watchExpressions.findIndex(expr => expr.isEditing);
+  if (editingIndex === -1) {
+    return state;
+  }
+  return acceptWatchExpressionEdit(state);
+};
+
 const handleWatchValueChange = (state, value) => {
   return {
     ...state,
@@ -2651,6 +2861,50 @@ const handleScriptParsed = (state, parsedScript) => {
   };
 };
 
+const show = async (x, y, id, ...args) => {
+  await invoke$2('ContextMenu.show', x, y, id);
+};
+
+const handleSectionHeaderContextMenu = async (state, x, y, id) => {
+  await show(x, y, DebugWatchSectionHeading);
+  return state;
+};
+
+const handleWatchExpressionContextMenu = async (state, x, y, dataIndex) => {
+  const index = parseIndex(dataIndex);
+  const newState = {
+    ...state,
+    focusedIndex: index
+  };
+  const {
+    oldState
+  } = get(state.id);
+  set(state.id, oldState, newState);
+  await show(x, y, DebugWatchExpression);
+  return state;
+};
+
+const hideCallStack = state => {
+  return {
+    ...state,
+    callStackVisible: false
+  };
+};
+
+const hideScope = state => {
+  return {
+    ...state,
+    scopeVisible: false
+  };
+};
+
+const hideWatch = state => {
+  return {
+    ...state,
+    watchVisible: false
+  };
+};
+
 const getPortTuple = () => {
   const {
     port1,
@@ -2688,7 +2942,7 @@ const createEditorWorkerRpc = async () => {
 const initializeEditorWorker = async () => {
   try {
     const rpc = await createEditorWorkerRpc();
-    set(rpc);
+    set$1(rpc);
   } catch {
     // ignore
   }
@@ -2718,21 +2972,117 @@ const createExtensionHostRpc = async () => {
 
 const initializeExtensionHost = async () => {
   const rpc = await createExtensionHostRpc();
-  set$1(rpc);
+  set$2(rpc);
 };
 
 const initialize = async () => {
   await Promise.all([initializeExtensionHost(), initializeEditorWorker()]);
 };
 
-const loadContent = async (state, isTest) => {
+const getDebugId = isTest => {
   const debugId = isTest ? 'test-debug' : 'node-debug'; // TODO
+  return debugId;
+};
+
+const hasProperty = (object, key) => {
+  return Boolean(object && typeof object === 'object' && key in object);
+};
+
+const restoreBoolean = (savedState, key) => {
+  if (hasProperty(savedState, key) && typeof savedState[key] === 'boolean') {
+    return savedState[key];
+  }
+  return false;
+};
+
+const restoreBreakPointsExpanded = savedState => {
+  return restoreBoolean(savedState, 'breakPointsExpanded');
+};
+
+const restoreEditingValue = savedState => {
+  if (hasProperty(savedState, 'editingValue') && typeof savedState.editingValue === 'string') {
+    return savedState.editingValue;
+  }
+  return '';
+};
+
+const restoreFocus = savedState => {
+  // if (hasProperty(savedState, 'focus') && typeof savedState.focus === 'number') {
+  //   return savedState.focus
+  // }
+  return 0;
+};
+
+const restoreScopeExpanded = savedState => {
+  return restoreBoolean(savedState, 'scopeExpanded');
+};
+
+const restoreWatchExpanded = savedState => {
+  return restoreBoolean(savedState, 'watchExpanded');
+};
+
+const restoreWatchExpression = savedExpression => {
+  if (typeof savedExpression === 'object' && savedExpression !== null && hasProperty(savedExpression, 'expression') && typeof savedExpression.expression === 'string' && hasProperty(savedExpression, 'value') && hasProperty(savedExpression, 'isEditing') && typeof savedExpression.isEditing === 'boolean') {
+    const value = savedExpression.value;
+    if (value === null || value === undefined || typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
+      return {
+        expression: savedExpression.expression,
+        value,
+        isEditing: savedExpression.isEditing
+      };
+    }
+  }
+  return {
+    expression: '',
+    value: null,
+    isEditing: false
+  };
+};
+const restoreWatchExpressions = savedState => {
+  if (hasProperty(savedState, 'watchExpressions') && Array.isArray(savedState.watchExpressions)) {
+    return savedState.watchExpressions.map(restoreWatchExpression);
+  }
+  return [];
+};
+
+const restoreState = savedState => {
+  const watchExpressions = restoreWatchExpressions(savedState);
+  const watchExpanded = restoreWatchExpanded(savedState);
+  const scopeExpanded = restoreScopeExpanded(savedState);
+  const breakPointsExpanded = restoreBreakPointsExpanded(savedState);
+  const focus = restoreFocus();
+  const editingValue = restoreEditingValue(savedState);
+  return {
+    watchExpressions,
+    watchExpanded,
+    scopeExpanded,
+    breakPointsExpanded,
+    focus,
+    editingValue
+  };
+};
+
+const loadContent = async (state, isTest, savedState) => {
+  const {
+    watchExpressions,
+    watchExpanded,
+    breakPointsExpanded,
+    scopeExpanded,
+    focus,
+    editingValue
+  } = restoreState(savedState);
+  const debugId = getDebugId(isTest);
   return {
     ...state,
     debugId,
     debugState: Default,
-    scopeExpanded: true,
-    callStackExpanded: true
+    scopeExpanded,
+    callStackExpanded: true,
+    breakPointsExpanded,
+    watchExpressions,
+    watchExpanded,
+    focus,
+    editingValue
   };
 };
 
@@ -2758,7 +3108,7 @@ const readFile = async uri => {
     key,
     scriptId
   } = parseUri(uri);
-  const instance = get$1(key);
+  const instance = get(key);
   if (!instance) {
     return '';
   }
@@ -2797,11 +3147,11 @@ const getFocusSelector = focusId => {
   }
 };
 
-const renderFocus = state => {
+const renderFocus = (oldState, newState) => {
   const {
     id,
     focus
-  } = state;
+  } = newState;
   const selector = getFocusSelector(focus);
   if (!selector) {
     return ['Viewlet.focusElementByName', id, ''];
@@ -2809,13 +3159,26 @@ const renderFocus = state => {
   return ['Viewlet.focusElementByName', id, selector];
 };
 
-const renderFocusContext = state => {
+const renderFocusContext = (oldState, newState) => {
   const {
     focus
-  } = state;
+  } = newState;
   return ['Viewlet.setFocusContext', focus];
 };
 
+const renderInputValue = (oldState, newState) => {
+  const {
+    id,
+    focus,
+    editingValue
+  } = newState;
+  const selector = getFocusSelector(focus);
+  if (!selector) {
+    return ['Viewlet.setValueByName', id, '', editingValue];
+  }
+  return ['Viewlet.setValueByName', id, selector, editingValue];
+};
+
 const ToolBar = 'toolbar';
 const Tree = 'tree';
 const TreeItem = 'treeitem';
@@ -2832,35 +3195,111 @@ const WatchMessage = 9;
 const WatchExpression = 10;
 const InputField = 11;
 
-const Chevron = 'Chevron';
-const DebugButton = 'DebugButton';
-const DebugButtons = 'DebugButtons';
-const DebugPausedMessage = 'DebugPausedMessage';
-const DebugRow = 'DebugRow';
-const DebugRowCallStack = 'DebugRowCallStack';
-const CallStackDescription = 'CallStackDescription';
-const CallStackLabel = 'CallStackLabel';
-const CallStackArrow = 'CallStackArrow';
-const InputBox = 'InputBox';
-const DebugRowCheckBox = 'DebugRowCheckBox';
-const DebugSectionHeader = 'DebugSectionHeader';
-const DebugValue = 'DebugValue';
-const DebugValueScopeName = 'DebugValueScopeName';
-const DebugValueBoolean = 'DebugValueBoolean';
-const DebugValueFunction = 'DebugValueFunction';
-const DebugValueGetter = 'DebugValueGetter';
-const DebugValueNumber = 'DebugValueNumber';
-const DebugValueObject = 'DebugValueObject';
-const DebugValueString = 'DebugValueString';
-const DebugValueSymbol = 'DebugValueSymbol';
-const DebugValueUndefined = 'DebugValueUndefined';
-const IconButton = 'IconButton';
-const InputLabel = 'InputLabel';
-const DebugSectionActions = 'DebugSectionActions';
-const DebugSectionAction = 'DebugSectionAction';
-const DebugRowInputField = 'DebugRowInputField';
+const mergeClassNames = (...classNames) => {
+  return classNames.filter(Boolean).join(' ');
+};
+const Text$1 = 12;
+const text = data => {
+  return {
+    type: Text$1,
+    text: data,
+    childCount: 0
+  };
+};
+const CallStackArrow$1 = 'CallStackArrow';
+const CallStackDescription$1 = 'CallStackDescription';
+const CallStackLabel$1 = 'CallStackLabel';
+const Chevron$1 = 'Chevron';
+const DebugButton$1 = 'DebugButton';
+const DebugButtons$1 = 'DebugButtons';
+const DebugPausedMessage$1 = 'DebugPausedMessage';
+const DebugRow$1 = 'DebugRow';
+const DebugRowCallStack$1 = 'DebugRowCallStack';
+const DebugRowCheckBox$1 = 'DebugRowCheckBox';
+const DebugRowInputField$1 = 'DebugRowInputField';
+const DebugSectionAction$1 = 'DebugSectionAction';
+const DebugSectionActions$1 = 'DebugSectionActions';
+const DebugSectionHeader$1 = 'DebugSectionHeader';
+const DebugValue$1 = 'DebugValue';
+const DebugValueBoolean$1 = 'DebugValueBoolean';
+const DebugValueFunction$1 = 'DebugValueFunction';
+const DebugValueGetter$1 = 'DebugValueGetter';
+const DebugValueNumber$1 = 'DebugValueNumber';
+const DebugValueObject$1 = 'DebugValueObject';
+const DebugValueScopeName$1 = 'DebugValueScopeName';
+const DebugValueString$1 = 'DebugValueString';
+const DebugValueSymbol$1 = 'DebugValueSymbol';
+const DebugValueUndefined$1 = 'DebugValueUndefined';
+const DeleteWatchExpression$1 = 'DeleteWatchExpression';
+const IconButton$1 = 'IconButton';
+const InputBox$1 = 'InputBox';
+const InputLabel$1 = 'InputLabel';
+const ClassNames = {
+  __proto__: null,
+  CallStackArrow: CallStackArrow$1,
+  CallStackDescription: CallStackDescription$1,
+  CallStackLabel: CallStackLabel$1,
+  Chevron: Chevron$1,
+  DebugButton: DebugButton$1,
+  DebugButtons: DebugButtons$1,
+  DebugPausedMessage: DebugPausedMessage$1,
+  DebugRow: DebugRow$1,
+  DebugRowCallStack: DebugRowCallStack$1,
+  DebugRowCheckBox: DebugRowCheckBox$1,
+  DebugRowInputField: DebugRowInputField$1,
+  DebugSectionAction: DebugSectionAction$1,
+  DebugSectionActions: DebugSectionActions$1,
+  DebugSectionHeader: DebugSectionHeader$1,
+  DebugValue: DebugValue$1,
+  DebugValueBoolean: DebugValueBoolean$1,
+  DebugValueFunction: DebugValueFunction$1,
+  DebugValueGetter: DebugValueGetter$1,
+  DebugValueNumber: DebugValueNumber$1,
+  DebugValueObject: DebugValueObject$1,
+  DebugValueScopeName: DebugValueScopeName$1,
+  DebugValueString: DebugValueString$1,
+  DebugValueSymbol: DebugValueSymbol$1,
+  DebugValueUndefined: DebugValueUndefined$1,
+  DeleteWatchExpression: DeleteWatchExpression$1,
+  IconButton: IconButton$1,
+  InputBox: InputBox$1,
+  InputLabel: InputLabel$1
+};
+
+const {
+  CallStackArrow,
+  CallStackDescription,
+  CallStackLabel,
+  Chevron,
+  DebugButton,
+  DebugButtons,
+  DebugPausedMessage,
+  DebugRow,
+  DebugRowCallStack,
+  DebugRowCheckBox,
+  DebugRowInputField,
+  DebugSectionAction,
+  DebugSectionActions,
+  DebugSectionHeader,
+  DebugValue,
+  DebugValueBoolean,
+  DebugValueFunction,
+  DebugValueGetter,
+  DebugValueNumber,
+  DebugValueObject,
+  DebugValueScopeName,
+  DebugValueString,
+  DebugValueSymbol,
+  DebugValueUndefined,
+  DeleteWatchExpression,
+  IconButton,
+  InputBox,
+  InputLabel
+} = ClassNames;
 
 const HandleClickCallStackItem = 'handleClickCallStackItem';
+const HandleClickWatchExpression = 'handleClickWatchExpression';
+const HandleClickWatchExpressionDelete = 'handleClickWatchExpressionDelete';
 const HandleClickCheckBox = 'handleClickCheckBox';
 const HandleClickContinue = 'handleClickContinue';
 const HandleClickDebugButton = 'handleClickDebugButton';
@@ -2877,6 +3316,9 @@ const HandleClickStepOver = 'handleClickStepOver';
 const HandleDebugInput = 'handleDebugInput';
 const HandleClickSectionAction = 'handleClickSectionAction';
 const HandleInputFieldChange = 'handleInputFieldChange';
+const HandleInputBlur = 'handleInputBlur';
+const HandleSectionHeaderContextMenu = 'handleSectionHeaderContextMenu';
+const HandleWatchExpressionContextMenu = 'handleWatchExpressionContextMenu';
 
 // TODo use same click event listener for all debug sections
 
@@ -2886,6 +3328,33 @@ const Input = 6;
 const Span = 8;
 const Label = 66;
 
+const getActionDom = action => {
+  const {
+    title,
+    id,
+    icon
+  } = action;
+  return [{
+    type: Button,
+    className: DebugSectionAction,
+    title,
+    onClick: HandleClickSectionAction,
+    name: id,
+    childCount: 1
+  }, text(icon)];
+};
+
+const getActionsDom = actions => {
+  if (actions.length === 0) {
+    return [];
+  }
+  return [{
+    type: Div,
+    className: DebugSectionActions,
+    childCount: actions.length
+  }, ...actions.flatMap(getActionDom)];
+};
+
 const getChevronDownVirtualDom = (extraClassName = '') => {
   return {
     type: Div,
@@ -2901,38 +3370,6 @@ const getChevronRightVirtualDom = (extraClassName = '') => {
   };
 };
 
-const mergeClassNames = (...classNames) => {
-  return classNames.filter(Boolean).join(' ');
-};
-const Text$1 = 12;
-const text = data => {
-  return {
-    type: Text$1,
-    text: data,
-    childCount: 0
-  };
-};
-
-const getActionsDom = actions => {
-  const nodes = [];
-  nodes.push({
-    type: Div,
-    className: DebugSectionActions,
-    childCount: actions.length
-  });
-  for (const action of actions) {
-    nodes.push({
-      type: Button,
-      className: DebugSectionAction,
-      title: action.title,
-      onClick: HandleClickSectionAction,
-      name: action.id,
-      childCount: 1
-    });
-    nodes.push(text(action.icon));
-  }
-  return nodes;
-};
 const renderSectionHeading = row => {
   const {
     expanded,
@@ -2949,6 +3386,7 @@ const renderSectionHeading = row => {
     ariaLevel: 1,
     childCount: hasActions ? 3 : 2,
     onClick: HandleClickSectionHeading,
+    onContextMenu: HandleSectionHeaderContextMenu,
     'data-name': key
   }, expanded ? getChevronDownVirtualDom() : getChevronRightVirtualDom(), text(text$1), ...getActionsDom(actions || [])];
   return nodes;
@@ -3030,51 +3468,6 @@ const renderCheckBox = row => {
   }, text(text$1)];
 };
 
-const renderInputField = row => {
-  const {
-    text,
-    name
-  } = row;
-  return [{
-    type: Div,
-    className: mergeClassNames(DebugRow, DebugRowInputField),
-    role: TreeItem,
-    ariaLevel: 2,
-    childCount: 1
-  }, {
-    type: Input,
-    inputType: Text,
-    className: InputBox,
-    name,
-    value: text,
-    childCount: 0,
-    onInput: HandleInputFieldChange,
-    id: name
-  }];
-};
-
-const renderScope = row => {
-  const {
-    key,
-    expanded
-  } = row;
-  const className = DebugRow;
-  return [{
-    type: Div,
-    className,
-    role: TreeItem,
-    ariaExpanded: expanded,
-    ariaLevel: 2,
-    childCount: 2,
-    onPointerDown: HandleClickScopeValue,
-    'data-name': key
-  }, expanded ? getChevronDownVirtualDom() : getChevronRightVirtualDom(), {
-    type: Span,
-    className: mergeClassNames(DebugValue, DebugValueScopeName),
-    childCount: 1
-  }, text(key)];
-};
-
 const getDebugValueClassName = valueType => {
   switch (valueType) {
     case Undefined:
@@ -3129,25 +3522,86 @@ const renderValue = row => {
   }, text(value)];
 };
 
+const renderInputField = row => {
+  const {
+    text,
+    name
+  } = row;
+  return [{
+    type: Div,
+    className: mergeClassNames(DebugRow, DebugRowInputField),
+    role: TreeItem,
+    ariaLevel: 2,
+    childCount: 1
+  }, {
+    type: Input,
+    inputType: Text,
+    spellcheck: false,
+    autocapitalize: 'off',
+    autocorrect: 'off',
+    className: InputBox,
+    name,
+    value: text,
+    childCount: 0,
+    onInput: HandleInputFieldChange,
+    onBlur: HandleInputBlur,
+    id: name
+  }];
+};
+
+const renderScope = row => {
+  const {
+    key,
+    expanded
+  } = row;
+  const className = DebugRow;
+  return [{
+    type: Div,
+    className,
+    role: TreeItem,
+    ariaExpanded: expanded,
+    ariaLevel: 2,
+    childCount: 2,
+    onPointerDown: HandleClickScopeValue,
+    'data-name': key
+  }, expanded ? getChevronDownVirtualDom() : getChevronRightVirtualDom(), {
+    type: Span,
+    className: mergeClassNames(DebugValue, DebugValueScopeName),
+    childCount: 1
+  }, text(key)];
+};
+
 const renderWatchExpression$1 = row => {
   const {
     value,
-    key
+    key,
+    index
   } = row;
   return [{
     type: Div,
     className: DebugRow,
     role: TreeItem,
-    childCount: 2
+    childCount: 4,
+    'data-index': index,
+    onClick: HandleClickWatchExpression,
+    // TODO use doubleclick
+    onContextMenu: HandleWatchExpressionContextMenu
   }, {
     type: Span,
     className: DebugValueScopeName,
     childCount: 1
-  }, text(key), {
+  }, text(key), separator, {
     type: Span,
     className: DebugValue,
     childCount: 1
-  }, text(value)];
+  }, text(value), {
+    type: Button,
+    title: deleteWatchExpression(),
+    className: mergeClassNames(IconButton, DebugSectionAction, DeleteWatchExpression),
+    'data-index': index,
+    onClick: HandleClickWatchExpressionDelete,
+    childCount: 1
+  }, text('×')];
 };
 
 const renderWatchMessage = row => {
@@ -3223,8 +3677,12 @@ const getRunAndDebugVirtualDom2 = rows => {
 const getRunAndDebugVisibleRowsBreakPoints = state => {
   const {
     breakPointsExpanded,
-    exceptionBreakPoints
+    exceptionBreakPoints,
+    breakPointsVisible
   } = state;
+  if (!breakPointsVisible) {
+    return [];
+  }
   if (breakPointsExpanded) {
     return [{
       type: SectionHeading,
@@ -3292,8 +3750,12 @@ const getRunAndDebugVisibleRowsCallStack = state => {
   const {
     callStack: callStack$1,
     callStackExpanded,
-    parsedScripts
+    parsedScripts,
+    callStackVisible
   } = state;
+  if (!callStackVisible) {
+    return [];
+  }
   const rows = [];
   if (callStackExpanded) {
     rows.push({
@@ -3497,13 +3959,18 @@ const getVisibleScopeItems = (scopeChain, expandedIds, focusedIndex) => {
 };
 
 const getRunAndDebugVisibleRowsScope = state => {
-  const rows = [];
   const {
     scopeChain,
     scopeExpanded,
     expandedIds,
-    scopeFocusedIndex
+    scopeFocusedIndex,
+    scopeVisible,
+    debugState
   } = state;
+  if (!scopeVisible) {
+    return [];
+  }
+  const rows = [];
   if (scopeExpanded) {
     rows.push({
       type: SectionHeading,
@@ -3516,7 +3983,13 @@ const getRunAndDebugVisibleRowsScope = state => {
       name: Scope,
       description: ''
     });
-    if (scopeChain.length === 0) {
+    if (debugState === Paused) {
+      const visible = getVisibleScopeItems(scopeChain, expandedIds, scopeFocusedIndex);
+      for (const scope of visible) {
+        const renderer = getScopeRenderer(scope.type);
+        rows.push(...renderer(scope));
+      }
+    } else {
       rows.push({
         type: Message,
         text: notPaused(),
@@ -3528,12 +4001,6 @@ const getRunAndDebugVisibleRowsScope = state => {
         name: '',
         description: ''
       });
-    } else {
-      const visible = getVisibleScopeItems(scopeChain, expandedIds, scopeFocusedIndex);
-      for (const scope of visible) {
-        const renderer = getScopeRenderer(scope.type);
-        rows.push(...renderer(scope));
-      }
     }
   } else {
     rows.push({
@@ -3554,7 +4021,7 @@ const getRunAndDebugVisibleRowsScope = state => {
 const formatValue = value => {
   return value === null || value === undefined ? '' : String(value);
 };
-const renderWatchExpression = (expression, value, isEditing) => {
+const renderWatchExpression = (expression, value, isEditing, index) => {
   if (isEditing) {
     return {
       type: InputField,
@@ -3565,7 +4032,8 @@ const renderWatchExpression = (expression, value, isEditing) => {
       indent: 0,
       valueType: '',
       name: WatchExpressionInput,
-      description: ''
+      description: '',
+      index
     };
   }
   return {
@@ -3577,7 +4045,8 @@ const renderWatchExpression = (expression, value, isEditing) => {
     indent: 0,
     valueType: '',
     name: '',
-    description: ''
+    description: '',
+    index
   };
 };
 const getRunAndDebugVisibleRowsWatchContent = watchExpressions => {
@@ -3596,7 +4065,9 @@ const getRunAndDebugVisibleRowsWatchContent = watchExpressions => {
     });
   } else {
     for (const watchExpression of watchExpressions) {
-      rows.push(renderWatchExpression(watchExpression.expression, watchExpression.value, watchExpression.isEditing || false));
+      // TODO simplify index
+      const index = watchExpressions.indexOf(watchExpression);
+      rows.push(renderWatchExpression(watchExpression.expression, watchExpression.value, watchExpression.isEditing || false, index));
     }
   }
   return rows;
@@ -3616,8 +4087,12 @@ const getWatchActions = watchExpanded => {
 const getRunAndDebugVisibleRowsWatch = state => {
   const {
     watchExpanded,
-    watchExpressions
+    watchExpressions,
+    watchVisible
   } = state;
+  if (!watchVisible) {
+    return [];
+  }
   const rows = [{
     type: SectionHeading,
     text: watch(),
@@ -3637,8 +4112,7 @@ const getRunAndDebugVisibleRowsWatch = state => {
 };
 
 const getRunAndDebugVisibleRows = state => {
-  const rows = [...getRunAndDebugVisibleRowsWatch(state), ...getRunAndDebugVisibleRowsBreakPoints(state), ...getRunAndDebugVisibleRowsScope(state), ...getRunAndDebugVisibleRowsCallStack(state)];
-  return rows;
+  return [...getRunAndDebugVisibleRowsWatch(state), ...getRunAndDebugVisibleRowsBreakPoints(state), ...getRunAndDebugVisibleRowsScope(state), ...getRunAndDebugVisibleRowsCallStack(state)];
 };
 
 const renderItems = (oldState, newState) => {
@@ -3647,6 +4121,17 @@ const renderItems = (oldState, newState) => {
   return ['Viewlet.setDom2', newState.id, dom];
 };
 
+const renderSelection = (oldState, newState) => {
+  const {
+    editingselectionstart,
+    editingselectionend,
+    focus,
+    id
+  } = newState;
+  const selector = getFocusSelector(focus);
+  return ['Viewlet.setSelectionByName', id, selector, editingselectionstart, editingselectionend];
+};
+
 const getRenderer = diffType => {
   switch (diffType) {
     case RenderItems:
@@ -3655,6 +4140,10 @@ const getRenderer = diffType => {
       return renderFocusContext;
     case RenderFocus:
       return renderFocus;
+    case RenderValue:
+      return renderInputValue;
+    case RenderSelection:
+      return renderSelection;
     default:
       throw new Error('unknown renderer');
   }
@@ -3673,8 +4162,8 @@ const render2 = (uid, diffResult) => {
   const {
     oldState,
     newState
-  } = get$1(uid);
-  set$4(uid, newState, newState);
+  } = get(uid);
+  set(uid, newState, newState);
   const commands = applyRender(oldState, newState, diffResult);
   return commands;
 };
@@ -3761,7 +4250,7 @@ const getRunAndDebugButtonsVirtualDom = debugState => {
 const renderActions = uid => {
   const {
     newState
-  } = get$1(uid);
+  } = get(uid);
   const {
     scopeExpanded
   } = newState;
@@ -3810,7 +4299,8 @@ const renderEventListeners = () => {
     params: ['handleDebugInput', 'event.target.value']
   }, {
     name: HandleClickSectionHeading,
-    params: ['handleClickSectionHeading', 'event.target.dataset.name']
+    params: ['handleClickSectionHeading', 'event.target.dataset.name', 'event.button'],
+    preventDefault: true
   }, {
     name: HandleClickCheckBox,
     params: ['handleClickCheckBox', 'event.target.name']
@@ -3820,6 +4310,13 @@ const renderEventListeners = () => {
   }, {
     name: HandleClickCallStackItem,
     params: ['handleClickCallStackItem', 'event.target.dataset.index']
+  }, {
+    name: HandleClickWatchExpression,
+    params: ['handleClickWatchExpression', 'event.target.dataset.index', 'event.defaultPrevented']
+  }, {
+    name: HandleClickWatchExpressionDelete,
+    params: ['handleClickWatchExpressionDelete', 'event.target.dataset.index'],
+    preventDefault: true
   }, {
     name: HandleClickScopeValue,
     params: ['handleClickScopeValue', 'event.target.dataset.name']
@@ -3829,12 +4326,78 @@ const renderEventListeners = () => {
   }, {
     name: HandleClickSectionAction,
     params: ['handleClickSectionAction', 'event.target.name']
+  }, {
+    name: HandleInputBlur,
+    params: ['handleInputBlur']
+  }, {
+    name: HandleSectionHeaderContextMenu,
+    params: ['handleSectionHeaderContextMenu', 'event.clientX', 'event.clientY', 'event.target.dataset.name'],
+    preventDefault: true
+  }, {
+    name: HandleWatchExpressionContextMenu,
+    params: ['handleWatchExpressionContextMenu', 'event.clientX', 'event.clientY', 'event.target.dataset.index'],
+    preventDefault: true
   }];
 };
 
-const saveState = uid => {
+const SaveStateReasonHotReload = 1;
+
+const saveState = (uid, reason) => {
+  const {
+    newState
+  } = get(uid);
+  const {
+    watchExpressions,
+    scopeExpanded,
+    watchExpanded,
+    breakPointsExpanded,
+    focus,
+    editingValue,
+    inputSource
+  } = newState;
+  if (reason === SaveStateReasonHotReload) {
+    return {
+      watchExpressions,
+      scopeExpanded,
+      breakPointsExpanded,
+      watchExpanded,
+      focus,
+      editingValue,
+      inputSource
+    };
+  }
+  return {
+    watchExpressions: watchExpressions.map(expr => ({
+      ...expr,
+      isEditing: false
+    })),
+    scopeExpanded,
+    breakPointsExpanded,
+    watchExpanded,
+    focus: 0,
+    editingValue: '',
+    inputSource: 0
+  };
+};
+
+const showCallStack = state => {
+  return {
+    ...state,
+    callStackVisible: true
+  };
+};
+
+const showScope = state => {
+  return {
+    ...state,
+    scopeVisible: true
+  };
+};
+
+const showWatch = state => {
   return {
-    x: 1
+    ...state,
+    watchVisible: true
   };
 };
 
@@ -3843,12 +4406,17 @@ const terminate = () => {
 };
 
 const commandMap = {
+  'Debug.handleChange': handleChange$1,
   'Debug.paused': paused,
   'Debug.resumed': resumed,
   'Debug.scriptParsed': scriptParsed,
-  'Debug.handleChange': handleChange$1,
   'Initialize.initialize': initialize,
-  'RunAndDebug.create': create$1,
+  'RunAndDebug.acceptWatchExpressionEdit': wrapCommand(acceptWatchExpressionEdit),
+  'RunAndDebug.addWatchExpression': wrapCommand(addWatchExpression$1),
+  'RunAndDebug.cancelWatchExpressionEdit': wrapCommand(cancelWatchExpressionEdit),
+  'RunAndDebug.create': create,
+  'RunAndDebug.deleteWatchExpression': deleteWatchExpression$1,
+  'RunAndDebug.deleteAllWatchExpressions': deleteAllWatchExpressions$1,
   'RunAndDebug.diff2': diff2,
   'RunAndDebug.dispose': dispose,
   'RunAndDebug.focusNext': wrapCommand(focusNext),
@@ -3856,10 +4424,13 @@ const commandMap = {
   'RunAndDebug.getCommandIds': getCommandIds,
   'RunAndDebug.getHighlight': getHighlight,
   'RunAndDebug.getKeyBindings': getKeyBindings,
+  'RunAndDebug.getMenuEntries': getMenuEntries,
   'RunAndDebug.handleArrowDown': wrapCommand(handleArrowDown),
   'RunAndDebug.handleArrowLeft': wrapCommand(handleArrowLeft),
   'RunAndDebug.handleArrowRight': wrapCommand(handleArrowRight),
   'RunAndDebug.handleArrowUp': wrapCommand(handleArrowUp),
+  'RunAndDebug.handleChange': wrapCommand(handleChange),
+  'RunAndDebug.handleClickCallStackItem': wrapCommand(handleClickCallstackItem),
   'RunAndDebug.handleClickCheckBox': wrapCommand(handleClickCheckBox),
   'RunAndDebug.handleClickDebugButton': wrapCommand(handleClickDebugButton),
   'RunAndDebug.handleClickPauseOnExceptions': wrapCommand(handleClickPauseOnExceptions),
@@ -3868,20 +4439,23 @@ const commandMap = {
   'RunAndDebug.handleClickSectionAction': wrapCommand(handleClickSectionAction),
   'RunAndDebug.handleClickSectionBreakPoints': wrapCommand(handleClickSectionBreakPoints),
   'RunAndDebug.handleClickSectionCallstack': wrapCommand(handleClickSectionCallstack),
-  'RunAndDebug.handleClickCallStackItem': wrapCommand(handleClickCallstackItem),
   'RunAndDebug.handleClickSectionHeading': wrapCommand(handleClickSectionHeading),
   'RunAndDebug.handleClickSectionScope': wrapCommand(handleClickSectionScope),
+  'RunAndDebug.handleClickSectionWatch': wrapCommand(handleClickSectionWatch),
+  'RunAndDebug.handleClickWatchExpression': wrapCommand(handleClickWatchExpression),
+  'RunAndDebug.handleClickWatchExpressionDelete': wrapCommand(handleClickWatchExpressionDelete),
   'RunAndDebug.handleDebugInput': wrapCommand(handleDebugInput),
   'RunAndDebug.handleEvaluate': wrapCommand(handleEvaluate),
+  'RunAndDebug.handleInputBlur': wrapCommand(handleInputBlur),
+  'RunAndDebug.handleInputFieldChange': wrapCommand(handleInputFieldChange),
   // eslint-disable-next-line  @typescript-eslint/no-deprecated
   'RunAndDebug.handlePaused': wrapCommand(handlePaused),
-  'RunAndDebug.addWatchExpression': wrapCommand(addWatchExpression),
-  'RunAndDebug.cancelWatchExpressionEdit': wrapCommand(cancelWatchExpressionEdit),
-  'RunAndDebug.acceptWatchExpressionEdit': wrapCommand(acceptWatchExpressionEdit),
-  'RunAndDebug.handleChange': wrapCommand(handleChange),
-  'RunAndDebug.handleInputFieldChange': wrapCommand(handleInputFieldChange),
   'RunAndDebug.handleResumed': wrapCommand(handleResumed),
   'RunAndDebug.handleScriptParsed': wrapCommand(handleScriptParsed),
+  'RunAndDebug.handleSectionHeaderContextMenu': wrapCommand(handleSectionHeaderContextMenu),
+  'RunAndDebug.handleWatchExpressionContextMenu': wrapCommand(handleWatchExpressionContextMenu),
+  'RunAndDebug.handleWatchExpressionDoubleClick': wrapCommand(handleWatchExpressionDoubleClick),
+  'RunAndDebug.handleWatchValueChange': wrapCommand(handleWatchValueChange),
   'RunAndDebug.loadContent': wrapCommand(loadContent),
   'RunAndDebug.loadContentLater': wrapCommand(loadContentLater),
   'RunAndDebug.pause': wrapCommand(pause),
@@ -3892,6 +4466,7 @@ const commandMap = {
   'RunAndDebug.renderActions': renderActions,
   'RunAndDebug.renderEventListeners': renderEventListeners,
   'RunAndDebug.resize': wrapCommand(resize),
+  'RunAndDebug.restoreState': restoreState,
   'RunAndDebug.resume': wrapCommand(resume),
   'RunAndDebug.saveState': saveState,
   'RunAndDebug.setPauseOnExceptions': wrapCommand(setPauseOnExceptions),
@@ -3899,14 +4474,20 @@ const commandMap = {
   'RunAndDebug.stepOut': wrapCommand(stepOut),
   'RunAndDebug.stepOver': wrapCommand(stepOver),
   'RunAndDebug.terminate': terminate,
-  'RunAndDebug.togglePause': wrapCommand(togglePause)
+  'RunAndDebug.togglePause': wrapCommand(togglePause),
+  'RunAndDebug.showWatch': wrapCommand(showWatch),
+  'RunAndDebug.hideWatch': wrapCommand(hideWatch),
+  'RunAndDebug.showScope': wrapCommand(showScope),
+  'RunAndDebug.hideScope': wrapCommand(hideScope),
+  'RunAndDebug.showCallStack': wrapCommand(showCallStack),
+  'RunAndDebug.hideCallStack': wrapCommand(hideCallStack)
 };
 
 const listen = async () => {
   const rpc = await WebWorkerRpcClient.create({
     commandMap: commandMap
   });
-  set$2(rpc);
+  set$3(rpc);
 };
 
 const main = async () => {