chore: update icon font (#26627)

packages/trace-viewer/src/ui/workbench.tsx

@@ -181,24 +181,20 @@ export const Workbench: React.FunctionComponent<{
           selectedTab={selectedPropertiesTab}
           setSelectedTab={selectPropertiesTab}
           leftToolbar={[
-            <ToolbarButton title='Pick locator' toggled={isInspecting} onClick={() => {
+            <ToolbarButton title='Pick locator' icon='target' toggled={isInspecting} onClick={() => {
               if (!isInspecting)
                 selectPropertiesTab('inspector');
               setIsInspecting(!isInspecting);
-            }}>
+            }} />
-              <svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 -960 960 960" width="20"><path d="M444-48v-98q-121-14-202.5-96T146-444H48v-72h98q14-120 95.5-202T444-814v-98h72v98q121 14 202.5 96T814-516h98v72h-98q-14 120-95.5 202T516-146v98h-72Zm36-168q110 0 187-77t77-187q0-110-77-187t-187-77q-110 0-187 77t-77 187q0 110 77 187t187 77Zm0-120q-60 0-102-42t-42-102q0-60 42-102t102-42q60 0 102 42t42 102q0 60-42 102t-102 42Z"/></svg>
-            </ToolbarButton>
           ]}
           rightToolbar={[
-            sidebarLocation === 'bottom' ? <ToolbarButton title='Dock to right' onClick={() => {
+            sidebarLocation === 'bottom' ?
-              setSidebarLocation('right');
+              <ToolbarButton title='Dock to right' icon='layout-sidebar-right-off' onClick={() => {
-            }}>
+                setSidebarLocation('right');
-              <svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 -960 960 960" width="20"><path d="M211-144q-27.637 0-47.319-19.681Q144-183.363 144-211v-538q0-27.638 19.681-47.319Q183.363-816 211-816h538q27.638 0 47.319 19.681T816-749v538q0 27.637-19.681 47.319Q776.638-144 749-144H211Zm413-72h120v-528H624v528Zm-72 0v-528H216v528h336Zm72 0h120-120Z"/></svg>
+              }} /> :
-            </ToolbarButton> : <ToolbarButton title='Dock to bottom' onClick={() => {
+              <ToolbarButton title='Dock to bottom' icon='layout-panel-off' onClick={() => {
-              setSidebarLocation('bottom');
+                setSidebarLocation('bottom');
-            }}>
+              }} />
-              <svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 -960 960 960" width="20"><path d="M211-144q-27.637 0-47.319-19.681Q144-183.363 144-211v-538q0-27.638 19.681-47.319Q183.363-816 211-816h538q27.638 0 47.319 19.681T816-749v538q0 27.637-19.681 47.319Q776.638-144 749-144H211Zm5-192v120h528v-120H216Zm0-72h528v-336H216v336Zm0 72v120-120Z"/></svg>
-            </ToolbarButton>
           ]}
         />
       </SplitView>

packages/web/src/components/tabbedPane.tsx

@@ -35,9 +35,9 @@ export const TabbedPane: React.FunctionComponent<{
   return <div className='tabbed-pane'>
     <div className='vbox'>
       <Toolbar>
-        <div style={{ flex: 'none', display: 'flex', height: '100%' }}>
+        { leftToolbar && <div style={{ flex: 'none', display: 'flex', margin: '0 4px' }}>
-          {...leftToolbar || []}
+          {...leftToolbar}
-        </div>
+        </div>}
         <div style={{ flex: 'auto', display: 'flex', height: '100%', overflow: 'hidden' }}>
           {[...tabs.map(tab => (
             <TabbedPaneTab
@@ -48,9 +48,9 @@ export const TabbedPane: React.FunctionComponent<{
             ></TabbedPaneTab>)),
           ]}
         </div>
-        <div style={{ flex: 'none', display: 'flex', height: '100%' }}>
+        {rightToolbar && <div style={{ flex: 'none', display: 'flex' }}>
-          {...rightToolbar || []}
+          {...rightToolbar}
-        </div>
+        </div>}
       </Toolbar>
       {
         tabs.map(tab => {

packages/web/src/third_party/vscode/codicon.css

@@ -42,7 +42,6 @@
 .codicon-tag-add:before { content: '\ea66'; }
 .codicon-tag-remove:before { content: '\ea66'; }
 .codicon-person:before { content: '\ea67'; }
-.codicon-person-add:before { content: '\ea67'; }
 .codicon-person-follow:before { content: '\ea67'; }
 .codicon-person-outline:before { content: '\ea67'; }
 .codicon-person-filled:before { content: '\ea67'; }
@@ -186,6 +185,7 @@
 .codicon-check:before { content: '\eab2'; }
 .codicon-checklist:before { content: '\eab3'; }
 .codicon-chevron-down:before { content: '\eab4'; }
+.codicon-drop-down-button:before { content: '\eab4'; }
 .codicon-chevron-left:before { content: '\eab5'; }
 .codicon-chevron-right:before { content: '\eab6'; }
 .codicon-chevron-up:before { content: '\eab7'; }
@@ -193,6 +193,7 @@
 .codicon-chrome-maximize:before { content: '\eab9'; }
 .codicon-chrome-minimize:before { content: '\eaba'; }
 .codicon-chrome-restore:before { content: '\eabb'; }
+.codicon-circle:before { content: '\eabc'; }
 .codicon-circle-outline:before { content: '\eabc'; }
 .codicon-debug-breakpoint-unverified:before { content: '\eabc'; }
 .codicon-circle-slash:before { content: '\eabd'; }
@@ -270,12 +271,13 @@
 .codicon-horizontal-rule:before { content: '\eb07'; }
 .codicon-hubot:before { content: '\eb08'; }
 .codicon-inbox:before { content: '\eb09'; }
-.codicon-issue-closed:before { content: '\eb0a'; }
+.codicon-issue-closed:before { content: '\eba4'; }
 .codicon-issue-reopened:before { content: '\eb0b'; }
 .codicon-issues:before { content: '\eb0c'; }
 .codicon-italic:before { content: '\eb0d'; }
 .codicon-jersey:before { content: '\eb0e'; }
 .codicon-json:before { content: '\eb0f'; }
+.codicon-bracket:before { content: '\eb0f'; }
 .codicon-kebab-vertical:before { content: '\eb10'; }
 .codicon-key:before { content: '\eb11'; }
 .codicon-law:before { content: '\eb12'; }
@@ -353,6 +355,7 @@
 .codicon-star-half:before { content: '\eb5a'; }
 .codicon-symbol-class:before { content: '\eb5b'; }
 .codicon-symbol-color:before { content: '\eb5c'; }
+.codicon-symbol-customcolor:before { content: '\eb5c'; }
 .codicon-symbol-constant:before { content: '\eb5d'; }
 .codicon-symbol-enum-member:before { content: '\eb5e'; }
 .codicon-symbol-field:before { content: '\eb5f'; }
@@ -402,6 +405,7 @@
 .codicon-debug-breakpoint-function:before { content: '\eb88'; }
 .codicon-debug-breakpoint-function-disabled:before { content: '\eb88'; }
 .codicon-debug-stackframe-active:before { content: '\eb89'; }
+.codicon-circle-small-filled:before { content: '\eb8a'; }
 .codicon-debug-stackframe-dot:before { content: '\eb8a'; }
 .codicon-debug-stackframe:before { content: '\eb8b'; }
 .codicon-debug-stackframe-focused:before { content: '\eb8b'; }
@@ -440,3 +444,103 @@
 .codicon-export:before { content: '\ebac'; }
 .codicon-graph-left:before { content: '\ebad'; }
 .codicon-magnet:before { content: '\ebae'; }
+.codicon-notebook:before { content: '\ebaf'; }
+.codicon-redo:before { content: '\ebb0'; }
+.codicon-check-all:before { content: '\ebb1'; }
+.codicon-pinned-dirty:before { content: '\ebb2'; }
+.codicon-pass-filled:before { content: '\ebb3'; }
+.codicon-circle-large-filled:before { content: '\ebb4'; }
+.codicon-circle-large:before { content: '\ebb5'; }
+.codicon-circle-large-outline:before { content: '\ebb5'; }
+.codicon-combine:before { content: '\ebb6'; }
+.codicon-gather:before { content: '\ebb6'; }
+.codicon-table:before { content: '\ebb7'; }
+.codicon-variable-group:before { content: '\ebb8'; }
+.codicon-type-hierarchy:before { content: '\ebb9'; }
+.codicon-type-hierarchy-sub:before { content: '\ebba'; }
+.codicon-type-hierarchy-super:before { content: '\ebbb'; }
+.codicon-git-pull-request-create:before { content: '\ebbc'; }
+.codicon-run-above:before { content: '\ebbd'; }
+.codicon-run-below:before { content: '\ebbe'; }
+.codicon-notebook-template:before { content: '\ebbf'; }
+.codicon-debug-rerun:before { content: '\ebc0'; }
+.codicon-workspace-trusted:before { content: '\ebc1'; }
+.codicon-workspace-untrusted:before { content: '\ebc2'; }
+.codicon-workspace-unspecified:before { content: '\ebc3'; }
+.codicon-terminal-cmd:before { content: '\ebc4'; }
+.codicon-terminal-debian:before { content: '\ebc5'; }
+.codicon-terminal-linux:before { content: '\ebc6'; }
+.codicon-terminal-powershell:before { content: '\ebc7'; }
+.codicon-terminal-tmux:before { content: '\ebc8'; }
+.codicon-terminal-ubuntu:before { content: '\ebc9'; }
+.codicon-terminal-bash:before { content: '\ebca'; }
+.codicon-arrow-swap:before { content: '\ebcb'; }
+.codicon-copy:before { content: '\ebcc'; }
+.codicon-person-add:before { content: '\ebcd'; }
+.codicon-filter-filled:before { content: '\ebce'; }
+.codicon-wand:before { content: '\ebcf'; }
+.codicon-debug-line-by-line:before { content: '\ebd0'; }
+.codicon-inspect:before { content: '\ebd1'; }
+.codicon-layers:before { content: '\ebd2'; }
+.codicon-layers-dot:before { content: '\ebd3'; }
+.codicon-layers-active:before { content: '\ebd4'; }
+.codicon-compass:before { content: '\ebd5'; }
+.codicon-compass-dot:before { content: '\ebd6'; }
+.codicon-compass-active:before { content: '\ebd7'; }
+.codicon-azure:before { content: '\ebd8'; }
+.codicon-issue-draft:before { content: '\ebd9'; }
+.codicon-git-pull-request-closed:before { content: '\ebda'; }
+.codicon-git-pull-request-draft:before { content: '\ebdb'; }
+.codicon-debug-all:before { content: '\ebdc'; }
+.codicon-debug-coverage:before { content: '\ebdd'; }
+.codicon-run-errors:before { content: '\ebde'; }
+.codicon-folder-library:before { content: '\ebdf'; }
+.codicon-debug-continue-small:before { content: '\ebe0'; }
+.codicon-beaker-stop:before { content: '\ebe1'; }
+.codicon-graph-line:before { content: '\ebe2'; }
+.codicon-graph-scatter:before { content: '\ebe3'; }
+.codicon-pie-chart:before { content: '\ebe4'; }
+.codicon-bracket-dot:before { content: '\ebe5'; }
+.codicon-bracket-error:before { content: '\ebe6'; }
+.codicon-lock-small:before { content: '\ebe7'; }
+.codicon-azure-devops:before { content: '\ebe8'; }
+.codicon-verified-filled:before { content: '\ebe9'; }
+.codicon-newline:before { content: '\ebea'; }
+.codicon-layout:before { content: '\ebeb'; }
+.codicon-layout-activitybar-left:before { content: '\ebec'; }
+.codicon-layout-activitybar-right:before { content: '\ebed'; }
+.codicon-layout-panel-left:before { content: '\ebee'; }
+.codicon-layout-panel-center:before { content: '\ebef'; }
+.codicon-layout-panel-justify:before { content: '\ebf0'; }
+.codicon-layout-panel-right:before { content: '\ebf1'; }
+.codicon-layout-panel:before { content: '\ebf2'; }
+.codicon-layout-sidebar-left:before { content: '\ebf3'; }
+.codicon-layout-sidebar-right:before { content: '\ebf4'; }
+.codicon-layout-statusbar:before { content: '\ebf5'; }
+.codicon-layout-menubar:before { content: '\ebf6'; }
+.codicon-layout-centered:before { content: '\ebf7'; }
+.codicon-layout-sidebar-right-off:before { content: '\ec00'; }
+.codicon-layout-panel-off:before { content: '\ec01'; }
+.codicon-layout-sidebar-left-off:before { content: '\ec02'; }
+.codicon-target:before { content: '\ebf8'; }
+.codicon-indent:before { content: '\ebf9'; }
+.codicon-record-small:before { content: '\ebfa'; }
+.codicon-error-small:before { content: '\ebfb'; }
+.codicon-arrow-circle-down:before { content: '\ebfc'; }
+.codicon-arrow-circle-left:before { content: '\ebfd'; }
+.codicon-arrow-circle-right:before { content: '\ebfe'; }
+.codicon-arrow-circle-up:before { content: '\ebff'; }
+.codicon-heart-filled:before { content: '\ec04'; }
+.codicon-map:before { content: '\ec05'; }
+.codicon-map-filled:before { content: '\ec06'; }
+.codicon-circle-small:before { content: '\ec07'; }
+.codicon-bell-slash:before { content: '\ec08'; }
+.codicon-bell-slash-dot:before { content: '\ec09'; }
+.codicon-comment-unresolved:before { content: '\ec0a'; }
+.codicon-git-pull-request-go-to-changes:before { content: '\ec0b'; }
+.codicon-git-pull-request-new-changes:before { content: '\ec0c'; }
+.codicon-search-fuzzy:before { content: '\ec0d'; }
+.codicon-comment-draft:before { content: '\ec0e'; }
+.codicon-send:before { content: '\ec0f'; }
+.codicon-sparkle:before { content: '\ec10'; }
+.codicon-insert:before { content: '\ec11'; }