[GM3Restyling] Update Sources empty state

Before: https://i.imgur.com/6EpbdAN.png
After: https://i.imgur.com/eYALTcc.png
Bug: 325443331
Change-Id: I5cd7567783b4ae7f7b8ea1edcbb9792c5aafd623
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6190541
Reviewed-by: Kateryna Prokopenko <[email protected]>
Commit-Queue: Kim-Anh Tran <[email protected]>

Author: ktran

front_end/panels/sources/SourcesView.ts

@@ -12,6 +12,7 @@ import * as SDK from '../../core/sdk/sdk.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as Persistence from '../../models/persistence/persistence.js';
 import * as Workspace from '../../models/workspace/workspace.js';
+import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as QuickOpen from '../../ui/legacy/components/quick_open/quick_open.js';
 import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -145,45 +146,53 @@ export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typ
   }
 
   private placeholderElement(): Element {
+    const placeholder = document.createElement('div');
+
+    const workspaceElement = placeholder.createChild('div', 'tabbed-pane-placeholder-row');
+    workspaceElement.classList.add('workspace');
+
+    const icon = IconButton.Icon.create('sync', 'sync-icon');
+    workspaceElement.createChild('span', 'icon-container').appendChild(icon);
+    const text = workspaceElement.createChild('span');
+    text.textContent = UIStrings.workspaceDropInAFolderToSyncSources;
+    const browseButton = text.createChild('button');
+    browseButton.textContent = i18nString(UIStrings.selectFolder);
+    browseButton.addEventListener('click', this.addFileSystemClicked.bind(this));
+
     const shortcuts = [
       {actionId: 'quick-open.show', description: i18nString(UIStrings.openFile)},
       {actionId: 'quick-open.show-command-menu', description: i18nString(UIStrings.runCommand)},
-      {
-        actionId: 'sources.add-folder-to-workspace',
-        description: i18nString(UIStrings.workspaceDropInAFolderToSyncSources),
-        isWorkspace: true,
-      },
     ];
 
-    const list = document.createElement('div');
+    const list = placeholder.createChild('div', 'shortcuts-list');
+    list.classList.add('tabbed-pane-placeholder-row');
     UI.ARIAUtils.markAsList(list);
     UI.ARIAUtils.setLabel(list, i18nString(UIStrings.sourceViewActions));
 
     for (const shortcut of shortcuts) {
-      const shortcutKeyText = UI.ShortcutRegistry.ShortcutRegistry.instance().shortcutTitleForAction(shortcut.actionId);
-      const listItemElement = list.createChild('div', 'tabbed-pane-placeholder-row');
+      const shortcutKeys = UI.ShortcutRegistry.ShortcutRegistry.instance().shortcutsForAction(shortcut.actionId);
+      const listItemElement = list.createChild('div');
+      listItemElement.classList.add('shortcut-line');
+
       UI.ARIAUtils.markAsListitem(listItemElement);
-      if (shortcutKeyText) {
-        const title = listItemElement.createChild('span');
-        title.textContent = shortcutKeyText;
 
+      // Take the first shortcut for display.
+      if (shortcutKeys && shortcutKeys[0]) {
         const button = listItemElement.createChild('button');
         button.textContent = shortcut.description;
         const action = UI.ActionRegistry.ActionRegistry.instance().getAction(shortcut.actionId);
         button.addEventListener('click', () => action.execute());
-      }
-
-      if (shortcut.isWorkspace) {
-        const workspace = listItemElement.createChild('span', 'workspace');
-        workspace.textContent = shortcut.description;
 
-        const browseButton = workspace.createChild('button');
-        browseButton.textContent = i18nString(UIStrings.selectFolder);
-        browseButton.addEventListener('click', this.addFileSystemClicked.bind(this));
+        const shortcutElement = listItemElement.createChild('span', 'shortcuts');
+        const separator = Host.Platform.isMac() ? '\u2004' : ' + ';
+        const keys = shortcutKeys[0].descriptors.flatMap(descriptor => descriptor.name.split(separator));
+        keys.forEach(key => {
+          shortcutElement.createChild('span', 'keybinds-key').createChild('span').textContent = key;
+        });
       }
     }
 
-    return list;
+    return placeholder;
   }
 
   private async addFileSystemClicked(): Promise<void> {

front_end/ui/legacy/tabbedPane.css

@@ -46,28 +46,79 @@
 }
 
 .tabbed-pane-placeholder {
-  font-size: 14px;
   text-align: center;
-  width: fit-content;
-  margin: 40px auto 0;
-  text-shadow: var(--color-background-opacity-80) 0 1px 0;
-  line-height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
 }
 
 .tabbed-pane-placeholder-row {
-  margin-inline: 10px;
-
-  & span {
-    display: inline-block;
-    padding-inline: 10px;
+  max-width: var(--sys-size-32);
+  min-width: var(--sys-size-28);
+  margin: 0 var(--sys-size-8);
+
+  &.workspace {
+    display: inline-flex;
+    align-items: center;
+    border: var(--sys-size-2) dashed var(--sys-color-divider);
+    padding: var(--sys-size-8);
+    border-radius: var(--sys-shape-corner-medium);
+    margin-bottom: var(--sys-size-11);
+
+    > .icon-container {
+      flex-shrink: 0;
+      width: var(--sys-size-13);
+      height: var(--sys-size-13);
+      background: var(--sys-color-tonal-container);
+      align-content: center;
+      border-radius: var(--sys-shape-corner-full);
+      margin-right: var(--sys-size-8);
+
+      > devtools-icon {
+        color: var(--sys-color-on-tonal-container);
+      }
+    }
   }
 
-  &:has(.workspace) {
-    max-width: 400px;
-    border: 2px dashed var(--sys-color-neutral-outline);
-    margin-block-start: 20px;
-    padding: 10px;
-    margin-inline: 20px;
+  &.shortcuts-list {
+    padding: 0 var(--sys-size-6);
+
+    .shortcut-line {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      grid-column-gap: var(--sys-size-10);
+      padding: var(--sys-size-4) 0;
+
+      &:not(:last-child) {
+        border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
+      }
+
+      .shortcuts {
+        display: flex;
+        flex-direction: row;
+        gap: var(--sys-size-4);
+        align-items: center;
+      }
+
+      .keybinds-key {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: var(--sys-size-11);
+        min-width: var(--sys-size-11);
+        font: var(--sys-typescale-body5-medium);
+        white-space: nowrap;
+        border-radius: var(--sys-shape-corner-small);
+        background: var(--sys-color-tonal-container);
+        padding: 0 var(--sys-size-4);
+      }
+
+      & button {
+        margin-inline: 0;
+      }
+    }
   }
 
   & button {
@@ -77,7 +128,8 @@
     border: none;
     padding: 0;
     text-decoration: underline;
-    margin-inline: 5px;
+    margin-inline: var(--sys-size-3);
+    text-align: left;
 
     &:focus-visible {
       outline: 2px solid var(--sys-color-state-focus-ring);