[GM3Restyling] Update workspace settings page

Before: https://i.imgur.com/M7vIlO6.png
After: https://i.imgur.com/ywKVbZ4.png
Bug: 368238837
Change-Id: I793c6cfe0f62d8bcbe932ecdaf860fb39177ffbe
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5973211
Commit-Queue: Kim-Anh Tran <[email protected]>
Reviewed-by: Kateryna Prokopenko <[email protected]>

Author: ktran

front_end/models/persistence/BUILD.gn

@@ -41,6 +41,7 @@ devtools_module("persistence") {
     "../../models/breakpoints:bundle",
     "../../models/text_utils:bundle",
     "../../models/workspace:bundle",
+    "../../ui/components/cards:bundle",
     "../../ui/legacy:bundle",
     "../../ui/legacy/components/utils:bundle",
   ]

front_end/models/persistence/EditFileSystemView.ts

@@ -38,14 +38,18 @@ import {Events, IsolatedFileSystemManager} from './IsolatedFileSystemManager.js'
 import type {PlatformFileSystem} from './PlatformFileSystem.js';
 
 const UIStrings = {
+  /**
+   *@description Text in Edit File System View of the Workspace settings in Settings to indicate that the following string is a folder URL
+   */
+  url: 'URL',
   /**
    *@description Text in Edit File System View of the Workspace settings in Settings
    */
-  excludedFolders: 'Excluded folders',
+  excludedFolders: 'Excluded sub-folders',
   /**
    *@description Text to add something
    */
-  add: 'Add',
+  add: 'Add folder',
   /**
    * @description Placeholder text for an area of the UI that shows which folders have been excluded
    * from being show in DevTools. When the user has not yet chosen any folders to exclude, this text
@@ -91,13 +95,13 @@ export class EditFileSystemView extends UI.Widget.VBox implements UI.ListWidget.
       IsolatedFileSystemManager.instance().addEventListener(Events.ExcludedFolderRemoved, this.update, this),
     ];
 
-    const excludedFoldersHeader = this.contentElement.createChild('div', 'file-system-header');
-    excludedFoldersHeader.createChild('div', 'file-system-header-text').textContent =
-        i18nString(UIStrings.excludedFolders);
-    const addButton = UI.UIUtils.createTextButton(
-        i18nString(UIStrings.add), this.addExcludedFolderButtonClicked.bind(this),
-        {className: 'add-button', jslogContext: 'settings.add-excluded-folder'});
-    excludedFoldersHeader.appendChild(addButton);
+    const excludedFoldersHeader = this.contentElement.createChild('div', 'excluded-folder-header');
+    excludedFoldersHeader.createChild('span').textContent = i18nString(UIStrings.url);
+    excludedFoldersHeader.createChild('span', 'excluded-folder-url').textContent = fileSystemPath;
+
+    const excludeSubFoldersText = this.contentElement.createChild('span', 'exclude-subfolders-text');
+    excludeSubFoldersText.textContent = i18nString(UIStrings.excludedFolders);
+
     this.excludedFoldersList = new UI.ListWidget.ListWidget(this);
     this.excludedFoldersList.element.classList.add('file-system-list');
 
@@ -107,6 +111,12 @@ export class EditFileSystemView extends UI.Widget.VBox implements UI.ListWidget.
     this.excludedFoldersList.setEmptyPlaceholder(excludedFoldersPlaceholder);
     this.excludedFoldersList.show(this.contentElement);
 
+    const addButton = UI.UIUtils.createTextButton(
+        i18nString(UIStrings.add), this.addExcludedFolderButtonClicked.bind(this),
+        {className: 'add-button', jslogContext: 'settings.add-excluded-folder'});
+
+    this.contentElement.appendChild(addButton);
+
     this.update();
   }
 

front_end/models/persistence/WorkspaceSettingsTab.ts

@@ -4,6 +4,7 @@
 
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
+import * as Cards from '../../ui/components/cards/cards.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
@@ -27,11 +28,11 @@ const UIStrings = {
   /**
    *@description Text of the add button in Workspace Settings Tab of the Workspace settings in Settings
    */
-  addFolder: 'Add folder…',
+  addFolder: 'Add folder',
   /**
    *@description Label element text content in Workspace Settings Tab of the Workspace settings in Settings
    */
-  folderExcludePattern: 'Folder exclude pattern',
+  folderExcludePattern: 'Exclude from workspace',
   /**
    *@description Label for an item to remove something
    */
@@ -42,7 +43,7 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class WorkspaceSettingsTab extends UI.Widget.VBox {
   containerElement: HTMLElement;
-  private readonly fileSystemsListContainer: HTMLElement;
+  #addButtonContainer: HTMLElement;
   private readonly elementByPath: Map<Platform.DevToolsPath.UrlString, Element>;
   private readonly mappingViewByPath: Map<Platform.DevToolsPath.UrlString, EditFileSystemView>;
 
@@ -51,12 +52,9 @@ export class WorkspaceSettingsTab extends UI.Widget.VBox {
 
     this.element.setAttribute('jslog', `${VisualLogging.pane('workspace')}`);
 
-    this.element.classList.add('workspace-settings-tab');
-    const header = this.element.createChild('header');
-    UI.UIUtils.createTextChild(header.createChild('h1'), i18nString(UIStrings.workspace));
-
-    this.containerElement = this.element.createChild('div', 'settings-container-wrapper')
-                                .createChild('div', 'settings-tab settings-content settings-container');
+    this.containerElement =
+        this.contentElement.createChild('div', 'settings-card-container-wrapper').createChild('div');
+    this.containerElement.classList.add('settings-card-container');
 
     IsolatedFileSystemManager.instance().addEventListener(
         Events.FileSystemAdded, event => this.fileSystemAdded(event.data), this);
@@ -65,47 +63,52 @@ export class WorkspaceSettingsTab extends UI.Widget.VBox {
 
     const folderExcludePatternInput = this.createFolderExcludePatternInput();
     folderExcludePatternInput.classList.add('folder-exclude-pattern');
-    this.containerElement.appendChild(folderExcludePatternInput);
-
-    const div = this.containerElement.createChild('div', 'settings-info-message');
-    UI.UIUtils.createTextChild(div, i18nString(UIStrings.mappingsAreInferredAutomatically));
+    const mappingsAreInferredInfo = document.createElement('div');
+    mappingsAreInferredInfo.classList.add('mappings-info');
+    UI.UIUtils.createTextChild(mappingsAreInferredInfo, i18nString(UIStrings.mappingsAreInferredAutomatically));
 
-    this.fileSystemsListContainer = this.containerElement.createChild('div', '');
-
-    const addButton = UI.UIUtils.createTextButton(
-        i18nString(UIStrings.addFolder), this.addFileSystemClicked.bind(this),
-        {jslogContext: 'sources.add-folder-to-workspace'});
-    this.containerElement.appendChild(addButton);
-    this.setDefaultFocusedElement(addButton);
+    const card = new Cards.Card.Card();
+    this.containerElement.appendChild(card);
+    card.data = {
+      heading: i18nString(UIStrings.workspace),
+      content: [folderExcludePatternInput, mappingsAreInferredInfo],
+    };
 
     this.elementByPath = new Map();
-
     this.mappingViewByPath = new Map();
 
     const fileSystems = IsolatedFileSystemManager.instance().fileSystems();
     for (let i = 0; i < fileSystems.length; ++i) {
       this.addItem(fileSystems[i]);
     }
+
+    this.#addButtonContainer = this.containerElement.createChild('div', 'add-button-container');
+    const addButton = UI.UIUtils.createTextButton(
+        i18nString(UIStrings.addFolder), this.addFileSystemClicked.bind(this),
+        {jslogContext: 'sources.add-folder-to-workspace'});
+    addButton.classList.add('add-folder');
+    this.#addButtonContainer.appendChild(addButton);
   }
 
   override wasShown(): void {
     super.wasShown();
     this.registerCSSFiles([workspaceSettingsTabStyles]);
   }
 
-  private createFolderExcludePatternInput(): Element {
-    const p = document.createElement('p');
-    const labelElement = p.createChild('label');
+  private createFolderExcludePatternInput(): HTMLElement {
+    const excludePatternElement = document.createElement('div');
+    excludePatternElement.classList.add('folder-exclude-pattern');
+    const labelElement = excludePatternElement.createChild('label');
     labelElement.textContent = i18nString(UIStrings.folderExcludePattern);
     const folderExcludeSetting = IsolatedFileSystemManager.instance().workspaceFolderExcludePatternSetting();
     const inputElement = UI.UIUtils.createInput('', 'text', folderExcludeSetting.name);
     UI.ARIAUtils.bindLabelToControl(labelElement, inputElement);
-    p.appendChild(inputElement);
+    excludePatternElement.appendChild(inputElement);
     const setValue =
         UI.UIUtils.bindInput(inputElement, folderExcludeSetting.set.bind(folderExcludeSetting), regexValidator, false);
     folderExcludeSetting.addChangeListener(() => setValue.call(null, folderExcludeSetting.get()));
     setValue(folderExcludeSetting.get());
-    return p;
+    return excludePatternElement;
 
     function regexValidator(value: string): {valid: boolean, errorMessage: (string|undefined)} {
       let regex;
@@ -129,41 +132,34 @@ export class WorkspaceSettingsTab extends UI.Widget.VBox {
             fileSystem) {
       return;
     }
-    const element = this.renderFileSystem(fileSystem);
-    this.elementByPath.set(fileSystem.path(), element);
-
-    this.fileSystemsListContainer.appendChild(element);
-
+    const filename = this.getFilename(fileSystem);
+    const removeButton = UI.UIUtils.createTextButton(
+        i18nString(UIStrings.remove), this.removeFileSystemClicked.bind(this, fileSystem),
+        {jslogContext: 'settings.remove-file-system'});
+
+    const mappingViewContainer = document.createElement('div');
+    mappingViewContainer.classList.add('mapping-view-container');
+    const fileSystemExcludeCard = new Cards.Card.Card();
+    this.containerElement.insertBefore(fileSystemExcludeCard, this.#addButtonContainer);
+    fileSystemExcludeCard.data = {
+      heading: filename,
+      headingIconName: 'folder',
+      headingSuffix: removeButton,
+      content: [mappingViewContainer],
+    };
     const mappingView = new EditFileSystemView(fileSystem.path());
     this.mappingViewByPath.set(fileSystem.path(), mappingView);
     mappingView.element.classList.add('file-system-mapping-view');
-    mappingView.show(element);
+
+    mappingView.show(mappingViewContainer);
+
+    this.elementByPath.set(fileSystem.path(), fileSystemExcludeCard);
   }
 
-  private renderFileSystem(fileSystem: PlatformFileSystem): Element {
+  private getFilename(fileSystem: PlatformFileSystem): string {
     const fileSystemPath = fileSystem.path();
     const lastIndexOfSlash = fileSystemPath.lastIndexOf('/');
-    const folderName = fileSystemPath.substr(lastIndexOfSlash + 1);
-
-    const element = document.createElement('div');
-    element.classList.add('file-system-container');
-    const header = element.createChild('div', 'file-system-header');
-
-    const nameElement = header.createChild('div', 'file-system-name');
-    nameElement.textContent = folderName;
-    UI.ARIAUtils.markAsHeading(nameElement, 2);
-    const path = header.createChild('div', 'file-system-path');
-    path.textContent = fileSystemPath;
-    UI.Tooltip.Tooltip.install(path, fileSystemPath);
-
-    const toolbar = new UI.Toolbar.Toolbar('');
-    const button =
-        new UI.Toolbar.ToolbarButton(i18nString(UIStrings.remove), 'cross', undefined, 'settings.remove-file-system');
-    button.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, this.removeFileSystemClicked.bind(this, fileSystem));
-    toolbar.appendToolbarItem(button);
-    header.appendChild(toolbar.element);
-
-    return element;
+    return fileSystemPath.substr(lastIndexOfSlash + 1);
   }
 
   private removeFileSystemClicked(fileSystem: PlatformFileSystem): void {

front_end/models/persistence/editFileSystemView.css

@@ -4,20 +4,32 @@
  * found in the LICENSE file.
  */
 
-.file-system-header {
+.excluded-folder-header {
   display: flex;
-  flex-direction: row;
-  align-items: center;
-  flex: auto;
-  margin: 10px 0;
+  flex-direction: column;
+  height: var(--sys-size-16);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
+  padding: var(--sys-size-5) var(--sys-size-6);
+
+  & > .excluded-folder-url {
+    color: var(--sys-color-on-surface-subtle);
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 }
 
-.file-system-header-text {
-  flex: 1 0 auto;
+.exclude-subfolders-text, .file-system-list-empty {
+  padding: 0 var(--sys-size-6);
+  height: var(--sys-size-13);
+}
+
+.exclude-subfolders-text {
+  align-items: center;
+  display: flex;
 }
 
 .add-button {
-  margin-left: 10px;
+  padding: var(--sys-size-4) var(--sys-size-6);
   align-self: flex-start;
 }
 
@@ -26,17 +38,12 @@
 }
 
 .file-system-list-empty {
-  flex: auto;
-  height: 30px;
   display: flex;
   align-items: center;
-  justify-content: center;
-  text-align: center;
 }
 
 .file-system-list-item {
-  padding: 3px 5px;
-  height: 30px;
+  height: var(--sys-size-13);
   display: flex;
   align-items: center;
   flex: auto 1 1;
@@ -46,6 +53,18 @@
   flex: 1 1 0;
 }
 
+.list {
+  border: none;
+}
+
+.list-item {
+  padding: 0 var(--sys-size-6);
+}
+
+.editor-buttons {
+  padding: var(--sys-size-4) var(--sys-size-6);
+}
+
 .list-item .file-system-value {
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -57,7 +76,7 @@
   flex: none;
   display: flex;
   flex-direction: row;
-  margin: 6px 5px;
+  margin: var(--sys-size-4) var(--sys-size-6);
   align-items: center;
 }