@lvce-editor/extension-detail-view 3.20.0 → 3.22.0

package/dist/extensionDetailViewWorkerMain.js

@@ -424,7 +424,7 @@ const create$4 = (method, params) => {
   };
 };
 const callbacks = Object.create(null);
-const set$2 = (id, fn) => {
+const set$4 = (id, fn) => {
   callbacks[id] = fn;
 };
 const get$2 = id => {
@@ -443,7 +443,7 @@ const registerPromise = () => {
     resolve,
     promise
   } = Promise.withResolvers();
-  set$2(id, resolve);
+  set$4(id, resolve);
   return {
     id,
     promise
@@ -886,6 +886,20 @@ const create$1 = () => {
         };
       };
       return wrapped;
+    },
+    diff(uid, modules, numbers) {
+      const {
+        oldState,
+        newState
+      } = states[uid];
+      const diffResult = [];
+      for (let i = 0; i < modules.length; i++) {
+        const fn = modules[i];
+        if (!fn(oldState, newState)) {
+          diffResult.push(numbers[i]);
+        }
+      }
+      return diffResult;
     }
   };
 };
@@ -897,7 +911,7 @@ const {
   wrapCommand
 } = create$1();
 
-const create = (uid, uri, width, height, platform, assetDir$1) => {
+const create = (uid, uri, x, y, width, height, platform, assetDir$1) => {
   const state = {
     description: '',
     iconSrc: '',
@@ -964,124 +978,6 @@ const getCommandIds = () => {
   return commandIds;
 };
 
-const AdditionalDetails = 'AdditionalDetails';
-const AdditionalDetailsEntry = 'AdditionalDetailsEntry';
-const AdditionalDetailsTitle = 'AdditionalDetailsTitle';
-const Aside = 'Aside';
-const Button$1 = 'Button';
-const ButtonPrimary = 'ButtonPrimary';
-const DefaultMarkdown = 'DefaultMarkdown';
-const Categories = 'Categories';
-const Category = 'Category';
-const Changelog$1 = 'Changelog';
-const DefinitionListItem = 'DefinitionListItem';
-const DefinitionListItemHeading = 'DefinitionListItemHeading';
-const DefinitionListItemValue = 'DefinitionListItemValue';
-const ExtensionDetail = 'ExtensionDetail';
-const ExtensionDetailDescription = 'ExtensionDetailDescription';
-const ExtensionDetailHeader = 'ExtensionDetailHeader';
-const ExtensionDetailHeaderActions = 'ExtensionDetailHeaderActions';
-const ExtensionDetailHeaderDetails = 'ExtensionDetailHeaderDetails';
-const ExtensionDetailIcon = 'ExtensionDetailIcon';
-const ExtensionDetailName = 'ExtensionDetailName';
-const ExtensionDetailPanel = 'ExtensionDetailPanel';
-const ExtensionDetailTab = 'ExtensionDetailTab';
-const ExtensionDetailTabs = 'ExtensionDetailTabs';
-const ExtensionDetailTabSelected = 'ExtensionDetailTabSelected';
-const Feature = 'Feature';
-const FeatureContent = 'FeatureContent';
-const Features$1 = 'Features';
-const FeaturesList = 'FeaturesList';
-const FeatureWebView = 'FeatureWebView';
-const Large$1 = 'Large';
-const Sash = 'Sash';
-const SashVertical = 'SashVertical';
-const MoreInfo = 'MoreInfo';
-const MoreInfoEntry = 'MoreInfoEntry';
-const MoreInfoEntryKey = 'MoreInfoEntryKey';
-const MoreInfoEntryOdd = 'MoreInfoEntryOdd';
-const MoreInfoEntryValue = 'MoreInfoEntryValue';
-const Normal$1 = 'Normal';
-const Resource = 'Resource';
-const Resources = 'Resources';
-const Small$1 = 'Small';
-const Table$1 = 'Table';
-const TableCell = 'TableCell';
-const TableHeading = 'TableHeading';
-const Viewlet = 'Viewlet';
-
-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;
-};
-function prettyBytes(number, options) {
-  if (!Number.isFinite(number)) {
-    throw new TypeError(`Expected a finite number, got ${typeof number}: ${number}`);
-  }
-  options = {
-    bits: false,
-    binary: false,
-    space: true,
-    ...options
-  };
-  const UNITS = options.bits ? options.binary ? BIBIT_UNITS : BIT_UNITS : options.binary ? BIBYTE_UNITS : BYTE_UNITS;
-  const separator = options.space ? ' ' : '';
-  if (options.signed && number === 0) {
-    return ` 0${separator}${UNITS[0]}`;
-  }
-  const isNegative = number < 0;
-  const prefix = isNegative ? '-' : options.signed ? '+' : '';
-  if (isNegative) {
-    number = -number;
-  }
-  let localeOptions;
-  if (options.minimumFractionDigits !== undefined) {
-    localeOptions = {
-      minimumFractionDigits: options.minimumFractionDigits
-    };
-  }
-  if (options.maximumFractionDigits !== undefined) {
-    localeOptions = {
-      maximumFractionDigits: options.maximumFractionDigits,
-      ...localeOptions
-    };
-  }
-  if (number < 1) {
-    const numberString = toLocaleString(number, options.locale, localeOptions);
-    return prefix + numberString + separator + UNITS[0];
-  }
-  const exponent = Math.min(Math.floor(options.binary ? Math.log(number) / Math.log(1024) : Math.log10(number) / 3), UNITS.length - 1);
-  number /= (options.binary ? 1024 : 1000) ** exponent;
-  if (!localeOptions) {
-    number = number.toPrecision(3);
-  }
-  const numberString = toLocaleString(Number(number), options.locale, localeOptions);
-  const unit = UNITS[exponent];
-  return prefix + numberString + separator + unit;
-}
-
-const getDisplaySize = size => {
-  return prettyBytes(size, {
-    maximumFractionDigits: 1
-  });
-};
-
 const emptyObject = {};
 const RE_PLACEHOLDER = /\{(PH\d+)\}/g;
 const i18nString = (key, placeholders = emptyObject) => {
@@ -1172,1331 +1068,1496 @@ const notImplemented = () => {
   return i18nString(NotImplemented);
 };
 
-const A = 53;
-const Button = 1;
-const Div = 4;
-const H1 = 5;
-const H2 = 22;
-const Img = 17;
-const Pre = 51;
-const Table = 9;
-const TBody = 10;
-const Td = 11;
-const Th = 13;
-const THead = 14;
-const Tr = 15;
+const None = 0;
 
-const mergeClassNames = (...classNames) => {
-  return classNames.filter(Boolean).join(' ');
-};
-const Text$1 = 12;
-const text = data => {
-  return {
-    type: Text$1,
-    text: data,
-    childCount: 0
-  };
+const getCopyMenuEntry = () => ({
+  id: 'copy',
+  label: copy(),
+  flags: None,
+  command: 'ClipBoard.execCopy'
+});
+
+const getImageMenuEntries = props => {
+  if (!props.isImage) {
+    return [];
+  }
+  return [{
+    id: 'openImageInNewTab',
+    label: openImageInNewTab(),
+    flags: None,
+    command: 'Open.openUrl',
+    args: [props.url || '']
+  }, {
+    id: 'saveImageAs',
+    label: saveImageAs(),
+    flags: None,
+    command: 'SaveFileAs.saveFileAs',
+    args: ['image.png', props.url || '']
+  }];
 };
 
-const getChangelogVirtualDom = () => {
-  const notImplemented$1 = notImplemented();
-  // TODO set tabpanel role
+const getLinkMenuEntries = props => {
+  if (!props.isLink) {
+    return [];
+  }
   return [{
-    type: Div,
-    className: Changelog$1,
-    childCount: 1
-  }, text(notImplemented$1)];
+    id: 'openInNewTab',
+    label: openInNewTab(),
+    flags: None,
+    command: 'Open.openUrl',
+    args: [props.url || '']
+  }];
 };
 
-const TabList = 'tablist';
-const Tab = 'tab';
-const Panel = 'panel';
+const getMenuEntries = props => [...getLinkMenuEntries(props), ...getImageMenuEntries(props), getCopyMenuEntry()];
 
-const getAdditionalDetailsEntryVirtualDom = (heading, items, renderer) => {
-  return [{
-    type: Div,
-    className: AdditionalDetailsEntry,
-    childCount: 2
-  }, {
-    type: Div,
-    className: AdditionalDetailsTitle,
-    childCount: 1
-  }, text(heading), ...renderer(items)];
+const handleClickDisable = async state => {
+  return state;
 };
 
-const getCategoryVirtualDom = category => {
+const selectFeature = async (state, name) => {
+  if (!name) {
+    return state;
+  }
   const {
-    label
-  } = category;
-  return [{
-    type: Div,
-    className: Category,
-    childCount: 1
-  }, text(label)];
+    features
+  } = state;
+  const newFeatures = features.map(feature => {
+    if (feature.id === name) {
+      return {
+        ...feature,
+        selected: true
+      };
+    }
+    return {
+      ...feature,
+      selected: false
+    };
+  });
+  return {
+    ...state,
+    selectedFeature: name,
+    features: newFeatures
+  };
 };
 
-const getCategoriesDom = categories => {
-  return [{
-    type: Div,
-    className: Categories,
-    childCount: categories.length
-  }, ...categories.flatMap(getCategoryVirtualDom)];
+const handleClickFeatures = async (state, name) => {
+  return selectFeature(state, name);
 };
 
-const parentNode$1 = {
-  type: Div,
-  className: MoreInfoEntryKey,
-  childCount: 1
+const rpcs = Object.create(null);
+const set$3 = (id, rpc) => {
+  rpcs[id] = rpc;
 };
-const getMoreInfoEntryKeyVirtualDom = item => {
-  const {
-    key
-  } = item;
-  return [parentNode$1, text(key)];
+const get = id => {
+  return rpcs[id];
+};
+const RendererWorker$1 = 1;
+const invoke$2 = (method, ...params) => {
+  const rpc = get(RendererWorker$1);
+  // @ts-ignore
+  return rpc.invoke(method, ...params);
+};
+const set$2 = rpc => {
+  set$3(RendererWorker$1, rpc);
+};
+const RendererWorker = {
+  __proto__: null,
+  invoke: invoke$2,
+  set: set$2
 };
 
-const getTag = (onClick, code) => {
-  if (onClick) {
-    return A;
-  }
-  if (code) {
-    // TODO use code tag
-    return Div;
-  }
-  return Div;
-};
-const getClassName = (onClick, code) => {
-  if (onClick) {
-    return MoreInfoEntryValue + ' Link';
-  }
-  if (code) {
-    return MoreInfoEntryValue + ' Code';
-  }
-  return MoreInfoEntryValue;
-};
-const getMoreInfoEntryValueVirtualDom = item => {
+const {
+  invoke,
+  set
+} = RendererWorker;
+
+const handleClickSize = async state => {
   const {
-    value,
-    onClick,
-    code
-  } = item;
-  const type = getTag(onClick, code);
-  const className = getClassName(onClick, code);
-  return [{
-    type: type,
-    className,
-    childCount: 1,
-    onClick
-  }, text(value)];
+    uri
+  } = state.extension;
+  await invoke('OpenNativeFolder.openNativeFolder', uri);
+  return state;
 };
 
-const parentNodeEven = {
-  type: Div,
-  className: MoreInfoEntry,
-  childCount: 2
+const handleClickUninstall = async state => {
+  return state;
 };
-const parentNodeOdd = {
-  type: Div,
-  className: mergeClassNames(MoreInfoEntry, MoreInfoEntryOdd),
-  childCount: 2
+
+const extensionDefaultIcon = assetDir => {
+  return `${assetDir}/icons/extensionDefaultIcon.png`;
 };
-const getMoreInfoEntryVirtualDom = item => {
-  const {
-    odd
-  } = item;
-  const node = odd ? parentNodeOdd : parentNodeEven;
-  return [node, ...getMoreInfoEntryKeyVirtualDom(item), ...getMoreInfoEntryValueVirtualDom(item)];
+const extensionLanguageBasics = assetDir => {
+  return `${assetDir}/icons/language-icon.svg`;
+};
+const extensionTheme = assetDir => {
+  return `${assetDir}/icons/theme-icon.png`;
 };
 
-const getMoreInfoVirtualDom = items => {
-  return [{
-    type: Div,
-    className: MoreInfo,
-    childCount: items.length
-  }, ...items.flatMap(getMoreInfoEntryVirtualDom)];
+const handleIconError = state => {
+  const {
+    iconSrc,
+    assetDir
+  } = state;
+  if (iconSrc === extensionDefaultIcon(assetDir)) {
+    return state;
+  }
+  return {
+    ...state,
+    iconSrc: extensionDefaultIcon(assetDir)
+  };
 };
 
-const resourceNode = {
-  // TODO use link with url
-  type: Div,
-  className: Resource,
-  childCount: 1
+const Changelog$1 = 'Changelog';
+const Commands = 'Commands';
+const Details = 'Details';
+const Features$1 = 'Features';
+const JsonValidation = 'JsonValidation';
+const ProgrammingLanguages = 'ProgrammingLanguages';
+const Settings = 'Settings';
+const WebViews = 'WebViews';
+const Theme = 'Theme';
+
+const selectTabChangelog = async state => {
+  return {
+    ...state,
+    selectedTab: Changelog$1
+  };
 };
-const getResourceVirtualDom = resource => {
-  const {
-    label
-  } = resource;
-  return [resourceNode, text(label)];
+
+const selectTabDefault = async state => {
+  return state;
 };
 
-const getResourcesVirtualDom = resources => {
-  return [{
-    type: Div,
-    className: Resources,
-    childCount: resources.length
-  }, ...resources.flatMap(getResourceVirtualDom)];
+const selectTabDetails = async state => {
+  // TODO load readmo markdown here
+  return {
+    ...state,
+    selectedTab: Details
+  };
 };
 
-const getAdditionalDetailsVirtualDom = (showAdditionalDetails, firstHeading, entries, secondHeading, secondEntries, thirdHeading, categories, fourthHeading, resources) => {
-  if (!showAdditionalDetails) {
-    return [];
+const getThemeItemMarkdown = (heading, items) => {
+  let markdown = '';
+  if (items.length > 0) {
+    markdown += `### ${heading}`;
+    markdown += '\n\n';
+    for (const item of items) {
+      markdown += `- ${item.label}`;
+      markdown += '\n';
+    }
   }
-  return [{
-    type: Div,
-    className: Aside,
-    childCount: 1
-  }, {
-    type: Div,
-    className: AdditionalDetails,
-    tabIndex: 0,
-    childCount: 4
-  }, ...getAdditionalDetailsEntryVirtualDom(firstHeading, entries, getMoreInfoVirtualDom), ...getAdditionalDetailsEntryVirtualDom(secondHeading, secondEntries, getMoreInfoVirtualDom), ...getAdditionalDetailsEntryVirtualDom(thirdHeading, categories, getCategoriesDom), ...getAdditionalDetailsEntryVirtualDom(fourthHeading, resources, getResourcesVirtualDom)];
+  return markdown;
 };
 
-const HandleClickDisable = 'handleClickDisable';
-const HandleClickSize = 'handleClickSize';
-const HandleClickUninstall = 'handleClickUninstall';
-const HandleFeaturesClick = 'handleFeaturesClick';
-const HandleIconError = 'handleIconError';
-const HandleReadmeContextMenu = 'handleReadmeContextMenu';
-const HandleTabsClick = 'handleTabsClick';
+const getColorThemeMarkdown = themes => {
+  const heading = 'Color Themes';
+  return getThemeItemMarkdown(heading, themes);
+};
+const getIconThemeMarkdown = iconThemes => {
+  const heading = 'File Icon Themes';
+  return getThemeItemMarkdown(heading, iconThemes);
+};
+const getProductIconThemeMarkdown = iconThemes => {
+  const heading = 'Product Icon Themes';
+  return getThemeItemMarkdown(heading, iconThemes);
+};
+const getThemeMarkdown = (themes, iconThemes, productIconThemes) => {
+  let markdown = '';
+  markdown += getColorThemeMarkdown(themes);
+  markdown += getIconThemeMarkdown(iconThemes);
+  markdown += getProductIconThemeMarkdown(productIconThemes);
+  return markdown;
+};
 
-const getInstallationEntries = (displaySize, extensionId, extensionVersion) => {
-  const entries = [{
-    key: 'Identifier',
-    value: extensionId,
-    odd: true,
-    code: true
-  }, {
-    key: 'Version',
-    value: extensionVersion,
-    code: true
-  }, {
-    key: 'Last Updated',
-    value: 'n/a',
-    odd: true
-  }, {
-    key: 'Size',
-    value: displaySize,
-    onClick: HandleClickSize
-  }];
-  return entries;
+const renderMarkdown = async (markdown, options = {}) => {
+  // @ts-ignore todo
+  const html = await invoke('Markdown.renderMarkdown', markdown, options);
+  return html;
 };
 
-const RendererWorker = 1;
+const selectTab$1 = async state => {
+  const {
+    extension,
+    baseUrl
+  } = state;
+  const {
+    colorThemes,
+    iconThemes,
+    productIconThemes
+  } = extension;
+  // TODO do this depending on featured tab content
+  const markdown = getThemeMarkdown(colorThemes || [], iconThemes || [], productIconThemes || []);
+  const rendered = await renderMarkdown(markdown, {
+    baseUrl
+  });
+  return {
+    ...state,
+    selectedTab: Features$1,
+    selectedFeatureMarkdownDom: rendered
+  };
+};
 
-const rpcs = Object.create(null);
-const set = (id, rpc) => {
-  rpcs[id] = rpc;
+const getSelectTabHandler = selectedTab => {
+  switch (selectedTab) {
+    case Details:
+      return selectTabDetails;
+    case Features$1:
+      return selectTab$1;
+    case Changelog$1:
+      return selectTabChangelog;
+    default:
+      return selectTabDefault;
+  }
 };
-const get = id => {
-  return rpcs[id];
+
+const selectTab = (state, name) => {
+  const fn = getSelectTabHandler(name);
+  return fn(state);
 };
 
-const invoke = (method, ...params) => {
-  const rpc = get(RendererWorker);
-  return rpc.invoke(method, ...params);
+const handleTabsClick = (state, name) => {
+  return selectTab(state, name);
 };
 
-const getMarkdownVirtualDom = async html => {
-  string(html);
-  const dom = await invoke('Markdown.getVirtualDom', html);
-  return dom;
+const isLanguageBasicsExtension = extension => {
+  return extension.name && extension.name.startsWith('Language Basics');
 };
 
-const getMarketplaceEntries = () => {
-  return [{
-    key: 'Published',
-    value: 'n/a',
-    odd: true
-  }, {
-    key: 'Last Released',
-    value: 'n/a'
-  }];
+const isThemeExtension = extension => {
+  return extension.name && extension.name.endsWith(' Theme');
 };
 
-const getDetailsVirtualDom = async (sanitizedReadmeHtml, displaySize, extensionId, extensionVersion, width) => {
-  const firstHeading = 'Installation';
-  const entries = getInstallationEntries(displaySize, extensionId, extensionVersion);
-  const secondHeading = 'Marketplace';
-  const secondEntries = getMarketplaceEntries();
-  const thirdHeading = 'Categories';
-  const categories = [{
-    id: 'themes',
-    label: 'Themes'
-  }];
-  const fourthHeading = 'Resources';
-  const resources = [{
-    label: 'Marketplace',
-    url: '#'
-  }, {
-    label: 'Issues',
-    url: '#'
-  }, {
-    label: 'Repository',
-    url: '#'
-  }, {
-    label: 'License',
-    url: '#'
-  }];
-  const showAdditionalDetailsBreakpoint = 600;
-  const showAdditionalDetails = width > showAdditionalDetailsBreakpoint;
-  const childCount = showAdditionalDetails ? 2 : 1;
-  const dom = [{
-    type: Div,
-    className: ExtensionDetailPanel,
-    childCount: childCount,
-    role: Panel
-  }, ...(await getMarkdownVirtualDom(sanitizedReadmeHtml)), ...getAdditionalDetailsVirtualDom(showAdditionalDetails, firstHeading, entries, secondHeading, secondEntries, thirdHeading, categories, fourthHeading, resources)];
-  return dom;
-};
-
-const Text = 1;
-const Code = 2;
+const Web = 1;
+const Electron = 2;
+const Remote = 3;
 
-const getCommandTableEntry = command => {
-  // TODO watch out for command being null/undefined/number/string/array
-  const {
-    id,
-    label
-  } = command;
-  return [{
-    type: Code,
-    value: id
-  }, {
-    type: Text,
-    value: label
-  }];
+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 getCommandTableEntries = extension => {
-  const commands = extension.commands || [];
-  const rows = commands.map(getCommandTableEntry);
-  const id$1 = id();
-  const label$1 = label();
-  return {
-    headings: [id$1, label$1],
-    rows
-  };
+const getDescription = extension => {
+  if (!extension || !extension.description) {
+    return 'n/a';
+  }
+  return extension.description;
 };
 
-const getFeatureContentHeadingVirtualDom = heading => {
-  return [{
-    type: H1,
-    childCount: 1
-  }, text(heading)];
+const getName = extension => {
+  if (extension && extension.name) {
+    return extension.name;
+  }
+  if (extension && extension.id) {
+    return extension.id;
+  }
+  return 'n/a';
 };
 
-const getTableHeadingVirtualDom = heading => {
-  return [{
-    type: Th,
-    className: TableHeading,
-    childCount: 1
-  }, text(heading)];
+const getAllExtensions = async platform => {
+  if (platform === Web) {
+    return [];
+  }
+  return invoke('ExtensionManagement.getAllExtensions');
+};
+const getExtension$1 = async (id, platform) => {
+  // TODO only ask one extension from renderer worker instead of all
+  const allExtensions = await getAllExtensions(platform);
+  for (const extension of allExtensions) {
+    if (extension.id === id) {
+      return extension;
+    }
+  }
+  return undefined;
 };
 
-const getCellCodeVirtualDom = value => {
-  return [{
-    type: Td,
-    className: TableCell,
-    childCount: 1
-  }, {
-    type: Div,
-    // TODO use code tag
-    childCount: 1
-  }, text(value)];
+const getExtensionNew = async id => {
+  // @ts-ignore todo
+  return invoke('ExtensionManagement.getExtension', id);
+};
+const getExtension = async (id, platform) => {
+  try {
+    return await getExtensionNew(id);
+  } catch {
+    return getExtension$1(id, platform);
+  }
 };
 
-const getCellTextVirtualDom = value => {
-  return [{
-    type: Td,
-    className: TableCell,
-    childCount: 1
-  }, text(value)];
+const getRemoteSrc = uri => {
+  const src = `/remote${uri}`;
+  return src;
 };
 
-const getCellRenderer = type => {
-  switch (type) {
-    case Code:
-      return getCellCodeVirtualDom;
-    case Text:
-      return getCellTextVirtualDom;
+const getBaseUrl = (extensionPath, platform) => {
+  switch (platform) {
+    case Remote:
+    case Electron:
+      return getRemoteSrc(extensionPath + '/');
     default:
-      throw new Error(`unexpected cell type ${type}`);
+      return extensionPath;
   }
 };
 
-const getCellVirtualDom = entry => {
-  const {
-    value,
-    type
-  } = entry;
-  const fn = getCellRenderer(type);
-  return fn(value);
+const getExtensionIdFromUri = uri => {
+  const id = uri.slice('extension-detail://'.length);
+  return id;
 };
 
-const getTableRowVirtualDom = entries => {
-  return [{
-    type: Tr,
-    childCount: entries.length
-  }, ...entries.flatMap(getCellVirtualDom)];
+const hasThemes = extension => {
+  return extension && (extension.colorThemes || extension.iconThemes || extension.productIconThemes);
 };
-
-const getTableVirtualDom = tableInfo => {
-  const {
-    headings,
-    rows
-  } = tableInfo;
-  return [{
-    type: Table,
-    className: Table$1,
-    childCount: 2
-  }, {
-    type: THead,
-    childCount: 1
-  }, {
-    type: Tr,
-    childCount: headings.length
-  }, ...headings.flatMap(getTableHeadingVirtualDom), {
-    type: TBody,
-    childCount: rows.length
-  }, ...rows.flatMap(getTableRowVirtualDom)];
+const hasCommands = extension => {
+  return extension && extension.commands;
 };
-
-// TODO have typed view-model
-const getFeatureCommandsVirtualDom = extension => {
-  const heading = commands();
-  const tableInfo = getCommandTableEntries(extension);
-  return [{
-    type: Div,
-    className: FeatureContent,
-    childCount: 2
-  }, ...getFeatureContentHeadingVirtualDom(heading), ...getTableVirtualDom(tableInfo)];
+const hasJsonValidation = extension => {
+  return extension && extension.jsonValidation;
 };
-
-const getJsonValidationTableEntry = validation => {
-  const {
-    fileMatch,
-    schema
-  } = validation;
+const hasProgrammingLanguages = extension => {
+  return extension && extension.programmingLanguages;
+};
+const hasSettings = extension => {
+  return extension && extension.settings;
+};
+const hasWebViews = extension => {
+  return extension && extension.webViews;
+};
+const ifElseFeature = (id, label, isEnabled, selectedFeature, extension) => {
+  if (!isEnabled(extension)) {
+    return [];
+  }
   return [{
-    type: Code,
-    value: fileMatch
-  }, {
-    type: Code,
-    value: schema
+    id,
+    label,
+    selected: selectedFeature === id
   }];
 };
-
-const getJsonValidationTableEntries = extension => {
-  const validations = extension.jsonValidation || [];
-  const rows = validations.map(getJsonValidationTableEntry);
-  return {
-    headings: [fileMatch(), schema()],
-    rows
-  };
+const getFeatures = (selectedFeature, extension) => {
+  if (!selectedFeature) {
+    selectedFeature = Theme;
+  }
+  const textTheme = theme();
+  const textCommands = commands();
+  const textJsonValidation = jsonValidation();
+  const programmingLanguages$1 = programmingLanguages();
+  const settings$1 = settings();
+  const webViews$1 = webViews();
+  const features = [...ifElseFeature(Theme, textTheme, hasThemes, selectedFeature, extension), ...ifElseFeature(Commands, textCommands, hasCommands, selectedFeature, extension), ...ifElseFeature(JsonValidation, textJsonValidation, hasJsonValidation, selectedFeature, extension), ...ifElseFeature(ProgrammingLanguages, programmingLanguages$1, hasProgrammingLanguages, selectedFeature, extension), ...ifElseFeature(Settings, settings$1, hasSettings, selectedFeature, extension), ...ifElseFeature(WebViews, webViews$1, hasWebViews, selectedFeature, extension)];
+  return features;
 };
 
-const parentNode = {
-  type: Div,
-  className: FeatureContent,
-  childCount: 2
-};
-const getFeatureJsonValidationVirtualDom = extension => {
-  const heading = jsonValidation();
-  const tableInfo = getJsonValidationTableEntries(extension);
-  return [parentNode, ...getFeatureContentHeadingVirtualDom(heading), ...getTableVirtualDom(tableInfo)];
+const getFolderSize = async uri => {
+  if (!uri) {
+    throw new VError(`uri is required`);
+  }
+  try {
+    // @ts-ignore todo
+    return await invoke('FileSystem.getFolderSize', uri);
+  } catch {
+    return 0;
+  }
 };
 
-const getFeatureNotImplementedVirtualDom = () => {
-  const heading = 'Not implemented';
-  return [{
-    type: Div,
-    className: FeatureContent,
-    childCount: 1
-  }, {
-    type: H1,
-    childCount: 1
-  }, text(heading)];
-};
+const Small$1 = 1;
+const Normal$1 = 2;
+const Large$1 = 3;
 
-const getFeatureProgrammingLanguagesVirtualDom = () => {
-  const heading = programmingLanguages();
-  // TODO
-  return [{
-    type: Div,
-    className: FeatureContent,
-    childCount: 1
-  }, ...getFeatureContentHeadingVirtualDom(heading)];
+const getViewletSize = width => {
+  if (width < 180) {
+    return Small$1;
+  }
+  if (width < 768) {
+    return Normal$1;
+  }
+  return Large$1;
 };
 
-const getSettingsTableEntry = setting => {
-  const {
-    id,
-    label
-  } = setting;
-  // TODO watch out for  null/undefined/number/string/array
-  return [{
-    type: Text,
-    value: id
-  }, {
-    type: Text,
-    value: label
-  }];
+const readFile = async uri => {
+  if (uri.startsWith('http://') || uri.startsWith('https://')) {
+    const response = await fetch(uri);
+    if (!response.ok) {
+      throw new Error(response.statusText);
+    }
+    const result = await response.text();
+    return result;
+  }
+  return invoke('FileSystem.readFile', uri);
 };
 
-const getSettingsTableEntries = extension => {
-  const settings = extension.settings || [];
-  const rows = settings.map(getSettingsTableEntry);
-  const textId = id();
-  const textLabel = label();
-  return {
-    headings: [textId, textLabel],
-    rows
-  };
+const ENOENT = 'ENOENT';
+
+const isEnoentError = error => {
+  return error && error.code === ENOENT;
 };
 
-const getFeatureSettingsVirtualDom = extension => {
-  const heading = settings();
-  const tableInfo = getSettingsTableEntries(extension);
-  return [{
-    type: Div,
-    className: FeatureContent,
-    childCount: 2
-  }, ...getFeatureContentHeadingVirtualDom(heading), ...getTableVirtualDom(tableInfo)];
+const join = (pathSeparator, ...parts) => {
+  return parts.join(pathSeparator);
 };
 
-const getVirtualDomChildCount = markdownDom => {
-  const max = markdownDom.length - 1;
-  let stack = [];
-  for (let i = max; i >= 0; i--) {
-    const element = markdownDom[i];
-    if (element.childCount > 0) {
-      stack = stack.slice(element.childCount);
+const loadReadmeContent = async path => {
+  try {
+    const readmeUrl = join('/', path, 'README.md');
+    const readmeContent = await readFile(readmeUrl);
+    return readmeContent;
+  } catch (error) {
+    if (isEnoentError(error)) {
+      return '';
     }
-    stack.unshift(element);
+    console.error(new VError(error, 'Failed to load Readme content'));
+    return `${error}`;
   }
-  return stack.length;
 };
 
-const getFeatureThemesVirtualDom = async themesHtml => {
-  const markdownDom = await getMarkdownVirtualDom(themesHtml);
-  const childCount = getVirtualDomChildCount(markdownDom);
-  const heading = theme();
-  return [{
-    type: Div,
-    className: FeatureContent,
-    childCount: 2
-  }, ...getFeatureContentHeadingVirtualDom(heading), {
-    type: Div,
-    className: DefaultMarkdown,
-    childCount
-  }, ...markdownDom];
+const getSavedSelectedFeature = savedState => {
+  if (savedState && typeof savedState === 'object' && 'selectedFeature' in savedState && typeof savedState.selectedFeature === 'string') {
+    return savedState.selectedFeature;
+  }
+  return Details;
 };
 
-const toWebView = rawWebView => {
-  const {
-    id,
-    selector,
-    contentSecurityPolicy,
-    elements
-  } = rawWebView;
-  return {
-    id,
-    selectorString: JSON.stringify(selector),
-    contentSecurityPolicyString: JSON.stringify(contentSecurityPolicy),
-    elementsString: JSON.stringify(elements, null, 2)
-  };
+const getSavedSelectedTab = savedState => {
+  if (savedState && typeof savedState === 'object' && 'selectedTab' in savedState && typeof savedState.selectedTab === 'string') {
+    return savedState.selectedTab;
+  }
+  return Details;
 };
 
-const getWebViews = extension => {
-  const rawWebViews = extension.webViews || [];
-  return rawWebViews.map(toWebView);
+const restoreState = savedState => {
+  const selectedTab = getSavedSelectedTab(savedState);
+  const selectedFeature = getSavedSelectedFeature(savedState);
+  return {
+    selectedFeature,
+    selectedTab
+  };
 };
 
-const heading = {
-  type: H2,
-  className: DefinitionListItemHeading,
-  childCount: 1
-};
-const pre = {
-  type: Pre,
-  className: DefinitionListItemValue,
-  childCount: 1
-};
-const item = {
-  type: Div,
-  className: DefinitionListItem,
-  childCount: 2
-};
-const getWebViewVirtualDom = webView => {
+const loadContent = async (state, platform, savedState) => {
   const {
-    id: id$1,
-    selectorString,
-    contentSecurityPolicyString,
-    elementsString
-  } = webView;
-  const textId = id();
-  const textSelector = selector();
-  const textContentSecurityPolicy = contentSecurityPolicy();
-  const textElements = elements();
-  return [{
-    type: Div,
-    className: FeatureWebView,
-    childCount: 5
-  }, item, heading, text(textId), pre, text(id$1), item, heading, text(textSelector), pre, text(selectorString), item, heading, text(textContentSecurityPolicy), pre, text(contentSecurityPolicyString), item, heading, text(textElements), pre, text(elementsString)];
+    uri,
+    width,
+    assetDir
+  } = state;
+  const id = getExtensionIdFromUri(uri);
+  const extension = await getExtension(id, platform);
+  const readmeContent = await loadReadmeContent(extension.path);
+  const baseUrl = getBaseUrl(extension.path, platform);
+  const readmeHtml = await renderMarkdown(readmeContent, {
+    baseUrl
+  });
+  const sanitizedReadmeHtml = readmeHtml;
+  const normalizedReadmeHtml = sanitizedReadmeHtml;
+  const iconSrc = getIcon(extension, platform, assetDir);
+  const description = getDescription(extension);
+  const name = getName(extension);
+  const size = getViewletSize(width);
+  const {
+    selectedFeature,
+    selectedTab
+  } = restoreState(savedState);
+  const features = getFeatures(selectedFeature, extension);
+  const extensionUri = extension.uri || extension.path;
+  const folderSize = await getFolderSize(extensionUri);
+  const entries = [{
+    key: 'Identifier',
+    value: 'abc'
+  }, {
+    key: 'Version',
+    value: '1.9.5'
+  }, {
+    key: 'Last Updated',
+    value: 'n/a'
+  }];
+  const secondEntries = [{
+    key: 'Published',
+    value: 'n/a'
+  }, {
+    key: 'Last Released',
+    value: 'n/a'
+  }];
+  const categories = [{
+    id: 'themes',
+    label: 'Themes'
+  }];
+  const resources = [{
+    label: 'Marketplace',
+    url: '#'
+  }, {
+    label: 'Issues',
+    url: '#'
+  }, {
+    label: 'Repository',
+    url: '#'
+  }, {
+    label: 'License',
+    url: '#'
+  }];
+  return {
+    ...state,
+    selectedTab,
+    sanitizedReadmeHtml: normalizedReadmeHtml,
+    iconSrc,
+    name,
+    description,
+    sizeOnDisk: size,
+    entries,
+    secondEntries,
+    categories,
+    resources,
+    extension,
+    baseUrl,
+    features,
+    folderSize
+  };
 };
 
-const getFeatureWebViewsVirtualDom = extension => {
-  const webViews$1 = getWebViews(extension);
-  const heading = webViews();
-  return [{
-    type: Div,
-    className: FeatureContent,
-    childCount: 2
-  }, ...getFeatureContentHeadingVirtualDom(heading), {
-    type: Div,
-    childCount: webViews$1.length
-  }, ...webViews$1.flatMap(getWebViewVirtualDom)];
+const loadContent2 = async (state, savedState) => {
+  return loadContent(state, state.platform, savedState);
 };
 
+const AdditionalDetails = 'AdditionalDetails';
+const AdditionalDetailsEntry = 'AdditionalDetailsEntry';
+const AdditionalDetailsTitle = 'AdditionalDetailsTitle';
+const Aside = 'Aside';
+const Button$1 = 'Button';
+const ButtonPrimary = 'ButtonPrimary';
+const DefaultMarkdown = 'DefaultMarkdown';
+const Categories = 'Categories';
+const Category = 'Category';
 const Changelog = 'Changelog';
-const Commands = 'Commands';
-const Details = 'Details';
+const DefinitionListItem = 'DefinitionListItem';
+const DefinitionListItemHeading = 'DefinitionListItemHeading';
+const DefinitionListItemValue = 'DefinitionListItemValue';
+const ExtensionDetail = 'ExtensionDetail';
+const ExtensionDetailDescription = 'ExtensionDetailDescription';
+const ExtensionDetailHeader = 'ExtensionDetailHeader';
+const ExtensionDetailHeaderActions = 'ExtensionDetailHeaderActions';
+const ExtensionDetailHeaderDetails = 'ExtensionDetailHeaderDetails';
+const ExtensionDetailIcon = 'ExtensionDetailIcon';
+const ExtensionDetailName = 'ExtensionDetailName';
+const ExtensionDetailPanel = 'ExtensionDetailPanel';
+const ExtensionDetailTab = 'ExtensionDetailTab';
+const ExtensionDetailTabs = 'ExtensionDetailTabs';
+const ExtensionDetailTabSelected = 'ExtensionDetailTabSelected';
+const Feature = 'Feature';
+const FeatureContent = 'FeatureContent';
 const Features = 'Features';
-const JsonValidation = 'JsonValidation';
-const ProgrammingLanguages = 'ProgrammingLanguages';
-const Settings = 'Settings';
-const WebViews = 'WebViews';
-const Theme = 'Theme';
+const FeaturesList = 'FeaturesList';
+const FeatureWebView = 'FeatureWebView';
+const Large = 'Large';
+const Sash = 'Sash';
+const SashVertical = 'SashVertical';
+const MoreInfo = 'MoreInfo';
+const MoreInfoEntry = 'MoreInfoEntry';
+const MoreInfoEntryKey = 'MoreInfoEntryKey';
+const MoreInfoEntryOdd = 'MoreInfoEntryOdd';
+const MoreInfoEntryValue = 'MoreInfoEntryValue';
+const Normal = 'Normal';
+const Resource = 'Resource';
+const Resources = 'Resources';
+const Small = 'Small';
+const Table$1 = 'Table';
+const TableCell = 'TableCell';
+const TableHeading = 'TableHeading';
+const Viewlet = 'Viewlet';
 
-const getFeatureContentVirtualDom = async (features, themesHtml, selectedFeature, extension) => {
-  switch (selectedFeature) {
-    case Theme:
-      return await getFeatureThemesVirtualDom(themesHtml);
-    case Commands:
-      return getFeatureCommandsVirtualDom(extension);
-    case JsonValidation:
-      return getFeatureJsonValidationVirtualDom(extension);
-    case ProgrammingLanguages:
-      return getFeatureProgrammingLanguagesVirtualDom();
-    case Settings:
-      return getFeatureSettingsVirtualDom(extension);
-    case WebViews:
-      return getFeatureWebViewsVirtualDom(extension);
-    default:
-      return getFeatureNotImplementedVirtualDom();
+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;
+};
+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,
+    ...options
+  };
+  const UNITS = options.bits ? options.binary ? BIBIT_UNITS : BIT_UNITS : options.binary ? BIBYTE_UNITS : BYTE_UNITS;
+  const separator = options.space ? ' ' : '';
+  if (options.signed && (typeof number === 'number' ? number === 0 : number === 0n)) {
+    return ` 0${separator}${UNITS[0]}`;
+  }
+  const isNegative = number < 0;
+  const prefix = isNegative ? '-' : options.signed ? '+' : '';
+  if (isNegative) {
+    number = -number;
+  }
+  let localeOptions;
+  if (options.minimumFractionDigits !== undefined) {
+    localeOptions = {
+      minimumFractionDigits: options.minimumFractionDigits
+    };
   }
+  if (options.maximumFractionDigits !== undefined) {
+    localeOptions = {
+      maximumFractionDigits: options.maximumFractionDigits,
+      ...localeOptions
+    };
+  }
+  if (number < 1) {
+    const numberString = toLocaleString(number, options.locale, localeOptions);
+    return prefix + numberString + separator + UNITS[0];
+  }
+  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) {
+    number = number.toPrecision(3);
+  }
+  const numberString = toLocaleString(Number(number), options.locale, localeOptions);
+  const unit = UNITS[exponent];
+  return prefix + numberString + separator + unit;
+}
+
+const getDisplaySize = size => {
+  return prettyBytes(size, {
+    maximumFractionDigits: 1
+  });
 };
 
-const getFeatureListItemVirtualDom = feature => {
-  const {
-    label,
-    selected,
-    id
-  } = feature;
-  const className = selected ? 'Feature FeatureSelected' : Feature;
-  return [{
-    // TODO use role list item or tab
-    type: Button,
-    name: id,
-    className,
-    childCount: 1
-  }, text(label)];
+const A = 53;
+const Button = 1;
+const Div = 4;
+const H1 = 5;
+const H2 = 22;
+const Img = 17;
+const Pre = 51;
+const Table = 9;
+const TBody = 10;
+const Td = 11;
+const Th = 13;
+const THead = 14;
+const Tr = 15;
+
+const mergeClassNames = (...classNames) => {
+  return classNames.filter(Boolean).join(' ');
+};
+const Text$1 = 12;
+const text = data => {
+  return {
+    type: Text$1,
+    text: data,
+    childCount: 0
+  };
 };
 
-const getFeatureListVirtualDom = features => {
+const getChangelogVirtualDom = () => {
+  const notImplemented$1 = notImplemented();
+  // TODO set tabpanel role
   return [{
-    // TODO use either list or tabs role
     type: Div,
-    className: FeaturesList,
-    childCount: features.length,
-    onClick: HandleFeaturesClick
-  }, ...features.flatMap(getFeatureListItemVirtualDom)];
+    className: Changelog,
+    childCount: 1
+  }, text(notImplemented$1)];
 };
 
-const getFeaturesVirtualDom = async (features, themesHtml, selectedFeature, extension) => {
-  if (features.length === 0) {
-    const none$1 = none();
-    return [{
-      type: Div,
-      className: Features$1,
-      childCount: 3
-    }, text(none$1)];
-  }
+const TabList = 'tablist';
+const Tab = 'tab';
+const Panel = 'panel';
+
+const getAdditionalDetailsEntryVirtualDom = (heading, items, renderer) => {
   return [{
     type: Div,
-    className: Features$1,
-    childCount: 3
-  }, ...getFeatureListVirtualDom(features), {
+    className: AdditionalDetailsEntry,
+    childCount: 2
+  }, {
     type: Div,
-    className: mergeClassNames(Sash, SashVertical),
-    childCount: 0
-  }, ...(await getFeatureContentVirtualDom(features, themesHtml, selectedFeature, extension))];
-};
-
-const getExtensionDetailContentVirtualDom = async (sanitizedReadmeHtml, themesHtml, selectedTab, features, displaySize, extensionId, extensionVersion, selectedFeature, extension, width) => {
-  switch (selectedTab) {
-    case Details:
-      return await getDetailsVirtualDom(sanitizedReadmeHtml, displaySize, extensionId, extensionVersion, width);
-    case Features:
-      return await getFeaturesVirtualDom(features, themesHtml, selectedFeature, extension);
-    case Changelog:
-      return getChangelogVirtualDom();
-    default:
-      return [];
-  }
+    className: AdditionalDetailsTitle,
+    childCount: 1
+  }, text(heading), ...renderer(items)];
 };
 
-const getButtonVirtualDom = (message, onClick) => {
+const getCategoryVirtualDom = category => {
+  const {
+    label
+  } = category;
   return [{
-    type: Button,
-    className: mergeClassNames(Button$1, ButtonPrimary),
-    onClick,
+    type: Div,
+    className: Category,
     childCount: 1
-  }, text(message)];
+  }, text(label)];
 };
 
-const getExtensionDetailHeaderActionsVirtualDom = () => {
-  const dom = [{
+const getCategoriesDom = categories => {
+  return [{
     type: Div,
-    className: ExtensionDetailHeaderActions,
-    childCount: 2
-  }, ...getButtonVirtualDom('Disable', HandleClickDisable), ...getButtonVirtualDom('Uninstall', HandleClickUninstall)];
-  return dom;
+    className: Categories,
+    childCount: categories.length
+  }, ...categories.flatMap(getCategoryVirtualDom)];
 };
 
-const getExtensionDetailHeaderVirtualDom = extensionDetail => {
+const parentNode$1 = {
+  type: Div,
+  className: MoreInfoEntryKey,
+  childCount: 1
+};
+const getMoreInfoEntryKeyVirtualDom = item => {
   const {
-    name,
-    iconSrc,
-    description
-  } = extensionDetail;
-  const dom = [{
-    type: Div,
-    className: ExtensionDetailHeader,
-    childCount: 2
-  }, {
-    type: Img,
-    className: ExtensionDetailIcon,
-    alt: '',
-    draggable: false,
-    childCount: 0,
-    src: iconSrc
-  }, {
-    type: Div,
-    className: ExtensionDetailHeaderDetails,
-    childCount: 3
-  }, {
-    type: Div,
-    className: ExtensionDetailName,
-    childCount: 1
-  }, text(name), {
-    type: Div,
-    className: ExtensionDetailDescription,
-    childCount: 1
-  }, text(description), ...getExtensionDetailHeaderActionsVirtualDom()];
-  return dom;
+    key
+  } = item;
+  return [parentNode$1, text(key)];
 };
 
-const hasThemes = extension => {
-  return extension && (extension.colorThemes || extension.iconThemes || extension.productIconThemes);
-};
-const hasCommands = extension => {
-  return extension && extension.commands;
-};
-const hasJsonValidation = extension => {
-  return extension && extension.jsonValidation;
-};
-const hasProgrammingLanguages = extension => {
-  return extension && extension.programmingLanguages;
-};
-const hasSettings = extension => {
-  return extension && extension.settings;
-};
-const hasWebViews = extension => {
-  return extension && extension.webViews;
-};
-const ifElseFeature = (id, label, isEnabled, selectedFeature, extension) => {
-  if (!isEnabled(extension)) {
-    return [];
+const getTag = (onClick, code) => {
+  if (onClick) {
+    return A;
   }
-  return [{
-    id,
-    label,
-    selected: selectedFeature === id
-  }];
-};
-const getFeatures = (selectedFeature, extension) => {
-  if (!selectedFeature) {
-    selectedFeature = Theme;
+  if (code) {
+    // TODO use code tag
+    return Div;
   }
-  const textTheme = theme();
-  const textCommands = commands();
-  const textJsonValidation = jsonValidation();
-  const programmingLanguages$1 = programmingLanguages();
-  const settings$1 = settings();
-  const webViews$1 = webViews();
-  const features = [...ifElseFeature(Theme, textTheme, hasThemes, selectedFeature, extension), ...ifElseFeature(Commands, textCommands, hasCommands, selectedFeature, extension), ...ifElseFeature(JsonValidation, textJsonValidation, hasJsonValidation, selectedFeature, extension), ...ifElseFeature(ProgrammingLanguages, programmingLanguages$1, hasProgrammingLanguages, selectedFeature, extension), ...ifElseFeature(Settings, settings$1, hasSettings, selectedFeature, extension), ...ifElseFeature(WebViews, webViews$1, hasWebViews, selectedFeature, extension)];
-  return features;
+  return Div;
 };
-
-const getTabs = selectedTab => {
-  const tabs = [{
-    label: 'Details',
-    name: Details,
-    selected: selectedTab === Details
-  }, {
-    label: 'Features',
-    name: Features,
-    selected: selectedTab === Features
-  }, {
-    label: 'Changelog',
-    name: Changelog,
-    selected: selectedTab === Changelog
-  }];
-  return tabs;
+const getClassName = (onClick, code) => {
+  if (onClick) {
+    return MoreInfoEntryValue + ' Link';
+  }
+  if (code) {
+    return MoreInfoEntryValue + ' Code';
+  }
+  return MoreInfoEntryValue;
 };
-
-const selectedClassName = mergeClassNames(ExtensionDetailTab, ExtensionDetailTabSelected);
-const defaultClassName = ExtensionDetailTab;
-const getTabVirtualDom = tab => {
+const getMoreInfoEntryValueVirtualDom = item => {
   const {
-    label,
-    selected,
-    name
-  } = tab;
-  const className = selected ? selectedClassName : defaultClassName;
-  const ariaSelected = selected ? 'true' : 'false';
+    value,
+    onClick,
+    code
+  } = item;
+  const type = getTag(onClick, code);
+  const className = getClassName(onClick, code);
   return [{
-    type: Button,
-    role: Tab,
-    name,
+    type: type,
     className,
     childCount: 1,
-    tabIndex: -1,
-    ariaSelected
-  }, text(label)];
+    onClick
+  }, text(value)];
 };
 
-const getTabsVirtualDom = tabs => {
-  return [{
-    type: Div,
-    className: ExtensionDetailTabs,
-    childCount: tabs.length,
-    role: TabList,
-    onClick: HandleTabsClick,
-    tabIndex: 0
-  }, ...tabs.flatMap(getTabVirtualDom)];
+const parentNodeEven = {
+  type: Div,
+  className: MoreInfoEntry,
+  childCount: 2
 };
-
-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 parentNodeOdd = {
+  type: Div,
+  className: mergeClassNames(MoreInfoEntry, MoreInfoEntryOdd),
+  childCount: 2
 };
-
-const getClassNames = size => {
-  switch (size) {
-    case Small:
-      return Small$1;
-    case Normal:
-      return Normal$1;
-    case Large:
-      return Large$1;
-    default:
-      return '';
-  }
+const getMoreInfoEntryVirtualDom = item => {
+  const {
+    odd
+  } = item;
+  const node = odd ? parentNodeOdd : parentNodeEven;
+  return [node, ...getMoreInfoEntryKeyVirtualDom(item), ...getMoreInfoEntryValueVirtualDom(item)];
 };
 
-const getExtensionDetailVirtualDom = async (extensionDetail, sanitizedReadmeHtml, selectedTab, newState) => {
-  // TODO move this to view model so that rendering occurs like
-  // 1. state
-  // 2. view model
-  // 3. virtual dom
-  // 4. dom
-  const themesHtml = newState?.selectedFeatureMarkdownDom || '';
-  const selectedFeature = newState?.selectedFeature || '';
-  const extension = newState?.extension || {};
-  const features = getFeatures(selectedFeature, extension);
-  const size = newState.folderSize || 0;
-  const extensionId = newState?.extension?.id || 'n/a';
-  const extensionVersion = newState?.extension?.version || 'n/a';
-  const displaySize = getDisplaySize(size);
-  const width = newState?.width || 500;
-  const tabs = getTabs(selectedTab);
-  const sizeValue = getViewletSize(newState?.width || 0);
-  const sizeClass = getClassNames(sizeValue);
-  const dom = [{
+const getMoreInfoVirtualDom = items => {
+  return [{
     type: Div,
-    className: mergeClassNames(Viewlet, ExtensionDetail, sizeClass),
-    childCount: 3
-  }, ...getExtensionDetailHeaderVirtualDom(extensionDetail), ...getTabsVirtualDom(tabs), ...(await getExtensionDetailContentVirtualDom(sanitizedReadmeHtml, themesHtml, selectedTab, features, displaySize, extensionId, extensionVersion, selectedFeature, extension, width))];
-  return dom;
+    className: MoreInfo,
+    childCount: items.length
+  }, ...items.flatMap(getMoreInfoEntryVirtualDom)];
 };
 
-const getExtensionDetailVirtualDom2 = async uid => {
+const resourceNode = {
+  // TODO use link with url
+  type: Div,
+  className: Resource,
+  childCount: 1
+};
+const getResourceVirtualDom = resource => {
   const {
-    newState
-  } = get$1(uid);
-  return await getExtensionDetailVirtualDom(newState, newState.sanitizedReadmeHtml, newState.selectedTab, newState);
+    label
+  } = resource;
+  return [resourceNode, text(label)];
 };
 
-const None = 0;
-
-const getCopyMenuEntry = () => ({
-  id: 'copy',
-  label: copy(),
-  flags: None,
-  command: 'ClipBoard.execCopy'
-});
-
-const getImageMenuEntries = props => {
-  if (!props.isImage) {
-    return [];
-  }
+const getResourcesVirtualDom = resources => {
   return [{
-    id: 'openImageInNewTab',
-    label: openImageInNewTab(),
-    flags: None,
-    command: 'Open.openUrl',
-    args: [props.url || '']
-  }, {
-    id: 'saveImageAs',
-    label: saveImageAs(),
-    flags: None,
-    command: 'SaveFileAs.saveFileAs',
-    args: ['image.png', props.url || '']
-  }];
+    type: Div,
+    className: Resources,
+    childCount: resources.length
+  }, ...resources.flatMap(getResourceVirtualDom)];
 };
 
-const getLinkMenuEntries = props => {
-  if (!props.isLink) {
+const getAdditionalDetailsVirtualDom = (showAdditionalDetails, firstHeading, entries, secondHeading, secondEntries, thirdHeading, categories, fourthHeading, resources) => {
+  if (!showAdditionalDetails) {
     return [];
   }
   return [{
-    id: 'openInNewTab',
-    label: openInNewTab(),
-    flags: None,
-    command: 'Open.openUrl',
-    args: [props.url || '']
-  }];
+    type: Div,
+    className: Aside,
+    childCount: 1
+  }, {
+    type: Div,
+    className: AdditionalDetails,
+    tabIndex: 0,
+    childCount: 4
+  }, ...getAdditionalDetailsEntryVirtualDom(firstHeading, entries, getMoreInfoVirtualDom), ...getAdditionalDetailsEntryVirtualDom(secondHeading, secondEntries, getMoreInfoVirtualDom), ...getAdditionalDetailsEntryVirtualDom(thirdHeading, categories, getCategoriesDom), ...getAdditionalDetailsEntryVirtualDom(fourthHeading, resources, getResourcesVirtualDom)];
 };
 
-const getMenuEntries = props => [...getLinkMenuEntries(props), ...getImageMenuEntries(props), getCopyMenuEntry()];
-
-const handleClickDisable = async state => {
-  return state;
-};
+const HandleClickDisable = 'handleClickDisable';
+const HandleClickSize = 'handleClickSize';
+const HandleClickUninstall = 'handleClickUninstall';
+const HandleFeaturesClick = 'handleFeaturesClick';
+const HandleIconError = 'handleIconError';
+const HandleReadmeContextMenu = 'handleReadmeContextMenu';
+const HandleTabsClick = 'handleTabsClick';
 
-const selectFeature = async (state, name) => {
-  if (!name) {
-    return state;
-  }
-  const {
-    features
-  } = state;
-  const newFeatures = features.map(feature => {
-    if (feature.id === name) {
-      return {
-        ...feature,
-        selected: true
-      };
-    }
-    return {
-      ...feature,
-      selected: false
-    };
-  });
-  return {
-    ...state,
-    selectedFeature: name,
-    features: newFeatures
-  };
+const getInstallationEntries = (displaySize, extensionId, extensionVersion) => {
+  const entries = [{
+    key: 'Identifier',
+    value: extensionId,
+    odd: true,
+    code: true
+  }, {
+    key: 'Version',
+    value: extensionVersion,
+    code: true
+  }, {
+    key: 'Last Updated',
+    value: 'n/a',
+    odd: true
+  }, {
+    key: 'Size',
+    value: displaySize,
+    onClick: HandleClickSize
+  }];
+  return entries;
 };
 
-const handleClickFeatures = async (state, name) => {
-  return selectFeature(state, name);
+const getMarkdownVirtualDom = async html => {
+  string(html);
+  // @ts-ignore todo
+  const dom = await invoke('Markdown.getVirtualDom', html);
+  return dom;
 };
 
-const handleClickSize = async state => {
-  const {
-    uri
-  } = state.extension;
-  await invoke('OpenNativeFolder.openNativeFolder', uri);
-  return state;
+const getMarketplaceEntries = () => {
+  return [{
+    key: 'Published',
+    value: 'n/a',
+    odd: true
+  }, {
+    key: 'Last Released',
+    value: 'n/a'
+  }];
 };
 
-const handleClickUninstall = async state => {
-  return state;
+const getDetailsVirtualDom = async (sanitizedReadmeHtml, displaySize, extensionId, extensionVersion, width) => {
+  const firstHeading = 'Installation';
+  const entries = getInstallationEntries(displaySize, extensionId, extensionVersion);
+  const secondHeading = 'Marketplace';
+  const secondEntries = getMarketplaceEntries();
+  const thirdHeading = 'Categories';
+  const categories = [{
+    id: 'themes',
+    label: 'Themes'
+  }];
+  const fourthHeading = 'Resources';
+  const resources = [{
+    label: 'Marketplace',
+    url: '#'
+  }, {
+    label: 'Issues',
+    url: '#'
+  }, {
+    label: 'Repository',
+    url: '#'
+  }, {
+    label: 'License',
+    url: '#'
+  }];
+  const showAdditionalDetailsBreakpoint = 600;
+  const showAdditionalDetails = width > showAdditionalDetailsBreakpoint;
+  const childCount = showAdditionalDetails ? 2 : 1;
+  const dom = [{
+    type: Div,
+    className: ExtensionDetailPanel,
+    childCount: childCount,
+    role: Panel
+  }, ...(await getMarkdownVirtualDom(sanitizedReadmeHtml)), ...getAdditionalDetailsVirtualDom(showAdditionalDetails, firstHeading, entries, secondHeading, secondEntries, thirdHeading, categories, fourthHeading, resources)];
+  return dom;
 };
 
-const extensionDefaultIcon = assetDir => {
-  return `${assetDir}/icons/extensionDefaultIcon.png`;
-};
-const extensionLanguageBasics = assetDir => {
-  return `${assetDir}/icons/language-icon.svg`;
-};
-const extensionTheme = assetDir => {
-  return `${assetDir}/icons/theme-icon.png`;
-};
+const Text = 1;
+const Code = 2;
 
-const handleIconError = state => {
+const getCommandTableEntry = command => {
+  // TODO watch out for command being null/undefined/number/string/array
   const {
-    iconSrc,
-    assetDir
-  } = state;
-  if (iconSrc === extensionDefaultIcon(assetDir)) {
-    return state;
-  }
-  return {
-    ...state,
-    iconSrc: extensionDefaultIcon(assetDir)
-  };
+    id,
+    label
+  } = command;
+  return [{
+    type: Code,
+    value: id
+  }, {
+    type: Text,
+    value: label
+  }];
 };
 
-const selectTabChangelog = async state => {
+const getCommandTableEntries = extension => {
+  const commands = extension.commands || [];
+  const rows = commands.map(getCommandTableEntry);
+  const id$1 = id();
+  const label$1 = label();
   return {
-    ...state,
-    selectedTab: Changelog
+    headings: [id$1, label$1],
+    rows
   };
 };
 
-const selectTabDefault = async state => {
-  return state;
+const getFeatureContentHeadingVirtualDom = heading => {
+  return [{
+    type: H1,
+    childCount: 1
+  }, text(heading)];
 };
 
-const selectTabDetails = async state => {
-  // TODO load readmo markdown here
-  return {
-    ...state,
-    selectedTab: Details
-  };
+const getTableHeadingVirtualDom = heading => {
+  return [{
+    type: Th,
+    className: TableHeading,
+    childCount: 1
+  }, text(heading)];
 };
 
-const getThemeItemMarkdown = (heading, items) => {
-  let markdown = '';
-  if (items.length > 0) {
-    markdown += `### ${heading}`;
-    markdown += '\n\n';
-    for (const item of items) {
-      markdown += `- ${item.label}`;
-      markdown += '\n';
-    }
-  }
-  return markdown;
+const getCellCodeVirtualDom = value => {
+  return [{
+    type: Td,
+    className: TableCell,
+    childCount: 1
+  }, {
+    type: Div,
+    // TODO use code tag
+    childCount: 1
+  }, text(value)];
 };
 
-const getColorThemeMarkdown = themes => {
-  const heading = 'Color Themes';
-  return getThemeItemMarkdown(heading, themes);
-};
-const getIconThemeMarkdown = iconThemes => {
-  const heading = 'File Icon Themes';
-  return getThemeItemMarkdown(heading, iconThemes);
-};
-const getProductIconThemeMarkdown = iconThemes => {
-  const heading = 'Product Icon Themes';
-  return getThemeItemMarkdown(heading, iconThemes);
-};
-const getThemeMarkdown = (themes, iconThemes, productIconThemes) => {
-  let markdown = '';
-  markdown += getColorThemeMarkdown(themes);
-  markdown += getIconThemeMarkdown(iconThemes);
-  markdown += getProductIconThemeMarkdown(productIconThemes);
-  return markdown;
+const getCellTextVirtualDom = value => {
+  return [{
+    type: Td,
+    className: TableCell,
+    childCount: 1
+  }, text(value)];
 };
 
-const renderMarkdown = async (markdown, options = {}) => {
-  const html = await invoke('Markdown.renderMarkdown', markdown, options);
-  return html;
+const getCellRenderer = type => {
+  switch (type) {
+    case Code:
+      return getCellCodeVirtualDom;
+    case Text:
+      return getCellTextVirtualDom;
+    default:
+      throw new Error(`unexpected cell type ${type}`);
+  }
 };
 
-const selectTab$1 = async state => {
-  const {
-    extension,
-    baseUrl
-  } = state;
+const getCellVirtualDom = entry => {
   const {
-    colorThemes,
-    iconThemes,
-    productIconThemes
-  } = extension;
-  // TODO do this depending on featured tab content
-  const markdown = getThemeMarkdown(colorThemes || [], iconThemes || [], productIconThemes || []);
-  const rendered = await renderMarkdown(markdown, {
-    baseUrl
-  });
-  return {
-    ...state,
-    selectedTab: Features,
-    selectedFeatureMarkdownDom: rendered
-  };
+    value,
+    type
+  } = entry;
+  const fn = getCellRenderer(type);
+  return fn(value);
 };
 
-const getSelectTabHandler = selectedTab => {
-  switch (selectedTab) {
-    case Details:
-      return selectTabDetails;
-    case Features:
-      return selectTab$1;
-    case Changelog:
-      return selectTabChangelog;
-    default:
-      return selectTabDefault;
-  }
+const getTableRowVirtualDom = entries => {
+  return [{
+    type: Tr,
+    childCount: entries.length
+  }, ...entries.flatMap(getCellVirtualDom)];
 };
 
-const selectTab = (state, name) => {
-  const fn = getSelectTabHandler(name);
-  return fn(state);
+const getTableVirtualDom = tableInfo => {
+  const {
+    headings,
+    rows
+  } = tableInfo;
+  return [{
+    type: Table,
+    className: Table$1,
+    childCount: 2
+  }, {
+    type: THead,
+    childCount: 1
+  }, {
+    type: Tr,
+    childCount: headings.length
+  }, ...headings.flatMap(getTableHeadingVirtualDom), {
+    type: TBody,
+    childCount: rows.length
+  }, ...rows.flatMap(getTableRowVirtualDom)];
 };
 
-const handleTabsClick = (state, name) => {
-  return selectTab(state, name);
+// TODO have typed view-model
+const getFeatureCommandsVirtualDom = extension => {
+  const heading = commands();
+  const tableInfo = getCommandTableEntries(extension);
+  return [{
+    type: Div,
+    className: FeatureContent,
+    childCount: 2
+  }, ...getFeatureContentHeadingVirtualDom(heading), ...getTableVirtualDom(tableInfo)];
 };
 
-const isLanguageBasicsExtension = extension => {
-  return extension.name && extension.name.startsWith('Language Basics');
+const getJsonValidationTableEntry = validation => {
+  const {
+    fileMatch,
+    schema
+  } = validation;
+  return [{
+    type: Code,
+    value: fileMatch
+  }, {
+    type: Code,
+    value: schema
+  }];
 };
 
-const isThemeExtension = extension => {
-  return extension.name && extension.name.endsWith(' Theme');
+const getJsonValidationTableEntries = extension => {
+  const validations = extension.jsonValidation || [];
+  const rows = validations.map(getJsonValidationTableEntry);
+  return {
+    headings: [fileMatch(), schema()],
+    rows
+  };
 };
 
-const Web = 1;
-const Electron = 2;
-const Remote = 3;
-
-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 parentNode = {
+  type: Div,
+  className: FeatureContent,
+  childCount: 2
 };
-
-const getDescription = extension => {
-  if (!extension || !extension.description) {
-    return 'n/a';
-  }
-  return extension.description;
+const getFeatureJsonValidationVirtualDom = extension => {
+  const heading = jsonValidation();
+  const tableInfo = getJsonValidationTableEntries(extension);
+  return [parentNode, ...getFeatureContentHeadingVirtualDom(heading), ...getTableVirtualDom(tableInfo)];
 };
 
-const getName = extension => {
-  if (extension && extension.name) {
-    return extension.name;
-  }
-  if (extension && extension.id) {
-    return extension.id;
-  }
-  return 'n/a';
+const getFeatureNotImplementedVirtualDom = () => {
+  const heading = 'Not implemented';
+  return [{
+    type: Div,
+    className: FeatureContent,
+    childCount: 1
+  }, {
+    type: H1,
+    childCount: 1
+  }, text(heading)];
 };
 
-const getAllExtensions = async platform => {
-  if (platform === Web) {
-    return [];
-  }
-  return invoke('ExtensionManagement.getAllExtensions');
-};
-const getExtension$1 = async (id, platform) => {
-  // TODO only ask one extension from renderer worker instead of all
-  const allExtensions = await getAllExtensions(platform);
-  for (const extension of allExtensions) {
-    if (extension.id === id) {
-      return extension;
-    }
-  }
-  return undefined;
+const getFeatureProgrammingLanguagesVirtualDom = () => {
+  const heading = programmingLanguages();
+  // TODO
+  return [{
+    type: Div,
+    className: FeatureContent,
+    childCount: 1
+  }, ...getFeatureContentHeadingVirtualDom(heading)];
 };
 
-const getExtensionNew = async id => {
-  return invoke('ExtensionManagement.getExtension', id);
-};
-const getExtension = async (id, platform) => {
-  try {
-    return await getExtensionNew(id);
-  } catch {
-    return getExtension$1(id, platform);
-  }
+const getSettingsTableEntry = setting => {
+  const {
+    id,
+    label
+  } = setting;
+  // TODO watch out for  null/undefined/number/string/array
+  return [{
+    type: Text,
+    value: id
+  }, {
+    type: Text,
+    value: label
+  }];
 };
 
-const getRemoteSrc = uri => {
-  const src = `/remote${uri}`;
-  return src;
+const getSettingsTableEntries = extension => {
+  const settings = extension.settings || [];
+  const rows = settings.map(getSettingsTableEntry);
+  const textId = id();
+  const textLabel = label();
+  return {
+    headings: [textId, textLabel],
+    rows
+  };
 };
 
-const getBaseUrl = (extensionPath, platform) => {
-  switch (platform) {
-    case Remote:
-    case Electron:
-      return getRemoteSrc(extensionPath + '/');
-    default:
-      return extensionPath;
-  }
+const getFeatureSettingsVirtualDom = extension => {
+  const heading = settings();
+  const tableInfo = getSettingsTableEntries(extension);
+  return [{
+    type: Div,
+    className: FeatureContent,
+    childCount: 2
+  }, ...getFeatureContentHeadingVirtualDom(heading), ...getTableVirtualDom(tableInfo)];
 };
 
-const getFolderSize = async uri => {
-  try {
-    return await invoke('FileSystem.getFolderSize', uri);
-  } catch {
-    return 0;
+const getVirtualDomChildCount = markdownDom => {
+  const max = markdownDom.length - 1;
+  let stack = [];
+  for (let i = max; i >= 0; i--) {
+    const element = markdownDom[i];
+    if (element.childCount > 0) {
+      stack = stack.slice(element.childCount);
+    }
+    stack.unshift(element);
   }
+  return stack.length;
 };
 
-const readFile = async uri => {
-  return invoke('FileSystem.readFile', uri);
+const getFeatureThemesVirtualDom = async themesHtml => {
+  const markdownDom = await getMarkdownVirtualDom(themesHtml);
+  const childCount = getVirtualDomChildCount(markdownDom);
+  const heading = theme();
+  return [{
+    type: Div,
+    className: FeatureContent,
+    childCount: 2
+  }, ...getFeatureContentHeadingVirtualDom(heading), {
+    type: Div,
+    className: DefaultMarkdown,
+    childCount
+  }, ...markdownDom];
 };
 
-const ENOENT = 'ENOENT';
-
-const isEnoentError = error => {
-  return error && error.code === ENOENT;
+const toWebView = rawWebView => {
+  const {
+    id,
+    selector,
+    contentSecurityPolicy,
+    elements
+  } = rawWebView;
+  return {
+    id,
+    selectorString: JSON.stringify(selector),
+    contentSecurityPolicyString: JSON.stringify(contentSecurityPolicy),
+    elementsString: JSON.stringify(elements, null, 2)
+  };
 };
 
-const join = (pathSeparator, ...parts) => {
-  return parts.join(pathSeparator);
+const getWebViews = extension => {
+  const rawWebViews = extension.webViews || [];
+  return rawWebViews.map(toWebView);
 };
 
-const loadReadmeContent = async path => {
-  try {
-    const readmeUrl = join('/', path, 'README.md');
-    const readmeContent = await readFile(readmeUrl);
-    return readmeContent;
-  } catch (error) {
-    if (isEnoentError(error)) {
-      return '';
-    }
-    console.error(new VError(error, 'Failed to load Readme content'));
-    return `${error}`;
-  }
+const heading = {
+  type: H2,
+  className: DefinitionListItemHeading,
+  childCount: 1
 };
-
-const getSavedSelectedFeature = savedState => {
-  if (savedState && typeof savedState === 'object' && 'selectedFeature' in savedState && typeof savedState.selectedFeature === 'string') {
-    return savedState.selectedFeature;
-  }
-  return Details;
+const pre = {
+  type: Pre,
+  className: DefinitionListItemValue,
+  childCount: 1
+};
+const item = {
+  type: Div,
+  className: DefinitionListItem,
+  childCount: 2
+};
+const getWebViewVirtualDom = webView => {
+  const {
+    id: id$1,
+    selectorString,
+    contentSecurityPolicyString,
+    elementsString
+  } = webView;
+  const textId = id();
+  const textSelector = selector();
+  const textContentSecurityPolicy = contentSecurityPolicy();
+  const textElements = elements();
+  return [{
+    type: Div,
+    className: FeatureWebView,
+    childCount: 5
+  }, item, heading, text(textId), pre, text(id$1), item, heading, text(textSelector), pre, text(selectorString), item, heading, text(textContentSecurityPolicy), pre, text(contentSecurityPolicyString), item, heading, text(textElements), pre, text(elementsString)];
 };
 
-const getSavedSelectedTab = savedState => {
-  if (savedState && typeof savedState === 'object' && 'selectedTab' in savedState && typeof savedState.selectedTab === 'string') {
-    return savedState.selectedTab;
-  }
-  return Details;
+const getFeatureWebViewsVirtualDom = extension => {
+  const webViews$1 = getWebViews(extension);
+  const heading = webViews();
+  return [{
+    type: Div,
+    className: FeatureContent,
+    childCount: 2
+  }, ...getFeatureContentHeadingVirtualDom(heading), {
+    type: Div,
+    childCount: webViews$1.length
+  }, ...webViews$1.flatMap(getWebViewVirtualDom)];
 };
 
-const restoreState = savedState => {
-  const selectedTab = getSavedSelectedTab(savedState);
-  const selectedFeature = getSavedSelectedFeature(savedState);
-  return {
-    selectedFeature,
-    selectedTab
-  };
+const getFeatureContentVirtualDom = async (features, themesHtml, selectedFeature, extension) => {
+  switch (selectedFeature) {
+    case Theme:
+      return await getFeatureThemesVirtualDom(themesHtml);
+    case Commands:
+      return getFeatureCommandsVirtualDom(extension);
+    case JsonValidation:
+      return getFeatureJsonValidationVirtualDom(extension);
+    case ProgrammingLanguages:
+      return getFeatureProgrammingLanguagesVirtualDom();
+    case Settings:
+      return getFeatureSettingsVirtualDom(extension);
+    case WebViews:
+      return getFeatureWebViewsVirtualDom(extension);
+    default:
+      return getFeatureNotImplementedVirtualDom();
+  }
 };
 
-const loadContent = async (state, platform, savedState) => {
+const getFeatureListItemVirtualDom = feature => {
   const {
-    uri,
-    width,
-    assetDir
-  } = state;
-  const id = uri.slice('extension-detail://'.length);
-  const extension = await getExtension(id, platform);
-  const readmeContent = await loadReadmeContent(extension.path);
-  const baseUrl = getBaseUrl(extension.path, platform);
-  const readmeHtml = await renderMarkdown(readmeContent, {
-    baseUrl
-  });
-  const sanitizedReadmeHtml = readmeHtml;
-  const normalizedReadmeHtml = sanitizedReadmeHtml;
-  const iconSrc = getIcon(extension, platform, assetDir);
-  const description = getDescription(extension);
-  const name = getName(extension);
-  const size = getViewletSize(width);
+    label,
+    selected,
+    id
+  } = feature;
+  const className = selected ? 'Feature FeatureSelected' : Feature;
+  return [{
+    // TODO use role list item or tab
+    type: Button,
+    name: id,
+    className,
+    childCount: 1
+  }, text(label)];
+};
+
+const getFeatureListVirtualDom = features => {
+  return [{
+    // TODO use either list or tabs role
+    type: Div,
+    className: FeaturesList,
+    childCount: features.length,
+    onClick: HandleFeaturesClick
+  }, ...features.flatMap(getFeatureListItemVirtualDom)];
+};
+
+const getFeaturesVirtualDom = async (features, themesHtml, selectedFeature, extension) => {
+  if (features.length === 0) {
+    const none$1 = none();
+    return [{
+      type: Div,
+      className: Features,
+      childCount: 3
+    }, text(none$1)];
+  }
+  return [{
+    type: Div,
+    className: Features,
+    childCount: 3
+  }, ...getFeatureListVirtualDom(features), {
+    type: Div,
+    className: mergeClassNames(Sash, SashVertical),
+    childCount: 0
+  }, ...(await getFeatureContentVirtualDom(features, themesHtml, selectedFeature, extension))];
+};
+
+const getExtensionDetailContentVirtualDom = async (sanitizedReadmeHtml, themesHtml, selectedTab, features, displaySize, extensionId, extensionVersion, selectedFeature, extension, width) => {
+  switch (selectedTab) {
+    case Details:
+      return await getDetailsVirtualDom(sanitizedReadmeHtml, displaySize, extensionId, extensionVersion, width);
+    case Features$1:
+      return await getFeaturesVirtualDom(features, themesHtml, selectedFeature, extension);
+    case Changelog$1:
+      return getChangelogVirtualDom();
+    default:
+      return [];
+  }
+};
+
+const getButtonVirtualDom = (message, onClick) => {
+  return [{
+    type: Button,
+    className: mergeClassNames(Button$1, ButtonPrimary),
+    onClick,
+    childCount: 1
+  }, text(message)];
+};
+
+const getExtensionDetailHeaderActionsVirtualDom = () => {
+  const dom = [{
+    type: Div,
+    className: ExtensionDetailHeaderActions,
+    childCount: 2
+  }, ...getButtonVirtualDom('Disable', HandleClickDisable), ...getButtonVirtualDom('Uninstall', HandleClickUninstall)];
+  return dom;
+};
+
+const getExtensionDetailHeaderVirtualDom = extensionDetail => {
   const {
-    selectedFeature,
-    selectedTab
-  } = restoreState(savedState);
-  const features = getFeatures(selectedFeature, extension);
-  const folderSize = await getFolderSize(extension.uri);
-  const entries = [{
-    key: 'Identifier',
-    value: 'abc'
-  }, {
-    key: 'Version',
-    value: '1.9.5'
+    name,
+    iconSrc,
+    description
+  } = extensionDetail;
+  const dom = [{
+    type: Div,
+    className: ExtensionDetailHeader,
+    childCount: 2
   }, {
-    key: 'Last Updated',
-    value: 'n/a'
-  }];
-  const secondEntries = [{
-    key: 'Published',
-    value: 'n/a'
+    type: Img,
+    className: ExtensionDetailIcon,
+    alt: '',
+    draggable: false,
+    childCount: 0,
+    src: iconSrc
   }, {
-    key: 'Last Released',
-    value: 'n/a'
-  }];
-  const categories = [{
-    id: 'themes',
-    label: 'Themes'
-  }];
-  const resources = [{
-    label: 'Marketplace',
-    url: '#'
+    type: Div,
+    className: ExtensionDetailHeaderDetails,
+    childCount: 3
   }, {
-    label: 'Issues',
-    url: '#'
+    type: Div,
+    className: ExtensionDetailName,
+    childCount: 1
+  }, text(name), {
+    type: Div,
+    className: ExtensionDetailDescription,
+    childCount: 1
+  }, text(description), ...getExtensionDetailHeaderActionsVirtualDom()];
+  return dom;
+};
+
+const getTabs = selectedTab => {
+  const tabs = [{
+    label: 'Details',
+    name: Details,
+    selected: selectedTab === Details
   }, {
-    label: 'Repository',
-    url: '#'
+    label: 'Features',
+    name: Features$1,
+    selected: selectedTab === Features$1
   }, {
-    label: 'License',
-    url: '#'
+    label: 'Changelog',
+    name: Changelog$1,
+    selected: selectedTab === Changelog$1
   }];
-  return {
-    ...state,
-    selectedTab,
-    sanitizedReadmeHtml: normalizedReadmeHtml,
-    iconSrc,
+  return tabs;
+};
+
+const selectedClassName = mergeClassNames(ExtensionDetailTab, ExtensionDetailTabSelected);
+const defaultClassName = ExtensionDetailTab;
+const getTabVirtualDom = tab => {
+  const {
+    label,
+    selected,
+    name
+  } = tab;
+  const className = selected ? selectedClassName : defaultClassName;
+  const ariaSelected = selected ? 'true' : 'false';
+  return [{
+    type: Button,
+    role: Tab,
     name,
-    description,
-    sizeOnDisk: size,
-    entries,
-    secondEntries,
-    categories,
-    resources,
-    extension,
-    baseUrl,
-    features,
-    folderSize
-  };
+    className,
+    childCount: 1,
+    tabIndex: -1,
+    ariaSelected
+  }, text(label)];
 };
 
-const loadContent2 = async (state, savedState) => {
-  return loadContent(state, state.platform, savedState);
+const getTabsVirtualDom = tabs => {
+  return [{
+    type: Div,
+    className: ExtensionDetailTabs,
+    childCount: tabs.length,
+    role: TabList,
+    onClick: HandleTabsClick,
+    tabIndex: 0
+  }, ...tabs.flatMap(getTabVirtualDom)];
+};
+
+const getClassNames = size => {
+  switch (size) {
+    case Small$1:
+      return Small;
+    case Normal$1:
+      return Normal;
+    case Large$1:
+      return Large;
+    default:
+      return '';
+  }
+};
+
+const getExtensionDetailVirtualDom = async (extensionDetail, sanitizedReadmeHtml, selectedTab, newState) => {
+  // TODO move this to view model so that rendering occurs like
+  // 1. state
+  // 2. view model
+  // 3. virtual dom
+  // 4. dom
+  const themesHtml = newState?.selectedFeatureMarkdownDom || '';
+  const selectedFeature = newState?.selectedFeature || '';
+  const extension = newState?.extension || {};
+  const features = getFeatures(selectedFeature, extension);
+  const size = newState.folderSize || 0;
+  const extensionId = newState?.extension?.id || 'n/a';
+  const extensionVersion = newState?.extension?.version || 'n/a';
+  const displaySize = getDisplaySize(size);
+  const width = newState?.width || 500;
+  const tabs = getTabs(selectedTab);
+  const sizeValue = getViewletSize(newState?.width || 0);
+  const sizeClass = getClassNames(sizeValue);
+  const dom = [{
+    type: Div,
+    className: mergeClassNames(Viewlet, ExtensionDetail, sizeClass),
+    childCount: 3
+  }, ...getExtensionDetailHeaderVirtualDom(extensionDetail), ...getTabsVirtualDom(tabs), ...(await getExtensionDetailContentVirtualDom(sanitizedReadmeHtml, themesHtml, selectedTab, features, displaySize, extensionId, extensionVersion, selectedFeature, extension, width))];
+  return dom;
 };
 
 const renderDom = async (oldState, newState) => {
@@ -2606,17 +2667,14 @@ const commandMap = {
   'ExtensionDetail.resize': resize,
   'ExtensionDetail.saveState': saveState,
   'ExtensionDetail.selectTab': wrapCommand(selectTab),
-  'ExtensionDetail.terminate': terminate,
-  // deprecated
-  'ExtensionDetail.getVirtualDom2': getExtensionDetailVirtualDom2,
-  'ExtensionDetail.loadContent': wrapCommand(loadContent)
+  'ExtensionDetail.terminate': terminate
 };
 
 const listen = async () => {
   const rpc = await WebWorkerRpcClient.create({
     commandMap: commandMap
   });
-  set(RendererWorker, rpc);
+  set(rpc);
 };
 
 const main = async () => {