@lvce-editor/static-server 0.53.4 → 0.53.5

package/static/{03e29f4 → bef774c}/packages/debug-worker/dist/debugWorkerMain.js

@@ -1432,8 +1432,8 @@ const acceptWatchExpressionEdit = async state => {
   };
 };
 
-const FocusDebugScope = 30;
 const FocusDebugWatchInput = 1290;
+const FocusDebugRow = 1299;
 
 const addWatchExpression$1 = async (state, expression) => {
   const {
@@ -1547,11 +1547,11 @@ const deleteWatchExpression$1 = (state, index) => {
   };
 };
 
-const isEqual$4 = (oldState, newState) => {
+const isEqual$5 = (oldState, newState) => {
   return oldState.focus === newState.focus;
 };
 
-const isEqual$3 = (oldState, newState) => {
+const isEqual$4 = (oldState, newState) => {
   if (!newState.focus) {
     return true;
   }
@@ -1563,10 +1563,16 @@ const RenderFocus = 2;
 const RenderValue = 3;
 const RenderFocusContext = 7;
 const RenderSelection = 8;
+const RenderPauseOnExceptions = 9;
+
+const diffType$1 = RenderItems;
+const isEqual$3 = (oldState, newState) => {
+  return oldState.breakPointsExpanded === newState.breakPointsExpanded && oldState.callFrameId === newState.callFrameId && oldState.callStackExpanded === newState.callStackExpanded && oldState.debugState === newState.debugState && oldState.scopeChain === newState.scopeChain && oldState.scopeExpanded === newState.scopeExpanded && oldState.selectedIndex === newState.selectedIndex && oldState.visibleRows === newState.visibleRows && oldState.watchExpanded === newState.watchExpanded && oldState.watchExpressions === newState.watchExpressions;
+};
 
-const diffType = RenderItems;
+const diffType = RenderPauseOnExceptions;
 const isEqual$2 = (oldState, newState) => {
-  return oldState.scopeChain === newState.scopeChain && oldState.scopeExpanded === newState.scopeExpanded && oldState.callFrameId === newState.callFrameId && oldState.breakPointsExpanded === newState.breakPointsExpanded && oldState.debugState === newState.debugState && oldState.watchExpanded === newState.watchExpanded && oldState.callStackExpanded === newState.callStackExpanded && oldState.watchExpressions === newState.watchExpressions && oldState.visibleRows === newState.visibleRows;
+  return oldState.exceptionBreakPoints === newState.exceptionBreakPoints;
 };
 
 const isEqual$1 = (oldState, newState) => {
@@ -1582,8 +1588,8 @@ const isEqual = (oldState, newState) => {
   return true;
 };
 
-const modules = [isEqual$2, isEqual$3, isEqual, isEqual$4, isEqual$1];
-const numbers = [diffType, RenderFocusContext, RenderValue, RenderFocus, RenderSelection];
+const modules = [isEqual$3, isEqual$4, isEqual, isEqual$5, isEqual$1, isEqual$2];
+const numbers = [diffType$1, RenderFocusContext, RenderValue, RenderFocus, RenderSelection, diffType];
 
 const diff = (oldState, newState) => {
   const diffResult = [];
@@ -1609,7 +1615,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', 'handleSectionHeaderContextMenu', 'handleWatchExpressionContextMenu', 'handleWatchValueChange', 'loadContent', 'loadContentLater', 'pause', 'refresh', 'refreshWatchExpression', 'removeWatchExpression', 'deleteWatchExpression', 'deleteAllWatchExpressions', 'render2', 'renderActions', 'renderEventListeners', 'resize', 'restoreState', 'resume', 'selectIndex', 'selectNextRow', 'selectPreviousRow', 'setPauseOnExceptions', 'stepInto', 'stepOut', 'stepOver', 'terminate', 'togglePause', 'showWatch', 'hideWatch', 'showScope', 'hideScope', 'showCallStack', 'hideCallStack'];
+const commandIds = ['acceptWatchExpressionEdit', 'addWatchExpression', 'cancelWatchExpressionEdit', 'create', 'deleteAllWatchExpressions', 'deleteWatchExpression', 'diff2', 'dispose', 'focusNext', 'focusPrevious', 'getCommandIds', 'getKeyBindings', 'handleArrowDown', 'handleArrowLeft', 'handleArrowRight', 'handleArrowUp', 'handleChange', 'handleClickCallStackItem', 'handleClickCheckBox', 'handleClickDebugButton', 'handleClickPauseOnExceptions', 'handleClickPauseOnUncaughtExceptions', 'handleClickScopeValue', 'handleClickSectionAction', 'handleClickSectionBreakPoints', 'handleClickSectionCallstack', 'handleClickSectionHeading', 'handleClickSectionScope', 'handleClickSectionWatch', 'handleClickWatchExpression', 'handleClickWatchExpressionDelete', 'handleDebugInput', 'handleEnter', 'handleEvaluate', 'handleInputBlur', 'handleInputFieldChange', 'handlePaused', 'handleResumed', 'handleScriptParsed', 'handleSectionHeaderContextMenu', 'handleSpace', 'handleWatchExpressionContextMenu', 'handleWatchExpressionDoubleClick', 'handleWatchValueChange', 'hideCallStack', 'hideScope', 'hideWatch', 'loadContent', 'loadContentLater', 'pause', 'refresh', 'refreshWatchExpression', 'removeWatchExpression', 'render2', 'renderActions', 'renderEventListeners', 'resize', 'restoreState', 'resume', 'selectIndex', 'selectNextRow', 'selectPreviousRow', 'setPauseOnExceptions', 'showCallStack', 'showScope', 'showWatch', 'stepInto', 'stepOut', 'stepOver', 'terminate', 'togglePause'];
 
 const getCommandIds = () => {
   return commandIds;
@@ -1681,67 +1687,71 @@ const getKeyBindings = () => {
   }, {
     key: LeftArrow,
     command: 'Run And Debug.handleArrowLeft',
-    when: FocusDebugScope
+    when: FocusDebugRow
   }, {
     key: RightArrow,
     command: 'Run And Debug.handleArrowRight',
-    when: FocusDebugScope
+    when: FocusDebugRow
   }, {
     key: Home,
     command: 'Run And Debug.focusFirst',
-    when: FocusDebugScope
+    when: FocusDebugRow
   }, {
     key: End,
     command: 'Run And Debug.focusLast',
-    when: FocusDebugScope
+    when: FocusDebugRow
   }, {
     key: UpArrow,
-    command: 'Run And Debug.focusPrevious',
-    when: FocusDebugScope
+    command: 'Run And Debug.selectPreviousRow',
+    when: FocusDebugRow
   }, {
     key: DownArrow,
-    command: 'Run And Debug.focusNext',
-    when: FocusDebugScope
+    command: 'Run And Debug.selectNextRow',
+    when: FocusDebugRow
   }, {
     key: CtrlCmd | Star,
     command: 'Run And Debug.expandAll',
-    when: FocusDebugScope
+    when: FocusDebugRow
   }, {
     key: Alt | RightArrow,
     command: 'Run And Debug.expandRecursively',
-    when: FocusDebugScope
+    when: FocusDebugRow
   }, {
     key: CtrlCmd | LeftArrow,
     command: 'Run And Debug.collapseAll',
-    when: FocusDebugScope
+    when: FocusDebugRow
   }, {
     key: CtrlCmd | KeyV,
     command: 'Run And Debug.handlePaste',
-    when: FocusDebugScope
+    when: FocusDebugRow
   }, {
     key: CtrlCmd | KeyC,
     command: 'Run And Debug.handleCopy',
-    when: FocusDebugScope
+    when: FocusDebugRow
   }, {
     key: F2,
     command: 'Run And Debug.rename',
-    when: FocusDebugScope
+    when: FocusDebugRow
   }, {
     key: Delete,
     command: 'Run And Debug.removeDirent',
-    when: FocusDebugScope
+    when: FocusDebugRow
   }, {
     key: Escape,
     command: 'Run And Debug.focusNone',
-    when: FocusDebugScope
+    when: FocusDebugRow
+  }, {
+    key: Enter,
+    command: 'Run And Debug.handleClickCurrent',
+    when: FocusDebugRow
   }, {
     key: Space$1,
-    command: 'Run And Debug.handleClickCurrentButKeepFocus',
-    when: FocusDebugScope
+    command: 'Run And Debug.handleSpace',
+    when: FocusDebugRow
   }, {
     key: Enter,
-    command: 'Run And Debug.handleClickCurrent',
-    when: FocusDebugScope
+    command: 'Run And Debug.handleEnter',
+    when: FocusDebugRow
   }, {
     key: Escape,
     command: 'Run And Debug.cancelWatchExpressionEdit',
@@ -1931,789 +1941,892 @@ const getMenuEntries = () => {
   }];
 };
 
-const createScriptMap = scripts => {
-  const parsedScripts = Object.create(null);
-  for (const script of scripts) {
-    parsedScripts[script.scriptId] = script;
-  }
-  return parsedScripts;
-};
+const SectionHeading = 1;
+const Value = 2;
+const Exception$1 = 3;
+const Scope$3 = 4;
+const Property$1 = 5;
+const Message = 6;
+const CallStack$2 = 7;
+const CheckBox$1 = 8;
+const WatchMessage = 9;
+const WatchExpression = 10;
+const InputField = 11;
 
-const getCallStack = callFrames => {
-  array(callFrames);
-  const callStack = [];
-  for (const callFrame of callFrames) {
-    callStack.push({
-      functionName: callFrame.functionName || '(anonymous)',
-      functionLocation: callFrame.functionLocation,
-      location: callFrame.location
-    });
+const Scope$2 = 'Scope';
+const CallStack$1 = 'CallStack';
+const Watch$1 = 'Watch';
+const BreakPoints$1 = 'BreakPoints';
+
+const BreakPoints = 'breakpoints';
+const CallStack = 'callstack';
+const Scope$1 = 'scope';
+const Watch = 'watch';
+
+const AddWatchExpression = 'AddWatchExpression';
+const WatchExpressionInput = 'WatchExpressionInput';
+const DebugPause$1 = 'DebugPause';
+const DebugRestart$1 = 'DebugRestart';
+const DebugResume = 'DebugResume';
+const DebugStepInto$1 = 'DebugStepInto';
+const DebugStepOut$1 = 'DebugStepOut';
+const DebugStepOver$1 = 'DebugStepOver';
+const DebugStop$1 = 'DebugStop';
+const PauseOnExceptions = 'PauseOnExceptions';
+const PauseOnUncaughtExceptions = 'PauseOnUncaughtExceptions';
+const RefreshWatchExpressions = 'RefreshWatchExpressions';
+
+const getRunAndDebugVisibleRowsBreakPoints = state => {
+  const {
+    breakPointsExpanded,
+    exceptionBreakPoints,
+    breakPointsVisible
+  } = state;
+  if (!breakPointsVisible) {
+    return [];
   }
-  return callStack;
+  if (breakPointsExpanded) {
+    return [{
+      type: SectionHeading,
+      text: breakPoints(),
+      expanded: true,
+      key: BreakPoints,
+      value: '',
+      indent: 0,
+      valueType: '',
+      name: BreakPoints$1,
+      description: ''
+    }, {
+      type: CheckBox$1,
+      text: pauseOnExceptions(),
+      expanded: exceptionBreakPoints === All,
+      key: '',
+      value: '',
+      indent: 0,
+      valueType: '',
+      name: PauseOnExceptions,
+      description: ''
+    }, {
+      type: CheckBox$1,
+      text: pauseOnUncaughtExceptions(),
+      expanded: exceptionBreakPoints === Uncaught,
+      key: '',
+      value: '',
+      indent: 0,
+      valueType: '',
+      name: PauseOnUncaughtExceptions,
+      description: ''
+    }];
+  }
+  return [{
+    type: SectionHeading,
+    text: breakPoints(),
+    expanded: breakPointsExpanded,
+    key: BreakPoints,
+    value: '',
+    indent: 0,
+    valueType: '',
+    name: BreakPoints$1,
+    description: ''
+  }];
 };
 
-const getDebugPausedMessage = reason => {
-  switch (reason) {
-    case Other:
-      return debuggerPaused();
-    case Exception$2:
-      return debuggerPausedOnException();
-    default:
-      return `Debugger paused (${reason})`;
+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 NewLine = '\n';
-const Space = ' ';
-
-const Local = 'local';
-const Closure = 'closure';
-const Global = 'global';
-const Catch = 'catch';
-const Eval = 'eval';
-const Block = 'block';
-const Script = 'script';
-const With = 'with';
-const Module = 'module';
-const WasmExpressionStack = 'wasm-expression-stack';
-
-const getScopeLabel = element => {
-  switch (element.type) {
-    case Local:
-      return local();
-    case Closure:
-      if (element.name) {
-        return namedClosure(element.name);
+const unknownScript = {
+  url: 'unknown'
+};
+const getRunAndDebugVisibleRowsCallStack = state => {
+  const {
+    callStack: callStack$1,
+    callStackExpanded,
+    parsedScripts,
+    callStackVisible
+  } = state;
+  if (!callStackVisible) {
+    return [];
+  }
+  const rows = [];
+  if (callStackExpanded) {
+    rows.push({
+      type: SectionHeading,
+      text: callStack(),
+      expanded: true,
+      key: CallStack,
+      value: '',
+      indent: 0,
+      valueType: '',
+      name: CallStack$1,
+      description: ''
+    });
+    if (callStack$1.length === 0) {
+      rows.push({
+        type: Message,
+        text: notPaused(),
+        expanded: false,
+        key: '',
+        value: '',
+        indent: 0,
+        valueType: '',
+        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$2,
+          text: item.functionName,
+          expanded: false,
+          key: CallStack,
+          value: '',
+          indent: 0,
+          valueType: '',
+          name: '',
+          description,
+          hasArrow,
+          index: callStack$1.indexOf(item) // TODO use for loop
+        });
       }
-      return closure();
-    case Global:
-      return global();
-    case Block:
-      return block();
-    case WasmExpressionStack:
-      return expression();
-    case Module:
-      return module2();
-    case Eval:
-      return evalScope();
-    case Script:
-      return script();
-    case With:
-      return withScope();
-    case Catch:
-      return catchScope();
-    default:
-      return element.type;
+    }
+  } else {
+    rows.push({
+      type: SectionHeading,
+      text: callStack(),
+      expanded: false,
+      key: CallStack,
+      value: '',
+      indent: 0,
+      valueType: '',
+      name: CallStack$1,
+      description: ''
+    });
   }
+  return rows;
 };
 
-const Scope$3 = 1;
+const Scope = 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$1 = 'string';
-const Symbol = 'symbol';
-const Function = 'function';
-const Getter = 'getter';
-const Undefined = 'undefined';
+const Property = 3;
+const Exception = 4;
 
-const getDebugPropertyValueLabelBoolean = property => {
-  return `${property.value}`;
+const getNoopRows = () => {
+  return [];
 };
 
-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 getScopeExceptionRows = scope => {
+  const {
+    key,
+    value,
+    indent
+  } = scope;
+  return [{
+    type: Exception$1,
+    text: '',
+    expanded: false,
+    key,
+    value,
+    indent,
+    valueType: '',
+    name: '',
+    description: ''
+  }];
 };
 
-const RE_ARRAY_DESCRIPTION = /\((\d+)\)/;
-const parseLength = description => {
-  const match = RE_ARRAY_DESCRIPTION.exec(description);
-  if (match) {
-    return match[1];
-  }
-  return '';
-};
-const getDebugPropertyValueLabelArray = property => {
-  if (property.preview) {
-    const innerLabel = getArrayPropertiesPreview(property.preview.properties);
-    const lengthPreview = parseLength(property.description);
-    return `(${lengthPreview}) [` + innerLabel + ']';
-  }
-  return property.description;
-};
+const None$1 = 0;
+const Expanded = 1 << 0;
+const Collapsed = 1 << 1;
+const Focused = 1 << 2;
 
-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 getScopePropertyRows = scope => {
+  const {
+    indent,
+    key,
+    value,
+    valueType,
+    flags
+  } = scope;
+  return [{
+    type: Property$1,
+    text: '',
+    expanded: Boolean(flags & Expanded),
+    key,
+    value,
+    indent,
+    valueType,
+    name: '',
+    description: ''
+  }];
 };
 
-const getDebugPropertyValueLabelString$1 = property => {
-  return `"${property.value}"`;
+const getScopeScopeRows = scope => {
+  const {
+    key,
+    flags
+  } = scope;
+  return [{
+    type: Scope$3,
+    text: '',
+    expanded: Boolean(flags & Expanded),
+    key,
+    value: '',
+    indent: 0,
+    valueType: '',
+    name: '',
+    description: ''
+  }];
 };
 
-const getDebugPropertyValueLabelString = property => {
-  return 'undefined';
+const getScopeThisRows = scope => {
+  const {
+    indent,
+    key,
+    value,
+    valueType
+  } = scope;
+  return [{
+    type: Value,
+    text: '',
+    expanded: false,
+    key,
+    value,
+    indent,
+    valueType,
+    name: '',
+    description: ''
+  }];
 };
 
-const getDebugPropertyValueLabel = (property, maxDescriptionLength) => {
-  if (!property) {
-    return 'n/a';
-  }
-  switch (property.type) {
-    case Number$1:
-    case Symbol:
-    case Function:
-      return getDebugPropertyValueLabelCommon(property, maxDescriptionLength);
-    case Object$1:
-      return getDebugPropertyValueLabelObject(property);
-    case Undefined:
-      return getDebugPropertyValueLabelString();
-    case String$1:
-      return getDebugPropertyValueLabelString$1(property);
-    case Boolean$1:
-      return getDebugPropertyValueLabelBoolean(property);
+const getScopeRenderer = type => {
+  switch (type) {
+    case This:
+      return getScopeThisRows;
+    case Exception:
+      return getScopeExceptionRows;
+    case Scope:
+      return getScopeScopeRows;
+    case Property:
+      return getScopePropertyRows;
     default:
-      return `${JSON.stringify(property)}`;
+      return getNoopRows;
   }
 };
 
-const getDebugValueObjectId = child => {
-  return child.object?.objectId || child.value?.objectId || '';
+const getExpandable = valueType => {
+  if (valueType === 'object') {
+    return true;
+  }
+  return false;
 };
-
-const getDebugValueType = child => {
-  if (!child) {
-    return None$1;
+const getFlags = (isExpanded, isExpandable, isFocused) => {
+  let flags = None$1;
+  if (isExpanded) {
+    flags |= Expanded;
+  } else if (isExpandable) {
+    flags |= Collapsed;
   }
-  if (child.value && child.value.type) {
-    return child.value.type;
+  if (isFocused) {
+    flags |= Focused;
   }
-  if (child.get) {
-    return Getter;
+  return flags;
+};
+const getVisibleScopeItems = (scopeChain, expandedIds, focusedIndex) => {
+  const minLineY = 0;
+  const maxLineY = scopeChain.length;
+  const visible = [];
+  for (let i = minLineY; i < maxLineY; i++) {
+    const element = scopeChain[i];
+    const isExpanded = expandedIds.includes(element.objectId);
+    const isExpandable = getExpandable(element.valueType);
+    const isFocused = i === focusedIndex;
+    const flags = getFlags(isExpanded, isExpandable, isFocused);
+    visible.push({
+      ...element,
+      flags
+    });
   }
-  return None$1;
+  return visible;
 };
 
-const getDescriptionValueLabel = params => {
-  if (params.data && params.data.description) {
-    return params.data.description.replaceAll(NewLine, Space);
+const getRunAndDebugVisibleRowsScope = state => {
+  const {
+    scopeChain,
+    scopeExpanded,
+    expandedIds,
+    scopeFocusedIndex,
+    scopeVisible,
+    debugState
+  } = state;
+  if (!scopeVisible) {
+    return [];
   }
-  return `${params.data.value}`;
-};
-const getScopeChain = (params, thisObject, scopeChain, knownProperties, descriptionLength) => {
-  const elements = [];
-  for (const scope of scopeChain) {
-    const label = getScopeLabel(scope);
-    elements.push({
-      type: Scope$3,
-      key: label,
+  const rows = [];
+  if (scopeExpanded) {
+    rows.push({
+      type: SectionHeading,
+      text: scope(),
+      expanded: true,
+      key: Scope$1,
       value: '',
+      indent: 0,
       valueType: '',
-      label,
-      objectId: scope.object.objectId,
-      indent: 10
+      name: Scope$2,
+      description: ''
     });
-    // if(params.reason)
-    if (scope.type === Local) {
-      if (params.reason === Exception$2) {
-        const value = getDescriptionValueLabel(params);
-        elements.push({
-          type: Exception$1,
-          key: 'Exception',
-          value,
-          valueType: '',
-          objectId: scope.object.objectId,
-          indent: 20
-        });
+    if (debugState === Paused) {
+      const visible = getVisibleScopeItems(scopeChain, expandedIds, scopeFocusedIndex);
+      for (const scope of visible) {
+        const renderer = getScopeRenderer(scope.type);
+        rows.push(...renderer(scope));
       }
-      const valueLabel = getDebugPropertyValueLabel(thisObject, descriptionLength);
-      elements.push({
-        type: This,
-        key: 'this',
-        value: valueLabel,
-        valueType: thisObject.type,
-        objectId: '',
-        indent: 20
+    } else {
+      rows.push({
+        type: Message,
+        text: notPaused(),
+        expanded: false,
+        key: '',
+        value: '',
+        indent: 0,
+        valueType: '',
+        name: '',
+        description: ''
       });
     }
-    const children = knownProperties[scope.object.objectId];
-    if (children) {
-      for (const child of children.result.result) {
-        const valueLabel = getDebugPropertyValueLabel(child.value, descriptionLength);
-        elements.push({
-          type: Property$1,
-          key: child.name,
-          value: valueLabel,
-          valueType: getDebugValueType(child),
-          objectId: getDebugValueObjectId(child),
-          indent: 20
-        });
-      }
-    }
-  }
-  return elements;
-};
-
-const getPausedInfo2 = async (debugId, maxDescriptionLength) => {
-  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
-  }, maxDescriptionLength);
-  const pausedReason = reason;
-  const pausedMessage = getDebugPausedMessage(reason);
-  return {
-    scopeChain,
-    callStack,
-    pausedReason,
-    pausedMessage,
-    callFrameId,
-    expandedIds: [objectId],
-    scriptMap
-  };
-};
-
-const SectionHeading = 1;
-const Value = 2;
-const Exception = 3;
-const Scope$2 = 4;
-const Property = 5;
-const Message = 6;
-const CallStack$2 = 7;
-const CheckBox$1 = 8;
-const WatchMessage = 9;
-const WatchExpression = 10;
-const InputField = 11;
-
-const Scope$1 = 'Scope';
-const CallStack$1 = 'CallStack';
-const Watch$1 = 'Watch';
-const BreakPoints$1 = 'BreakPoints';
-
-const BreakPoints = 'breakpoints';
-const CallStack = 'callstack';
-const Scope = 'scope';
-const Watch = 'watch';
-
-const AddWatchExpression = 'AddWatchExpression';
-const WatchExpressionInput = 'WatchExpressionInput';
-const DebugPause$1 = 'DebugPause';
-const DebugRestart$1 = 'DebugRestart';
-const DebugResume = 'DebugResume';
-const DebugStepInto$1 = 'DebugStepInto';
-const DebugStepOut$1 = 'DebugStepOut';
-const DebugStepOver$1 = 'DebugStepOver';
-const DebugStop$1 = 'DebugStop';
-const PauseOnExceptions = 'PauseOnExceptions';
-const PauseOnUncaughtExceptions = 'PauseOnUncaughtExceptions';
-const RefreshWatchExpressions = 'RefreshWatchExpressions';
-
-const getRunAndDebugVisibleRowsBreakPoints = state => {
-  const {
-    breakPointsExpanded,
-    exceptionBreakPoints,
-    breakPointsVisible
-  } = state;
-  if (!breakPointsVisible) {
-    return [];
-  }
-  if (breakPointsExpanded) {
-    return [{
+  } else {
+    rows.push({
       type: SectionHeading,
-      text: breakPoints(),
-      expanded: true,
-      key: BreakPoints,
-      value: '',
-      indent: 0,
-      valueType: '',
-      name: BreakPoints$1,
-      description: ''
-    }, {
-      type: CheckBox$1,
-      text: pauseOnExceptions(),
-      expanded: exceptionBreakPoints === All,
-      key: '',
+      text: scope(),
+      expanded: false,
+      key: Scope$1,
       value: '',
       indent: 0,
       valueType: '',
-      name: PauseOnExceptions,
+      name: Scope$2,
       description: ''
-    }, {
-      type: CheckBox$1,
-      text: pauseOnUncaughtExceptions(),
-      expanded: exceptionBreakPoints === Uncaught,
-      key: '',
+    });
+  }
+  return rows;
+};
+
+const formatValue = value => {
+  return value === null || value === undefined ? '' : String(value);
+};
+const renderWatchExpression$1 = (expression, value, isEditing, index) => {
+  if (isEditing) {
+    return {
+      type: InputField,
+      text: '',
+      expanded: false,
+      key: 'new-watch-expression',
       value: '',
       indent: 0,
       valueType: '',
-      name: PauseOnUncaughtExceptions,
-      description: ''
-    }];
+      name: WatchExpressionInput,
+      description: '',
+      index
+    };
   }
-  return [{
-    type: SectionHeading,
-    text: breakPoints(),
-    expanded: breakPointsExpanded,
-    key: BreakPoints,
-    value: '',
+  return {
+    type: WatchExpression,
+    text: expression,
+    expanded: false,
+    key: expression,
+    value: formatValue(value),
     indent: 0,
     valueType: '',
-    name: BreakPoints$1,
-    description: ''
-  }];
-};
-
-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'
+    name: '',
+    description: '',
+    index
+  };
 };
-const getRunAndDebugVisibleRowsCallStack = state => {
-  const {
-    callStack: callStack$1,
-    callStackExpanded,
-    parsedScripts,
-    callStackVisible
-  } = state;
-  if (!callStackVisible) {
-    return [];
-  }
+const getRunAndDebugVisibleRowsWatchContent = watchExpressions => {
   const rows = [];
-  if (callStackExpanded) {
-    rows.push({
-      type: SectionHeading,
-      text: callStack(),
-      expanded: true,
-      key: CallStack,
-      value: '',
-      indent: 0,
-      valueType: '',
-      name: CallStack$1,
-      description: ''
-    });
-    if (callStack$1.length === 0) {
-      rows.push({
-        type: Message,
-        text: notPaused(),
-        expanded: false,
-        key: '',
-        value: '',
-        indent: 0,
-        valueType: '',
-        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$2,
-          text: item.functionName,
-          expanded: false,
-          key: CallStack,
-          value: '',
-          indent: 0,
-          valueType: '',
-          name: '',
-          description,
-          hasArrow,
-          index: callStack$1.indexOf(item) // TODO use for loop
-        });
-      }
-    }
-  } else {
+  if (watchExpressions.length === 0) {
     rows.push({
-      type: SectionHeading,
-      text: callStack(),
+      type: WatchMessage,
+      text: noWatchExpression(),
       expanded: false,
       key: '',
       value: '',
       indent: 0,
       valueType: '',
-      name: CallStack$1,
+      name: '',
       description: ''
     });
+  } else {
+    for (const watchExpression of watchExpressions) {
+      // TODO simplify index
+      const index = watchExpressions.indexOf(watchExpression);
+      rows.push(renderWatchExpression$1(watchExpression.expression, watchExpression.value, watchExpression.isEditing || false, index));
+    }
   }
   return rows;
 };
 
-const getNoopRows = () => {
-  return [];
+const getWatchActions = watchExpanded => {
+  if (!watchExpanded) {
+    return [];
+  }
+  return [{
+    id: AddWatchExpression,
+    title: 'Add new watch expression',
+    icon: '+'
+  }, {
+    id: RefreshWatchExpressions,
+    title: 'Refresh watch expressions',
+    icon: '↻'
+  }];
 };
 
-const getScopeExceptionRows = scope => {
+const getRunAndDebugVisibleRowsWatch = state => {
   const {
-    key,
-    value,
-    indent
-  } = scope;
-  return [{
-    type: Exception,
-    text: '',
-    expanded: false,
-    key,
-    value,
-    indent,
+    watchExpanded,
+    watchExpressions,
+    watchVisible
+  } = state;
+  if (!watchVisible) {
+    return [];
+  }
+  const rows = [{
+    type: SectionHeading,
+    text: watch(),
+    expanded: watchExpanded,
+    key: Watch,
+    value: '',
+    indent: 0,
     valueType: '',
-    name: '',
-    description: ''
+    name: Watch$1,
+    description: '',
+    actions: getWatchActions(watchExpanded)
   }];
+  if (watchExpanded) {
+    rows.push(...getRunAndDebugVisibleRowsWatchContent(watchExpressions));
+  }
+  return rows;
 };
 
-const None = 0;
-const Expanded = 1 << 0;
-const Collapsed = 1 << 1;
-const Focused = 1 << 2;
+const getRunAndDebugVisibleRows = state => {
+  if (state.debugState === Unavailable) {
+    return [{
+      type: Message,
+      text: noScriptRunning(),
+      expanded: false,
+      key: 'no-script-running',
+      value: '',
+      indent: 0,
+      valueType: '',
+      name: '',
+      description: ''
+    }];
+  }
+  return [...getRunAndDebugVisibleRowsWatch(state), ...getRunAndDebugVisibleRowsBreakPoints(state), ...getRunAndDebugVisibleRowsScope(state), ...getRunAndDebugVisibleRowsCallStack(state)];
+};
 
-const getScopePropertyRows = scope => {
+const getSectionIndex = (state, name) => {
+  const rows = getRunAndDebugVisibleRows(state);
+  return rows.findIndex(row => row.type === SectionHeading && row.name === name);
+};
+
+const updateVisibleRows = state => {
+  const visibleRows = getRunAndDebugVisibleRows(state);
+  return {
+    ...state,
+    visibleRows
+  };
+};
+
+const handleClickSectionBreakPoints = state => {
   const {
-    indent,
-    key,
-    value,
-    valueType,
-    flags
-  } = scope;
-  return [{
-    type: Property,
-    text: '',
-    expanded: Boolean(flags & Expanded),
-    key,
-    value,
-    indent,
-    valueType,
-    name: '',
-    description: ''
-  }];
+    breakPointsExpanded
+  } = state;
+  const newState = {
+    ...state,
+    breakPointsExpanded: !breakPointsExpanded,
+    selectedIndex: getSectionIndex(state, BreakPoints$1),
+    focus: FocusDebugRow
+  };
+  return updateVisibleRows(newState);
 };
 
-const getScopeScopeRows = scope => {
+const handleClickSectionCallstack = state => {
   const {
-    key,
-    flags
-  } = scope;
-  return [{
-    type: Scope$2,
-    text: '',
-    expanded: Boolean(flags & Expanded),
-    key,
-    value: '',
-    indent: 0,
-    valueType: '',
-    name: '',
-    description: ''
-  }];
+    callStackExpanded
+  } = state;
+  const newState = {
+    ...state,
+    callStackExpanded: !callStackExpanded,
+    selectedIndex: getSectionIndex(state, CallStack$1),
+    focus: FocusDebugRow
+  };
+  return updateVisibleRows(newState);
 };
 
-const getScopeThisRows = scope => {
+const handleClickSectionScope = state => {
   const {
-    indent,
-    key,
-    value,
-    valueType
-  } = scope;
-  return [{
-    type: Value,
-    text: '',
-    expanded: false,
-    key,
-    value,
-    indent,
-    valueType,
-    name: '',
-    description: ''
-  }];
+    scopeExpanded
+  } = state;
+  const newState = {
+    ...state,
+    scopeExpanded: !scopeExpanded,
+    selectedIndex: getSectionIndex(state, Scope$2),
+    focus: FocusDebugRow
+  };
+  return updateVisibleRows(newState);
 };
 
-const getScopeRenderer = type => {
-  switch (type) {
-    case This:
-      return getScopeThisRows;
-    case Exception$1:
-      return getScopeExceptionRows;
-    case Scope$3:
-      return getScopeScopeRows;
-    case Property$1:
-      return getScopePropertyRows;
+const handleClickSectionUnkown = state => {
+  // For unknown section IDs, return the state unchanged
+  return state;
+};
+
+const handleClickSectionWatch = state => {
+  const {
+    watchExpanded
+  } = state;
+  const newState = {
+    ...state,
+    watchExpanded: !watchExpanded,
+    selectedIndex: getSectionIndex(state, Watch$1),
+    focus: FocusDebugRow
+  };
+  return updateVisibleRows(newState);
+};
+
+const getSectionClickHandler = id => {
+  switch (id) {
+    case Watch:
+      return handleClickSectionWatch;
+    case BreakPoints:
+      return handleClickSectionBreakPoints;
+    case Scope$1:
+      return handleClickSectionScope;
+    case CallStack:
+      return handleClickSectionCallstack;
     default:
-      return getNoopRows;
+      return handleClickSectionUnkown;
   }
 };
 
-const getExpandable = valueType => {
-  if (valueType === 'object') {
-    return true;
+const handleArrowLeft = async state => {
+  const {
+    selectedIndex
+  } = state;
+  const rows = getRunAndDebugVisibleRows(state);
+  const row = rows[selectedIndex];
+  if (row && row.type === SectionHeading && row.expanded) {
+    const clickHandler = getSectionClickHandler(row.key);
+    return clickHandler(state);
   }
-  return false;
+  return state;
 };
-const getFlags = (isExpanded, isExpandable, isFocused) => {
-  let flags = None;
-  if (isExpanded) {
-    flags |= Expanded;
-  } else if (isExpandable) {
-    flags |= Collapsed;
+
+const handleArrowRight = async state => {
+  const {
+    selectedIndex
+  } = state;
+  const rows = getRunAndDebugVisibleRows(state);
+  const row = rows[selectedIndex];
+  if (row && row.type === SectionHeading && !row.expanded) {
+    const clickHandler = getSectionClickHandler(row.key);
+    return clickHandler(state);
   }
-  if (isFocused) {
-    flags |= Focused;
+  return state;
+};
+
+const createScriptMap = scripts => {
+  const parsedScripts = Object.create(null);
+  for (const script of scripts) {
+    parsedScripts[script.scriptId] = script;
   }
-  return flags;
+  return parsedScripts;
 };
-const getVisibleScopeItems = (scopeChain, expandedIds, focusedIndex) => {
-  const minLineY = 0;
-  const maxLineY = scopeChain.length;
-  const visible = [];
-  for (let i = minLineY; i < maxLineY; i++) {
-    const element = scopeChain[i];
-    const isExpanded = expandedIds.includes(element.objectId);
-    const isExpandable = getExpandable(element.valueType);
-    const isFocused = i === focusedIndex;
-    const flags = getFlags(isExpanded, isExpandable, isFocused);
-    visible.push({
-      ...element,
-      flags
+
+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 visible;
+  return callStack;
 };
 
-const getRunAndDebugVisibleRowsScope = state => {
-  const {
-    scopeChain,
-    scopeExpanded,
-    expandedIds,
-    scopeFocusedIndex,
-    scopeVisible,
-    debugState
-  } = state;
-  if (!scopeVisible) {
-    return [];
+const getDebugPausedMessage = reason => {
+  switch (reason) {
+    case Other:
+      return debuggerPaused();
+    case Exception$2:
+      return debuggerPausedOnException();
+    default:
+      return `Debugger paused (${reason})`;
   }
-  const rows = [];
-  if (scopeExpanded) {
-    rows.push({
-      type: SectionHeading,
-      text: scope(),
-      expanded: true,
-      key: Scope,
-      value: '',
-      indent: 0,
-      valueType: '',
-      name: Scope$1,
-      description: ''
-    });
-    if (debugState === Paused) {
-      const visible = getVisibleScopeItems(scopeChain, expandedIds, scopeFocusedIndex);
-      for (const scope of visible) {
-        const renderer = getScopeRenderer(scope.type);
-        rows.push(...renderer(scope));
+};
+
+const NewLine = '\n';
+const Space = ' ';
+
+const Local = 'local';
+const Closure = 'closure';
+const Global = 'global';
+const Catch = 'catch';
+const Eval = 'eval';
+const Block = 'block';
+const Script = 'script';
+const With = 'with';
+const Module = 'module';
+const WasmExpressionStack = 'wasm-expression-stack';
+
+const getScopeLabel = element => {
+  switch (element.type) {
+    case Local:
+      return local();
+    case Closure:
+      if (element.name) {
+        return namedClosure(element.name);
       }
-    } else {
-      rows.push({
-        type: Message,
-        text: notPaused(),
-        expanded: false,
-        key: '',
-        value: '',
-        indent: 0,
-        valueType: '',
-        name: '',
-        description: ''
-      });
-    }
-  } else {
-    rows.push({
-      type: SectionHeading,
-      text: scope(),
-      expanded: false,
-      key: Scope,
-      value: '',
-      indent: 0,
-      valueType: '',
-      name: Scope$1,
-      description: ''
-    });
+      return closure();
+    case Global:
+      return global();
+    case Block:
+      return block();
+    case WasmExpressionStack:
+      return expression();
+    case Module:
+      return module2();
+    case Eval:
+      return evalScope();
+    case Script:
+      return script();
+    case With:
+      return withScope();
+    case Catch:
+      return catchScope();
+    default:
+      return element.type;
   }
-  return rows;
 };
 
-const formatValue = value => {
-  return value === null || value === undefined ? '' : String(value);
+const Boolean$1 = 'boolean';
+const None = '';
+const Number$1 = 'number';
+const Object$1 = 'object';
+const String$1 = 'string';
+const Symbol = 'symbol';
+const Function = 'function';
+const Getter = 'getter';
+const Undefined = 'undefined';
+
+const getDebugPropertyValueLabelBoolean = property => {
+  return `${property.value}`;
 };
-const renderWatchExpression$1 = (expression, value, isEditing, index) => {
-  if (isEditing) {
-    return {
-      type: InputField,
-      text: '',
-      expanded: false,
-      key: 'new-watch-expression',
-      value: '',
-      indent: 0,
-      valueType: '',
-      name: WatchExpressionInput,
-      description: '',
-      index
-    };
+
+const getDebugPropertyValueLabelCommon = (property, maxDescriptionLength) => {
+  const description = property.description;
+  if (description && description.length > maxDescriptionLength) {
+    return description.slice(0, Math.max(0, maxDescriptionLength)) + '...';
   }
-  return {
-    type: WatchExpression,
-    text: expression,
-    expanded: false,
-    key: expression,
-    value: formatValue(value),
-    indent: 0,
-    valueType: '',
-    name: '',
-    description: '',
-    index
-  };
+  return description;
 };
-const getRunAndDebugVisibleRowsWatchContent = watchExpressions => {
-  const rows = [];
-  if (watchExpressions.length === 0) {
-    rows.push({
-      type: WatchMessage,
-      text: noWatchExpression(),
-      expanded: false,
-      key: '',
-      value: '',
-      indent: 0,
-      valueType: '',
-      name: '',
-      description: ''
-    });
-  } else {
-    for (const watchExpression of watchExpressions) {
-      // TODO simplify index
-      const index = watchExpressions.indexOf(watchExpression);
-      rows.push(renderWatchExpression$1(watchExpression.expression, watchExpression.value, watchExpression.isEditing || false, index));
+
+const getArrayPropertyPreview = item => {
+  return `"${item.value}"`;
+};
+const getArrayPropertiesPreview = properties => {
+  const formattedItems = properties.map(getArrayPropertyPreview);
+  return formattedItems.join(', ');
+};
+
+const RE_ARRAY_DESCRIPTION = /\((\d+)\)/;
+const parseLength = description => {
+  const match = RE_ARRAY_DESCRIPTION.exec(description);
+  if (match) {
+    return match[1];
+  }
+  return '';
+};
+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 rows;
+  return property.description;
 };
 
-const getWatchActions = watchExpanded => {
-  if (!watchExpanded) {
-    return [];
+const getDebugPropertyValueLabelString$1 = property => {
+  return `"${property.value}"`;
+};
+
+const getDebugPropertyValueLabelString = property => {
+  return 'undefined';
+};
+
+const getDebugPropertyValueLabel = (property, maxDescriptionLength) => {
+  if (!property) {
+    return 'n/a';
   }
-  return [{
-    id: AddWatchExpression,
-    title: 'Add new watch expression',
-    icon: '+'
-  }, {
-    id: RefreshWatchExpressions,
-    title: 'Refresh watch expressions',
-    icon: '↻'
-  }];
+  switch (property.type) {
+    case Number$1:
+    case Symbol:
+    case Function:
+      return getDebugPropertyValueLabelCommon(property, maxDescriptionLength);
+    case Object$1:
+      return getDebugPropertyValueLabelObject(property);
+    case Undefined:
+      return getDebugPropertyValueLabelString();
+    case String$1:
+      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 getRunAndDebugVisibleRowsWatch = state => {
-  const {
-    watchExpanded,
-    watchExpressions,
-    watchVisible
-  } = state;
-  if (!watchVisible) {
-    return [];
+const getDebugValueType = child => {
+  if (!child) {
+    return None;
   }
-  const rows = [{
-    type: SectionHeading,
-    text: watch(),
-    expanded: watchExpanded,
-    key: Watch,
-    value: '',
-    indent: 0,
-    valueType: '',
-    name: Watch$1,
-    description: '',
-    actions: getWatchActions(watchExpanded)
-  }];
-  if (watchExpanded) {
-    rows.push(...getRunAndDebugVisibleRowsWatchContent(watchExpressions));
+  if (child.value && child.value.type) {
+    return child.value.type;
   }
-  return rows;
+  if (child.get) {
+    return Getter;
+  }
+  return None;
 };
 
-const getRunAndDebugVisibleRows = state => {
-  if (state.debugState === Unavailable) {
-    return [{
-      type: Message,
-      text: noScriptRunning(),
-      expanded: false,
-      key: 'no-script-running',
+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, descriptionLength) => {
+  const elements = [];
+  for (const scope of scopeChain) {
+    const label = getScopeLabel(scope);
+    elements.push({
+      type: Scope,
+      key: label,
       value: '',
-      indent: 0,
       valueType: '',
-      name: '',
-      description: ''
-    }];
+      label,
+      objectId: scope.object.objectId,
+      indent: 10
+    });
+    // if(params.reason)
+    if (scope.type === Local) {
+      if (params.reason === Exception$2) {
+        const value = getDescriptionValueLabel(params);
+        elements.push({
+          type: Exception,
+          key: 'Exception',
+          value,
+          valueType: '',
+          objectId: scope.object.objectId,
+          indent: 20
+        });
+      }
+      const valueLabel = getDebugPropertyValueLabel(thisObject, descriptionLength);
+      elements.push({
+        type: This,
+        key: 'this',
+        value: valueLabel,
+        valueType: thisObject.type,
+        objectId: '',
+        indent: 20
+      });
+    }
+    const children = knownProperties[scope.object.objectId];
+    if (children) {
+      for (const child of children.result.result) {
+        const valueLabel = getDebugPropertyValueLabel(child.value, descriptionLength);
+        elements.push({
+          type: Property,
+          key: child.name,
+          value: valueLabel,
+          valueType: getDebugValueType(child),
+          objectId: getDebugValueObjectId(child),
+          indent: 20
+        });
+      }
+    }
   }
-  return [...getRunAndDebugVisibleRowsWatch(state), ...getRunAndDebugVisibleRowsBreakPoints(state), ...getRunAndDebugVisibleRowsScope(state), ...getRunAndDebugVisibleRowsCallStack(state)];
+  return elements;
 };
 
-const updateVisibleRows = state => {
-  const visibleRows = getRunAndDebugVisibleRows(state);
+const getPausedInfo2 = async (debugId, maxDescriptionLength) => {
+  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
+  }, maxDescriptionLength);
+  const pausedReason = reason;
+  const pausedMessage = getDebugPausedMessage(reason);
   return {
-    ...state,
-    visibleRows
+    scopeChain,
+    callStack,
+    pausedReason,
+    pausedMessage,
+    callFrameId,
+    expandedIds: [objectId],
+    scriptMap
   };
 };
 
@@ -2955,7 +3068,8 @@ const collapseScopeChain = (state, expandedIds, scopeChain, element, index) => {
     expandedIds: newExpandedIds,
     scopeChain: newScopeChain,
     scopeFocusedIndex: index,
-    cache: newCache
+    cache: newCache,
+    focus: FocusDebugRow
   };
   return updateVisibleRows(newState);
 };
@@ -2969,7 +3083,7 @@ const getInnerChildScopeChain = async (cache, debugId, objectId, indent, maxDesc
   for (const child of childScopes.result.result) {
     const valueLabel = getDebugPropertyValueLabel(child.value || child.get || {}, maxDescriptionLength);
     childScopeChain.push({
-      type: Property$1,
+      type: Property,
       key: child.name,
       value: valueLabel,
       valueType: getDebugValueType(child),
@@ -3000,7 +3114,8 @@ const expandScopeChain = async (state, expandedIds, scopeChain, element, index,
     ...state,
     scopeChain: newScopeChain,
     expandedIds: newExpandedIds,
-    scopeFocusedIndex: index
+    scopeFocusedIndex: index,
+    focus: FocusDebugRow
   };
   return updateVisibleRows(newState);
 };
@@ -3109,30 +3224,6 @@ const handleEvaluate = async state => {
     debugOutputValue: `${actualResult}`
   };
 };
-const handleArrowLeft = state => {
-  const {
-    focusedIndex
-  } = state;
-  if (focusedIndex === 2) {
-    return {
-      ...state,
-      scopeExpanded: false
-    };
-  }
-  return state;
-};
-const handleArrowRight = state => {
-  const {
-    focusedIndex
-  } = state;
-  if (focusedIndex === 2) {
-    return {
-      ...state,
-      scopeExpanded: true
-    };
-  }
-  return state;
-};
 const handleArrowUp = state => {
   return state;
 };
@@ -3214,79 +3305,6 @@ const handleClickSectionAction = async (state, actionId) => {
   return state;
 };
 
-const getSectionIndex = (state, name) => {
-  const rows = getRunAndDebugVisibleRows(state);
-  return rows.findIndex(row => row.type === SectionHeading && row.name === name);
-};
-
-const handleClickSectionBreakPoints = state => {
-  const {
-    breakPointsExpanded
-  } = state;
-  const newState = {
-    ...state,
-    breakPointsExpanded: !breakPointsExpanded,
-    selectedIndex: getSectionIndex(state, BreakPoints$1)
-  };
-  return updateVisibleRows(newState);
-};
-
-const handleClickSectionCallstack = state => {
-  const {
-    callStackExpanded
-  } = state;
-  const newState = {
-    ...state,
-    callStackExpanded: !callStackExpanded,
-    selectedIndex: getSectionIndex(state, CallStack$1)
-  };
-  return updateVisibleRows(newState);
-};
-
-const handleClickSectionScope = state => {
-  const {
-    scopeExpanded
-  } = state;
-  const newState = {
-    ...state,
-    scopeExpanded: !scopeExpanded,
-    selectedIndex: getSectionIndex(state, Scope$1)
-  };
-  return updateVisibleRows(newState);
-};
-
-const handleClickSectionUnkown = state => {
-  // For unknown section IDs, return the state unchanged
-  return state;
-};
-
-const handleClickSectionWatch = state => {
-  const {
-    watchExpanded
-  } = state;
-  const newState = {
-    ...state,
-    watchExpanded: !watchExpanded,
-    selectedIndex: getSectionIndex(state, Watch$1)
-  };
-  return updateVisibleRows(newState);
-};
-
-const getSectionClickHandler = id => {
-  switch (id) {
-    case Watch:
-      return handleClickSectionWatch;
-    case BreakPoints:
-      return handleClickSectionBreakPoints;
-    case Scope:
-      return handleClickSectionScope;
-    case CallStack:
-      return handleClickSectionCallstack;
-    default:
-      return handleClickSectionUnkown;
-  }
-};
-
 const LeftClick = 0;
 
 const handleClickSectionHeading = async (state, id, button) => {
@@ -3338,6 +3356,10 @@ const handleWatchExpressionDoubleClick = async (state, dataIndex) => {
   return state;
 };
 
+const handleEnter = async state => {
+  return state;
+};
+
 const handleInputBlur = async state => {
   const {
     watchExpressions
@@ -3385,6 +3407,22 @@ const handleSectionHeaderContextMenu = async (state, x, y, id) => {
   return state;
 };
 
+const handleSpace = async state => {
+  const {
+    selectedIndex,
+    visibleRows
+  } = state;
+  if (selectedIndex < 0 || selectedIndex >= visibleRows.length) {
+    return state;
+  }
+  const currentRow = visibleRows[selectedIndex];
+  if (currentRow.type === CheckBox$1) {
+    const clickHandler = getCheckBoxClickHandler(currentRow.name);
+    return clickHandler(state);
+  }
+  return state;
+};
+
 const handleWatchExpressionContextMenu = async (state, x, y, dataIndex) => {
   const index = parseIndex(dataIndex);
   const newState = {
@@ -4163,11 +4201,11 @@ const getRowRenderer = type => {
       return renderSectionHeading;
     case CallStack$2:
       return renderCallStack;
-    case Scope$2:
+    case Scope$3:
       return renderScope;
     case Value:
-    case Property:
-    case Exception:
+    case Property$1:
+    case Exception$1:
       return renderValue;
     case CheckBox$1:
       return renderCheckBox;
@@ -4204,6 +4242,17 @@ const renderItems = (oldState, newState) => {
   return ['Viewlet.setDom2', newState.id, dom];
 };
 
+const renderPauseOnExceptions = (oldState, newState) => {
+  const {
+    exceptionBreakPoints,
+    id
+  } = newState;
+  const isPauseOnExceptionsChecked = exceptionBreakPoints === All;
+  // TODO allow unchecking checkbox
+  // TODO allow rendering other checkbox
+  return ['Viewlet.setCheckBoxValue', id, PauseOnExceptions, isPauseOnExceptionsChecked];
+};
+
 const renderSelection = (oldState, newState) => {
   const {
     editingselectionstart,
@@ -4227,6 +4276,8 @@ const getRenderer = diffType => {
       return renderInputValue;
     case RenderSelection:
       return renderSelection;
+    case RenderPauseOnExceptions:
+      return renderPauseOnExceptions;
     default:
       throw new Error('unknown renderer');
   }
@@ -4235,6 +4286,10 @@ const getRenderer = diffType => {
 const applyRender = (oldState, newState, diffResult) => {
   const commands = [];
   for (const item of diffResult) {
+    if (item === RenderPauseOnExceptions) {
+      // TODO support this in the future
+      continue;
+    }
     const fn = getRenderer(item);
     commands.push(fn(oldState, newState));
   }
@@ -4470,12 +4525,18 @@ const saveState = (uid, reason) => {
   };
 };
 
+const clamp = (value, min, max) => {
+  if (value < min) return min;
+  if (value > max) return max;
+  return value;
+};
+
 const selectIndex = (state, index) => {
   const {
     visibleRows
   } = state;
   const maxIndex = visibleRows.length - 1;
-  const clampedIndex = Math.max(-1, Math.min(index, maxIndex));
+  const clampedIndex = clamp(index, -1, maxIndex);
   return {
     ...state,
     selectedIndex: clampedIndex
@@ -4483,27 +4544,11 @@ const selectIndex = (state, index) => {
 };
 
 const selectNextRow = state => {
-  const {
-    selectedIndex,
-    visibleRows
-  } = state;
-  const maxIndex = visibleRows.length - 1;
-  const newIndex = Math.min(maxIndex, selectedIndex + 1);
-  return {
-    ...state,
-    selectedIndex: newIndex
-  };
+  return selectIndex(state, state.selectedIndex + 1);
 };
 
 const selectPreviousRow = state => {
-  const {
-    selectedIndex
-  } = state;
-  const newIndex = Math.max(-1, selectedIndex - 1);
-  return {
-    ...state,
-    selectedIndex: newIndex
-  };
+  return selectIndex(state, state.selectedIndex - 1);
 };
 
 const showCallStack = state => {
@@ -4610,7 +4655,9 @@ const commandMap = {
   'RunAndDebug.showScope': wrapCommand(showScope),
   'RunAndDebug.hideScope': wrapCommand(hideScope),
   'RunAndDebug.showCallStack': wrapCommand(showCallStack),
-  'RunAndDebug.hideCallStack': wrapCommand(hideCallStack)
+  'RunAndDebug.hideCallStack': wrapCommand(hideCallStack),
+  'RunAndDebug.handleEnter': wrapCommand(handleEnter),
+  'RunAndDebug.handleSpace': wrapCommand(handleSpace)
 };
 
 const listen = async () => {