@lvce-editor/static-server 0.52.17 → 0.52.19

package/static/{dac7509 → 226a943}/packages/debug-worker/dist/debugWorkerMain.js

@@ -1130,6 +1130,10 @@ const create = rpcId => {
     },
     set(rpc) {
       set$d(rpcId, rpc);
+    },
+    async dispose() {
+      const rpc = get(rpcId);
+      await rpc.dispose();
     }
   };
 };
@@ -1266,12 +1270,38 @@ const getScriptSource = (debugId, scriptId) => {
     params: [debugId, scriptId]
   });
 };
+const getPausedStatus = debugId => {
+  return executeProvider({
+    event: `onDebug:${debugId}`,
+    method: 'ExtensionHostDebug.getPausedStatus',
+    params: [debugId]
+  });
+};
+const getCallStack$1 = debugId => {
+  return executeProvider({
+    event: `onDebug:${debugId}`,
+    method: 'ExtensionHostDebug.getCallStack',
+    params: [debugId]
+  });
+};
+const getScripts = debugId => {
+  return executeProvider({
+    event: `onDebug:${debugId}`,
+    method: 'ExtensionHostDebug.getScripts',
+    params: [debugId]
+  });
+};
 
 const {
   invoke,
   set
 } = EditorWorker;
 
+const getDebugUri = (key, scriptId) => {
+  const uri = `debug:///${key}/${scriptId}`;
+  return uri;
+};
+
 const openUri = async (uri, languageId, rowIndex, columnIndex) => {
   const focus = true;
   const options = {
@@ -1295,6 +1325,9 @@ const openAtPausedLocation = async () => {
   const {
     callStack
   } = newState;
+  if (callStack.length === 0) {
+    return;
+  }
   const first = callStack[0];
   const {
     functionLocation
@@ -1304,7 +1337,7 @@ const openAtPausedLocation = async () => {
     lineNumber,
     columnNumber
   } = functionLocation;
-  const uri = `debug:///${key}/${scriptId}`;
+  const uri = getDebugUri(key, scriptId);
   const rowIndex = lineNumber;
   const columnIndex = columnNumber;
   const languageId = 'javascript'; // TODO
@@ -1360,6 +1393,10 @@ const resumed = async params => {
   const key = getKey();
   await updateDebugInfo(key);
 };
+const handleChange$1 = async params => {
+  // @ts-ignore
+  await invoke$2('Run And Debug.handleChange', params);
+};
 
 const RenderItems = 1;
 
@@ -1395,7 +1432,7 @@ const dispose = async uid => {
   dispose$1(uid);
 };
 
-const commandIds = ['create', 'diff2', 'dispose', 'focusNext', 'focusPrevious', 'getCommandIds', 'getKeyBindings', 'handleArrowDown', 'handleArrowLeft', 'handleArrowRight', 'handleArrowUp', 'handleClickCheckBox', 'handleClickDebugButton', 'handleClickPauseOnExceptions', 'handleClickPauseOnUncaughtExceptions', 'handleClickScopeValue', 'handleClickSectionBreakPoints', 'handleClickSectionCallstack', 'handleClickSectionHeading', 'handleClickSectionScope', 'handleDebugInput', 'handleEvaluate', 'handlePaused', 'handleResumed', 'handleScriptParsed', 'loadContent', 'loadContentLater', 'pause', 'render2', 'renderActions', 'renderEventListeners', 'resize', 'resume', 'setPauseOnExceptions', 'stepInto', 'stepOut', 'stepOver', 'terminate', 'togglePause'];
+const commandIds = ['create', 'diff2', 'dispose', 'focusNext', 'focusPrevious', 'getCommandIds', 'getKeyBindings', 'handleArrowDown', 'handleArrowLeft', 'handleArrowRight', 'handleChange', 'handleArrowUp', 'handleClickCallStackItem', 'handleClickCheckBox', 'handleClickDebugButton', 'handleClickPauseOnExceptions', 'handleClickPauseOnUncaughtExceptions', 'handleClickScopeValue', 'handleClickSectionBreakPoints', 'handleClickSectionCallstack', 'handleClickSectionHeading', 'handleClickSectionScope', 'handleDebugInput', 'handleEvaluate', 'handlePaused', 'handleResumed', 'handleScriptParsed', 'loadContent', 'loadContentLater', 'pause', 'refresh', 'render2', 'renderActions', 'renderEventListeners', 'resize', 'resume', 'setPauseOnExceptions', 'stepInto', 'stepOut', 'stepOver', 'terminate', 'togglePause'];
 
 const getCommandIds = () => {
   return commandIds;
@@ -1431,6 +1468,9 @@ const getHighlight = uid => {
     columnNumber
   } = location;
   const script = parsedScripts[scriptId];
+  if (!script) {
+    return emptyHighlight;
+  }
   return {
     uri: script.url,
     rowIndex: lineNumber,
@@ -1539,89 +1579,12 @@ const getKeyBindings = () => {
   }];
 };
 
-const setPauseOnExceptions = async (state, value) => {
-  const {
-    debugId,
-    exceptionBreakPoints
-  } = state;
-  if (exceptionBreakPoints === value) {
-    return state;
-  }
-  await setPauseOnExceptions$1(debugId, value);
-  return {
-    ...state,
-    exceptionBreakPoints: value
-  };
-};
-
-const handleClickPauseOnExceptions = async state => {
-  const {
-    exceptionBreakPoints
-  } = state;
-  switch (exceptionBreakPoints) {
-    case None$3:
-      return setPauseOnExceptions(state, All);
-    case Uncaught:
-      return setPauseOnExceptions(state, All);
-    case All:
-      return setPauseOnExceptions(state, None$3);
-    default:
-      return state;
-  }
-};
-
-const getNewExceptionState = exceptionState => {
-  switch (exceptionState) {
-    case None$3:
-      return Uncaught;
-    case Uncaught:
-      return None$3;
-    case All:
-      return None$3;
-    default:
-      return exceptionState;
-  }
-};
-const handleClickPauseOnUncaughtExceptions = async state => {
-  const {
-    exceptionBreakPoints
-  } = state;
-  const newExceptionState = getNewExceptionState(exceptionBreakPoints);
-  return setPauseOnExceptions(state, newExceptionState);
-};
-
-const PauseOnExceptions$1 = 'pause-on-exceptions';
-const PauseOnUncaughtExceptions$1 = 'pause-on-uncaught-exceptions';
-const DebugResume = 'DebugResume';
-const DebugPause$1 = 'DebugPause';
-const DebugStepOver$1 = 'DebugStepOver';
-const DebugStepInto$1 = 'DebugStepInto';
-const DebugStepOut$1 = 'DebugStepOut';
-const DebugRestart$1 = 'DebugRestart';
-const DebugStop$1 = 'DebugStop';
-
-const getCheckBoxClickHandler = name => {
-  switch (name) {
-    case PauseOnExceptions$1:
-      return handleClickPauseOnExceptions;
-    case PauseOnUncaughtExceptions$1:
-      return handleClickPauseOnUncaughtExceptions;
-    default:
-      throw new Error('unknown input name');
-  }
-};
-
-const handleClickCheckBox = (state, name) => {
-  const fn = getCheckBoxClickHandler(name);
-  return fn(state);
-};
-
-const removeElement = (array, element) => {
-  const index = array.indexOf(element);
-  if (index === -1) {
-    return array;
+const createScriptMap = scripts => {
+  const parsedScripts = Object.create(null);
+  for (const script of scripts) {
+    parsedScripts[script.scriptId] = script;
   }
-  return [...array.slice(0, index), ...array.slice(index + 1)];
+  return parsedScripts;
 };
 
 const getCallStack = callFrames => {
@@ -1637,148 +1600,6 @@ const getCallStack = callFrames => {
   return callStack;
 };
 
-const Scope$4 = 1;
-const This = 2;
-const Property$1 = 3;
-const Exception$1 = 4;
-
-const Boolean$1 = 'boolean';
-const None$1 = '';
-const Number$1 = 'number';
-const Object$1 = 'object';
-const String = 'string';
-const Symbol = 'symbol';
-const Function = 'function';
-const Getter = 'getter';
-const Undefined = 'undefined';
-
-const getDebugPropertyValueLabelBoolean = property => {
-  return `${property.value}`;
-};
-
-const getDebugPropertyValueLabelCommon = property => {
-  return property.description;
-};
-
-const RE_ARRAY_DESCRIPTION = /\((\d+)\)/;
-const parseLength = description => {
-  const match = RE_ARRAY_DESCRIPTION.exec(description);
-  if (match) {
-    return match[1];
-  }
-  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);
-    const lengthPreview = parseLength(property.description);
-    return `(${lengthPreview}) [` + innerLabel + ']';
-  }
-  return property.description;
-};
-
-const getInnerPreview = inner => {
-  if (inner.type === 'string') {
-    return `${inner.name}:'${inner.value}'`;
-  }
-  return `${inner.name}:${inner.value}`;
-};
-const getDebugPropertyValueLabelObject = property => {
-  if (property.subtype === 'array') {
-    return getDebugPropertyValueLabelArray(property);
-  }
-  if (property.preview) {
-    const inner = property.preview.properties.map(getInnerPreview).join(',');
-    if (property.preview.description !== 'Object') {
-      return `${property.preview.description} {${inner}}`;
-    }
-    return `{${inner}}`;
-  }
-  return property.description;
-};
-
-const getDebugPropertyValueLabelString$1 = property => {
-  return `"${property.value}"`;
-};
-
-const getDebugPropertyValueLabelString = property => {
-  return 'undefined';
-};
-
-const getDebugPropertyValueLabel = property => {
-  if (!property) {
-    return 'n/a';
-  }
-  switch (property.type) {
-    case Number$1:
-    case Symbol:
-    case Function:
-      return getDebugPropertyValueLabelCommon(property);
-    case Object$1:
-      return getDebugPropertyValueLabelObject(property);
-    case Undefined:
-      return getDebugPropertyValueLabelString();
-    case String:
-      return getDebugPropertyValueLabelString$1(property);
-    case Boolean$1:
-      return getDebugPropertyValueLabelBoolean(property);
-    default:
-      return `${JSON.stringify(property)}`;
-  }
-};
-
-const getDebugValueObjectId = child => {
-  return child.object?.objectId || child.value?.objectId || '';
-};
-
-const getDebugValueType = child => {
-  if (!child) {
-    return None$1;
-  }
-  if (child.value && child.value.type) {
-    return child.value.type;
-  }
-  if (child.get) {
-    return Getter;
-  }
-  return None$1;
-};
-
-const getInnerChildScopeChain = async (cache, debugId, objectId, indent) => {
-  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 || {});
-    childScopeChain.push({
-      type: Property$1,
-      key: child.name,
-      value: valueLabel,
-      valueType: getDebugValueType(child),
-      objectId: getDebugValueObjectId(child),
-      indent: indent + 10
-    });
-  }
-  return childScopeChain;
-};
-
-const getChildScopeChain = async (cache, index, debugId, scopeChain) => {
-  const element = scopeChain[index];
-  const objectId = element.objectId;
-  const childScopeChain = await getInnerChildScopeChain(cache, debugId, objectId, element.indent);
-  const newScopeChain = [...scopeChain.slice(0, index + 1), ...childScopeChain, ...scopeChain.slice(index + 1)];
-  return newScopeChain;
-};
-
 const emptyObject = {};
 const RE_PLACEHOLDER = /\{(PH\d+)\}/g;
 const i18nString = (key, placeholders = emptyObject) => {
@@ -1808,7 +1629,7 @@ const NotPaused = 'Not Paused';
 const Pause = 'Pause';
 const Restart = 'Restart';
 const Resume = 'Resume';
-const Scope$3 = 'Scope';
+const Scope$4 = 'Scope';
 const Script$1 = 'Script';
 const StepInto = 'Step Into';
 const StepOut = 'Step Out';
@@ -1816,8 +1637,9 @@ const StepOver = 'Step Over';
 const Stop = 'Stop';
 const Watch$2 = 'Watch';
 const With$1 = '`With` block';
-const PauseOnExceptions = 'Pause on Exceptions';
-const PauseOnUncaughtExceptions = 'Pause on uncaught Exceptions';
+const PauseOnExceptions$1 = 'Pause on Exceptions';
+const PauseOnUncaughtExceptions$1 = 'Pause on uncaught Exceptions';
+const NoWatchExpression = 'No Watch Expression';
 
 const local = () => {
   return i18nString(Local$1);
@@ -1879,7 +1701,7 @@ const breakPoints = () => {
   return i18nString(BreakPoints$1);
 };
 const scope = () => {
-  return i18nString(Scope$3);
+  return i18nString(Scope$4);
 };
 const callStack = () => {
   return i18nString(CallStack$3);
@@ -1893,14 +1715,17 @@ const resume$1 = () => {
 const restart = () => {
   return i18nString(Restart);
 };
-const stop = () => {
+const stop$1 = () => {
   return i18nString(Stop);
 };
 const pauseOnExceptions = () => {
-  return i18nString(PauseOnExceptions);
+  return i18nString(PauseOnExceptions$1);
 };
 const pauseOnUncaughtExceptions = () => {
-  return i18nString(PauseOnUncaughtExceptions);
+  return i18nString(PauseOnUncaughtExceptions$1);
+};
+const noWatchExpression = () => {
+  return i18nString(NoWatchExpression);
 };
 
 const getDebugPausedMessage = reason => {
@@ -1958,18 +1783,132 @@ const getScopeLabel = element => {
   }
 };
 
-const getDescriptionValueLabel = params => {
-  if (params.data && params.data.description) {
-    return params.data.description.replaceAll(NewLine, Space);
-  }
-  return `${params.data.value}`;
-};
-const getScopeChain = (params, thisObject, scopeChain, knownProperties) => {
+const Scope$3 = 1;
+const This = 2;
+const Property$1 = 3;
+const Exception$1 = 4;
+
+const Boolean$1 = 'boolean';
+const None$1 = '';
+const Number$1 = 'number';
+const Object$1 = 'object';
+const String = 'string';
+const Symbol = 'symbol';
+const Function = 'function';
+const Getter = 'getter';
+const Undefined = 'undefined';
+
+const getDebugPropertyValueLabelBoolean = property => {
+  return `${property.value}`;
+};
+
+const getDebugPropertyValueLabelCommon = property => {
+  return property.description;
+};
+
+const RE_ARRAY_DESCRIPTION = /\((\d+)\)/;
+const parseLength = description => {
+  const match = RE_ARRAY_DESCRIPTION.exec(description);
+  if (match) {
+    return match[1];
+  }
+  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);
+    const lengthPreview = parseLength(property.description);
+    return `(${lengthPreview}) [` + innerLabel + ']';
+  }
+  return property.description;
+};
+
+const getInnerPreview = inner => {
+  if (inner.type === 'string') {
+    return `${inner.name}:'${inner.value}'`;
+  }
+  return `${inner.name}:${inner.value}`;
+};
+const getDebugPropertyValueLabelObject = property => {
+  if (property.subtype === 'array') {
+    return getDebugPropertyValueLabelArray(property);
+  }
+  if (property.preview) {
+    const inner = property.preview.properties.map(getInnerPreview).join(',');
+    if (property.preview.description !== 'Object') {
+      return `${property.preview.description} {${inner}}`;
+    }
+    return `{${inner}}`;
+  }
+  return property.description;
+};
+
+const getDebugPropertyValueLabelString$1 = property => {
+  return `"${property.value}"`;
+};
+
+const getDebugPropertyValueLabelString = property => {
+  return 'undefined';
+};
+
+const getDebugPropertyValueLabel = property => {
+  if (!property) {
+    return 'n/a';
+  }
+  switch (property.type) {
+    case Number$1:
+    case Symbol:
+    case Function:
+      return getDebugPropertyValueLabelCommon(property);
+    case Object$1:
+      return getDebugPropertyValueLabelObject(property);
+    case Undefined:
+      return getDebugPropertyValueLabelString();
+    case String:
+      return getDebugPropertyValueLabelString$1(property);
+    case Boolean$1:
+      return getDebugPropertyValueLabelBoolean(property);
+    default:
+      return `${JSON.stringify(property)}`;
+  }
+};
+
+const getDebugValueObjectId = child => {
+  return child.object?.objectId || child.value?.objectId || '';
+};
+
+const getDebugValueType = child => {
+  if (!child) {
+    return None$1;
+  }
+  if (child.value && child.value.type) {
+    return child.value.type;
+  }
+  if (child.get) {
+    return Getter;
+  }
+  return None$1;
+};
+
+const getDescriptionValueLabel = params => {
+  if (params.data && params.data.description) {
+    return params.data.description.replaceAll(NewLine, Space);
+  }
+  return `${params.data.value}`;
+};
+const getScopeChain = (params, thisObject, scopeChain, knownProperties) => {
   const elements = [];
   for (const scope of scopeChain) {
     const label = getScopeLabel(scope);
     elements.push({
-      type: Scope$4,
+      type: Scope$3,
       key: label,
       value: '',
       valueType: '',
@@ -2018,10 +1957,234 @@ const getScopeChain = (params, thisObject, scopeChain, knownProperties) => {
   return elements;
 };
 
-const handlePaused = async (state, params) => {
+const getPausedInfo2 = async debugId => {
+  const callFrames = await getCallStack$1(debugId);
+  const callStack = getCallStack(callFrames);
+  const {
+    reason,
+    data
+  } = await getPausedStatus(debugId);
+  const scripts = await getScripts(debugId);
+  const scriptMap = createScriptMap(scripts);
+  const objectId = callFrames[0].scopeChain[0].object.objectId;
+  const callFrameId = callFrames[0].callFrameId;
+  const properties = await getProperties(debugId, objectId);
+  const thisObject = callFrames[0].this;
+  object(thisObject);
+  const params = {
+    data,
+    reason
+  };
+  const scopeChain = getScopeChain(params, thisObject, callFrames[0].scopeChain, {
+    [objectId]: properties
+  });
+  const pausedReason = reason;
+  const pausedMessage = getDebugPausedMessage(reason);
+  return {
+    scopeChain,
+    callStack,
+    pausedReason,
+    pausedMessage,
+    callFrameId,
+    expandedIds: [objectId],
+    scriptMap
+  };
+};
+
+const handleResumed = state => {
+  return {
+    ...state,
+    debugState: Default,
+    scopeChain: [],
+    callStack: [],
+    pausedMessage: '',
+    pausedReason: None$5,
+    callFrameId: ''
+  };
+};
+
+const handlePaused$1 = async state => {
   const {
     debugId
   } = state;
+  try {
+    const {
+      callFrameId,
+      callStack,
+      scopeChain,
+      pausedMessage,
+      pausedReason,
+      expandedIds,
+      scriptMap
+    } = await getPausedInfo2(debugId);
+    return {
+      ...state,
+      debugState: Paused,
+      scopeChain,
+      scopeExpanded: true,
+      callStack,
+      pausedReason,
+      pausedMessage,
+      callFrameId,
+      expandedIds,
+      parsedScripts: scriptMap
+    };
+  } catch {
+    return state;
+  }
+};
+const handleChange = async (state, params) => {
+  if (params.type === 'resumed') {
+    return handleResumed(state);
+  }
+  if (params.type === 'paused') {
+    return handlePaused$1(state);
+  }
+  return {
+    ...state
+  };
+};
+
+const isSupportedOpenUri = uri => {
+  if (uri.startsWith('file://')) {
+    return true;
+  }
+  return false;
+};
+
+const getOpenInfo = (id, parsedScripts, item) => {
+  const {
+    location
+  } = item;
+  const {
+    scriptId,
+    lineNumber,
+    columnNumber
+  } = location;
+  const script = parsedScripts[scriptId];
+  const {
+    url,
+    scriptLanguage
+  } = script;
+  if (isSupportedOpenUri(url)) {
+    return {
+      uri: url,
+      languageId: scriptLanguage,
+      rowIndex: lineNumber,
+      columnIndex: columnNumber
+    };
+  }
+  const debugUri = getDebugUri(id, scriptId);
+  return {
+    uri: debugUri,
+    languageId: scriptLanguage,
+    rowIndex: lineNumber,
+    columnIndex: columnNumber
+  };
+};
+
+const handleClickCallstackItem = async (state, dataIndex) => {
+  const index = Number.parseInt(dataIndex);
+  const {
+    callStack,
+    parsedScripts,
+    id
+  } = state;
+  const item = callStack[index];
+  if (!item) {
+    return state;
+  }
+  const {
+    uri,
+    languageId,
+    rowIndex,
+    columnIndex
+  } = getOpenInfo(id, parsedScripts, item);
+  await openUri(uri, languageId, rowIndex, columnIndex);
+  return state;
+};
+
+const setPauseOnExceptions = async (state, value) => {
+  const {
+    debugId,
+    exceptionBreakPoints
+  } = state;
+  if (exceptionBreakPoints === value) {
+    return state;
+  }
+  await setPauseOnExceptions$1(debugId, value);
+  return {
+    ...state,
+    exceptionBreakPoints: value
+  };
+};
+
+const handleClickPauseOnExceptions = async state => {
+  const {
+    exceptionBreakPoints
+  } = state;
+  switch (exceptionBreakPoints) {
+    case None$3:
+      return setPauseOnExceptions(state, All);
+    case Uncaught:
+      return setPauseOnExceptions(state, All);
+    case All:
+      return setPauseOnExceptions(state, None$3);
+    default:
+      return state;
+  }
+};
+
+const getNewExceptionState = exceptionState => {
+  switch (exceptionState) {
+    case None$3:
+      return Uncaught;
+    case Uncaught:
+      return None$3;
+    case All:
+      return None$3;
+    default:
+      return exceptionState;
+  }
+};
+const handleClickPauseOnUncaughtExceptions = async state => {
+  const {
+    exceptionBreakPoints
+  } = state;
+  const newExceptionState = getNewExceptionState(exceptionBreakPoints);
+  return setPauseOnExceptions(state, newExceptionState);
+};
+
+const PauseOnExceptions = 'PauseOnExceptions';
+const PauseOnUncaughtExceptions = 'PauseOnUncaughtExceptions';
+const DebugResume = 'DebugResume';
+const DebugPause$1 = 'DebugPause';
+const DebugStepOver$1 = 'DebugStepOver';
+const DebugStepInto$1 = 'DebugStepInto';
+const DebugStepOut$1 = 'DebugStepOut';
+const DebugRestart$1 = 'DebugRestart';
+const DebugStop$1 = 'DebugStop';
+
+const getCheckBoxClickHandler = name => {
+  switch (name) {
+    case PauseOnExceptions:
+      return handleClickPauseOnExceptions;
+    case PauseOnUncaughtExceptions:
+      return handleClickPauseOnUncaughtExceptions;
+    default:
+      throw new Error('unknown input name');
+  }
+};
+
+const handleClickCheckBox = (state, name) => {
+  const fn = getCheckBoxClickHandler(name);
+  return fn(state);
+};
+
+/**
+ * @deprecated use getPausedInfo2 instead
+ */
+const getPausedInfo = async (debugId, params) => {
   const callStack = getCallStack(params.callFrames);
   const objectId = params.callFrames[0].scopeChain[0].object.objectId;
   const callFrameId = params.callFrames[0].callFrameId;
@@ -2033,11 +2196,8 @@ const handlePaused = async (state, params) => {
   });
   const pausedReason = params.reason;
   const pausedMessage = getDebugPausedMessage(params.reason);
-  return {
-    ...state,
-    debugState: Paused,
+  return {
     scopeChain,
-    scopeExpanded: true,
     callStack,
     pausedReason,
     pausedMessage,
@@ -2045,15 +2205,15 @@ const handlePaused = async (state, params) => {
     expandedIds: [objectId]
   };
 };
-const getElementIndex = (debugId, scopeChain, text) => {
-  for (let i = 0; i < scopeChain.length; i++) {
-    const element = scopeChain[i];
-    if (element.key === text) {
-      return i;
-    }
+
+const removeElement = (array, element) => {
+  const index = array.indexOf(element);
+  if (index === -1) {
+    return array;
   }
-  return -1;
+  return [...array.slice(0, index), ...array.slice(index + 1)];
 };
+
 const getCollapsedScopeChain = (cache, scopeChain, element, index) => {
   const indent = element.indent;
   for (let i = index + 1; i < scopeChain.length; i++) {
@@ -2080,7 +2240,7 @@ const getCollapsedScopeChain = (cache, scopeChain, element, index) => {
 // TODO when expanding, retrieve items from cache by parent id first
 // if they don't exist, query the actual items
 
-const collapse = (state, expandedIds, scopeChain, element, index) => {
+const collapseScopeChain = (state, expandedIds, scopeChain, element, index) => {
   const {
     cache
   } = state;
@@ -2097,7 +2257,36 @@ const collapse = (state, expandedIds, scopeChain, element, index) => {
     cache: newCache
   };
 };
-const expand = async (state, expandedIds, scopeChain, element, index, debugId) => {
+
+const getInnerChildScopeChain = async (cache, debugId, objectId, indent) => {
+  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 || {});
+    childScopeChain.push({
+      type: Property$1,
+      key: child.name,
+      value: valueLabel,
+      valueType: getDebugValueType(child),
+      objectId: getDebugValueObjectId(child),
+      indent: indent + 10
+    });
+  }
+  return childScopeChain;
+};
+
+const getChildScopeChain = async (cache, index, debugId, scopeChain) => {
+  const element = scopeChain[index];
+  const objectId = element.objectId;
+  const childScopeChain = await getInnerChildScopeChain(cache, debugId, objectId, element.indent);
+  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
   } = state;
@@ -2111,6 +2300,18 @@ const expand = async (state, expandedIds, scopeChain, element, index, debugId) =
     scopeFocusedIndex: index
   };
 };
+
+const getElementIndex = (debugId, scopeChain, text) => {
+  for (let i = 0; i < scopeChain.length; i++) {
+    const element = scopeChain[i];
+    if (element.key === text) {
+      return i;
+    }
+  }
+  return -1;
+};
+
+// TODO pass index to function instead of text
 const handleClickScopeValue = async (state, text) => {
   const {
     scopeChain,
@@ -2118,12 +2319,47 @@ const handleClickScopeValue = async (state, text) => {
     expandedIds
   } = state;
   const index = getElementIndex(debugId, scopeChain, text);
+  if (index === -1) {
+    return state;
+  }
   const element = scopeChain[index];
   if (expandedIds.includes(element.objectId)) {
-    return collapse(state, expandedIds, scopeChain, element, index);
+    return collapseScopeChain(state, expandedIds, scopeChain, element, index);
   }
-  return expand(state, expandedIds, scopeChain, element, index, debugId);
+  return expandScopeChain(state, expandedIds, scopeChain, element, index, debugId);
+};
+
+const handlePaused = async (state, params) => {
+  const {
+    debugId
+  } = state;
+  // eslint-disable-next-line  @typescript-eslint/no-deprecated
+  const {
+    scopeChain,
+    callFrameId,
+    pausedReason,
+    pausedMessage,
+    callStack,
+    expandedIds
+  } = await getPausedInfo(debugId, params);
+  return {
+    ...state,
+    debugState: Paused,
+    scopeChain,
+    scopeExpanded: true,
+    callStack,
+    pausedReason,
+    pausedMessage,
+    callFrameId,
+    expandedIds
+  };
 };
+
+// TODO maybe store scope chain elements as tree
+// TODO when collapsing, store collapsed elements by parent id in cache
+// TODO when expanding, retrieve items from cache by parent id first
+// if they don't exist, query the actual items
+
 const resume = async state => {
   const {
     debugId
@@ -2231,25 +2467,38 @@ const resize = (state, dimensions) => {
   };
 };
 
-const handleClickDebugButton = async (state, inputName) => {
+const stop = async state => {
+  // TODO
+  return state;
+};
+const noop = async state => {
+  // TODO
+  return state;
+};
+const getDebugButtonHandler = inputName => {
   switch (inputName) {
     case DebugPause$1:
-      return pause(state);
+      return pause;
     case DebugResume:
-      return resume(state);
+      return resume;
     case DebugStepInto$1:
-      return stepInto(state);
+      return stepInto;
     case DebugStepOver$1:
-      return stepOver(state);
+      return stepOver;
     case DebugStepOut$1:
-      return stepOut(state);
+      return stepOut;
     case DebugStop$1:
-      return state;
+      return stop;
     default:
-      return state;
+      return noop;
   }
 };
 
+const handleClickDebugButton = async (state, inputName) => {
+  const fn = getDebugButtonHandler(inputName);
+  return fn(state);
+};
+
 const handleClickSectionBreakPoints = state => {
   const {
     breakPointsExpanded
@@ -2329,18 +2578,6 @@ const handleClickSectionHeading = async (state, id) => {
   return fn(state);
 };
 
-const handleResumed = state => {
-  return {
-    ...state,
-    debugState: Default,
-    scopeChain: [],
-    callStack: [],
-    pausedMessage: '',
-    pausedReason: None$5,
-    callFrameId: ''
-  };
-};
-
 const handleScriptParsed = (state, parsedScript) => {
   const {
     parsedScripts
@@ -2388,7 +2625,7 @@ const createEditorWorkerRpc = async () => {
   }
 };
 
-const initializEditorWorker = async () => {
+const initializeEditorWorker = async () => {
   try {
     const rpc = await createEditorWorkerRpc();
     set(rpc);
@@ -2425,7 +2662,7 @@ const initializeExtensionHost = async () => {
 };
 
 const initialize = async () => {
-  await Promise.all([initializeExtensionHost(), initializEditorWorker()]);
+  await Promise.all([initializeExtensionHost(), initializeEditorWorker()]);
 };
 
 const loadContent = async (state, isTest) => {
@@ -2475,6 +2712,12 @@ const readFile = async uri => {
   return content;
 };
 
+const refresh = async state => {
+  return {
+    ...state
+  };
+};
+
 const ToolBar = 'toolbar';
 const Tree = 'tree';
 const TreeItem = 'treeitem';
@@ -2487,15 +2730,21 @@ const Property = 5;
 const Message = 6;
 const CallStack$1 = 7;
 const CheckBox$1 = 8;
+const WatchMessage = 9;
 
 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 DebugRowCheckBox = 'DebugRowCheckBox';
 const DebugSectionHeader = 'DebugSectionHeader';
 const DebugValue = 'DebugValue';
+const DebugValueScopeName = 'DebugValueScopeName';
 const DebugValueBoolean = 'DebugValueBoolean';
 const DebugValueFunction = 'DebugValueFunction';
 const DebugValueGetter = 'DebugValueGetter';
@@ -2507,20 +2756,21 @@ const DebugValueUndefined = 'DebugValueUndefined';
 const IconButton = 'IconButton';
 const InputLabel = 'InputLabel';
 
+const HandleClickCallStackItem = 'handleClickCallStackItem';
+const HandleClickCheckBox = 'handleClickCheckBox';
 const HandleClickContinue = 'handleClickContinue';
 const HandleClickDebugButton = 'handleClickDebugButton';
 const HandleClickPause = 'handleClickPause';
 const HandleClickScopeValue = 'handleClickScopeValue';
 const HandleClickSectionBreakPoints = 'handleClickSectionBreakPoints';
 const HandleClickSectionCallstack = 'handleClickSectionCallstack';
+const HandleClickSectionHeading = 'handleClickSectionHeading';
 const HandleClickSectionScope = 'handleClickSectionScope';
 const HandleClickSectionWatch = 'handleClickSectionWatch';
 const HandleClickStepInto = 'handleClickStepInto';
 const HandleClickStepOut = 'handleClickStepOut';
 const HandleClickStepOver = 'handleClickStepOver';
 const HandleDebugInput = 'handleDebugInput';
-const HandleClickSectionHeading = 'handleClickSectionHeading';
-const HandleClickCheckBox = 'handleClickCheckBox';
 
 // TODo use same click event listener for all debug sections
 
@@ -2575,6 +2825,51 @@ const renderSectionHeading = row => {
   }, expanded ? getChevronDownVirtualDom() : getChevronRightVirtualDom(), text(text$1)];
 };
 
+const getArrowNodes = hasArrow => {
+  if (!hasArrow) {
+    return [];
+  }
+  return [{
+    type: Div,
+    className: CallStackArrow,
+    childCount: 1
+  }, {
+    type: Div,
+    className: 'MaskIcon MaskIconArrowRight',
+    childCount: 0
+  }];
+};
+
+const labelNode = {
+  type: Div,
+  className: CallStackLabel,
+  childCount: 1
+};
+const descriptionNode = {
+  type: Div,
+  className: CallStackDescription,
+  childCount: 1
+};
+const renderCallStack = row => {
+  const {
+    text: text$1,
+    description,
+    hasArrow,
+    index
+  } = row;
+  const childCount = hasArrow ? 3 : 2;
+  const arrowNodes = getArrowNodes(hasArrow);
+  return [{
+    type: Div,
+    className: mergeClassNames(DebugRow, DebugRowCallStack),
+    role: TreeItem,
+    ariaLevel: 2,
+    childCount,
+    onClick: HandleClickCallStackItem,
+    'data-index': index
+  }, ...arrowNodes, labelNode, text(text$1), descriptionNode, text(description)];
+};
+
 const CheckBox = 'checkbox';
 
 const renderCheckBox = row => {
@@ -2605,6 +2900,28 @@ const renderCheckBox = row => {
   }, text(text$1)];
 };
 
+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:
@@ -2630,54 +2947,6 @@ const getDebugValueClassName = valueType => {
 
 const separator = text(': ');
 
-const renderNoop = row => {
-  return [{
-    type: Div,
-    childCount: 1
-  }, text('unknown row type')];
-};
-const renderMessage = row => {
-  const {
-    text: text$1
-  } = row;
-  return [{
-    type: Div,
-    className: DebugPausedMessage,
-    childCount: 1
-  }, text(text$1)];
-};
-const renderCallStack = row => {
-  const {
-    text: text$1
-  } = row;
-  return [{
-    type: Div,
-    className: mergeClassNames(DebugRow, 'DebugRowCallStack'),
-    role: TreeItem,
-    ariaLevel: 2,
-    childCount: 1
-  }, text(text$1)];
-};
-const renderScope = row => {
-  const {
-    key,
-    expanded
-  } = row;
-  const className = DebugRow;
-  return [{
-    type: Div,
-    className,
-    role: TreeItem,
-    ariaExpanded: expanded,
-    ariaLevel: 2,
-    childCount: 2,
-    onPointerDown: HandleClickScopeValue
-  }, expanded ? getChevronDownVirtualDom() : getChevronRightVirtualDom(), {
-    type: Span,
-    className: mergeClassNames(DebugValue, 'DebugValueScopeName'),
-    childCount: 1
-  }, text(key)];
-};
 const renderValue = row => {
   const {
     indent,
@@ -2702,11 +2971,39 @@ const renderValue = row => {
     childCount: 1
   }, text(key), separator, {
     type: Span,
-    className: 'DebugValue ' + className,
+    className: mergeClassNames(DebugValue, className),
     childCount: 1
   }, text(value)];
 };
 
+const renderWatchMessage = row => {
+  const {
+    text: text$1
+  } = row;
+  return [{
+    type: Div,
+    className: 'WatchMessage',
+    childCount: 1
+  }, text(text$1)];
+};
+
+const renderNoop = row => {
+  return [{
+    type: Div,
+    childCount: 1
+  }, text('unknown row type')];
+};
+const renderMessage = row => {
+  const {
+    text: text$1
+  } = row;
+  return [{
+    type: Div,
+    className: DebugPausedMessage,
+    childCount: 1
+  }, text(text$1)];
+};
+
 const getRowRenderer = type => {
   switch (type) {
     case Message:
@@ -2723,6 +3020,8 @@ const getRowRenderer = type => {
       return renderValue;
     case CheckBox$1:
       return renderCheckBox;
+    case WatchMessage:
+      return renderWatchMessage;
     default:
       return renderNoop;
   }
@@ -2757,7 +3056,8 @@ const getRunAndDebugVisibleRowsBreakPoints = state => {
       value: '',
       indent: 0,
       valueType: '',
-      name: ''
+      name: '',
+      description: ''
     }, {
       type: CheckBox$1,
       text: pauseOnExceptions(),
@@ -2766,7 +3066,8 @@ const getRunAndDebugVisibleRowsBreakPoints = state => {
       value: '',
       indent: 0,
       valueType: '',
-      name: PauseOnExceptions$1
+      name: PauseOnExceptions,
+      description: ''
     }, {
       type: CheckBox$1,
       text: pauseOnUncaughtExceptions(),
@@ -2775,7 +3076,8 @@ const getRunAndDebugVisibleRowsBreakPoints = state => {
       value: '',
       indent: 0,
       valueType: '',
-      name: PauseOnUncaughtExceptions$1
+      name: PauseOnUncaughtExceptions,
+      description: ''
     }];
   }
   return [{
@@ -2786,7 +3088,8 @@ const getRunAndDebugVisibleRowsBreakPoints = state => {
     value: '',
     indent: 0,
     valueType: '',
-    name: ''
+    name: '',
+    description: ''
   }];
 };
 
@@ -2794,10 +3097,24 @@ const Scope = 'Scope';
 const CallStack = 'CallStack';
 const Watch = 'Watch';
 
+const formatLocation = (url, rowIndex, columnIndex) => {
+  const lastSlashIndex = url.lastIndexOf('/');
+  const adjustedRowIndex = rowIndex + 1;
+  if (lastSlashIndex === -1) {
+    return `${url}:${adjustedRowIndex}`;
+  }
+  const part = url.slice(lastSlashIndex + 1);
+  return `${part}:${adjustedRowIndex}`;
+};
+
+const unknownScript = {
+  url: 'unknown'
+};
 const getRunAndDebugVisibleRowsCallStack = state => {
   const {
     callStack: callStack$1,
-    callStackExpanded
+    callStackExpanded,
+    parsedScripts
   } = state;
   const rows = [];
   if (callStackExpanded) {
@@ -2809,7 +3126,8 @@ const getRunAndDebugVisibleRowsCallStack = state => {
       value: '',
       indent: 0,
       valueType: '',
-      name: CallStack
+      name: CallStack,
+      description: ''
     });
     if (callStack$1.length === 0) {
       rows.push({
@@ -2820,10 +3138,17 @@ const getRunAndDebugVisibleRowsCallStack = state => {
         value: '',
         indent: 0,
         valueType: '',
-        name: ''
+        name: '',
+        description: ''
       });
     } else {
       for (const item of callStack$1) {
+        const {
+          scriptId,
+          lineNumber} = item.location;
+        const script = parsedScripts[scriptId] || unknownScript;
+        const description = formatLocation(script.url, lineNumber);
+        const hasArrow = item === callStack$1[0];
         rows.push({
           type: CallStack$1,
           text: item.functionName,
@@ -2832,7 +3157,10 @@ const getRunAndDebugVisibleRowsCallStack = state => {
           value: '',
           indent: 0,
           valueType: '',
-          name: ''
+          name: '',
+          description,
+          hasArrow,
+          index: callStack$1.indexOf(item) // TODO use for loop
         });
       }
     }
@@ -2845,7 +3173,8 @@ const getRunAndDebugVisibleRowsCallStack = state => {
       value: '',
       indent: 0,
       valueType: '',
-      name: CallStack
+      name: CallStack,
+      description: ''
     });
   }
   return rows;
@@ -2869,7 +3198,8 @@ const getScopeExceptionRows = scope => {
     value,
     indent,
     valueType: '',
-    name: ''
+    name: '',
+    description: ''
   }];
 };
 
@@ -2894,7 +3224,8 @@ const getScopePropertyRows = scope => {
     value,
     indent,
     valueType,
-    name: ''
+    name: '',
+    description: ''
   }];
 };
 
@@ -2911,7 +3242,8 @@ const getScopeScopeRows = scope => {
     value: '',
     indent: 0,
     valueType: '',
-    name: ''
+    name: '',
+    description: ''
   }];
 };
 
@@ -2930,7 +3262,8 @@ const getScopeThisRows = scope => {
     value,
     indent,
     valueType,
-    name: ''
+    name: '',
+    description: ''
   }];
 };
 
@@ -2940,7 +3273,7 @@ const getScopeRenderer = type => {
       return getScopeThisRows;
     case Exception$1:
       return getScopeExceptionRows;
-    case Scope$4:
+    case Scope$3:
       return getScopeScopeRows;
     case Property$1:
       return getScopePropertyRows;
@@ -3002,7 +3335,8 @@ const getRunAndDebugVisibleRowsScope = state => {
       value: '',
       indent: 0,
       valueType: '',
-      name: Scope
+      name: Scope,
+      description: ''
     });
     if (scopeChain.length === 0) {
       rows.push({
@@ -3013,7 +3347,8 @@ const getRunAndDebugVisibleRowsScope = state => {
         value: '',
         indent: 0,
         valueType: '',
-        name: ''
+        name: '',
+        description: ''
       });
     } else {
       const visible = getVisibleScopeItems(scopeChain, expandedIds, scopeFocusedIndex);
@@ -3031,7 +3366,8 @@ const getRunAndDebugVisibleRowsScope = state => {
       value: '',
       indent: 0,
       valueType: '',
-      name: Scope
+      name: Scope,
+      description: ''
     });
   }
   return rows;
@@ -3041,6 +3377,31 @@ const getRunAndDebugVisibleRowsWatch = state => {
   const {
     watchExpanded
   } = state;
+  if (watchExpanded) {
+    const message = noWatchExpression();
+    return [{
+      type: SectionHeading,
+      text: watch(),
+      expanded: watchExpanded,
+      key: Watch$1,
+      value: '',
+      indent: 0,
+      valueType: '',
+      name: Watch,
+      // TODO i18n
+      description: ''
+    }, {
+      type: WatchMessage,
+      text: message,
+      expanded: false,
+      key: '',
+      value: '',
+      indent: 0,
+      valueType: '',
+      name: '',
+      description: ''
+    }];
+  }
   return [{
     type: SectionHeading,
     text: watch(),
@@ -3049,7 +3410,9 @@ const getRunAndDebugVisibleRowsWatch = state => {
     value: '',
     indent: 0,
     valueType: '',
-    name: Watch // TODO i18n
+    name: Watch,
+    // TODO i18n
+    description: ''
   }];
 };
 
@@ -3132,7 +3495,7 @@ const getDebugButtons = debugState => {
     icon: DebugRestart,
     fn: DebugRestart$1
   }, {
-    title: stop(),
+    title: stop$1(),
     icon: DebugStop,
     fn: DebugStop$1
   });
@@ -3230,6 +3593,12 @@ const renderEventListeners = () => {
   }, {
     name: HandleClickDebugButton,
     params: ['handleClickDebugButton', 'event.target.name']
+  }, {
+    name: HandleClickCallStackItem,
+    params: ['handleClickCallStackItem', 'event.target.dataset.index']
+  }, {
+    name: HandleClickScopeValue,
+    params: ['handleClickScopeValue', 'event.target.dataset.name']
   }];
 };
 
@@ -3247,6 +3616,7 @@ const commandMap = {
   'Debug.paused': paused,
   'Debug.resumed': resumed,
   'Debug.scriptParsed': scriptParsed,
+  'Debug.handleChange': handleChange$1,
   'Initialize.initialize': initialize,
   'RunAndDebug.create': create$1,
   'RunAndDebug.diff2': diff2,
@@ -3267,18 +3637,21 @@ const commandMap = {
   'RunAndDebug.handleClickScopeValue': wrapCommand(handleClickScopeValue),
   'RunAndDebug.handleClickSectionBreakPoints': wrapCommand(handleClickSectionBreakPoints),
   'RunAndDebug.handleClickSectionCallstack': wrapCommand(handleClickSectionCallstack),
+  'RunAndDebug.handleClickCallStackItem': wrapCommand(handleClickCallstackItem),
   'RunAndDebug.handleClickSectionHeading': wrapCommand(handleClickSectionHeading),
   'RunAndDebug.handleClickSectionScope': wrapCommand(handleClickSectionScope),
   'RunAndDebug.handleDebugInput': wrapCommand(handleDebugInput),
   'RunAndDebug.handleEvaluate': wrapCommand(handleEvaluate),
   'RunAndDebug.handlePaused': wrapCommand(handlePaused),
   'RunAndDebug.handleResumed': wrapCommand(handleResumed),
+  'RunAndDebug.handleChange': wrapCommand(handleChange),
   'RunAndDebug.handleScriptParsed': wrapCommand(handleScriptParsed),
   'RunAndDebug.loadContent': wrapCommand(loadContent),
   'RunAndDebug.loadContentLater': wrapCommand(loadContentLater),
   'RunAndDebug.pause': wrapCommand(pause),
   'RunAndDebug.readFile': readFile,
   'RunAndDebug.render2': render2,
+  'RunAndDebug.refresh': wrapCommand(refresh),
   'RunAndDebug.renderActions': renderActions,
   'RunAndDebug.renderEventListeners': renderEventListeners,
   'RunAndDebug.resize': wrapCommand(resize),