DevTools: [Workspace] show network files in navigator

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

 /*
  * Copyright (C) 2012 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  * 1. Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *
@@ skipping 42 matching lines @@
     this._frameNodes = new Map();
 
     this.element.addEventListener("contextmenu", this.handleContextMenu.bind(this), false);
 
     this._navigatorGroupByFolderSetting = WebInspector.moduleSetting("navigatorGroupByFolder");
     this._navigatorGroupByFolderSetting.addChangeListener(this._groupingChanged.bind(this));
 
     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);
 }
 
 WebInspector.NavigatorView.Types = {
     Category: "category",
     Domain: "domain",
     File: "file",
     FileSystem: "fs",
     FileSystemFolder: "fs-folder",
     Frame: "frame",
@@ skipping 73 matching lines @@
         path = "*";
         searchLabel = WebInspector.UIString.capitalize("Search in ^all ^files");
     }
     contextMenu.appendItem(searchLabel, searchPath);
 }
 
 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);
+
+        // 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();
     },
 
     /**
-     * @param {!WebInspector.Event} event
-     */
-    _onBindingRemoved: function(event)
-    {
-        var binding = /** @type {!WebInspector.PersistenceBinding} */(event.data);
-        this._addUISourceCode(binding.network);
-    },
-
-    /**
      * @override
      */
     focus: function()
     {
         this._scriptsTree.focus();
     },
 
     /**
      * @param {!WebInspector.Workspace} workspace
      */
@@ skipping 38 matching lines @@
     },
 
     /**
      * @param {!WebInspector.UISourceCode} uiSourceCode
      */
     _addUISourceCode: function(uiSourceCode)
     {
         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)
             path = WebInspector.FileSystemWorkspaceBinding.relativePath(uiSourceCode).slice(0, -1);
         else
             path = WebInspector.ParsedURL.splitURLIntoPathComponents(uiSourceCode.url()).slice(1, -1);
 
         var project = uiSourceCode.project();
         var target = WebInspector.NetworkProject.targetForUISourceCode(uiSourceCode);
         var frame = this._uiSourceCodeFrame(uiSourceCode);
@@ skipping 576 matching lines @@
 WebInspector.NavigatorView._treeElementsCompare = function compare(treeElement1, treeElement2)
 {
     var typeWeight1 = WebInspector.NavigatorView._treeElementOrder(treeElement1);
     var typeWeight2 = WebInspector.NavigatorView._treeElementOrder(treeElement2);
 
     var result;
     if (typeWeight1 > typeWeight2)
         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());
 }
 
 /**
  * @constructor
  * @extends {TreeElement}
  * @param {!WebInspector.NavigatorView} navigatorView
  * @param {string} type
  * @param {string} title
  * @param {function(boolean)=} hoverCallback
  */
@@ skipping 397 matching lines @@
  * @extends {WebInspector.NavigatorTreeNode}
  * @param {!WebInspector.NavigatorView} navigatorView
  * @param {!WebInspector.UISourceCode} uiSourceCode
  */
 WebInspector.NavigatorUISourceCodeTreeNode = function(navigatorView, uiSourceCode)
 {
     WebInspector.NavigatorTreeNode.call(this, uiSourceCode.project().id() + ":" + uiSourceCode.url(), WebInspector.NavigatorView.Types.File);
     this._navigatorView = navigatorView;
     this._uiSourceCode = uiSourceCode;
     this._treeElement = null;
+    this._eventListeners = [];
 }
 
 WebInspector.NavigatorUISourceCodeTreeNode.prototype = {
     /**
      * @return {!WebInspector.UISourceCode}
      */
     uiSourceCode: function()
     {
         return this._uiSourceCode;
     },
 
     /**
      * @override
      * @return {!TreeElement}
      */
     treeNode: function()
     {
         if (this._treeElement)
             return this._treeElement;
 
         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;
     },
 
     /**
      * @param {boolean=} ignoreIsDirty
      */
     updateTitle: function(ignoreIsDirty)
     {
         if (!this._treeElement)
             return;
 
         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())
             tooltip = WebInspector.UIString("%s (from source map)", this._uiSourceCode.displayName());
         this._treeElement.tooltip = tooltip;
     },
 
     /**
      * @override
      * @return {boolean}
      */
     hasChildren: function()
     {
         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);
     },
 
     /**
      * @param {boolean=} select
      */
     reveal: function(select)
     {
         this.parent.populate();
         this.parent.treeNode().expand();
         this._treeElement.reveal();
@@ skipping 86 matching lines @@
 WebInspector.NavigatorFolderTreeNode.prototype = {
     /**
      * @override
      * @return {!TreeElement}
      */
     treeNode: function()
     {
         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}
      */
     _createTreeElement: function(title, node)
     {
         if (this._project.type() !== WebInspector.projectTypes.FileSystem) {
             try {
                 title = decodeURI(title);
             } catch (e) {
             }
@@ skipping 142 matching lines @@
      */
     treeNode: function()
     {
         if (this._treeElement)
             return this._treeElement;
         this._treeElement = new WebInspector.NavigatorFolderTreeElement(this._navigatorView, this._type, this._title, this._hoverCallback);
         this._treeElement.setNode(this);
         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
 }