@lvce-editor/extension-detail-view 3.8.0 → 3.10.0

package/dist/extensionDetailViewWorkerMain.js

@@ -439,9 +439,9 @@ const get$2 = id => {
 const remove = id => {
   delete callbacks[id];
 };
-let id = 0;
+let id$1 = 0;
 const create$3 = () => {
-  return ++id;
+  return ++id$1;
 };
 const registerPromise = () => {
   const id = create$3();
@@ -767,12 +767,12 @@ const invokeAndTransfer = (ipc, method, ...params) => {
   return invokeHelper(ipc, method, params, true);
 };
 
-const commands = Object.create(null);
+const commands$1 = Object.create(null);
 const register = commandMap => {
-  Object.assign(commands, commandMap);
+  Object.assign(commands$1, commandMap);
 };
 const getCommand = key => {
-  return commands[key];
+  return commands$1[key];
 };
 const execute = (command, ...args) => {
   const fn = getCommand(command);
@@ -874,7 +874,7 @@ const create = (uid, uri, width, height, platform) => {
     name: '',
     sanitizedReadmeHtml: '',
     selectedTab: '',
-    size: 0,
+    sizeOnDisk: 0,
     width,
     uri,
     entries: [],
@@ -894,12 +894,18 @@ const AdditionalDetails = 'AdditionalDetails';
 const AdditionalDetailsEntry = 'AdditionalDetailsEntry';
 const AdditionalDetailsTitle = 'AdditionalDetailsTitle';
 const Aside$2 = 'Aside';
+const Button$1 = 'Button';
+const ButtonPrimary = 'ButtonPrimary';
 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';
@@ -908,15 +914,21 @@ 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 Markdown = 'Markdown';
 const MoreInfo = 'MoreInfo';
 const MoreInfoEntry = 'MoreInfoEntry';
 const MoreInfoEntryKey = 'MoreInfoEntryKey';
 const MoreInfoEntryValue = 'MoreInfoEntryValue';
+const Normal$1 = 'Normal';
 const Resource = 'Resource';
 const Resources = 'Resources';
+const Small$1 = 'Small';
+const Table$1 = 'Table';
 const Viewlet = 'Viewlet';
 
 const BYTE_UNITS = ['B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
@@ -1053,11 +1065,6 @@ const TabList = 'tablist';
 const Tab = 'tab';
 const Panel = 'panel';
 
-const HandleClickSize = 'handleClickSize';
-const HandleFeaturesClick = 'handleFeaturesClick';
-const HandleReadmeContextMenu = 'handleReadmeContextMenu';
-const HandleTabsClick = 'handleTabsClick';
-
 const getAdditionalDetailsEntryVirtualDom = (heading, items, renderer) => {
   return [{
     type: Div$1,
@@ -1181,8 +1188,15 @@ const getResourcesVirtualDom = resources => {
   }, ...resources.flatMap(getResourceVirtualDom)];
 };
 
-const getAdditionalDetailsVirtualDom = (firstHeading, entries, secondHeading, secondEntries, thirdHeading, categories, fourthHeading, resources) => {
+const getAdditionalDetailsVirtualDom = (showAdditionalDetails, firstHeading, entries, secondHeading, secondEntries, thirdHeading, categories, fourthHeading, resources) => {
+  if (!showAdditionalDetails) {
+    return [];
+  }
   return [{
+    type: Div$1,
+    className: Aside$2,
+    childCount: 1
+  }, {
     type: Div$1,
     className: AdditionalDetails,
     tabIndex: 0,
@@ -1190,6 +1204,13 @@ const getAdditionalDetailsVirtualDom = (firstHeading, entries, secondHeading, se
   }, ...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 HandleReadmeContextMenu = 'handleReadmeContextMenu';
+const HandleTabsClick = 'handleTabsClick';
+
 const getInstallationEntries = (displaySize, extensionId, extensionVersion) => {
   const entries = [{
     key: 'Identifier',
@@ -1214,6 +1235,19 @@ const getInstallationEntries = (displaySize, extensionId, extensionVersion) => {
 
 const allowedMarkdownAttributes = ['src', 'id', 'className', 'title', 'alt', 'href', 'target', 'rel'];
 
+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 Div = 'div';
 const H1 = 'h1';
 const H2 = 'h2';
@@ -1657,8 +1691,15 @@ const parseHtml = (html, allowedAttributes) => {
 
 const getMarkdownVirtualDom = html => {
   string(html);
-  const dom = parseHtml(html, allowedMarkdownAttributes);
-  return dom;
+  const childDom = parseHtml(html, allowedMarkdownAttributes);
+  const markdownChildCount = getVirtualDomChildCount(childDom);
+  return [{
+    type: Div$1,
+    className: Markdown,
+    role: Document,
+    onContextMenu: HandleReadmeContextMenu,
+    childCount: markdownChildCount
+  }, ...childDom];
 };
 
 const getMarketplaceEntries = () => {
@@ -1672,22 +1713,7 @@ const getMarketplaceEntries = () => {
   }];
 };
 
-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 getDetailsVirtualDom = (sanitizedReadmeHtml, displaySize, extensionId, extensionVersion) => {
-  const markdownDom = getMarkdownVirtualDom(sanitizedReadmeHtml);
-  const childCount = getVirtualDomChildCount(markdownDom);
+const getDetailsVirtualDom = (sanitizedReadmeHtml, displaySize, extensionId, extensionVersion, width) => {
   const firstHeading = 'Installation';
   const entries = getInstallationEntries(displaySize, extensionId, extensionVersion);
   const secondHeading = 'Marketplace';
@@ -1711,25 +1737,96 @@ const getDetailsVirtualDom = (sanitizedReadmeHtml, displaySize, extensionId, ext
     label: 'License',
     url: '#'
   }];
+  const showAdditionalDetailsBreakpoint = 600;
+  const showAdditionalDetails = width > showAdditionalDetailsBreakpoint;
+  const childCount = showAdditionalDetails ? 2 : 1;
   const dom = [{
     type: Div$1,
     className: ExtensionDetailPanel,
-    childCount: 2,
+    childCount: childCount,
     role: Panel
-  }, {
-    type: Div$1,
-    className: Markdown,
-    role: Document,
-    onContextMenu: HandleReadmeContextMenu,
-    childCount
-  }, ...markdownDom, {
-    type: Div$1,
-    className: Aside$2,
-    childCount: 1
-  }, ...getAdditionalDetailsVirtualDom(firstHeading, entries, secondHeading, secondEntries, thirdHeading, categories, fourthHeading, resources)];
+  }, ...getMarkdownVirtualDom(sanitizedReadmeHtml), ...getAdditionalDetailsVirtualDom(showAdditionalDetails, firstHeading, entries, secondHeading, secondEntries, thirdHeading, categories, fourthHeading, resources)];
   return dom;
 };
 
+const emptyObject = {};
+const RE_PLACEHOLDER = /\{(PH\d+)\}/g;
+const i18nString = (key, placeholders = emptyObject) => {
+  if (placeholders === emptyObject) {
+    return key;
+  }
+  const replacer = (match, rest) => {
+    return placeholders[rest];
+  };
+  return key.replaceAll(RE_PLACEHOLDER, replacer);
+};
+
+const Commands$1 = 'Commands';
+const ContentSecurityPolicy = 'ContentSecurityPolicy';
+const Copy = 'Copy';
+const Elements = 'Elements';
+const FileMatch = 'File Match';
+const Id = 'ID';
+const JsonValidation$1 = 'Json Validation';
+const OpenImageInNewTab = 'Open Image in New Tab';
+const OpenInNewTab = 'Open in New Tab';
+const ProgrammingLanguages$1 = 'Programming Languages';
+const SaveImageAs = 'Save Image as';
+const Schema = 'Schema';
+const Selector = 'Selector';
+const Settings$1 = 'Settings';
+const Theme$1 = 'Theme';
+const WebViews$1 = 'WebViews';
+
+const copy = () => {
+  return i18nString(Copy);
+};
+const openInNewTab = () => {
+  return i18nString(OpenInNewTab);
+};
+const openImageInNewTab = () => {
+  return i18nString(OpenImageInNewTab);
+};
+const saveImageAs = () => {
+  return i18nString(SaveImageAs);
+};
+const fileMatch = () => {
+  return i18nString(FileMatch);
+};
+const schema = () => {
+  return i18nString(Schema);
+};
+const theme = () => {
+  return i18nString(Theme$1);
+};
+const commands = () => {
+  return i18nString(Commands$1);
+};
+const webViews = () => {
+  return i18nString(WebViews$1);
+};
+const jsonValidation = () => {
+  return i18nString(JsonValidation$1);
+};
+const programmingLanguages = () => {
+  return i18nString(ProgrammingLanguages$1);
+};
+const settings = () => {
+  return i18nString(Settings$1);
+};
+const id = () => {
+  return i18nString(Id);
+};
+const selector = () => {
+  return i18nString(Selector);
+};
+const contentSecurityPolicy = () => {
+  return i18nString(ContentSecurityPolicy);
+};
+const elements = () => {
+  return i18nString(Elements);
+};
+
 const Text = 1;
 const Code = 2;
 
@@ -1756,9 +1853,17 @@ const getCommandTableEntries = extension => {
   };
 };
 
+const getFeatureContentHeadingVirtualDom = heading => {
+  return [{
+    type: H1$1,
+    childCount: 1
+  }, text(heading)];
+};
+
 const getCellCodeVirtualDom = value => {
   return [{
     type: Td,
+    className: 'TableCell',
     childCount: 1
   }, {
     type: Div$1,
@@ -1770,26 +1875,35 @@ const getCellCodeVirtualDom = value => {
 const getCellTextVirtualDom = value => {
   return [{
     type: Td,
+    className: 'TableCell',
     childCount: 1
   }, text(value)];
 };
 
+const getCellRenderer = type => {
+  switch (type) {
+    case Code:
+      return getCellCodeVirtualDom;
+    case Text:
+      return getCellTextVirtualDom;
+    default:
+      throw new Error(`unexpected cell type ${type}`);
+  }
+};
+
 const getCellVirtualDom = entry => {
   const {
     value,
     type
   } = entry;
-  switch (type) {
-    case Code:
-      return getCellCodeVirtualDom(value);
-    default:
-      return getCellTextVirtualDom(value);
-  }
+  const fn = getCellRenderer(type);
+  return fn(value);
 };
 
 const getTableHeadingVirtualDom = heading => {
   return [{
     type: Th,
+    className: 'TableHeading',
     childCount: 1
   }, text(heading)];
 };
@@ -1807,7 +1921,7 @@ const getTableVirtualDom = tableInfo => {
   } = tableInfo;
   return [{
     type: Table,
-    className: 'Table',
+    className: Table$1,
     childCount: 2
   }, {
     type: THead,
@@ -1822,55 +1936,13 @@ const getTableVirtualDom = tableInfo => {
 };
 
 const getFeatureCommandsVirtualDom = extension => {
-  // TODO use i18n strings
-  const heading = 'Commands';
+  const heading = commands();
   const tableInfo = getCommandTableEntries(extension);
   return [{
     type: Div$1,
-    className: 'FeatureCommands',
+    className: FeatureContent,
     childCount: 2
-  }, {
-    type: H1$1,
-    childCount: 1
-  }, text(heading), ...getTableVirtualDom(tableInfo)];
-};
-
-const emptyObject = {};
-const RE_PLACEHOLDER = /\{(PH\d+)\}/g;
-const i18nString = (key, placeholders = emptyObject) => {
-  if (placeholders === emptyObject) {
-    return key;
-  }
-  const replacer = (match, rest) => {
-    return placeholders[rest];
-  };
-  return key.replaceAll(RE_PLACEHOLDER, replacer);
-};
-
-const Copy = 'Copy';
-const OpenInNewTab = 'Open in New Tab';
-const OpenImageInNewTab = 'Open Image in New Tab';
-const SaveImageAs = 'Save Image as';
-const FileMatch = 'File Match';
-const Schema = 'Schema';
-
-const copy = () => {
-  return i18nString(Copy);
-};
-const openInNewTab = () => {
-  return i18nString(OpenInNewTab);
-};
-const openImageInNewTab = () => {
-  return i18nString(OpenImageInNewTab);
-};
-const saveImageAs = () => {
-  return i18nString(SaveImageAs);
-};
-const fileMatch = () => {
-  return i18nString(FileMatch);
-};
-const schema = () => {
-  return i18nString(Schema);
+  }, ...getFeatureContentHeadingVirtualDom(heading), ...getTableVirtualDom(tableInfo)];
 };
 
 const getJsonValidationTableEntry = validation => {
@@ -1886,6 +1958,7 @@ const getJsonValidationTableEntry = validation => {
     value: schema
   }];
 };
+
 const getJsonValidationTableEntries = extension => {
   const validations = extension.jsonValidation || [];
   const rows = validations.map(getJsonValidationTableEntry);
@@ -1896,31 +1969,35 @@ const getJsonValidationTableEntries = extension => {
 };
 
 const getFeatureJsonValidationVirtualDom = extension => {
-  // TODO use i18n
-  const heading = 'Json Validation';
+  const heading = jsonValidation();
   const tableInfo = getJsonValidationTableEntries(extension);
   return [{
     type: Div$1,
-    className: 'FeatureJsonValidation',
+    className: FeatureContent,
     childCount: 2
+  }, ...getFeatureContentHeadingVirtualDom(heading), ...getTableVirtualDom(tableInfo)];
+};
+
+const getFeatureNotImplementedVirtualDom = () => {
+  const heading = 'Not implemented';
+  return [{
+    type: Div$1,
+    className: FeatureContent,
+    childCount: 1
   }, {
     type: H1$1,
     childCount: 1
-  }, text(heading), ...getTableVirtualDom(tableInfo)];
+  }, text(heading)];
 };
 
 const getFeatureProgrammingLanguagesVirtualDom = () => {
-  // TODO use i18n string
-  const heading = 'Programming Languages';
+  const heading = programmingLanguages();
   // TODO
   return [{
     type: Div$1,
-    className: 'FeatureProgrammingLanguages',
+    className: FeatureContent,
     childCount: 1
-  }, {
-    type: H1$1,
-    childCount: 1
-  }, text(heading)];
+  }, ...getFeatureContentHeadingVirtualDom(heading)];
 };
 
 const getSettingsTableEntry = setting => {
@@ -1947,36 +2024,76 @@ const getSettingsTableEntries = extension => {
 };
 
 const getFeatureSettingsVirtualDom = extension => {
-  const heading = 'Settings';
+  const heading = settings();
   const tableInfo = getSettingsTableEntries(extension);
   return [{
     type: Div$1,
-    className: 'FeatureSettings',
+    className: FeatureContent,
     childCount: 2
-  }, {
-    type: H1$1,
-    childCount: 1
-  }, text(heading), ...getTableVirtualDom(tableInfo)];
+  }, ...getFeatureContentHeadingVirtualDom(heading), ...getTableVirtualDom(tableInfo)];
 };
 
 const getFeatureThemesVirtualDom = themesHtml => {
   const markdownDom = getMarkdownVirtualDom(themesHtml);
   const childCount = getVirtualDomChildCount(markdownDom);
-  const heading = 'Themes';
+  const heading = theme();
   return [{
     type: Div$1,
-    className: 'FeatureTheme',
+    className: FeatureContent,
     childCount: 2
-  }, {
-    type: H1$1,
-    childCount: 1
-  }, text(heading), {
+  }, ...getFeatureContentHeadingVirtualDom(heading), {
     type: Div$1,
     className: 'DefaultMarkdown',
     childCount
   }, ...markdownDom];
 };
 
+const heading$1 = {
+  type: H2$1,
+  className: DefinitionListItemHeading,
+  childCount: 1
+};
+const pre = {
+  type: Pre$1,
+  className: DefinitionListItemValue,
+  childCount: 1
+};
+const item = {
+  type: Div$1,
+  className: DefinitionListItem,
+  childCount: 2
+};
+const getWebViewVirtualDom = webView => {
+  const {
+    id: id$1,
+    selector: selector$1,
+    contentSecurityPolicy: contentSecurityPolicy$1,
+    elements: elements$1
+  } = webView;
+  const textId = id();
+  const textSelector = selector();
+  const textContentSecurityPolicy = contentSecurityPolicy();
+  const textElements = elements();
+  return [{
+    type: Div$1,
+    className: FeatureWebView,
+    childCount: 5
+  }, item, heading$1, text(textId), pre, text(id$1), item, heading$1, text(textSelector), pre, text(JSON.stringify(selector$1)), item, heading$1, text(textContentSecurityPolicy), pre, text(JSON.stringify(contentSecurityPolicy$1)), item, heading$1, text(textElements), pre, text(JSON.stringify(elements$1, null, 2))];
+};
+
+const getFeatureWebViewsVirtualDom = extension => {
+  const webViews$1 = extension.webViews || [];
+  const heading = webViews();
+  return [{
+    type: Div$1,
+    className: FeatureContent,
+    childCount: 2
+  }, ...getFeatureContentHeadingVirtualDom(heading), {
+    type: Div$1,
+    childCount: webViews$1.length
+  }, ...webViews$1.flatMap(getWebViewVirtualDom)];
+};
+
 const Changelog = 'Changelog';
 const Commands = 'Commands';
 const Details = 'Details';
@@ -1984,6 +2101,7 @@ const Features = 'Features';
 const JsonValidation = 'JsonValidation';
 const ProgrammingLanguages = 'ProgrammingLanguages';
 const Settings = 'Settings';
+const WebViews = 'WebViews';
 const Theme = 'Theme';
 
 const getFeatureContentVirtualDom = (features, themesHtml, selectedFeature, extension) => {
@@ -1998,12 +2116,10 @@ const getFeatureContentVirtualDom = (features, themesHtml, selectedFeature, exte
       return getFeatureProgrammingLanguagesVirtualDom();
     case Settings:
       return getFeatureSettingsVirtualDom(extension);
+    case WebViews:
+      return getFeatureWebViewsVirtualDom(extension);
     default:
-      return [{
-        type: Div$1,
-        className: 'FeatureContent',
-        childCount: 1
-      }, text('Not Implemented')];
+      return getFeatureNotImplementedVirtualDom();
   }
 };
 
@@ -2034,6 +2150,13 @@ const getFeatureListVirtualDom = features => {
 };
 
 const getFeaturesVirtualDom = (features, themesHtml, selectedFeature, extension) => {
+  if (features.length === 0) {
+    return [{
+      type: Div$1,
+      className: Features$1,
+      childCount: 3
+    }, text('None')];
+  }
   return [{
     type: Div$1,
     className: Features$1,
@@ -2045,10 +2168,10 @@ const getFeaturesVirtualDom = (features, themesHtml, selectedFeature, extension)
   }, ...getFeatureContentVirtualDom(features, themesHtml, selectedFeature, extension)];
 };
 
-const getExtensionDetailContentVirtualDom = (sanitizedReadmeHtml, themesHtml, selectedTab, features, displaySize, extensionId, extensionVersion, selectedFeature, extension) => {
+const getExtensionDetailContentVirtualDom = (sanitizedReadmeHtml, themesHtml, selectedTab, features, displaySize, extensionId, extensionVersion, selectedFeature, extension, width) => {
   switch (selectedTab) {
     case Details:
-      return getDetailsVirtualDom(sanitizedReadmeHtml, displaySize, extensionId, extensionVersion);
+      return getDetailsVirtualDom(sanitizedReadmeHtml, displaySize, extensionId, extensionVersion, width);
     case Features:
       return getFeaturesVirtualDom(features, themesHtml, selectedFeature, extension);
     case Changelog:
@@ -2058,6 +2181,24 @@ const getExtensionDetailContentVirtualDom = (sanitizedReadmeHtml, themesHtml, se
   }
 };
 
+const getButtonVirtualDom = (message, onClick) => {
+  return [{
+    type: Button,
+    className: Button$1 + ' ' + ButtonPrimary,
+    onClick,
+    childCount: 1
+  }, text(message)];
+};
+
+const getExtensionDetailHeaderActionsVirtualDom = () => {
+  const dom = [{
+    type: Div$1,
+    className: ExtensionDetailHeaderActions,
+    childCount: 2
+  }, ...getButtonVirtualDom('Disable', HandleClickDisable), ...getButtonVirtualDom('Uninstall', HandleClickUninstall)];
+  return dom;
+};
+
 const getExtensionDetailHeaderVirtualDom = extensionDetail => {
   const {
     name,
@@ -2078,7 +2219,7 @@ const getExtensionDetailHeaderVirtualDom = extensionDetail => {
   }, {
     type: Div$1,
     className: ExtensionDetailHeaderDetails,
-    childCount: 2
+    childCount: 3
   }, {
     type: Div$1,
     className: ExtensionDetailName,
@@ -2087,35 +2228,43 @@ const getExtensionDetailHeaderVirtualDom = extensionDetail => {
     type: Div$1,
     className: ExtensionDetailDescription,
     childCount: 1
-  }, text(description)];
+  }, text(description), ...getExtensionDetailHeaderActionsVirtualDom()];
   return dom;
 };
 
-const getFeatures = selectedFeature => {
+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 [];
+  }
+  return [{
+    id,
+    label,
+    selected: selectedFeature === id
+  }];
+};
+const getFeatures = (selectedFeature, extension) => {
   if (!selectedFeature) {
     selectedFeature = Theme;
   }
-  const features = [{
-    id: Theme,
-    label: 'Theme',
-    selected: selectedFeature === Theme
-  }, {
-    id: Commands,
-    label: 'Commands',
-    selected: selectedFeature === Commands
-  }, {
-    id: JsonValidation,
-    label: 'Json Validation',
-    selected: selectedFeature === JsonValidation
-  }, {
-    id: ProgrammingLanguages,
-    label: 'Programming Languages',
-    selected: selectedFeature === ProgrammingLanguages
-  }, {
-    id: Settings,
-    label: 'Settings',
-    selected: selectedFeature === Settings
-  }];
+  const features = [...ifElseFeature(Theme, 'Theme', hasThemes, selectedFeature, extension), ...ifElseFeature(Commands, 'Commands', hasCommands, selectedFeature, extension), ...ifElseFeature(JsonValidation, 'Json Validation', hasJsonValidation, selectedFeature, extension), ...ifElseFeature(ProgrammingLanguages, 'Programming Languages', hasProgrammingLanguages, selectedFeature, extension), ...ifElseFeature(Settings, 'Settings', hasSettings, selectedFeature, extension), ...ifElseFeature(WebViews, 'WebViews', hasWebViews, selectedFeature, extension)];
   return features;
 };
 
@@ -2176,6 +2325,33 @@ const getTabsVirtualDom = tabs => {
   }, ...tabs.flatMap(getTabVirtualDom)];
 };
 
+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 getClassNames = size => {
+  switch (size) {
+    case Small:
+      return Small$1;
+    case Normal:
+      return Normal$1;
+    case Large:
+      return Large$1;
+    default:
+      return '';
+  }
+};
+
 const getExtensionDetailVirtualDom = (extensionDetail, sanitizedReadmeHtml, selectedTab, newState) => {
   // TODO move this to view model so that rendering occurs like
   // 1. state
@@ -2184,18 +2360,21 @@ const getExtensionDetailVirtualDom = (extensionDetail, sanitizedReadmeHtml, sele
   // 4. dom
   const themesHtml = newState?.selectedFeatureMarkdownDom || '';
   const selectedFeature = newState?.selectedFeature || '';
-  const features = newState?.features || getFeatures(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 extension = newState?.extension || {};
   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$1,
-    className: mergeClassNames(Viewlet, ExtensionDetail),
+    className: mergeClassNames(Viewlet, ExtensionDetail, sizeClass),
     childCount: 3
-  }, ...getExtensionDetailHeaderVirtualDom(extensionDetail), ...getTabsVirtualDom(tabs), ...getExtensionDetailContentVirtualDom(sanitizedReadmeHtml, themesHtml, selectedTab, features, displaySize, extensionId, extensionVersion, selectedFeature, extension)];
+  }, ...getExtensionDetailHeaderVirtualDom(extensionDetail), ...getTabsVirtualDom(tabs), ...getExtensionDetailContentVirtualDom(sanitizedReadmeHtml, themesHtml, selectedTab, features, displaySize, extensionId, extensionVersion, selectedFeature, extension, width)];
   return dom;
 };
 
@@ -2242,7 +2421,14 @@ const getLinkMenuEntries = props => {
 
 const getMenuEntries = props => [...getLinkMenuEntries(props), ...getImageMenuEntries(props), getCopyMenuEntry()];
 
+const handleClickDisable = async state => {
+  return state;
+};
+
 const selectFeature = async (state, name) => {
+  if (!name) {
+    return state;
+  }
   const {
     features
   } = state;
@@ -2292,6 +2478,10 @@ const handleClickSize = async state => {
   return state;
 };
 
+const handleClickUninstall = async state => {
+  return state;
+};
+
 const assetDir = '';
 
 const ExtensionDefaultIcon = `${assetDir}/icons/extensionDefaultIcon.png`;
@@ -4862,6 +5052,7 @@ const selectTab$1 = async state => {
     iconThemes,
     productIconThemes
   } = extension;
+  // TODO do this depending on featured tab content
   const markdown = getThemeMarkdown(colorThemes || [], iconThemes || [], productIconThemes || []);
   const rendered = await renderMarkdown(markdown, {
     baseUrl
@@ -5011,20 +5202,6 @@ const getSavedSelectedTab = savedState => {
   return Details;
 };
 
-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 readFile = async uri => {
   return invoke('FileSystem.readFile', uri);
 };
@@ -5073,7 +5250,7 @@ const loadContent = async (state, platform, savedState) => {
   const size = getViewletSize(width);
   const selectedTab = getSavedSelectedTab(savedState);
   const selectedFeature = getSavedSelectedFeature(savedState);
-  const features = getFeatures(selectedFeature);
+  const features = getFeatures(selectedFeature, extension);
   const folderSize = await getFolderSize(extension.uri);
   const entries = [{
     key: 'Identifier',
@@ -5116,7 +5293,7 @@ const loadContent = async (state, platform, savedState) => {
     iconSrc,
     name,
     description,
-    size,
+    sizeOnDisk: size,
     entries,
     secondEntries,
     categories,
@@ -5147,7 +5324,9 @@ const commandMap = {
   'ExtensionDetail.create': create,
   'ExtensionDetail.getMenuEntries': getMenuEntries,
   'ExtensionDetail.getVirtualDom': getExtensionDetailVirtualDom,
+  'ExtensionDetail.handleClickDisable': handleClickDisable,
   'ExtensionDetail.handleClickSize': handleClickSize,
+  'ExtensionDetail.handleClickUninstall': handleClickUninstall,
   'ExtensionDetail.handleFeaturesClick': handleClickFeatures,
   'ExtensionDetail.handleIconError': handleIconError,
   'ExtensionDetail.handleTabsClick': handleTabsClick,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/extension-detail-view",
-  "version": "3.8.0",
+  "version": "3.10.0",
   "description": "Extension Detail View Worker",
   "keywords": [],
   "license": "MIT",