@lvce-editor/static-server 0.68.4 → 0.69.1

package/static/{4a1121b → a9c13cf}/packages/source-control-worker/dist/sourceControlWorkerMain.js

@@ -1255,8 +1255,8 @@ const getDisplayItemsGroup = (group, expandedGroups, iconDefinitions) => {
   const displayItems = [];
   const {
     id,
-    label,
-    items
+    items,
+    label
   } = group;
   if (!items) {
     throw new Error('Source control group is missing an items property');
@@ -1269,18 +1269,18 @@ const getDisplayItemsGroup = (group, expandedGroups, iconDefinitions) => {
   const icon = isExpanded ? 'ChevronDown' : 'ChevronRight';
   if (length > 0) {
     displayItems.push({
+      badgeCount: length,
+      decorationIcon: '',
+      decorationIconTitle: '',
+      decorationStrikeThrough: false,
+      detail: '',
       file: '',
+      groupId: id,
+      icon,
       label,
-      detail: '',
       posInSet: 1,
       setSize: 1,
-      icon,
-      decorationIcon: '',
-      decorationIconTitle: '',
-      decorationStrikeThrough: false,
-      type,
-      badgeCount: length,
-      groupId: id
+      type
     });
   }
   if (isExpanded) {
@@ -1296,20 +1296,20 @@ const getDisplayItemsGroup = (group, expandedGroups, iconDefinitions) => {
       const folderName = file.slice(0, -baseName.length - 1);
       const actualDecorationIcon = getActualDecorationIcon(iconDefinitions, icon);
       displayItems.push({
-        file,
-        label: baseName,
+        badgeCount: 0,
+        decorationIcon: actualDecorationIcon,
+        decorationIconTitle: iconTitle,
+        decorationStrikeThrough: strikeThrough,
         detail: folderName,
-        posInSet: i + 1,
-        setSize: length,
+        file,
+        groupId: id,
         icon: getFileIcon({
           name: file
         }),
-        decorationIcon: actualDecorationIcon,
-        decorationIconTitle: iconTitle,
-        decorationStrikeThrough: strikeThrough,
-        type: File,
-        badgeCount: 0,
-        groupId: id
+        label: baseName,
+        posInSet: i + 1,
+        setSize: length,
+        type: File
       });
     }
   }
@@ -1340,8 +1340,8 @@ const getMissingIconRequests = (dirents, fileIconCache) => {
   for (const dirent of dirents) {
     if (!(dirent.file in fileIconCache)) {
       missingRequests.push({
-        type: getIconType(dirent.type),
-        name: dirent.label
+        name: dirent.label,
+        type: getIconType(dirent.type)
       });
     }
   }
@@ -1557,6 +1557,15 @@ const getContextId = (groupId, type) => {
   return groupId;
 };
 
+const defaultIndent = 16; // 1rem = 16px
+
+const getTreeItemIndent = type => {
+  if (type === Directory || type === DirectoryExpanded) {
+    return 0;
+  }
+  return defaultIndent;
+};
+
 const getVisibleSourceControlItems = (items, minLineY, maxLineY, actionsCache, fileIconCache) => {
   const visible = [];
   for (let i = minLineY; i < maxLineY; i++) {
@@ -1564,10 +1573,12 @@ const getVisibleSourceControlItems = (items, minLineY, maxLineY, actionsCache, f
     const contextId = getContextId(item.groupId, item.type);
     const buttons = actionsCache[contextId] || emptySourceControlButtons;
     const fileIcon = fileIconCache[item.label] || '';
+    const indent = getTreeItemIndent(item.type);
     visible.push({
       ...item,
       buttons,
-      fileIcon
+      fileIcon,
+      indent
     });
   }
   return visible;
@@ -1644,6 +1655,9 @@ const StageChanges = 'Stage Changes';
 const AddToGitignore = 'Add to gitignore';
 const RevealInExplorerView = 'Reveal in Explorer View';
 const OpenContainingFolder = 'Open Containing Folder';
+const ViewAsTree$1 = 'View As Tree';
+const CommitAndPush$1 = 'Commit and Push';
+const Refresh$2 = 'Refresh';
 const MessageEnterToCommitOnMaster = `Message (Enter) to commit on 'master'`;
 const SourceControlInput$1 = 'Source Control Input';
 
@@ -1671,6 +1685,15 @@ const revealInExplorerView = () => {
 const openContainingFolder = () => {
   return i18nString(OpenContainingFolder);
 };
+const viewAsTree$1 = () => {
+  return i18nString(ViewAsTree$1);
+};
+const commitAndPush = () => {
+  return i18nString(CommitAndPush$1);
+};
+const refresh$1 = () => {
+  return i18nString(Refresh$2);
+};
 const messageEnterToCommitOnMaster = () => {
   return i18nString(MessageEnterToCommitOnMaster);
 };
@@ -1680,17 +1703,17 @@ const sourceControlInput = () => {
 
 const loadContent = async (state, savedState) => {
   const {
-    itemHeight,
-    height,
-    minimumSliderSize,
-    workspacePath,
     fileIconCache,
-    width,
+    height,
     inputFontFamily,
     inputFontSize,
     inputFontWeight,
     inputLetterSpacing,
-    inputLineHeight
+    inputLineHeight,
+    itemHeight,
+    minimumSliderSize,
+    width,
+    workspacePath
   } = state;
   const root = workspacePath;
   const scheme = getProtocol(root);
@@ -1709,6 +1732,7 @@ const loadContent = async (state, savedState) => {
 
   // TODO make preferences async and more functional
   const splitButtonEnabled = await get$1('sourceControl.splitButtonEnabled');
+  const badgeCount = allGroups.reduce((sum, group) => sum + group.items.length, 0);
   const total = displayItems.length;
   const contentHeight = total * itemHeight;
   const listHeight = getListHeight(total, itemHeight, height);
@@ -1725,6 +1749,7 @@ const loadContent = async (state, savedState) => {
     ...state,
     actionsCache,
     allGroups,
+    badgeCount,
     decorationIcons: iconDefinitions,
     enabledProviderIds,
     fileIconCache: newFileIconCache,
@@ -1755,8 +1780,8 @@ const warn = (...args) => {
 
 const acceptInput = async state => {
   const {
-    inputValue,
-    enabledProviderIds
+    enabledProviderIds,
+    inputValue
   } = state;
   if (enabledProviderIds.length === 0) {
     info('[ViewletSourceControl] no source control provider found');
@@ -1773,10 +1798,10 @@ const acceptInput = async state => {
 
 const {
   get,
-  set,
-  wrapCommand,
   getCommandIds,
   registerCommands,
+  set,
+  wrapCommand,
   wrapGetter
 } = create();
 
@@ -1784,25 +1809,40 @@ const create2 = (id, uri, x, y, width, height, workspacePath) => {
   const state = {
     actionsCache: Object.create(null),
     allGroups: [],
+    badgeCount: 0,
+    decorationIcons: [],
     deltaY: 0,
     enabledProviderIds: [],
+    expandedGroups: Object.create(null),
     fileIconCache: Object.create(null),
     finalDeltaY: 0,
+    focus: 0,
     gitRoot: '',
     handleOffset: 0,
     headerHeight: 40,
     // TODO
     height,
+    history: [],
+    iconDefinitions: [],
     id,
     index: [],
+    inputBoxHeight: 30,
+    inputBoxMaxHeight: 214,
+    inputFontFamily: 'system-ui, Ubuntu, "Droid Sans", sans-serif',
+    inputFontSize: 13,
+    inputFontWeight: 400,
+    inputLetterSpacing: 0,
+    inputLineHeight: 20,
+    inputPlaceholder: '',
+    inputSource: 0,
     inputValue: '',
-    expandedGroups: Object.create(null),
+    isVisible: true,
     itemHeight: 20,
     items: [],
+    maxInputLines: 5,
     maxLineY: 0,
     merge: [],
     minimumSliderSize: 20,
-    inputBoxHeight: 30,
     minLineY: 0,
     providerId: '',
     root: '',
@@ -1810,26 +1850,13 @@ const create2 = (id, uri, x, y, width, height, workspacePath) => {
     scrollBarHeight: 0,
     splitButtonEnabled: false,
     untracked: [],
+    viewMode: 1,
     visibleItems: [],
     width,
     workingTree: [],
     workspacePath,
     x,
-    y,
-    inputPlaceholder: '',
-    inputSource: 0,
-    maxInputLines: 5,
-    inputFontFamily: 'system-ui, Ubuntu, "Droid Sans", sans-serif',
-    inputFontSize: 13,
-    inputFontWeight: 400,
-    inputLetterSpacing: 0,
-    inputLineHeight: 20,
-    inputBoxMaxHeight: 214,
-    history: [],
-    viewMode: 1,
-    iconDefinitions: [],
-    decorationIcons: [],
-    focus: 0
+    y
   };
   set(id, state, state);
 };
@@ -1871,13 +1898,19 @@ const diff = (oldState, newState) => {
 
 const diff2 = uid => {
   const {
-    oldState,
-    newState
+    newState,
+    oldState
   } = get(uid);
   const result = diff(oldState, newState);
   return result;
 };
 
+const getBadgeCount = ({
+  badgeCount
+}) => {
+  return badgeCount;
+};
+
 const getInfo = uid => {
   const {
     newState
@@ -1899,53 +1932,53 @@ const text = data => {
 
 const getKeyBindings = () => {
   return [{
-    key: CtrlCmd | Enter,
     command: 'Source Control.acceptInput',
+    key: CtrlCmd | Enter,
     when: FocusSourceControlInput
   }];
 };
 
 const getMenuEntries = () => {
   return [{
-    label: openChanges(),
-    flags: None,
     command: /* TODO */'-1',
-    id: ''
-  }, {
-    label: openFile(),
     flags: None,
-    command: /* TODO */'-1',
-    id: ''
+    id: '',
+    label: openChanges()
   }, {
-    label: openFileHead(),
-    flags: None,
     command: /* TODO */'-1',
-    id: ''
-  }, {
-    label: discardChanges(),
     flags: None,
-    command: /* TODO */'-1',
-    id: ''
+    id: '',
+    label: openFile()
   }, {
-    label: stageChanges(),
-    flags: None,
     command: /* TODO */'-1',
-    id: ''
-  }, {
-    label: addToGitignore(),
     flags: None,
+    id: '',
+    label: openFileHead()
+  }, {
     command: /* TODO */'-1',
-    id: ''
+    flags: None,
+    id: '',
+    label: discardChanges()
   }, {
-    label: revealInExplorerView(),
+    command: /* TODO */'-1',
     flags: None,
+    id: '',
+    label: stageChanges()
+  }, {
     command: /* TODO */'-1',
-    id: ''
+    flags: None,
+    id: '',
+    label: addToGitignore()
   }, {
-    label: openContainingFolder(),
+    command: /* TODO */'-1',
     flags: None,
+    id: '',
+    label: revealInExplorerView()
+  }, {
     command: /* TODO */'-1',
-    id: ''
+    flags: None,
+    id: '',
+    label: openContainingFolder()
   }];
 };
 
@@ -1957,49 +1990,21 @@ const getMenuIds = () => {
   return [SourceControl$1];
 };
 
-const executeCommand = (id, ...args) => {
-  return executeProvider({
-    event: `onCommand:${id}`,
-    method: CommandExecute,
-    params: [id, ...args]
-  });
-};
-
-const handleButtonClick = async (state, clickedIndex) => {
-  const {
-    visibleItems
-  } = state;
-  const item = visibleItems[clickedIndex];
-  const button = item.buttons[clickedIndex];
-  if (!button) {
-    return state;
-  }
-  await executeCommand(button.command, item.file);
-  const newState = await loadContent(state, {});
-  return newState;
-};
-
-const getIndex = (state, eventX, eventY) => {
-  const {
-    headerHeight,
-    y,
-    itemHeight
-  } = state;
-  const relativeY = eventY - y - headerHeight;
-  const index = Math.floor(relativeY / itemHeight);
-  return index;
-};
+const SourceControlInput = 'SourceControlInput';
+const ViewAsTree = 'ViewAsTree';
+const CommitAndPush = 'CommitAndPush';
+const Refresh$1 = 'Refresh';
 
 const refresh = async state => {
   const {
-    itemHeight,
+    actionsCache,
+    enabledProviderIds,
+    fileIconCache,
     height,
+    iconDefinitions,
+    itemHeight,
     minimumSliderSize,
-    fileIconCache,
-    enabledProviderIds,
-    splitButtonEnabled,
-    actionsCache,
-    iconDefinitions
+    splitButtonEnabled
   } = state;
   const {
     allGroups,
@@ -2007,6 +2012,7 @@ const refresh = async state => {
   } = await getGroups(enabledProviderIds);
   const expandedGroups = restoreExpandedGroups(allGroups);
   const displayItems = getDisplayItems(allGroups, expandedGroups, iconDefinitions);
+  const badgeCount = allGroups.reduce((sum, group) => sum + group.items.length, 0);
   const total = displayItems.length;
   const contentHeight = total * itemHeight;
   const listHeight = getListHeight(total, itemHeight, height);
@@ -2021,6 +2027,7 @@ const refresh = async state => {
     ...state,
     actionsCache,
     allGroups,
+    badgeCount,
     enabledProviderIds,
     fileIconCache: newFileIconCache,
     finalDeltaY,
@@ -2033,6 +2040,61 @@ const refresh = async state => {
   };
 };
 
+const viewAsTree = state => {
+  return {
+    ...state,
+    viewMode: Tree
+  };
+};
+
+const handleActionClick = async (state, actionName) => {
+  switch (actionName) {
+    case CommitAndPush:
+      warn(`[source-control-worker] CommitAndPush action not yet implemented`);
+      return state;
+    case Refresh$1:
+      return refresh(state);
+    case ViewAsTree:
+      return viewAsTree(state);
+    default:
+      warn(`[source-control-worker] Unknown action name: ${actionName}`);
+      return state;
+  }
+};
+
+const executeCommand = (id, ...args) => {
+  return executeProvider({
+    event: `onCommand:${id}`,
+    method: CommandExecute,
+    params: [id, ...args]
+  });
+};
+
+const handleButtonClick = async (state, clickedIndex) => {
+  const {
+    visibleItems
+  } = state;
+  const item = visibleItems[clickedIndex];
+  const button = item.buttons[clickedIndex];
+  if (!button) {
+    return state;
+  }
+  await executeCommand(button.command, item.file);
+  const newState = await loadContent(state, {});
+  return newState;
+};
+
+const getIndex = (state, eventX, eventY) => {
+  const {
+    headerHeight,
+    itemHeight,
+    y
+  } = state;
+  const relativeY = eventY - y - headerHeight;
+  const index = Math.floor(relativeY / itemHeight);
+  return index;
+};
+
 const handleClickSourceControlButtons = async (state, index, name) => {
   const {
     visibleItems
@@ -2059,14 +2121,15 @@ const handleClickSourceControlButtons = async (state, index, name) => {
 
 const updateVisibleItems = async (state, expandedGroups) => {
   const {
-    itemHeight,
-    height,
     actionsCache,
-    fileIconCache,
     allGroups,
-    iconDefinitions
+    fileIconCache,
+    height,
+    iconDefinitions,
+    itemHeight
   } = state;
   const displayItems = getDisplayItems(allGroups, expandedGroups, iconDefinitions);
+  const badgeCount = allGroups.reduce((sum, group) => sum + group.items.length, 0);
   const total = displayItems.length;
   const listHeight = getListHeight(total, itemHeight, height);
   const numberOfVisible = getNumberOfVisibleItems(listHeight, itemHeight);
@@ -2075,11 +2138,12 @@ const updateVisibleItems = async (state, expandedGroups) => {
   const visibleItems = getVisibleSourceControlItems(displayItems, minLineY, maxLineY, actionsCache, fileIconCache);
   return {
     ...state,
-    items: displayItems,
-    visibleItems,
+    badgeCount,
     expandedGroups,
+    items: displayItems,
+    maxLineY,
     minLineY,
-    maxLineY
+    visibleItems
   };
 };
 
@@ -2190,19 +2254,19 @@ const handleInputFocus = async state => {
 
 const handleInput = async (state, value, inputSource = User) => {
   const {
-    width,
     inputFontFamily,
     inputFontSize,
     inputFontWeight,
     inputLetterSpacing,
-    inputLineHeight
+    inputLineHeight,
+    width
   } = state;
   const inputBoxHeight = await getInputHeight(value, width, inputFontFamily, inputFontWeight, inputFontSize, inputLetterSpacing, inputLineHeight);
   return {
     ...state,
-    inputValue: value,
+    inputBoxHeight,
     inputSource,
-    inputBoxHeight
+    inputValue: value
   };
 };
 
@@ -2255,12 +2319,12 @@ const handleMouseOverAt = async (state, eventX, eventY) => {
 
 const setDeltaY = async (state, newDeltaY) => {
   const {
-    itemHeight,
-    items,
-    height,
-    headerHeight,
     actionsCache,
-    fileIconCache
+    fileIconCache,
+    headerHeight,
+    height,
+    itemHeight,
+    items
   } = state;
   const normalizedDeltaY = Math.max(newDeltaY, 0);
   const newMinLineY = Math.floor(normalizedDeltaY / itemHeight);
@@ -2272,9 +2336,9 @@ const setDeltaY = async (state, newDeltaY) => {
   return {
     ...state,
     deltaY: newDeltaY,
-    visibleItems: visible,
+    maxLineY,
     minLineY: newMinLineY,
-    maxLineY
+    visibleItems: visible
   };
 };
 
@@ -2324,12 +2388,35 @@ const initialize = async () => {
   set$1(textRpc);
 };
 
+const getUnique = items => {
+  const seens = [];
+  for (const item of items) {
+    if (!seens.includes(item)) {
+      seens.push(item);
+    }
+  }
+  return seens;
+};
+
+const getIndentRule = indent => {
+  return `.Indent-${indent} {
+  padding-left: ${indent}px;
+}`;
+};
 const renderCss = (oldState, newState) => {
   const {
     id,
-    inputBoxHeight
+    inputBoxHeight,
+    visibleItems
   } = newState;
-  const css = `:root {
+  const indents = visibleItems.map(item => item.indent);
+  const uniqueIndents = getUnique(indents);
+  const indentRules = uniqueIndents.map(getIndentRule).join('\n');
+  const css = indentRules ? `:root {
+  --SourceControlInputHeight: ${inputBoxHeight}px;
+}
+${indentRules}
+` : `:root {
   --SourceControlInputHeight: ${inputBoxHeight}px;
 }
 `;
@@ -2338,8 +2425,8 @@ const renderCss = (oldState, newState) => {
 
 const renderFocusContext = (oldState, newState) => {
   const {
-    id,
-    focus
+    focus,
+    id
   } = newState;
   return [SetFocusContext, id, focus];
 };
@@ -2380,38 +2467,37 @@ const HandleMouseOutAt = 6;
 const HandleMouseOver = 7;
 const HandleMouseOverAt = 8;
 const HandleWheel = 9;
-
-const SourceControlInput = 'SourceControlInput';
+const HandleClickAction = 10;
 
 const getSourceControlInputDom = inputPlaceholder => {
   return [{
-    type: TextArea,
-    className: mergeClassNames(InputBox, 'MultilineInputBox'),
     ariaLabel: sourceControlInput(),
     autocapitalize: 'off',
     autocorrect: 'off',
     childCount: 0,
+    className: mergeClassNames(InputBox, 'MultilineInputBox'),
     name: SourceControlInput,
     onFocus: HandleFocus,
     onInput: HandleInput,
     placeholder: inputPlaceholder,
-    spellcheck: false
+    spellcheck: false,
+    type: TextArea
   }];
 };
 
 const getSourceControlHeaderVirtualDom = inputPlaceholder => {
   return [{
-    type: Div,
+    childCount: 1,
     className: SourceControlHeader,
-    childCount: 1
+    type: Div
   }, ...getSourceControlInputDom(inputPlaceholder)];
 };
 
 const className$1 = mergeClassNames(Badge, SourceControlBadge);
 const parentNode = {
-  type: Div,
+  childCount: 1,
   className: className$1,
-  childCount: 1
+  type: Div
 };
 const getBadgeVirtualDom = count => {
   return [parentNode, text(`${count}`)];
@@ -2419,10 +2505,10 @@ const getBadgeVirtualDom = count => {
 
 const getIconVirtualDom = (icon, type = Div) => {
   return {
-    type,
+    childCount: 0,
     className: `MaskIcon MaskIcon${icon}`,
     role: None$1,
-    childCount: 0
+    type
   };
 };
 
@@ -2432,12 +2518,12 @@ const getButtonVirtualDom = button => {
     label
   } = button;
   return [{
-    type: Button$2,
-    className: SourceControlButton,
-    title: label,
     ariaLabel: label,
     childCount: 1,
-    name: label
+    className: SourceControlButton,
+    name: label,
+    title: label,
+    type: Button$2
   }, getIconVirtualDom(icon, Span)];
 };
 
@@ -2446,9 +2532,9 @@ const getButtonsVirtualDom = buttons => {
     return [];
   }
   return [{
-    type: Div,
+    childCount: buttons.length,
     className: SourceControlButtons,
-    childCount: buttons.length
+    type: Div
   }, ...buttons.flatMap(getButtonVirtualDom)];
 };
 
@@ -2461,59 +2547,64 @@ const getLabelClassName = decorationStrikeThrough => {
   return classNameDefault;
 };
 
-const PaddingLeft = '1rem';
+const getTreeItemClassName = indent => {
+  let className = TreeItem;
+  className = mergeClassNames(className, `Indent-${indent}`);
+  return className;
+};
+
 const PaddingRight = '12px';
 
 const createItemDirectory = item => {
   const {
-    posInSet,
-    setSize,
-    icon,
-    label,
     badgeCount,
+    buttons,
     decorationStrikeThrough,
-    type,
-    buttons
+    icon,
+    indent,
+    label,
+    posInSet,
+    setSize,
+    type
   } = item;
   const labelClassName = getLabelClassName(decorationStrikeThrough);
   const buttonsDom = getButtonsVirtualDom(buttons);
   const hasButtons = buttons.length;
+  const treeItemClassName = getTreeItemClassName(indent);
   return [{
-    type: Div,
-    className: TreeItem,
-    role: TreeItem$1,
     ariaExpanded: type === DirectoryExpanded,
     ariaPosInSet: posInSet,
     ariaSetSize: setSize,
     childCount: 3 + (hasButtons ? 1 : 0),
-    paddingLeft: PaddingLeft,
-    // TODO classname for indent / padding
-    paddingRight: PaddingRight
+    className: treeItemClassName,
+    paddingRight: PaddingRight,
+    role: TreeItem$1,
+    type: Div
   }, {
-    type: Div,
+    childCount: 0,
     className: mergeClassNames(Chevron, `MaskIcon${icon}`),
-    childCount: 0
+    type: Div
   }, {
-    type: Div,
+    childCount: 1,
     className: labelClassName,
-    childCount: 1
+    type: Div
   }, text(label), ...buttonsDom, ...getBadgeVirtualDom(badgeCount)];
 };
 
 const getFileIconVirtualDom = icon => {
   return {
-    type: Img,
+    childCount: 0,
     className: FileIcon,
-    src: icon,
     role: None$1,
-    childCount: 0
+    src: icon,
+    type: Img
   };
 };
 
 const chevron = {
-  type: Div,
+  childCount: 1,
   className: Chevron,
-  childCount: 1
+  type: Div
 };
 const getIconsDom = (icon, fileIcon) => {
   if (icon === ChevronRight) {
@@ -2523,62 +2614,63 @@ const getIconsDom = (icon, fileIcon) => {
 };
 const createItemOther = item => {
   const {
-    posInSet,
-    setSize,
-    icon,
-    file,
-    label,
+    buttons,
     decorationIcon,
     decorationIconTitle,
     decorationStrikeThrough,
     detail,
-    buttons,
-    fileIcon
+    file,
+    fileIcon,
+    icon,
+    indent,
+    label,
+    posInSet,
+    setSize
   } = item;
   const labelClassName = getLabelClassName(decorationStrikeThrough);
   const dom = [];
   const hasButtons = buttons.length;
   const buttonsDom = getButtonsVirtualDom(buttons);
+  const treeItemClassName = getTreeItemClassName(indent);
   dom.push({
-    type: Div,
-    className: TreeItem,
-    role: TreeItem$1,
     ariaPosInSet: posInSet,
     ariaSetSize: setSize,
-    title: file,
     childCount: 3 + (hasButtons ? 1 : 0),
-    paddingLeft: '1rem',
-    paddingRight: '12px'
+    className: treeItemClassName,
+    paddingRight: '12px',
+    role: TreeItem$1,
+    title: file,
+    type: Div
   }, ...getIconsDom(icon, fileIcon));
   const labelDom = {
-    type: Div,
+    childCount: 1,
     className: labelClassName,
-    childCount: 1
+    type: Div
   };
   dom.push(labelDom, text(label));
   if (detail) {
     labelDom.childCount++;
     dom.push({
-      type: Span,
+      childCount: 1,
       className: LabelDetail,
-      childCount: 1
+      type: Span
     }, text(detail));
   }
   dom.push(...buttonsDom);
   dom.push({
-    type: Img,
+    childCount: 0,
     className: DecorationIcon,
-    title: decorationIconTitle,
     src: decorationIcon,
-    childCount: 0
+    title: decorationIconTitle,
+    type: Img
   });
   return dom;
 };
 
 const getSourceControlItemVirtualDom = item => {
   switch (item.type) {
-    case DirectoryExpanded:
     case Directory:
+    case DirectoryExpanded:
       return createItemDirectory(item);
     default:
       return createItemOther(item);
@@ -2587,13 +2679,13 @@ const getSourceControlItemVirtualDom = item => {
 
 const getSourceControlListVirtualDom = items => {
   return [{
-    type: Div,
-    className: SourceControlItems,
-    role: Tree$1,
     childCount: items.length,
+    className: SourceControlItems,
     onClick: HandleClickAt,
+    onPointerOut: HandleMouseOutAt,
     onPointerOver: HandleMouseOverAt,
-    onPointerOut: HandleMouseOutAt
+    role: Tree$1,
+    type: Div
   }, ...items.flatMap(getSourceControlItemVirtualDom)];
 };
 
@@ -2602,27 +2694,27 @@ const getSplitButtonVirtualDom = (hasItems, splitButtonEnabled, buttonText) => {
     return [];
   }
   return [{
-    type: Div,
+    childCount: 3,
     className: mergeClassNames(SplitButton, hasItems ? '' : SplitButtonDisabled),
-    childCount: 3
+    type: Div
   }, {
-    type: Div,
-    className: mergeClassNames(SplitButtonContent, hasItems ? '' : SplitButtonContentDisabled),
     childCount: 1,
-    tabIndex: 0
+    className: mergeClassNames(SplitButtonContent, hasItems ? '' : SplitButtonContentDisabled),
+    tabIndex: 0,
+    type: Div
   }, text(buttonText), {
-    type: Div,
+    childCount: 0,
     className: SplitButtonSeparator,
-    childCount: 0
+    type: Div
   }, {
-    type: Div,
-    className: mergeClassNames(SplitButtonDropDown, hasItems ? '' : SplitButtonDropDownDisabled),
     childCount: 1,
-    tabIndex: 0
+    className: mergeClassNames(SplitButtonDropDown, hasItems ? '' : SplitButtonDropDownDisabled),
+    tabIndex: 0,
+    type: Div
   }, {
-    type: Div,
+    childCount: 0,
     className: mergeClassNames(MaskIcon, MaskIconChevronDown),
-    childCount: 0
+    type: Div
   }];
 };
 
@@ -2630,24 +2722,24 @@ const className = mergeClassNames(Viewlet, SourceControl);
 const getSourceControlVirtualDom = (items, splitButtonEnabled, inputPlaceholder) => {
   const hasItems = items.length > 0;
   const dom = [{
-    type: Div,
+    childCount: splitButtonEnabled ? 3 : 2,
     className: className,
-    tabIndex: 0,
     onContextMenu: HandleContextMenu,
     onMouseOver: HandleMouseOver,
     // onMouseOut: DomEventListenerFunctions.HandleMouseOut,
     onWheel: HandleWheel,
-    childCount: splitButtonEnabled ? 3 : 2
+    tabIndex: 0,
+    type: Div
   }, ...getSourceControlHeaderVirtualDom(inputPlaceholder), ...getSplitButtonVirtualDom(hasItems, splitButtonEnabled, 'Commit'), ...getSourceControlListVirtualDom(items)];
   return dom;
 };
 
 const renderItems = (oldState, newState) => {
   const {
-    visibleItems,
-    splitButtonEnabled,
+    id,
     inputPlaceholder,
-    id
+    splitButtonEnabled,
+    visibleItems
   } = newState;
   const dom = getSourceControlVirtualDom(visibleItems, splitButtonEnabled, inputPlaceholder);
   return [SetDom2, id, dom];
@@ -2663,14 +2755,14 @@ const renderValue = (oldState, newState) => {
 
 const getRenderer = diffType => {
   switch (diffType) {
-    case RenderItems:
-      return renderItems;
-    case RenderValue:
-      return renderValue;
     case RenderCss:
       return renderCss;
     case RenderFocusContext:
       return renderFocusContext;
+    case RenderItems:
+      return renderItems;
+    case RenderValue:
+      return renderValue;
     default:
       throw new Error('unknown renderer');
   }
@@ -2690,8 +2782,8 @@ const applyRender = (oldState, newState, diffResult) => {
 
 const render2 = (uid, diffResult) => {
   const {
-    oldState,
-    newState
+    newState,
+    oldState
   } = get(uid);
   set(uid, newState, newState);
   const commands = applyRender(oldState, newState, diffResult);
@@ -2700,26 +2792,58 @@ const render2 = (uid, diffResult) => {
 
 const Button = 1;
 
+const Check = 'Check';
+const ListFlat = 'ListFlat';
+const Refresh = 'Refresh';
+
+const getActions = () => {
+  return [{
+    command: '',
+    icon: ListFlat,
+    id: viewAsTree$1(),
+    name: ViewAsTree,
+    type: Button
+  }, {
+    command: '',
+    icon: Check,
+    id: commitAndPush(),
+    name: CommitAndPush,
+    type: Button
+  }, {
+    command: '',
+    icon: Refresh,
+    id: refresh$1(),
+    name: Refresh$1,
+    type: Button
+  }];
+};
+
 const getActionButtonVirtualDom = action => {
   const {
-    id,
     icon,
-    command
+    id,
+    label
   } = action;
   return [{
-    type: Button$2,
+    childCount: 1,
     className: IconButton,
+    name: label,
     title: id,
-    'data-command': command,
-    // TODO remove this
-    childCount: 1
+    type: Button$2
   }, getIconVirtualDom(icon)];
 };
 
 const getActionVirtualDom = action => {
   switch (action.type) {
     case Button:
-      return getActionButtonVirtualDom(action);
+      {
+        const actionButton = {
+          icon: action.icon,
+          id: action.id,
+          label: action.name
+        };
+        return getActionButtonVirtualDom(actionButton);
+      }
     default:
       return [];
   }
@@ -2727,15 +2851,16 @@ const getActionVirtualDom = action => {
 
 const getActionsVirtualDom = actions => {
   return [{
-    type: Div,
+    childCount: actions.length,
     className: Actions,
+    onClick: HandleClickAction,
     role: ToolBar,
-    childCount: actions.length
+    type: Div
   }, ...actions.flatMap(getActionVirtualDom)];
 };
 
 const renderActions = state => {
-  const actions = [];
+  const actions = getActions();
   const dom = getActionsVirtualDom(actions);
   return dom;
 };
@@ -2771,6 +2896,9 @@ const renderEventListeners = () => {
     name: HandleWheel,
     params: ['handleWheel', DeltaMode, DeltaY],
     passive: true
+  }, {
+    name: HandleClickAction,
+    params: ['handleActionClick', TargetName]
   }];
 };
 
@@ -2781,26 +2909,26 @@ const saveState = uid => {
     newState
   } = value;
   const {
-    root,
-    maxLineY,
     expandedGroups,
-    inputValue
+    inputValue,
+    maxLineY,
+    root
   } = newState;
   return {
-    root,
-    minLineY: 0,
-    maxLineY,
     deltaY: 0,
     expandedGroups,
-    inputValue
+    inputValue,
+    maxLineY,
+    minLineY: 0,
+    root
   };
 };
 
 const updateIcons = async state => {
   const {
     items,
-    minLineY,
-    maxLineY
+    maxLineY,
+    minLineY
   } = state;
   const visible = items.slice(minLineY, maxLineY);
   const newFileIconCache = await getFileIcons(visible, Object.create(null));
@@ -2818,18 +2946,12 @@ const viewAsList = state => {
   };
 };
 
-const viewAsTree = state => {
-  return {
-    ...state,
-    viewMode: Tree
-  };
-};
-
 const commandMap = {
   'Initialize.initialize': initialize,
   'SourceControl.acceptInput': wrapCommand(acceptInput),
   'SourceControl.create2': create2,
   'SourceControl.diff2': diff2,
+  'SourceControl.getBadgeCount': wrapGetter(getBadgeCount),
   'SourceControl.getCommandIds': getCommandIds,
   'SourceControl.getEnabledProviderIds': getEnabledProviderIds,
   'SourceControl.getFileDecorations': getFileDecorations,
@@ -2837,6 +2959,7 @@ const commandMap = {
   'SourceControl.getKeyBindings': getKeyBindings,
   'SourceControl.getMenuEntries2': wrapGetter(getMenuEntries2),
   'SourceControl.getMenuIds': getMenuIds,
+  'SourceControl.handleActionClick': wrapCommand(handleActionClick),
   'SourceControl.handleButtonClick': wrapCommand(handleButtonClick),
   'SourceControl.handleClickAt': wrapCommand(handleClickAt),
   'SourceControl.handleClickSourceControlButtons': wrapCommand(handleClickSourceControlButtons),