@lvce-editor/static-server 0.52.16 → 0.52.18

package/static/{77b54f0 → d4443aa}/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();
     }
   };
 };
@@ -1365,7 +1369,7 @@ const RenderItems = 1;
 
 const diffType = RenderItems;
 const isEqual = (oldState, newState) => {
-  return oldState.scopeChain === newState.scopeChain && oldState.scopeExpanded === newState.scopeExpanded && oldState.callFrameId === newState.callFrameId && oldState.breakPointsExpanded === newState.breakPointsExpanded && oldState.debugState === newState.debugState;
+  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;
 };
 
 const modules = [isEqual];
@@ -1395,7 +1399,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', 'handleArrowUp', 'handleClickCallStackItem', '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 getCommandIds = () => {
   return commandIds;
@@ -1539,10 +1543,49 @@ const getKeyBindings = () => {
   }];
 };
 
+const getOpenInfo = (parsedScripts, item) => {
+  const {
+    location
+  } = item;
+  const {
+    scriptId,
+    lineNumber,
+    columnNumber
+  } = location;
+  const script = parsedScripts[scriptId];
+  return {
+    uri: script.url,
+    languageId: script.scriptLanguage,
+    rowIndex: lineNumber,
+    columnIndex: columnNumber
+  };
+};
+
+const handleClickCallstackItem = async (state, dataIndex) => {
+  const index = Number.parseInt(dataIndex);
+  const {
+    callStack,
+    parsedScripts
+  } = state;
+  const item = callStack[index];
+  const {
+    uri,
+    languageId,
+    rowIndex,
+    columnIndex
+  } = getOpenInfo(parsedScripts, item);
+  await openUri(uri, languageId, rowIndex, columnIndex);
+  return state;
+};
+
 const setPauseOnExceptions = async (state, value) => {
   const {
-    debugId
+    debugId,
+    exceptionBreakPoints
   } = state;
+  if (exceptionBreakPoints === value) {
+    return state;
+  }
   await setPauseOnExceptions$1(debugId, value);
   return {
     ...state,
@@ -1566,24 +1609,28 @@ const handleClickPauseOnExceptions = async state => {
   }
 };
 
-const handleClickPauseOnUncaughtExceptions = async state => {
-  const {
-    exceptionBreakPoints
-  } = state;
-  switch (exceptionBreakPoints) {
+const getNewExceptionState = exceptionState => {
+  switch (exceptionState) {
     case None$3:
-      return setPauseOnExceptions(state, Uncaught);
+      return Uncaught;
     case Uncaught:
-      return setPauseOnExceptions(state, None$3);
+      return None$3;
     case All:
-      return setPauseOnExceptions(state, None$3);
+      return None$3;
     default:
-      return state;
+      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 PauseOnExceptions$1 = 'PauseOnExceptions';
+const PauseOnUncaughtExceptions$1 = 'PauseOnUncaughtExceptions';
 const DebugResume = 'DebugResume';
 const DebugPause$1 = 'DebugPause';
 const DebugStepOver$1 = 'DebugStepOver';
@@ -1592,23 +1639,20 @@ const DebugStepOut$1 = 'DebugStepOut';
 const DebugRestart$1 = 'DebugRestart';
 const DebugStop$1 = 'DebugStop';
 
-const handleClickCheckBox = (state, name) => {
+const getCheckBoxClickHandler = name => {
   switch (name) {
     case PauseOnExceptions$1:
-      return handleClickPauseOnExceptions(state);
+      return handleClickPauseOnExceptions;
     case PauseOnUncaughtExceptions$1:
-      return handleClickPauseOnUncaughtExceptions(state);
+      return handleClickPauseOnUncaughtExceptions;
     default:
       throw new Error('unknown input name');
   }
 };
 
-const removeElement = (array, element) => {
-  const index = array.indexOf(element);
-  if (index === -1) {
-    return array;
-  }
-  return [...array.slice(0, index), ...array.slice(index + 1)];
+const handleClickCheckBox = (state, name) => {
+  const fn = getCheckBoxClickHandler(name);
+  return fn(state);
 };
 
 const getCallStack = callFrames => {
@@ -1624,148 +1668,6 @@ const getCallStack = callFrames => {
   return callStack;
 };
 
-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 = description.match(RE_ARRAY_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) => {
@@ -1779,8 +1681,8 @@ const i18nString = (key, placeholders = emptyObject) => {
 };
 
 const Block$1 = 'Block';
-const BreakPoints = 'BreakPoints';
-const CallStack$2 = 'Call Stack';
+const BreakPoints$1 = 'BreakPoints';
+const CallStack$3 = 'Call Stack';
 const Catch$1 = '`Catch` block';
 const Closure$1 = 'Closure';
 const DebuggerPaused = 'Debugger paused';
@@ -1795,16 +1697,17 @@ const NotPaused = 'Not Paused';
 const Pause = 'Pause';
 const Restart = 'Restart';
 const Resume = 'Resume';
-const Scope$2 = 'Scope';
+const Scope$4 = 'Scope';
 const Script$1 = 'Script';
 const StepInto = 'Step Into';
 const StepOut = 'Step Out';
 const StepOver = 'Step Over';
 const Stop = 'Stop';
-const Watch$1 = 'Watch';
+const Watch$2 = 'Watch';
 const With$1 = '`With` block';
 const PauseOnExceptions = 'Pause on Exceptions';
 const PauseOnUncaughtExceptions = 'Pause on uncaught Exceptions';
+const NoWatchExpression = 'No Watch Expression';
 
 const local = () => {
   return i18nString(Local$1);
@@ -1860,16 +1763,16 @@ const pause$1 = () => {
   return i18nString(Pause);
 };
 const watch = () => {
-  return i18nString(Watch$1);
+  return i18nString(Watch$2);
 };
 const breakPoints = () => {
-  return i18nString(BreakPoints);
+  return i18nString(BreakPoints$1);
 };
 const scope = () => {
-  return i18nString(Scope$2);
+  return i18nString(Scope$4);
 };
 const callStack = () => {
-  return i18nString(CallStack$2);
+  return i18nString(CallStack$3);
 };
 const notPaused = () => {
   return i18nString(NotPaused);
@@ -1880,7 +1783,7 @@ const resume$1 = () => {
 const restart = () => {
   return i18nString(Restart);
 };
-const stop = () => {
+const stop$1 = () => {
   return i18nString(Stop);
 };
 const pauseOnExceptions = () => {
@@ -1889,6 +1792,9 @@ const pauseOnExceptions = () => {
 const pauseOnUncaughtExceptions = () => {
   return i18nString(PauseOnUncaughtExceptions);
 };
+const noWatchExpression = () => {
+  return i18nString(NoWatchExpression);
+};
 
 const getDebugPausedMessage = reason => {
   switch (reason) {
@@ -1945,6 +1851,126 @@ const getScopeLabel = element => {
   }
 };
 
+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) {
@@ -1961,7 +1987,7 @@ const getScopeChain = (params, thisObject, scopeChain, knownProperties) => {
     // if(params.reason)
     if (scope.type === Local) {
       if (params.reason === Exception$2) {
-        const value = params.data.description.replaceAll(NewLine, Space);
+        const value = getDescriptionValueLabel(params);
         elements.push({
           type: Exception$1,
           key: 'Exception',
@@ -1999,10 +2025,7 @@ const getScopeChain = (params, thisObject, scopeChain, knownProperties) => {
   return elements;
 };
 
-const handlePaused = async (state, params) => {
-  const {
-    debugId
-  } = state;
+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;
@@ -2015,10 +2038,7 @@ const handlePaused = async (state, params) => {
   const pausedReason = params.reason;
   const pausedMessage = getDebugPausedMessage(params.reason);
   return {
-    ...state,
-    debugState: Paused,
     scopeChain,
-    scopeExpanded: true,
     callStack,
     pausedReason,
     pausedMessage,
@@ -2026,15 +2046,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++) {
@@ -2061,7 +2081,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;
@@ -2078,7 +2098,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;
@@ -2092,6 +2141,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,
@@ -2099,12 +2160,46 @@ 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;
+  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
@@ -2212,25 +2307,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
@@ -2248,10 +2356,16 @@ const handleClickSectionCallstack = state => {
   } = state;
   return {
     ...state,
-    callStackExpanded: !callStackExpanded
+    callStackExpanded: !callStackExpanded,
+    focusedIndex: 1 // TODO don't hardcode number
   };
 };
 
+const BreakPoints = 'breakpoints';
+const CallStack$2 = 'callstack';
+const Scope$2 = 'scope';
+const Watch$1 = 'watch';
+
 const handleClickSectionScope = state => {
   const {
     scopeExpanded
@@ -2263,6 +2377,16 @@ const handleClickSectionScope = state => {
   };
 };
 
+const handleClickSectionUnkown = state => {
+  const {
+    callStackExpanded
+  } = state;
+  return {
+    ...state,
+    callStackExpanded: !callStackExpanded
+  };
+};
+
 const handleClickSectionWatch = state => {
   const {
     watchExpanded
@@ -2274,27 +2398,26 @@ const handleClickSectionWatch = state => {
   };
 };
 
-// TODO use input name
-const handleClickSectionHeading = async (state, text) => {
-  switch (text) {
-    case 'Watch':
-    case 'DebugSectionHeader DebugSectionHeaderWatch':
-      return handleClickSectionWatch(state);
-    case 'Breakpoints':
-    case 'BreakPoints':
-    case 'DebugSectionHeader DebugSectionHeaderBreakPoints':
-      return handleClickSectionBreakPoints(state);
-    case 'Scope':
-    case 'DebugSectionHeader DebugSectionHeaderScope':
-      return handleClickSectionScope(state);
-    case 'Call Stack':
-    case 'DebugSectionHeader DebugSectionHeaderCall Stack':
-      return handleClickSectionCallstack(state);
+const getSectionClickHandler = id => {
+  switch (id) {
+    case Watch$1:
+      return handleClickSectionWatch;
+    case BreakPoints:
+      return handleClickSectionBreakPoints;
+    case Scope$2:
+      return handleClickSectionScope;
+    case CallStack$2:
+      return handleClickSectionCallstack;
     default:
-      return state;
+      return handleClickSectionUnkown;
   }
 };
 
+const handleClickSectionHeading = async (state, id) => {
+  const fn = getSectionClickHandler(id);
+  return fn(state);
+};
+
 const handleResumed = state => {
   return {
     ...state,
@@ -2354,7 +2477,7 @@ const createEditorWorkerRpc = async () => {
   }
 };
 
-const initializEditorWorker = async () => {
+const initializeEditorWorker = async () => {
   try {
     const rpc = await createEditorWorkerRpc();
     set(rpc);
@@ -2391,7 +2514,7 @@ const initializeExtensionHost = async () => {
 };
 
 const initialize = async () => {
-  await Promise.all([initializeExtensionHost(), initializEditorWorker()]);
+  await Promise.all([initializeExtensionHost(), initializeEditorWorker()]);
 };
 
 const loadContent = async (state, isTest) => {
@@ -2452,44 +2575,56 @@ const Scope$1 = 4;
 const Property = 5;
 const Message = 6;
 const CallStack$1 = 7;
-const CheckBox = 8;
+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';
-const DebugValue = 'DebugValue';
 const DebugValueNumber = 'DebugValueNumber';
 const DebugValueObject = 'DebugValueObject';
 const DebugValueString = 'DebugValueString';
 const DebugValueSymbol = 'DebugValueSymbol';
 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
 
 const Button = 1;
 const Div = 4;
 const Input = 6;
 const Span = 8;
+const Label = 66;
 
 const getChevronDownVirtualDom = (extraClassName = '') => {
   return {
@@ -2521,72 +2656,68 @@ const text = data => {
 const renderSectionHeading = row => {
   const {
     expanded,
-    text: text$1
+    text: text$1,
+    key
   } = row;
   return [{
     type: Div,
-    className: mergeClassNames(DebugSectionHeader, `DebugSectionHeader${text$1}`),
+    className: DebugSectionHeader,
     role: TreeItem,
     ariaExpanded: expanded,
     ariaLevel: 1,
     childCount: 2,
-    onClick: HandleClickSectionHeading
-  }, expanded ? getChevronDownVirtualDom() : getChevronRightVirtualDom(), text(row.text)];
+    onClick: HandleClickSectionHeading,
+    'data-name': key
+  }, expanded ? getChevronDownVirtualDom() : getChevronRightVirtualDom(), text(text$1)];
 };
 
-const getDebugValueClassName = valueType => {
-  switch (valueType) {
-    case Undefined:
-      return DebugValueUndefined;
-    case Number$1:
-      return DebugValueNumber;
-    case Symbol:
-      return DebugValueSymbol;
-    case Boolean$1:
-      return DebugValueBoolean;
-    case String:
-      return DebugValueString;
-    case Object$1:
-      return DebugValueObject;
-    case Function:
-      return DebugValueFunction;
-    case Getter:
-      return DebugValueGetter;
-    default:
-      return '';
+const getArrowNodes = hasArrow => {
+  if (!hasArrow) {
+    return [];
   }
-};
-
-const separator = text(': ');
-
-const renderNoop = row => {
   return [{
     type: Div,
+    className: CallStackArrow,
     childCount: 1
-  }, text('unknown row type')];
-};
-const renderMessage = row => {
-  const {
-    text: text$1
-  } = row;
-  return [{
+  }, {
     type: Div,
-    className: DebugPausedMessage,
-    childCount: 1
-  }, text(text$1)];
+    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
+    text: text$1,
+    description,
+    hasArrow,
+    index
   } = row;
+  const childCount = hasArrow ? 3 : 2;
+  const arrowNodes = getArrowNodes(hasArrow);
   return [{
     type: Div,
-    className: mergeClassNames(DebugRow, 'DebugRowCallStack'),
+    className: mergeClassNames(DebugRow, DebugRowCallStack),
     role: TreeItem,
     ariaLevel: 2,
-    childCount: 1
-  }, text(text$1)];
+    childCount,
+    onClick: HandleClickCallStackItem,
+    'data-index': index
+  }, ...arrowNodes, labelNode, text(text$1), descriptionNode, text(description)];
 };
+
+const CheckBox = 'checkbox';
+
 const renderCheckBox = row => {
   const {
     text: text$1,
@@ -2595,19 +2726,26 @@ const renderCheckBox = row => {
   } = row;
   return [{
     type: Div,
-    className: mergeClassNames(DebugRow, 'DebugRowCheckBox'),
+    className: mergeClassNames(DebugRow, DebugRowCheckBox),
     role: TreeItem,
     ariaLevel: 2,
     childCount: 2
   }, {
     type: Input,
-    inputType: 'checkbox',
+    inputType: CheckBox,
     name,
     checked: expanded,
     childCount: 0,
-    onChange: 'handleClickCheckBox'
+    onChange: HandleClickCheckBox,
+    id: name
+  }, {
+    type: Label,
+    className: InputLabel,
+    htmlFor: name,
+    childCount: 1
   }, text(text$1)];
 };
+
 const renderScope = row => {
   const {
     key,
@@ -2621,13 +2759,40 @@ const renderScope = row => {
     ariaExpanded: expanded,
     ariaLevel: 2,
     childCount: 2,
-    onPointerDown: HandleClickScopeValue
+    onPointerDown: HandleClickScopeValue,
+    'data-name': key
   }, expanded ? getChevronDownVirtualDom() : getChevronRightVirtualDom(), {
     type: Span,
-    className: mergeClassNames(DebugValue, 'DebugValueScopeName'),
+    className: mergeClassNames(DebugValue, DebugValueScopeName),
     childCount: 1
   }, text(key)];
 };
+
+const getDebugValueClassName = valueType => {
+  switch (valueType) {
+    case Undefined:
+      return DebugValueUndefined;
+    case Number$1:
+      return DebugValueNumber;
+    case Symbol:
+      return DebugValueSymbol;
+    case Boolean$1:
+      return DebugValueBoolean;
+    case String:
+      return DebugValueString;
+    case Object$1:
+      return DebugValueObject;
+    case Function:
+      return DebugValueFunction;
+    case Getter:
+      return DebugValueGetter;
+    default:
+      return '';
+  }
+};
+
+const separator = text(': ');
+
 const renderValue = row => {
   const {
     indent,
@@ -2652,11 +2817,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:
@@ -2671,8 +2864,10 @@ const getRowRenderer = type => {
     case Property:
     case Exception:
       return renderValue;
-    case CheckBox:
+    case CheckBox$1:
       return renderCheckBox;
+    case WatchMessage:
+      return renderWatchMessage;
     default:
       return renderNoop;
   }
@@ -2703,40 +2898,44 @@ const getRunAndDebugVisibleRowsBreakPoints = state => {
       type: SectionHeading,
       text: breakPoints(),
       expanded: true,
-      key: '',
+      key: BreakPoints,
       value: '',
       indent: 0,
       valueType: '',
-      name: ''
+      name: '',
+      description: ''
     }, {
-      type: CheckBox,
+      type: CheckBox$1,
       text: pauseOnExceptions(),
       expanded: exceptionBreakPoints === All,
       key: '',
       value: '',
       indent: 0,
       valueType: '',
-      name: PauseOnExceptions$1
+      name: PauseOnExceptions$1,
+      description: ''
     }, {
-      type: CheckBox,
+      type: CheckBox$1,
       text: pauseOnUncaughtExceptions(),
       expanded: exceptionBreakPoints === Uncaught,
       key: '',
       value: '',
       indent: 0,
       valueType: '',
-      name: PauseOnUncaughtExceptions$1
+      name: PauseOnUncaughtExceptions$1,
+      description: ''
     }];
   }
   return [{
     type: SectionHeading,
     text: breakPoints(),
     expanded: breakPointsExpanded,
-    key: '',
+    key: BreakPoints,
     value: '',
     indent: 0,
     valueType: '',
-    name: ''
+    name: '',
+    description: ''
   }];
 };
 
@@ -2744,10 +2943,21 @@ 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 getRunAndDebugVisibleRowsCallStack = state => {
   const {
     callStack: callStack$1,
-    callStackExpanded
+    callStackExpanded,
+    parsedScripts
   } = state;
   const rows = [];
   if (callStackExpanded) {
@@ -2755,11 +2965,12 @@ const getRunAndDebugVisibleRowsCallStack = state => {
       type: SectionHeading,
       text: callStack(),
       expanded: true,
-      key: '',
+      key: CallStack$2,
       value: '',
       indent: 0,
       valueType: '',
-      name: CallStack
+      name: CallStack,
+      description: ''
     });
     if (callStack$1.length === 0) {
       rows.push({
@@ -2770,19 +2981,29 @@ 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];
+        const description = formatLocation(script.url, lineNumber);
+        const hasArrow = item === callStack$1[0];
         rows.push({
           type: CallStack$1,
           text: item.functionName,
           expanded: false,
-          key: '',
+          key: CallStack$2,
           value: '',
           indent: 0,
           valueType: '',
-          name: ''
+          name: '',
+          description,
+          hasArrow,
+          index: callStack$1.indexOf(item) // TODO use for loop
         });
       }
     }
@@ -2795,52 +3016,62 @@ const getRunAndDebugVisibleRowsCallStack = state => {
       value: '',
       indent: 0,
       valueType: '',
-      name: CallStack
+      name: CallStack,
+      description: ''
     });
   }
   return rows;
 };
 
-const None = 0;
-const Expanded = 1 << 0;
-const Collapsed = 1 << 1;
-const Focused = 1 << 2;
+const getNoopRows = () => {
+  return [];
+};
 
-const getScopeThisRows = scope => {
+const getScopeExceptionRows = scope => {
   const {
-    indent,
     key,
     value,
-    valueType
+    indent
   } = scope;
   return [{
-    type: Value,
+    type: Exception,
     text: '',
     expanded: false,
     key,
     value,
     indent,
-    valueType,
-    name: ''
+    valueType: '',
+    name: '',
+    description: ''
   }];
 };
-const getScopeExceptionRows = scope => {
+
+const None = 0;
+const Expanded = 1 << 0;
+const Collapsed = 1 << 1;
+const Focused = 1 << 2;
+
+const getScopePropertyRows = scope => {
   const {
+    indent,
     key,
     value,
-    indent
+    valueType,
+    flags
   } = scope;
   return [{
-    type: Exception,
+    type: Property,
     text: '',
-    expanded: false,
+    expanded: Boolean(flags & Expanded),
     key,
     value,
     indent,
-    valueType: '',
-    name: ''
+    valueType,
+    name: '',
+    description: ''
   }];
 };
+
 const getScopeScopeRows = scope => {
   const {
     key,
@@ -2854,31 +3085,30 @@ const getScopeScopeRows = scope => {
     value: '',
     indent: 0,
     valueType: '',
-    name: ''
+    name: '',
+    description: ''
   }];
 };
-const getScopePropertyRows = scope => {
+
+const getScopeThisRows = scope => {
   const {
     indent,
     key,
     value,
-    valueType,
-    flags
+    valueType
   } = scope;
   return [{
-    type: Property,
+    type: Value,
     text: '',
-    expanded: Boolean(flags & Expanded),
+    expanded: false,
     key,
     value,
     indent,
     valueType,
-    name: ''
+    name: '',
+    description: ''
   }];
 };
-const getNoopRows = () => {
-  return [];
-};
 
 const getScopeRenderer = type => {
   switch (type) {
@@ -2944,11 +3174,12 @@ const getRunAndDebugVisibleRowsScope = state => {
       type: SectionHeading,
       text: scope(),
       expanded: true,
-      key: '',
+      key: Scope$2,
       value: '',
       indent: 0,
       valueType: '',
-      name: Scope
+      name: Scope,
+      description: ''
     });
     if (scopeChain.length === 0) {
       rows.push({
@@ -2959,7 +3190,8 @@ const getRunAndDebugVisibleRowsScope = state => {
         value: '',
         indent: 0,
         valueType: '',
-        name: ''
+        name: '',
+        description: ''
       });
     } else {
       const visible = getVisibleScopeItems(scopeChain, expandedIds, scopeFocusedIndex);
@@ -2973,11 +3205,12 @@ const getRunAndDebugVisibleRowsScope = state => {
       type: SectionHeading,
       text: scope(),
       expanded: false,
-      key: '',
+      key: Scope$2,
       value: '',
       indent: 0,
       valueType: '',
-      name: Scope
+      name: Scope,
+      description: ''
     });
   }
   return rows;
@@ -2987,15 +3220,42 @@ 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(),
     expanded: watchExpanded,
-    key: '',
+    key: Watch$1,
     value: '',
     indent: 0,
     valueType: '',
-    name: Watch
+    name: Watch,
+    // TODO i18n
+    description: ''
   }];
 };
 
@@ -3078,7 +3338,7 @@ const getDebugButtons = debugState => {
     icon: DebugRestart,
     fn: DebugRestart$1
   }, {
-    title: stop(),
+    title: stop$1(),
     icon: DebugStop,
     fn: DebugStop$1
   });
@@ -3169,14 +3429,19 @@ const renderEventListeners = () => {
     params: ['handleDebugInput', 'event.target.value']
   }, {
     name: HandleClickSectionHeading,
-    // TODO find a better way than className to differentiate items
-    params: ['handleClickSectionHeading', 'event.target.className']
+    params: ['handleClickSectionHeading', 'event.target.dataset.name']
   }, {
     name: HandleClickCheckBox,
     params: ['handleClickCheckBox', 'event.target.name']
   }, {
     name: HandleClickDebugButton,
     params: ['handleClickDebugButton', 'event.target.name']
+  }, {
+    name: HandleClickCallStackItem,
+    params: ['handleClickCallStackItem', 'event.target.dataset.index']
+  }, {
+    name: HandleClickScopeValue,
+    params: ['handleClickScopeValue', 'event.target.dataset.name']
   }];
 };
 
@@ -3214,6 +3479,7 @@ 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),