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..b30ef75d95ba1cda6831e7b2a9f8dc95ba1e86ea 100644
--- a/third_party/WebKit/Source/devtools/front_end/sources/NavigatorView.js
+++ b/third_party/WebKit/Source/devtools/front_end/sources/NavigatorView.js
@@ -61,8 +61,6 @@ WebInspector.NavigatorView = function()
     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.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);
 }
 
@@ -154,25 +152,6 @@ WebInspector.NavigatorView.appendSearchItem = function(contextMenu, path)
 
 WebInspector.NavigatorView.prototype = {
     /**
-     * @param {!WebInspector.Event} event
-     */
-    _onBindingCreated: 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);
-    },
-
-    /**
      * @override
      */
     focus: function()
@@ -231,10 +210,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,8 +806,8 @@ 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);
+    var title1 = /** @type {string} */(treeElement1.title instanceof Element ? treeElement1.title.textContent : treeElement1.title);

[dgozman, 2016/09/27 17:08:47]

titleAsText

[lushnikov, 2016/09/27 21:29:12]

Done.

+    var title2 = /** @type {string} */(treeElement2.title instanceof Element ? treeElement2.title.textContent : treeElement2.title);
     return title1.compareTo(title2);
 }
 
@@ -1251,6 +1226,7 @@ WebInspector.NavigatorUISourceCodeTreeNode = function(navigatorView, uiSourceCod
     this._navigatorView = navigatorView;
     this._uiSourceCode = uiSourceCode;
     this._treeElement = null;
+    this._eventListeners = [];
 }
 
 WebInspector.NavigatorUISourceCodeTreeNode.prototype = {
@@ -1274,10 +1250,14 @@ 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),
+            WebInspector.persistence.addEventListener(WebInspector.Persistence.Events.BindingCreated, updateTitleBound),

[dgozman, 2016/09/27 17:08:47]

Should not listen for this on every tree node.

[lushnikov, 2016/09/27 21:29:12]

Done.

+            WebInspector.persistence.addEventListener(WebInspector.Persistence.Events.BindingRemoved, updateTitleBound)
+        ];
         return this._treeElement;
     },
 
@@ -1292,7 +1272,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 = "◉";

[dgozman, 2016/09/27 17:08:47]

\uxxxx

[lushnikov, 2016/09/27 21:29:12]

Done.

+            if (this._uiSourceCode === binding.network)

[dgozman, 2016/09/27 17:08:47]

Let's trim urls.

[lushnikov, 2016/09/27 21:29:12]

Done.

+                status.title = WebInspector.UIString("Mapped to fileSystem: %s", binding.fileSystem.url());

[dgozman, 2016/09/27 17:08:47]

Persisted to file system: %s

[lushnikov, 2016/09/27 21:29:13]

Done.

+            else if (binding.network.contentType().isFromSourceMap())
+                status.title = WebInspector.UIString("Mapped to source map: %s", binding.network.url());

[dgozman, 2016/09/27 17:08:47]

Linked to source map: %s

[lushnikov, 2016/09/27 21:29:12]

Done.

+            else
+                status.title = WebInspector.UIString("Mapped to network: %s", binding.network.url());

[dgozman, 2016/09/27 17:08:47]

Linked to %s

[lushnikov, 2016/09/27 21:29:12]

Done.

+            this._treeElement.title = titleElement;
+        } else {
+            this._treeElement.title = titleText;
+        }
 
         var tooltip = this._uiSourceCode.url();
         if (this._uiSourceCode.contentType().isFromSourceMap())
@@ -1311,26 +1308,7 @@ WebInspector.NavigatorUISourceCodeTreeNode.prototype = {
 
     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);
     },
 
     /**
@@ -1424,7 +1402,11 @@ WebInspector.NavigatorFolderTreeNode = function(navigatorView, project, id, type
     this._navigatorView = navigatorView;
     this._project = project;
     this._folderPath = folderPath;
+    this._absoluteFileSystemPath = "";
+    if (this._project.type() === WebInspector.projectTypes.FileSystem)
+        this._absoluteFileSystemPath = WebInspector.FileSystemWorkspaceBinding.fileSystemPath(this._project.id()) + "/" + this._folderPath;
     this._title = title;
+    this._eventListeners = [];
 }
 
 WebInspector.NavigatorFolderTreeNode.prototype = {
@@ -1437,9 +1419,21 @@ WebInspector.NavigatorFolderTreeNode.prototype = {
         if (this._treeElement)
             return this._treeElement;
         this._treeElement = this._createTreeElement(this._title, this);
+        if (this._project.type() === WebInspector.projectTypes.FileSystem) {
+            this._eventListeners = [
+                WebInspector.persistence.addEventListener(WebInspector.Persistence.Events.BindingCreated, this._updateHasMappedFiles, this),

[dgozman, 2016/09/27 17:08:47]

Make it global.

[lushnikov, 2016/09/27 21:29:12]

Done.

+                WebInspector.persistence.addEventListener(WebInspector.Persistence.Events.BindingRemoved, this._updateHasMappedFiles, this)
+            ];
+            this._updateHasMappedFiles();
+        }
         return this._treeElement;
     },
 
+    _updateHasMappedFiles: function()
+    {
+        this._treeElement.listItemElement.classList.toggle("has-mapped-files", WebInspector.persistence.filePathHasBindings(this._absoluteFileSystemPath));
+    },
+
     /**
      * @return {!TreeElement}
      */
@@ -1559,6 +1553,11 @@ WebInspector.NavigatorFolderTreeNode.prototype = {
         this._treeElement.removeChild(node._treeElement);
     },
 
+    dispose: function()
+    {
+        WebInspector.EventTarget.removeEventListeners(this._eventListeners);
+    },
+
     __proto__: WebInspector.NavigatorTreeNode.prototype
 }
 
@@ -1577,6 +1576,7 @@ WebInspector.NavigatorGroupTreeNode = function(navigatorView, project, id, type,
     this._project = project;
     this._navigatorView = navigatorView;
     this._title = title;
+    this._eventListeners = [];
     this.populate();
 }
 
@@ -1599,8 +1599,34 @@ WebInspector.NavigatorGroupTreeNode.prototype = {
             return this._treeElement;
         this._treeElement = new WebInspector.NavigatorFolderTreeElement(this._navigatorView, this._type, this._title, this._hoverCallback);
         this._treeElement.setNode(this);
+        if (this._project.type() === WebInspector.projectTypes.FileSystem) {
+            this._eventListeners = [
+                WebInspector.persistence.addEventListener(WebInspector.Persistence.Events.BindingCreated, this._updateHasMappedFiles, this),

[dgozman, 2016/09/27 17:08:47]

ditto

[lushnikov, 2016/09/27 21:29:12]

Done.

+                WebInspector.persistence.addEventListener(WebInspector.Persistence.Events.BindingRemoved, this._updateHasMappedFiles, this)
+            ];
+            this._updateHasMappedFiles();
+        }
         return this._treeElement;
     },
 
+    _updateHasMappedFiles: function()
+    {
+        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();
+    },
+
+    dispose: function()

[dgozman, 2016/09/27 17:08:47]

@override ?

[lushnikov, 2016/09/27 21:29:12]

Done.

+    {
+        WebInspector.EventTarget.removeEventListeners(this._eventListeners);
+    },
+
     __proto__: WebInspector.NavigatorTreeNode.prototype
 }