DevTools: [Workspace] show network files in navigator

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

Index: third_party/WebKit/Source/devtools/front_end/sources/NavigatorView.js
diff --git a/third_party/WebKit/Source/devtools/front_end/sources/NavigatorView.js b/third_party/WebKit/Source/devtools/front_end/sources/NavigatorView.js
index a7debf6cf6401a1544d4b7c378cdc20e9305f2a5..4874ed889d53ff3f48720fe0264d7e6cc4b00ea1 100644
--- a/third_party/WebKit/Source/devtools/front_end/sources/NavigatorView.js
+++ b/third_party/WebKit/Source/devtools/front_end/sources/NavigatorView.js
@@ -60,9 +60,10 @@ WebInspector.NavigatorView = function()
     this._initGrouping();
     WebInspector.targetManager.addModelListener(WebInspector.ResourceTreeModel, WebInspector.ResourceTreeModel.Events.FrameNavigated, this._frameNavigated, this);
     WebInspector.targetManager.addModelListener(WebInspector.ResourceTreeModel, WebInspector.ResourceTreeModel.Events.FrameDetached, this._frameDetached, this);
+    WebInspector.persistence.addEventListener(WebInspector.Persistence.Events.BindingCreated, this._onBindingChanged, this);
+    WebInspector.persistence.addEventListener(WebInspector.Persistence.Events.BindingRemoved, this._onBindingChanged, this);
+
     WebInspector.targetManager.observeTargets(this);
-    WebInspector.persistence.addEventListener(WebInspector.Persistence.Events.BindingCreated, this._onBindingCreated, this);
-    WebInspector.persistence.addEventListener(WebInspector.Persistence.Events.BindingRemoved, this._onBindingRemoved, this);
     this._resetWorkspace(WebInspector.workspace);
 }
 
@@ -156,20 +157,34 @@ WebInspector.NavigatorView.prototype = {
     /**
      * @param {!WebInspector.Event} event
      */
-    _onBindingCreated: function(event)
+    _onBindingChanged: function(event)
     {
         var binding = /** @type {!WebInspector.PersistenceBinding} */(event.data);
-        // TODO(lushnikov): show network UISourceCodes in navigator.
-        this._removeUISourceCode(binding.network);
-    },
 
-    /**
-     * @param {!WebInspector.Event} event
-     */
-    _onBindingRemoved: function(event)
-    {
-        var binding = /** @type {!WebInspector.PersistenceBinding} */(event.data);
-        this._addUISourceCode(binding.network);
+        // Update UISourceCode titles.
+        var networkNode = this._uiSourceCodeNodes.get(binding.network);
+        if (networkNode)
+            networkNode.updateTitle();
+        var fileSystemNode = this._uiSourceCodeNodes.get(binding.fileSystem);
+        if (fileSystemNode)
+            fileSystemNode.updateTitle();
+
+        // Update folder titles.
+        var pathTokens = WebInspector.FileSystemWorkspaceBinding.relativePath(binding.fileSystem);
+        var folderPath = "";
+        for (var i = 0; i < pathTokens.length - 1; ++i) {
+            folderPath += pathTokens[i];
+            var folderId = this._folderNodeId(binding.fileSystem.project(), null, null, binding.fileSystem.origin(), folderPath);
+            var folderNode = this._subfolderNodes.get(folderId);
+            if (folderNode)
+                folderNode.updateTitle();
+            folderPath += "/";
+        }
+
+        // Update fileSystem root title.
+        var fileSystemRoot = this._rootNode.child(binding.fileSystem.project().id());
+        if (fileSystemRoot)
+            fileSystemRoot.updateTitle();
     },
 
     /**
@@ -231,10 +246,6 @@ WebInspector.NavigatorView.prototype = {
         if (!this.accept(uiSourceCode))
             return;
 
-        var binding = WebInspector.persistence.binding(uiSourceCode);
-        if (binding && binding.network === uiSourceCode)
-            return;
-
         var isFromSourceMap = uiSourceCode.contentType().isFromSourceMap();
         var path;
         if (uiSourceCode.project().type() === WebInspector.projectTypes.FileSystem)
@@ -831,9 +842,7 @@ WebInspector.NavigatorView._treeElementsCompare = function compare(treeElement1,
         return 1;
     if (typeWeight1 < typeWeight2)
         return -1;
-    var title1 = /** @type {string} */(treeElement1.title);
-    var title2 = /** @type {string} */(treeElement2.title);
-    return title1.compareTo(title2);
+    return treeElement1.titleAsText().compareTo(treeElement2.titleAsText());
 }
 
 /**
@@ -1251,6 +1260,7 @@ WebInspector.NavigatorUISourceCodeTreeNode = function(navigatorView, uiSourceCod
     this._navigatorView = navigatorView;
     this._uiSourceCode = uiSourceCode;
     this._treeElement = null;
+    this._eventListeners = [];
 }
 
 WebInspector.NavigatorUISourceCodeTreeNode.prototype = {
@@ -1274,10 +1284,12 @@ WebInspector.NavigatorUISourceCodeTreeNode.prototype = {
         this._treeElement = new WebInspector.NavigatorSourceTreeElement(this._navigatorView, this._uiSourceCode, "");
         this.updateTitle();
 
-        this._uiSourceCode.addEventListener(WebInspector.UISourceCode.Events.TitleChanged, this._titleChanged, this);
-        this._uiSourceCode.addEventListener(WebInspector.UISourceCode.Events.WorkingCopyChanged, this._workingCopyChanged, this);
-        this._uiSourceCode.addEventListener(WebInspector.UISourceCode.Events.WorkingCopyCommitted, this._workingCopyCommitted, this);
-
+        var updateTitleBound = this.updateTitle.bind(this, undefined);
+        this._eventListeners = [
+            this._uiSourceCode.addEventListener(WebInspector.UISourceCode.Events.TitleChanged, updateTitleBound),
+            this._uiSourceCode.addEventListener(WebInspector.UISourceCode.Events.WorkingCopyChanged, updateTitleBound),
+            this._uiSourceCode.addEventListener(WebInspector.UISourceCode.Events.WorkingCopyCommitted, updateTitleBound)
+        ];
         return this._treeElement;
     },
 
@@ -1292,7 +1304,24 @@ WebInspector.NavigatorUISourceCodeTreeNode.prototype = {
         var titleText = this._uiSourceCode.displayName();
         if (!ignoreIsDirty && (this._uiSourceCode.isDirty() || WebInspector.persistence.hasUnsavedCommittedChanges(this._uiSourceCode)))
             titleText = "*" + titleText;
-        this._treeElement.title = titleText;
+
+        var binding = WebInspector.persistence.binding(this._uiSourceCode);
+        if (binding) {
+            var titleElement = createElement("span");
+            titleElement.textContent = titleText;
+            var status = titleElement.createChild("span");
+            status.classList.add("mapped-file-bubble");
+            status.textContent = "\u25C9";
+            if (this._uiSourceCode === binding.network)
+                status.title = WebInspector.UIString("Persisted to file system: %s", binding.fileSystem.url().trimMiddle(150));
+            else if (binding.network.contentType().isFromSourceMap())
+                status.title = WebInspector.UIString("Linked to source map: %s", binding.network.url().trimMiddle(150));
+            else
+                status.title = WebInspector.UIString("Linked to %s", binding.network.url().trimMiddle(150));
+            this._treeElement.title = titleElement;
+        } else {
+            this._treeElement.title = titleText;
+        }
 
         var tooltip = this._uiSourceCode.url();
         if (this._uiSourceCode.contentType().isFromSourceMap())
@@ -1309,28 +1338,12 @@ WebInspector.NavigatorUISourceCodeTreeNode.prototype = {
         return false;
     },
 
+    /**
+     * @override
+     */
     dispose: function()
     {
-        if (!this._treeElement)
-            return;
-        this._uiSourceCode.removeEventListener(WebInspector.UISourceCode.Events.TitleChanged, this._titleChanged, this);
-        this._uiSourceCode.removeEventListener(WebInspector.UISourceCode.Events.WorkingCopyChanged, this._workingCopyChanged, this);
-        this._uiSourceCode.removeEventListener(WebInspector.UISourceCode.Events.WorkingCopyCommitted, this._workingCopyCommitted, this);
-    },
-
-    _titleChanged: function(event)
-    {
-        this.updateTitle();
-    },
-
-    _workingCopyChanged: function(event)
-    {
-        this.updateTitle();
-    },
-
-    _workingCopyCommitted: function(event)
-    {
-        this.updateTitle();
+        WebInspector.EventTarget.removeEventListeners(this._eventListeners);
     },
 
     /**
@@ -1437,9 +1450,18 @@ WebInspector.NavigatorFolderTreeNode.prototype = {
         if (this._treeElement)
             return this._treeElement;
         this._treeElement = this._createTreeElement(this._title, this);
+        this.updateTitle();
         return this._treeElement;
     },
 
+    updateTitle: function()
+    {
+        if (!this._treeElement || this._project.type() !== WebInspector.projectTypes.FileSystem)
+            return;
+        var absoluteFileSystemPath = WebInspector.FileSystemWorkspaceBinding.fileSystemPath(this._project.id()) + "/" + this._folderPath;
+        this._treeElement.listItemElement.classList.toggle("has-mapped-files", WebInspector.persistence.filePathHasBindings(absoluteFileSystemPath));
+    },
+
     /**
      * @return {!TreeElement}
      */
@@ -1602,5 +1624,29 @@ WebInspector.NavigatorGroupTreeNode.prototype = {
         return this._treeElement;
     },
 
+    /**
+     * @override
+     */
+    onattach: function()

[lushnikov, 2016/09/28 18:11:44]

The logic in updateTitle which expands active file system doesn't work on
navigator initial construction.

The reason is that WebInspector.NavigatorGroupTreeNode has .collapse in
onattach. This change fixes it.

+    {
+        this.updateTitle();
+    },
+
+    updateTitle: function()
+    {
+        if (!this._treeElement || this._project.type() !== WebInspector.projectTypes.FileSystem)
+            return;
+        var fileSystemPath = WebInspector.FileSystemWorkspaceBinding.fileSystemPath(this._project.id());
+        var wasActive = this._treeElement.listItemElement.classList.contains("has-mapped-files");
+        var isActive = WebInspector.persistence.filePathHasBindings(fileSystemPath);
+        if (wasActive === isActive)
+            return;
+        this._treeElement.listItemElement.classList.toggle("has-mapped-files", isActive);
+        if (isActive)
+            this._treeElement.expand();
+        else
+            this._treeElement.collapse();
+    },
+
     __proto__: WebInspector.NavigatorTreeNode.prototype
 }