@lvce-editor/static-server 0.55.0 → 0.55.2

package/static/{9c27ccd → 77beaf6}/packages/extension-detail-view-worker/dist/extensionDetailViewWorkerMain.js

@@ -784,7 +784,7 @@ const send = (transport, method, ...params) => {
   const message = create$4(method, params);
   transport.send(message);
 };
-const invoke$1 = (ipc, method, ...params) => {
+const invoke = (ipc, method, ...params) => {
   return invokeHelper(ipc, method, params, false);
 };
 const invokeAndTransfer = (ipc, method, ...params) => {
@@ -817,7 +817,7 @@ const createRpc = ipc => {
       send(ipc, method, ...params);
     },
     invoke(method, ...params) {
-      return invoke$1(ipc, method, ...params);
+      return invoke(ipc, method, ...params);
     },
     invokeAndTransfer(method, ...params) {
       return invokeAndTransfer(ipc, method, ...params);
@@ -873,8 +873,6 @@ const WebWorkerRpcClient = {
   create: create$3
 };
 
-const assetDir = '';
-
 const create$2 = () => {
   const states = Object.create(null);
   return {
@@ -933,6 +931,9 @@ const create$2 = () => {
     }
   };
 };
+const terminate = () => {
+  globalThis.close();
+};
 
 const {
   get: get$1,
@@ -941,7 +942,7 @@ const {
   wrapCommand
 } = create$2();
 
-const create$1 = (uid, uri, x, y, width, height, platform, assetDir$1) => {
+const create$1 = (uid, uri, x, y, width, height, platform, assetDir) => {
   const state = {
     description: '',
     iconSrc: '',
@@ -961,8 +962,10 @@ const create$1 = (uid, uri, x, y, width, height, platform, assetDir$1) => {
     baseUrl: '',
     features: [],
     folderSize: 0,
-    assetDir: assetDir$1 || assetDir,
-    platform
+    assetDir: assetDir || '',
+    platform,
+    settingsButtonEnabled: false,
+    builtinExtensionsBadgeEnabled: true
   };
   set$1(uid, state, state);
 };
@@ -1002,7 +1005,7 @@ const dispose = uid => {
   dispose$1(uid);
 };
 
-const commandIds = ['getMenuEntries', 'handleClickDisable', 'handleClickSize', 'handleClickUninstall', 'handleFeaturesClick', 'handleIconError', 'handleTabsClick', 'renderEventListeners', 'resize', 'saveState', 'selectTab', 'terminate'];
+const commandIds = ['getMenuEntries', 'handleClickDisable', 'handleClickSettings', 'handleClickSetColorTheme', 'handleClickSize', 'handleClickUninstall', 'handleFeaturesClick', 'handleIconError', 'handleTabsClick', 'renderEventListeners', 'resize', 'saveState', 'selectTab', 'terminate'];
 
 const getCommandIds = () => {
   return commandIds;
@@ -1020,10 +1023,18 @@ const i18nString = (key, placeholders = emptyObject) => {
   return key.replaceAll(RE_PLACEHOLDER, replacer);
 };
 
+const Installation = 'Installation';
+const Marketplace = 'Marketplace';
+const Categories$1 = 'Categories';
+const Resources$1 = 'Resources';
+const Changelog$2 = 'Changelog';
 const Commands$1 = 'Commands';
 const ContentSecurityPolicy = 'ContentSecurityPolicy';
 const Copy = 'Copy';
+const Details$1 = 'Details';
+const Disable = 'Disable';
 const Elements = 'Elements';
+const Features$2 = 'Features';
 const FileMatch = 'File Match';
 const None$1 = 'None';
 const Id = 'ID';
@@ -1036,13 +1047,39 @@ const SaveImageAs = 'Save Image as';
 const Schema = 'Schema';
 const Selector = 'Selector';
 const Settings$1 = 'Settings';
+const SetColorTheme = 'Set Color Theme';
 const Theme$1 = 'Theme';
+const Uninstall = 'Uninstall';
 const WebViews$1 = 'WebViews';
 const NotImplemented = 'Not Implemented';
 
+const installation = () => {
+  return i18nString(Installation);
+};
+const marketplace = () => {
+  return i18nString(Marketplace);
+};
+const categories = () => {
+  return i18nString(Categories$1);
+};
+const resources = () => {
+  return i18nString(Resources$1);
+};
 const copy = () => {
   return i18nString(Copy);
 };
+const changelog = () => {
+  return i18nString(Changelog$2);
+};
+const details = () => {
+  return i18nString(Details$1);
+};
+const disable = () => {
+  return i18nString(Disable);
+};
+const features = () => {
+  return i18nString(Features$2);
+};
 const none = () => {
   return i18nString(None$1);
 };
@@ -1064,6 +1101,9 @@ const fileMatch = () => {
 const schema = () => {
   return i18nString(Schema);
 };
+const setColorTheme$3 = () => {
+  return i18nString(SetColorTheme);
+};
 const theme = () => {
   return i18nString(Theme$1);
 };
@@ -1097,6 +1137,9 @@ const elements = () => {
 const notImplemented = () => {
   return i18nString(NotImplemented);
 };
+const uninstall = () => {
+  return i18nString(Uninstall);
+};
 
 const None = 0;
 
@@ -1212,31 +1255,91 @@ const RendererWorker$1 = 1;
 const {
   invoke: invoke$3,
   set: set$3} = create(RendererWorker$1);
+const setColorTheme$2 = async id => {
+  // @ts-ignore
+  return invoke$3(/* ColorTheme.setColorTheme */'ColorTheme.setColorTheme', /* colorThemeId */id);
+};
 const readFile$2 = async uri => {
   return invoke$3('FileSystem.readFile', uri);
 };
-const getAllExtensions$2 = async key => {
+const getAllExtensions$2 = async () => {
   return invoke$3('ExtensionManagement.getAllExtensions');
 };
+const getFolderSize$2 = async uri => {
+  // @ts-ignore
+  return await invoke$3('FileSystem.getFolderSize', uri);
+};
+const getExtension$3 = async id => {
+  // @ts-ignore
+  return invoke$3('ExtensionManagement.getExtension', id);
+};
+const getMarkdownDom$1 = async html => {
+  // @ts-ignore
+  return invoke$3('Markdown.getVirtualDom', html);
+};
+const renderMarkdown$2 = async (markdown, options) => {
+  // @ts-ignore
+  return invoke$3('Markdown.renderMarkdown', markdown, options);
+};
+const openNativeFolder$1 = async uri => {
+  // @ts-ignore
+  await invoke$3('OpenNativeFolder.openNativeFolder', uri);
+};
 const RendererWorker = {
   __proto__: null,
   getAllExtensions: getAllExtensions$2,
-  invoke: invoke$3,
+  getExtension: getExtension$3,
+  getFolderSize: getFolderSize$2,
+  getMarkdownDom: getMarkdownDom$1,
+  openNativeFolder: openNativeFolder$1,
   readFile: readFile$2,
-  set: set$3};
+  renderMarkdown: renderMarkdown$2,
+  set: set$3,
+  setColorTheme: setColorTheme$2};
 
 const {
-  invoke,
-  set,
+  getAllExtensions: getAllExtensions$1,
+  getExtension: getExtension$2,
+  getFolderSize: getFolderSize$1,
+  getMarkdownDom,
+  openNativeFolder,
   readFile: readFile$1,
-  getAllExtensions: getAllExtensions$1
-} = RendererWorker;
+  renderMarkdown: renderMarkdown$1,
+  set,
+  setColorTheme: setColorTheme$1} = RendererWorker;
+
+const setColorTheme = id => {
+  return setColorTheme$1(id);
+};
+
+const getColorThemeId = extension => {
+  if (extension && Array.isArray(extension.colorThemes) && extension.colorThemes.length > 0) {
+    const colorTheme = extension.colorThemes[0];
+    return colorTheme.id || colorTheme.label;
+  }
+  return undefined;
+};
+const handleClickSetColorTheme = async state => {
+  const {
+    extension
+  } = state;
+  const colorThemeId = getColorThemeId(extension);
+  if (colorThemeId) {
+    await setColorTheme(colorThemeId);
+  }
+  return state;
+};
+
+const handleClickSettings = state => {
+  // TODO: Implement settings functionality
+  return state;
+};
 
 const handleClickSize = async state => {
   const {
     uri
   } = state.extension;
-  await invoke('OpenNativeFolder.openNativeFolder', uri);
+  await openNativeFolder(uri);
   return state;
 };
 
@@ -1331,8 +1434,7 @@ const getThemeMarkdown = (themes, iconThemes, productIconThemes) => {
 };
 
 const renderMarkdown = async (markdown, options = {}) => {
-  // @ts-ignore todo
-  const html = await invoke('Markdown.renderMarkdown', markdown, options);
+  const html = await renderMarkdown$1(markdown, options);
   return html;
 };
 
@@ -1380,6 +1482,11 @@ const handleTabsClick = (state, name) => {
   return selectTab(state, name);
 };
 
+const initialize = async () => {
+  // TODO create connection to file system worker
+  // TODO create direct connection to markdown worker
+};
+
 const isLanguageBasicsExtension = extension => {
   return extension.name && extension.name.startsWith('Language Basics');
 };
@@ -1450,8 +1557,7 @@ const getExtension$1 = async (id, platform) => {
 };
 
 const getExtensionNew = async id => {
-  // @ts-ignore todo
-  return invoke('ExtensionManagement.getExtension', id);
+  return getExtension$2(id);
 };
 const getExtension = async (id, platform) => {
   try {
@@ -1476,6 +1582,26 @@ const getBaseUrl = (extensionPath, platform) => {
   }
 };
 
+const getCategories = () => {
+  return [{
+    id: 'themes',
+    label: 'Themes'
+  }];
+};
+
+const getEntries = () => {
+  return [{
+    key: 'Identifier',
+    value: 'abc'
+  }, {
+    key: 'Version',
+    value: '1.9.5'
+  }, {
+    key: 'Last Updated',
+    value: 'n/a'
+  }];
+};
+
 const getExtensionIdFromUri = uri => {
   const id = uri.slice('extension-detail://'.length);
   return id;
@@ -1528,13 +1654,38 @@ const getFolderSize = async uri => {
     throw new VError(`uri is required`);
   }
   try {
-    // @ts-ignore todo
-    return await invoke('FileSystem.getFolderSize', uri);
+    return await getFolderSize$1(uri);
   } catch {
     return 0;
   }
 };
 
+const getResources = () => {
+  return [{
+    label: 'Marketplace',
+    url: '#'
+  }, {
+    label: 'Issues',
+    url: '#'
+  }, {
+    label: 'Repository',
+    url: '#'
+  }, {
+    label: 'License',
+    url: '#'
+  }];
+};
+
+const getSecondEntries = () => {
+  return [{
+    key: 'Published',
+    value: 'n/a'
+  }, {
+    key: 'Last Released',
+    value: 'n/a'
+  }];
+};
+
 const Small$1 = 1;
 const Normal$1 = 2;
 const Large$1 = 3;
@@ -1550,14 +1701,6 @@ const getViewletSize = width => {
 };
 
 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 readFile$1(uri);
 };
 
@@ -1580,6 +1723,8 @@ const loadReadmeContent = async path => {
     if (isEnoentError(error)) {
       return '';
     }
+    // TODO send message to error worker
+    // @ts-ignore
     console.error(new VError(error, 'Failed to load Readme content'));
     return `${error}`;
   }
@@ -1634,40 +1779,10 @@ const loadContent = async (state, platform, 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: '#'
-  }];
+  const entries = getEntries();
+  const secondEntries = getSecondEntries();
+  const categories = getCategories();
+  const resources = getResources();
   return {
     ...state,
     selectedTab,
@@ -1697,6 +1812,7 @@ const mergeClassNames = (...classNames) => {
 const Button$1 = 1;
 const Div = 4;
 const H1 = 5;
+const Span = 8;
 const Table$1 = 9;
 const TBody = 10;
 const Td = 11;
@@ -1708,15 +1824,18 @@ const Img = 17;
 const H2 = 22;
 const Pre = 51;
 const A = 53;
+const Code$1 = 65;
 const VirtualDomElements = {
   __proto__: null,
   A,
   Button: Button$1,
+  Code: Code$1,
   Div,
   H1,
   H2,
   Img,
   Pre,
+  Span,
   TBody,
   THead,
   Table: Table$1,
@@ -1751,7 +1870,10 @@ const ExtensionDetailHeaderActions = 'ExtensionDetailHeaderActions';
 const ExtensionDetailHeaderDetails = 'ExtensionDetailHeaderDetails';
 const ExtensionDetailIcon = 'ExtensionDetailIcon';
 const ExtensionDetailName = 'ExtensionDetailName';
+const ExtensionDetailNameBadge = 'ExtensionDetailNameBadge';
 const ExtensionDetailPanel = 'ExtensionDetailPanel';
+const SettingsButton = 'SettingsButton';
+const SettingsIcon = 'SettingsIcon';
 const ExtensionDetailTab = 'ExtensionDetailTab';
 const ExtensionDetailTabs = 'ExtensionDetailTabs';
 const ExtensionDetailTabSelected = 'ExtensionDetailTabSelected';
@@ -1777,6 +1899,13 @@ const TableCell = 'TableCell';
 const TableHeading = 'TableHeading';
 const Viewlet = 'Viewlet';
 
+const getBadge = (extension, state) => {
+  if (extension?.builtin && state.builtinExtensionsBadgeEnabled) {
+    return 'builtin';
+  }
+  return '';
+};
+
 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'];
@@ -1870,6 +1999,37 @@ const getDisplaySize = size => {
   });
 };
 
+const HandleClickDisable = 'handleClickDisable';
+const HandleClickSetColorTheme = 'handleClickSetColorTheme';
+const HandleClickSettings = 'handleClickSettings';
+const HandleClickSize = 'handleClickSize';
+const HandleClickUninstall = 'handleClickUninstall';
+const HandleFeaturesClick = 'handleFeaturesClick';
+const HandleIconError = 'handleIconError';
+const HandleReadmeContextMenu = 'handleReadmeContextMenu';
+const HandleTabsClick = 'handleTabsClick';
+
+const hasColorThemes = extension => {
+  return Boolean(extension && extension.colorThemes && extension.colorThemes.length > 0);
+};
+
+const getExtensionDetailButtons = extension => {
+  const allActions = [{
+    label: setColorTheme$3(),
+    onClick: HandleClickSetColorTheme,
+    enabled: hasColorThemes(extension)
+  }, {
+    label: disable(),
+    onClick: HandleClickDisable,
+    enabled: true
+  }, {
+    label: uninstall(),
+    onClick: HandleClickUninstall,
+    enabled: !extension?.builtin
+  }];
+  return allActions;
+};
+
 const getChangelogVirtualDom = () => {
   const notImplemented$1 = notImplemented();
   // TODO set tabpanel role
@@ -1950,7 +2110,8 @@ const getMoreInfoEntryValueVirtualDom = item => {
   const {
     value,
     onClick,
-    code
+    code,
+    title
   } = item;
   const type = getTag(onClick, code);
   const className = getClassName(onClick, code);
@@ -1958,7 +2119,8 @@ const getMoreInfoEntryValueVirtualDom = item => {
     type: type,
     className,
     childCount: 1,
-    onClick
+    onClick,
+    title
   }, text(value)];
 };
 
@@ -2025,15 +2187,7 @@ const getAdditionalDetailsVirtualDom = (showAdditionalDetails, firstHeading, ent
   }, ...getAdditionalDetailsEntryVirtualDom(firstHeading, entries, getMoreInfoVirtualDom), ...getAdditionalDetailsEntryVirtualDom(secondHeading, secondEntries, getMoreInfoVirtualDom), ...getAdditionalDetailsEntryVirtualDom(thirdHeading, categories, getCategoriesDom), ...getAdditionalDetailsEntryVirtualDom(fourthHeading, resources, getResourcesVirtualDom)];
 };
 
-const HandleClickDisable = 'handleClickDisable';
-const HandleClickSize = 'handleClickSize';
-const HandleClickUninstall = 'handleClickUninstall';
-const HandleFeaturesClick = 'handleFeaturesClick';
-const HandleIconError = 'handleIconError';
-const HandleReadmeContextMenu = 'handleReadmeContextMenu';
-const HandleTabsClick = 'handleTabsClick';
-
-const getInstallationEntries = (displaySize, extensionId, extensionVersion) => {
+const getInstallationEntries = (displaySize, extensionId, extensionVersion, extensionUri) => {
   const entries = [{
     key: 'Identifier',
     value: extensionId,
@@ -2050,15 +2204,15 @@ const getInstallationEntries = (displaySize, extensionId, extensionVersion) => {
   }, {
     key: 'Size',
     value: displaySize,
-    onClick: HandleClickSize
+    onClick: HandleClickSize,
+    title: extensionUri
   }];
   return entries;
 };
 
 const getMarkdownVirtualDom = async html => {
   string(html);
-  // @ts-ignore todo
-  const dom = await invoke('Markdown.getVirtualDom', html);
+  const dom = await getMarkdownDom(html);
   return dom;
 };
 
@@ -2073,30 +2227,15 @@ const getMarketplaceEntries = () => {
   }];
 };
 
-const getDetailsVirtualDom = async (sanitizedReadmeHtml, displaySize, extensionId, extensionVersion, width) => {
-  const firstHeading = 'Installation';
-  const entries = getInstallationEntries(displaySize, extensionId, extensionVersion);
-  const secondHeading = 'Marketplace';
+const getDetailsVirtualDom = async (sanitizedReadmeHtml, displaySize, extensionId, extensionVersion, width, extensionUri) => {
+  const firstHeading = installation();
+  const entries = getInstallationEntries(displaySize, extensionId, extensionVersion, extensionUri);
+  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 thirdHeading = categories();
+  const categories$1 = getCategories();
+  const fourthHeading = resources();
+  const resources$1 = getResources();
   const showAdditionalDetailsBreakpoint = 600;
   const showAdditionalDetails = width > showAdditionalDetailsBreakpoint;
   const childCount = showAdditionalDetails ? 2 : 1;
@@ -2105,7 +2244,7 @@ const getDetailsVirtualDom = async (sanitizedReadmeHtml, displaySize, extensionI
     className: ExtensionDetailPanel,
     childCount: childCount,
     role: Panel
-  }, ...(await getMarkdownVirtualDom(sanitizedReadmeHtml)), ...getAdditionalDetailsVirtualDom(showAdditionalDetails, firstHeading, entries, secondHeading, secondEntries, thirdHeading, categories, fourthHeading, resources)];
+  }, ...(await getMarkdownVirtualDom(sanitizedReadmeHtml)), ...getAdditionalDetailsVirtualDom(showAdditionalDetails, firstHeading, entries, secondHeading, secondEntries, thirdHeading, categories$1, fourthHeading, resources$1)];
   return dom;
 };
 
@@ -2159,8 +2298,7 @@ const getCellCodeVirtualDom = value => {
     className: TableCell,
     childCount: 1
   }, {
-    type: VirtualDomElements.Div,
-    // TODO use code tag
+    type: VirtualDomElements.Code,
     childCount: 1
   }, text(value)];
 };
@@ -2324,11 +2462,11 @@ const getFeatureSettingsVirtualDom = extension => {
   }, ...getFeatureContentHeadingVirtualDom(heading), ...getTableVirtualDom(tableInfo)];
 };
 
-const getVirtualDomChildCount = markdownDom => {
-  const max = markdownDom.length - 1;
+const getVirtualDomChildCount = dom => {
+  const max = dom.length - 1;
   let stack = [];
   for (let i = max; i >= 0; i--) {
-    const element = markdownDom[i];
+    const element = dom[i];
     if (element.childCount > 0) {
       stack = stack.slice(element.childCount);
     }
@@ -2486,7 +2624,7 @@ const getFeaturesVirtualDom = async (features, themesHtml, selectedFeature, exte
 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);
+      return await getDetailsVirtualDom(sanitizedReadmeHtml, displaySize, extensionId, extensionVersion, width, extension.uri || extension.path || '');
     case Features$1:
       return await getFeaturesVirtualDom(features, themesHtml, selectedFeature, extension);
     case Changelog$1:
@@ -2496,6 +2634,14 @@ const getExtensionDetailContentVirtualDom = async (sanitizedReadmeHtml, themesHt
   }
 };
 
+const getExtensionDetailDescriptionVirtualDom = description => {
+  return [{
+    type: VirtualDomElements.Div,
+    className: ExtensionDetailDescription,
+    childCount: 1
+  }, text(description)];
+};
+
 const getButtonVirtualDom = (message, onClick) => {
   return [{
     type: VirtualDomElements.Button,
@@ -2505,21 +2651,56 @@ const getButtonVirtualDom = (message, onClick) => {
   }, text(message)];
 };
 
-const getExtensionDetailHeaderActionsVirtualDom = () => {
+const getSettingsButtonVirtualDom = enabled => {
+  if (!enabled) {
+    return [];
+  }
+  return [{
+    type: VirtualDomElements.Button,
+    className: SettingsButton,
+    onClick: HandleClickSettings,
+    childCount: 1,
+    title: 'Settings'
+  }, {
+    type: VirtualDomElements.Span,
+    className: SettingsIcon,
+    childCount: 0,
+    text: '⚙️'
+  }];
+};
+
+const getExtensionDetailHeaderActionsVirtualDom = (buttonDefs, settingsButtonEnabled) => {
+  const enabledButtons = buttonDefs.filter(btn => btn.enabled);
+  const buttons = enabledButtons.flatMap(btn => getButtonVirtualDom(btn.label, btn.onClick));
+  const settingsButton = getSettingsButtonVirtualDom(settingsButtonEnabled);
   const dom = [{
     type: VirtualDomElements.Div,
     className: ExtensionDetailHeaderActions,
-    childCount: 2
-  }, ...getButtonVirtualDom('Disable', HandleClickDisable), ...getButtonVirtualDom('Uninstall', HandleClickUninstall)];
+    childCount: enabledButtons.length + settingsButton.length
+  }, ...buttons, ...settingsButton];
   return dom;
 };
 
-const getExtensionDetailHeaderVirtualDom = extensionDetail => {
-  const {
-    name,
-    iconSrc,
-    description
-  } = extensionDetail;
+const getNameBadgeVirtualDom = badge => {
+  if (!badge) {
+    return [];
+  }
+  return [{
+    type: VirtualDomElements.Span,
+    className: ExtensionDetailNameBadge,
+    childCount: 1
+  }, text(badge)];
+};
+
+const getExtensionDetailNameVirtualDom = (name, badge) => {
+  return [{
+    type: VirtualDomElements.Div,
+    className: ExtensionDetailName,
+    childCount: badge ? 2 : 1
+  }, text(name), ...getNameBadgeVirtualDom(badge)];
+};
+
+const getExtensionDetailHeaderVirtualDom = (name, iconSrc, description, badge, buttonDefs, settingsButtonEnabled) => {
   const dom = [{
     type: VirtualDomElements.Div,
     className: ExtensionDetailHeader,
@@ -2535,29 +2716,21 @@ const getExtensionDetailHeaderVirtualDom = extensionDetail => {
     type: VirtualDomElements.Div,
     className: ExtensionDetailHeaderDetails,
     childCount: 3
-  }, {
-    type: VirtualDomElements.Div,
-    className: ExtensionDetailName,
-    childCount: 1
-  }, text(name), {
-    type: VirtualDomElements.Div,
-    className: ExtensionDetailDescription,
-    childCount: 1
-  }, text(description), ...getExtensionDetailHeaderActionsVirtualDom()];
+  }, ...getExtensionDetailNameVirtualDom(name, badge), ...getExtensionDetailDescriptionVirtualDom(description), ...getExtensionDetailHeaderActionsVirtualDom(buttonDefs, settingsButtonEnabled)];
   return dom;
 };
 
 const getTabs = selectedTab => {
   const tabs = [{
-    label: 'Details',
+    label: details(),
     name: Details,
     selected: selectedTab === Details
   }, {
-    label: 'Features',
+    label: features(),
     name: Features$1,
     selected: selectedTab === Features$1
   }, {
-    label: 'Changelog',
+    label: changelog(),
     name: Changelog$1,
     selected: selectedTab === Changelog$1
   }];
@@ -2573,7 +2746,7 @@ const getTabVirtualDom = tab => {
     name
   } = tab;
   const className = selected ? selectedClassName : defaultClassName;
-  const ariaSelected = selected ? 'true' : 'false';
+  const ariaSelected = selected;
   return [{
     type: VirtualDomElements.Button,
     role: Tab,
@@ -2609,7 +2782,7 @@ const getClassNames = size => {
   }
 };
 
-const getExtensionDetailVirtualDom = async (extensionDetail, sanitizedReadmeHtml, selectedTab, newState) => {
+const getExtensionDetailVirtualDom = async (newState, sanitizedReadmeHtml, selectedTab) => {
   // TODO move this to view model so that rendering occurs like
   // 1. state
   // 2. view model
@@ -2627,16 +2800,26 @@ const getExtensionDetailVirtualDom = async (extensionDetail, sanitizedReadmeHtml
   const tabs = getTabs(selectedTab);
   const sizeValue = getViewletSize(newState?.width || 0);
   const sizeClass = getClassNames(sizeValue);
+  const buttonDefs = getExtensionDetailButtons(extension);
+  const {
+    name,
+    iconSrc,
+    description
+  } = newState;
+  const badge = getBadge(extension, newState);
+  const {
+    settingsButtonEnabled
+  } = newState;
   const dom = [{
     type: VirtualDomElements.Div,
     className: mergeClassNames(Viewlet, ExtensionDetail, sizeClass),
     childCount: 3
-  }, ...getExtensionDetailHeaderVirtualDom(extensionDetail), ...getTabsVirtualDom(tabs), ...(await getExtensionDetailContentVirtualDom(sanitizedReadmeHtml, themesHtml, selectedTab, features, displaySize, extensionId, extensionVersion, selectedFeature, extension, width))];
+  }, ...getExtensionDetailHeaderVirtualDom(name, iconSrc, description, badge, buttonDefs, settingsButtonEnabled), ...getTabsVirtualDom(tabs), ...(await getExtensionDetailContentVirtualDom(sanitizedReadmeHtml, themesHtml, selectedTab, features, displaySize, extensionId, extensionVersion, selectedFeature, extension, width))];
   return dom;
 };
 
 const renderDom = async (oldState, newState) => {
-  const dom = await getExtensionDetailVirtualDom(newState, newState.sanitizedReadmeHtml, newState.selectedTab, newState);
+  const dom = await getExtensionDetailVirtualDom(newState, newState.sanitizedReadmeHtml, newState.selectedTab);
   return ['Viewlet.setDom2', dom];
 };
 
@@ -2693,9 +2876,15 @@ const renderEventListeners = () => {
   }, {
     name: HandleClickDisable,
     params: ['handleClickDisable']
+  }, {
+    name: HandleClickSettings,
+    params: ['handleClickSettings']
   }, {
     name: HandleClickUninstall,
     params: ['handleClickUninstall']
+  }, {
+    name: HandleClickSetColorTheme,
+    params: ['handleClickSetColorTheme']
   }];
 };
 
@@ -2720,10 +2909,6 @@ const saveState = uid => {
   };
 };
 
-const terminate = () => {
-  globalThis.close();
-};
-
 const commandMap = {
   'ExtensionDetail.create': create$1,
   'ExtensionDetail.diff2': diff2,
@@ -2731,6 +2916,8 @@ const commandMap = {
   'ExtensionDetail.getCommandIds': getCommandIds,
   'ExtensionDetail.getMenuEntries': getMenuEntries,
   'ExtensionDetail.handleClickDisable': wrapCommand(handleClickDisable),
+  'ExtensionDetail.handleClickSettings': wrapCommand(handleClickSettings),
+  'ExtensionDetail.handleClickSetColorTheme': wrapCommand(handleClickSetColorTheme),
   'ExtensionDetail.handleClickSize': wrapCommand(handleClickSize),
   'ExtensionDetail.handleClickUninstall': wrapCommand(handleClickUninstall),
   'ExtensionDetail.handleFeaturesClick': wrapCommand(handleClickFeatures),
@@ -2742,7 +2929,8 @@ const commandMap = {
   'ExtensionDetail.resize': resize,
   'ExtensionDetail.saveState': saveState,
   'ExtensionDetail.selectTab': wrapCommand(selectTab),
-  'ExtensionDetail.terminate': terminate
+  'ExtensionDetail.terminate': terminate,
+  'ExtensionDetail.initialize': initialize
 };
 
 const listen = async () => {