@lvce-editor/static-server 0.53.2 → 0.53.3

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

@@ -994,7 +994,7 @@ const WebWorkerRpcClient = {
   create: create$4
 };
 
-const None$5 = 0;
+const None$6 = 0;
 const Paused = 1;
 const Default = 2;
 
@@ -1094,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]
   });
@@ -1430,7 +1434,7 @@ const acceptWatchExpressionEdit = async state => {
 const FocusDebugScope = 30;
 const FocusDebugWatchInput = 1290;
 
-const addWatchExpression = async (state, expression) => {
+const addWatchExpression$1 = async (state, expression) => {
   const {
     watchExpressions
   } = state;
@@ -1471,30 +1475,34 @@ const cancelWatchExpressionEdit = state => {
   };
 };
 
-const None$4 = 'none';
+const None$5 = 'none';
 const Exception$2 = 'exception';
 const Other = 'other';
 
 const All = 1;
 const Uncaught = 2;
-const None$3 = 0;
+const None$4 = 0;
 
-const None$2 = 'none';
+const None$3 = 'none';
 
 const create = (id, uri, x, y, width, height) => {
   const state = {
     id,
     disposed: false,
     processes: [],
-    debugState: None$5,
+    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$4,
+    pausedReason: None$5,
     pausedMessage: '',
     debugInputValue: '',
     debugOutputValue: '',
@@ -1502,21 +1510,30 @@ const create = (id, uri, x, y, width, height) => {
     expandedIds: [],
     scopeFocusedIndex: -1,
     focusedIndex: -1,
-    pauseOnExceptionState: None$2,
+    pauseOnExceptionState: None$3,
     cache: Object.create(null),
     // TODO maybe store cache in extension host worker
-    exceptionBreakPoints: None$3,
+    exceptionBreakPoints: None$4,
     watchExpressions: [],
     focus: 0,
     editingValue: '',
     debugId: 0,
     inputSource: 0,
     editingselectionstart: 0,
-    editingselectionend: 0
+    editingselectionend: 0,
+    openFilesOnPause: true,
+    maxDescriptionLength: 100
   };
   set(id, state, state);
 };
 
+const deleteAllWatchExpressions$1 = state => {
+  return {
+    ...state,
+    watchExpressions: []
+  };
+};
+
 const deleteWatchExpression$1 = (state, index) => {
   if (index < 0 || index >= state.watchExpressions.length) {
     return state;
@@ -1589,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', 'handleClickSectionWatch', 'handleClickWatchExpression', 'handleWatchExpressionDoubleClick', 'handleClickWatchExpressionDelete', 'handleDebugInput', 'handleEvaluate', 'handleInputBlur', 'handleInputFieldChange', 'handlePaused', 'handleResumed', 'handleScriptParsed', 'handleWatchValueChange', 'loadContent', 'loadContentLater', 'pause', 'refresh', 'removeWatchExpression', 'deleteWatchExpression', 'render2', 'renderActions', 'renderEventListeners', 'resize', 'restoreState', '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;
@@ -1733,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) => {
@@ -1794,7 +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$1 = 'Delete 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);
@@ -1883,7 +1881,68 @@ const noWatchExpression = () => {
   return i18nString(NoWatchExpression);
 };
 const deleteWatchExpression = () => {
-  return i18nString(DeleteWatchExpression$1);
+  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 => {
@@ -1960,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+)\)/;
@@ -1972,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);
@@ -2016,7 +2080,7 @@ const getDebugPropertyValueLabelString = property => {
   return 'undefined';
 };
 
-const getDebugPropertyValueLabel = property => {
+const getDebugPropertyValueLabel = (property, maxDescriptionLength) => {
   if (!property) {
     return 'n/a';
   }
@@ -2024,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:
@@ -2061,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);
@@ -2087,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',
@@ -2100,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,
@@ -2115,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 {
@@ -2135,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 {
@@ -2149,19 +2213,7 @@ const getPausedInfo2 = async debugId => {
   };
 };
 
-const handleResumed = state => {
-  return {
-    ...state,
-    debugState: Default,
-    scopeChain: [],
-    callStack: [],
-    pausedMessage: '',
-    pausedReason: None$4,
-    callFrameId: ''
-  };
-};
-
-const handlePaused$1 = async state => {
+const handlePaused2 = async state => {
   const {
     debugId,
     watchExpressions
@@ -2175,7 +2227,7 @@ 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 {
@@ -2195,12 +2247,25 @@ const handlePaused$1 = async state => {
     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;
 };
@@ -2289,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;
   }
@@ -2302,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;
   }
@@ -2400,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,
@@ -2420,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 {
@@ -2627,7 +2693,7 @@ const handleClickSectionAction = async (state, actionId) => {
     return state;
   }
   if (actionId === AddWatchExpression) {
-    return addWatchExpression(state, '');
+    return addWatchExpression$1(state, '');
   }
   return state;
 };
@@ -2706,7 +2772,12 @@ 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);
 };
@@ -2790,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,
@@ -3080,34 +3195,107 @@ const WatchMessage = 9;
 const WatchExpression = 10;
 const InputField = 11;
 
-const CallStackArrow = 'CallStackArrow';
-const CallStackDescription = 'CallStackDescription';
-const CallStackLabel = 'CallStackLabel';
-const Chevron = 'Chevron';
-const DebugButton = 'DebugButton';
-const DebugButtons = 'DebugButtons';
-const DebugPausedMessage = 'DebugPausedMessage';
-const DebugRow = 'DebugRow';
-const DebugRowCallStack = 'DebugRowCallStack';
-const DebugRowCheckBox = 'DebugRowCheckBox';
-const DebugRowInputField = 'DebugRowInputField';
-const DebugSectionAction = 'DebugSectionAction';
-const DebugSectionActions = 'DebugSectionActions';
-const DebugSectionHeader = 'DebugSectionHeader';
-const DebugValue = 'DebugValue';
-const DebugValueBoolean = 'DebugValueBoolean';
-const DebugValueFunction = 'DebugValueFunction';
-const DebugValueGetter = 'DebugValueGetter';
-const DebugValueNumber = 'DebugValueNumber';
-const DebugValueObject = 'DebugValueObject';
-const DebugValueScopeName = 'DebugValueScopeName';
-const DebugValueString = 'DebugValueString';
-const DebugValueSymbol = 'DebugValueSymbol';
-const DebugValueUndefined = 'DebugValueUndefined';
-const DeleteWatchExpression = 'DeleteWatchExpression';
-const IconButton = 'IconButton';
-const InputBox = 'InputBox';
-const InputLabel = 'InputLabel';
+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';
@@ -3129,6 +3317,8 @@ 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
 
@@ -3138,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,
@@ -3153,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,
@@ -3201,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;
@@ -3397,7 +3583,9 @@ const renderWatchExpression$1 = row => {
     role: TreeItem,
     childCount: 4,
     'data-index': index,
-    onClick: HandleClickWatchExpression // TODO use doubleclick
+    onClick: HandleClickWatchExpression,
+    // TODO use doubleclick
+    onContextMenu: HandleWatchExpressionContextMenu
   }, {
     type: Span,
     className: DebugValueScopeName,
@@ -3489,8 +3677,12 @@ const getRunAndDebugVirtualDom2 = rows => {
 const getRunAndDebugVisibleRowsBreakPoints = state => {
   const {
     breakPointsExpanded,
-    exceptionBreakPoints
+    exceptionBreakPoints,
+    breakPointsVisible
   } = state;
+  if (!breakPointsVisible) {
+    return [];
+  }
   if (breakPointsExpanded) {
     return [{
       type: SectionHeading,
@@ -3558,8 +3750,12 @@ const getRunAndDebugVisibleRowsCallStack = state => {
   const {
     callStack: callStack$1,
     callStackExpanded,
-    parsedScripts
+    parsedScripts,
+    callStackVisible
   } = state;
+  if (!callStackVisible) {
+    return [];
+  }
   const rows = [];
   if (callStackExpanded) {
     rows.push({
@@ -3763,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,
@@ -3782,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(),
@@ -3794,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({
@@ -3886,8 +4087,12 @@ const getWatchActions = watchExpanded => {
 const getRunAndDebugVisibleRowsWatch = state => {
   const {
     watchExpanded,
-    watchExpressions
+    watchExpressions,
+    watchVisible
   } = state;
+  if (!watchVisible) {
+    return [];
+  }
   const rows = [{
     type: SectionHeading,
     text: watch(),
@@ -3907,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) => {
@@ -4095,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']
@@ -4124,6 +4329,14 @@ const renderEventListeners = () => {
   }, {
     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
   }];
 };
 
@@ -4167,6 +4380,27 @@ const saveState = (uid, reason) => {
   };
 };
 
+const showCallStack = state => {
+  return {
+    ...state,
+    callStackVisible: true
+  };
+};
+
+const showScope = state => {
+  return {
+    ...state,
+    scopeVisible: true
+  };
+};
+
+const showWatch = state => {
+  return {
+    ...state,
+    watchVisible: true
+  };
+};
+
 const terminate = () => {
   globalThis.close();
 };
@@ -4177,19 +4411,25 @@ const commandMap = {
   'Debug.resumed': resumed,
   'Debug.scriptParsed': scriptParsed,
   'Initialize.initialize': initialize,
+  '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.restoreState': restoreState,
   'RunAndDebug.focusNext': wrapCommand(focusNext),
   'RunAndDebug.focusPrevious': wrapCommand(focusPrevious),
   '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),
@@ -4201,34 +4441,32 @@ const commandMap = {
   'RunAndDebug.handleClickSectionCallstack': wrapCommand(handleClickSectionCallstack),
   'RunAndDebug.handleClickSectionHeading': wrapCommand(handleClickSectionHeading),
   'RunAndDebug.handleClickSectionScope': wrapCommand(handleClickSectionScope),
+  'RunAndDebug.handleClickSectionWatch': wrapCommand(handleClickSectionWatch),
   'RunAndDebug.handleClickWatchExpression': wrapCommand(handleClickWatchExpression),
-  'RunAndDebug.handleWatchExpressionDoubleClick': wrapCommand(handleWatchExpressionDoubleClick),
   'RunAndDebug.handleClickWatchExpressionDelete': wrapCommand(handleClickWatchExpressionDelete),
-  'RunAndDebug.handleClickSectionWatch': wrapCommand(handleClickSectionWatch),
   'RunAndDebug.handleDebugInput': wrapCommand(handleDebugInput),
   'RunAndDebug.handleEvaluate': wrapCommand(handleEvaluate),
-  'RunAndDebug.handleWatchValueChange': wrapCommand(handleWatchValueChange),
+  '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.handleInputBlur': wrapCommand(handleInputBlur),
   '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),
   'RunAndDebug.readFile': readFile,
   'RunAndDebug.refresh': wrapCommand(refresh),
   'RunAndDebug.removeWatchExpression': removeWatchExpression,
-  'RunAndDebug.deleteWatchExpression': deleteWatchExpression$1,
   'RunAndDebug.render2': render2,
   'RunAndDebug.renderActions': renderActions,
   'RunAndDebug.renderEventListeners': renderEventListeners,
   'RunAndDebug.resize': wrapCommand(resize),
+  'RunAndDebug.restoreState': restoreState,
   'RunAndDebug.resume': wrapCommand(resume),
   'RunAndDebug.saveState': saveState,
   'RunAndDebug.setPauseOnExceptions': wrapCommand(setPauseOnExceptions),
@@ -4236,7 +4474,13 @@ 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 () => {