DevTools: split Sources tree into Network and Filesystem trees.

BUG=649837

Review-Url: https://codereview.chromium.org/2384783003
Cr-Commit-Position: refs/heads/master@{#422640}

third_party/WebKit/LayoutTests/inspector/sources/debugger-ui/scripts-panel.html

@@ -14,8 +14,10 @@ function test()
 
     function createNavigatorView()
     {
+        var workspace = WebInspector.workspace;
+        WebInspector.workspace = InspectorTest.testWorkspace;
         var navigatorView = new WebInspector.SourcesNavigatorView();
-        navigatorView._resetWorkspace(InspectorTest.testWorkspace);
+        WebInspector.workspace = workspace;
         navigatorView.show(WebInspector.inspectorView.element);
         return navigatorView;
     }

third_party/WebKit/Source/devtools/front_end/main/Main.js

@@ -92,6 +92,7 @@ WebInspector.Main.prototype = {
         Runtime.experiments.register("inspectTooltip", "Dark inspect element tooltip");
         Runtime.experiments.register("liveSASS", "Live SASS");
         Runtime.experiments.register("nodeDebugging", "Node debugging", true);
+        Runtime.experiments.register("persistence2", "Persistence 2.0", true);
         Runtime.experiments.register("privateScriptInspection", "Private script inspection");
         Runtime.experiments.register("requestBlocking", "Request blocking", true);
         Runtime.experiments.register("resolveVariableNames", "Resolve variable names");

third_party/WebKit/Source/devtools/front_end/persistence/Persistence.js

@@ -264,6 +264,16 @@ WebInspector.Persistence.prototype = {
         return uiSourceCode[WebInspector.Persistence._binding] || null;
     },
 
+    /**
+     * @param {!WebInspector.UISourceCode} uiSourceCode
+     * @return {?WebInspector.UISourceCode}
+     */
+    fileSystem: function(uiSourceCode)
+    {
+        var binding = this.binding(uiSourceCode);
+        return binding ? binding.fileSystem : null;
+    },
+
     /**
      * @param {string} filePath
      */

third_party/WebKit/Source/devtools/front_end/sources/NavigatorView.js

@@ -66,6 +66,7 @@ WebInspector.NavigatorView = function()
 
     WebInspector.targetManager.observeTargets(this);
     this._resetWorkspace(WebInspector.workspace);
+    this._workspace.uiSourceCodes().forEach(this._addUISourceCode.bind(this));
 }
 
 WebInspector.NavigatorView.Types = {
@@ -131,7 +132,7 @@ WebInspector.NavigatorView.appendAddFolderItem = function(contextMenu)
         WebInspector.isolatedFileSystemManager.addFileSystem();
     }
 
-    var addFolderLabel = WebInspector.UIString.capitalize("Add ^folder to ^workspace");
+    var addFolderLabel = WebInspector.UIString("Add folder to workspace");
     contextMenu.appendItem(addFolderLabel, addFolder);
 }
 
@@ -146,10 +147,10 @@ WebInspector.NavigatorView.appendSearchItem = function(contextMenu, path)
         WebInspector.AdvancedSearchView.openSearch("", path.trim());
     }
 
-    var searchLabel = WebInspector.UIString.capitalize("Search in ^folder");
+    var searchLabel = WebInspector.UIString("Search in folder");
     if (!path || !path.trim()) {
         path = "*";
-        searchLabel = WebInspector.UIString.capitalize("Search in ^all ^files");
+        searchLabel = WebInspector.UIString("Search in all files");
     }
     contextMenu.appendItem(searchLabel, searchPath);
 }
@@ -207,14 +208,6 @@ WebInspector.NavigatorView.prototype = {
         this._workspace.addEventListener(WebInspector.Workspace.Events.ProjectRemoved, this._projectRemoved.bind(this), this);
     },
 
-    wasShown: function()
-    {
-        if (this._loaded)
-            return;
-        this._loaded = true;
-        this._workspace.uiSourceCodes().forEach(this._addUISourceCode.bind(this));
-    },
-
     /**
      * @param {!WebInspector.UISourceCode} uiSourceCode
      * @return {boolean}
@@ -476,9 +469,6 @@ WebInspector.NavigatorView.prototype = {
      */
     revealUISourceCode: function(uiSourceCode, select)
     {
-        var binding = WebInspector.persistence.binding(uiSourceCode);
-        if (binding && binding.network === uiSourceCode)
-            uiSourceCode = binding.fileSystem;
         var node = this._uiSourceCodeNodes.get(uiSourceCode);
         if (!node)
             return;
@@ -557,9 +547,6 @@ WebInspector.NavigatorView.prototype = {
      */
     handleContextMenu: function(event)
     {
-        var contextMenu = new WebInspector.ContextMenu(event);
-        WebInspector.NavigatorView.appendAddFolderItem(contextMenu);
-        contextMenu.show();
     },
 
     /**
@@ -617,9 +604,9 @@ WebInspector.NavigatorView.prototype = {
         var project = uiSourceCode.project();
         if (project.type() === WebInspector.projectTypes.FileSystem) {
             var parentURL = uiSourceCode.parentURL();
-            contextMenu.appendItem(WebInspector.UIString.capitalize("Rename\u2026"), this._handleContextMenuRename.bind(this, uiSourceCode));
-            contextMenu.appendItem(WebInspector.UIString.capitalize("Make a ^copy\u2026"), this._handleContextMenuCreate.bind(this, project, parentURL, uiSourceCode));
-            contextMenu.appendItem(WebInspector.UIString.capitalize("Delete"), this._handleContextMenuDelete.bind(this, uiSourceCode));
+            contextMenu.appendItem(WebInspector.UIString("Rename\u2026"), this._handleContextMenuRename.bind(this, uiSourceCode));
+            contextMenu.appendItem(WebInspector.UIString("Make a copy\u2026"), this._handleContextMenuCreate.bind(this, project, parentURL, uiSourceCode));
+            contextMenu.appendItem(WebInspector.UIString("Delete"), this._handleContextMenuDelete.bind(this, uiSourceCode));
             contextMenu.appendSeparator();
         }
 
@@ -640,13 +627,11 @@ WebInspector.NavigatorView.prototype = {
         WebInspector.NavigatorView.appendSearchItem(contextMenu, path);
         contextMenu.appendSeparator();
 
-        if (project && project.type() === WebInspector.projectTypes.FileSystem) {
-            contextMenu.appendItem(WebInspector.UIString.capitalize("New ^file"), this._handleContextMenuCreate.bind(this, project, path));
-            if (node instanceof WebInspector.NavigatorFolderTreeNode)
-                contextMenu.appendItem(WebInspector.UIString.capitalize("Exclude ^folder"), this._handleContextMenuExclude.bind(this, project, path));
-        }
-        contextMenu.appendSeparator();
-        WebInspector.NavigatorView.appendAddFolderItem(contextMenu);
+        if (project.type() !== WebInspector.projectTypes.FileSystem)
+            return;
+
+        contextMenu.appendItem(WebInspector.UIString("New file"), this._handleContextMenuCreate.bind(this, project, path));
+        contextMenu.appendItem(WebInspector.UIString("Exclude folder"), this._handleContextMenuExclude.bind(this, project, path));
 
         function removeFolder()
         {
@@ -655,10 +640,10 @@ WebInspector.NavigatorView.prototype = {
                 project.remove();
         }
 
-        if (project && project.type() === WebInspector.projectTypes.FileSystem) {
-            var removeFolderLabel = WebInspector.UIString.capitalize("Remove ^folder from ^workspace");
-            contextMenu.appendItem(removeFolderLabel, removeFolder);
-        }
+        contextMenu.appendSeparator();
+        WebInspector.NavigatorView.appendAddFolderItem(contextMenu);
+        if (node instanceof WebInspector.NavigatorGroupTreeNode)
+            contextMenu.appendItem(WebInspector.UIString("Remove folder from workspace"), removeFolder);
 
         contextMenu.show();
     },
@@ -1363,7 +1348,7 @@ WebInspector.NavigatorUISourceCodeTreeNode.prototype = {
     {
         this.parent.populate();
         this.parent.treeNode().expand();
-        this._treeElement.reveal();
+        this._treeElement.reveal(true);
         if (select)
             this._treeElement.select(true);
     },

third_party/WebKit/Source/devtools/front_end/sources/SourcesNavigator.js

@@ -78,6 +78,104 @@ WebInspector.SourcesNavigatorView.prototype = {
             this.revealUISourceCode(uiSourceCode, true);
     },
 
+    /**
+     * @override
+     * @param {!Event} event
+     */
+    handleContextMenu: function(event)
+    {
+        var contextMenu = new WebInspector.ContextMenu(event);
+        WebInspector.NavigatorView.appendAddFolderItem(contextMenu);
+        contextMenu.show();
+    },
+
+    __proto__: WebInspector.NavigatorView.prototype
+}
+
+/**
+ * @constructor
+ * @extends {WebInspector.NavigatorView}
+ */
+WebInspector.NetworkNavigatorView = function()
+{
+    WebInspector.NavigatorView.call(this);
+    WebInspector.targetManager.addEventListener(WebInspector.TargetManager.Events.InspectedURLChanged, this._inspectedURLChanged, this);
+}
+
+WebInspector.NetworkNavigatorView.prototype = {
+    /**
+     * @override
+     * @param {!WebInspector.UISourceCode} uiSourceCode
+     * @return {boolean}
+     */
+    accept: function(uiSourceCode)
+    {
+        return uiSourceCode.project().type() === WebInspector.projectTypes.Network;
+    },
+
+    /**
+     * @param {!WebInspector.Event} event
+     */
+    _inspectedURLChanged: function(event)
+    {
+        var mainTarget = WebInspector.targetManager.mainTarget();
+        if (event.data !== mainTarget)
+            return;
+        var inspectedURL = mainTarget && mainTarget.inspectedURL();
+        if (!inspectedURL)
+            return
+        for (var node of this._uiSourceCodeNodes.valuesArray()) {
+            var uiSourceCode = node.uiSourceCode();
+            if (uiSourceCode.url() === inspectedURL)
+                this.revealUISourceCode(uiSourceCode, true);
+        }
+    },
+
+    /**
+     * @override
+     * @param {!WebInspector.UISourceCode} uiSourceCode
+     */
+    uiSourceCodeAdded: function(uiSourceCode)
+    {
+        var inspectedPageURL = WebInspector.targetManager.mainTarget().inspectedURL();
+        if (uiSourceCode.url() === inspectedPageURL)
+            this.revealUISourceCode(uiSourceCode, true);
+    },
+
+    __proto__: WebInspector.NavigatorView.prototype
+}
+
+/**
+ * @constructor
+ * @extends {WebInspector.NavigatorView}
+ */
+WebInspector.FilesNavigatorView = function()
+{
+    WebInspector.NavigatorView.call(this);
+}
+
+WebInspector.FilesNavigatorView.prototype = {
+    /**
+     * @override
+     * @param {!WebInspector.UISourceCode} uiSourceCode
+     * @return {boolean}
+     */
+    accept: function(uiSourceCode)
+    {
+        return uiSourceCode.project().type() === WebInspector.projectTypes.FileSystem;
+    },
+
+    /**
+     * @override
+     * @param {!Event} event
+     */
+    handleContextMenu: function(event)
+    {
+        var contextMenu = new WebInspector.ContextMenu(event);
+        WebInspector.NavigatorView.appendAddFolderItem(contextMenu);
+        contextMenu.show();
+    },
+
     __proto__: WebInspector.NavigatorView.prototype
 }
 
@@ -98,8 +196,6 @@ WebInspector.ContentScriptsNavigatorView.prototype = {
      */
     accept: function(uiSourceCode)
     {
-        if (!WebInspector.NavigatorView.prototype.accept(uiSourceCode))
-            return false;
         return uiSourceCode.project().type() === WebInspector.projectTypes.ContentScripts;
     },
 
@@ -123,8 +219,6 @@ WebInspector.SnippetsNavigatorView.prototype = {
      */
     accept: function(uiSourceCode)
     {
-        if (!WebInspector.NavigatorView.prototype.accept(uiSourceCode))
-            return false;
         return uiSourceCode.project().type() === WebInspector.projectTypes.Snippets;
     },
 

third_party/WebKit/Source/devtools/front_end/sources/SourcesPanel.js

@@ -67,7 +67,6 @@ WebInspector.SourcesPanel = function()
     this._navigatorTabbedLocation = WebInspector.viewManager.createTabbedLocation(this._revealNavigatorSidebar.bind(this), "navigator-view", true);
     var tabbedPane = this._navigatorTabbedLocation.tabbedPane();
     tabbedPane.setMinimumSize(100, 25);
-    tabbedPane.setShrinkableTabs(true);
     tabbedPane.element.classList.add("navigator-tabbed-pane");
     var navigatorMenuButton = new WebInspector.ToolbarMenuButton(this._populateNavigatorMenu.bind(this), true);
     navigatorMenuButton.setTitle(WebInspector.UIString("More options"));
@@ -359,6 +358,10 @@ WebInspector.SourcesPanel.prototype = {
      */
     _revealInNavigator: function(uiSourceCode, skipReveal)
     {
+        var binding = WebInspector.persistence.binding(uiSourceCode);
+        if (binding && binding.network === uiSourceCode)
+            uiSourceCode = binding.fileSystem;
+
         var extensions = self.runtime.extensions(WebInspector.NavigatorView);
         Promise.all(extensions.map(extension => extension.instance())).then(filterNavigators.bind(this));
 

third_party/WebKit/Source/devtools/front_end/sources/TabbedEditorContainer.js

@@ -88,21 +88,24 @@ WebInspector.TabbedEditorContainer.prototype = {
     _onBindingCreated: function(event)
     {
         var binding = /** @type {!WebInspector.PersistenceBinding} */(event.data);
+        var networkTabId = this._tabIds.get(binding.network);
         var fileSystemTabId = this._tabIds.get(binding.fileSystem);
-        if (!fileSystemTabId)
-            return;
+        var wasSelectedInFileSystem = this._currentFile === binding.fileSystem;
+
+        if (fileSystemTabId) {
+            var tabIndex = this._tabbedPane.tabIndex(fileSystemTabId);
+            this._closeTabs([fileSystemTabId]);
+        }
 
-        var isSelected = this._currentFile === binding.fileSystem;
-        var tabIndex = this._tabbedPane.tabIndex(fileSystemTabId);
-        this._closeTabs([fileSystemTabId]);
-        var networkTabId = this._tabIds.get(binding.network);
         if (networkTabId) {
-            if (isSelected)
+            if (wasSelectedInFileSystem)
                 this._tabbedPane.selectTab(networkTabId, false);
+            this._tabbedPane.changeTabTitle(networkTabId, this._titleForFile(binding.fileSystem), this._tooltipForFile(binding.fileSystem));
             return;
         }
+
         var tabId = this._appendFileTab(binding.network, false, tabIndex);
-        if (isSelected)
+        if (wasSelectedInFileSystem)
             this._tabbedPane.selectTab(tabId, false);
     },
 
@@ -287,6 +290,7 @@ WebInspector.TabbedEditorContainer.prototype = {
      */
     _titleForFile: function(uiSourceCode)
     {
+        uiSourceCode = WebInspector.persistence.fileSystem(uiSourceCode) || uiSourceCode;
         var maxDisplayNameLength = 30;
         var title = uiSourceCode.displayName(true).trimMiddle(maxDisplayNameLength);
         if (uiSourceCode.isDirty() || WebInspector.persistence.hasUnsavedCommittedChanges(uiSourceCode))
@@ -438,6 +442,7 @@ WebInspector.TabbedEditorContainer.prototype = {
      */
     _tooltipForFile: function(uiSourceCode)
     {
+        uiSourceCode = WebInspector.persistence.fileSystem(uiSourceCode) || uiSourceCode;
         return uiSourceCode.url();
     },
 

third_party/WebKit/Source/devtools/front_end/sources/module.json

@@ -215,43 +215,77 @@
         {
             "type": "view",
             "location": "navigator-view",
-            "id": "sources",
+            "id": "navigator-sources",
             "title": "Sources",
             "order": 1,
             "persistence": "permanent",
-            "className": "WebInspector.SourcesNavigatorView"
+            "className": "WebInspector.SourcesNavigatorView",
+            "experiment": "!persistence2"
         },
         {
             "type": "view",
             "location": "navigator-view",
-            "id": "contentScripts",
-            "title": "Content scripts",
+            "id": "navigator-network",
+            "title": "Network",
             "order": 2,
             "persistence": "permanent",
+            "className": "WebInspector.NetworkNavigatorView",
+            "experiment": "persistence2"
+        },
+        {
+            "type": "view",
+            "location": "navigator-view",
+            "id": "navigator-files",
+            "title": "Filesystem",
+            "order": 3,
+            "persistence": "permanent",
+            "className": "WebInspector.FilesNavigatorView",
+            "experiment": "persistence2"
+        },
+        {
+            "type": "view",
+            "location": "navigator-view",
+            "id": "navigator-contentScripts",
+            "title": "Content scripts",
+            "order": 4,
+            "persistence": "permanent",
             "className": "WebInspector.ContentScriptsNavigatorView"
         },
         {
             "type": "view",
             "location": "navigator-view",
-            "id": "snippets",
+            "id": "navigator-snippets",
             "title": "Snippets",
-            "order": 3,
+            "order": 5,
             "persistence": "permanent",
             "className": "WebInspector.SnippetsNavigatorView"
         },
         {
             "type": "@WebInspector.NavigatorView",
-            "viewId": "sources",
-            "className": "WebInspector.SourcesNavigatorView"
+            "viewId": "navigator-sources",
+            "className": "WebInspector.SourcesNavigatorView",
+            "experiment": "!persistence2"
+        },
+        {
+            "type": "@WebInspector.NavigatorView",
+            "viewId": "navigator-network",
+            "className": "WebInspector.NetworkNavigatorView",
+            "experiment": "persistence2"
+        },
+        {
+            "type": "@WebInspector.NavigatorView",
+            "viewId": "navigator-files",
+            "className": "WebInspector.FilesNavigatorView",
+            "experiment": "persistence2"
         },
         {
             "type": "@WebInspector.NavigatorView",
-            "viewId": "contentScripts",
+            "viewId": "navigator-contentScripts",
             "className": "WebInspector.ContentScriptsNavigatorView"
         },
         {
             "type": "@WebInspector.NavigatorView",
-            "viewId": "snippets",
+            "viewId": "navigator-snippets",
             "className": "WebInspector.SnippetsNavigatorView"
         },
         {

third_party/WebKit/Source/devtools/front_end/ui/TabbedPane.js

@@ -412,14 +412,17 @@ WebInspector.TabbedPane.prototype = {
     /**
      * @param {string} id
      * @param {string} tabTitle
+     * @param {string=} tabTooltip
      */
-    changeTabTitle: function(id, tabTitle)
+    changeTabTitle: function(id, tabTitle, tabTooltip)
     {
         var tab = this._tabsById[id];
-        if (tab.title === tabTitle)
-            return;
-        tab.title = tabTitle;
-        this._updateTabElements();
+        if (tabTooltip !== undefined)
+            tab.tooltip = tabTooltip;
+        if (tab.title !== tabTitle) {
+            tab.title = tabTitle;
+            this._updateTabElements();
+        }
     },
 
     /**