@lvce-editor/server 0.0.28 → 0.0.31

package/static/f9b8874/packages/renderer-process/src/parts/Viewlet/ViewletQuickPick.js

@@ -1,346 +0,0 @@
-/* Tries to implement the pattern for combobox with listbox popup https://www.w3.org/TR/wai-aria-1.2/#combobox */
-
-import * as Focus from '../Focus/Focus.js'
-import * as InputBox from '../InputBox/InputBox.js'
-import * as RendererWorker from '../RendererWorker/RendererWorker.js'
-import * as Widget from '../Widget/Widget.js'
-import * as Assert from '../Assert/Assert.js'
-
-// TODO use another virtual list that just appends elements and
-// is optimized for fast show/hide, scrolling performance should
-// be good as well but is not as important as fast show/hide
-
-// TODO screenreader makes pause after reading colon, maybe there is a setting for screenreaders so they speak normally
-
-// TODO state
-
-// TODO when quickpick is shown recalculate style and layout is really slow (>10ms every time)
-
-// TODO accessibility issues with nvda: when pressing escape, it goes into different mode
-// but should just close quick-pick like vscode does
-
-const getNodeIndex = ($Node) => {
-  let index = 0
-  while (($Node = $Node.previousElementSibling)) {
-    index++
-  }
-  return index
-}
-
-const getTargetIndex = ($Target) => {
-  switch ($Target.className) {
-    case 'QuickPickItem':
-    case 'QuickPickItem Focused':
-      return getNodeIndex($Target)
-    case 'QuickPickItemLabel':
-      return getNodeIndex($Target.parentNode)
-    default:
-      return -1
-  }
-}
-
-const handleMouseDown = (event) => {
-  event.preventDefault()
-  const $Target = event.target
-  const index = getTargetIndex($Target)
-  if (index === -1) {
-    return
-  }
-  // console.log('button', event.button)
-  // console.log({ index })
-  RendererWorker.send(
-    /* QuickPick.selectIndex */ 'QuickPick.selectIndex',
-    /* index */ index
-  )
-}
-
-// TODO beforeinput event should prevent input event maybe
-// const handleBeforeInput = (event) => {
-//   if (!event.data) {
-//     return
-//   }
-//   const value = event.target.value + event.data
-//   RendererWorker.send(
-//     /* quickPickHandleInput */ 'QuickPick.handleInput',
-//     /* value */ value,
-//   )
-// }
-
-const handleInput = (event) => {
-  const $Target = event.target
-  RendererWorker.send(
-    /* quickPickHandleInput */ 'QuickPick.handleInput',
-    /* value */ $Target.value
-  )
-}
-// TODO when blur hides quickpick automatically it doesn't necessarily need to be sent command to hide itself
-const handleBlur = (event) => {
-  // console.log(event)
-  // if (!event.relatedTarget) {
-  //   console.log('no related target')
-  //   return
-  // }
-  RendererWorker.send(/* QuickPick.handleBlur */ 'QuickPick.handleBlur')
-}
-
-// TODO forbidden:
-// 1. methods
-// 2. functions inside functions
-
-const create$QuickPickItem = () => {
-  // TODO many quickPick items may not have description -> avoid creating description dom nodes if there is no description
-  const $QuickPickItemLabel = document.createElement('div')
-  $QuickPickItemLabel.className = 'QuickPickItemLabel'
-  // $QuickPickItemLabel.textContent = item.label || '<missing label>'
-  // const $QuickPickItemDescription = document.createElement('div')
-  // $QuickPickItemDescription.className = 'QuickPickItemDescription'
-  // $QuickPickItemDescription.textContent = item.description
-  const $QuickPickItem = document.createElement('div') // TODO ul/li would be better for structure but might be slower
-  $QuickPickItem.className = 'QuickPickItem'
-  $QuickPickItem.setAttribute('role', 'option')
-  // $QuickPickItem.id = `QuickPickItem-${index}`
-  // $QuickPickItem.dataset.index = index
-  // $QuickPickItem.ariaPosInSet = `${index + 1}`
-  // $QuickPickItem.ariaSetSize = `${total}`
-  $QuickPickItem.append($QuickPickItemLabel)
-  return $QuickPickItem
-}
-
-export const focusIndex = (state, oldIndex, newIndex) => {
-  if (oldIndex === newIndex) {
-    return
-  }
-  const $QuickPickItems = state.$QuickPickItems
-  if (oldIndex !== -1) {
-    const $OldItem = $QuickPickItems.children[oldIndex]
-    $OldItem.classList.remove('Focused')
-  }
-  const $NewItem = $QuickPickItems.children[newIndex]
-  $NewItem.classList.add('Focused')
-  state.$QuickPickInput.setAttribute('aria-activedescendant', $NewItem.id)
-}
-
-// TODO add test with show and slicedItems length is 0
-
-const create$QuickPickDescription = () => {
-  const $QuickPickItemDescription = document.createElement('div')
-  $QuickPickItemDescription.className = 'QuickPickItemDescription'
-  return $QuickPickItemDescription
-}
-
-const render$QuickPickItemLabel = ($QuickPickItemLabel, quickPickItem) => {
-  // TODO don't use text content -> recycle text node instead: node.nodeValue='newtext'
-  $QuickPickItemLabel.textContent = quickPickItem.label
-}
-
-const render$QuickPickItemLess = ($QuickPickItem, quickPickItem) => {
-  render$QuickPickItemLabel($QuickPickItem.firstChild, quickPickItem)
-  const $QuickPickItemDescription = create$QuickPickDescription()
-  // render$QuickPickItemDescription($QuickPickItemDescription, quickPickItem)
-
-  $QuickPickItem.append($QuickPickItemDescription)
-}
-
-const render$QuickPickItemEqual = ($QuickPickItem, quickPickItem) => {
-  render$QuickPickItemLabel($QuickPickItem.firstChild, quickPickItem)
-  if (quickPickItem.description) {
-    // render$QuickPickItemDescription($QuickPickItem.children[1], quickPickItem)
-  }
-}
-
-const render$QuickPickItemMore = ($QuickPickItem, quickPickItem) => {
-  render$QuickPickItemLabel($QuickPickItem.firstChild, quickPickItem)
-  $QuickPickItem.lastChild.remove()
-}
-
-const render$QuickPickItem = ($QuickPickItem, quickPickItem) => {
-  const lengthA = $QuickPickItem.children.length
-  const lengthB = quickPickItem.description ? 2 : 1
-  $QuickPickItem.id = `QuickPickItem-${quickPickItem.posInSet}`
-  $QuickPickItem.ariaPosInSet = `${quickPickItem.posInSet}` // TODO pass correct number as prop
-  $QuickPickItem.ariaSetSize = `${quickPickItem.setSize}`
-  if (lengthA < lengthB) {
-    render$QuickPickItemLess($QuickPickItem, quickPickItem)
-  } else if (lengthA === lengthB) {
-    render$QuickPickItemEqual($QuickPickItem, quickPickItem)
-  } else {
-    render$QuickPickItemMore($QuickPickItem, quickPickItem)
-  }
-}
-
-const render$QuickPickItemsLess = ($QuickPickItems, quickPickItems) => {
-  for (let i = 0; i < $QuickPickItems.children.length; i++) {
-    render$QuickPickItem($QuickPickItems.children[i], quickPickItems[i])
-  }
-  const fragment = document.createDocumentFragment()
-  for (
-    let i = $QuickPickItems.children.length;
-    i < quickPickItems.length;
-    i++
-  ) {
-    const $QuickPickItem = create$QuickPickItem()
-    render$QuickPickItem($QuickPickItem, quickPickItems[i])
-    fragment.append($QuickPickItem)
-  }
-  $QuickPickItems.append(fragment)
-}
-
-const render$QuickPickItemsEqual = ($QuickPickItems, quickPickItems) => {
-  for (let i = 0; i < quickPickItems.length; i++) {
-    render$QuickPickItem($QuickPickItems.children[i], quickPickItems[i])
-  }
-}
-
-const render$QuickPickItemsMore = ($QuickPickItems, quickPickItems) => {
-  for (let i = 0; i < quickPickItems.length; i++) {
-    render$QuickPickItem($QuickPickItems.children[i], quickPickItems[i])
-  }
-  const diff = $QuickPickItems.children.length - quickPickItems.length
-  for (let i = 0; i < diff; i++) {
-    $QuickPickItems.lastChild.remove()
-  }
-}
-
-const render$QuickPickItems = ($QuickPickItems, quickPickItems) => {
-  if ($QuickPickItems.children.length < quickPickItems.length) {
-    render$QuickPickItemsLess($QuickPickItems, quickPickItems)
-  } else if ($QuickPickItems.children.length === quickPickItems.length) {
-    render$QuickPickItemsEqual($QuickPickItems, quickPickItems)
-  } else {
-    render$QuickPickItemsMore($QuickPickItems, quickPickItems)
-  }
-}
-
-export const updatePicks = (state, visiblePicks, unFocusIndex) => {
-  Assert.object(state)
-  Assert.array(visiblePicks)
-  Assert.number(unFocusIndex)
-  // TODO avoid copying on every keyboard input event
-  // const allPicks = [...slicedPicks]
-  // List.setItems(state.list, total, allPicks)
-  render$QuickPickItems(state.$QuickPickItems, visiblePicks)
-  focusIndex(state, unFocusIndex, 0) // TODO handle length zero
-}
-
-export const updateValueAndPicks = (
-  state,
-  value,
-  visiblePicks,
-  focusIndex,
-  unFocusIndex
-) => {
-  state.$QuickPickInput.value = value
-  if (unFocusIndex !== -1) {
-    state.$QuickPickItems.children[unFocusIndex].classList.remove('Focused')
-  }
-  render$QuickPickItems(state.$QuickPickItems, visiblePicks)
-  if (focusIndex !== -1) {
-    // TODO set aria-activedescendant
-    state.$QuickPickItems.children[focusIndex].classList.add('Focused')
-  }
-}
-
-export const updateValueAndPicksAndPlaceholder = (
-  state,
-  value,
-  visiblePicks,
-  focusIndex,
-  unFocusIndex,
-  placeholder,
-  label
-) => {
-  const { $QuickPickInput, $QuickPickItems } = state
-  updateValueAndPicks(state, value, visiblePicks, focusIndex, unFocusIndex)
-  $QuickPickInput.placeholder = placeholder
-  $QuickPickInput.ariaLabel = placeholder
-  $QuickPickItems.ariaLabel = label
-  console.log({ placeholder, label })
-  // setTimeout(() => {
-  // $QuickPickInput.focus()
-  // }, 100)
-  // $QuickPickInput.ariaDescription = 'this is a description'
-
-  // $QuickPickInput.focus()
-}
-
-// TODO
-// - for windows narrator, ariaLabel works well
-// - for nvda ariaRoleDescription works better
-
-export const create = (value, visiblePicks, focusIndex) => {
-  const $QuickPickInput = InputBox.create()
-  $QuickPickInput.setAttribute('aria-controls', 'QuickPickItems')
-  $QuickPickInput.setAttribute('role', 'combobox') // TODO use idl once supported
-  $QuickPickInput.ariaLabel = 'Type the name of a command to run.'
-  $QuickPickInput.ariaAutoComplete = 'list'
-  $QuickPickInput.setAttribute('aria-activedescendant', '')
-  $QuickPickInput.setAttribute('aria-activedescendant', 'QuickPickItem-1') // TODO only if list length is not zero
-  $QuickPickInput.onblur = handleBlur
-  // $QuickPickInput.addEventListener('beforeinput', handleBeforeInput)
-  $QuickPickInput.oninput = handleInput
-  $QuickPickInput.ariaExpanded = 'true'
-
-  const $QuickPickHeader = document.createElement('div')
-  $QuickPickHeader.id = 'QuickPickHeader'
-  $QuickPickHeader.append($QuickPickInput)
-
-  const $QuickPickItems = document.createElement('div')
-  $QuickPickItems.id = 'QuickPickItems'
-  $QuickPickItems.setAttribute('role', 'listbox')
-  $QuickPickItems.onmousedown = handleMouseDown
-
-  // TODO this works well with nvda but not with windows narrator
-  // probably a bug with windows narrator that doesn't support ariaRoleDescription
-  $QuickPickItems.ariaRoleDescription = 'Quick Input'
-
-  const $QuickPick = document.createElement('div')
-  $QuickPick.id = 'QuickPick'
-  // $QuickPick.setAttribute('role', 'dialog')
-  $QuickPick.append($QuickPickHeader, $QuickPickItems)
-  // $QuickPick.setAttribute('aria-modal', 'false') // TODO why is this
-  $QuickPick.ariaLabel = 'Quick open'
-
-  // workaround for chrome bug, role application is already on body but
-  // chrome sometimes uses role document
-  document.body.setAttribute('role', 'application')
-
-  Widget.append($QuickPick)
-  Focus.focus($QuickPickInput, 'quickPickInput')
-
-  return {
-    $QuickPick,
-    $QuickPickInput,
-    $QuickPickItems,
-  }
-}
-
-export const setValueAndPicks = (state, value, visiblePicks) => {
-  // TODO set value might cause recalc style / layout -> investigate
-  state.$QuickPickInput.value = value
-  render$QuickPickItems(state.$QuickPickItems, visiblePicks)
-  state.$QuickPickItems.children[0].classList.add('Focused')
-}
-
-export const showNoResults = (state, noResults, unfocusIndex) => {
-  console.log({ noResults })
-  updatePicks(state, [noResults], unfocusIndex)
-  Widget.append(state.$QuickPick)
-  Focus.focus(state.$QuickPickInput, 'quickPickInput')
-}
-
-// TODO QuickPick module is always loaded lazily -> can create $QuickPick eagerly (no state / less state laying around)
-
-// TODO remove from dom vs display none which should be used?
-
-// TODO have common widgets container for all widgets (this, notifications, context menu)
-export const dispose = (state) => {
-  // TODO make hidden or remove, which is better?  -> remove less dom nodes in dom, hidden -> maybe less style recalculations when shown again
-  state.$QuickPickInput.onblur = null
-  Widget.remove(state.$QuickPick)
-  Focus.focusPrevious()
-}
-
-export const setValue = (state, value) => {
-  const { $QuickPickInput } = state
-  $QuickPickInput.value = value
-}

package/static/f9b8874/packages/renderer-process/src/parts/Viewlet/ViewletReferences.js

@@ -1,3 +0,0 @@
-export * from './ViewletLocations.js'
-
-export const name = 'References'

package/static/f9b8874/packages/renderer-process/src/parts/Viewlet/ViewletRunAndDebug.js

@@ -1,42 +0,0 @@
-import * as Highlight from '../FocusHighlight/FocusHighlight.js'
-import * as Assert from '../Assert/Assert.js'
-import * as ActiveViewlet from './ActiveViewlet.js'
-
-// TODO is name export necessary? (probably not)
-export const name = 'Run and Debug'
-
-const handleMousedown = (event) => {
-  const state = ActiveViewlet.getStateFromEvent(event)
-  Highlight.highlightStart(state.$Viewlet)
-}
-
-export const create = () => {
-  const $Viewlet = document.createElement('div')
-  $Viewlet.dataset.viewletId = 'RunAndDebug'
-  $Viewlet.className = 'Viewlet'
-  $Viewlet.textContent = 'run and debug'
-  $Viewlet.tabIndex = 0
-  $Viewlet.addEventListener('mousedown', handleMousedown)
-  return {
-    $Viewlet,
-  }
-}
-
-export const refresh = (state, message) => {
-  Assert.object(state)
-  Assert.string(message)
-  state.$Viewlet.textContent = 'Run And Debug - Not implemented'
-}
-
-export const focus = (state) => {
-  // state.$Viewlet.classList.add('Focus')
-  // requestAnimationFrame(() => {
-  //   state.$Viewlet.classList.add('FocusFaded')
-  //   setTimeout(() => {
-  //     state.$Viewlet.classList.remove('FocusFaded')
-  //   }, 1000)
-  // })
-  state.$Viewlet.focus()
-}
-
-export const dispose = () => {}

package/static/f9b8874/packages/renderer-process/src/parts/Viewlet/ViewletSearch.js

@@ -1,179 +0,0 @@
-import * as RendererWorker from '../RendererWorker/RendererWorker.js'
-import * as InputBox from '../InputBox/InputBox.js'
-import * as Assert from '../Assert/Assert.js'
-
-const handleInput = (event) => {
-  const $Target = event.target
-  const value = $Target.value
-  RendererWorker.send(/* ViewletSearch.handleInput */ 9444, /* value */ value)
-}
-
-const getNodeIndex = ($Node) => {
-  let index = 0
-  while (($Node = $Node.previousElementSibling)) {
-    index++
-  }
-  return index
-}
-
-const handleClick = (event) => {
-  const $Target = event.target
-  switch ($Target.className) {
-    case 'TreeItem':
-      const index = getNodeIndex($Target)
-      RendererWorker.send(
-        /* ViewletSearch.handleClick */ 9445,
-        /* index */ index
-      )
-      break
-    default:
-      break
-  }
-}
-
-// TODO name export not necessary
-export const name = 'Search'
-
-export const create = () => {
-  const $ViewletSearchInput = InputBox.create()
-  $ViewletSearchInput.placeholder = 'Search'
-  $ViewletSearchInput.oninput = handleInput
-  $ViewletSearchInput.className = 'InputBox ViewletSearchInput'
-
-  const $SearchResults = document.createElement('div')
-  $SearchResults.className = 'SearchResults'
-  // TODO onclick vs onmousedown, should be consistent in whole application
-  $SearchResults.onclick = handleClick
-
-  const $SearchStatus = document.createElement('div')
-  $SearchStatus.setAttribute('role', 'status')
-
-  const $Viewlet = document.createElement('div')
-  $Viewlet.dataset.viewletId = 'Search'
-  $Viewlet.tabIndex = -1
-  $Viewlet.className = 'Viewlet'
-  $Viewlet.append($ViewletSearchInput, $SearchStatus, $SearchResults)
-
-  return {
-    $Viewlet,
-    $ViewletSearchInput,
-    $SearchResults,
-    $SearchStatus,
-  }
-}
-
-export const refresh = (state, context) => {
-  Assert.object(state)
-}
-
-export const focus = (state) => {
-  Assert.object(state)
-  state.$ViewletSearchInput.focus()
-}
-
-const create$Row = () => {
-  const $Row = document.createElement('div')
-  $Row.setAttribute('role', 'treeitem')
-  $Row.className = 'TreeItem'
-  return $Row
-}
-
-// TODO much duplication with explorer
-const render$Row = ($Row, rowInfo) => {
-  $Row.textContent = rowInfo.name
-  $Row.title = rowInfo.path
-  $Row.tabIndex = -1
-  $Row.ariaSetSize = `${rowInfo.setSize}`
-  $Row.ariaLevel = `${rowInfo.depth}`
-  $Row.ariaPosInSet = `${rowInfo.posInSet}`
-  $Row.ariaLabel = rowInfo.name
-  $Row.ariaDescription = ''
-  switch (rowInfo.type) {
-    // TODO type should be a number for efficiency
-    case 'directory':
-    case 'folder':
-      $Row.ariaExpanded = 'false'
-      $Row.className = `TreeItem Icon${rowInfo.icon}`
-      break
-    case 'directory-expanded':
-      $Row.className = `TreeItem Icon${rowInfo.icon}`
-      $Row.ariaExpanded = 'true'
-      break
-    case 'file':
-      $Row.ariaExpanded = undefined
-      $Row.className = `TreeItem Icon${rowInfo.icon}`
-      break
-    default:
-      break
-  }
-}
-
-const render$RowsLess = ($Rows, rowInfos) => {
-  for (let i = 0; i < $Rows.children.length; i++) {
-    render$Row($Rows.children[i], rowInfos[i])
-  }
-  const fragment = document.createDocumentFragment()
-  for (let i = $Rows.children.length; i < rowInfos.length; i++) {
-    const $Row = create$Row()
-    render$Row($Row, rowInfos[i])
-    fragment.append($Row)
-  }
-  $Rows.append(fragment)
-}
-
-const render$RowsEqual = ($Rows, rowInfos) => {
-  for (let i = 0; i < rowInfos.length; i++) {
-    render$Row($Rows.children[i], rowInfos[i])
-  }
-}
-
-const render$RowsMore = ($Rows, rowInfos) => {
-  for (let i = 0; i < rowInfos.length; i++) {
-    render$Row($Rows.children[i], rowInfos[i])
-  }
-  const diff = $Rows.children.length - rowInfos.length
-  for (let i = 0; i < diff; i++) {
-    $Rows.lastChild.remove()
-  }
-}
-
-const render$Rows = ($Rows, rowInfos) => {
-  if ($Rows.children.length < rowInfos.length) {
-    render$RowsLess($Rows, rowInfos)
-  } else if ($Rows.children.length === rowInfos.length) {
-    render$RowsEqual($Rows, rowInfos)
-  } else {
-    render$RowsMore($Rows, rowInfos)
-  }
-}
-
-const cleanNode = ($Node) => {
-  while ($Node.firstChild) {
-    $Node.firstChild.remove()
-  }
-}
-
-const getStatusMessage = (resultCount, fileResultCount) => {
-  if (resultCount === 0) {
-    return 'No results found'
-  }
-  if (resultCount === 1 && fileResultCount === 1) {
-    return 'Found 1 result in 1 file'
-  }
-  if (fileResultCount === 1) {
-    return `Found ${resultCount} results in 1 file`
-  }
-  return `Found ${resultCount} results in ${fileResultCount} files`
-}
-
-export const setResults = (state, results, resultCount, fileResultCount) => {
-  Assert.object(state)
-  Assert.array(results)
-  // TODO should recycle nodes when rendering only search results
-  // maybe could also recycle node from noResults and vice versa
-  const statusMessage = getStatusMessage(resultCount, fileResultCount)
-  state.$SearchStatus.textContent = statusMessage
-  render$Rows(state.$SearchResults, results)
-}
-
-export const dispose = () => {}

package/static/f9b8874/packages/renderer-process/src/parts/Viewlet/ViewletStatusBar.js

@@ -1,115 +0,0 @@
-import * as Layout from '../Layout/Layout.js'
-import * as RendererWorker from '../RendererWorker/RendererWorker.js'
-import * as Assert from '../Assert/Assert.js'
-
-const getIconClassName = (icon) => {
-  switch (icon) {
-    case '$(sync-spin)':
-    case '$(sync~spin)':
-      return 'StatusBarIcon AnimationSpin'
-    case '$(sync)':
-      return 'StatusBarIcon'
-    case '$(source-control)':
-      return 'StatusBarIcon'
-    default:
-      console.warn(`unknown icon "${icon}"`)
-      return ''
-  }
-}
-
-const getMaskImageUrl = (icon) => {
-  switch (icon) {
-    case '$(sync-spin)':
-    case '$(sync~spin)':
-    case '$(sync)':
-      return 'url(/icons/icon-sync.svg)'
-    case '$(source-control)':
-      return 'url(/icons/icon-source-control.svg)'
-    default:
-      return ''
-  }
-}
-
-const create$StatusBarItem = (item) => {
-  const $StatusBarItem = document.createElement('li')
-  $StatusBarItem.className = 'StatusBarItem'
-  $StatusBarItem.setAttribute('role', 'button')
-  $StatusBarItem.dataset.name = item.name
-  $StatusBarItem.tabIndex = -1
-  $StatusBarItem.textContent = item.text
-  $StatusBarItem.dataset.command = item.command
-  if (item.tooltip) {
-    $StatusBarItem.title = item.tooltip
-  }
-  if (item.icon) {
-    const $StatusBarItemIcon = document.createElement('span')
-    $StatusBarItemIcon.className = getIconClassName(item.icon)
-    // @ts-ignore
-    $StatusBarItemIcon.style.maskImage = getMaskImageUrl(item.icon)
-    $StatusBarItemIcon.style.webkitMaskImage = getMaskImageUrl(item.icon)
-    $StatusBarItem.prepend($StatusBarItemIcon)
-  }
-  return $StatusBarItem
-}
-
-const handleClick = (event) => {
-  const $Target = event.target
-  if ($Target.className !== 'StatusBarItem') {
-    return
-  }
-  const command = Number.parseInt($Target.dataset.command, 10)
-  RendererWorker.send(command)
-}
-
-// TODO get items from renderer worker
-// const statusBarItemsLeft = [
-//   {
-//     name: 'RunTests',
-//     text: 'Run Tests',
-//     tooltip: '',
-//     command: 909021,
-//   },
-// ]
-
-// const statusBarItemsRight = []
-
-export const create = (statusBarItemsLeft, statusBarItemsRight) => {
-  const $StatusBarItemsLeft = document.createElement('ul')
-  $StatusBarItemsLeft.id = 'StatusBarItemsLeft'
-
-  const $StatusBarItemsRight = document.createElement('ul')
-  $StatusBarItemsRight.id = 'StatusBarItemsRight'
-
-  const $StatusBar = Layout.state.$StatusBar
-  $StatusBar.onclick = handleClick
-  $StatusBar.tabIndex = 0
-  $StatusBar.setAttribute('role', 'status')
-  $StatusBar.ariaLive = 'off' // see https://github.com/microsoft/vscode/issues/94677
-  $StatusBar.append($StatusBarItemsLeft, $StatusBarItemsRight)
-
-  return {
-    $StatusBar,
-    $StatusBarItemsLeft,
-    $StatusBarItemsRight,
-  }
-}
-
-const clearNode = (node) => {
-  while (node.firstChild) {
-    node.firstChild.remove()
-  }
-}
-
-export const setItems = (state, statusBarItemsLeft, statusBarItemsRight) => {
-  const $StatusBarItemsLeft = state.$StatusBarItemsLeft
-  const $StatusBarItemsRight = state.$StatusBarItemsRight
-  clearNode($StatusBarItemsLeft)
-  clearNode($StatusBarItemsRight)
-  $StatusBarItemsLeft.append(...statusBarItemsLeft.map(create$StatusBarItem))
-  $StatusBarItemsRight.append(...statusBarItemsRight.map(create$StatusBarItem))
-}
-
-export const focus = (state) => {
-  Assert.object(state)
-  state.$StatusBar.focus()
-}