@lvce-editor/static-server 0.49.10 → 0.49.12

package/static/{445623a → 907fbbd}/packages/keybindings-view-worker/dist/keyBindingsViewWorkerMain.js

@@ -791,6 +791,9 @@ const createRpc = ipc => {
     },
     invokeAndTransfer(method, ...params) {
       return invokeAndTransfer(ipc, method, ...params);
+    },
+    async dispose() {
+      await ipc?.dispose();
     }
   };
   return rpc;
@@ -1044,17 +1047,38 @@ const getFilteredKeyBindings = (keyBindings, value) => {
 const User = 1;
 const Script = 2;
 
+const compareByPrecedence = (a, b) => {
+  const aWhen = a.when || 0;
+  const bWhen = b.when || 0;
+  return bWhen - aWhen;
+};
+const compareByName = (a, b) => {
+  return a.command.localeCompare(b.command);
+};
+
+const getCompareFn = isSortingByPrecedence => {
+  const sortFn = isSortingByPrecedence ? compareByPrecedence : compareByName;
+  return sortFn;
+};
+const sortKeyBindings = (parsedKeyBindings, isSortingByPrecedence) => {
+  const sortFn = getCompareFn(isSortingByPrecedence);
+  const sorted = parsedKeyBindings.toSorted(sortFn);
+  return sorted;
+};
+
 const handleInput = (state, value) => {
   const {
     parsedKeyBindings,
-    maxVisibleItems
+    maxVisibleItems,
+    isSortingByPrecedence
   } = state;
   const items = getFilteredKeyBindings(parsedKeyBindings, value);
-  const maxLineY = Math.min(items.length, maxVisibleItems);
+  const sorted = sortKeyBindings(items, isSortingByPrecedence);
+  const maxLineY = Math.min(sorted.length, maxVisibleItems);
   return {
     ...state,
     value,
-    items,
+    items: sorted,
     maxLineY,
     inputSource: User
   };
@@ -1106,7 +1130,6 @@ const {
 
 // TODO uri and platform might not be needed
 const create = (uid, uri, x, y, width, height, platform) => {
-  // @ts-ignore
   const state = {
     parsedKeyBindings: [],
     items: [],
@@ -1136,7 +1159,9 @@ const create = (uid, uri, x, y, width, height, platform) => {
     itemHeight: 24,
     minimumSliderSize: 20,
     isRecordingKeys: false,
-    inputSource: User
+    inputSource: User,
+    isSortingByPrecedence: false,
+    headerHeight: 0
   };
   set$1(uid, state, state);
 };
@@ -1158,7 +1183,7 @@ const isEqual$2 = (oldState, newState) => {
 
 const diffType$1 = RenderKeyBindings;
 const isEqual$1 = (oldState, newState) => {
-  return oldState.items === newState.items && oldState.minLineY === newState.minLineY && oldState.maxLineY === newState.maxLineY && oldState.selectedIndex === newState.selectedIndex && oldState.focusedIndex === newState.focusedIndex && oldState.columnWidth1 === newState.columnWidth1 && oldState.columnWidth2 === newState.columnWidth2 && oldState.columnWidth3 === newState.columnWidth3 && oldState.isRecordingKeys === newState.isRecordingKeys;
+  return oldState.items === newState.items && oldState.minLineY === newState.minLineY && oldState.maxLineY === newState.maxLineY && oldState.selectedIndex === newState.selectedIndex && oldState.focusedIndex === newState.focusedIndex && oldState.columnWidth1 === newState.columnWidth1 && oldState.columnWidth2 === newState.columnWidth2 && oldState.columnWidth3 === newState.columnWidth3 && oldState.isRecordingKeys === newState.isRecordingKeys && oldState.isSortingByPrecedence === newState.isSortingByPrecedence;
 };
 
 const diffType = RenderValue;
@@ -1348,48 +1373,6 @@ const getKeyBindings$1 = () => {
   }];
 };
 
-const IconButton = 'IconButton';
-const Key$1 = 'Key';
-const KeyBindings$1 = 'KeyBindings';
-const KeyBindingsEditButton = 'KeyBindingsEditButton';
-const KeyBindingsHeader = 'KeyBindingsHeader';
-const KeyBindingsSearchActions = 'KeyBindingsSearchActions';
-const KeyBindingsSearchInputBox = 'KeyBindingsSearchInputBox';
-const KeyBindingsSearchWrapper = 'KeyBindingsSearchWrapper';
-const MaskIcon = 'MaskIcon';
-const Message = 'Message';
-const Resizer = 'Resizer';
-const ScrollBar = 'ScrollBar';
-const ScrollBarThumb = 'ScrollBarThumb';
-const SearchFieldButton = 'SearchFieldButton';
-const SearchFieldButtonChecked = 'SearchFieldButtonChecked';
-const SearchFieldButtonDisabled = 'SearchFieldButtonDisabled';
-const SearchFieldButtons = 'SearchFieldButtons';
-const SearchHighlight = 'SearchHighlight';
-const Table$1 = 'Table';
-const TableBody = 'TableBody';
-const TableCell = 'TableCell';
-const TableCol = 'TableCol';
-const TableColGroup = 'TableColGroup';
-const TableHead = 'TableHead';
-const TableRow = 'TableRow';
-const TableRowEven = 'TableRowEven';
-const TableRowOdd = 'TableRowOdd';
-const TableRowSelected = 'TableRowSelected';
-const TableWrapper = 'TableWrapper';
-const Viewlet = 'Viewlet';
-
-const HandleContextMenu = 'handleContextMenu';
-const HandleInput = 'handleInput';
-const HandleKeyDown = 'handleKeyDown';
-const HandlePointerDown = 'handlePointerDown';
-const HandleResizerMove = 'handleResizerMove';
-const HandleResizerPointerDown = 'handleResizerPointerDown';
-const HandleSearchActionClick = 'handleSearchActionClick';
-const HandleTableClick = 'handleTableClick';
-const HandleTableDoubleClick = 'handleTableDoubleClick';
-const HandleWheel = 'handleWheel';
-
 const emptyObject = {};
 const RE_PLACEHOLDER = /\{(PH\d+)\}/g;
 const i18nString = (key, placeholders = emptyObject) => {
@@ -1402,26 +1385,29 @@ const i18nString = (key, placeholders = emptyObject) => {
   return key.replaceAll(RE_PLACEHOLDER, replacer);
 };
 
-const KeyBindings = 'KeyBindings';
+const AddKeyBinding = 'Add Keybinding...';
+const ChangeKeyBinding = 'Change Keybinding...';
+const ChangeWhenExpression = 'Change When Expression';
+const ClearSearchInput$1 = 'Clear Search Input';
 const Command = 'Command';
-const When = 'When';
-const Key = 'Key';
-const TypeToSearchKeyBindings = 'Type to search in keybindings';
-const ResultsWillUpdateAsYouType = 'Results will update as you type';
 const Copy = 'Copy';
 const CopyCommandId = 'Copy Command ID';
 const CopyCommandTitle = 'Copy Command Title';
-const ChangeKeyBinding = 'Change Keybinding...';
-const AddKeyBinding = 'Add Keybinding...';
+const Key$1 = 'Key';
+const KeyBindings$1 = 'KeyBindings';
+const NoKeyBindingsFound = 'No matching Keybindings found';
+const RecordingKeys = 'Recording keys';
+const RecordKeys$2 = 'Record keys';
 const RemoveKeyBinding = 'Remove Keybinding...';
 const ResetKeyBinding = 'Reset Keybinding';
-const ChangeWhenExpression = 'Change When Expression';
+const ResultsWillUpdateAsYouType = 'Results will update as you type';
 const ShowSameKeyBindings = 'Show Same Keybindings';
-const NoKeyBindingsFound = 'No matching Keybindings found';
-const RecordingKeys = 'Recording keys';
+const SortByPrecedence$1 = 'Sort By Precedence';
+const TypeToSearchKeyBindings = 'Type to search in keybindings';
+const When = 'When';
 
 const keyBindings = () => {
-  return i18nString(KeyBindings);
+  return i18nString(KeyBindings$1);
 };
 const command = () => {
   return i18nString(Command);
@@ -1430,7 +1416,7 @@ const when = () => {
   return i18nString(When);
 };
 const key = () => {
-  return i18nString(Key);
+  return i18nString(Key$1);
 };
 const typeToSearchKeyBindings = () => {
   return i18nString(TypeToSearchKeyBindings);
@@ -1471,720 +1457,318 @@ const noKeyBindingsFound = () => {
 const recordingKeys = () => {
   return i18nString(RecordingKeys);
 };
-
-const Button = 1;
-const Col = 2;
-const ColGroup = 3;
-const Div = 4;
-const Input = 6;
-const Kbd = 7;
-const Span = 8;
-const Table = 9;
-const TBody = 10;
-const Td = 11;
-const Text = 12;
-const Th = 13;
-const THead = 14;
-const Tr = 15;
-
-const text = data => {
-  return {
-    type: Text,
-    text: data,
-    childCount: 0
-  };
+const recordKeys = () => {
+  return i18nString(RecordKeys$2);
 };
-
-const getRecordingKeysBadgeVirtualDom = isRecordingKeys => {
-  if (!isRecordingKeys) {
-    return [];
-  }
-  const recordingKeys$1 = recordingKeys();
-  return [{
-    type: Div,
-    className: 'InputBadge',
-    childCount: 1
-  }, text(recordingKeys$1)];
+const sortByPrecedence$1 = () => {
+  return i18nString(SortByPrecedence$1);
+};
+const clearSearchInput = () => {
+  return i18nString(ClearSearchInput$1);
 };
 
-const KeyBindingsFilter = 'keybindings-filter';
-const RecordKeys = 'RecordKeys';
-const SortByPrecedence = 'SortByPrecdence';
-const ClearSearchInput = 'ClearSearchInput';
+const None$1 = 0;
 
-const getSearchFieldActions = (isRecordingKeys, value) => {
-  const hasValue = value !== '';
+const getMenuEntries = () => {
   return [{
-    name: RecordKeys,
-    label: 'RecordKeys',
-    icon: 'RecordKeys',
-    checked: isRecordingKeys,
-    enabled: true
+    id: 'copy',
+    label: copy(),
+    flags: None$1,
+    command: 'KeyBindings.copy'
   }, {
-    name: SortByPrecedence,
-    label: 'SortByPrecedence',
-    icon: 'SortPrecedence',
-    checked: false,
-    enabled: true
+    id: 'copyCommandId',
+    label: copyCommandId(),
+    flags: None$1,
+    command: 'KeyBindings.copyCommandId'
   }, {
-    name: ClearSearchInput,
-    label: 'Clear Search Input',
-    icon: 'ClearAll',
-    checked: false,
-    enabled: hasValue
+    id: 'copyCommandTitle',
+    label: copyCommandTitle(),
+    flags: None$1,
+    command: 'KeyBindings.copyCommandTitle'
+  }, {
+    id: 'changeKeyBinding',
+    label: changeKeyBinding(),
+    flags: None$1,
+    command: 'KeyBindings.changeKeyBinding'
+  }, {
+    id: 'addKeyBinding',
+    label: addKeyBinding(),
+    flags: None$1,
+    command: 'KeyBindings.addKeyBinding'
+  }, {
+    id: 'removeKeyBinding',
+    label: removeKeyBinding$1(),
+    flags: None$1,
+    command: 'KeyBindings.removeKeyBinding'
+  }, {
+    id: 'resetKeyBinding',
+    label: resetKeyBinding$1(),
+    flags: None$1,
+    command: 'KeyBindings.resetKeyBinding'
+  }, {
+    id: 'changeWhenExpression',
+    label: changeWhenExpression(),
+    flags: None$1,
+    command: 'KeyBindings.changeWhenExpression'
+  }, {
+    id: 'showSameKeyBindings',
+    label: showSameKeyBindings(),
+    flags: None$1,
+    command: 'KeyBindings.showSameKeyBindings'
   }];
 };
 
-const None$1 = 'none';
-const CheckBox = 'checkbox';
-
-const mergeClassNames = (...classNames) => {
-  return classNames.filter(Boolean).join(' ');
-};
+const RendererWorker = 1;
 
-const getClassName = (checked, enabled) => {
-  if (checked) {
-    return mergeClassNames(SearchFieldButton, SearchFieldButtonChecked);
-  }
-  if (!enabled) {
-    return mergeClassNames(SearchFieldButton, SearchFieldButtonDisabled);
-  }
-  return SearchFieldButton;
+const rpcs = Object.create(null);
+const set = (id, rpc) => {
+  rpcs[id] = rpc;
 };
-const getSearchFieldButtonVirtualDom = action => {
-  const {
-    name,
-    label,
-    icon,
-    checked,
-    enabled
-  } = action;
-  const className = getClassName(checked, enabled);
-  return [{
-    type: Button,
-    className,
-    name,
-    title: label,
-    childCount: 1,
-    onClick: HandleSearchActionClick,
-    ariaChecked: `${checked}`,
-    role: CheckBox
-  }, {
-    type: Div,
-    className: `${MaskIcon} MaskIcon${icon}`,
-    childCount: 0
-  }];
+const get = id => {
+  return rpcs[id];
 };
 
-const getKeyBindingsSearchActionsVirtualDom = (isRecordingKeys, value) => {
-  const actions = getSearchFieldActions(isRecordingKeys, value);
-  const childCount = isRecordingKeys ? 2 : 1;
-  return [{
-    type: Div,
-    className: KeyBindingsSearchActions,
-    childCount
-  }, ...getRecordingKeysBadgeVirtualDom(isRecordingKeys), {
-    type: Div,
-    className: SearchFieldButtons,
-    childCount: actions.length
-  }, ...actions.flatMap(getSearchFieldButtonVirtualDom)];
+const invoke = (method, ...params) => {
+  const rpc = get(RendererWorker);
+  // @ts-ignore
+  return rpc.invoke(method, ...params);
 };
 
-const Search = 'search';
-
-const getKeyBindingsHeaderVirtualDom = (isRecordingKeys, value) => {
-  return [{
-    type: Div,
-    className: KeyBindingsHeader,
-    childCount: 1
-  }, {
-    type: Div,
-    className: KeyBindingsSearchWrapper,
-    childCount: 2
-  }, {
-    type: Input,
-    className: KeyBindingsSearchInputBox,
-    inputType: Search,
-    placeholder: typeToSearchKeyBindings(),
-    name: KeyBindingsFilter,
-    onInput: HandleInput,
-    onKeyDown: HandleKeyDown,
-    ariaDescription: resultsWillUpdateAsYouType(),
-    childCount: 0,
-    autocomplete: 'off'
-  }, ...getKeyBindingsSearchActionsVirtualDom(isRecordingKeys, value)];
+const setFocus = focusKey => {
+  return invoke('Focus.setFocus', focusKey);
 };
 
-const getRowClassName = (isEven, selected) => {
-  return mergeClassNames(TableRow, isEven ? TableRowEven : TableRowOdd, selected ? TableRowSelected : '');
+const getIndex = (state, eventX, eventY) => {
+  const {
+    minLineY,
+    y,
+    itemHeight,
+    tableHeaderHeight,
+    searchHeaderHeight
+  } = state;
+  const relativeY = eventY - y - tableHeaderHeight - searchHeaderHeight;
+  const row = Math.floor(relativeY / itemHeight);
+  return minLineY + row;
 };
 
-const highlight = {
-  type: Span,
-  className: SearchHighlight,
-  childCount: 1
+const DefineKeyBinding = 'DefineKeyBinding';
+
+const showDefineKeyBinding = () => {
+  return invoke('Viewlet.openWidget', DefineKeyBinding);
 };
 
-// TODO move this to viewmodel
-// TODO avoid mutation
-const addHighlights = (highlights, label) => {
-  const dom = [];
-  let position = 0;
-  let childCount = 0;
-  for (let i = 0; i < highlights.length; i += 2) {
-    const highlightStart = highlights[i];
-    const highlightEnd = highlights[i + 1];
-    if (position < highlightStart) {
-      const beforeText = label.slice(position, highlightStart);
-      childCount++;
-      dom.push(text(beforeText));
-    }
-    const highlightText = label.slice(highlightStart, highlightEnd);
-    childCount++;
-    dom.push(highlight, text(highlightText));
-    position = highlightEnd;
-  }
-  if (position < label.length) {
-    const afterText = label.slice(position);
-    childCount++;
-    dom.push(text(afterText));
+const handleClick = async (state, eventX, eventY) => {
+  const {
+    padding,
+    editIconSize,
+    x
+  } = state;
+  const selectedIndex = getIndex(state, eventX, eventY);
+  const relativeX = eventX - x;
+  if (relativeX > padding && relativeX < padding + editIconSize) {
+    await showDefineKeyBinding();
+  } else {
+    // TODO avoid side effect, make focus functional
+    await setFocus(FocusKeyBindingsTable);
   }
-  dom.unshift({
-    type: Td,
-    className: TableCell,
-    childCount
-  });
-  return dom;
+  return {
+    ...state,
+    focusedIndex: selectedIndex,
+    selectedIndex
+  };
 };
 
-const getKeyBindingsTableCellCommandDom = keyBinding => {
-  const {
-    commandMatches,
-    command
-  } = keyBinding;
-  const commandHighlights = commandMatches.slice(1);
-  return addHighlights(commandHighlights, command);
+const show = async (x, y, id, ...args) => {
+  await invoke('ContextMenu.show', x, y, id, ...args);
 };
 
-const getIconVirtualDom = (icon, type = Div) => {
+const KeyBindingsTable = 26;
+
+const handleContextMenu = async (state, button, x, y) => {
+  await show(x, y, KeyBindingsTable);
+  return state;
+};
+
+const handleDoubleClick = async (state, eventX, eventY) => {
+  const selectedIndex = getIndex(state, eventX, eventY);
+  await showDefineKeyBinding();
+  // TODO wait promise?
+  // showDefineWidget(state, selectedIndex)
   return {
-    type,
-    className: `MaskIcon MaskIcon${icon}`,
-    role: None$1,
-    childCount: 0
+    ...state,
+    focusedIndex: selectedIndex,
+    selectedIndex,
+    defineKeyBindingsId: 1
   };
 };
 
-const Edit = `Edit`;
-
-const getKeyBindingsTableEditCellDom = () => {
-  return [{
-    type: Td,
-    childCount: 1,
-    className: TableCell
-  }, {
-    type: Button,
-    className: mergeClassNames(IconButton, KeyBindingsEditButton),
-    childCount: 1
-  }, getIconVirtualDom(Edit)];
+const stopRecordingKeys = state => {
+  return {
+    ...state,
+    isRecordingKeys: false
+  };
 };
 
-const kbdDom = {
-  type: Kbd,
-  className: Key$1,
-  childCount: 1
+const handleEscape = state => {
+  const {
+    isRecordingKeys
+  } = state;
+  if (isRecordingKeys) {
+    return stopRecordingKeys(state);
+  }
+  return state;
 };
-const textCtrl = text('Ctrl');
-const textShift = text('Shift');
-const textPlus = text('+');
-const none = [];
-const ctrl = [kbdDom, textCtrl, textPlus];
-const shift = [kbdDom, textShift, textPlus];
-const ctrlShift = [...ctrl, ...shift];
-const map$1 = [none, ctrl, shift, ctrlShift];
-const countMap = [0, 2, 2, 4];
 
-// TODO maybe use flags number instead of booleans
-const getRef = (isCtrl, isShift) => {
-  if (isCtrl && isShift) {
-    return 3;
-  }
-  if (isCtrl) {
-    return 1;
+const Escape$1 = 'Escape';
+
+const handleKeyDown = (state, altKey, ctrlKey, key) => {
+  const {
+    isRecordingKeys,
+    value
+  } = state;
+  if (!isRecordingKeys) {
+    return state;
   }
-  if (isShift) {
-    return 2;
+  if (key === Escape$1) {
+    return handleEscape(state);
   }
-  return 0;
+  return {
+    ...state,
+    value: `${value} ${key}`,
+    inputSource: Script
+  };
 };
 
-// TODO needing childCount variable everywhere can be error prone
-const getKeyBindingCellChildren = keyBinding => {
+const handleResizerClick = (state, id, x) => {
+  return {
+    ...state,
+    resizerDownId: id
+  };
+};
+
+const handleResizerMove = (state, eventX) => {
   const {
-    isCtrl,
-    isShift,
-    key
-  } = keyBinding;
-  const ref = getRef(isCtrl, isShift);
-  const pre = map$1[ref];
-  const count = countMap[ref];
-  const children = [...pre, kbdDom, text(key)];
-  const childCount = count + 1;
+    resizerDownId,
+    contentPadding,
+    width,
+    columnWidth1,
+    columnWidth2,
+    x
+  } = state;
+  const contentWidth = width - contentPadding;
+  if (resizerDownId === 1) {
+    const newColumnWidth1 = eventX - contentPadding - x;
+    const newColumnWidth3 = contentWidth - newColumnWidth1 - columnWidth2;
+    return {
+      ...state,
+      columnWidth1: newColumnWidth1,
+      columnWidth3: newColumnWidth3
+    };
+  }
+  const newColumnWidth3 = contentWidth - (eventX - contentPadding - x);
+  const newColumnWidth2 = contentWidth - newColumnWidth3 - columnWidth1;
   return {
-    children,
-    childCount
+    ...state,
+    columnWidth2: newColumnWidth2,
+    columnWidth3: newColumnWidth3
   };
 };
 
-const getKeyBindingsTableCellKeyDom = keyBinding => {
+const KeyBindingsFilter = 'keybindings-filter';
+const RecordKeys$1 = 'RecordKeys';
+const SortByPrecedence = 'SortByPrecdence';
+const ClearSearchInput = 'ClearSearchInput';
+
+class KeyBindingError extends Error {
+  constructor(message) {
+    super(message);
+    this.name = 'KeyBindingError';
+  }
+}
+
+const sortByPrecedence = state => {
   const {
-    children,
-    childCount
-  } = getKeyBindingCellChildren(keyBinding);
-  return [{
-    type: Td,
-    className: TableCell,
-    childCount
-  }, ...children];
+    isSortingByPrecedence,
+    items
+  } = state;
+  const newValue = !isSortingByPrecedence;
+  const sorted = sortKeyBindings(items, isSortingByPrecedence);
+  return {
+    ...state,
+    isSortingByPrecedence: newValue,
+    items: sorted
+  };
 };
 
-const cell = {
-  type: Td,
-  className: TableCell,
-  childCount: 1
+const startRecordingKeys = state => {
+  return {
+    ...state,
+    isRecordingKeys: true
+  };
 };
-const getKeyBindingsTableCellWhenDom = keyBinding => {
+
+const toggleRecordingKeys = state => {
   const {
-    when
-  } = keyBinding;
-  return [cell, text(when || '')];
+    isRecordingKeys
+  } = state;
+  if (isRecordingKeys) {
+    return stopRecordingKeys(state);
+  }
+  return startRecordingKeys(state);
 };
 
-const getKeyBindingsTableBodyRowDom = keyBinding => {
-  const {
-    rowIndex,
-    selected,
-    isEven
-  } = keyBinding;
-  const className = getRowClassName(isEven, selected);
-  const dom = [{
-    type: Tr,
-    ariaRowIndex: rowIndex,
-    className,
-    key: rowIndex,
-    childCount: 4
-  }, ...getKeyBindingsTableEditCellDom(), ...getKeyBindingsTableCellCommandDom(keyBinding), ...getKeyBindingsTableCellKeyDom(keyBinding), ...getKeyBindingsTableCellWhenDom(keyBinding)];
-  return dom;
+const getSearchActionClickHandler = name => {
+  switch (name) {
+    case ClearSearchInput:
+      return clearInput;
+    case RecordKeys$1:
+      return toggleRecordingKeys;
+    case SortByPrecedence:
+      return sortByPrecedence;
+    default:
+      throw new KeyBindingError(`Unexpected handler ${name}`);
+  }
 };
 
-const getKeyBindingsTableBodyDom = displayKeyBindings => {
-  return [{
-    type: TBody,
-    className: TableBody,
-    childCount: displayKeyBindings.length
-  }, ...displayKeyBindings.flatMap(getKeyBindingsTableBodyRowDom)];
+const handleSearchActionClick = (state, name) => {
+  const fn = getSearchActionClickHandler(name);
+  return fn(state);
 };
 
-const getKeyBindingsTableColGroupVirtualDom = (columnWidth1, columnWidth2, columnWidth3) => {
-  const tableDom = [{
-    type: ColGroup,
-    className: TableColGroup,
-    childCount: 4
-  }, {
-    type: Col,
-    className: TableCol,
-    width: 30,
-    childCount: 0
-  }, {
-    type: Col,
-    className: TableCol,
-    width: columnWidth1,
-    childCount: 0
-  }, {
-    type: Col,
-    className: TableCol,
-    width: columnWidth2,
-    childCount: 0
-  }, {
-    type: Col,
-    className: TableCol,
-    width: columnWidth3 - 30,
-    childCount: 0
-  }];
-  return tableDom;
-};
-
-const tableHead = {
-  type: THead,
-  className: TableHead,
-  childCount: 1
-};
-const tableHeadRow = {
-  type: Tr,
-  className: TableRow,
-  ariaRowIndex: 1,
-  childCount: 4
-};
-const tableHeading = {
-  type: Th,
-  className: TableCell,
-  childCount: 1
-};
-const staticTableHeadDom = [tableHead, tableHeadRow, tableHeading, text(''), tableHeading, text(command()), tableHeading, text(key()), tableHeading, text(when())];
-const getKeyBindingsTableHeadVirtualDom = () => {
-  return staticTableHeadDom;
-};
-
-const getTableDom = (filteredKeyBindings, displayKeyBindings, columnWidth1, columnWidth2, columnWidth3) => {
-  const tableDom = [{
-    type: Table,
-    className: Table$1,
-    ariaLabel: keyBindings(),
-    ariaRowCount: filteredKeyBindings.length,
-    onClick: HandleTableClick,
-    onContextMenu: HandleContextMenu,
-    tabIndex: 0,
-    childCount: 3
-  }, ...getKeyBindingsTableColGroupVirtualDom(columnWidth1, columnWidth2, columnWidth3), ...getKeyBindingsTableHeadVirtualDom(), ...getKeyBindingsTableBodyDom(displayKeyBindings)];
-  return tableDom;
-};
-
-const getNoKeyBindingsFoundVirtualDom = () => {
-  const noKeyBindingsFound$1 = noKeyBindingsFound();
-  return [{
-    type: Div,
-    className: Message,
-    childCount: 1
-  }, text(noKeyBindingsFound$1)];
-};
-
-const px = value => {
-  return `${value}px`;
-};
-
-const scrollbarNode = {
-  type: Div,
-  className: ScrollBar,
-  childCount: 1
-};
-const getScrollBarVirtualDom = (scrollBarThumbHeight, scrollBarThumbTop) => {
-  return [scrollbarNode, {
-    type: Div,
-    className: ScrollBarThumb,
-    childCount: 0,
-    height: px(scrollBarThumbHeight),
-    top: px(scrollBarThumbTop)
-  }];
-};
-
-const parentNode = {
-  type: Div,
-  className: TableWrapper,
-  onWheel: HandleWheel,
-  onDblClick: HandleTableDoubleClick,
-  childCount: 4
-};
-const resizer = {
-  type: Div,
-  className: Resizer,
-  childCount: 0
-};
-const getKeyBindingsTableWrapperVirtualDom = (filteredKeyBindings, displayKeyBindings, columnWidth1, columnWidth2, columnWidth3, scrollBarThumbHeight, scrollBarThumbTop) => {
-  if (displayKeyBindings.length === 0) {
-    return getNoKeyBindingsFoundVirtualDom();
-  }
-  return [parentNode, ...getTableDom(filteredKeyBindings, displayKeyBindings, columnWidth1, columnWidth2, columnWidth3), resizer, resizer, ...getScrollBarVirtualDom(scrollBarThumbHeight, scrollBarThumbTop)];
-};
-
-const getKeyBindingsVirtualDom = (filteredKeyBindings, displayKeyBindings, columnWidth1, columnWidth2, columnWidth3, scrollBarThumbHeight, scrollBarThumbTop, isRecordingKeys, value) => {
-  return [{
-    type: Div,
-    className: mergeClassNames(Viewlet, KeyBindings$1),
-    onPointerDown: HandlePointerDown,
-    childCount: 2
-  }, ...getKeyBindingsHeaderVirtualDom(isRecordingKeys, value), ...getKeyBindingsTableWrapperVirtualDom(filteredKeyBindings, displayKeyBindings, columnWidth1, columnWidth2, columnWidth3, scrollBarThumbHeight, scrollBarThumbTop)];
-};
-
-const None = 0;
-
-const getMenuEntries = () => {
-  return [{
-    id: 'copy',
-    label: copy(),
-    flags: None,
-    command: 'KeyBindings.copy'
-  }, {
-    id: 'copyCommandId',
-    label: copyCommandId(),
-    flags: None,
-    command: 'KeyBindings.copyCommandId'
-  }, {
-    id: 'copyCommandTitle',
-    label: copyCommandTitle(),
-    flags: None,
-    command: 'KeyBindings.copyCommandTitle'
-  }, {
-    id: 'changeKeyBinding',
-    label: changeKeyBinding(),
-    flags: None,
-    command: 'KeyBindings.changeKeyBinding'
-  }, {
-    id: 'addKeyBinding',
-    label: addKeyBinding(),
-    flags: None,
-    command: 'KeyBindings.addKeyBinding'
-  }, {
-    id: 'removeKeyBinding',
-    label: removeKeyBinding$1(),
-    flags: None,
-    command: 'KeyBindings.removeKeyBinding'
-  }, {
-    id: 'resetKeyBinding',
-    label: resetKeyBinding$1(),
-    flags: None,
-    command: 'KeyBindings.resetKeyBinding'
-  }, {
-    id: 'changeWhenExpression',
-    label: changeWhenExpression(),
-    flags: None,
-    command: 'KeyBindings.changeWhenExpression'
-  }, {
-    id: 'showSameKeyBindings',
-    label: showSameKeyBindings(),
-    flags: None,
-    command: 'KeyBindings.showSameKeyBindings'
-  }];
-};
-
-const RendererWorker = 1;
-
-const rpcs = Object.create(null);
-const set = (id, rpc) => {
-  rpcs[id] = rpc;
-};
-const get = id => {
-  return rpcs[id];
-};
-
-const invoke = (method, ...params) => {
-  const rpc = get(RendererWorker);
-  // @ts-ignore
-  return rpc.invoke(method, ...params);
-};
-
-const setFocus = focusKey => {
-  return invoke('Focus.setFocus', focusKey);
-};
-
-const getIndex = (state, eventX, eventY) => {
+const setDeltaY = (state, deltaY) => {
   const {
-    minLineY,
-    y,
+    maxVisibleItems,
     itemHeight,
-    tableHeaderHeight,
-    searchHeaderHeight
-  } = state;
-  const relativeY = eventY - y - tableHeaderHeight - searchHeaderHeight;
-  const row = Math.floor(relativeY / itemHeight);
-  return minLineY + row;
-};
-
-const DefineKeyBinding = 'DefineKeyBinding';
-
-const showDefineKeyBinding = () => {
-  return invoke('Viewlet.openWidget', DefineKeyBinding);
-};
-
-const handleClick = async (state, eventX, eventY) => {
-  const {
-    padding,
-    editIconSize,
-    x
+    items
   } = state;
-  const selectedIndex = getIndex(state, eventX, eventY);
-  const relativeX = eventX - x;
-  if (relativeX > padding && relativeX < padding + editIconSize) {
-    await showDefineKeyBinding();
-  } else {
-    // TODO avoid side effect, make focus functional
-    await setFocus(FocusKeyBindingsTable);
+  const tableHeight = maxVisibleItems * itemHeight;
+  const minDeltaY = 0;
+  const maxDeltaY = Math.max(items.length * itemHeight - tableHeight, 0);
+  if (deltaY < minDeltaY) {
+    deltaY = minDeltaY;
+  } else if (deltaY > maxDeltaY) {
+    deltaY = Math.max(maxDeltaY);
   }
+  const minLineY = Math.floor(deltaY / itemHeight);
+  const maxLineY = minLineY + Math.round(tableHeight / itemHeight);
   return {
     ...state,
-    focusedIndex: selectedIndex,
-    selectedIndex
+    deltaY,
+    minLineY,
+    maxLineY
   };
 };
 
-const show = async (x, y, id, ...args) => {
-  await invoke('ContextMenu.show', x, y, id, ...args);
-};
-
-const KeyBindingsTable = 26;
-
-const handleContextMenu = async (state, button, x, y) => {
-  await show(x, y, KeyBindingsTable);
-  return state;
+const handleWheel = (state, deltaMode, deltaY) => {
+  return setDeltaY(state, state.deltaY + deltaY);
 };
 
-const handleDoubleClick = async (state, eventX, eventY) => {
-  const selectedIndex = getIndex(state, eventX, eventY);
-  await showDefineKeyBinding();
-  // TODO wait promise?
-  // showDefineWidget(state, selectedIndex)
-  return {
-    ...state,
-    focusedIndex: selectedIndex,
-    selectedIndex,
-    defineKeyBindingsId: 1
-  };
+const getMaxVisibleItems = (height, searchHeaderHeight, tableHeaderHeight, rowHeight) => {
+  return Math.floor((height - searchHeaderHeight - tableHeaderHeight) / rowHeight);
 };
 
-const stopRecordingKeys = state => {
-  return {
-    ...state,
-    isRecordingKeys: false
-  };
-};
-
-const handleEscape = state => {
-  const {
-    isRecordingKeys
-  } = state;
-  if (isRecordingKeys) {
-    return stopRecordingKeys(state);
-  }
-  return state;
-};
-
-const Escape$1 = 'Escape';
-
-const handleKeyDown = (state, altKey, ctrlKey, key) => {
-  const {
-    isRecordingKeys,
-    value
-  } = state;
-  if (!isRecordingKeys) {
-    return state;
-  }
-  if (key === Escape$1) {
-    return handleEscape(state);
-  }
-  return {
-    ...state,
-    value: `${value} ${key}`,
-    inputSource: Script
-  };
-};
-
-const handleResizerClick = (state, id, x) => {
-  return {
-    ...state,
-    resizerDownId: id
-  };
-};
-
-const handleResizerMove = (state, eventX) => {
-  const {
-    resizerDownId,
-    contentPadding,
-    width,
-    columnWidth1,
-    columnWidth2,
-    x
-  } = state;
-  const contentWidth = width - contentPadding;
-  if (resizerDownId === 1) {
-    const newColumnWidth1 = eventX - contentPadding - x;
-    const newColumnWidth3 = contentWidth - newColumnWidth1 - columnWidth2;
-    return {
-      ...state,
-      columnWidth1: newColumnWidth1,
-      columnWidth3: newColumnWidth3
-    };
-  }
-  const newColumnWidth3 = contentWidth - (eventX - contentPadding - x);
-  const newColumnWidth2 = contentWidth - newColumnWidth3 - columnWidth1;
-  return {
-    ...state,
-    columnWidth2: newColumnWidth2,
-    columnWidth3: newColumnWidth3
-  };
-};
-
-const sortByPrecedence = state => {
-  return state;
-};
-
-const startRecordingKeys = state => {
-  return {
-    ...state,
-    isRecordingKeys: true
-  };
-};
-
-const toggleRecordingKeys = state => {
-  const {
-    isRecordingKeys
-  } = state;
-  if (isRecordingKeys) {
-    return stopRecordingKeys(state);
-  }
-  return startRecordingKeys(state);
-};
-
-const getSearchActionClickHandler = name => {
-  switch (name) {
-    case ClearSearchInput:
-      return clearInput;
-    case RecordKeys:
-      return toggleRecordingKeys;
-    case SortByPrecedence:
-      return sortByPrecedence;
-    default:
-      throw new Error(`Unexpected handler ${name}`);
-  }
-};
-
-const handleSearchActionClick = (state, name) => {
-  const fn = getSearchActionClickHandler(name);
-  return fn(state);
-};
-
-const setDeltaY = (state, deltaY) => {
-  const {
-    maxVisibleItems,
-    itemHeight,
-    items
-  } = state;
-  const tableHeight = maxVisibleItems * itemHeight;
-  const minDeltaY = 0;
-  const maxDeltaY = Math.max(items.length * itemHeight - tableHeight, 0);
-  if (deltaY < minDeltaY) {
-    deltaY = minDeltaY;
-  } else if (deltaY > maxDeltaY) {
-    deltaY = Math.max(maxDeltaY);
-  }
-  const minLineY = Math.floor(deltaY / itemHeight);
-  const maxLineY = minLineY + Math.round(tableHeight / itemHeight);
-  return {
-    ...state,
-    deltaY,
-    minLineY,
-    maxLineY
-  };
-};
-
-const handleWheel = (state, deltaMode, deltaY) => {
-  return setDeltaY(state, state.deltaY + deltaY);
-};
-
-const getMaxVisibleItems = (height, searchHeaderHeight, tableHeaderHeight, rowHeight) => {
-  return Math.floor((height - searchHeaderHeight - tableHeaderHeight) / rowHeight);
-};
-
-const getKeyBindings = () => {
-  return invoke('KeyBindingsInitial.getKeyBindings');
+const getKeyBindings = () => {
+  return invoke('KeyBindingsInitial.getKeyBindings');
 };
 
 const Unknown = 'Unknown';
@@ -2388,99 +1972,583 @@ const getKeyCodeString = keyCode => {
   }
 };
 
-const CtrlCmd = 1 << 11 >>> 0;
-const Shift = 1 << 10 >>> 0;
-
-const parseKey = rawKey => {
-  number(rawKey);
-  const isCtrl = Boolean(rawKey & CtrlCmd);
-  const isShift = Boolean(rawKey & Shift);
-  const keyCode = rawKey & 0x00_00_00_FF;
-  const key = getKeyCodeString(keyCode);
-  return {
-    key,
+const CtrlCmd = 1 << 11 >>> 0;
+const Shift = 1 << 10 >>> 0;
+
+const parseKey = rawKey => {
+  number(rawKey);
+  const isCtrl = Boolean(rawKey & CtrlCmd);
+  const isShift = Boolean(rawKey & Shift);
+  const keyCode = rawKey & 0x00_00_00_FF;
+  const key = getKeyCodeString(keyCode);
+  return {
+    key,
+    isCtrl,
+    isShift
+  };
+};
+
+const parseKeyBinding = keyBinding => {
+  return {
+    ...keyBinding,
+    rawKey: keyBinding.key,
+    ...parseKey(keyBinding.key)
+  };
+};
+
+const parseKeyBindings = keyBindings => {
+  return keyBindings.map(parseKeyBinding);
+};
+
+const getSavedValue = savedState => {
+  if (savedState && typeof savedState === 'object' && 'value' in savedState && typeof savedState.value === 'string') {
+    return savedState.value;
+  }
+  return '';
+};
+
+const restoreState = savedState => {
+  const savedValue = getSavedValue(savedState);
+  // @ts-ignore
+  const isRecordingKeys = savedState?.['isRecordingKeys'];
+  // @ts-ignore
+  const isSortingByPrecedence = savedState?.['isSortingByPrecedence'];
+  return {
+    savedValue,
+    isRecordingKeys,
+    isSortingByPrecedence
+  };
+};
+
+const getScrollBarSize = (size, contentSize, minimumSliderSize) => {
+  if (size >= contentSize) {
+    return 0;
+  }
+  return Math.max(Math.round(size ** 2 / contentSize), minimumSliderSize);
+};
+
+const loadContent = async (state, savedState) => {
+  const {
+    height,
+    itemHeight,
+    width,
+    contentPadding,
+    searchHeaderHeight,
+    tableHeaderHeight
+  } = state;
+  number(width);
+  const keyBindings = await getKeyBindings();
+  const parsedKeyBindings = parseKeyBindings(keyBindings);
+  const maxVisibleItems = getMaxVisibleItems(height, searchHeaderHeight, tableHeaderHeight, itemHeight);
+  const {
+    savedValue,
+    isRecordingKeys,
+    isSortingByPrecedence
+  } = restoreState(savedState);
+  const filteredKeyBindings = getFilteredKeyBindings(parsedKeyBindings, savedValue);
+  const listHeight = height - searchHeaderHeight - tableHeaderHeight;
+  const contentHeight = filteredKeyBindings.length * itemHeight;
+  const scrollBarHeight = getScrollBarSize(listHeight, contentHeight, 10);
+  const maxLineY = Math.min(filteredKeyBindings.length, maxVisibleItems);
+  const finalDeltaY = Math.max(contentHeight - listHeight, 0);
+  const contentWidth = width - contentPadding;
+  const columnWidth1 = contentWidth / 3;
+  const columnWidth2 = contentWidth / 3;
+  const columnWidth3 = contentWidth / 3;
+  const newState = {
+    ...state,
+    parsedKeyBindings,
+    items: filteredKeyBindings,
+    maxLineY,
+    maxVisibleItems,
+    value: savedValue,
+    scrollBarHeight,
+    finalDeltaY,
+    columnWidth1,
+    columnWidth2,
+    columnWidth3,
+    isRecordingKeys,
+    isSortingByPrecedence
+  };
+  return newState;
+};
+
+const removeKeyBinding = state => {
+  return state;
+};
+
+const IconButton = 'IconButton';
+const Key = 'Key';
+const KeyBindings = 'KeyBindings';
+const KeyBindingsEditButton = 'KeyBindingsEditButton';
+const KeyBindingsHeader = 'KeyBindingsHeader';
+const KeyBindingsSearchActions = 'KeyBindingsSearchActions';
+const KeyBindingsSearchInputBox = 'KeyBindingsSearchInputBox';
+const KeyBindingsSearchWrapper = 'KeyBindingsSearchWrapper';
+const MaskIcon = 'MaskIcon';
+const Message = 'Message';
+const InputBadge = 'InputBadge';
+const Resizer = 'Resizer';
+const ScrollBar = 'ScrollBar';
+const ScrollBarThumb = 'ScrollBarThumb';
+const SearchFieldButton = 'SearchFieldButton';
+const SearchFieldButtonChecked = 'SearchFieldButtonChecked';
+const SearchFieldButtonDisabled = 'SearchFieldButtonDisabled';
+const SearchFieldButtons = 'SearchFieldButtons';
+const SearchHighlight = 'SearchHighlight';
+const Table$1 = 'Table';
+const TableBody = 'TableBody';
+const TableCell = 'TableCell';
+const TableCol = 'TableCol';
+const TableColGroup = 'TableColGroup';
+const TableHead = 'TableHead';
+const TableRow = 'TableRow';
+const TableRowEven = 'TableRowEven';
+const TableRowOdd = 'TableRowOdd';
+const TableRowSelected = 'TableRowSelected';
+const TableWrapper = 'TableWrapper';
+const Viewlet = 'Viewlet';
+
+const HandleContextMenu = 'handleContextMenu';
+const HandleInput = 'handleInput';
+const HandleKeyDown = 'handleKeyDown';
+const HandlePointerDown = 'handlePointerDown';
+const HandleResizerMove = 'handleResizerMove';
+const HandleResizerPointerDown = 'handleResizerPointerDown';
+const HandleSearchActionClick = 'handleSearchActionClick';
+const HandleTableClick = 'handleTableClick';
+const HandleTableDoubleClick = 'handleTableDoubleClick';
+const HandleWheel = 'handleWheel';
+
+const Button = 1;
+const Col = 2;
+const ColGroup = 3;
+const Div = 4;
+const Input = 6;
+const Kbd = 7;
+const Span = 8;
+const Table = 9;
+const TBody = 10;
+const Td = 11;
+const Th = 13;
+const THead = 14;
+const Tr = 15;
+
+const mergeClassNames = (...classNames) => {
+  return classNames.filter(Boolean).join(' ');
+};
+const Text = 12;
+const text = data => {
+  return {
+    type: Text,
+    text: data,
+    childCount: 0
+  };
+};
+
+const getRecordingKeysBadgeVirtualDom = isRecordingKeys => {
+  if (!isRecordingKeys) {
+    return [];
+  }
+  const recordingKeys$1 = recordingKeys();
+  return [{
+    type: Div,
+    className: InputBadge,
+    childCount: 1
+  }, text(recordingKeys$1)];
+};
+
+const ClearAll = `MaskIconClearAll`;
+const Edit = `MaskIconEdit`;
+const RecordKeys = `MaskIconRecordKeys`;
+const SortPrecedence = `MaskIconSortPrecedence`;
+
+const getSearchFieldActions = (isRecordingKeys, isSortingByPrecedence, value) => {
+  const hasValue = value !== '';
+  return [{
+    name: RecordKeys$1,
+    label: recordKeys(),
+    icon: RecordKeys,
+    checked: isRecordingKeys,
+    enabled: true
+  }, {
+    name: SortByPrecedence,
+    label: sortByPrecedence$1(),
+    icon: SortPrecedence,
+    checked: isSortingByPrecedence,
+    enabled: true
+  }, {
+    name: ClearSearchInput,
+    label: clearSearchInput(),
+    icon: ClearAll,
+    checked: false,
+    enabled: hasValue
+  }];
+};
+
+const None = 'none';
+const CheckBox = 'checkbox';
+
+const getSearchFieldClassName = (checked, enabled) => {
+  if (checked) {
+    return mergeClassNames(SearchFieldButton, SearchFieldButtonChecked);
+  }
+  if (!enabled) {
+    return mergeClassNames(SearchFieldButton, SearchFieldButtonDisabled);
+  }
+  return SearchFieldButton;
+};
+
+const getSearchFieldButtonVirtualDom = action => {
+  const {
+    name,
+    label,
+    icon,
+    checked,
+    enabled
+  } = action;
+  const className = getSearchFieldClassName(checked, enabled);
+  return [{
+    type: Button,
+    className,
+    name,
+    title: label,
+    childCount: 1,
+    onClick: HandleSearchActionClick,
+    ariaChecked: `${checked}`,
+    role: CheckBox
+  }, {
+    type: Div,
+    className: mergeClassNames(MaskIcon, icon),
+    childCount: 0
+  }];
+};
+
+const getKeyBindingsSearchActionsVirtualDom = (isRecordingKeys, isSortingByPrecedence, value) => {
+  const actions = getSearchFieldActions(isRecordingKeys, isSortingByPrecedence, value);
+  const childCount = isRecordingKeys ? 2 : 1;
+  return [{
+    type: Div,
+    className: KeyBindingsSearchActions,
+    childCount
+  }, ...getRecordingKeysBadgeVirtualDom(isRecordingKeys), {
+    type: Div,
+    className: SearchFieldButtons,
+    childCount: actions.length
+  }, ...actions.flatMap(getSearchFieldButtonVirtualDom)];
+};
+
+const Search = 'search';
+
+const getKeyBindingsHeaderVirtualDom = (isRecordingKeys, isSortingByPrecedence, value) => {
+  return [{
+    type: Div,
+    className: KeyBindingsHeader,
+    childCount: 1
+  }, {
+    type: Div,
+    className: KeyBindingsSearchWrapper,
+    childCount: 2
+  }, {
+    type: Input,
+    className: KeyBindingsSearchInputBox,
+    inputType: Search,
+    placeholder: typeToSearchKeyBindings(),
+    name: KeyBindingsFilter,
+    onInput: HandleInput,
+    onKeyDown: HandleKeyDown,
+    ariaDescription: resultsWillUpdateAsYouType(),
+    childCount: 0,
+    autocomplete: 'off'
+  }, ...getKeyBindingsSearchActionsVirtualDom(isRecordingKeys, isSortingByPrecedence, value)];
+};
+
+const getRowClassName = (isEven, selected) => {
+  return mergeClassNames(TableRow, isEven ? TableRowEven : TableRowOdd, selected ? TableRowSelected : '');
+};
+
+const highlight = {
+  type: Span,
+  className: SearchHighlight,
+  childCount: 1
+};
+
+// TODO move this to viewmodel
+// TODO avoid mutation
+const addHighlights = (highlights, label) => {
+  const dom = [];
+  let position = 0;
+  let childCount = 0;
+  for (let i = 0; i < highlights.length; i += 2) {
+    const highlightStart = highlights[i];
+    const highlightEnd = highlights[i + 1];
+    if (position < highlightStart) {
+      const beforeText = label.slice(position, highlightStart);
+      childCount++;
+      dom.push(text(beforeText));
+    }
+    const highlightText = label.slice(highlightStart, highlightEnd);
+    childCount++;
+    dom.push(highlight, text(highlightText));
+    position = highlightEnd;
+  }
+  if (position < label.length) {
+    const afterText = label.slice(position);
+    childCount++;
+    dom.push(text(afterText));
+  }
+  dom.unshift({
+    type: Td,
+    className: TableCell,
+    childCount
+  });
+  return dom;
+};
+
+const getKeyBindingsTableCellCommandDom = keyBinding => {
+  const {
+    commandMatches,
+    command
+  } = keyBinding;
+  const commandHighlights = commandMatches.slice(1);
+  return addHighlights(commandHighlights, command);
+};
+
+const getIconVirtualDom = (icon, type = Div) => {
+  return {
+    type,
+    className: mergeClassNames(MaskIcon, icon),
+    role: None,
+    childCount: 0
+  };
+};
+
+const getKeyBindingsTableEditCellDom = () => {
+  return [{
+    type: Td,
+    childCount: 1,
+    className: TableCell
+  }, {
+    type: Button,
+    className: mergeClassNames(IconButton, KeyBindingsEditButton),
+    childCount: 1
+  }, getIconVirtualDom(Edit)];
+};
+
+const kbdDom = {
+  type: Kbd,
+  className: Key,
+  childCount: 1
+};
+const textCtrl = text('Ctrl');
+const textShift = text('Shift');
+const textPlus = text('+');
+const none = [];
+const ctrl = [kbdDom, textCtrl, textPlus];
+const shift = [kbdDom, textShift, textPlus];
+const ctrlShift = [...ctrl, ...shift];
+const map$1 = [none, ctrl, shift, ctrlShift];
+const countMap = [0, 2, 2, 4];
+
+// TODO maybe use flags number instead of booleans
+const getRef = (isCtrl, isShift) => {
+  if (isCtrl && isShift) {
+    return 3;
+  }
+  if (isCtrl) {
+    return 1;
+  }
+  if (isShift) {
+    return 2;
+  }
+  return 0;
+};
+
+// TODO needing childCount variable everywhere can be error prone
+const getKeyBindingCellChildren = keyBinding => {
+  const {
     isCtrl,
-    isShift
+    isShift,
+    key
+  } = keyBinding;
+  const ref = getRef(isCtrl, isShift);
+  const pre = map$1[ref];
+  const count = countMap[ref];
+  const children = [...pre, kbdDom, text(key)];
+  const childCount = count + 1;
+  return {
+    children,
+    childCount
   };
 };
 
-const parseKeyBinding = keyBinding => {
-  return {
-    ...keyBinding,
-    rawKey: keyBinding.key,
-    ...parseKey(keyBinding.key)
-  };
+const getKeyBindingsTableCellKeyDom = keyBinding => {
+  const {
+    children,
+    childCount
+  } = getKeyBindingCellChildren(keyBinding);
+  return [{
+    type: Td,
+    className: TableCell,
+    childCount
+  }, ...children];
 };
 
-const parseKeyBindings = keyBindings => {
-  return keyBindings.map(parseKeyBinding);
+const cell = {
+  type: Td,
+  className: TableCell,
+  childCount: 1
+};
+const getKeyBindingsTableCellWhenDom = keyBinding => {
+  const {
+    when
+  } = keyBinding;
+  return [cell, text(when || '')];
 };
 
-const getSavedValue = savedState => {
-  if (savedState && typeof savedState === 'object' && 'value' in savedState && typeof savedState.value === 'string') {
-    return savedState.value;
-  }
-  return '';
+const getKeyBindingsTableBodyRowDom = keyBinding => {
+  const {
+    rowIndex,
+    selected,
+    isEven
+  } = keyBinding;
+  const className = getRowClassName(isEven, selected);
+  const dom = [{
+    type: Tr,
+    ariaRowIndex: rowIndex,
+    className,
+    key: rowIndex,
+    childCount: 4
+  }, ...getKeyBindingsTableEditCellDom(), ...getKeyBindingsTableCellCommandDom(keyBinding), ...getKeyBindingsTableCellKeyDom(keyBinding), ...getKeyBindingsTableCellWhenDom(keyBinding)];
+  return dom;
 };
 
-const restoreState = savedState => {
-  const savedValue = getSavedValue(savedState);
-  return {
-    savedValue
-  };
+const getKeyBindingsTableBodyDom = displayKeyBindings => {
+  return [{
+    type: TBody,
+    className: TableBody,
+    childCount: displayKeyBindings.length
+  }, ...displayKeyBindings.flatMap(getKeyBindingsTableBodyRowDom)];
 };
 
-const getScrollBarSize = (size, contentSize, minimumSliderSize) => {
-  if (size >= contentSize) {
-    return 0;
-  }
-  return Math.max(Math.round(size ** 2 / contentSize), minimumSliderSize);
+const getKeyBindingsTableColGroupVirtualDom = (columnWidth1, columnWidth2, columnWidth3) => {
+  const tableDom = [{
+    type: ColGroup,
+    className: TableColGroup,
+    childCount: 4
+  }, {
+    type: Col,
+    className: TableCol,
+    width: 30,
+    childCount: 0
+  }, {
+    type: Col,
+    className: TableCol,
+    width: columnWidth1,
+    childCount: 0
+  }, {
+    type: Col,
+    className: TableCol,
+    width: columnWidth2,
+    childCount: 0
+  }, {
+    type: Col,
+    className: TableCol,
+    width: columnWidth3 - 30,
+    childCount: 0
+  }];
+  return tableDom;
 };
 
-const loadContent = async (state, savedState) => {
-  const {
-    height,
-    itemHeight,
-    width,
-    contentPadding,
-    searchHeaderHeight,
-    tableHeaderHeight
-  } = state;
-  number(width);
-  const keyBindings = await getKeyBindings();
-  const parsedKeyBindings = parseKeyBindings(keyBindings);
-  const maxVisibleItems = getMaxVisibleItems(height, searchHeaderHeight, tableHeaderHeight, itemHeight);
-  const {
-    savedValue
-  } = restoreState(savedState);
-  const filteredKeyBindings = getFilteredKeyBindings(parsedKeyBindings, savedValue);
-  const listHeight = height - searchHeaderHeight - tableHeaderHeight;
-  const contentHeight = filteredKeyBindings.length * itemHeight;
-  const scrollBarHeight = getScrollBarSize(listHeight, contentHeight, 10);
-  const maxLineY = Math.min(filteredKeyBindings.length, maxVisibleItems);
-  const finalDeltaY = Math.max(contentHeight - listHeight, 0);
-  const contentWidth = width - contentPadding;
-  const columnWidth1 = contentWidth / 3;
-  const columnWidth2 = contentWidth / 3;
-  const columnWidth3 = contentWidth / 3;
-  const newState = {
-    ...state,
-    parsedKeyBindings,
-    items: filteredKeyBindings,
-    maxLineY,
-    maxVisibleItems,
-    value: savedValue,
-    scrollBarHeight,
-    finalDeltaY,
-    columnWidth1,
-    columnWidth2,
-    columnWidth3
-  };
-  return newState;
+const tableHead = {
+  type: THead,
+  className: TableHead,
+  childCount: 1
+};
+const tableHeadRow = {
+  type: Tr,
+  className: TableRow,
+  ariaRowIndex: 1,
+  childCount: 4
+};
+const tableHeading = {
+  type: Th,
+  className: TableCell,
+  childCount: 1
+};
+const staticTableHeadDom = [tableHead, tableHeadRow, tableHeading, text(''), tableHeading, text(command()), tableHeading, text(key()), tableHeading, text(when())];
+const getKeyBindingsTableHeadVirtualDom = () => {
+  return staticTableHeadDom;
 };
 
-const removeKeyBinding = state => {
-  return state;
+const getTableDom = (filteredKeyBindings, displayKeyBindings, columnWidth1, columnWidth2, columnWidth3) => {
+  const tableDom = [{
+    type: Table,
+    className: Table$1,
+    ariaLabel: keyBindings(),
+    ariaRowCount: filteredKeyBindings.length,
+    onClick: HandleTableClick,
+    onContextMenu: HandleContextMenu,
+    tabIndex: 0,
+    childCount: 3
+  }, ...getKeyBindingsTableColGroupVirtualDom(columnWidth1, columnWidth2, columnWidth3), ...getKeyBindingsTableHeadVirtualDom(), ...getKeyBindingsTableBodyDom(displayKeyBindings)];
+  return tableDom;
+};
+
+const getNoKeyBindingsFoundVirtualDom = () => {
+  const noKeyBindingsFound$1 = noKeyBindingsFound();
+  return [{
+    type: Div,
+    className: Message,
+    childCount: 1
+  }, text(noKeyBindingsFound$1)];
+};
+
+const px = value => {
+  return `${value}px`;
+};
+
+const scrollbarNode = {
+  type: Div,
+  className: ScrollBar,
+  childCount: 1
+};
+const getScrollBarVirtualDom = (scrollBarThumbHeight, scrollBarThumbTop) => {
+  return [scrollbarNode, {
+    type: Div,
+    className: ScrollBarThumb,
+    childCount: 0,
+    height: px(scrollBarThumbHeight),
+    top: px(scrollBarThumbTop)
+  }];
+};
+
+const parentNode = {
+  type: Div,
+  className: TableWrapper,
+  onWheel: HandleWheel,
+  onDblClick: HandleTableDoubleClick,
+  childCount: 4
+};
+const resizer = {
+  type: Div,
+  className: Resizer,
+  childCount: 0
+};
+const getKeyBindingsTableWrapperVirtualDom = (filteredKeyBindings, displayKeyBindings, columnWidth1, columnWidth2, columnWidth3, scrollBarThumbHeight, scrollBarThumbTop) => {
+  if (displayKeyBindings.length === 0) {
+    return getNoKeyBindingsFoundVirtualDom();
+  }
+  return [parentNode, ...getTableDom(filteredKeyBindings, displayKeyBindings, columnWidth1, columnWidth2, columnWidth3), resizer, resizer, ...getScrollBarVirtualDom(scrollBarThumbHeight, scrollBarThumbTop)];
+};
+
+const getKeyBindingsVirtualDom = (filteredKeyBindings, displayKeyBindings, columnWidth1, columnWidth2, columnWidth3, scrollBarThumbHeight, scrollBarThumbTop, isRecordingKeys, isSortingByPrecedence, value) => {
+  return [{
+    type: Div,
+    className: mergeClassNames(Viewlet, KeyBindings),
+    onPointerDown: HandlePointerDown,
+    childCount: 2
+  }, ...getKeyBindingsHeaderVirtualDom(isRecordingKeys, isSortingByPrecedence, value), ...getKeyBindingsTableWrapperVirtualDom(filteredKeyBindings, displayKeyBindings, columnWidth1, columnWidth2, columnWidth3, scrollBarThumbHeight, scrollBarThumbTop)];
 };
 
 const map = [/* 0 */'Empty', /* 1 */'BrowserChromium', /* 2 */'BrowserElectron', /* 3 */'BrowserFirefox', /* 4 */'FocusAbout', /* 5 */'FocusActivityBar', /* 6 */'FocusDebugInput', /* 7 */'FocusDialog', /* 8 */'FocusEditor', /* 9 */'FocusEditorCompletions', /* 10 */'FocusEditorImage', /* 11 */'FocusEditorRename', /* 12 */'FocusEditorText', /* 13 */'FocusExplorer', /* 14 */'FocusExplorerEditBox', /* 15 */'FocusExtensions', /* 16 */'FocusFindWidget', /* 17 */'FocusLocationList', /* 18 */'FocusMenu', /* 19 */'FocusProblems', /* 20 */'FocusQuickPickInput', /* 21 */'FocusSearchInput', /* 22 */'FocusSearchResults', /* 23 */'FocusSimpleBrowserInput', /* 24 */'FocusSourceControlInput', /* 25 */'FocusTerminal', /* 26 */'FocusTitleBarMenuBar', /* 27 */'FocusViewletList', /* 28 */'FocusOutput', /* 29 */'FocusDebugConsoleInput', /* 30 */'FocusDebugScope', /* 31 */'FocusSearchReplaceInput', /* 32 */'FocusMatchCase', /* 33 */'FocusRegex', /* 34 */'FocusWholeWord', /* 35 */'FocusReplaceAll', /* 36 */'FocusPreserveCase', /* 37 */'FocusSimpleBrowser', /* 38 */'FocusSourceActions'];
@@ -2535,7 +2603,8 @@ const renderKeyBindings = (oldState, newState) => {
     searchHeaderHeight,
     tableHeaderHeight,
     isRecordingKeys,
-    value
+    value,
+    isSortingByPrecedence
   } = newState;
   const deltaY = minLineY * itemHeight;
   const percent = deltaY / finalDeltaY;
@@ -2547,7 +2616,7 @@ const renderKeyBindings = (oldState, newState) => {
   const displayKeyBindings = getVisibleKeyBindings(items, minLineY, maxLineY, selectedIndex);
   // TODO do dom diffing for faster incremental updates, e.g. when scrolling
   // console.time('tableDom')
-  const tableDom = getKeyBindingsVirtualDom(items, displayKeyBindings, columnWidth1, columnWidth2, columnWidth3, scrollBarThumbHeight, scrollBarThumbTop, isRecordingKeys, value);
+  const tableDom = getKeyBindingsVirtualDom(items, displayKeyBindings, columnWidth1, columnWidth2, columnWidth3, scrollBarThumbHeight, scrollBarThumbTop, isRecordingKeys, isSortingByPrecedence, value);
   // console.timeEnd('tableDom')
   // console.log({ tableDom })
   return ['Viewlet.setDom2', /* tableDom */tableDom];
@@ -2592,7 +2661,9 @@ const render3 = (uid, diffResult) => {
     oldState,
     newState
   } = get$1(uid);
-  return applyRender(oldState, newState, diffResult);
+  set$1(uid, newState, newState);
+  const commands = applyRender(oldState, newState, diffResult);
+  return commands;
 };
 
 const renderEventListeners = () => {
@@ -2660,7 +2731,8 @@ const saveState = uid => {
     // deprecated
     return {
       value: '',
-      isRecordingKeys: false
+      isRecordingKeys: false,
+      isSortingByPrecedence: false
     };
   }
   const {
@@ -2668,11 +2740,13 @@ const saveState = uid => {
   } = get$1(uid);
   const {
     value,
-    isRecordingKeys
+    isRecordingKeys,
+    isSortingByPrecedence
   } = newState;
   return {
     value,
-    isRecordingKeys
+    isRecordingKeys,
+    isSortingByPrecedence
   };
 };
 
@@ -2686,7 +2760,11 @@ const wrapCommand = fn => {
       newState
     } = get$1(uid);
     const newerState = await fn(newState, ...args);
-    set$1(uid, newState, newerState);
+    if (newState === newerState) {
+      return;
+    }
+    const latest = get$1(uid);
+    set$1(uid, latest.oldState, newerState);
   };
   return wrapped;
 };
@@ -2706,7 +2784,6 @@ const commandMap = {
   'KeyBindings.focusNext': wrapCommand(focusNext),
   'KeyBindings.focusPrevious': wrapCommand(focusPrevious),
   'KeyBindings.getCommandIds': getCommandIds,
-  'KeyBindings.getDom': getKeyBindingsVirtualDom,
   'KeyBindings.getKeyBindings': getKeyBindings$1,
   'KeyBindings.getMenuEntries': getMenuEntries,
   'KeyBindings.handleClick': wrapCommand(handleClick),