@lvce-editor/extension-detail-view 5.14.0 → 6.1.0

package/dist/extensionDetailViewWorkerMain.js

@@ -100,7 +100,7 @@ const changelog = () => {
 const details = () => {
   return i18nString(Details$1);
 };
-const disable = () => {
+const disable$1 = () => {
   return i18nString(Disable$1);
 };
 const features$1 = () => {
@@ -133,7 +133,7 @@ const status = () => {
 const setColorTheme$2 = () => {
   return i18nString(SetColorTheme$1);
 };
-const enable = () => {
+const enable$1 = () => {
   return i18nString(Enable$1);
 };
 const theme = () => {
@@ -330,7 +330,8 @@ const ClientY = 'event.clientY';
 const TargetHref = 'event.target.href';
 const TargetName = 'event.target.name';
 
-const Script$1 = 2;
+const LeftArrow = 13;
+const RightArrow = 15;
 
 const ExtensionDetailReadme = 20;
 const ExtensionDetailIconContextMenu$3 = 4091;
@@ -339,10 +340,8 @@ const None$2 = 0;
 
 const Web$1 = 1;
 
-const ExtensionHostWorker = 44;
-const FileSystemWorker$1 = 209;
-const MarkdownWorker$1 = 300;
-const RendererWorker = 1;
+const FocusElementByName = 'Viewlet.focusElementByName';
+const SetFocusContext = 'Viewlet.setFocusContext';
 
 const mergeClassNames = (...classNames) => {
   return classNames.filter(Boolean).join(' ');
@@ -1030,8 +1029,16 @@ const getFeatureVirtualDomHandler = featureName => {
   return feature.getVirtualDom;
 };
 
+const Script$1 = 2;
+
+const ExtensionHostWorker = 44;
+const ExtensionManagementWorker = 9006;
+const FileSystemWorker$1 = 209;
+const MarkdownWorker$1 = 300;
+const RendererWorker = 1;
+
 const rpcs = Object.create(null);
-const set$a = (id, rpc) => {
+const set$b = (id, rpc) => {
   rpcs[id] = rpc;
 };
 const get$3 = id => {
@@ -1040,6 +1047,10 @@ const get$3 = id => {
 
 const create$7 = rpcId => {
   return {
+    async dispose() {
+      const rpc = get$3(rpcId);
+      await rpc.dispose();
+    },
     // @ts-ignore
     invoke(method, ...params) {
       const rpc = get$3(rpcId);
@@ -1053,11 +1064,7 @@ const create$7 = rpcId => {
       return rpc.invokeAndTransfer(method, ...params);
     },
     set(rpc) {
-      set$a(rpcId, rpc);
-    },
-    async dispose() {
-      const rpc = get$3(rpcId);
-      await rpc.dispose();
+      set$b(rpcId, rpc);
     }
   };
 };
@@ -1585,7 +1592,7 @@ const create$4 = (method, params) => {
   };
 };
 const callbacks = Object.create(null);
-const set$9 = (id, fn) => {
+const set$a = (id, fn) => {
   callbacks[id] = fn;
 };
 const get$2 = id => {
@@ -1604,7 +1611,7 @@ const registerPromise = () => {
     resolve,
     promise
   } = Promise.withResolvers();
-  set$9(id, resolve);
+  set$a(id, resolve);
   return {
     id,
     promise
@@ -1949,7 +1956,7 @@ const send = (transport, method, ...params) => {
   const message = create$4(method, params);
   transport.send(message);
 };
-const invoke$5 = (ipc, method, ...params) => {
+const invoke$6 = (ipc, method, ...params) => {
   return invokeHelper(ipc, method, params, false);
 };
 const invokeAndTransfer$4 = (ipc, method, ...params) => {
@@ -1988,7 +1995,7 @@ const createRpc = ipc => {
       send(ipc, method, ...params);
     },
     invoke(method, ...params) {
-      return invoke$5(ipc, method, ...params);
+      return invoke$6(ipc, method, ...params);
     },
     invokeAndTransfer(method, ...params) {
       return invokeAndTransfer$4(ipc, method, ...params);
@@ -2098,28 +2105,28 @@ const createMockRpc = ({
 };
 
 const {
-  invoke: invoke$4,
+  dispose: dispose$4,
+  invoke: invoke$5,
   invokeAndTransfer: invokeAndTransfer$3,
-  set: set$8,
-  dispose: dispose$4
+  set: set$9
 } = create$7(ExtensionHostWorker);
 const executeReferenceProvider = async (id, offset) => {
   // @ts-ignore
-  return invoke$4('ExtensionHostReference.executeReferenceProvider', id, offset);
+  return invoke$5('ExtensionHostReference.executeReferenceProvider', id, offset);
 };
 const executeFileReferenceProvider = async id => {
   // @ts-ignore
-  return invoke$4('ExtensionHostReference.executeFileReferenceProvider', id);
+  return invoke$5('ExtensionHostReference.executeFileReferenceProvider', id);
 };
 const getRuntimeStatus$2 = async extensionId => {
   // @ts-ignore
-  return invoke$4('ExtensionHost.getRuntimeStatus', extensionId);
+  return invoke$5('ExtensionHost.getRuntimeStatus', extensionId);
 };
 const registerMockRpc$2 = commandMap => {
   const mockRpc = createMockRpc({
     commandMap
   });
-  set$8(mockRpc);
+  set$9(mockRpc);
   return mockRpc;
 };
 
@@ -2129,17 +2136,28 @@ const ExtensionHost = {
   executeFileReferenceProvider,
   executeReferenceProvider,
   getRuntimeStatus: getRuntimeStatus$2,
-  invoke: invoke$4,
+  invoke: invoke$5,
   invokeAndTransfer: invokeAndTransfer$3,
   registerMockRpc: registerMockRpc$2,
+  set: set$9
+};
+
+const {
+  invoke: invoke$4,
   set: set$8
+} = create$7(ExtensionManagementWorker);
+const enable = id => {
+  return invoke$4(`Extensions.enable`, id);
+};
+const disable = id => {
+  return invoke$4(`Extensions.disable`, id);
 };
 
 const {
+  dispose: dispose$3,
   invoke: invoke$3,
   invokeAndTransfer: invokeAndTransfer$2,
-  set: set$7,
-  dispose: dispose$3
+  set: set$7
 } = create$7(FileSystemWorker$1);
 const remove = async dirent => {
   return invoke$3('FileSystem.remove', dirent);
@@ -2224,10 +2242,10 @@ const FileSystemWorker = {
 };
 
 const {
+  dispose: dispose$2,
   invoke: invoke$2,
   invokeAndTransfer: invokeAndTransfer$1,
-  set: set$6,
-  dispose: dispose$2
+  set: set$6
 } = create$7(MarkdownWorker$1);
 const getVirtualDom$1 = async html => {
   // @ts-ignore
@@ -2259,7 +2277,8 @@ const MarkdownWorker = {
 const {
   invoke: invoke$1,
   invokeAndTransfer,
-  set: set$5} = create$7(RendererWorker);
+  set: set$5
+} = create$7(RendererWorker);
 const showContextMenu2 = async (uid, menuId, x, y, args) => {
   number(uid);
   number(menuId);
@@ -2282,14 +2301,6 @@ const sendMessagePortToFileSystemWorker$1 = async (port, rpcId) => {
   // @ts-ignore
   await invokeAndTransfer('SendMessagePortToExtensionHostWorker.sendMessagePortToFileSystemWorker', port, command, rpcId);
 };
-const disableExtension$1 = async id => {
-  // @ts-ignore
-  return invoke$1('ExtensionManagement.disable', id);
-};
-const enableExtension$1 = async id => {
-  // @ts-ignore
-  return invoke$1('ExtensionManagement.enable', id);
-};
 const sendMessagePortToExtensionHostWorker$1 = async (port, rpcId = 0) => {
   const command = 'HandleMessagePort.handleMessagePort2';
   await invokeAndTransfer('SendMessagePortToExtensionHostWorker.sendMessagePortToExtensionHostWorker', port, command, rpcId);
@@ -2306,6 +2317,10 @@ const writeClipBoardImage = async blob => {
   // @ts-ignore
   await invoke$1('ClipBoard.writeImage', /* text */blob);
 };
+const sendMessagePortToExtensionManagementWorker = async (port, rpcId) => {
+  const command = 'Extensions.handleMessagePort';
+  await invokeAndTransfer('SendMessagePortToExtensionHostWorker.sendMessagePortToExtensionManagementWorker', port, command, rpcId);
+};
 const getAllExtensions$1 = async () => {
   return invoke$1('ExtensionManagement.getAllExtensions');
 };
@@ -2533,6 +2548,7 @@ const HandleTabsClick = 14;
 const HandleAdditionalDetailContextMenu = 15;
 const HandleReadmeClick = 16;
 const HandleSelectionChange = 17;
+const HandleTabFocus = 18;
 
 const ActivationEvents = 'ActivationEvents';
 const Changelog = 'Changelog';
@@ -3119,6 +3135,7 @@ const create = (uid, uri, x, y, width, height, platform, assetDir) => {
     features: [],
     featuresVirtualDom: [],
     focus: 0,
+    focusedTabIndex: 0,
     folderSize: 0,
     hasColorTheme: false,
     hasReadme: false,
@@ -3167,7 +3184,7 @@ const isEqual$3 = (oldState, newState) => {
 };
 
 const isEqual$2 = (oldState, newState) => {
-  return oldState.focus === newState.focus;
+  return oldState.focus === newState.focus && oldState.focusedTabIndex === newState.focusedTabIndex;
 };
 
 const isEqual$1 = (oldState, newState) => {
@@ -3185,9 +3202,10 @@ const RenderFocus = 2;
 const RenderItems = 3;
 const RenderScrollTop = 4;
 const RenderCss = 5;
+const RenderFocusContext = 6;
 
-const modules = [isEqual$1, isEqual$2, isEqual, isEqual$3];
-const numbers = [RenderItems, RenderFocus, RenderScrollTop, RenderCss];
+const modules = [isEqual$1, isEqual$2, isEqual, isEqual$3, isEqual$2];
+const numbers = [RenderItems, RenderFocus, RenderScrollTop, RenderCss, RenderFocusContext];
 
 const diff2 = uid => {
   const {
@@ -3215,6 +3233,41 @@ const executeCopy = async state => {
   return state;
 };
 
+const focusNextTab = state => {
+  const {
+    focusedTabIndex
+  } = state;
+  const newFocusedTabIndex = focusedTabIndex >= 1 ? 1 : focusedTabIndex + 1;
+  return {
+    ...state,
+    focusedTabIndex: newFocusedTabIndex
+  };
+};
+
+const focusPreviousTab = state => {
+  const {
+    focusedTabIndex
+  } = state;
+  const newFocusedTabIndex = focusedTabIndex <= 0 ? 0 : focusedTabIndex - 1;
+  return {
+    ...state,
+    focusedTabIndex: newFocusedTabIndex
+  };
+};
+
+const focusId$1 = 451;
+const getKeyBindings = () => {
+  return [{
+    command: 'ExtensionDetail.focusNextTab',
+    key: RightArrow,
+    when: focusId$1
+  }, {
+    command: 'ExtensionDetail.focusPreviousTab',
+    key: LeftArrow,
+    when: focusId$1
+  }];
+};
+
 const getMenuEntriesImage = (state, props) => {
   return [{
     args: [],
@@ -3379,7 +3432,7 @@ const handleClickCategory = async (state, categoryId) => {
 };
 
 const disableExtension = id => {
-  return disableExtension$1(id);
+  return disable(id);
 };
 
 const Web = 1;
@@ -3405,6 +3458,12 @@ const getExtension$1 = async (id, platform) => {
 };
 
 const getExtensionNew = async id => {
+  try {
+    const rpc = get$3(ExtensionManagementWorker);
+    return await rpc.invoke('Extensions.getExtension', id);
+  } catch {
+    // ignore
+  }
   return getExtension$2(id);
 };
 const getExtension = async (id, platform) => {
@@ -3423,12 +3482,12 @@ const getExtensionDetailButtons = (hasColorTheme, isBuiltin, isDisabled) => {
     onClick: HandleClickSetColorTheme
   }, {
     enabled: isDisabled,
-    label: enable(),
+    label: enable$1(),
     name: Enable,
     onClick: HandleClickEnable
   }, {
     enabled: !isDisabled,
-    label: disable(),
+    label: disable$1(),
     name: Disable,
     onClick: HandleClickDisable
   }, {
@@ -3466,7 +3525,7 @@ const handleClickDisable = async state => {
 };
 
 const enableExtension = id => {
-  return enableExtension$1(id);
+  return enable(id);
 };
 
 const handleClickEnable = async state => {
@@ -3569,155 +3628,253 @@ const handleClickUninstall = async state => {
   return state;
 };
 
-const handleExtensionsStatusUpdate = async state => {
-  const details = await getRuntimeStatusDetails(state.extension);
-  return {
-    ...state,
-    ...details
-  };
+const existsFile = async uri => {
+  try {
+    return await exists(uri);
+  } catch {
+    return false;
+  }
 };
 
-const extensionDefaultIcon = assetDir => {
-  return `${assetDir}/icons/extensionDefaultIcon.png`;
-};
-const extensionLanguageBasics = assetDir => {
-  return `${assetDir}/icons/language-icon.svg`;
+class ExtensionNotFoundError extends Error {
+  constructor(extensionId) {
+    super(`extension not found: ${extensionId}`);
+    this.name = 'ExtensionNotFoundError';
+  }
+}
+
+const getRemoteSrc = uri => {
+  const src = `/remote${uri}`;
+  return src;
 };
-const extensionTheme = assetDir => {
-  return `${assetDir}/icons/theme-icon.png`;
+
+const getBaseUrl = (extensionPath, platform) => {
+  switch (platform) {
+    case Electron:
+    case Remote:
+      return getRemoteSrc(extensionPath + '/');
+    default:
+      return extensionPath;
+  }
 };
 
-const handleIconError = state => {
-  const {
-    assetDir,
-    iconSrc
-  } = state;
-  if (iconSrc === extensionDefaultIcon(assetDir)) {
-    return state;
+const getCommit = async () => {
+  try {
+    const commit = await invoke$1('Layout.getCommit');
+    return commit;
+  } catch {
+    return '';
   }
-  return {
-    ...state,
-    iconSrc: extensionDefaultIcon(assetDir)
-  };
 };
 
-const ExtensionDetailIconContextMenu = 4091;
+const getExtensionIdFromUri = uri => {
+  const id = uri.slice('extension-detail://'.length);
+  return id;
+};
 
-const handleImageContextMenu = async (state, eventX, eventY) => {
-  const {
-    uid
-  } = state;
-  await show2(uid, ExtensionDetailIconContextMenu, eventX, eventY, {
-    menuId: ExtensionDetailIconContextMenu
-  });
-  return state;
+const interpolate = (value, inMin, inMax, outMin, outMax) => {
+  const clamped = Math.min(Math.max(value, inMin), inMax);
+  const ratio = (clamped - inMin) / (inMax - inMin);
+  const mapped = outMin + ratio * (outMax - outMin);
+  return Math.round(mapped);
 };
 
-const isExternalLink = href => {
-  return href.startsWith('http://') || href.startsWith('https://');
+const getPadding = width => {
+  if (width < 600) {
+    return 10;
+  }
+  if (width < 800) {
+    return 10;
+  }
+  if (width < 1200) {
+    return interpolate(width, 800, 1200, 10, 30);
+  }
+  return 30;
 };
-const handleReadmeClick = async (state, nodeName, href) => {
-  if (!href || !isExternalLink(href)) {
-    return state;
+const getSideBarWidth = width => {
+  if (width < 490) {
+    return 0;
   }
-  // TODO what to do about relative links? open them in editor?
-  // TODO what to do about mail links?
-  await openUrl$1(href);
-  // TODO check node name and href
-  return state;
+  if (width < 650) {
+    return Math.max(175 + Math.round(20 * (width / 100)), Math.round(width / 4));
+  }
+  if (width < 800) {
+    return Math.max(175 + Math.round(20 * (width / 100)), Math.round(width / 4));
+  }
+  return Math.max(175 + Math.round(20 * (width / 100)), Math.round(width / 4));
 };
 
-const handleReadmeContextMenu = async (state, x, y, nodeName, href) => {
-  const {
-    uid
-  } = state;
-  // TODO maybe also pass other args
-  await show2(uid, ExtensionDetailReadme, x, y, {
-    href,
-    menuId: ExtensionDetailReadme,
-    nodeName
-  });
-  // TODO
-  return state;
+const getTabs = (selectedTab, hasReadme, hasFeatures, hasChangelog) => {
+  const tabs = [{
+    enabled: hasReadme,
+    label: details(),
+    name: Details,
+    selected: selectedTab === Details
+  }, {
+    enabled: hasFeatures,
+    label: features$1(),
+    name: Features,
+    selected: selectedTab === Features
+  }, {
+    enabled: hasChangelog,
+    label: changelog(),
+    name: Changelog,
+    selected: selectedTab === Changelog
+  }];
+  return tabs;
 };
 
-const handleScroll = (state, scrollTop, scrollSource = Script) => {
-  const newScrollTop = Math.max(0, scrollTop);
-  return {
-    ...state,
-    readmeScrollTop: newScrollTop,
-    scrollSource
-  };
-};
+const Small = 1;
+const Normal = 2;
+const Large = 3;
 
-const handleSelectionChange = async (state, selection) => {
-  // console.log('selection change')
-  return state;
+const getViewletSize = width => {
+  if (width < 180) {
+    return Small;
+  }
+  if (width < 768) {
+    return Normal;
+  }
+  return Large;
 };
 
-const readFile = async uri => {
-  return readFile$1(uri);
+const extensionDefaultIcon = assetDir => {
+  return `${assetDir}/icons/extensionDefaultIcon.png`;
 };
-
-const ENOENT = 'ENOENT';
-
-const isEnoentError = error => {
-  return error && error.code === ENOENT;
+const extensionLanguageBasics = assetDir => {
+  return `${assetDir}/icons/language-icon.svg`;
 };
-
-const error = async error => {
-  // TODO send message to error worker or log worker
-  // @ts-ignore
-  console.error(error);
+const extensionTheme = assetDir => {
+  return `${assetDir}/icons/theme-icon.png`;
 };
 
-const join = (...parts) => {
-  return parts.join('/');
+const isLanguageBasicsExtension = extension => {
+  return extension.name && extension.name.startsWith('Language Basics');
 };
 
-const loadChangelogContent = async path => {
-  try {
-    const changelogUrl = join(path, 'CHANGELOG.md');
-    const changelogContent = await readFile(changelogUrl);
-    return changelogContent;
-  } catch (error$1) {
-    if (isEnoentError(error$1)) {
-      return '';
-    }
-    await error(new VError(error$1, 'Failed to load Changelog content'));
-    return `${error$1}`;
-  }
+const isThemeExtension = extension => {
+  return extension.name && extension.name.endsWith(' Theme');
 };
 
-const selectTabChangelog = async state => {
-  const {
-    baseUrl,
-    extension,
-    locationProtocol,
-    tabs
+const getIcon = (extension, platform, assetDir) => {
+  if (!extension) {
+    return extensionDefaultIcon(assetDir);
+  }
+  if (!extension.path || !extension.icon) {
+    if (isLanguageBasicsExtension(extension)) {
+      return extensionLanguageBasics(assetDir);
+    }
+    if (isThemeExtension(extension)) {
+      return extensionTheme(assetDir);
+    }
+    return extensionDefaultIcon(assetDir);
+  }
+  if (platform === Remote || platform === Electron) {
+    if (extension.builtin) {
+      return `${assetDir}/extensions/${extension.id}/${extension.icon}`;
+    }
+    return `/remote/${extension.path}/${extension.icon}`; // TODO support windows paths
+  }
+  return '';
+};
+
+const getDescription = extension => {
+  if (!extension || !extension.description) {
+    return 'n/a';
+  }
+  return extension.description;
+};
+
+const getName = extension => {
+  if (extension && extension.name) {
+    return extension.name;
+  }
+  if (extension && extension.id) {
+    return extension.id;
+  }
+  return 'n/a';
+};
+
+const getDownloadCount = extension => {
+  if (!extension) {
+    return 'n/a';
+  }
+
+  // Check for download count in various possible locations
+  const downloadCount = extension.downloadCount || extension.downloads || extension.marketplace?.downloadCount || extension.marketplace?.downloads || extension.packageJSON?.downloadCount || extension.packageJSON?.downloads;
+  if (!downloadCount) {
+    return 'n/a';
+  }
+
+  // Format the number with commas for better readability
+  return downloadCount.toLocaleString();
+};
+
+const getRating = extension => {
+  if (!extension) {
+    return 'n/a';
+  }
+
+  // Check for rating in various possible locations
+  const rating = extension.rating || extension.averageRating || extension.marketplace?.rating || extension.marketplace?.averageRating || extension.packageJSON?.rating || extension.packageJSON?.averageRating;
+  if (!rating) {
+    return 'n/a';
+  }
+
+  // Format rating to one decimal place
+  return rating.toFixed(1);
+};
+
+const getBadge = (builtin, badgeEnabled) => {
+  if (builtin && badgeEnabled) {
+    return 'builtin';
+  }
+  return '';
+};
+
+const hasColorThemes = extension => {
+  return Boolean(extension && extension.colorThemes && extension.colorThemes.length > 0);
+};
+
+const loadHeaderContent = (state, platform, extension) => {
+  const {
+    assetDir,
+    builtinExtensionsBadgeEnabled
   } = state;
-  const changelogContent = await loadChangelogContent(extension.path); // TODO use uri
-  const changelogMarkdownHtml = await renderMarkdown(changelogContent, {
-    baseUrl,
-    locationProtocol
-  });
-  const changelogDom = await getMarkdownVirtualDom(changelogMarkdownHtml);
-  const newTabs = tabs.map(tab => {
-    return {
-      ...tab,
-      selected: tab.name === Changelog
-    };
-  });
+  const iconSrc = getIcon(extension, platform, assetDir);
+  const description = getDescription(extension);
+  const name = getName(extension);
+  const extensionUri = extension.uri || extension.path;
+  const extensionId = extension?.id || 'n/a';
+  const extensionVersion = extension?.version || 'n/a';
+  const hasColorTheme = hasColorThemes(extension);
+  const isBuiltin = extension?.builtin;
+  const badge = getBadge(isBuiltin, builtinExtensionsBadgeEnabled);
+  const downloadCount = getDownloadCount(extension);
+  const rating = getRating(extension);
   return {
-    ...state,
-    changelogVirtualDom: changelogDom,
-    selectedTab: Changelog,
-    tabs: newTabs
+    badge,
+    description,
+    downloadCount,
+    extension,
+    extensionId,
+    extensionUri,
+    extensionVersion,
+    hasColorTheme,
+    iconSrc,
+    name,
+    rating
   };
 };
 
-const selectTabDefault = async state => {
-  return state;
+const readFile = async uri => {
+  return readFile$1(uri);
+};
+
+const ENOENT = 'ENOENT';
+
+const isEnoentError = error => {
+  return error && error.code === ENOENT;
 };
 
 const loadReadmeContent = async readmeUrl => {
@@ -3735,104 +3892,174 @@ const loadReadmeContent = async readmeUrl => {
   }
 };
 
-const selectTabDetails = async state => {
-  const {
-    baseUrl,
-    locationProtocol,
-    readmeUrl,
-    tabs
-  } = state;
-  const readmeContent = await loadReadmeContent(readmeUrl);
-  const readmeHtml = await renderMarkdown(readmeContent, {
-    baseUrl,
-    linksExternal: true,
-    locationProtocol
-  });
-  const detailsDom = await getMarkdownVirtualDom(readmeHtml);
-  const newTabs = tabs.map(tab => {
-    return {
-      ...tab,
-      selected: tab.name === Details
-    };
-  });
-  return {
-    ...state,
-    detailsVirtualDom: detailsDom,
-    selectedTab: Details,
-    tabs: newTabs
-  };
-};
-
-const selectTabFeatures = async state => {
-  const {
-    baseUrl,
-    extension,
-    features,
-    locationProtocol,
-    selectedFeature,
-    tabs
-  } = state;
-  if (features.length === 0) {
-    return state;
+const stringifyCategory = category => {
+  if (typeof category === 'string') {
+    return category;
   }
-  const actualSelectedFeature = selectedFeature || Theme;
-  const fn = getFeatureDetailsHandler(actualSelectedFeature);
-  const partialNewState = await fn(extension, baseUrl, locationProtocol);
-  const newTabs = tabs.map(tab => {
-    return {
-      ...tab,
-      selected: tab.name === Features
-    };
-  });
-  const newFeatures = features.map(feature => {
-    if (feature.id === actualSelectedFeature) {
-      return {
-        ...feature,
-        selected: true
-      };
-    }
-    return {
-      ...feature,
-      selected: false
-    };
-  });
+  return JSON.stringify(category);
+};
+const toCategory = categoryString => {
   return {
-    ...state,
-    ...partialNewState,
-    features: newFeatures,
-    selectedFeature: features[0].id || '',
-    selectedTab: Features,
-    tabs: newTabs
+    id: categoryString.toLowerCase(),
+    label: categoryString
   };
 };
-
-const getSelectTabHandler = name => {
-  switch (name) {
-    case Changelog:
-      return selectTabChangelog;
-    case Details:
-      return selectTabDetails;
-    case Features:
-      return selectTabFeatures;
-    default:
-      return selectTabDefault;
+const getCategories = extension => {
+  if (!hasProperty(extension, 'categories') || !Array.isArray(extension.categories)) {
+    return [];
   }
+  const categoryStrings = extension.categories.map(stringifyCategory);
+  const categories = categoryStrings.map(toCategory);
+  return categories;
 };
 
-const selectTab = (state, name) => {
-  const fn = getSelectTabHandler(name);
-  return fn(state);
-};
+const BYTE_UNITS = ['B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+const BIBYTE_UNITS = ['B', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
+const BIT_UNITS = ['b', 'kbit', 'Mbit', 'Gbit', 'Tbit', 'Pbit', 'Ebit', 'Zbit', 'Ybit'];
+const BIBIT_UNITS = ['b', 'kibit', 'Mibit', 'Gibit', 'Tibit', 'Pibit', 'Eibit', 'Zibit', 'Yibit'];
 
-const handleTabsClick = (state, name) => {
-  return selectTab(state, name);
+/*
+Formats the given number using `Number#toLocaleString`.
+- If locale is a string, the value is expected to be a locale-key (for example: `de`).
+- If locale is true, the system default locale is used for translation.
+- If no value for locale is specified, the number is returned unmodified.
+*/
+const toLocaleString = (number, locale, options) => {
+  let result = number;
+  if (typeof locale === 'string' || Array.isArray(locale)) {
+    result = number.toLocaleString(locale, options);
+  } else if (locale === true || options !== undefined) {
+    result = number.toLocaleString(undefined, options);
+  }
+  return result;
 };
-
-const getSizeEntries = (showSizeLink, displaySize, extensionUri) => {
-  if (!showSizeLink) {
-    return [];
+const log10 = numberOrBigInt => {
+  if (typeof numberOrBigInt === 'number') {
+    return Math.log10(numberOrBigInt);
   }
-  return [{
+  const string = numberOrBigInt.toString(10);
+  return string.length + Math.log10(`0.${string.slice(0, 15)}`);
+};
+const log = numberOrBigInt => {
+  if (typeof numberOrBigInt === 'number') {
+    return Math.log(numberOrBigInt);
+  }
+  return log10(numberOrBigInt) * Math.log(10);
+};
+const divide = (numberOrBigInt, divisor) => {
+  if (typeof numberOrBigInt === 'number') {
+    return numberOrBigInt / divisor;
+  }
+  const integerPart = numberOrBigInt / BigInt(divisor);
+  const remainder = numberOrBigInt % BigInt(divisor);
+  return Number(integerPart) + Number(remainder) / divisor;
+};
+const applyFixedWidth = (result, fixedWidth) => {
+  if (fixedWidth === undefined) {
+    return result;
+  }
+  if (typeof fixedWidth !== 'number' || !Number.isSafeInteger(fixedWidth) || fixedWidth < 0) {
+    throw new TypeError(`Expected fixedWidth to be a non-negative integer, got ${typeof fixedWidth}: ${fixedWidth}`);
+  }
+  if (fixedWidth === 0) {
+    return result;
+  }
+  return result.length < fixedWidth ? result.padStart(fixedWidth, ' ') : result;
+};
+const buildLocaleOptions = options => {
+  const {
+    minimumFractionDigits,
+    maximumFractionDigits
+  } = options;
+  if (minimumFractionDigits === undefined && maximumFractionDigits === undefined) {
+    return undefined;
+  }
+  return {
+    ...(minimumFractionDigits !== undefined && {
+      minimumFractionDigits
+    }),
+    ...(maximumFractionDigits !== undefined && {
+      maximumFractionDigits
+    }),
+    roundingMode: 'trunc'
+  };
+};
+function prettyBytes(number, options) {
+  if (typeof number !== 'bigint' && !Number.isFinite(number)) {
+    throw new TypeError(`Expected a finite number, got ${typeof number}: ${number}`);
+  }
+  options = {
+    bits: false,
+    binary: false,
+    space: true,
+    nonBreakingSpace: false,
+    ...options
+  };
+  const UNITS = options.bits ? options.binary ? BIBIT_UNITS : BIT_UNITS : options.binary ? BIBYTE_UNITS : BYTE_UNITS;
+  const separator = options.space ? options.nonBreakingSpace ? '\u00A0' : ' ' : '';
+
+  // Handle signed zero case
+  const isZero = typeof number === 'number' ? number === 0 : number === 0n;
+  if (options.signed && isZero) {
+    const result = ` 0${separator}${UNITS[0]}`;
+    return applyFixedWidth(result, options.fixedWidth);
+  }
+  const isNegative = number < 0;
+  const prefix = isNegative ? '-' : options.signed ? '+' : '';
+  if (isNegative) {
+    number = -number;
+  }
+  const localeOptions = buildLocaleOptions(options);
+  let result;
+  if (number < 1) {
+    const numberString = toLocaleString(number, options.locale, localeOptions);
+    result = prefix + numberString + separator + UNITS[0];
+  } else {
+    const exponent = Math.min(Math.floor(options.binary ? log(number) / Math.log(1024) : log10(number) / 3), UNITS.length - 1);
+    number = divide(number, (options.binary ? 1024 : 1000) ** exponent);
+    if (!localeOptions) {
+      const minPrecision = Math.max(3, Math.floor(number).toString().length);
+      number = number.toPrecision(minPrecision);
+    }
+    const numberString = toLocaleString(Number(number), options.locale, localeOptions);
+    const unit = UNITS[exponent];
+    result = prefix + numberString + separator + unit;
+  }
+  return applyFixedWidth(result, options.fixedWidth);
+}
+
+const getDisplaySize = size => {
+  return prettyBytes(size, {
+    maximumFractionDigits: 1
+  });
+};
+
+const supportsFileSize = uri => {
+  if (uri.startsWith('http:') || uri.startsWith('https://')) {
+    return false;
+  }
+  return true;
+};
+const getFolderSize = async uri => {
+  if (!uri) {
+    throw new VError(`uri is required`);
+  }
+  if (!supportsFileSize(uri)) {
+    return 0;
+  }
+  try {
+    // @ts-ignore
+    return await invoke('FileSystem.getFolderSize', uri);
+  } catch {
+    return 0;
+  }
+};
+
+const getSizeEntries = (showSizeLink, displaySize, extensionUri) => {
+  if (!showSizeLink) {
+    return [];
+  }
+  return [{
     key: size(),
     onClick: HandleClickSize,
     title: extensionUri,
@@ -3858,739 +4085,610 @@ const getInstallationEntries = (displaySize, extensionId, extensionVersion, exte
   return entries;
 };
 
-const hideSizeLink = state => {
-  const {
-    displaySize,
-    extensionId,
-    extensionUri,
-    extensionVersion
-  } = state;
-  const newShowSizeLink = false;
-  const installationEntries = getInstallationEntries(displaySize, extensionId, extensionVersion, extensionUri, newShowSizeLink);
-  return {
-    ...state,
-    installationEntries,
-    showSizeLink: newShowSizeLink
-  };
+const getMarketplaceEntries = isBuiltin => {
+  if (isBuiltin) {
+    return [];
+  }
+  return [{
+    key: published(),
+    odd: true,
+    value: 'n/a'
+  }, {
+    key: lastReleased(),
+    value: 'n/a'
+  }];
 };
 
-const sendMessagePortToExtensionHostWorker = async port => {
-  await sendMessagePortToExtensionHostWorker$1(port, 0);
+const getLicenseLink = extension => {
+  // TODO
+  return '#';
 };
 
-const createExtensionHostWorkerRpc = async () => {
+const ensureValidLink = link => {
+  if (!link) {
+    return '';
+  }
   try {
-    const rpc = await TransferMessagePortRpcParent.create({
-      commandMap: {},
-      send: sendMessagePortToExtensionHostWorker
-    });
-    return rpc;
-  } catch (error) {
-    throw new VError(error, `Failed to create extension host rpc`);
+    const parsed = new URL(link);
+    if (parsed.protocol !== 'https:') {
+      return '';
+    }
+    return link;
+  } catch {
+    return '';
   }
 };
 
-const initializeExtensionHostWorker = async () => {
-  const rpc = await createExtensionHostWorkerRpc();
-  set$4(rpc);
+const getRepositoryLinkRaw = extension => {
+  if (extension && hasProperty(extension, 'repository') && typeof extension.repository === 'string') {
+    return extension.repository; // TODO watch out for javascript: or other invalid links or path traversal
+  }
+  return '';
+};
+const getRepositoryLink = extension => {
+  const raw = getRepositoryLinkRaw(extension);
+  const validLink = ensureValidLink(raw);
+  return validLink;
+};
+const getIssuesLink = extension => {
+  const repositoryLink = getRepositoryLink(extension);
+  if (!repositoryLink) {
+    return '';
+  }
+  if (repositoryLink && repositoryLink.startsWith('https://github.com')) {
+    return `${repositoryLink}/issues`;
+  }
+  return '';
 };
 
-const sendMessagePortToFileSystemWorker = async port => {
-  await sendMessagePortToFileSystemWorker$1(port, 0);
+const getResources = (isBuiltin, extension) => {
+  const repositoryLink = getRepositoryLink(extension);
+  const issueLink = getIssuesLink(extension);
+  const licenseLink = getLicenseLink();
+  // TODO hide marketplace link for builtin extensions
+  return [{
+    icon: 'LinkExternal',
+    label: marketplace(),
+    url: '#'
+  }, {
+    icon: 'LinkExternal',
+    label: issues(),
+    url: issueLink
+  }, {
+    icon: 'Repo',
+    label: repository(),
+    url: repositoryLink
+  }, {
+    icon: 'LinkExternal',
+    label: license(),
+    url: licenseLink
+  }];
 };
 
-const createFileSystemWorkerRpc = async () => {
-  try {
-    const rpc = await TransferMessagePortRpcParent.create({
-      commandMap: {},
-      send: sendMessagePortToFileSystemWorker
-    });
-    return rpc;
-  } catch (error) {
-    throw new VError(error, `Failed to create file system worker rpc`);
-  }
+const loadSideBarContent = async (extensionId, extensionVersion, extensionUri, isBuiltin, extension, showSizeLink) => {
+  const folderSize = await getFolderSize(extensionUri);
+  const displaySize = getDisplaySize(folderSize);
+  const installationEntries = getInstallationEntries(displaySize, extensionId, extensionVersion, extensionUri, showSizeLink);
+  const marketplaceEntries = getMarketplaceEntries(isBuiltin);
+  const categories = getCategories(extension);
+  const resources = getResources(isBuiltin, extension);
+  return {
+    categories,
+    displaySize,
+    folderSize,
+    installationEntries,
+    marketplaceEntries,
+    resources
+  };
 };
 
-const initializeFileSystemWorker = async () => {
-  const rpc = await createFileSystemWorkerRpc();
-  set$1(rpc);
+const join = (...parts) => {
+  return parts.join('/');
 };
 
-const sendMessagePortToMarkdownWorker = async port => {
-  await sendMessagePortToMarkdownWorker$1(port, 0);
+const getSavedChangelogScrollTop = savedState => {
+  if (savedState && typeof savedState === 'object' && 'changelogScrollTop' in savedState && typeof savedState.changelogScrollTop === 'number') {
+    return savedState.changelogScrollTop;
+  }
+  return 0;
 };
 
-const createMarkdownWorkerRpc = async () => {
-  try {
-    const rpc = await TransferMessagePortRpcParent.create({
-      commandMap: {},
-      send: sendMessagePortToMarkdownWorker
-    });
-    return rpc;
-  } catch (error) {
-    throw new VError(error, `Failed to create markdown worker rpc`);
+const getSavedReadmeScrollTop = savedState => {
+  if (savedState && typeof savedState === 'object' && 'readmeScrollTop' in savedState && typeof savedState.readmeScrollTop === 'number') {
+    return savedState.readmeScrollTop;
   }
+  return 0;
 };
 
-const initializeMarkdownWorker = async () => {
-  const rpc = await createMarkdownWorkerRpc();
-  set$3(rpc);
+const getSavedSelectedFeature = savedState => {
+  if (savedState && typeof savedState === 'object' && 'selectedFeature' in savedState && typeof savedState.selectedFeature === 'string') {
+    return savedState.selectedFeature;
+  }
+  return Details;
 };
 
-const initialize = async () => {
-  // TODO load markdown worker only when needed
-  await Promise.all([initializeMarkdownWorker(), initializeFileSystemWorker(), initializeExtensionHostWorker()]);
+const getSavedSelectedTab = savedState => {
+  if (savedState && typeof savedState === 'object' && 'selectedTab' in savedState && typeof savedState.selectedTab === 'string') {
+    return savedState.selectedTab;
+  }
+  return Details;
 };
 
-const existsFile = async uri => {
-  try {
-    return await exists(uri);
-  } catch {
-    return false;
-  }
+const restoreState = savedState => {
+  const selectedTab = getSavedSelectedTab(savedState);
+  const selectedFeature = getSavedSelectedFeature(savedState);
+  const readmeScrollTop = getSavedReadmeScrollTop(savedState);
+  const changelogScrollTop = getSavedChangelogScrollTop(savedState);
+  return {
+    changelogScrollTop,
+    readmeScrollTop,
+    selectedFeature,
+    selectedTab
+  };
 };
 
-class ExtensionNotFoundError extends Error {
-  constructor(extensionId) {
-    super(`extension not found: ${extensionId}`);
-    this.name = 'ExtensionNotFoundError';
+const isEnabled = tab => {
+  return tab.enabled;
+};
+const loadContent = async (state, platform, savedState, isTest = false) => {
+  if (isTest) {
+    savedState = undefined;
   }
-}
+  const {
+    uri,
+    width
+  } = state;
+  const id = getExtensionIdFromUri(uri);
+  const extension = await getExtension(id, platform);
+  if (!extension) {
+    throw new ExtensionNotFoundError(id);
+  }
+  const commit = await getCommit();
+  const headerData = loadHeaderContent(state, platform, extension);
+  const {
+    badge,
+    description,
+    downloadCount,
+    extensionId,
+    extensionUri,
+    extensionVersion,
+    hasColorTheme,
+    iconSrc,
+    name,
+    rating
+  } = headerData;
+  const readmeUrl = join(extensionUri, 'README.md');
+  const changelogUrl = join(extensionUri, 'CHANGELOG.md');
+  const [hasReadme, hasChangelog] = await Promise.all([existsFile(readmeUrl), existsFile(changelogUrl)]);
+  const readmeContent = hasReadme ? await loadReadmeContent(readmeUrl) : noReadmeFound();
+  const baseUrl = getBaseUrl(extension.path, platform);
+  const locationProtocol = location.protocol;
+  const locationHost = location.host;
+  const readmeHtml = await renderMarkdown(readmeContent, {
+    baseUrl,
+    commit,
+    linksExternal: true,
+    locationProtocol
+  });
+  const detailsVirtualDom = await getMarkdownVirtualDom(readmeHtml, {
+    scrollToTopEnabled: true
+  });
+  const isBuiltin = extension?.isBuiltin;
+  const disabled = extension?.disabled;
+  const buttons = getExtensionDetailButtons(hasColorTheme, isBuiltin, disabled);
+  const size = getViewletSize(width);
+  const {
+    changelogScrollTop,
+    readmeScrollTop,
+    selectedFeature,
+    selectedTab
+  } = restoreState(savedState);
+  const features = getFeatures(selectedFeature || Theme, extension);
+  const hasFeatures = features.length > 0;
+  const tabs = getTabs(selectedTab, hasReadme, hasFeatures, hasChangelog);
+  const enabledTabs = tabs.filter(isEnabled);
+  const sizeValue = getViewletSize(width || 0);
+  const showSizeLink = platform !== Web$1;
+  const {
+    categories,
+    displaySize,
+    folderSize,
+    installationEntries,
+    marketplaceEntries,
+    resources
+  } = await loadSideBarContent(extensionId, extensionVersion, extensionUri, isBuiltin, extension, showSizeLink);
+  const padding = getPadding(width);
+  const sideBarWidth = getSideBarWidth(width);
+  const showSideBar = sideBarWidth > 0;
+  return {
+    ...state,
+    badge,
+    baseUrl,
+    buttons,
+    categories,
+    changelogScrollTop,
+    commit,
+    description,
+    detailsVirtualDom,
+    disabled,
+    displaySize,
+    downloadCount,
+    extension,
+    extensionId,
+    extensionUri,
+    extensionVersion,
+    features,
+    folderSize,
+    hasColorTheme,
+    hasReadme,
+    iconSrc,
+    installationEntries,
+    locationHost,
+    locationProtocol,
+    marketplaceEntries,
+    name,
+    paddingLeft: padding,
+    paddingRight: padding,
+    rating,
+    readmeScrollTop,
+    readmeUrl,
+    resources,
+    scrollSource: Script,
+    scrollToTopButtonEnabled: true,
+    selectedTab,
+    showSideBar,
+    showSizeLink,
+    sideBarWidth,
+    sizeOnDisk: size,
+    sizeValue,
+    tabs: enabledTabs
+  };
+};
 
-const getRemoteSrc = uri => {
-  const src = `/remote${uri}`;
-  return src;
+const handleExtensionsChanged = async state => {
+  const {
+    platform
+  } = state;
+  return loadContent(state, platform, {});
 };
 
-const getBaseUrl = (extensionPath, platform) => {
-  switch (platform) {
-    case Electron:
-    case Remote:
-      return getRemoteSrc(extensionPath + '/');
-    default:
-      return extensionPath;
-  }
+const handleExtensionsStatusUpdate = async state => {
+  const {
+    extension
+  } = state;
+  const details = await getRuntimeStatusDetails(extension);
+  return {
+    ...state,
+    ...details
+  };
 };
 
-const getCommit = async () => {
-  try {
-    const commit = await invoke$1('Layout.getCommit');
-    return commit;
-  } catch {
-    return '';
+const handleIconError = state => {
+  const {
+    assetDir,
+    iconSrc
+  } = state;
+  if (iconSrc === extensionDefaultIcon(assetDir)) {
+    return state;
   }
+  return {
+    ...state,
+    iconSrc: extensionDefaultIcon(assetDir)
+  };
 };
 
-const getExtensionIdFromUri = uri => {
-  const id = uri.slice('extension-detail://'.length);
-  return id;
-};
+const ExtensionDetailIconContextMenu = 4091;
 
-const interpolate = (value, inMin, inMax, outMin, outMax) => {
-  const clamped = Math.min(Math.max(value, inMin), inMax);
-  const ratio = (clamped - inMin) / (inMax - inMin);
-  const mapped = outMin + ratio * (outMax - outMin);
-  return Math.round(mapped);
+const handleImageContextMenu = async (state, eventX, eventY) => {
+  const {
+    uid
+  } = state;
+  await show2(uid, ExtensionDetailIconContextMenu, eventX, eventY, {
+    menuId: ExtensionDetailIconContextMenu
+  });
+  return state;
 };
 
-const getPadding = width => {
-  if (width < 600) {
-    return 10;
-  }
-  if (width < 800) {
-    return 10;
-  }
-  if (width < 1200) {
-    return interpolate(width, 800, 1200, 10, 30);
-  }
-  return 30;
+const isExternalLink = href => {
+  return href.startsWith('http://') || href.startsWith('https://');
 };
-const getSideBarWidth = width => {
-  if (width < 490) {
-    return 0;
-  }
-  if (width < 650) {
-    return Math.max(175 + Math.round(20 * (width / 100)), Math.round(width / 4));
-  }
-  if (width < 800) {
-    return Math.max(175 + Math.round(20 * (width / 100)), Math.round(width / 4));
+const handleReadmeClick = async (state, nodeName, href) => {
+  if (!href || !isExternalLink(href)) {
+    return state;
   }
-  return Math.max(175 + Math.round(20 * (width / 100)), Math.round(width / 4));
+  // TODO what to do about relative links? open them in editor?
+  // TODO what to do about mail links?
+  await openUrl$1(href);
+  // TODO check node name and href
+  return state;
 };
 
-const getTabs = (selectedTab, hasReadme, hasFeatures, hasChangelog) => {
-  const tabs = [{
-    enabled: hasReadme,
-    label: details(),
-    name: Details,
-    selected: selectedTab === Details
-  }, {
-    enabled: hasFeatures,
-    label: features$1(),
-    name: Features,
-    selected: selectedTab === Features
-  }, {
-    enabled: hasChangelog,
-    label: changelog(),
-    name: Changelog,
-    selected: selectedTab === Changelog
-  }];
-  return tabs;
-};
-
-const Small = 1;
-const Normal = 2;
-const Large = 3;
-
-const getViewletSize = width => {
-  if (width < 180) {
-    return Small;
-  }
-  if (width < 768) {
-    return Normal;
-  }
-  return Large;
-};
-
-const isLanguageBasicsExtension = extension => {
-  return extension.name && extension.name.startsWith('Language Basics');
-};
-
-const isThemeExtension = extension => {
-  return extension.name && extension.name.endsWith(' Theme');
-};
-
-const getIcon = (extension, platform, assetDir) => {
-  if (!extension) {
-    return extensionDefaultIcon(assetDir);
-  }
-  if (!extension.path || !extension.icon) {
-    if (isLanguageBasicsExtension(extension)) {
-      return extensionLanguageBasics(assetDir);
-    }
-    if (isThemeExtension(extension)) {
-      return extensionTheme(assetDir);
-    }
-    return extensionDefaultIcon(assetDir);
-  }
-  if (platform === Remote || platform === Electron) {
-    if (extension.builtin) {
-      return `${assetDir}/extensions/${extension.id}/${extension.icon}`;
-    }
-    return `/remote/${extension.path}/${extension.icon}`; // TODO support windows paths
-  }
-  return '';
+const handleReadmeContextMenu = async (state, x, y, nodeName, href) => {
+  const {
+    uid
+  } = state;
+  // TODO maybe also pass other args
+  await show2(uid, ExtensionDetailReadme, x, y, {
+    href,
+    menuId: ExtensionDetailReadme,
+    nodeName
+  });
+  // TODO
+  return state;
 };
 
-const getDescription = extension => {
-  if (!extension || !extension.description) {
-    return 'n/a';
-  }
-  return extension.description;
+const handleScroll = (state, scrollTop, scrollSource = Script) => {
+  const newScrollTop = Math.max(0, scrollTop);
+  return {
+    ...state,
+    readmeScrollTop: newScrollTop,
+    scrollSource
+  };
 };
 
-const getName = extension => {
-  if (extension && extension.name) {
-    return extension.name;
-  }
-  if (extension && extension.id) {
-    return extension.id;
-  }
-  return 'n/a';
+const handleSelectionChange = async (state, selection) => {
+  // console.log('selection change')
+  return state;
 };
 
-const getDownloadCount = extension => {
-  if (!extension) {
-    return 'n/a';
-  }
-
-  // Check for download count in various possible locations
-  const downloadCount = extension.downloadCount || extension.downloads || extension.marketplace?.downloadCount || extension.marketplace?.downloads || extension.packageJSON?.downloadCount || extension.packageJSON?.downloads;
-  if (!downloadCount) {
-    return 'n/a';
-  }
-
-  // Format the number with commas for better readability
-  return downloadCount.toLocaleString();
+const focusId = 451;
+const handleTabFocus = (state, name) => {
+  const tabIndex = state.tabs.findIndex(tab => tab.name === name);
+  const newFocusedTabIndex = tabIndex === -1 ? state.focusedTabIndex : tabIndex;
+  return {
+    ...state,
+    focus: focusId,
+    focusedTabIndex: newFocusedTabIndex
+  };
 };
 
-const getRating = extension => {
-  if (!extension) {
-    return 'n/a';
-  }
-
-  // Check for rating in various possible locations
-  const rating = extension.rating || extension.averageRating || extension.marketplace?.rating || extension.marketplace?.averageRating || extension.packageJSON?.rating || extension.packageJSON?.averageRating;
-  if (!rating) {
-    return 'n/a';
-  }
-
-  // Format rating to one decimal place
-  return rating.toFixed(1);
+const error = async error => {
+  // TODO send message to error worker or log worker
+  // @ts-ignore
+  console.error(error);
 };
 
-const getBadge = (builtin, badgeEnabled) => {
-  if (builtin && badgeEnabled) {
-    return 'builtin';
+const loadChangelogContent = async path => {
+  try {
+    const changelogUrl = join(path, 'CHANGELOG.md');
+    const changelogContent = await readFile(changelogUrl);
+    return changelogContent;
+  } catch (error$1) {
+    if (isEnoentError(error$1)) {
+      return '';
+    }
+    await error(new VError(error$1, 'Failed to load Changelog content'));
+    return `${error$1}`;
   }
-  return '';
-};
-
-const hasColorThemes = extension => {
-  return Boolean(extension && extension.colorThemes && extension.colorThemes.length > 0);
 };
 
-const loadHeaderContent = (state, platform, extension) => {
+const selectTabChangelog = async state => {
   const {
-    assetDir,
-    builtinExtensionsBadgeEnabled
+    baseUrl,
+    extension,
+    locationProtocol,
+    tabs
   } = state;
-  const iconSrc = getIcon(extension, platform, assetDir);
-  const description = getDescription(extension);
-  const name = getName(extension);
-  const extensionUri = extension.uri || extension.path;
-  const extensionId = extension?.id || 'n/a';
-  const extensionVersion = extension?.version || 'n/a';
-  const hasColorTheme = hasColorThemes(extension);
-  const isBuiltin = extension?.builtin;
-  const badge = getBadge(isBuiltin, builtinExtensionsBadgeEnabled);
-  const downloadCount = getDownloadCount(extension);
-  const rating = getRating(extension);
+  const changelogContent = await loadChangelogContent(extension.path); // TODO use uri
+  const changelogMarkdownHtml = await renderMarkdown(changelogContent, {
+    baseUrl,
+    locationProtocol
+  });
+  const changelogDom = await getMarkdownVirtualDom(changelogMarkdownHtml);
+  const newTabs = tabs.map(tab => {
+    return {
+      ...tab,
+      selected: tab.name === Changelog
+    };
+  });
   return {
-    badge,
-    description,
-    downloadCount,
-    extension,
-    extensionId,
-    extensionUri,
-    extensionVersion,
-    hasColorTheme,
-    iconSrc,
-    name,
-    rating
+    ...state,
+    changelogVirtualDom: changelogDom,
+    selectedTab: Changelog,
+    tabs: newTabs
   };
 };
 
-const stringifyCategory = category => {
-  if (typeof category === 'string') {
-    return category;
-  }
-  return JSON.stringify(category);
-};
-const toCategory = categoryString => {
-  return {
-    id: categoryString.toLowerCase(),
-    label: categoryString
-  };
-};
-const getCategories = extension => {
-  if (!hasProperty(extension, 'categories') || !Array.isArray(extension.categories)) {
-    return [];
-  }
-  const categoryStrings = extension.categories.map(stringifyCategory);
-  const categories = categoryStrings.map(toCategory);
-  return categories;
+const selectTabDefault = async state => {
+  return state;
 };
 
-const BYTE_UNITS = ['B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
-const BIBYTE_UNITS = ['B', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
-const BIT_UNITS = ['b', 'kbit', 'Mbit', 'Gbit', 'Tbit', 'Pbit', 'Ebit', 'Zbit', 'Ybit'];
-const BIBIT_UNITS = ['b', 'kibit', 'Mibit', 'Gibit', 'Tibit', 'Pibit', 'Eibit', 'Zibit', 'Yibit'];
-
-/*
-Formats the given number using `Number#toLocaleString`.
-- If locale is a string, the value is expected to be a locale-key (for example: `de`).
-- If locale is true, the system default locale is used for translation.
-- If no value for locale is specified, the number is returned unmodified.
-*/
-const toLocaleString = (number, locale, options) => {
-  let result = number;
-  if (typeof locale === 'string' || Array.isArray(locale)) {
-    result = number.toLocaleString(locale, options);
-  } else if (locale === true || options !== undefined) {
-    result = number.toLocaleString(undefined, options);
-  }
-  return result;
-};
-const log10 = numberOrBigInt => {
-  if (typeof numberOrBigInt === 'number') {
-    return Math.log10(numberOrBigInt);
-  }
-  const string = numberOrBigInt.toString(10);
-  return string.length + Math.log10(`0.${string.slice(0, 15)}`);
-};
-const log = numberOrBigInt => {
-  if (typeof numberOrBigInt === 'number') {
-    return Math.log(numberOrBigInt);
-  }
-  return log10(numberOrBigInt) * Math.log(10);
-};
-const divide = (numberOrBigInt, divisor) => {
-  if (typeof numberOrBigInt === 'number') {
-    return numberOrBigInt / divisor;
-  }
-  const integerPart = numberOrBigInt / BigInt(divisor);
-  const remainder = numberOrBigInt % BigInt(divisor);
-  return Number(integerPart) + Number(remainder) / divisor;
-};
-const applyFixedWidth = (result, fixedWidth) => {
-  if (fixedWidth === undefined) {
-    return result;
-  }
-  if (typeof fixedWidth !== 'number' || !Number.isSafeInteger(fixedWidth) || fixedWidth < 0) {
-    throw new TypeError(`Expected fixedWidth to be a non-negative integer, got ${typeof fixedWidth}: ${fixedWidth}`);
-  }
-  if (fixedWidth === 0) {
-    return result;
-  }
-  return result.length < fixedWidth ? result.padStart(fixedWidth, ' ') : result;
-};
-const buildLocaleOptions = options => {
+const selectTabDetails = async state => {
   const {
-    minimumFractionDigits,
-    maximumFractionDigits
-  } = options;
-  if (minimumFractionDigits === undefined && maximumFractionDigits === undefined) {
-    return undefined;
-  }
+    baseUrl,
+    locationProtocol,
+    readmeUrl,
+    tabs
+  } = state;
+  const readmeContent = await loadReadmeContent(readmeUrl);
+  const readmeHtml = await renderMarkdown(readmeContent, {
+    baseUrl,
+    linksExternal: true,
+    locationProtocol
+  });
+  const detailsDom = await getMarkdownVirtualDom(readmeHtml);
+  const newTabs = tabs.map(tab => {
+    return {
+      ...tab,
+      selected: tab.name === Details
+    };
+  });
   return {
-    ...(minimumFractionDigits !== undefined && {
-      minimumFractionDigits
-    }),
-    ...(maximumFractionDigits !== undefined && {
-      maximumFractionDigits
-    }),
-    roundingMode: 'trunc'
+    ...state,
+    detailsVirtualDom: detailsDom,
+    selectedTab: Details,
+    tabs: newTabs
   };
 };
-function prettyBytes(number, options) {
-  if (typeof number !== 'bigint' && !Number.isFinite(number)) {
-    throw new TypeError(`Expected a finite number, got ${typeof number}: ${number}`);
-  }
-  options = {
-    bits: false,
-    binary: false,
-    space: true,
-    nonBreakingSpace: false,
-    ...options
-  };
-  const UNITS = options.bits ? options.binary ? BIBIT_UNITS : BIT_UNITS : options.binary ? BIBYTE_UNITS : BYTE_UNITS;
-  const separator = options.space ? options.nonBreakingSpace ? '\u00A0' : ' ' : '';
 
-  // Handle signed zero case
-  const isZero = typeof number === 'number' ? number === 0 : number === 0n;
-  if (options.signed && isZero) {
-    const result = ` 0${separator}${UNITS[0]}`;
-    return applyFixedWidth(result, options.fixedWidth);
-  }
-  const isNegative = number < 0;
-  const prefix = isNegative ? '-' : options.signed ? '+' : '';
-  if (isNegative) {
-    number = -number;
-  }
-  const localeOptions = buildLocaleOptions(options);
-  let result;
-  if (number < 1) {
-    const numberString = toLocaleString(number, options.locale, localeOptions);
-    result = prefix + numberString + separator + UNITS[0];
-  } else {
-    const exponent = Math.min(Math.floor(options.binary ? log(number) / Math.log(1024) : log10(number) / 3), UNITS.length - 1);
-    number = divide(number, (options.binary ? 1024 : 1000) ** exponent);
-    if (!localeOptions) {
-      const minPrecision = Math.max(3, Math.floor(number).toString().length);
-      number = number.toPrecision(minPrecision);
-    }
-    const numberString = toLocaleString(Number(number), options.locale, localeOptions);
-    const unit = UNITS[exponent];
-    result = prefix + numberString + separator + unit;
+const selectTabFeatures = async state => {
+  const {
+    baseUrl,
+    extension,
+    features,
+    locationProtocol,
+    selectedFeature,
+    tabs
+  } = state;
+  if (features.length === 0) {
+    return state;
   }
-  return applyFixedWidth(result, options.fixedWidth);
-}
-
-const getDisplaySize = size => {
-  return prettyBytes(size, {
-    maximumFractionDigits: 1
+  const actualSelectedFeature = selectedFeature || Theme;
+  const fn = getFeatureDetailsHandler(actualSelectedFeature);
+  const partialNewState = await fn(extension, baseUrl, locationProtocol);
+  const newTabs = tabs.map(tab => {
+    return {
+      ...tab,
+      selected: tab.name === Features
+    };
   });
-};
-
-const supportsFileSize = uri => {
-  if (uri.startsWith('http:') || uri.startsWith('https://')) {
-    return false;
-  }
-  return true;
-};
-const getFolderSize = async uri => {
-  if (!uri) {
-    throw new VError(`uri is required`);
-  }
-  if (!supportsFileSize(uri)) {
-    return 0;
-  }
-  try {
-    // @ts-ignore
-    return await invoke('FileSystem.getFolderSize', uri);
-  } catch {
-    return 0;
-  }
-};
-
-const getMarketplaceEntries = isBuiltin => {
-  if (isBuiltin) {
-    return [];
-  }
-  return [{
-    key: published(),
-    odd: true,
-    value: 'n/a'
-  }, {
-    key: lastReleased(),
-    value: 'n/a'
-  }];
-};
-
-const getLicenseLink = extension => {
-  // TODO
-  return '#';
-};
-
-const ensureValidLink = link => {
-  if (!link) {
-    return '';
-  }
-  try {
-    const parsed = new URL(link);
-    if (parsed.protocol !== 'https:') {
-      return '';
+  const newFeatures = features.map(feature => {
+    if (feature.id === actualSelectedFeature) {
+      return {
+        ...feature,
+        selected: true
+      };
     }
-    return link;
-  } catch {
-    return '';
-  }
-};
-
-const getRepositoryLinkRaw = extension => {
-  if (extension && hasProperty(extension, 'repository') && typeof extension.repository === 'string') {
-    return extension.repository; // TODO watch out for javascript: or other invalid links or path traversal
-  }
-  return '';
-};
-const getRepositoryLink = extension => {
-  const raw = getRepositoryLinkRaw(extension);
-  const validLink = ensureValidLink(raw);
-  return validLink;
-};
-const getIssuesLink = extension => {
-  const repositoryLink = getRepositoryLink(extension);
-  if (!repositoryLink) {
-    return '';
-  }
-  if (repositoryLink && repositoryLink.startsWith('https://github.com')) {
-    return `${repositoryLink}/issues`;
-  }
-  return '';
+    return {
+      ...feature,
+      selected: false
+    };
+  });
+  return {
+    ...state,
+    ...partialNewState,
+    features: newFeatures,
+    selectedFeature: features[0].id || '',
+    selectedTab: Features,
+    tabs: newTabs
+  };
 };
 
-const getResources = (isBuiltin, extension) => {
-  if (isBuiltin) {
-    return [];
-  }
-  const repositoryLink = getRepositoryLink(extension);
-  const issueLink = getIssuesLink(extension);
-  const licenseLink = getLicenseLink();
-  // TODO
-  return [{
-    icon: 'LinkExternal',
-    label: marketplace(),
-    url: '#'
-  }, {
-    icon: 'LinkExternal',
-    label: issues(),
-    url: issueLink
-  }, {
-    icon: 'Repo',
-    label: repository(),
-    url: repositoryLink
-  }, {
-    icon: 'LinkExternal',
-    label: license(),
-    url: licenseLink
-  }];
+const getSelectTabHandler = name => {
+  switch (name) {
+    case Changelog:
+      return selectTabChangelog;
+    case Details:
+      return selectTabDetails;
+    case Features:
+      return selectTabFeatures;
+    default:
+      return selectTabDefault;
+  }
 };
 
-const loadSideBarContent = async (extensionId, extensionVersion, extensionUri, isBuiltin, extension, showSizeLink) => {
-  const folderSize = await getFolderSize(extensionUri);
-  const displaySize = getDisplaySize(folderSize);
-  const installationEntries = getInstallationEntries(displaySize, extensionId, extensionVersion, extensionUri, showSizeLink);
-  const marketplaceEntries = getMarketplaceEntries(isBuiltin);
-  const categories = getCategories(extension);
-  const resources = getResources(isBuiltin, extension);
-  return {
-    categories,
+const selectTab = (state, name) => {
+  const fn = getSelectTabHandler(name);
+  return fn(state);
+};
+
+const handleTabsClick = (state, name) => {
+  return selectTab(state, name);
+};
+
+const hideSizeLink = state => {
+  const {
     displaySize,
-    folderSize,
+    extensionId,
+    extensionUri,
+    extensionVersion
+  } = state;
+  const newShowSizeLink = false;
+  const installationEntries = getInstallationEntries(displaySize, extensionId, extensionVersion, extensionUri, newShowSizeLink);
+  return {
+    ...state,
     installationEntries,
-    marketplaceEntries,
-    resources
+    showSizeLink: newShowSizeLink
   };
 };
 
-const getSavedChangelogScrollTop = savedState => {
-  if (savedState && typeof savedState === 'object' && 'changelogScrollTop' in savedState && typeof savedState.changelogScrollTop === 'number') {
-    return savedState.changelogScrollTop;
+const sendMessagePortToExtensionHostWorker = async port => {
+  await sendMessagePortToExtensionHostWorker$1(port, 0);
+};
+
+const createExtensionHostWorkerRpc = async () => {
+  try {
+    const rpc = await TransferMessagePortRpcParent.create({
+      commandMap: {},
+      send: sendMessagePortToExtensionHostWorker
+    });
+    return rpc;
+  } catch (error) {
+    throw new VError(error, `Failed to create extension host rpc`);
   }
-  return 0;
 };
 
-const getSavedReadmeScrollTop = savedState => {
-  if (savedState && typeof savedState === 'object' && 'readmeScrollTop' in savedState && typeof savedState.readmeScrollTop === 'number') {
-    return savedState.readmeScrollTop;
+const initializeExtensionHostWorker = async () => {
+  const rpc = await createExtensionHostWorkerRpc();
+  set$4(rpc);
+};
+
+const createExtensionManagementWorkerRpc = async () => {
+  try {
+    const rpc = await TransferMessagePortRpcParent.create({
+      commandMap: {},
+      send: port => sendMessagePortToExtensionManagementWorker(port, 0)
+    });
+    return rpc;
+  } catch (error) {
+    throw new VError(error, `Failed to create extension management rpc`);
   }
-  return 0;
 };
 
-const getSavedSelectedFeature = savedState => {
-  if (savedState && typeof savedState === 'object' && 'selectedFeature' in savedState && typeof savedState.selectedFeature === 'string') {
-    return savedState.selectedFeature;
+const initializeExtensionManagementWorker = async () => {
+  try {
+    const rpc = await createExtensionManagementWorkerRpc();
+    set$8(rpc);
+  } catch {
+    // ignore
   }
-  return Details;
 };
 
-const getSavedSelectedTab = savedState => {
-  if (savedState && typeof savedState === 'object' && 'selectedTab' in savedState && typeof savedState.selectedTab === 'string') {
-    return savedState.selectedTab;
+const sendMessagePortToFileSystemWorker = async port => {
+  await sendMessagePortToFileSystemWorker$1(port, 0);
+};
+
+const createFileSystemWorkerRpc = async () => {
+  try {
+    const rpc = await TransferMessagePortRpcParent.create({
+      commandMap: {},
+      send: sendMessagePortToFileSystemWorker
+    });
+    return rpc;
+  } catch (error) {
+    throw new VError(error, `Failed to create file system worker rpc`);
   }
-  return Details;
 };
 
-const restoreState = savedState => {
-  const selectedTab = getSavedSelectedTab(savedState);
-  const selectedFeature = getSavedSelectedFeature(savedState);
-  const readmeScrollTop = getSavedReadmeScrollTop(savedState);
-  const changelogScrollTop = getSavedChangelogScrollTop(savedState);
-  return {
-    changelogScrollTop,
-    readmeScrollTop,
-    selectedFeature,
-    selectedTab
-  };
+const initializeFileSystemWorker = async () => {
+  const rpc = await createFileSystemWorkerRpc();
+  set$1(rpc);
 };
 
-const isEnabled = tab => {
-  return tab.enabled;
+const sendMessagePortToMarkdownWorker = async port => {
+  await sendMessagePortToMarkdownWorker$1(port, 0);
 };
-const loadContent = async (state, platform, savedState, isTest = false) => {
-  if (isTest) {
-    savedState = undefined;
-  }
-  const {
-    uri,
-    width
-  } = state;
-  const id = getExtensionIdFromUri(uri);
-  const extension = await getExtension(id, platform);
-  if (!extension) {
-    throw new ExtensionNotFoundError(id);
+
+const createMarkdownWorkerRpc = async () => {
+  try {
+    const rpc = await TransferMessagePortRpcParent.create({
+      commandMap: {},
+      send: sendMessagePortToMarkdownWorker
+    });
+    return rpc;
+  } catch (error) {
+    throw new VError(error, `Failed to create markdown worker rpc`);
   }
-  const commit = await getCommit();
-  const headerData = loadHeaderContent(state, platform, extension);
-  const {
-    badge,
-    description,
-    downloadCount,
-    extensionId,
-    extensionUri,
-    extensionVersion,
-    hasColorTheme,
-    iconSrc,
-    name,
-    rating
-  } = headerData;
-  const readmeUrl = join(extensionUri, 'README.md');
-  const changelogUrl = join(extensionUri, 'CHANGELOG.md');
-  const [hasReadme, hasChangelog] = await Promise.all([existsFile(readmeUrl), existsFile(changelogUrl)]);
-  const readmeContent = hasReadme ? await loadReadmeContent(readmeUrl) : noReadmeFound();
-  const baseUrl = getBaseUrl(extension.path, platform);
-  const locationProtocol = location.protocol;
-  const locationHost = location.host;
-  const readmeHtml = await renderMarkdown(readmeContent, {
-    baseUrl,
-    commit,
-    linksExternal: true,
-    locationProtocol
-  });
-  const detailsVirtualDom = await getMarkdownVirtualDom(readmeHtml, {
-    scrollToTopEnabled: true
-  });
-  const isBuiltin = extension?.isBuiltin;
-  const disabled = extension?.disabled;
-  const buttons = getExtensionDetailButtons(hasColorTheme, isBuiltin, disabled);
-  const size = getViewletSize(width);
-  const {
-    changelogScrollTop,
-    readmeScrollTop,
-    selectedFeature,
-    selectedTab
-  } = restoreState(savedState);
-  const features = getFeatures(selectedFeature || Theme, extension);
-  const hasFeatures = features.length > 0;
-  const tabs = getTabs(selectedTab, hasReadme, hasFeatures, hasChangelog);
-  const enabledTabs = tabs.filter(isEnabled);
-  const sizeValue = getViewletSize(width || 0);
-  const showSizeLink = platform !== Web$1;
-  const {
-    categories,
-    displaySize,
-    folderSize,
-    installationEntries,
-    marketplaceEntries,
-    resources
-  } = await loadSideBarContent(extensionId, extensionVersion, extensionUri, isBuiltin, extension, showSizeLink);
-  const padding = getPadding(width);
-  const sideBarWidth = getSideBarWidth(width);
-  const showSideBar = sideBarWidth > 0;
-  return {
-    ...state,
-    badge,
-    baseUrl,
-    buttons,
-    categories,
-    changelogScrollTop,
-    commit,
-    description,
-    detailsVirtualDom,
-    disabled,
-    displaySize,
-    downloadCount,
-    extension,
-    extensionId,
-    extensionUri,
-    extensionVersion,
-    features,
-    folderSize,
-    hasColorTheme,
-    hasReadme,
-    iconSrc,
-    installationEntries,
-    locationHost,
-    locationProtocol,
-    marketplaceEntries,
-    name,
-    paddingLeft: padding,
-    paddingRight: padding,
-    rating,
-    readmeScrollTop,
-    readmeUrl,
-    resources,
-    scrollSource: Script,
-    scrollToTopButtonEnabled: true,
-    selectedTab,
-    showSideBar,
-    showSizeLink,
-    sideBarWidth,
-    sizeOnDisk: size,
-    sizeValue,
-    tabs: enabledTabs
-  };
+};
+
+const initializeMarkdownWorker = async () => {
+  const rpc = await createMarkdownWorkerRpc();
+  set$3(rpc);
+};
+
+const initialize = async () => {
+  // TODO load markdown worker only when needed
+  await Promise.all([initializeMarkdownWorker(), initializeFileSystemWorker(), initializeExtensionHostWorker(), initializeExtensionManagementWorker()]);
 };
 
 const loadContent2 = async (state, savedState, isTest = false) => {
@@ -4828,17 +4926,19 @@ const getAdditionalDetailsVirtualDom = (showAdditionalDetails, firstHeading, ent
   if (!showAdditionalDetails) {
     return [];
   }
+  const sections = [...getAdditionalDetailsEntryVirtualDom(firstHeading, entries, getMoreInfoVirtualDom), ...(secondEntries.length > 0 ? getAdditionalDetailsEntryVirtualDom(secondHeading, secondEntries, getMoreInfoVirtualDom) : []), ...getAdditionalDetailsEntryVirtualDom(thirdHeading, categories, getCategoriesDom), ...getAdditionalDetailsEntryVirtualDom(fourthHeading, resources, getResourcesVirtualDom)];
+  const childCount = secondEntries.length > 0 ? 4 : 3;
   return [{
     childCount: 1,
     className: Aside,
     type: Aside$1
   }, {
-    childCount: 4,
+    childCount: childCount,
     className: AdditionalDetails,
     onContextMenu: HandleAdditionalDetailContextMenu,
     tabIndex: 0,
     type: Div
-  }, ...getAdditionalDetailsEntryVirtualDom(firstHeading, entries, getMoreInfoVirtualDom), ...getAdditionalDetailsEntryVirtualDom(secondHeading, secondEntries, getMoreInfoVirtualDom), ...getAdditionalDetailsEntryVirtualDom(thirdHeading, categories, getCategoriesDom), ...getAdditionalDetailsEntryVirtualDom(fourthHeading, resources, getResourcesVirtualDom)];
+  }, ...sections];
 };
 
 const getNoReadmeVirtualDom = () => {
@@ -4947,10 +5047,11 @@ const getExtensionDetailDescriptionVirtualDom = description => {
   }, text(description)];
 };
 
+const className = mergeClassNames(Button, ButtonPrimary);
 const getButtonVirtualDom = (message, onClick, name) => {
   return [{
     childCount: 1,
-    className: mergeClassNames(Button, ButtonPrimary),
+    className,
     name,
     onClick,
     type: Button$1
@@ -5038,7 +5139,7 @@ const getTabClassName = isSelected => {
   return isSelected ? selectedClassName : defaultClassName;
 };
 
-const getTabVirtualDom = tab => {
+const getTabVirtualDom = (tab, tabIndex, focusedTabIndex) => {
   const {
     label,
     name,
@@ -5046,26 +5147,27 @@ const getTabVirtualDom = tab => {
   } = tab;
   const className = getTabClassName(selected);
   const ariaSelected = selected;
+  const tabIndexValue = tabIndex === focusedTabIndex ? 0 : -1;
   return [{
     ariaSelected,
     childCount: 1,
     className,
     name,
+    onFocus: HandleTabFocus,
     role: Tab,
-    tabIndex: -1,
+    tabIndex: tabIndexValue,
     type: Button$1
   }, text(label)];
 };
 
-const getTabsVirtualDom = tabs => {
+const getTabsVirtualDom = (tabs, focusedTabIndex) => {
   return [{
     childCount: tabs.length,
     className: ExtensionDetailTabs,
     onClick: HandleTabsClick,
     role: TabList,
-    tabIndex: 0,
     type: Div
-  }, ...tabs.flatMap(getTabVirtualDom)];
+  }, ...tabs.flatMap((tab, index) => getTabVirtualDom(tab, index, focusedTabIndex))];
 };
 
 const getClassNames = size => {
@@ -5094,6 +5196,7 @@ const getExtensionDetailVirtualDom = (newState, selectedTab) => {
     changelogVirtualDom,
     description,
     detailsVirtualDom,
+    focusedTabIndex,
     iconSrc,
     name,
     resources,
@@ -5109,7 +5212,7 @@ const getExtensionDetailVirtualDom = (newState, selectedTab) => {
     childCount: 3,
     className: mergeClassNames(Viewlet, ExtensionDetail, sizeClass),
     type: Div
-  }, ...getExtensionDetailHeaderVirtualDom(name, iconSrc, description, badge, buttons, settingsButtonEnabled), ...getTabsVirtualDom(tabs), ...getExtensionDetailContentVirtualDom(detailsVirtualDom, selectedTab, width, scrollToTopButtonEnabled, categories, resources, showAdditionalDetailsBreakpoint, changelogVirtualDom, newState)];
+  }, ...getExtensionDetailHeaderVirtualDom(name, iconSrc, description, badge, buttons, settingsButtonEnabled), ...getTabsVirtualDom(tabs, focusedTabIndex), ...getExtensionDetailContentVirtualDom(detailsVirtualDom, selectedTab, width, scrollToTopButtonEnabled, categories, resources, showAdditionalDetailsBreakpoint, changelogVirtualDom, newState)];
   return dom;
 };
 
@@ -5119,7 +5222,31 @@ const renderDom = (oldState, newState) => {
 };
 
 const renderFocus = (oldState, newState) => {
-  return ['Viewlet.focusElementByName', ''];
+  const {
+    focus,
+    focusedTabIndex,
+    tabs,
+    uid
+  } = newState;
+  if (focus === 451) {
+    const {
+      name
+    } = tabs[focusedTabIndex];
+    return [FocusElementByName, uid, name];
+  }
+  return [FocusElementByName, ''];
+};
+
+const renderFocusContext = (oldState, newState) => {
+  const {
+    focus,
+    uid
+  } = newState;
+  if (focus === 451) {
+    return [SetFocusContext, uid, focus];
+  }
+  // TODO set focus context
+  return [FocusElementByName, ''];
 };
 
 const getScrollTop = (selectedTab, readmeScrollTop, changelogScrollTop) => {
@@ -5153,6 +5280,8 @@ const getRenderer = diffType => {
       return renderCss;
     case RenderFocus:
       return renderFocus;
+    case RenderFocusContext:
+      return renderFocusContext;
     case RenderItems:
       return renderDom;
     case RenderScrollTop:
@@ -5218,6 +5347,9 @@ const renderEventListeners = () => {
   }, {
     name: HandleClickDisable,
     params: ['handleClickDisable']
+  }, {
+    name: HandleClickEnable,
+    params: ['handleClickEnable']
   }, {
     name: HandleClickScrollToTop,
     params: ['handleClickScrollToTop'],
@@ -5238,6 +5370,9 @@ const renderEventListeners = () => {
   }, {
     name: HandleSelectionChange,
     params: ['handleSelectionChange']
+  }, {
+    name: HandleTabFocus,
+    params: ['handleTabFocus', TargetName]
   }];
 };
 
@@ -5278,7 +5413,10 @@ const commandMap = {
   'ExtensionDetail.diff2': diff2,
   'ExtensionDetail.dispose': dispose,
   'ExtensionDetail.executeCopy': wrapCommand(executeCopy),
+  'ExtensionDetail.focusNextTab': wrapCommand(focusNextTab),
+  'ExtensionDetail.focusPreviousTab': wrapCommand(focusPreviousTab),
   'ExtensionDetail.getCommandIds': getCommandIds,
+  'ExtensionDetail.getKeyBindings': getKeyBindings,
   'ExtensionDetail.getMenuEntries': getMenuEntries,
   'ExtensionDetail.getMenuEntries2': wrapGetter(getMenuEntries2),
   'ExtensionDetail.getMenuIds': getMenuIds,
@@ -5292,6 +5430,7 @@ const commandMap = {
   'ExtensionDetail.handleClickSettings': wrapCommand(handleClickSettings),
   'ExtensionDetail.handleClickSize': wrapCommand(handleClickSize),
   'ExtensionDetail.handleClickUninstall': wrapCommand(handleClickUninstall),
+  'ExtensionDetail.handleExtensionsChanged': wrapCommand(handleExtensionsChanged),
   'ExtensionDetail.handleExtensionsStatusUpdate': wrapCommand(handleExtensionsStatusUpdate),
   'ExtensionDetail.handleFeaturesClick': wrapCommand(handleClickFeatures),
   'ExtensionDetail.handleIconError': wrapCommand(handleIconError),
@@ -5300,6 +5439,7 @@ const commandMap = {
   'ExtensionDetail.handleReadmeContextMenu': wrapCommand(handleReadmeContextMenu),
   'ExtensionDetail.handleScroll': wrapCommand(handleScroll),
   'ExtensionDetail.handleSelectionChange': wrapCommand(handleSelectionChange),
+  'ExtensionDetail.handleTabFocus': wrapCommand(handleTabFocus),
   'ExtensionDetail.handleTabsClick': wrapCommand(handleTabsClick),
   'ExtensionDetail.handleWheel': wrapCommand(handleScroll),
   // deprecated