@lvce-editor/static-server 0.115.10 → 0.115.12

package/static/{9ce44e3 → 581cc9b}/packages/problems-view/dist/problemsViewWorkerMain.js

@@ -1453,6 +1453,7 @@ const create$1 = rpcId => {
   };
 };
 
+const Group = 'group';
 const None$2 = 'none';
 const ToolBar = 'toolbar';
 const Tree = 'tree';
@@ -1491,6 +1492,7 @@ const EditorWorker = 99;
 const RendererProcess = 1670;
 const RendererWorker = 1;
 
+const FocusSelector = 'Viewlet.focusSelector';
 const SetCss = 'Viewlet.setCss';
 const SetFocusContext = 'Viewlet.setFocusContext';
 
@@ -1591,6 +1593,7 @@ const create = (id, uri, x, y, width, height, workspaceUri) => {
   const state = {
     activeUri: '',
     collapsedUris: [],
+    columnWidths: [0.13, 0.52, 0.27, 0.08],
     deltaY: 0,
     fileIconCache: {},
     filteredProblems: [],
@@ -1607,6 +1610,10 @@ const create = (id, uri, x, y, width, height, workspaceUri) => {
     minimumSliderSize: 20,
     minLineY: 0,
     problems: [],
+    resizeStartWidth: 0,
+    resizeStartWidths: [],
+    resizeStartX: 0,
+    resizingColumn: 0,
     scrollBarActive: false,
     scrollBarHeight: 0,
     showErrors: true,
@@ -1623,12 +1630,16 @@ const create = (id, uri, x, y, width, height, workspaceUri) => {
   set$1(id, state, state);
 };
 
+const isEqual$3 = (oldState, newState) => {
+  return oldState.columnWidths === newState.columnWidths && oldState.collapsedUris === newState.collapsedUris && oldState.deltaY === newState.deltaY && oldState.filterValue === newState.filterValue && oldState.finalDeltaY === newState.finalDeltaY && oldState.height === newState.height && oldState.itemHeight === newState.itemHeight && oldState.maxLineY === newState.maxLineY && oldState.minLineY === newState.minLineY && oldState.problems === newState.problems && oldState.showErrors === newState.showErrors && oldState.showInfos === newState.showInfos && oldState.showWarnings === newState.showWarnings && oldState.scrollBarHeight === newState.scrollBarHeight && oldState.viewMode === newState.viewMode && oldState.width === newState.width;
+};
+
 const isEqual$2 = (oldState, newState) => {
-  return oldState.collapsedUris === newState.collapsedUris && oldState.deltaY === newState.deltaY && oldState.filterValue === newState.filterValue && oldState.finalDeltaY === newState.finalDeltaY && oldState.height === newState.height && oldState.itemHeight === newState.itemHeight && oldState.maxLineY === newState.maxLineY && oldState.minLineY === newState.minLineY && oldState.problems === newState.problems && oldState.showErrors === newState.showErrors && oldState.showInfos === newState.showInfos && oldState.showWarnings === newState.showWarnings && oldState.scrollBarHeight === newState.scrollBarHeight && oldState.viewMode === newState.viewMode && oldState.width === newState.width;
+  return newState.inputSource === User || oldState.filterValue === newState.filterValue;
 };
 
 const isEqual$1 = (oldState, newState) => {
-  return newState.inputSource === User || oldState.filterValue === newState.filterValue;
+  return newState.focusedIndex < 0 || oldState.focusedIndex === newState.focusedIndex && oldState.collapsedUris === newState.collapsedUris;
 };
 
 const haveSameCollapsedUris = (oldState, newState) => {
@@ -1647,12 +1658,14 @@ const isEqual = (oldState, newState) => {
   return haveSameCollapsedUris(oldState, newState) && oldState.fileIconCache === newState.fileIconCache && oldState.focusedIndex === newState.focusedIndex && oldState.height === newState.height && oldState.maxLineY === newState.maxLineY && oldState.minLineY === newState.minLineY && oldState.problems === newState.problems && oldState.showErrors === newState.showErrors && oldState.showInfos === newState.showInfos && oldState.showWarnings === newState.showWarnings && oldState.filterValue === newState.filterValue && oldState.message === newState.message && oldState.scrollBarActive === newState.scrollBarActive && oldState.scrollBarHeight === newState.scrollBarHeight && oldState.width === newState.width && oldState.viewMode === newState.viewMode;
 };
 
+const RenderFocus = 5;
 const RenderItems = 1;
 const RenderFilterValue = 2;
 const RenderCss = 4;
+const RenderFocusContext = 6;
 
-const modules = [isEqual, isEqual$1, isEqual$2];
-const numbers = [RenderItems, RenderFilterValue, RenderCss];
+const modules = [isEqual, isEqual$2, isEqual$3, isEqual$1, isEqual$1];
+const numbers = [RenderItems, RenderFilterValue, RenderCss, RenderFocus, RenderFocusContext];
 
 const diff = (oldState, newState) => {
   const diffResult = [];
@@ -1830,10 +1843,6 @@ const focusIndex = (state, index) => {
   };
 };
 
-const getComponentState = uid => {
-  return get(uid).newState;
-};
-
 const mergeClassNames = (...classNames) => {
   return classNames.filter(Boolean).join(' ');
 };
@@ -1846,56 +1855,125 @@ const text = data => {
   };
 };
 
-const FocusProblems = 19;
+const Button = 1;
+const ProblemsFilter = 4;
 
-const getKeyBindings = () => {
+const Chevron = 'Chevron';
+const FileIcon = 'FileIcon';
+const Filter$2 = 'Filter';
+const FilterBadge = 'FilterBadge';
+const Highlight = 'Highlight';
+const IconButton = 'IconButton';
+const InputBox = 'InputBox';
+const Label = 'Label';
+const Actions = 'Actions';
+const LabelDetail = 'LabelDetail';
+const Message$1 = 'Message';
+const MessageAction = 'MessageAction';
+const Problem = 'Problem';
+const ProblemAt = 'ProblemAt';
+const ProblemBadge = 'ProblemBadge';
+const ProblemLabel = 'ProblemLabel';
+const Problems = 'Problems';
+const ProblemsContent = 'ProblemsContent';
+const ProblemsContentTable = 'ProblemsContentTable';
+const ProblemSelected = 'ProblemSelected';
+const ProblemsErrorIcon = 'ProblemsErrorIcon';
+const ProblemsIcon = 'ProblemsIcon';
+const ProblemsList = 'ProblemsList';
+const ProblemsTable = 'ProblemsTable';
+const ProblemsTableBody = 'ProblemsTableBody';
+const ProblemsTableHeader = 'ProblemsTableHeader';
+const ProblemsTableRow = 'ProblemsTableRow';
+const ProblemsTableRowItem = 'ProblemsTableRowItem';
+const ProblemsTableRowOdd = 'ProblemsTableRowOdd';
+const ProblemsWarningIcon = 'ProblemsWarningIcon';
+const ScrollBar = 'ScrollBar';
+const ScrollBarSmall = 'ScrollBarSmall';
+const ScrollBarThumb = 'ScrollBarThumb';
+const ScrollBarThumbActive = 'ScrollBarThumbActive';
+const Viewlet = 'Viewlet';
+
+const HandleBlur = 1;
+const HandleClearFilterClick = 2;
+const HandleContextMenu = 3;
+const HandleFilterInput = 4;
+const HandleClick = 5;
+const HandleClickMoreFilters = 6;
+const HandleWheel = 7;
+const HandleScrollBarMove = 8;
+const HandleScrollBarPointerCaptureLost = 9;
+const HandleScrollBarPointerDown = 10;
+const HandleCollapseAll = 11;
+const HandleViewAsList = 12;
+const HandleViewAsTable = 13;
+const HandleColumnResizeStart = 16;
+const HandleColumnResizeMove = 17;
+const HandleColumnResizeEnd = 18;
+
+const getIconVirtualDom = (icon, type = Div) => {
+  return {
+    childCount: 0,
+    className: mergeClassNames('MaskIcon', `MaskIcon${icon}`),
+    role: None$2,
+    type
+  };
+};
+
+const getActionButtonVirtualDom = action => {
+  const {
+    command,
+    icon,
+    id,
+    name
+  } = action;
   return [{
-    command: 'Problems.focusNext',
-    key: DownArrow,
-    when: FocusProblems
-  }, {
-    command: 'Problems.focusPrevious',
-    key: UpArrow,
-    when: FocusProblems
-  }, {
-    command: 'Problems.focusFirst',
-    key: Home,
-    when: FocusProblems
-  }, {
-    command: 'Problems.focusFirst',
-    key: PageUp,
-    when: FocusProblems
-  }, {
-    command: 'Problems.focusLast',
-    key: PageDown,
-    when: FocusProblems
-  }, {
-    command: 'Problems.focusLast',
-    key: End,
-    when: FocusProblems
-  }, {
-    command: 'Problems.selectCurrent',
-    key: Space,
-    when: FocusProblems
-  }, {
-    command: 'Problems.focusFirst',
-    key: Home,
-    when: FocusProblems
-  }, {
-    command: 'Problems.focusLast',
-    key: End,
-    when: FocusProblems
-  }, {
-    command: 'Problems.handleArrowLeft',
-    key: LeftArrow,
-    when: FocusProblems
-  }, {
-    command: 'Problems.handleArrowRight',
-    key: RightArrow,
-    when: FocusProblems
-  }];
+    childCount: 1,
+    className: IconButton,
+    name,
+    onClick: command,
+    title: id,
+    type: Button$1
+  }, getIconVirtualDom(String(icon))];
 };
 
+const filterBadgeNode = {
+  childCount: 1,
+  className: FilterBadge,
+  type: Div
+};
+const getFilterBadgeDom = badgeText => {
+  if (!badgeText) {
+    return [];
+  }
+  return [filterBadgeNode, text(badgeText)];
+};
+
+const getInputBoxVirtualDom = (name, onInput, placeholder, value) => {
+  return {
+    ariaLabel: placeholder,
+    autocapitalize: 'off',
+    autocorrect: 'off',
+    childCount: 0,
+    className: InputBox,
+    name,
+    onInput,
+    placeholder,
+    spellcheck: false,
+    type: Input,
+    ...(value && {
+      value
+    })
+  };
+};
+
+const ProblemsInput = 'ProblemsInput';
+
+const CollapseAll$1 = 'CollapseAll';
+const Filter$1 = 'Filter';
+const ListFlat = 'ListFlat';
+const ListTree = 'ListTree';
+
 const emptyObject = {};
 const i18nString = (key, placeholders = emptyObject) => {
   if (placeholders === emptyObject) {
@@ -1911,15 +1989,15 @@ const i18nString = (key, placeholders = emptyObject) => {
 const ClearFilters = 'Clear Filters';
 const Code = 'Code';
 const File = 'File';
-const Filter$2 = 'Filter';
+const Filter = 'Filter';
 const LineColumn = '[Ln {PH1}, Col {PH2}]';
-const Message$1 = 'Message';
+const Message = 'Message';
 const NoProblemsDetected = 'No problems have been detected in the workspace.';
 const NoResultsFoundWithProvidedFilterCriteria = 'No results found with provided filter criteria.';
 const ProblemsDetected = 'Some problems have been detected in the workspace.';
 const ShowingOfItems = 'Showing {PH1} of {PH2} ';
 const Source = 'Source';
-const CollapseAll$1 = 'Collapse All';
+const CollapseAll = 'Collapse All';
 const ViewAsTable = 'View as Table';
 const ViewAsList = 'View as List';
 const ShowErrors = 'Show Errors';
@@ -1950,13 +2028,13 @@ const code = () => {
   return i18nString(Code);
 };
 const message = () => {
-  return i18nString(Message$1);
+  return i18nString(Message);
 };
 const file = () => {
   return i18nString(File);
 };
 const filter = () => {
-  return i18nString(Filter$2);
+  return i18nString(Filter);
 };
 const showingOf = (visibleCount, totalCount) => {
   return i18nString(ShowingOfItems, {
@@ -1971,7 +2049,7 @@ const noResultsFoundWithProvidedFilterCriteria = () => {
   return i18nString(NoResultsFoundWithProvidedFilterCriteria);
 };
 const collapseAll = () => {
-  return i18nString(CollapseAll$1);
+  return i18nString(CollapseAll);
 };
 const viewAsList$1 = () => {
   return i18nString(ViewAsList);
@@ -1995,1419 +2073,1531 @@ const moreFilters = () => {
   return i18nString(MoreFilters);
 };
 
-const getMenuEntriesFilter = state => {
-  const {
-    showErrors: showErrors$1,
-    showInfos: showInfos$1,
-    showWarnings: showWarnings$1
-  } = state;
+const getChildCount = badgeText => {
+  let childCount = 0;
+  childCount++; // input
+  if (badgeText) {
+    childCount++; // badge
+  }
+  childCount++; // action button
+  return childCount;
+};
+const getProblemsFilterVirtualDom = action => {
   return [{
-    command: 'Problems.toggleShowErrors',
-    flags: showErrors$1 ? Checked : Unchecked,
-    id: 'show-errors',
-    label: showErrors()
-  }, {
-    command: 'Problems.toggleShowWarnings',
-    flags: showWarnings$1 ? Checked : Unchecked,
-    id: 'show-warnings',
-    label: showWarnings()
-  }, {
-    command: 'Problems.toggleShowInfos',
-    flags: showInfos$1 ? Checked : Unchecked,
-    id: 'show-infos',
-    label: showInfos()
-  }];
+    childCount: getChildCount(action.badgeText),
+    className: Filter$2,
+    type: Div
+  }, getInputBoxVirtualDom(action.name || ProblemsInput, action.command, action.placeholder || '', action.value), ...getFilterBadgeDom(action.badgeText), ...getActionButtonVirtualDom({
+    command: HandleClickMoreFilters,
+    icon: Filter$1,
+    id: moreFilters(),
+    name: 'more filters'
+  })];
 };
 
-const getMenuEntries2 = (state, props) => {
-  const {
-    menuId
-  } = props;
-  switch (menuId) {
-    case ProblemsFilter$1:
-      return getMenuEntriesFilter(state);
-    default:
-      return [];
-  }
+const messageNode$2 = {
+  childCount: 3,
+  className: Message$1,
+  type: Div
 };
-
-const getMenuIds = () => {
-  return [ProblemsFilter$1];
+const spanNode = {
+  childCount: 1,
+  type: Span
 };
-
-const countByType = (diagnostics, type) => {
-  return diagnostics.filter(diagnostic => diagnostic.type === type).length;
+const clearFilterNode = {
+  childCount: 1,
+  className: MessageAction,
+  onClick: HandleClearFilterClick,
+  type: A
 };
-
-const Error$1 = 'error';
-const Warning = 'warning';
-
-const getDiagnostics = editorId => {
-  return invoke$3('Editor.getDiagnostics', editorId);
+const getNoResultsWithFilterVirtualDom = () => {
+  return [messageNode$2, spanNode, text(noResultsFoundWithProvidedFilterCriteria()), clearFilterNode, text(clearFilter()), text('.')];
 };
 
-const getActiveDiagnostics = async editorId => {
-  try {
-    return await getDiagnostics(editorId);
-  } catch {
-    return [];
-  }
+const getBadgeVirtualDom = (className, count) => {
+  return [{
+    childCount: 1,
+    className: mergeClassNames('Badge', className) + (''),
+    type: Div
+  }, text(String(count))];
 };
 
-const getDiagnosticKey = diagnostic => JSON.stringify([diagnostic.uri, diagnostic.rowIndex, diagnostic.columnIndex, diagnostic.message, diagnostic.source, diagnostic.type, diagnostic.code]);
-
-const getUniqueDiagnostics = diagnostics => {
-  const keys = new Set();
-  return diagnostics.filter(diagnostic => {
-    const key = getDiagnosticKey(diagnostic);
-    if (keys.has(key)) {
-      return false;
-    }
-    keys.add(key);
-    return true;
-  });
+const getChevronDownVirtualDom = (extraClassName = '') => {
+  return {
+    childCount: 0,
+    className: mergeClassNames(Chevron, 'MaskIconChevronDown', extraClassName) + (extraClassName === '' ? ' ' : ''),
+    type: Div
+  };
+};
+const getChevronRightVirtualDom = (extraClassName = '') => {
+  return {
+    childCount: 0,
+    className: mergeClassNames(Chevron, 'MaskIconChevronRight', extraClassName) + (extraClassName === '' ? ' ' : ''),
+    type: Div
+  };
 };
 
-const getProblemsSummary = async () => {
-  const editorId = await getActiveEditorId();
-  if (editorId === -1) {
-    return {
-      errorCount: 0,
-      hasEditor: false,
-      problemCount: 0,
-      warningCount: 0
-    };
-  }
-  const [allDiagnostics, activeDiagnostics] = await Promise.all([getProblems$1(), getActiveDiagnostics(editorId)]);
-  const uniqueDiagnostics = getUniqueDiagnostics(allDiagnostics);
-  const uniqueActiveDiagnostics = getUniqueDiagnostics(activeDiagnostics);
+const getFileIconVirtualDom = icon => {
   return {
-    errorCount: countByType(uniqueActiveDiagnostics, Error$1),
-    hasEditor: true,
-    problemCount: uniqueDiagnostics.length,
-    warningCount: countByType(uniqueActiveDiagnostics, Warning)
+    alt: '',
+    childCount: 0,
+    className: FileIcon,
+    role: None$2,
+    src: icon,
+    type: Img
   };
 };
 
-const getMissingRequests = (problems, fileIconCache) => {
-  const missingRequests = [];
-  const pendingUris = new Set();
-  for (const problem of problems) {
-    const {
-      fileName,
-      uri
-    } = problem;
-    if (!uri || uri in fileIconCache || pendingUris.has(uri)) {
-      continue;
-    }
-    pendingUris.add(uri);
-    missingRequests.push({
-      name: fileName,
-      uri
-    });
+const defaultIndent = 1;
+const getTreeItemIndent = depth => {
+  return `${depth * defaultIndent}rem`;
+};
+
+const getProblemIndent = (listItemType, level) => {
+  const isGroup = listItemType === Expanded || listItemType === Collapsed;
+  const depth = isGroup ? 1 : Math.max(2, level || 2);
+  return getTreeItemIndent(depth);
+};
+
+const getProblemClassName = (listItemType, level, isActive) => {
+  let className = Problem;
+  const indent = getProblemIndent(listItemType, level);
+  className = mergeClassNames(className, `Indent-${indent}`);
+  if (isActive) {
+    className = mergeClassNames(className, ProblemSelected);
   }
-  return missingRequests;
+  return className;
 };
-const requestFileIcon = name => {
-  if (!name) {
-    return Promise.resolve('');
+
+const warningIconNode = {
+  childCount: 0,
+  className: mergeClassNames(ProblemsIcon, ProblemsWarningIcon),
+  type: Div
+};
+const errorIconNode = {
+  childCount: 0,
+  className: mergeClassNames(ProblemsIcon, ProblemsErrorIcon),
+  type: Div
+};
+const getProblemsIconVirtualDom = type => {
+  if (type === Warning$1) {
+    return warningIconNode;
   }
-  return getFileIcon({
-    name
-  });
+  return errorIconNode;
 };
-const getFileIcons = async (problems, fileIconCache) => {
-  const missingRequests = getMissingRequests(problems, fileIconCache);
-  if (missingRequests.length === 0) {
-    return fileIconCache;
+
+// TODO compute detail message in getVisibleProblems
+const getProblemSourceDetail = (source, code) => {
+  let message = '';
+  if (source) {
+    message += source;
   }
-  const icons = await Promise.all(missingRequests.map(request => requestFileIcon(request.name)));
-  const newFileIconCache = {
-    ...fileIconCache
-  };
-  for (let i = 0; i < missingRequests.length; i++) {
-    newFileIconCache[missingRequests[i].uri] = icons[i];
+  if (code) {
+    message += `(${code})`;
   }
-  return newFileIconCache;
+  message += ' ';
+  return message;
 };
 
-const getProblemType = type => {
-  switch (type) {
-    case Error$1:
-      return Error$2;
-    case Warning:
-      return Warning$1;
-    case 'info':
-      return Info;
-    case 'spelling':
-      return Spelling;
-    default:
-      return type ? Other : Error$2;
+const leadingSlashesRegex = /^\/+/;
+const trailingSlashRegex = /\/$/;
+const schemeRootRegex = /^[a-z][a-z\d+.-]*:\/\/$/i;
+const windowsDrivePathRegex = /^\/[a-z]:\//i;
+const normalizeFileUri = uri => {
+  const normalizedUri = uri.startsWith('file://') ? uri.slice('file://'.length) : uri;
+  return windowsDrivePathRegex.test(normalizedUri) ? normalizedUri.slice(1) : normalizedUri;
+};
+const getRelativeParentUri = (uri, workspaceUri) => {
+  const normalizedUri = normalizeFileUri(uri);
+  const normalizedWorkspaceUri = normalizeFileUri(workspaceUri).replace(trailingSlashRegex, '');
+  const slashIndex = normalizedUri.lastIndexOf('/');
+  if (slashIndex === -1) {
+    return '';
+  }
+  const parentUri = normalizedUri.slice(0, slashIndex);
+  if (schemeRootRegex.test(parentUri)) {
+    return '';
+  }
+  if (parentUri === normalizedWorkspaceUri) {
+    return '';
   }
+  if (normalizedWorkspaceUri && parentUri.startsWith(`${normalizedWorkspaceUri}/`)) {
+    return parentUri.slice(normalizedWorkspaceUri.length + 1);
+  }
+  return parentUri.replace(leadingSlashesRegex, '');
 };
 
-const toProblem = (diagnostic, index) => {
+const labelNode = {
+  childCount: 1,
+  className: Label,
+  type: Span
+};
+const labelDetailNode = {
+  childCount: 1,
+  className: LabelDetail,
+  type: Div
+};
+const highlightNode = {
+  childCount: 1,
+  className: Highlight,
+  type: Div
+};
+const problemAtNode = {
+  childCount: 2,
+  className: ProblemAt,
+  type: Span
+};
+const getProblemVirtualDom = (problem, workspaceUri = '') => {
   const {
     code,
     columnIndex,
+    fileName,
+    filterValueLength,
+    icon,
+    isActive,
+    isCollapsed,
+    level,
+    listItemType,
     message,
+    messageMatchIndex,
+    posInSet,
     rowIndex,
+    setSize,
     source,
     type,
     uri
-  } = diagnostic;
-  return {
-    code: code || '',
-    columnIndex: columnIndex || 0,
-    count: 0,
-    fileName: '',
-    level: 2,
-    listItemType: Item,
-    message: message || '',
-    posInSet: index,
-    rowIndex: rowIndex || 0,
-    setSize: 1,
-    source: source || '',
-    type: getProblemType(type),
-    uri
+  } = problem;
+  const className = getProblemClassName(listItemType, level, isActive);
+  if (listItemType === Expanded || listItemType === Collapsed) {
+    const fileIconDom = icon ? [getFileIconVirtualDom(icon)] : [];
+    return [{
+      ariaExpanded: !isCollapsed,
+      ariaLevel: level,
+      ariaPosInSet: posInSet,
+      ariaSelected: isActive,
+      ariaSetSize: setSize,
+      childCount: 4 + fileIconDom.length,
+      className,
+      role: TreeItem,
+      tabIndex: isActive ? 0 : -1,
+      type: Div
+    }, listItemType === Collapsed ? getChevronRightVirtualDom() : getChevronDownVirtualDom(), ...fileIconDom, {
+      ...labelNode,
+      'data-uri': uri
+    }, text(fileName), labelDetailNode, text(getRelativeParentUri(uri, workspaceUri)), ...getBadgeVirtualDom(ProblemBadge, problem.count)];
+  }
+  const lineColumn = atLineColumn(rowIndex + 1, columnIndex + 1);
+  const label = {
+    childCount: 1,
+    className: ProblemLabel,
+    type: Div
   };
-};
-const getFileName = uri => {
-  const slashIndex = uri.lastIndexOf('/');
-  return uri.slice(slashIndex + 1);
-};
-const toRelatedProblem = (relatedInformation, diagnostic, index, setSize) => {
-  return {
-    code: '',
-    columnIndex: relatedInformation.columnIndex || 0,
-    count: 0,
-    fileName: '',
-    level: 3,
-    listItemType: Item,
-    message: relatedInformation.message || '',
-    posInSet: index,
-    rowIndex: relatedInformation.rowIndex || 0,
-    setSize,
-    source: getFileName(relatedInformation.uri),
-    targetUri: relatedInformation.uri,
-    type: getProblemType(diagnostic.type),
-    uri: diagnostic.uri
-  };
-};
-const toProblems = diagnostics => {
-  const problems = [];
-  let problem = {
-    code: '',
-    columnIndex: 0,
-    count: 0,
-    fileName: '',
-    level: 0,
-    listItemType: 0,
-    message: '',
-    posInSet: 0,
-    rowIndex: 0,
-    setSize: 0,
-    source: '',
-    type: None,
-    uri: ''
-  };
-  let relativeIndex = 0;
-  for (const diagnostic of diagnostics) {
-    if (diagnostic.uri === problem.uri) {
-      relativeIndex++;
-      problem.count++;
-    } else {
-      relativeIndex = 1;
-      problem = {
-        code: '',
-        columnIndex: 0,
-        count: 1,
-        fileName: '',
-        level: 1,
-        listItemType: Expanded,
-        message: '',
-        posInSet: relativeIndex,
-        rowIndex: 0,
-        setSize: 123,
-        source: '',
-        type: None,
-        uri: diagnostic.uri
-      };
-      problems.push(problem);
-    }
-    problems.push(toProblem(diagnostic, relativeIndex));
-    const relatedInformation = diagnostic.relatedInformation || [];
-    for (let i = 0; i < relatedInformation.length; i++) {
-      problems.push(toRelatedProblem(relatedInformation[i], diagnostic, i + 1, relatedInformation.length));
-    }
-  }
-  for (const problem of problems) {
-    const displayUri = problem.targetUri || problem.uri;
-    problem.fileName = getFileName(displayUri);
-  }
-  return problems;
+  const dom = [{
+    ariaLevel: level,
+    ariaPosInSet: posInSet,
+    ariaSelected: isActive,
+    ariaSetSize: setSize,
+    childCount: 3,
+    className,
+    role: TreeItem,
+    tabIndex: isActive ? 0 : -1,
+    type: Div
+  }, getProblemsIconVirtualDom(type), label];
+  if (filterValueLength && messageMatchIndex >= 0) {
+    const before = message.slice(0, messageMatchIndex);
+    const middle = message.slice(messageMatchIndex, messageMatchIndex + filterValueLength);
+    const after = message.slice(messageMatchIndex + filterValueLength);
+    label.childCount += 2;
+    dom.push(text(before), highlightNode, text(middle), text(after));
+  } else {
+    dom.push(text(message));
+  }
+  dom.push(problemAtNode, text(getProblemSourceDetail(source, code)), text(lineColumn));
+  return dom;
 };
 
-const getProblems = async activeUri => {
-  if (!activeUri) {
-    return {
-      error: '',
-      problems: []
-    };
-  }
-  try {
-    const diagnostics = getUniqueDiagnostics(await getProblems$1());
-    const problems = toProblems(diagnostics);
-    return {
-      error: '',
-      problems
-    };
-  } catch (error) {
-    return {
-      error: String(error),
-      problems: []
-    };
-  }
+const getProblemsListVirtualDom = (problems, workspaceUri = '') => {
+  const dom = [{
+    ariaLabel: problemsTree(),
+    childCount: problems.length,
+    className: ProblemsList,
+    onClick: HandleClick,
+    role: Tree,
+    type: Div
+  }, ...problems.flatMap(problem => getProblemVirtualDom(problem, workspaceUri))];
+  return dom;
 };
 
-const refreshProblems = async (state, activeUri) => {
-  const {
-    fileIconCache
-  } = state;
-  const {
-    error,
-    problems
-  } = await getProblems(activeUri);
-  const newFileIconCache = await getFileIcons(problems, fileIconCache);
-  return {
-    ...state,
-    activeUri,
-    fileIconCache: newFileIconCache,
-    filteredProblems: problems,
-    inputSource: Script,
-    listItems: [],
-    message: error || getMessage(problems.length),
-    problems
-  };
-};
-const handleActiveEditorChange = async (state, activeUri) => {
-  const {
-    activeUri: oldActiveUri
-  } = state;
-  if (activeUri === oldActiveUri) {
-    return state;
-  }
-  return refreshProblems(state, activeUri);
+const messageNode$1 = {
+  childCount: 1,
+  className: Message$1,
+  type: Div
 };
-const handleDiagnosticsChange = async (state, uri) => {
-  const {
-    activeUri
-  } = state;
-  if (uri !== activeUri) {
-    return state;
-  }
-  return refreshProblems(state, uri);
+const getProblemsNoProblemsFoundVirtualDom = () => {
+  return [messageNode$1, text(noProblemsDetected())];
 };
 
-const getArrowLeftNewFocusedIndex = (problems, collapsedUris, focusedIndex) => {
-  for (let i = focusedIndex; i >= 0; i--) {
-    const problem = problems[i];
-    if (problem.listItemType !== Item) {
-      return {
-        index: i,
-        newCollapsedUris: collapsedUris.includes(problem.uri) ? collapsedUris : [...collapsedUris, problem.uri]
-      };
-    }
+const rowItemNode$1 = {
+  childCount: 1,
+  className: ProblemsTableRowItem,
+  type: Div
+};
+const getClassName = isEven => {
+  if (isEven) {
+    return ProblemsTableRow;
   }
-  return {
-    index: 0,
-    newCollapsedUris: collapsedUris
-  };
+  return mergeClassNames(ProblemsTableRow, ProblemsTableRowOdd);
 };
-const handleArrowLeft = state => {
-  const {
-    collapsedUris,
-    focusedIndex,
-    problems
-  } = state;
+const getProblemsTableRowVirtualDom = problem => {
   const {
-    index,
-    newCollapsedUris
-  } = getArrowLeftNewFocusedIndex(problems, collapsedUris, focusedIndex);
-  return {
-    ...state,
-    collapsedUris: newCollapsedUris,
-    focusedIndex: index
-  };
-};
-
-const getArrowRightNewFocusedIndex = (problems, collapsedUris, focusedIndex) => {
-  const problem = problems[focusedIndex];
-  const newCollapsedUris = collapsedUris.includes(problem.uri) ? collapsedUris.filter(uri => uri !== problem.uri) : collapsedUris;
-  return {
-    index: focusedIndex,
-    newCollapsedUris
-  };
+    code,
+    isActive,
+    isEven,
+    message,
+    source,
+    type,
+    uri
+  } = problem;
+  // TODO problems are grouped by uri, depending
+  // on which renderer is used the data needs to look different
+  if (!message) {
+    return [];
+  }
+  const dom = [{
+    childCount: 5,
+    className: mergeClassNames(getClassName(isEven), isActive ? ProblemSelected : ''),
+    tabIndex: isActive ? 0 : -1,
+    type: Div
+  }, rowItemNode$1, getProblemsIconVirtualDom(type), rowItemNode$1, text(getProblemSourceDetail(source, code)), rowItemNode$1, text(message), rowItemNode$1, text(uri), rowItemNode$1, text(source)];
+  return dom;
 };
 
-const handleArrowRight = state => {
-  const {
-    collapsedUris,
-    focusedIndex,
-    problems
-  } = state;
-  const {
-    index,
-    newCollapsedUris
-  } = getArrowRightNewFocusedIndex(problems, collapsedUris, focusedIndex);
-  return {
-    ...state,
-    collapsedUris: newCollapsedUris,
-    focusedIndex: index
-  };
+const getProblemsTableBodyVirtualDom = problems => {
+  const dom = [{
+    childCount: problems.length,
+    className: ProblemsTableBody,
+    onClick: HandleClick,
+    role: Group,
+    type: Div
+  }, ...problems.flatMap(getProblemsTableRowVirtualDom)];
+  return dom;
 };
 
-const handleBlur = state => {
-  return {
-    ...state,
-    focusedIndex: -2
-  };
+const tableHeaderNode = {
+  childCount: 1,
+  className: ProblemsTableHeader,
+  type: Div
 };
-
-const show2 = async (uid, menuId, x, y, args) => {
-  await showContextMenu2(uid, menuId, x, y, args);
+const tableRowNode = {
+  childCount: 5,
+  className: ProblemsTableRow,
+  type: Div
 };
-
-const handleClickMoreFilters = async (state, eventX, eventY) => {
-  const {
-    uid
-  } = state;
-  await show2(uid, ProblemsFilter$1, eventX, eventY, {
-    menuId: ProblemsFilter$1
-  });
-  return state;
+const emptyRowItemNode = {
+  childCount: 0,
+  className: ProblemsTableRowItem,
+  type: Div
 };
-
-const handleContextMenu = async (state, eventX, eventY) => {
-  const {
-    uid
-  } = state;
-  await show2(uid, ProblemsFilter$1, eventX, eventY, {
-    menuId: ProblemsFilter$1
-  });
-  return state;
+const rowItemNode = {
+  childCount: 1,
+  className: ProblemsTableRowItem,
+  type: Div
 };
-
-const handleFilterInput = (state, value, inputSource = Script) => {
-  return {
-    ...state,
-    filterValue: value,
-    inputSource
-  };
+const getProblemsTableHeaderVirtualDom = () => {
+  const textCode = code();
+  const textSource = source();
+  const textMessage = message();
+  const textFile = file();
+  const dom = [tableHeaderNode, tableRowNode, emptyRowItemNode, rowItemNode, text(textCode), rowItemNode, text(textMessage), rowItemNode, text(textFile), rowItemNode, text(textSource)];
+  return dom;
 };
 
-const handleIconThemeChange = async state => {
-  const {
-    problems
-  } = state;
-  const fileIconCache = await getFileIcons(problems, {});
-  return {
-    ...state,
-    fileIconCache
-  };
+const getTableDividersVirtualDom = () => {
+  return [0, 1, 2, 3].map(index => ({
+    childCount: 0,
+    className: mergeClassNames('ProblemsTableDivider', `ProblemsTableDivider${index}`),
+    ...(index > 0 && {
+      'data-column': String(index),
+      onPointerDown: HandleColumnResizeStart
+    }),
+    type: Div
+  }));
 };
 
-const state = {
-  connected: false
-};
-const isConnected = () => {
-  const {
-    connected
-  } = state;
-  return connected;
-};
-const invoke = (method, ...params) => {
-  return invoke$2(method, ...params);
+const tableNode = {
+  childCount: 6,
+  className: ProblemsTable,
+  type: Div
 };
-const set = rpc => {
-  set$4(rpc);
-  state.connected = true;
+const getProblemsTableVirtualDom = problems => {
+  const dom = [tableNode, ...getProblemsTableHeaderVirtualDom(), ...getProblemsTableBodyVirtualDom(problems), ...getTableDividersVirtualDom()];
+  return dom;
 };
 
-const handleMessagePort = async (port, viewletCommandMap, setAsRendererProcess = true) => {
-  const executeViewletCommand = async (uid, command, ...args) => {
-    const fn = viewletCommandMap[`Problems.${command}`];
-    if (typeof fn !== 'function') {
-      throw new TypeError(`Viewlet command not found: ${command}`);
-    }
-    await fn(uid, ...args);
-    await invoke$1('Viewlet.requestRender', uid);
-  };
-  const rpc = await create$5({
-    commandMap: {
-      'Viewlet.executeViewletCommand': executeViewletCommand
-    },
-    messagePort: port
-  });
-  if (setAsRendererProcess) {
-    set(rpc);
-  }
+const messageNode = {
+  childCount: 1,
+  className: Message$1,
+  type: Div
 };
-
-const getIcon = (uri, fileIconCache) => {
-  if (!uri) {
-    return '';
+const getProblemsVirtualDom$1 = (viewMode, problems, filterValue, message, problemCount = problems.length, workspaceUri = '') => {
+  if (problemCount === 0 && message) {
+    return [messageNode, text(message)];
   }
-  return fileIconCache[uri] || '';
-};
-
-const getVisibleProblems = (problems, fileIconCache, collapsedUris, focusedIndex, filterValue, minLineY = 0, maxLineY = Infinity, viewMode = List, showErrors = true, showWarnings = true, showInfos = true) => {
-  array(problems);
-  array(collapsedUris);
-  number(focusedIndex);
-  string(filterValue);
-  const visibleItems = [];
-  const filterValueLength = filterValue.length;
-  const effectiveCollapsedUris = viewMode === Table ? [] : collapsedUris;
-  const filtered = filterProblems(problems, effectiveCollapsedUris, filterValue, showErrors, showWarnings, showInfos);
-  const displayProblems = viewMode === Table ? filtered.filter(problem => problem.message) : filtered;
-  const finalLineY = Math.min(maxLineY, displayProblems.length);
-  for (let i = minLineY; i < finalLineY; i++) {
-    const problem = displayProblems[i];
-    visibleItems.push({
-      ...problem,
-      filterValueLength,
-      icon: getIcon(problem.uri, fileIconCache),
-      isActive: i === focusedIndex,
-      isEven: i % 2 === 0
-    });
+  if (problemCount === 0 && filterValue) {
+    return getNoResultsWithFilterVirtualDom();
   }
-  return visibleItems;
-};
-
-const getListIndex = (eventX, eventY, x, y, deltaY, itemHeight) => {
-  const relativeY = eventY - y + deltaY;
-  const index = Math.floor(relativeY / itemHeight);
-  return index;
-};
-
-const handleClickAt = (state, eventX, eventY) => {
-  const {
-    collapsedUris,
-    deltaY,
-    filterValue,
-    itemHeight,
-    problems,
-    showErrors,
-    showInfos,
-    showWarnings,
-    smallWidthBreakPoint,
-    viewMode,
-    width,
-    x,
-    y
-  } = state;
-
-  // TODO use functional focus rendering
-  // Focus.setFocus(FocusKey.Problems)
-  const problemCount = getVisibleProblemCount(problems, collapsedUris, filterValue, viewMode, showErrors, showWarnings, showInfos);
   if (problemCount === 0) {
-    return focusIndex(state, -1);
-  }
-  const listTopOffset = getListTopOffset(width, smallWidthBreakPoint, viewMode);
-  const index = getListIndex(eventX, eventY, x, y + listTopOffset, deltaY, itemHeight);
-  if (index < 0 || index >= problemCount) {
-    return focusIndex(state, -1);
-  }
-  return {
-    ...state,
-    focusedIndex: index
-  };
-};
-
-const handleProblemClick = async (state, eventX, eventY) => {
-  const newState = handleClickAt(state, eventX, eventY);
-  const {
-    focusedIndex
-  } = newState;
-  if (focusedIndex < 0) {
-    return newState;
-  }
-  const {
-    collapsedUris,
-    fileIconCache,
-    filterValue,
-    problems,
-    showErrors,
-    showInfos,
-    showWarnings,
-    viewMode
-  } = newState;
-  const visibleProblems = getVisibleProblems(problems, fileIconCache, collapsedUris, focusedIndex, filterValue, focusedIndex, focusedIndex + 1, viewMode, showErrors, showWarnings, showInfos);
-  const problem = visibleProblems[0];
-  if (!problem || problem.listItemType !== Item) {
-    return newState;
-  }
-  const {
-    columnIndex,
-    rowIndex,
-    targetUri,
-    uri
-  } = problem;
-  await openUri({
-    initialCursorPosition: {
-      columnIndex,
-      rowIndex
-    },
-    shouldFocus: true,
-    uri: targetUri || uri
-  });
-  return newState;
-};
-
-const handleScrollBarCaptureLost = state => {
-  return {
-    ...state,
-    scrollBarActive: false
-  };
-};
-
-const getNewDeltaYPercent = (height, scrollBarHeight, relativeY) => {
-  const halfScrollBarHeight = scrollBarHeight / 2;
-  if (relativeY <= halfScrollBarHeight) {
-    return {
-      handleOffset: Math.max(relativeY, 0),
-      percent: 0
-    };
+    return getProblemsNoProblemsFoundVirtualDom();
   }
-  if (relativeY <= height - halfScrollBarHeight) {
-    return {
-      handleOffset: halfScrollBarHeight,
-      percent: (relativeY - halfScrollBarHeight) / (height - scrollBarHeight)
-    };
+  if (viewMode === Table) {
+    return getProblemsTableVirtualDom(problems);
   }
-  return {
-    handleOffset: Math.min(scrollBarHeight - height + relativeY, scrollBarHeight),
-    percent: 1
-  };
+  return getProblemsListVirtualDom(problems, workspaceUri);
 };
 
-const getScrollBarTop = (height, finalDeltaY, deltaY, scrollBarHeight) => {
-  if (finalDeltaY <= 0 || !Number.isFinite(finalDeltaY)) {
-    return 0;
+const scrollBarNode = {
+  childCount: 1,
+  className: mergeClassNames(ScrollBar, ScrollBarSmall),
+  onPointerDown: HandleScrollBarPointerDown,
+  type: Div
+};
+const getScrollBarVirtualDom = (scrollBarHeight, scrollBarActive) => {
+  if (scrollBarHeight <= 0) {
+    return [];
   }
-  const scrollBarTop = Math.round(deltaY / finalDeltaY * (height - scrollBarHeight));
-  return Number.isFinite(scrollBarTop) ? scrollBarTop : 0;
+  return [scrollBarNode, {
+    childCount: 0,
+    className: mergeClassNames(ScrollBarThumb, scrollBarActive ? ScrollBarThumbActive : ''),
+    type: Div
+  }];
 };
 
-const setDeltaY = (state, deltaY) => {
-  return updateVirtualList(state, deltaY);
+const Focusable = 0;
+
+const getProblemsVirtualDom = (viewMode, problems, filterValue, isSmall, message, scrollBarHeight = 0, scrollBarActive = false, problemCount = problems.length, workspaceUri = '') => {
+  const baseDom = {
+    childCount: isSmall ? 2 : 1,
+    className: mergeClassNames(Viewlet, Problems),
+    onBlur: HandleBlur,
+    onContextMenu: HandleContextMenu,
+    onWheel: HandleWheel,
+    tabIndex: Focusable,
+    type: Div
+  };
+  const filterDom = isSmall ? getProblemsFilterVirtualDom({
+    badgeText: '',
+    command: HandleFilterInput,
+    name: ProblemsInput,
+    placeholder: filter(),
+    value: filterValue
+  }) : [];
+  const itemsDom = getProblemsVirtualDom$1(viewMode, problems, filterValue, message, problemCount, workspaceUri);
+  const scrollBarDom = getScrollBarVirtualDom(scrollBarHeight, scrollBarActive);
+  const contentClassName = viewMode === Table ? mergeClassNames(ProblemsContent, ProblemsContentTable) : ProblemsContent;
+  const contentDom = {
+    childCount: scrollBarDom.length > 0 ? 2 : 1,
+    className: contentClassName,
+    type: Div
+  };
+  return [baseDom, ...filterDom, contentDom, ...itemsDom, ...scrollBarDom];
 };
 
-const handleScrollBarClick = (state, eventY) => {
-  const {
-    deltaY,
-    finalDeltaY,
-    height,
-    scrollBarHeight,
-    smallWidthBreakPoint,
-    viewMode,
-    width,
-    y
-  } = state;
-  const listTopOffset = getListTopOffset(width, smallWidthBreakPoint, viewMode);
-  const listHeight = getListHeight(height, width, smallWidthBreakPoint, viewMode);
-  const relativeY = eventY - y - listTopOffset;
-  const scrollBarTop = getScrollBarTop(listHeight, finalDeltaY, deltaY, scrollBarHeight);
-  const offsetInThumb = relativeY - scrollBarTop;
-  if (offsetInThumb >= 0 && offsetInThumb < scrollBarHeight) {
-    return {
-      ...state,
-      handleOffset: offsetInThumb,
-      scrollBarActive: true
-    };
+const getIcon = (uri, fileIconCache) => {
+  if (!uri) {
+    return '';
   }
-  const {
-    handleOffset,
-    percent
-  } = getNewDeltaYPercent(listHeight, scrollBarHeight, relativeY);
-  return {
-    ...setDeltaY(state, percent * finalDeltaY),
-    handleOffset,
-    scrollBarActive: true
-  };
+  return fileIconCache[uri] || '';
 };
 
-const handleScrollBarMove = (state, eventY) => {
+const getVisibleProblems = (problems, fileIconCache, collapsedUris, focusedIndex, filterValue, minLineY = 0, maxLineY = Infinity, viewMode = List, showErrors = true, showWarnings = true, showInfos = true) => {
+  array(problems);
+  array(collapsedUris);
+  number(focusedIndex);
+  string(filterValue);
+  const visibleItems = [];
+  const filterValueLength = filterValue.length;
+  const effectiveCollapsedUris = viewMode === Table ? [] : collapsedUris;
+  const filtered = filterProblems(problems, effectiveCollapsedUris, filterValue, showErrors, showWarnings, showInfos);
+  const displayProblems = viewMode === Table ? filtered.filter(problem => problem.message) : filtered;
+  const finalLineY = Math.min(maxLineY, displayProblems.length);
+  for (let i = minLineY; i < finalLineY; i++) {
+    const problem = displayProblems[i];
+    visibleItems.push({
+      ...problem,
+      filterValueLength,
+      icon: getIcon(problem.uri, fileIconCache),
+      isActive: i === focusedIndex,
+      isEven: i % 2 === 0
+    });
+  }
+  return visibleItems;
+};
+
+const getComponentDom = state => {
   const {
-    finalDeltaY,
-    handleOffset,
-    height,
+    collapsedUris,
+    fileIconCache,
+    filterValue,
+    focusedIndex,
+    maxLineY,
+    message,
+    minLineY,
+    problems,
     scrollBarActive,
     scrollBarHeight,
+    showErrors,
+    showInfos,
+    showWarnings,
     smallWidthBreakPoint,
     viewMode,
     width,
-    y
+    workspaceUri
   } = state;
-  if (!scrollBarActive) {
-    return state;
-  }
-  const listTopOffset = getListTopOffset(width, smallWidthBreakPoint, viewMode);
-  const listHeight = getListHeight(height, width, smallWidthBreakPoint, viewMode);
-  const availableTrackHeight = listHeight - scrollBarHeight;
-  const relativeY = eventY - y - listTopOffset - handleOffset;
-  const percent = availableTrackHeight <= 0 ? 0 : relativeY / availableTrackHeight;
-  return setDeltaY(state, percent * finalDeltaY);
+  const problemCount = getVisibleProblemCount(problems, collapsedUris, filterValue, viewMode, showErrors, showWarnings, showInfos);
+  const visible = getVisibleProblems(problems, fileIconCache, collapsedUris, focusedIndex, filterValue, minLineY, maxLineY, viewMode, showErrors, showWarnings, showInfos);
+  return getProblemsVirtualDom(viewMode, visible, filterValue, width <= smallWidthBreakPoint, message, scrollBarHeight, scrollBarActive, problemCount, workspaceUri);
 };
 
-const handleWheel = (state, deltaMode, deltaY) => {
+const getComponentState = uid => {
+  return get(uid).newState;
+};
+
+const FocusProblems = 19;
+
+const getKeyBindings = () => {
+  return [{
+    command: 'Problems.focusNext',
+    key: DownArrow,
+    when: FocusProblems
+  }, {
+    command: 'Problems.focusPrevious',
+    key: UpArrow,
+    when: FocusProblems
+  }, {
+    command: 'Problems.focusFirst',
+    key: Home,
+    when: FocusProblems
+  }, {
+    command: 'Problems.focusFirst',
+    key: PageUp,
+    when: FocusProblems
+  }, {
+    command: 'Problems.focusLast',
+    key: PageDown,
+    when: FocusProblems
+  }, {
+    command: 'Problems.focusLast',
+    key: End,
+    when: FocusProblems
+  }, {
+    command: 'Problems.selectCurrent',
+    key: Space,
+    when: FocusProblems
+  }, {
+    command: 'Problems.focusFirst',
+    key: Home,
+    when: FocusProblems
+  }, {
+    command: 'Problems.focusLast',
+    key: End,
+    when: FocusProblems
+  }, {
+    command: 'Problems.handleArrowLeft',
+    key: LeftArrow,
+    when: FocusProblems
+  }, {
+    command: 'Problems.handleArrowRight',
+    key: RightArrow,
+    when: FocusProblems
+  }];
+};
+
+const getMenuEntriesFilter = state => {
   const {
-    deltaY: currentDeltaY
+    showErrors: showErrors$1,
+    showInfos: showInfos$1,
+    showWarnings: showWarnings$1
   } = state;
-  return setDeltaY(state, currentDeltaY + deltaY);
+  return [{
+    command: 'Problems.toggleShowErrors',
+    flags: showErrors$1 ? Checked : Unchecked,
+    id: 'show-errors',
+    label: showErrors()
+  }, {
+    command: 'Problems.toggleShowWarnings',
+    flags: showWarnings$1 ? Checked : Unchecked,
+    id: 'show-warnings',
+    label: showWarnings()
+  }, {
+    command: 'Problems.toggleShowInfos',
+    flags: showInfos$1 ? Checked : Unchecked,
+    id: 'show-infos',
+    label: showInfos()
+  }];
 };
 
-const handleWorkspaceChange = (state, newWorkspaceUri) => {
+const getMenuEntries2 = (state, props) => {
   const {
-    workspaceUri
-  } = state;
-  if (newWorkspaceUri === workspaceUri) {
-    return state;
-  }
-  return {
-    ...state,
-    activeUri: '',
-    collapsedUris: [],
-    deltaY: 0,
-    fileIconCache: {},
-    filteredProblems: [],
-    finalDeltaY: 0,
-    focusedIndex: -2,
-    handleOffset: 0,
-    listItems: [],
-    maxLineY: 0,
-    message: getMessage(0),
-    minLineY: 0,
-    problems: [],
-    scrollBarActive: false,
-    scrollBarHeight: 0,
-    workspaceUri: newWorkspaceUri
-  };
+    menuId
+  } = props;
+  switch (menuId) {
+    case ProblemsFilter$1:
+      return getMenuEntriesFilter(state);
+    default:
+      return [];
+  }
 };
 
-const getActiveUri = async () => {
-  const editorId = await getActiveEditorId();
-  if (editorId === -1) {
-    return '';
-  }
+const getMenuIds = () => {
+  return [ProblemsFilter$1];
+};
+
+const countByType = (diagnostics, type) => {
+  return diagnostics.filter(diagnostic => diagnostic.type === type).length;
+};
+
+const Error$1 = 'error';
+const Warning = 'warning';
+
+const getDiagnostics = editorId => {
+  return invoke$3('Editor.getDiagnostics', editorId);
+};
+
+const getActiveDiagnostics = async editorId => {
   try {
-    return await getUri(editorId);
+    return await getDiagnostics(editorId);
   } catch {
-    return '';
+    return [];
   }
 };
 
-const hasProperty = (value, key) => {
-  return typeof value === 'object' && value !== null && key in value;
+const getDiagnosticKey = diagnostic => JSON.stringify([diagnostic.uri, diagnostic.rowIndex, diagnostic.columnIndex, diagnostic.message, diagnostic.source, diagnostic.type, diagnostic.code]);
+
+const getUniqueDiagnostics = diagnostics => {
+  const keys = new Set();
+  return diagnostics.filter(diagnostic => {
+    const key = getDiagnosticKey(diagnostic);
+    if (keys.has(key)) {
+      return false;
+    }
+    keys.add(key);
+    return true;
+  });
 };
 
-const isString = value => {
-  return typeof value === 'string';
+const getProblemsSummary = async () => {
+  const editorId = await getActiveEditorId();
+  if (editorId === -1) {
+    return {
+      errorCount: 0,
+      hasEditor: false,
+      problemCount: 0,
+      warningCount: 0
+    };
+  }
+  const [allDiagnostics, activeDiagnostics] = await Promise.all([getProblems$1(), getActiveDiagnostics(editorId)]);
+  const uniqueDiagnostics = getUniqueDiagnostics(allDiagnostics);
+  const uniqueActiveDiagnostics = getUniqueDiagnostics(activeDiagnostics);
+  return {
+    errorCount: countByType(uniqueActiveDiagnostics, Error$1),
+    hasEditor: true,
+    problemCount: uniqueDiagnostics.length,
+    warningCount: countByType(uniqueActiveDiagnostics, Warning)
+  };
 };
 
-const getSavedCollapsedUris = savedState => {
-  if (!hasProperty(savedState, 'collapsedUris')) {
-    return [];
+const getMissingRequests = (problems, fileIconCache) => {
+  const missingRequests = [];
+  const pendingUris = new Set();
+  for (const problem of problems) {
+    const {
+      fileName,
+      uri
+    } = problem;
+    if (!uri || uri in fileIconCache || pendingUris.has(uri)) {
+      continue;
+    }
+    pendingUris.add(uri);
+    missingRequests.push({
+      name: fileName,
+      uri
+    });
   }
-  const {
-    collapsedUris
-  } = savedState;
-  if (Array.isArray(collapsedUris) && collapsedUris.every(isString)) {
-    return [...new Set(collapsedUris)];
+  return missingRequests;
+};
+const requestFileIcon = name => {
+  if (!name) {
+    return Promise.resolve('');
   }
-  return [];
+  return getFileIcon({
+    name
+  });
 };
-
-const getSavedFilterValue = savedState => {
-  if (hasProperty(savedState, 'filterValue') && isString(savedState.filterValue)) {
-    return savedState.filterValue;
+const getFileIcons = async (problems, fileIconCache) => {
+  const missingRequests = getMissingRequests(problems, fileIconCache);
+  if (missingRequests.length === 0) {
+    return fileIconCache;
   }
-  return '';
+  const icons = await Promise.all(missingRequests.map(request => requestFileIcon(request.name)));
+  const newFileIconCache = {
+    ...fileIconCache
+  };
+  for (let i = 0; i < missingRequests.length; i++) {
+    newFileIconCache[missingRequests[i].uri] = icons[i];
+  }
+  return newFileIconCache;
 };
 
-const isNumber = value => {
-  return typeof value === 'number';
+const getProblemType = type => {
+  switch (type) {
+    case Error$1:
+      return Error$2;
+    case Warning:
+      return Warning$1;
+    case 'info':
+      return Info;
+    case 'spelling':
+      return Spelling;
+    default:
+      return type ? Other : Error$2;
+  }
 };
 
-const getSavedViewMode = savedState => {
-  if (hasProperty(savedState, 'viewMode') && isNumber(savedState.viewMode)) {
-    return savedState.viewMode;
+const toProblem = (diagnostic, index) => {
+  const {
+    code,
+    columnIndex,
+    message,
+    rowIndex,
+    source,
+    type,
+    uri
+  } = diagnostic;
+  return {
+    code: code || '',
+    columnIndex: columnIndex || 0,
+    count: 0,
+    fileName: '',
+    level: 2,
+    listItemType: Item,
+    message: message || '',
+    posInSet: index,
+    rowIndex: rowIndex || 0,
+    setSize: 1,
+    source: source || '',
+    type: getProblemType(type),
+    uri
+  };
+};
+const getFileName = uri => {
+  const slashIndex = uri.lastIndexOf('/');
+  return uri.slice(slashIndex + 1);
+};
+const toRelatedProblem = (relatedInformation, diagnostic, index, setSize) => {
+  return {
+    code: '',
+    columnIndex: relatedInformation.columnIndex || 0,
+    count: 0,
+    fileName: '',
+    level: 3,
+    listItemType: Item,
+    message: relatedInformation.message || '',
+    posInSet: index,
+    rowIndex: relatedInformation.rowIndex || 0,
+    setSize,
+    source: getFileName(relatedInformation.uri),
+    targetUri: relatedInformation.uri,
+    type: getProblemType(diagnostic.type),
+    uri: diagnostic.uri
+  };
+};
+const toProblems = diagnostics => {
+  const problems = [];
+  let problem = {
+    code: '',
+    columnIndex: 0,
+    count: 0,
+    fileName: '',
+    level: 0,
+    listItemType: 0,
+    message: '',
+    posInSet: 0,
+    rowIndex: 0,
+    setSize: 0,
+    source: '',
+    type: None,
+    uri: ''
+  };
+  let relativeIndex = 0;
+  for (const diagnostic of diagnostics) {
+    if (diagnostic.uri === problem.uri) {
+      relativeIndex++;
+      problem.count++;
+    } else {
+      relativeIndex = 1;
+      problem = {
+        code: '',
+        columnIndex: 0,
+        count: 1,
+        fileName: '',
+        level: 1,
+        listItemType: Expanded,
+        message: '',
+        posInSet: relativeIndex,
+        rowIndex: 0,
+        setSize: 123,
+        source: '',
+        type: None,
+        uri: diagnostic.uri
+      };
+      problems.push(problem);
+    }
+    problems.push(toProblem(diagnostic, relativeIndex));
+    const relatedInformation = diagnostic.relatedInformation || [];
+    for (let i = 0; i < relatedInformation.length; i++) {
+      problems.push(toRelatedProblem(relatedInformation[i], diagnostic, i + 1, relatedInformation.length));
+    }
   }
-  return List;
+  for (const problem of problems) {
+    const displayUri = problem.targetUri || problem.uri;
+    problem.fileName = getFileName(displayUri);
+  }
+  return problems;
 };
 
-const getWorkspaceUri = () => {
-  return invoke$1('Workspace.getUri');
+const getProblems = async activeUri => {
+  if (!activeUri) {
+    return {
+      error: '',
+      problems: []
+    };
+  }
+  try {
+    const diagnostics = getUniqueDiagnostics(await getProblems$1());
+    const problems = toProblems(diagnostics);
+    return {
+      error: '',
+      problems
+    };
+  } catch (error) {
+    return {
+      error: String(error),
+      problems: []
+    };
+  }
 };
 
-const loadContent = async (state, savedState) => {
+const refreshProblems = async (state, activeUri) => {
   const {
-    fileIconCache: oldFileIconCache
+    fileIconCache
   } = state;
-  const [activeUri, workspaceUri] = await Promise.all([getActiveUri(), getWorkspaceUri()]);
   const {
     error,
     problems
   } = await getProblems(activeUri);
-  if (error) {
-    return {
-      ...state,
-      activeUri,
-      filteredProblems: [],
-      message: error,
-      problems: [],
-      workspaceUri
-    };
-  }
-  const message = getMessage(problems.length);
-  const fileIconCache = await getFileIcons(problems, oldFileIconCache);
-  const viewMode = getSavedViewMode(savedState);
-  const filterValue = getSavedFilterValue(savedState);
-  const collapsedUris = getSavedCollapsedUris(savedState);
+  const newFileIconCache = await getFileIcons(problems, fileIconCache);
   return {
     ...state,
     activeUri,
-    collapsedUris,
-    fileIconCache,
+    fileIconCache: newFileIconCache,
     filteredProblems: problems,
-    filterValue,
     inputSource: Script,
     listItems: [],
-    message,
-    problems,
-    viewMode,
-    workspaceUri
+    message: error || getMessage(problems.length),
+    problems
   };
 };
-
-const getIndentRule = indent => {
-  return `.Indent-${indent} {
-  padding-left: ${indent};
-}`;
-};
-
-const defaultIndent = 1;
-const getTreeItemIndent = depth => {
-  return `${depth * defaultIndent}rem`;
+const handleActiveEditorChange = async (state, activeUri) => {
+  const {
+    activeUri: oldActiveUri
+  } = state;
+  if (activeUri === oldActiveUri) {
+    return state;
+  }
+  return refreshProblems(state, activeUri);
 };
-
-const getProblemIndent = (listItemType, level) => {
-  const isGroup = listItemType === Expanded || listItemType === Collapsed;
-  const depth = isGroup ? 1 : Math.max(2, level || 2);
-  return getTreeItemIndent(depth);
+const handleDiagnosticsChange = async (state, _uri) => {
+  const {
+    activeUri
+  } = state;
+  return refreshProblems(state, activeUri);
 };
 
-const getUniqueIndents = problems => {
-  const uniqueIndents = [];
-  for (const problem of problems) {
-    const indent = getProblemIndent(problem.listItemType, problem.level);
-    if (!uniqueIndents.includes(indent)) {
-      uniqueIndents.push(indent);
+const getArrowLeftNewFocusedIndex = (problems, collapsedUris, focusedIndex) => {
+  for (let i = focusedIndex; i >= 0; i--) {
+    const problem = problems[i];
+    if (problem.listItemType !== Item) {
+      return {
+        index: i,
+        newCollapsedUris: collapsedUris.includes(problem.uri) ? collapsedUris : [...collapsedUris, problem.uri]
+      };
     }
   }
-  return uniqueIndents;
+  return {
+    index: 0,
+    newCollapsedUris: collapsedUris
+  };
 };
-
-const renderCss = (oldState, newState) => {
+const handleArrowLeft = state => {
   const {
     collapsedUris,
-    deltaY,
-    fileIconCache,
-    filterValue,
-    finalDeltaY,
     focusedIndex,
-    height,
-    itemHeight,
-    maxLineY,
-    minLineY,
-    problems,
-    scrollBarHeight,
-    showErrors,
-    showInfos,
-    showWarnings,
-    smallWidthBreakPoint,
-    uid,
-    viewMode,
-    width
-  } = newState;
-  const visibleProblems = getVisibleProblems(problems, fileIconCache, collapsedUris, focusedIndex, filterValue, minLineY, maxLineY, viewMode, showErrors, showWarnings, showInfos);
-  const uniqueIndents = getUniqueIndents(visibleProblems);
-  const listHeight = getListHeight(height, width, smallWidthBreakPoint, viewMode);
-  const scrollBarTop = getScrollBarTop(listHeight, finalDeltaY, deltaY, scrollBarHeight);
-  const itemOffset = itemHeight > 0 ? -(deltaY % itemHeight) : 0;
-  const rules = [`.ProblemsTableRow {
-  height: ${itemHeight}px;
-}
-.Problems .ScrollBarThumb {
-  height: ${scrollBarHeight}px;
-  translate: 0 ${scrollBarTop}px;
-}
-.ProblemsList > .Problem:first-child,
-.ProblemsTableBody > .ProblemsTableRow:first-child {
-  margin-top: ${itemOffset}px;
-}`, ...uniqueIndents.map(getIndentRule)];
-  const css = rules.join('\n');
-  return [SetCss, uid, css];
-};
-
-const ProblemsInput = 'ProblemsInput';
-
-const renderFilterValue = (oldState, newState) => {
-  return ['Viewlet.setValueByName', newState.uid, ProblemsInput, newState.filterValue];
-};
-
-const Button = 1;
-const ProblemsFilter = 4;
-
-const Chevron = 'Chevron';
-const FileIcon = 'FileIcon';
-const Filter$1 = 'Filter';
-const FilterBadge = 'FilterBadge';
-const Highlight = 'Highlight';
-const IconButton = 'IconButton';
-const InputBox = 'InputBox';
-const Label = 'Label';
-const Actions = 'Actions';
-const LabelDetail = 'LabelDetail';
-const Message = 'Message';
-const MessageAction = 'MessageAction';
-const Problem = 'Problem';
-const ProblemAt = 'ProblemAt';
-const ProblemBadge = 'ProblemBadge';
-const ProblemLabel = 'ProblemLabel';
-const Problems = 'Problems';
-const ProblemsContent = 'ProblemsContent';
-const ProblemsContentTable = 'ProblemsContentTable';
-const ProblemSelected = 'ProblemSelected';
-const ProblemsErrorIcon = 'ProblemsErrorIcon';
-const ProblemsIcon = 'ProblemsIcon';
-const ProblemsList = 'ProblemsList';
-const ProblemsTable = 'ProblemsTable';
-const ProblemsTableBody = 'ProblemsTableBody';
-const ProblemsTableHeader = 'ProblemsTableHeader';
-const ProblemsTableRow = 'ProblemsTableRow';
-const ProblemsTableRowItem = 'ProblemsTableRowItem';
-const ProblemsTableRowOdd = 'ProblemsTableRowOdd';
-const ProblemsWarningIcon = 'ProblemsWarningIcon';
-const ScrollBar = 'ScrollBar';
-const ScrollBarSmall = 'ScrollBarSmall';
-const ScrollBarThumb = 'ScrollBarThumb';
-const ScrollBarThumbActive = 'ScrollBarThumbActive';
-const Viewlet = 'Viewlet';
-
-const HandleBlur = 1;
-const HandleClearFilterClick = 2;
-const HandleContextMenu = 3;
-const HandleFilterInput = 4;
-const HandlePointerDown = 5;
-const HandleClickMoreFilters = 6;
-const HandleWheel = 7;
-const HandleScrollBarMove = 8;
-const HandleScrollBarPointerCaptureLost = 9;
-const HandleScrollBarPointerDown = 10;
-const HandleCollapseAll = 11;
-const HandleViewAsList = 12;
-const HandleViewAsTable = 13;
-const HandleFileNameClick = 15;
-
-const getIconVirtualDom = (icon, type = Div) => {
-  return {
-    childCount: 0,
-    className: mergeClassNames('MaskIcon', `MaskIcon${icon}`),
-    role: None$2,
-    type
-  };
-};
-
-const getActionButtonVirtualDom = action => {
+    problems
+  } = state;
   const {
-    command,
-    icon,
-    id,
-    name
-  } = action;
-  return [{
-    childCount: 1,
-    className: IconButton,
-    name,
-    onClick: command,
-    title: id,
-    type: Button$1
-  }, getIconVirtualDom(String(icon))];
-};
-
-const filterBadgeNode = {
-  childCount: 1,
-  className: FilterBadge,
-  type: Div
-};
-const getFilterBadgeDom = badgeText => {
-  if (!badgeText) {
-    return [];
-  }
-  return [filterBadgeNode, text(badgeText)];
-};
-
-const getInputBoxVirtualDom = (name, onInput, placeholder, value) => {
+    index,
+    newCollapsedUris
+  } = getArrowLeftNewFocusedIndex(problems, collapsedUris, focusedIndex);
   return {
-    ariaLabel: placeholder,
-    autocapitalize: 'off',
-    autocorrect: 'off',
-    childCount: 0,
-    className: InputBox,
-    name,
-    onInput,
-    placeholder,
-    spellcheck: false,
-    type: Input,
-    ...(value && {
-      value
-    })
+    ...state,
+    collapsedUris: newCollapsedUris,
+    focusedIndex: index
   };
 };
 
-const CollapseAll = 'CollapseAll';
-const Filter = 'Filter';
-const ListFlat = 'ListFlat';
-const ListTree = 'ListTree';
-
-const getChildCount = badgeText => {
-  let childCount = 0;
-  childCount++; // input
-  if (badgeText) {
-    childCount++; // badge
-  }
-  childCount++; // action button
-  return childCount;
-};
-const getProblemsFilterVirtualDom = action => {
-  return [{
-    childCount: getChildCount(action.badgeText),
-    className: Filter$1,
-    type: Div
-  }, getInputBoxVirtualDom(action.name || ProblemsInput, action.command, action.placeholder || '', action.value), ...getFilterBadgeDom(action.badgeText), ...getActionButtonVirtualDom({
-    command: HandleClickMoreFilters,
-    icon: Filter,
-    id: moreFilters(),
-    name: 'more filters'
-  })];
-};
-
-const messageNode$2 = {
-  childCount: 3,
-  className: Message,
-  type: Div
+const getArrowRightNewFocusedIndex = (problems, collapsedUris, focusedIndex) => {
+  const problem = problems[focusedIndex];
+  const newCollapsedUris = collapsedUris.includes(problem.uri) ? collapsedUris.filter(uri => uri !== problem.uri) : collapsedUris;
+  return {
+    index: focusedIndex,
+    newCollapsedUris
+  };
 };
-const spanNode = {
-  childCount: 1,
-  type: Span
+
+const handleArrowRight = state => {
+  const {
+    collapsedUris,
+    focusedIndex,
+    problems
+  } = state;
+  const {
+    index,
+    newCollapsedUris
+  } = getArrowRightNewFocusedIndex(problems, collapsedUris, focusedIndex);
+  return {
+    ...state,
+    collapsedUris: newCollapsedUris,
+    focusedIndex: index
+  };
 };
-const clearFilterNode = {
-  childCount: 1,
-  className: MessageAction,
-  onClick: HandleClearFilterClick,
-  type: A
+
+const handleBlur = state => {
+  return {
+    ...state,
+    focusedIndex: -2
+  };
 };
-const getNoResultsWithFilterVirtualDom = () => {
-  return [messageNode$2, spanNode, text(noResultsFoundWithProvidedFilterCriteria()), clearFilterNode, text(clearFilter()), text('.')];
+
+const show2 = async (uid, menuId, x, y, args) => {
+  await showContextMenu2(uid, menuId, x, y, args);
 };
 
-const getBadgeVirtualDom = (className, count) => {
-  return [{
-    childCount: 1,
-    className: mergeClassNames('Badge', className) + (''),
-    type: Div
-  }, text(String(count))];
+const handleClickMoreFilters = async (state, eventX, eventY) => {
+  const {
+    uid
+  } = state;
+  await show2(uid, ProblemsFilter$1, eventX, eventY, {
+    menuId: ProblemsFilter$1
+  });
+  return state;
 };
 
-const getChevronDownVirtualDom = (extraClassName = '') => {
+const iconColumnWidth = 30;
+
+const handleColumnResizeStart = (state, name, clientX, tableWidth) => {
+  const {
+    columnWidths,
+    width
+  } = state;
+  const column = Number(name);
+  if (!Number.isSafeInteger(column) || column < 1 || column > 3) {
+    return state;
+  }
   return {
-    childCount: 0,
-    className: mergeClassNames(Chevron, 'MaskIconChevronDown', extraClassName) + (extraClassName === '' ? ' ' : ''),
-    type: Div
+    ...state,
+    resizeStartWidth: tableWidth ?? width,
+    resizeStartWidths: columnWidths,
+    resizeStartX: clientX,
+    resizingColumn: column
   };
 };
-const getChevronRightVirtualDom = (extraClassName = '') => {
+const handleColumnResizeMove = (state, clientX) => {
+  const {
+    resizeStartWidth,
+    resizeStartWidths,
+    resizeStartX,
+    resizingColumn
+  } = state;
+  const availableWidth = resizeStartWidth - iconColumnWidth;
+  if (!resizingColumn || availableWidth <= 0) {
+    return state;
+  }
+  const index = resizingColumn - 1;
+  const left = resizeStartWidths[index];
+  const right = resizeStartWidths[index + 1];
+  const minimum = Math.min(40 / availableWidth, left, right);
+  const delta = Math.max(minimum - left, Math.min(right - minimum, (clientX - resizeStartX) / availableWidth));
+  const columnWidths = [...resizeStartWidths];
+  columnWidths[index] = left + delta;
+  columnWidths[index + 1] = right - delta;
   return {
-    childCount: 0,
-    className: mergeClassNames(Chevron, 'MaskIconChevronRight', extraClassName) + (extraClassName === '' ? ' ' : ''),
-    type: Div
+    ...state,
+    columnWidths
+  };
+};
+const handleColumnResizeEnd = state => {
+  return {
+    ...state,
+    resizingColumn: 0
   };
 };
 
-const getFileIconVirtualDom = icon => {
+const handleContextMenu = async (state, eventX, eventY) => {
+  const {
+    uid
+  } = state;
+  await show2(uid, ProblemsFilter$1, eventX, eventY, {
+    menuId: ProblemsFilter$1
+  });
+  return state;
+};
+
+const handleFilterInput = (state, value, inputSource = Script) => {
   return {
-    alt: '',
-    childCount: 0,
-    className: FileIcon,
-    role: None$2,
-    src: icon,
-    type: Img
+    ...state,
+    filterValue: value,
+    inputSource
   };
 };
 
-const getProblemClassName = (listItemType, level, isActive) => {
-  let className = Problem;
-  const indent = getProblemIndent(listItemType, level);
-  className = mergeClassNames(className, `Indent-${indent}`);
-  if (isActive) {
-    className = mergeClassNames(className, ProblemSelected);
-  }
-  return className;
+const handleIconThemeChange = async state => {
+  const {
+    problems
+  } = state;
+  const fileIconCache = await getFileIcons(problems, {});
+  return {
+    ...state,
+    fileIconCache
+  };
 };
 
-const warningIconNode = {
-  childCount: 0,
-  className: mergeClassNames(ProblemsIcon, ProblemsWarningIcon),
-  type: Div
+const state = {
+  connected: false
 };
-const errorIconNode = {
-  childCount: 0,
-  className: mergeClassNames(ProblemsIcon, ProblemsErrorIcon),
-  type: Div
+const isConnected = () => {
+  const {
+    connected
+  } = state;
+  return connected;
 };
-const getProblemsIconVirtualDom = type => {
-  if (type === Warning$1) {
-    return warningIconNode;
+const invoke = (method, ...params) => {
+  return invoke$2(method, ...params);
+};
+const set = rpc => {
+  set$4(rpc);
+  state.connected = true;
+};
+
+const handleMessagePort = async (port, viewletCommandMap, setAsRendererProcess = true) => {
+  const executeViewletCommand = async (uid, command, ...args) => {
+    const fn = viewletCommandMap[`Problems.${command}`];
+    if (typeof fn !== 'function') {
+      throw new TypeError(`Viewlet command not found: ${command}`);
+    }
+    await fn(uid, ...args);
+    await invoke$1('Viewlet.requestRender', uid);
+  };
+  const rpc = await create$5({
+    commandMap: {
+      'Viewlet.executeViewletCommand': executeViewletCommand
+    },
+    messagePort: port
+  });
+  if (setAsRendererProcess) {
+    set(rpc);
   }
-  return errorIconNode;
 };
 
-// TODO compute detail message in getVisibleProblems
-const getProblemSourceDetail = (source, code) => {
-  let message = '';
-  if (source) {
-    message += source;
+const getListIndex = (eventX, eventY, x, y, deltaY, itemHeight) => {
+  const relativeY = eventY - y + deltaY;
+  const index = Math.floor(relativeY / itemHeight);
+  return index;
+};
+
+const handleClickAt = (state, eventX, eventY) => {
+  const {
+    collapsedUris,
+    deltaY,
+    filterValue,
+    itemHeight,
+    problems,
+    showErrors,
+    showInfos,
+    showWarnings,
+    smallWidthBreakPoint,
+    viewMode,
+    width,
+    x,
+    y
+  } = state;
+  const problemCount = getVisibleProblemCount(problems, collapsedUris, filterValue, viewMode, showErrors, showWarnings, showInfos);
+  if (problemCount === 0) {
+    return focusIndex(state, -1);
   }
-  if (code) {
-    message += `(${code})`;
+  const listTopOffset = getListTopOffset(width, smallWidthBreakPoint, viewMode);
+  const index = getListIndex(eventX, eventY, x, y + listTopOffset, deltaY, itemHeight);
+  if (index < 0 || index >= problemCount) {
+    return focusIndex(state, -1);
   }
-  message += ' ';
-  return message;
+  return {
+    ...state,
+    focusedIndex: index
+  };
 };
 
-const leadingSlashesRegex = /^\/+/;
-const trailingSlashRegex = /\/$/;
-const schemeRootRegex = /^[a-z][a-z\d+.-]*:\/\/$/i;
-const windowsDrivePathRegex = /^\/[a-z]:\//i;
-const normalizeFileUri = uri => {
-  const normalizedUri = uri.startsWith('file://') ? uri.slice('file://'.length) : uri;
-  return windowsDrivePathRegex.test(normalizedUri) ? normalizedUri.slice(1) : normalizedUri;
+const toggleFileGroup = (state, uri) => {
+  const {
+    collapsedUris
+  } = state;
+  const newCollapsedUris = collapsedUris.includes(uri) ? collapsedUris.filter(collapsedUri => collapsedUri !== uri) : [...collapsedUris, uri];
+  return {
+    ...state,
+    collapsedUris: newCollapsedUris
+  };
 };
-const getRelativeParentUri = (uri, workspaceUri) => {
-  const normalizedUri = normalizeFileUri(uri);
-  const normalizedWorkspaceUri = normalizeFileUri(workspaceUri).replace(trailingSlashRegex, '');
-  const slashIndex = normalizedUri.lastIndexOf('/');
-  if (slashIndex === -1) {
-    return '';
-  }
-  const parentUri = normalizedUri.slice(0, slashIndex);
-  if (schemeRootRegex.test(parentUri)) {
-    return '';
+
+const handleProblemClick = async (state, eventX, eventY) => {
+  const newState = handleClickAt(state, eventX, eventY);
+  const {
+    focusedIndex
+  } = newState;
+  if (focusedIndex < 0) {
+    return newState;
   }
-  if (parentUri === normalizedWorkspaceUri) {
-    return '';
+  const {
+    collapsedUris,
+    fileIconCache,
+    filterValue,
+    problems,
+    showErrors,
+    showInfos,
+    showWarnings,
+    viewMode
+  } = newState;
+  const visibleProblems = getVisibleProblems(problems, fileIconCache, collapsedUris, focusedIndex, filterValue, focusedIndex, focusedIndex + 1, viewMode, showErrors, showWarnings, showInfos);
+  const problem = visibleProblems[0];
+  if (!problem) {
+    return newState;
   }
-  if (normalizedWorkspaceUri && parentUri.startsWith(`${normalizedWorkspaceUri}/`)) {
-    return parentUri.slice(normalizedWorkspaceUri.length + 1);
+  if (problem.listItemType !== Item) {
+    return updateVirtualList(toggleFileGroup(newState, problem.uri));
   }
-  return parentUri.replace(leadingSlashesRegex, '');
-};
-
-const labelNode = {
-  childCount: 1,
-  className: Label,
-  type: Span
-};
-const labelDetailNode = {
-  childCount: 1,
-  className: LabelDetail,
-  type: Div
-};
-const highlightNode = {
-  childCount: 1,
-  className: Highlight,
-  type: Div
-};
-const problemAtNode = {
-  childCount: 2,
-  className: ProblemAt,
-  type: Span
-};
-const getProblemVirtualDom = (problem, workspaceUri = '') => {
   const {
-    code,
     columnIndex,
-    fileName,
-    filterValueLength,
-    icon,
-    isActive,
-    isCollapsed,
-    level,
-    listItemType,
-    message,
-    messageMatchIndex,
-    posInSet,
     rowIndex,
-    setSize,
-    source,
-    type,
+    targetUri,
     uri
   } = problem;
-  const className = getProblemClassName(listItemType, level, isActive);
-  if (listItemType === Expanded || listItemType === Collapsed) {
-    const fileIconDom = icon ? [getFileIconVirtualDom(icon)] : [];
-    return [{
-      ariaExpanded: !isCollapsed,
-      ariaLevel: level,
-      ariaPosInSet: posInSet,
-      ariaSelected: isActive,
-      ariaSetSize: setSize,
-      childCount: 4 + fileIconDom.length,
-      className,
-      role: TreeItem,
-      type: Div
-    }, listItemType === Collapsed ? getChevronRightVirtualDom() : getChevronDownVirtualDom(), ...fileIconDom, {
-      ...labelNode,
-      'data-uri': uri,
-      onClick: HandleFileNameClick
-    }, text(fileName), labelDetailNode, text(getRelativeParentUri(uri, workspaceUri)), ...getBadgeVirtualDom(ProblemBadge, problem.count)];
-  }
-  const lineColumn = atLineColumn(rowIndex + 1, columnIndex + 1);
-  const label = {
-    childCount: 1,
-    className: ProblemLabel,
-    type: Div
-  };
-  const dom = [{
-    ariaLevel: level,
-    ariaPosInSet: posInSet,
-    ariaSelected: isActive,
-    ariaSetSize: setSize,
-    childCount: 3,
-    className,
-    role: TreeItem,
-    type: Div
-  }, getProblemsIconVirtualDom(type), label];
-  if (filterValueLength && messageMatchIndex >= 0) {
-    const before = message.slice(0, messageMatchIndex);
-    const middle = message.slice(messageMatchIndex, messageMatchIndex + filterValueLength);
-    const after = message.slice(messageMatchIndex + filterValueLength);
-    label.childCount += 2;
-    dom.push(text(before), highlightNode, text(middle), text(after));
-  } else {
-    dom.push(text(message));
-  }
-  dom.push(problemAtNode, text(getProblemSourceDetail(source, code)), text(lineColumn));
-  return dom;
+  await openUri({
+    initialCursorPosition: {
+      columnIndex,
+      highlightProblem: true,
+      rowIndex
+    },
+    shouldFocus: false,
+    uri: targetUri || uri
+  });
+  return newState;
 };
 
-const getProblemsListVirtualDom = (problems, workspaceUri = '') => {
-  const dom = [{
-    ariaLabel: problemsTree(),
-    childCount: problems.length,
-    className: ProblemsList,
-    role: Tree,
-    type: Div
-  }, ...problems.flatMap(problem => getProblemVirtualDom(problem, workspaceUri))];
-  return dom;
+const handleScrollBarCaptureLost = state => {
+  return {
+    ...state,
+    scrollBarActive: false
+  };
 };
 
-const messageNode$1 = {
-  childCount: 1,
-  className: Message,
-  type: Div
+const getNewDeltaYPercent = (height, scrollBarHeight, relativeY) => {
+  const halfScrollBarHeight = scrollBarHeight / 2;
+  if (relativeY <= halfScrollBarHeight) {
+    return {
+      handleOffset: Math.max(relativeY, 0),
+      percent: 0
+    };
+  }
+  if (relativeY <= height - halfScrollBarHeight) {
+    return {
+      handleOffset: halfScrollBarHeight,
+      percent: (relativeY - halfScrollBarHeight) / (height - scrollBarHeight)
+    };
+  }
+  return {
+    handleOffset: Math.min(scrollBarHeight - height + relativeY, scrollBarHeight),
+    percent: 1
+  };
 };
-const getProblemsNoProblemsFoundVirtualDom = () => {
-  return [messageNode$1, text(noProblemsDetected())];
+
+const getScrollBarTop = (height, finalDeltaY, deltaY, scrollBarHeight) => {
+  if (finalDeltaY <= 0 || !Number.isFinite(finalDeltaY)) {
+    return 0;
+  }
+  const scrollBarTop = Math.round(deltaY / finalDeltaY * (height - scrollBarHeight));
+  return Number.isFinite(scrollBarTop) ? scrollBarTop : 0;
 };
 
-const rowItemNode$1 = {
-  childCount: 1,
-  className: ProblemsTableRowItem,
-  type: Div
+const setDeltaY = (state, deltaY) => {
+  return updateVirtualList(state, deltaY);
 };
-const getClassName = isEven => {
-  if (isEven) {
-    return ProblemsTableRow;
+
+const handleScrollBarClick = (state, eventY) => {
+  const {
+    deltaY,
+    finalDeltaY,
+    height,
+    scrollBarHeight,
+    smallWidthBreakPoint,
+    viewMode,
+    width,
+    y
+  } = state;
+  const listTopOffset = getListTopOffset(width, smallWidthBreakPoint, viewMode);
+  const listHeight = getListHeight(height, width, smallWidthBreakPoint, viewMode);
+  const relativeY = eventY - y - listTopOffset;
+  const scrollBarTop = getScrollBarTop(listHeight, finalDeltaY, deltaY, scrollBarHeight);
+  const offsetInThumb = relativeY - scrollBarTop;
+  if (offsetInThumb >= 0 && offsetInThumb < scrollBarHeight) {
+    return {
+      ...state,
+      handleOffset: offsetInThumb,
+      scrollBarActive: true
+    };
   }
-  return mergeClassNames(ProblemsTableRow, ProblemsTableRowOdd);
+  const {
+    handleOffset,
+    percent
+  } = getNewDeltaYPercent(listHeight, scrollBarHeight, relativeY);
+  return {
+    ...setDeltaY(state, percent * finalDeltaY),
+    handleOffset,
+    scrollBarActive: true
+  };
 };
-const getProblemsTableRowVirtualDom = problem => {
+
+const handleScrollBarMove = (state, eventY) => {
   const {
-    code,
-    isEven,
-    message,
-    source,
-    type,
-    uri
-  } = problem;
-  // TODO problems are grouped by uri, depending
-  // on which renderer is used the data needs to look different
-  if (!message) {
-    return [];
+    finalDeltaY,
+    handleOffset,
+    height,
+    scrollBarActive,
+    scrollBarHeight,
+    smallWidthBreakPoint,
+    viewMode,
+    width,
+    y
+  } = state;
+  if (!scrollBarActive) {
+    return state;
   }
-  const dom = [{
-    childCount: 5,
-    className: getClassName(isEven),
-    type: Div
-  }, rowItemNode$1, getProblemsIconVirtualDom(type), rowItemNode$1, text(getProblemSourceDetail(source, code)), rowItemNode$1, text(message), rowItemNode$1, text(uri), rowItemNode$1, text(source)];
-  return dom;
+  const listTopOffset = getListTopOffset(width, smallWidthBreakPoint, viewMode);
+  const listHeight = getListHeight(height, width, smallWidthBreakPoint, viewMode);
+  const availableTrackHeight = listHeight - scrollBarHeight;
+  const relativeY = eventY - y - listTopOffset - handleOffset;
+  const percent = availableTrackHeight <= 0 ? 0 : relativeY / availableTrackHeight;
+  return setDeltaY(state, percent * finalDeltaY);
 };
 
-const getProblemsTableBodyVirtualDom = problems => {
-  const dom = [{
-    childCount: problems.length,
-    className: ProblemsTableBody,
-    type: Div
-  }, ...problems.flatMap(getProblemsTableRowVirtualDom)];
-  return dom;
+const handleWheel = (state, deltaMode, deltaY) => {
+  const {
+    deltaY: currentDeltaY
+  } = state;
+  return setDeltaY(state, currentDeltaY + deltaY);
+};
+
+const handleWorkspaceChange = (state, newWorkspaceUri) => {
+  const {
+    workspaceUri
+  } = state;
+  if (newWorkspaceUri === workspaceUri) {
+    return state;
+  }
+  return {
+    ...state,
+    activeUri: '',
+    collapsedUris: [],
+    deltaY: 0,
+    fileIconCache: {},
+    filteredProblems: [],
+    finalDeltaY: 0,
+    focusedIndex: -2,
+    handleOffset: 0,
+    listItems: [],
+    maxLineY: 0,
+    message: getMessage(0),
+    minLineY: 0,
+    problems: [],
+    scrollBarActive: false,
+    scrollBarHeight: 0,
+    workspaceUri: newWorkspaceUri
+  };
 };
 
-const tableHeaderNode = {
-  childCount: 1,
-  className: ProblemsTableHeader,
-  type: Div
-};
-const tableRowNode = {
-  childCount: 5,
-  className: ProblemsTableRow,
-  type: Div
-};
-const emptyRowItemNode = {
-  childCount: 0,
-  className: ProblemsTableRowItem,
-  type: Div
-};
-const rowItemNode = {
-  childCount: 1,
-  className: ProblemsTableRowItem,
-  type: Div
-};
-const getProblemsTableHeaderVirtualDom = () => {
-  const textCode = code();
-  const textSource = source();
-  const textMessage = message();
-  const textFile = file();
-  const dom = [tableHeaderNode, tableRowNode, emptyRowItemNode, rowItemNode, text(textCode), rowItemNode, text(textMessage), rowItemNode, text(textFile), rowItemNode, text(textSource)];
-  return dom;
+const getActiveUri = async () => {
+  const editorId = await getActiveEditorId();
+  if (editorId === -1) {
+    return '';
+  }
+  try {
+    return await getUri(editorId);
+  } catch {
+    return '';
+  }
 };
 
-const tableNode = {
-  childCount: 2,
-  className: ProblemsTable,
-  type: Div
-};
-const getProblemsTableVirtualDom = problems => {
-  const dom = [tableNode, ...getProblemsTableHeaderVirtualDom(), ...getProblemsTableBodyVirtualDom(problems)];
-  return dom;
+const hasProperty = (value, key) => {
+  return typeof value === 'object' && value !== null && key in value;
 };
 
-const messageNode = {
-  childCount: 1,
-  className: Message,
-  type: Div
+const isString = value => {
+  return typeof value === 'string';
 };
-const getProblemsVirtualDom$1 = (viewMode, problems, filterValue, message, problemCount = problems.length, workspaceUri = '') => {
-  if (problemCount === 0 && message) {
-    return [messageNode, text(message)];
-  }
-  if (problemCount === 0 && filterValue) {
-    return getNoResultsWithFilterVirtualDom();
+
+const getSavedCollapsedUris = savedState => {
+  if (!hasProperty(savedState, 'collapsedUris')) {
+    return [];
   }
-  if (problemCount === 0) {
-    return getProblemsNoProblemsFoundVirtualDom();
+  const {
+    collapsedUris
+  } = savedState;
+  if (Array.isArray(collapsedUris) && collapsedUris.every(isString)) {
+    return [...new Set(collapsedUris)];
   }
-  if (viewMode === Table) {
-    return getProblemsTableVirtualDom(problems);
+  return [];
+};
+
+const getSavedFilterValue = savedState => {
+  if (hasProperty(savedState, 'filterValue') && isString(savedState.filterValue)) {
+    return savedState.filterValue;
   }
-  return getProblemsListVirtualDom(problems, workspaceUri);
+  return '';
 };
 
-const scrollBarNode = {
-  childCount: 1,
-  className: mergeClassNames(ScrollBar, ScrollBarSmall),
-  onPointerDown: HandleScrollBarPointerDown,
-  type: Div
+const isNumber = value => {
+  return typeof value === 'number';
 };
-const getScrollBarVirtualDom = (scrollBarHeight, scrollBarActive) => {
-  if (scrollBarHeight <= 0) {
-    return [];
+
+const getSavedViewMode = savedState => {
+  if (hasProperty(savedState, 'viewMode') && isNumber(savedState.viewMode)) {
+    return savedState.viewMode;
   }
-  return [scrollBarNode, {
-    childCount: 0,
-    className: mergeClassNames(ScrollBarThumb, scrollBarActive ? ScrollBarThumbActive : ''),
-    type: Div
-  }];
+  return List;
 };
 
-const Focusable = 0;
+const getWorkspaceUri = () => {
+  return invoke$1('Workspace.getUri');
+};
 
-const getProblemsVirtualDom = (viewMode, problems, filterValue, isSmall, message, scrollBarHeight = 0, scrollBarActive = false, problemCount = problems.length, workspaceUri = '') => {
-  const baseDom = {
-    childCount: isSmall ? 2 : 1,
-    className: mergeClassNames(Viewlet, Problems),
-    onBlur: HandleBlur,
-    onContextMenu: HandleContextMenu,
-    onPointerDown: HandlePointerDown,
-    onWheel: HandleWheel,
-    tabIndex: Focusable,
-    type: Div
-  };
-  const filterDom = isSmall ? getProblemsFilterVirtualDom({
-    badgeText: '',
-    command: HandleFilterInput,
-    name: ProblemsInput,
-    placeholder: filter(),
-    value: filterValue
-  }) : [];
-  const itemsDom = getProblemsVirtualDom$1(viewMode, problems, filterValue, message, problemCount, workspaceUri);
-  const scrollBarDom = getScrollBarVirtualDom(scrollBarHeight, scrollBarActive);
-  const contentClassName = viewMode === Table ? mergeClassNames(ProblemsContent, ProblemsContentTable) : ProblemsContent;
-  const contentDom = {
-    childCount: scrollBarDom.length > 0 ? 2 : 1,
-    className: contentClassName,
-    type: Div
+const loadContent = async (state, savedState) => {
+  const {
+    fileIconCache: oldFileIconCache
+  } = state;
+  const [activeUri, workspaceUri] = await Promise.all([getActiveUri(), getWorkspaceUri()]);
+  const {
+    error,
+    problems
+  } = await getProblems(activeUri);
+  if (error) {
+    return {
+      ...state,
+      activeUri,
+      filteredProblems: [],
+      message: error,
+      problems: [],
+      workspaceUri
+    };
+  }
+  const message = getMessage(problems.length);
+  const fileIconCache = await getFileIcons(problems, oldFileIconCache);
+  const viewMode = getSavedViewMode(savedState);
+  const filterValue = getSavedFilterValue(savedState);
+  const collapsedUris = getSavedCollapsedUris(savedState);
+  return {
+    ...state,
+    activeUri,
+    collapsedUris,
+    fileIconCache,
+    filteredProblems: problems,
+    filterValue,
+    inputSource: Script,
+    listItems: [],
+    message,
+    problems,
+    viewMode,
+    workspaceUri
   };
-  return [baseDom, ...filterDom, contentDom, ...itemsDom, ...scrollBarDom];
 };
 
-const renderItems = (oldState, newState) => {
+const getIndentRule = indent => {
+  return `.Indent-${indent} {
+  padding-left: ${indent};
+}`;
+};
+
+const getUniqueIndents = problems => {
+  const uniqueIndents = [];
+  for (const problem of problems) {
+    const indent = getProblemIndent(problem.listItemType, problem.level);
+    if (!uniqueIndents.includes(indent)) {
+      uniqueIndents.push(indent);
+    }
+  }
+  return uniqueIndents;
+};
+
+const renderCss = (oldState, newState) => {
   const {
     collapsedUris,
+    columnWidths,
+    deltaY,
     fileIconCache,
     filterValue,
+    finalDeltaY,
     focusedIndex,
+    height,
+    itemHeight,
     maxLineY,
-    message,
     minLineY,
     problems,
-    scrollBarActive,
     scrollBarHeight,
     showErrors,
     showInfos,
     showWarnings,
     smallWidthBreakPoint,
+    uid,
     viewMode,
-    width,
-    workspaceUri
+    width
   } = newState;
-  const problemCount = getVisibleProblemCount(problems, collapsedUris, filterValue, viewMode, showErrors, showWarnings, showInfos);
-  const visible = getVisibleProblems(problems, fileIconCache, collapsedUris, focusedIndex, filterValue, minLineY, maxLineY, viewMode, showErrors, showWarnings, showInfos);
-  const isSmall = width <= smallWidthBreakPoint;
-  const dom = getProblemsVirtualDom(viewMode, visible, filterValue, isSmall, message, scrollBarHeight, scrollBarActive, problemCount, workspaceUri);
-  return ['Viewlet.setDom2', newState.uid, dom];
+  const visibleProblems = getVisibleProblems(problems, fileIconCache, collapsedUris, focusedIndex, filterValue, minLineY, maxLineY, viewMode, showErrors, showWarnings, showInfos);
+  const uniqueIndents = getUniqueIndents(visibleProblems);
+  const listHeight = getListHeight(height, width, smallWidthBreakPoint, viewMode);
+  const scrollBarTop = getScrollBarTop(listHeight, finalDeltaY, deltaY, scrollBarHeight);
+  const itemOffset = itemHeight > 0 ? -(deltaY % itemHeight) : 0;
+  const widths = [`${iconColumnWidth}px`, ...columnWidths.map(fraction => `calc((100% - ${iconColumnWidth}px) * ${fraction})`)];
+  const dividerRules = [0, 1, 2, 3].map(index => {
+    const fraction = columnWidths.slice(0, index).reduce((sum, value) => sum + value, 0);
+    return `.Problems .ProblemsTableDivider${index} { left: calc(${iconColumnWidth}px + (100% - ${iconColumnWidth}px) * ${fraction}); }`;
+  });
+  const rules = [`.Problems:has(.ProblemsContentTable) {
+  display: flex;
+  flex-direction: column;
+}
+.Problems .ProblemsContentTable {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+  position: relative;
+}
+.Problems .ProblemsContentTable > .ScrollBar {
+  top: 22px;
+}
+.Problems .ProblemsTable {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  position: relative;
+  width: 100%;
+}
+.Problems .ProblemsTableRow {
+  display: grid;
+  grid-template-columns: ${widths.join(' ')};
+  gap: 0;
+  align-items: center;
+}
+.Problems .ProblemsTableHeader {
+  flex: none;
+  font-weight: 600;
+  border-bottom: 1px solid var(--TableColumnsBorder, var(--PanelBorder, #454545));
+  box-sizing: border-box;
+  height: 22px;
+  overflow: hidden;
+}
+.Problems .ProblemsTableHeader .ProblemsTableRow {
+  height: 21px;
+  cursor: default;
+  background: transparent;
+}
+.Problems .ProblemsTableBody {
+  overflow: hidden;
+  flex: 1;
+  min-height: 0;
+}
+.Problems .ProblemsTableRowItem {
+  box-sizing: border-box;
+  min-width: 0;
+  overflow: hidden;
+  padding: 0 10px;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.Problems .ProblemsTableRowItem:first-child {
+  display: flex;
+  justify-content: center;
+  padding: 0;
+}
+.Problems .ProblemsTableDivider {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 6px;
+  transform: translateX(-3px);
+  cursor: col-resize;
+  touch-action: none;
+  z-index: 1;
+}
+.Problems .ProblemsTableDivider::before {
+  content: '';
+  position: absolute;
+  left: 3px;
+  height: 100%;
+  width: 1px;
+  background: var(--TableColumnsBorder, var(--PanelBorder, #454545));
+  pointer-events: none;
+}
+.Problems .ProblemsTableDivider:hover::before {
+  background: var(--SashHoverBorder, #007fd4);
+}
+.Problems .ProblemsTableDivider0 {
+  pointer-events: none;
+  cursor: default;
+}`, ...dividerRules, `.ProblemsTableRow {
+  height: ${itemHeight}px;
+}
+.Problems .ScrollBarThumb {
+  height: ${scrollBarHeight}px;
+  translate: 0 ${scrollBarTop}px;
+}
+.ProblemsList > .Problem:first-child,
+.ProblemsTableBody > .ProblemsTableRow:first-child {
+  margin-top: ${itemOffset}px;
+}`, ...uniqueIndents.map(getIndentRule)];
+  const css = rules.join('\n');
+  return [SetCss, uid, css];
+};
+
+const renderFilterValue = (oldState, newState) => {
+  return ['Viewlet.setValueByName', newState.uid, ProblemsInput, newState.filterValue];
+};
+
+const renderFocus = (oldState, newState) => {
+  return [FocusSelector, newState.uid, '.ProblemSelected'];
+};
+
+const renderFocusContext = (oldState, newState) => {
+  return [SetFocusContext, newState.uid, FocusProblems];
+};
+
+const renderItems = (oldState, newState) => {
+  return ['Viewlet.setDom2', newState.uid, getComponentDom(newState)];
 };
 
 const getRenderer = diffType => {
@@ -3416,6 +3606,10 @@ const getRenderer = diffType => {
       return renderCss;
     case RenderFilterValue:
       return renderFilterValue;
+    case RenderFocus:
+      return renderFocus;
+    case RenderFocusContext:
+      return renderFocusContext;
     case RenderItems:
       return renderItems;
     default:
@@ -3512,7 +3706,7 @@ const getActions = state => {
   } else {
     actions.push({
       command: HandleCollapseAll,
-      icon: CollapseAll,
+      icon: CollapseAll$1,
       id: collapseAll(),
       name: 'collapseAll',
       type: Button
@@ -3538,6 +3732,18 @@ const renderActions = uid => {
 
 const renderEventListeners = () => {
   return [{
+    name: HandleColumnResizeStart,
+    params: ['handleColumnResizeStart', 'event.target.dataset.column', ClientX, 'event.target.parentNode.clientWidth'],
+    preventDefault: true,
+    stopPropagation: true,
+    trackPointerEvents: [HandleColumnResizeMove, HandleColumnResizeEnd]
+  }, {
+    name: HandleColumnResizeMove,
+    params: ['handleColumnResizeMove', ClientX]
+  }, {
+    name: HandleColumnResizeEnd,
+    params: ['handleColumnResizeEnd']
+  }, {
     name: HandleBlur,
     params: ['handleBlur']
   }, {
@@ -3552,11 +3758,8 @@ const renderEventListeners = () => {
     name: HandleClearFilterClick,
     params: ['clearFilter']
   }, {
-    name: HandlePointerDown,
+    name: HandleClick,
     params: ['handleClickAt', ClientX, ClientY]
-  }, {
-    name: HandleFileNameClick,
-    params: ['toggleFileGroup', 'event.target.dataset.uri']
   }, {
     name: HandleClickMoreFilters,
     params: ['handleClickMoreFilters', ClientX, ClientY]
@@ -3625,17 +3828,6 @@ const applyComponentState = (currentState, state) => {
 };
 const setComponentState = wrapCommand(applyComponentState);
 
-const toggleFileGroup = (state, uri) => {
-  const {
-    collapsedUris
-  } = state;
-  const newCollapsedUris = collapsedUris.includes(uri) ? collapsedUris.filter(collapsedUri => collapsedUri !== uri) : [...collapsedUris, uri];
-  return {
-    ...state,
-    collapsedUris: newCollapsedUris
-  };
-};
-
 const toggleShowErrors = state => {
   const {
     showErrors
@@ -3681,6 +3873,7 @@ const viewAsTable = state => {
 };
 
 const handleDirectMessagePort = (port, setAsRendererProcess = true) => handleMessagePort(port, commandMap, setAsRendererProcess);
+const getComponentDomForUid = uid => getComponentDom(get(uid).newState);
 const commandMap = {
   'Problems.collapseAll': wrapCommand(collapseAll$1),
   'Problems.copyMessage': wrapCommand(copyMessage),
@@ -3688,6 +3881,7 @@ const commandMap = {
   'Problems.diff2': diff2,
   'Problems.focusIndex': wrapCommand(focusIndex),
   'Problems.getCommandIds': getCommandIds,
+  'Problems.getComponentDom': getComponentDomForUid,
   'Problems.getComponentState': getComponentState,
   'Problems.getKeyBindings': getKeyBindings,
   'Problems.getMenuEntries2': wrapGetter(getMenuEntries2),
@@ -3699,6 +3893,9 @@ const commandMap = {
   'Problems.handleBlur': wrapCommand(handleBlur),
   'Problems.handleClickAt': wrapCommand(handleProblemClick),
   'Problems.handleClickMoreFilters': wrapCommand(handleClickMoreFilters),
+  'Problems.handleColumnResizeEnd': wrapCommand(handleColumnResizeEnd),
+  'Problems.handleColumnResizeMove': wrapCommand(handleColumnResizeMove),
+  'Problems.handleColumnResizeStart': wrapCommand(handleColumnResizeStart),
   'Problems.handleContextMenu': wrapCommand(handleContextMenu),
   'Problems.handleDiagnosticsChange': wrapCommand(handleDiagnosticsChange),
   'Problems.handleFilterInput': wrapCommand(handleFilterInput),