DevTools: wire add folder to workspace through the action system.

Change-Id: I12c8ed2052b171ab91658fd9f734117f18fc826b
Reviewed-on: https://chromium-review.googlesource.com/c/1354688Reviewed-by: Dmitry Gozman <dgozman@chromium.org>
Commit-Queue: Pavel Feldman <pfeldman@chromium.org>
Cr-Commit-Position: refs/heads/master@{#612547}

third_party/blink/renderer/devtools/front_end/elements/StylesSidebarPane.js

@@ -628,7 +628,7 @@ Elements.StylesSidebarPane = class extends Elements.ElementsSidebarPane {
     filterContainerElement.appendChild(filterInput);
     const toolbar = new UI.Toolbar('styles-pane-toolbar', hbox);
     toolbar.makeToggledGray();
-    toolbar.appendLocationItems('styles-sidebarpane-toolbar');
+    toolbar.appendItemsAtLocation('styles-sidebarpane-toolbar');
     const toolbarPaneContainer = container.createChild('div', 'styles-sidebar-toolbar-pane-container');
     const toolbarPaneContent = toolbarPaneContainer.createChild('div', 'styles-sidebar-toolbar-pane');
 

third_party/blink/renderer/devtools/front_end/sources/NavigatorView.js

@@ -113,18 +113,6 @@ Sources.NavigatorView = class extends UI.VBox {
     return order;
   }
 
-  /**
-   * @param {!UI.ContextMenu} contextMenu
-   */
-  static appendAddFolderItem(contextMenu) {
-    function addFolder() {
-      Persistence.isolatedFileSystemManager.addFileSystem();
-    }
-
-    const addFolderLabel = Common.UIString('Add folder to workspace');
-    contextMenu.defaultSection().appendItem(addFolderLabel, addFolder);
-  }
-
   /**
    * @param {!UI.ContextMenu} contextMenu
    * @param {string=} path
@@ -753,7 +741,7 @@ Sources.NavigatorView = class extends UI.VBox {
     }
 
     if (project.type() === Workspace.projectTypes.FileSystem) {
-      Sources.NavigatorView.appendAddFolderItem(contextMenu);
+      contextMenu.defaultSection().appendAction('sources.add-folder-to-workspace', undefined, true);
       if (node instanceof Sources.NavigatorGroupTreeNode)
         contextMenu.defaultSection().appendItem(Common.UIString('Remove folder from workspace'), removeFolder);
     }

third_party/blink/renderer/devtools/front_end/sources/SourcesNavigator.js

@@ -81,12 +81,10 @@ Sources.FilesNavigatorView = class extends Sources.NavigatorView {
   constructor() {
     super();
     const toolbar = new UI.Toolbar('navigator-toolbar');
-    const title = Common.UIString('Add folder to workspace');
-    const addButton = new UI.ToolbarButton(title, 'largeicon-add', title);
-    addButton.addEventListener(
-        UI.ToolbarButton.Events.Click, () => Persistence.isolatedFileSystemManager.addFileSystem());
-    toolbar.appendToolbarItem(addButton);
-    this.contentElement.insertBefore(toolbar.element, this.contentElement.firstChild);
+    toolbar.appendItemsAtLocation('files-navigator-toolbar').then(() => {
+      if (!toolbar.empty())
+        this.contentElement.insertBefore(toolbar.element, this.contentElement.firstChild);
+    });
   }
 
   /**
@@ -106,7 +104,7 @@ Sources.FilesNavigatorView = class extends Sources.NavigatorView {
    */
   handleContextMenu(event) {
     const contextMenu = new UI.ContextMenu(event);
-    Sources.NavigatorView.appendAddFolderItem(contextMenu);
+    contextMenu.defaultSection().appendAction('sources.add-folder-to-workspace', undefined, true);
     contextMenu.show();
   }
 };
@@ -263,7 +261,7 @@ Sources.SnippetsNavigatorView = class extends Sources.NavigatorView {
 /**
  * @implements {UI.ActionDelegate}
  */
-Sources.SnippetsNavigatorView.CreatingActionDelegate = class {
+Sources.ActionDelegate = class {
   /**
    * @override
    * @param {!UI.Context} context

third_party/blink/renderer/devtools/front_end/sources/module.json

@@ -693,15 +693,24 @@
             "type": "action",
             "category": "Sources",
             "actionId": "sources.create-snippet",
-            "className": "Sources.SnippetsNavigatorView.CreatingActionDelegate",
+            "className": "Sources.ActionDelegate",
             "title": "Create new snippet"
         },
         {
             "type": "action",
             "category": "Sources",
             "actionId": "sources.add-folder-to-workspace",
-            "className": "Sources.SnippetsNavigatorView.CreatingActionDelegate",
-            "title": "Add folder to workspace"
+            "className": "Sources.ActionDelegate",
+            "iconClass": "largeicon-add",
+            "title": "Add folder to workspace",
+            "condition": "!sources.hide_add_folder"
+        },
+        {
+            "type": "@UI.ToolbarItem.Provider",
+            "actionId": "sources.add-folder-to-workspace",
+            "location": "files-navigator-toolbar",
+            "showLabel": true,
+            "condition": "!sources.hide_add_folder"
         },
         {
             "type": "@UI.ViewLocationResolver",

third_party/blink/renderer/devtools/front_end/ui/ContextMenu.js

@@ -145,11 +145,13 @@ UI.ContextMenuSection = class {
   /**
    * @param {string} actionId
    * @param {string=} label
+   * @param {boolean=} optional
    */
-  appendAction(actionId, label) {
+  appendAction(actionId, label, optional) {
     const action = UI.actionRegistry.action(actionId);
     if (!action) {
-      console.error(`Action ${actionId} was not defined`);
+      if (!optional)
+        console.error(`Action ${actionId} was not defined`);
       return;
     }
     if (!label)

third_party/blink/renderer/devtools/front_end/ui/InspectorView.js

@@ -138,8 +138,8 @@ UI.InspectorView = class extends UI.VBox {
   }
 
   createToolbars() {
-    this._tabbedPane.leftToolbar().appendLocationItems('main-toolbar-left');
-    this._tabbedPane.rightToolbar().appendLocationItems('main-toolbar-right');
+    this._tabbedPane.leftToolbar().appendItemsAtLocation('main-toolbar-left');
+    this._tabbedPane.rightToolbar().appendItemsAtLocation('main-toolbar-right');
   }
 
   /**

third_party/blink/renderer/devtools/front_end/ui/Toolbar.js

@@ -52,10 +52,13 @@ UI.Toolbar = class {
    * @param {!UI.Action} action
    * @param {!Array<!UI.ToolbarButton>=} toggledOptions
    * @param {!Array<!UI.ToolbarButton>=} untoggledOptions
+   * @param {boolean=} showLabel
    * @return {!UI.ToolbarToggle}
    */
-  static createActionButton(action, toggledOptions, untoggledOptions) {
+  static createActionButton(action, toggledOptions, untoggledOptions, showLabel) {
     const button = new UI.ToolbarToggle(action.title(), action.icon(), action.toggledIcon());
+    if (showLabel)
+      button.setText(action.title());
     button.setToggleWithRedColor(action.toggleWithRedColor());
     button.addEventListener(UI.ToolbarButton.Events.Click, action.execute, action);
     action.addEventListener(UI.Action.Events.Enabled, enabledChanged);
@@ -185,11 +188,13 @@ UI.Toolbar = class {
 
   /**
    * @param {string} actionId
+   * @param {boolean=} showLabel
    * @return {!UI.ToolbarToggle}
    */
-  static createActionButtonForId(actionId) {
+  static createActionButtonForId(actionId, showLabel) {
     const action = UI.actionRegistry.action(actionId);
-    return UI.Toolbar.createActionButton(/** @type {!UI.Action} */ (action));
+    return UI.Toolbar.createActionButton(
+        /** @type {!UI.Action} */ (action), undefined, undefined, showLabel);
   }
 
   /**
@@ -224,6 +229,13 @@ UI.Toolbar = class {
     this._contentElement.classList.add('toolbar-render-as-links');
   }
 
+  /**
+   * @return {boolean}
+   */
+  empty() {
+    return !this._items.length;
+  }
+
   /**
    * @param {boolean} enabled
    */
@@ -315,50 +327,20 @@ UI.Toolbar = class {
 
   /**
    * @param {string} location
+   * @return {!Promise}
    */
-  appendLocationItems(location) {
+  async appendItemsAtLocation(location) {
     const extensions = self.runtime.extensions(UI.ToolbarItem.Provider);
-    const promises = [];
-    for (let i = 0; i < extensions.length; ++i) {
-      if (extensions[i].descriptor()['location'] === location)
-        promises.push(resolveItem(extensions[i]));
-    }
-    Promise.all(promises).then(appendItemsInOrder.bind(this));
-
-    /**
-     * @param {!Runtime.Extension} extension
-     * @return {!Promise<?UI.ToolbarItem>}
-     */
-    function resolveItem(extension) {
+    const filtered = extensions.filter(e => e.descriptor()['location'] === location);
+    const items = await Promise.all(filtered.map(extension => {
       const descriptor = extension.descriptor();
       if (descriptor['separator'])
-        return Promise.resolve(/** @type {?UI.ToolbarItem} */ (new UI.ToolbarSeparator()));
-      if (descriptor['actionId']) {
-        return Promise.resolve(
-            /** @type {?UI.ToolbarItem} */ (UI.Toolbar.createActionButtonForId(descriptor['actionId'])));
-      }
-      return extension.instance().then(fetchItemFromProvider);
-
-      /**
-       * @param {!Object} provider
-       * @return {?UI.ToolbarItem}
-       */
-      function fetchItemFromProvider(provider) {
-        return /** @type {!UI.ToolbarItem.Provider} */ (provider).item();
-      }
-    }
-
-    /**
-     * @param {!Array.<?UI.ToolbarItem>} items
-     * @this {UI.Toolbar}
-     */
-    function appendItemsInOrder(items) {
-      for (let i = 0; i < items.length; ++i) {
-        const item = items[i];
-        if (item)
-          this.appendToolbarItem(item);
-      }
-    }
+        return new UI.ToolbarSeparator();
+      if (descriptor['actionId'])
+        return UI.Toolbar.createActionButtonForId(descriptor['actionId'], descriptor['showLabel']);
+      return extension.instance().then(p => p.item());
+    }));
+    items.filter(item => item).forEach(item => this.appendToolbarItem(item));
   }
 };