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 43 matching lines @@
 
     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.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 71 matching lines @@
     var searchLabel = WebInspector.UIString.capitalize("Search in ^folder");
     if (!path || !path.trim()) {
         path = "*";
         searchLabel = WebInspector.UIString.capitalize("Search in ^all ^files");
     }
     contextMenu.appendItem(searchLabel, searchPath);
 }
 
 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()
     {
         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);
+    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);
 }
 
 /**
  * @constructor
  * @extends {TreeElement}
  * @param {!WebInspector.NavigatorView} navigatorView
  * @param {string} type
  * @param {string} title
  * @param {function(boolean)=} hoverCallback
@@ skipping 398 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),
+            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;
     },
 
     /**
      * @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 = "◉";

[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())
             tooltip = WebInspector.UIString("%s (from source map)", this._uiSourceCode.displayName());
         this._treeElement.tooltip = tooltip;
     },
 
     /**
      * @override
      * @return {boolean}
      */
     hasChildren: function()
     {
         return false;
     },
 
     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 73 matching lines @@
  * @param {string} type
  * @param {string} folderPath
  * @param {string} title
  */
 WebInspector.NavigatorFolderTreeNode = function(navigatorView, project, id, type, folderPath, title)
 {
     WebInspector.NavigatorTreeNode.call(this, 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 = {
     /**
      * @override
      * @return {!TreeElement}
      */
     treeNode: function()
     {
         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}
      */
     _createTreeElement: function(title, node)
     {
         if (this._project.type() !== WebInspector.projectTypes.FileSystem) {
             try {
                 title = decodeURI(title);
             } catch (e) {
             }
@@ skipping 99 matching lines @@
      * @override
      * @param {!WebInspector.NavigatorTreeNode} node
      */
     willRemoveChild: function(node)
     {
         if (node._isMerged || !this.isPopulated())
             return;
         this._treeElement.removeChild(node._treeElement);
     },
 
+    dispose: function()
+    {
+        WebInspector.EventTarget.removeEventListeners(this._eventListeners);
+    },
+
     __proto__: WebInspector.NavigatorTreeNode.prototype
 }
 
 /**
  * @constructor
  * @extends {WebInspector.NavigatorTreeNode}
  * @param {!WebInspector.NavigatorView} navigatorView
  * @param {!WebInspector.Project} project
  * @param {string} id
  * @param {string} type
  * @param {string} title
  */
 WebInspector.NavigatorGroupTreeNode = function(navigatorView, project, id, type, title)
 {
     WebInspector.NavigatorTreeNode.call(this, id, type);
     this._project = project;
     this._navigatorView = navigatorView;
     this._title = title;
+    this._eventListeners = [];
     this.populate();
 }
 
 WebInspector.NavigatorGroupTreeNode.prototype = {
     /**
      * @param {function(boolean)} hoverCallback
      */
     setHoverCallback: function(hoverCallback)
     {
         this._hoverCallback = hoverCallback;
     },
 
     /**
      * @override
      * @return {!TreeElement}
      */
     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);
+        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
 }