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

   1 /*
   2  * Copyright (C) 2012 Google Inc. All rights reserved.
   3  *
   4  * Redistribution and use in source and binary forms, with or without
   5  * modification, are permitted provided that the following conditions are
   6  * met:
   7  *
   8  * 1. Redistributions of source code must retain the above copyright
   9  * notice, this list of conditions and the following disclaimer.
  10  *
  11  * 2. Redistributions in binary form must reproduce the above
  12  * copyright notice, this list of conditions and the following disclaimer
  13  * in the documentation and/or other materials provided with the
  14  * distribution.
  15  *
  16  * THIS SOFTWARE IS PROVIDED BY GOOGLE INC. AND ITS CONTRIBUTORS
  17  * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
  18  * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
  19  * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL GOOGLE INC.
  20  * OR ITS CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
  21  * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
  22  * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
  23  * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
  24  * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  25  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  26  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  27  */
  28
  29 /**
  30  * @constructor
  31  * @extends {WebInspector.VBox}
  32  */
  33 WebInspector.NavigatorView = function()
  34 {
  35     WebInspector.VBox.call(this);
  36     this.registerRequiredCSS("sources/navigatorView.css");
  37
  38     this.element.classList.add("navigator-container");
  39     var scriptsOutlineElement = this.element.createChild("div", "navigator");
  40     this._scriptsTree = new TreeOutline();
  41     this._scriptsTree.setComparator(WebInspector.NavigatorView._treeElementsCompare);
  42     this._scriptsTree.element.classList.add("outline-disclosure");
  43     scriptsOutlineElement.appendChild(this._scriptsTree.element);
  44
  45     this.setDefaultFocusedElement(this._scriptsTree.element);
  46
  47     /** @type {!Map.<!WebInspector.UISourceCode, !WebInspector.NavigatorUISourceCodeTreeNode>} */
  48     this._uiSourceCodeNodes = new Map();
  49     /** @type {!Map.<!WebInspector.NavigatorTreeNode, !Map.<string, !WebInspector.NavigatorFolderTreeNode>>} */
  50     this._subfolderNodes = new Map();
  51
  52     this._rootNode = new WebInspector.NavigatorRootTreeNode(this);
  53     this._rootNode.populate();
  54
  55     this.element.addEventListener("contextmenu", this.handleContextMenu.bind(this), false);
  56 }
  57
  58 WebInspector.NavigatorView.Events = {
  59     ItemSelected: "ItemSelected",
  60     ItemRenamed: "ItemRenamed",
  61 }
  62
  63 WebInspector.NavigatorView.Types = {
  64     Root: "Root",
  65     Domain: "Domain",
  66     Folder: "Folder",
  67     UISourceCode: "UISourceCode",
  68     FileSystem: "FileSystem"
  69 }
  70
  71 /**
  72  * @param {string} type
  73  * @return {string}
  74  */
  75 WebInspector.NavigatorView.iconClassForType = function(type)
  76 {
  77     if (type === WebInspector.NavigatorView.Types.Domain)
  78         return "navigator-domain-tree-item";
  79     if (type === WebInspector.NavigatorView.Types.FileSystem)
  80         return "navigator-folder-tree-item";
  81     return "navigator-folder-tree-item";
  82 }
  83
  84 /**
  85  * @param {!WebInspector.ContextMenu} contextMenu
  86  */
  87 WebInspector.NavigatorView.appendAddFolderItem = function(contextMenu)
  88 {
  89     function addFolder()
  90     {
  91         WebInspector.isolatedFileSystemManager.addFileSystem();
  92     }
  93
  94     var addFolderLabel = WebInspector.UIString.capitalize("Add ^folder to ^workspace");
  95     contextMenu.appendItem(addFolderLabel, addFolder);
  96 }
  97
  98 WebInspector.NavigatorView.prototype = {
  99     setWorkspace: function(workspace)
 100     {
 101         this._workspace = workspace;
 102         this._workspace.addEventListener(WebInspector.Workspace.Events.UISourceCodeAdded, this._uiSourceCodeAdded, this);
 103         this._workspace.addEventListener(WebInspector.Workspace.Events.UISourceCodeRemoved, this._uiSourceCodeRemoved, this);
 104         this._workspace.addEventListener(WebInspector.Workspace.Events.ProjectRemoved, this._projectRemoved.bind(this), this);
 105     },
 106
 107     wasShown: function()
 108     {
 109         if (this._loaded)
 110             return;
 111         this._loaded = true;
 112         this._workspace.uiSourceCodes().forEach(this._addUISourceCode.bind(this));
 113     },
 114
 115     /**
 116      * @param {!WebInspector.UISourceCode} uiSourceCode
 117      * @return {boolean}
 118      */
 119     accept: function(uiSourceCode)
 120     {
 121         return !uiSourceCode.project().isServiceProject();
 122     },
 123
 124     /**
 125      * @param {!WebInspector.UISourceCode} uiSourceCode
 126      */
 127     _addUISourceCode: function(uiSourceCode)
 128     {
 129         if (!this.accept(uiSourceCode))
 130             return;
 131         var projectNode = this._projectNode(uiSourceCode.project());
 132         var folderNode = this._folderNode(projectNode, uiSourceCode.parentPath());
 133         var uiSourceCodeNode = new WebInspector.NavigatorUISourceCodeTreeNode(this, uiSourceCode);
 134         this._uiSourceCodeNodes.set(uiSourceCode, uiSourceCodeNode);
 135         folderNode.appendChild(uiSourceCodeNode);
 136     },
 137
 138     /**
 139      * @param {!WebInspector.Event} event
 140      */
 141     _uiSourceCodeAdded: function(event)
 142     {
 143         var uiSourceCode = /** @type {!WebInspector.UISourceCode} */ (event.data);
 144         this._addUISourceCode(uiSourceCode);
 145     },
 146
 147     /**
 148      * @param {!WebInspector.Event} event
 149      */
 150     _uiSourceCodeRemoved: function(event)
 151     {
 152         var uiSourceCode = /** @type {!WebInspector.UISourceCode} */ (event.data);
 153         this._removeUISourceCode(uiSourceCode);
 154     },
 155
 156     /**
 157      * @param {!WebInspector.Event} event
 158      */
 159     _projectRemoved: function(event)
 160     {
 161         var project = /** @type {!WebInspector.Project} */ (event.data);
 162         project.removeEventListener(WebInspector.Project.Events.DisplayNameUpdated, this._updateProjectNodeTitle, this);
 163         var uiSourceCodes = project.uiSourceCodes();
 164         for (var i = 0; i < uiSourceCodes.length; ++i)
 165             this._removeUISourceCode(uiSourceCodes[i]);
 166     },
 167
 168     /**
 169      * @param {!WebInspector.Project} project
 170      * @return {!WebInspector.NavigatorTreeNode}
 171      */
 172     _projectNode: function(project)
 173     {
 174         if (!project.displayName())
 175             return this._rootNode;
 176
 177         var projectNode = this._rootNode.child(project.id());
 178         if (!projectNode) {
 179             projectNode = this._createProjectNode(project);
 180             this._rootNode.appendChild(projectNode);
 181         }
 182         return projectNode;
 183     },
 184
 185     /**
 186      * @param {!WebInspector.Project} project
 187      * @return {!WebInspector.NavigatorTreeNode}
 188      */
 189     _createProjectNode: function(project)
 190     {
 191         var type = project.type() === WebInspector.projectTypes.FileSystem ? WebInspector.NavigatorView.Types.FileSystem : WebInspector.NavigatorView.Types.Domain;
 192         var projectNode = new WebInspector.NavigatorFolderTreeNode(this, project, project.id(), type, "", project.displayName());
 193         project.addEventListener(WebInspector.Project.Events.DisplayNameUpdated, this._updateProjectNodeTitle, this);
 194         return projectNode;
 195     },
 196
 197     /**
 198      * @param {!WebInspector.Event} event
 199      */
 200     _updateProjectNodeTitle: function(event)
 201     {
 202         var project = /** @type {!WebInspector.Project} */(event.target);
 203         var projectNode = this._rootNode.child(project.id());
 204         if (!projectNode)
 205             return;
 206         projectNode.treeNode().titleText = project.displayName();
 207     },
 208
 209     /**
 210      * @param {!WebInspector.NavigatorTreeNode} projectNode
 211      * @param {string} folderPath
 212      * @return {!WebInspector.NavigatorTreeNode}
 213      */
 214     _folderNode: function(projectNode, folderPath)
 215     {
 216         if (!folderPath)
 217             return projectNode;
 218
 219         var subfolderNodes = this._subfolderNodes.get(projectNode);
 220         if (!subfolderNodes) {
 221             subfolderNodes = /** @type {!Map.<string, !WebInspector.NavigatorFolderTreeNode>} */ (new Map());
 222             this._subfolderNodes.set(projectNode, subfolderNodes);
 223         }
 224
 225         var folderNode = subfolderNodes.get(folderPath);
 226         if (folderNode)
 227             return folderNode;
 228
 229         var parentNode = projectNode;
 230         var index = folderPath.lastIndexOf("/");
 231         if (index !== -1)
 232             parentNode = this._folderNode(projectNode, folderPath.substring(0, index));
 233
 234         var name = folderPath.substring(index + 1);
 235         folderNode = new WebInspector.NavigatorFolderTreeNode(this, null, name, WebInspector.NavigatorView.Types.Folder, folderPath, name);
 236         subfolderNodes.set(folderPath, folderNode);
 237         parentNode.appendChild(folderNode);
 238         return folderNode;
 239     },
 240
 241     /**
 242      * @param {!WebInspector.UISourceCode} uiSourceCode
 243      * @param {boolean=} select
 244      */
 245     revealUISourceCode: function(uiSourceCode, select)
 246     {
 247         var node = this._uiSourceCodeNodes.get(uiSourceCode);
 248         if (!node)
 249             return;
 250         if (this._scriptsTree.selectedTreeElement)
 251             this._scriptsTree.selectedTreeElement.deselect();
 252         this._lastSelectedUISourceCode = uiSourceCode;
 253         node.reveal(select);
 254     },
 255
 256     /**
 257      * @param {!WebInspector.UISourceCode} uiSourceCode
 258      * @param {boolean} focusSource
 259      */
 260     _sourceSelected: function(uiSourceCode, focusSource)
 261     {
 262         this._lastSelectedUISourceCode = uiSourceCode;
 263         var data = { uiSourceCode: uiSourceCode, focusSource: focusSource};
 264         this.dispatchEventToListeners(WebInspector.NavigatorView.Events.ItemSelected, data);
 265     },
 266
 267     /**
 268      * @param {!WebInspector.UISourceCode} uiSourceCode
 269      */
 270     sourceDeleted: function(uiSourceCode)
 271     {
 272     },
 273
 274     /**
 275      * @param {!WebInspector.UISourceCode} uiSourceCode
 276      */
 277     _removeUISourceCode: function(uiSourceCode)
 278     {
 279         var node = this._uiSourceCodeNodes.get(uiSourceCode);
 280         if (!node)
 281             return;
 282
 283         var projectNode = this._projectNode(uiSourceCode.project());
 284         var subfolderNodes = this._subfolderNodes.get(projectNode);
 285         var parentNode = node.parent;
 286         this._uiSourceCodeNodes.remove(uiSourceCode);
 287         parentNode.removeChild(node);
 288         node = parentNode;
 289
 290         while (node) {
 291             parentNode = node.parent;
 292             if (!parentNode || !node.isEmpty())
 293                 break;
 294             if (subfolderNodes)
 295                 subfolderNodes.remove(node._folderPath);
 296             parentNode.removeChild(node);
 297             node = parentNode;
 298         }
 299     },
 300
 301     /**
 302      * @param {!WebInspector.UISourceCode} uiSourceCode
 303      */
 304     _updateIcon: function(uiSourceCode)
 305     {
 306         var node = this._uiSourceCodeNodes.get(uiSourceCode);
 307         node.updateIcon();
 308     },
 309
 310     reset: function()
 311     {
 312         var nodes = this._uiSourceCodeNodes.valuesArray();
 313         for (var i = 0; i < nodes.length; ++i)
 314             nodes[i].dispose();
 315
 316         this._scriptsTree.removeChildren();
 317         this._uiSourceCodeNodes.clear();
 318         this._subfolderNodes.clear();
 319         this._rootNode.reset();
 320     },
 321
 322     /**
 323      * @param {!Event} event
 324      */
 325     handleContextMenu: function(event)
 326     {
 327         var contextMenu = new WebInspector.ContextMenu(event);
 328         WebInspector.NavigatorView.appendAddFolderItem(contextMenu);
 329         contextMenu.show();
 330     },
 331
 332     /**
 333      * @param {!WebInspector.Project} project
 334      * @param {string} path
 335      */
 336     _handleContextMenuRefresh: function(project, path)
 337     {
 338         project.refresh(path);
 339     },
 340
 341     /**
 342      * @param {!WebInspector.Project} project
 343      * @param {string} path
 344      * @param {!WebInspector.UISourceCode=} uiSourceCode
 345      */
 346     _handleContextMenuCreate: function(project, path, uiSourceCode)
 347     {
 348         this.create(project, path, uiSourceCode);
 349     },
 350
 351     /**
 352      * @param {!WebInspector.UISourceCode} uiSourceCode
 353      */
 354     _handleContextMenuRename: function(uiSourceCode)
 355     {
 356         this.rename(uiSourceCode, false);
 357     },
 358
 359     /**
 360      * @param {!WebInspector.Project} project
 361      * @param {string} path
 362      */
 363     _handleContextMenuExclude: function(project, path)
 364     {
 365         var shouldExclude = window.confirm(WebInspector.UIString("Are you sure you want to exclude this folder?"));
 366         if (shouldExclude) {
 367             WebInspector.startBatchUpdate();
 368             project.excludeFolder(path);
 369             WebInspector.endBatchUpdate();
 370         }
 371     },
 372
 373     /**
 374      * @param {!WebInspector.UISourceCode} uiSourceCode
 375      */
 376     _handleContextMenuDelete: function(uiSourceCode)
 377     {
 378         var shouldDelete = window.confirm(WebInspector.UIString("Are you sure you want to delete this file?"));
 379         if (shouldDelete)
 380             uiSourceCode.project().deleteFile(uiSourceCode.path());
 381     },
 382
 383     /**
 384      * @param {!Event} event
 385      * @param {!WebInspector.UISourceCode} uiSourceCode
 386      */
 387     handleFileContextMenu: function(event, uiSourceCode)
 388     {
 389         var contextMenu = new WebInspector.ContextMenu(event);
 390         contextMenu.appendApplicableItems(uiSourceCode);
 391         contextMenu.appendSeparator();
 392
 393         var project = uiSourceCode.project();
 394         if (project.type() === WebInspector.projectTypes.FileSystem) {
 395             var path = uiSourceCode.parentPath();
 396             contextMenu.appendItem(WebInspector.UIString.capitalize("Rename\u2026"), this._handleContextMenuRename.bind(this, uiSourceCode));
 397             contextMenu.appendItem(WebInspector.UIString.capitalize("Make a ^copy\u2026"), this._handleContextMenuCreate.bind(this, project, path, uiSourceCode));
 398             contextMenu.appendItem(WebInspector.UIString.capitalize("Delete"), this._handleContextMenuDelete.bind(this, uiSourceCode));
 399             contextMenu.appendSeparator();
 400         }
 401
 402         contextMenu.show();
 403     },
 404
 405     /**
 406      * @param {!Event} event
 407      * @param {!WebInspector.NavigatorFolderTreeNode} node
 408      */
 409     handleFolderContextMenu: function(event, node)
 410     {
 411         var contextMenu = new WebInspector.ContextMenu(event);
 412         var path = "/";
 413         var projectNode = node;
 414         while (projectNode.parent !== this._rootNode) {
 415             path = "/" + projectNode.id + path;
 416             projectNode = projectNode.parent;
 417         }
 418
 419         var project = projectNode._project;
 420
 421         if (project.type() === WebInspector.projectTypes.FileSystem) {
 422             contextMenu.appendItem(WebInspector.UIString.capitalize("Refresh"), this._handleContextMenuRefresh.bind(this, project, path));
 423             contextMenu.appendItem(WebInspector.UIString.capitalize("New ^file"), this._handleContextMenuCreate.bind(this, project, path));
 424             contextMenu.appendItem(WebInspector.UIString.capitalize("Exclude ^folder"), this._handleContextMenuExclude.bind(this, project, path));
 425         }
 426         contextMenu.appendSeparator();
 427         WebInspector.NavigatorView.appendAddFolderItem(contextMenu);
 428
 429         function removeFolder()
 430         {
 431             var shouldRemove = window.confirm(WebInspector.UIString("Are you sure you want to remove this folder?"));
 432             if (shouldRemove)
 433                 project.remove();
 434         }
 435
 436         if (project.type() === WebInspector.projectTypes.FileSystem && node === projectNode) {
 437             var removeFolderLabel = WebInspector.UIString.capitalize("Remove ^folder from ^workspace");
 438             contextMenu.appendItem(removeFolderLabel, removeFolder);
 439         }
 440
 441         contextMenu.show();
 442     },
 443
 444     /**
 445      * @param {!WebInspector.UISourceCode} uiSourceCode
 446      * @param {boolean} deleteIfCanceled
 447      */
 448     rename: function(uiSourceCode, deleteIfCanceled)
 449     {
 450         var node = this._uiSourceCodeNodes.get(uiSourceCode);
 451         console.assert(node);
 452         node.rename(callback.bind(this));
 453
 454         /**
 455          * @this {WebInspector.NavigatorView}
 456          * @param {boolean} committed
 457          */
 458         function callback(committed)
 459         {
 460             if (!committed) {
 461                 if (deleteIfCanceled)
 462                     uiSourceCode.remove();
 463                 return;
 464             }
 465
 466             this.dispatchEventToListeners(WebInspector.NavigatorView.Events.ItemRenamed, uiSourceCode);
 467             this._updateIcon(uiSourceCode);
 468             this._sourceSelected(uiSourceCode, true);
 469         }
 470     },
 471
 472     /**
 473      * @param {!WebInspector.Project} project
 474      * @param {string} path
 475      * @param {!WebInspector.UISourceCode=} uiSourceCodeToCopy
 476      */
 477     create: function(project, path, uiSourceCodeToCopy)
 478     {
 479         var filePath;
 480         var uiSourceCode;
 481
 482         /**
 483          * @this {WebInspector.NavigatorView}
 484          * @param {?string} content
 485          */
 486         function contentLoaded(content)
 487         {
 488             createFile.call(this, content || "");
 489         }
 490
 491         if (uiSourceCodeToCopy)
 492             uiSourceCodeToCopy.requestContent(contentLoaded.bind(this));
 493         else
 494             createFile.call(this);
 495
 496         /**
 497          * @this {WebInspector.NavigatorView}
 498          * @param {string=} content
 499          */
 500         function createFile(content)
 501         {
 502             project.createFile(path, null, content || "", fileCreated.bind(this));
 503         }
 504
 505         /**
 506          * @this {WebInspector.NavigatorView}
 507          * @param {?string} path
 508          */
 509         function fileCreated(path)
 510         {
 511             if (!path)
 512                 return;
 513             filePath = path;
 514             uiSourceCode = project.uiSourceCode(filePath);
 515             if (!uiSourceCode) {
 516                 console.assert(uiSourceCode);
 517                 return;
 518             }
 519             this._sourceSelected(uiSourceCode, false);
 520             this.revealUISourceCode(uiSourceCode, true);
 521             this.rename(uiSourceCode, true);
 522         }
 523     },
 524
 525     __proto__: WebInspector.VBox.prototype
 526 }
 527
 528 /**
 529  * @constructor
 530  * @extends {WebInspector.NavigatorView}
 531  */
 532 WebInspector.SourcesNavigatorView = function()
 533 {
 534     WebInspector.NavigatorView.call(this);
 535     WebInspector.targetManager.addEventListener(WebInspector.TargetManager.Events.InspectedURLChanged, this._inspectedURLChanged, this);
 536 }
 537
 538 WebInspector.SourcesNavigatorView.prototype = {
 539     /**
 540      * @override
 541      * @param {!WebInspector.UISourceCode} uiSourceCode
 542      * @return {boolean}
 543      */
 544     accept: function(uiSourceCode)
 545     {
 546         if (!WebInspector.NavigatorView.prototype.accept(uiSourceCode))
 547             return false;
 548         return uiSourceCode.project().type() !== WebInspector.projectTypes.ContentScripts && uiSourceCode.project().type() !== WebInspector.projectTypes.Snippets;
 549
 550     },
 551
 552     /**
 553      * @param {!WebInspector.Event} event
 554      */
 555     _inspectedURLChanged: function(event)
 556     {
 557        var nodes = this._uiSourceCodeNodes.valuesArray();
 558        for (var i = 0; i < nodes.length; ++i) {
 559            var uiSourceCode = nodes[i].uiSourceCode();
 560            var inspectedPageURL = WebInspector.targetManager.inspectedPageURL();
 561            if (inspectedPageURL && WebInspector.networkMapping.networkURL(uiSourceCode) === inspectedPageURL)
 562               this.revealUISourceCode(uiSourceCode, true);
 563        }
 564     },
 565
 566     /**
 567      * @override
 568      * @param {!WebInspector.UISourceCode} uiSourceCode
 569      */
 570     _addUISourceCode: function(uiSourceCode)
 571     {
 572         WebInspector.NavigatorView.prototype._addUISourceCode.call(this, uiSourceCode);
 573         var inspectedPageURL = WebInspector.targetManager.inspectedPageURL();
 574         if (inspectedPageURL && WebInspector.networkMapping.networkURL(uiSourceCode) === inspectedPageURL)
 575             this.revealUISourceCode(uiSourceCode, true);
 576      },
 577
 578     __proto__: WebInspector.NavigatorView.prototype
 579 }
 580
 581 /**
 582  * @constructor
 583  * @extends {WebInspector.NavigatorView}
 584  */
 585 WebInspector.ContentScriptsNavigatorView = function()
 586 {
 587     WebInspector.NavigatorView.call(this);
 588 }
 589
 590 WebInspector.ContentScriptsNavigatorView.prototype = {
 591     /**
 592      * @override
 593      * @param {!WebInspector.UISourceCode} uiSourceCode
 594      * @return {boolean}
 595      */
 596     accept: function(uiSourceCode)
 597     {
 598         if (!WebInspector.NavigatorView.prototype.accept(uiSourceCode))
 599             return false;
 600         return uiSourceCode.project().type() === WebInspector.projectTypes.ContentScripts;
 601     },
 602
 603     __proto__: WebInspector.NavigatorView.prototype
 604 }
 605
 606 /**
 607  * @param {!TreeElement} treeElement1
 608  * @param {!TreeElement} treeElement2
 609  * @return {number}
 610  */
 611 WebInspector.NavigatorView._treeElementsCompare = function compare(treeElement1, treeElement2)
 612 {
 613     // Insert in the alphabetical order, first domains, then folders, then scripts.
 614     function typeWeight(treeElement)
 615     {
 616         var type = treeElement.type();
 617         if (type === WebInspector.NavigatorView.Types.Domain) {
 618             if (treeElement.titleText === WebInspector.targetManager.inspectedPageDomain())
 619                 return 1;
 620             return 2;
 621         }
 622         if (type === WebInspector.NavigatorView.Types.FileSystem)
 623             return 3;
 624         if (type === WebInspector.NavigatorView.Types.Folder)
 625             return 4;
 626         return 5;
 627     }
 628
 629     var typeWeight1 = typeWeight(treeElement1);
 630     var typeWeight2 = typeWeight(treeElement2);
 631
 632     var result;
 633     if (typeWeight1 > typeWeight2)
 634         result = 1;
 635     else if (typeWeight1 < typeWeight2)
 636         result = -1;
 637     else {
 638         var title1 = treeElement1.titleText;
 639         var title2 = treeElement2.titleText;
 640         result = title1.compareTo(title2);
 641     }
 642     return result;
 643 }
 644
 645 /**
 646  * @constructor
 647  * @extends {TreeElement}
 648  * @param {string} type
 649  * @param {string} title
 650  * @param {!Array.<string>} iconClasses
 651  * @param {boolean} expandable
 652  * @param {boolean=} noIcon
 653  */
 654 WebInspector.BaseNavigatorTreeElement = function(type, title, iconClasses, expandable, noIcon)
 655 {
 656     this._type = type;
 657     TreeElement.call(this, "", expandable);
 658     this._titleText = title;
 659     this._iconClasses = iconClasses;
 660     this._noIcon = noIcon;
 661 }
 662
 663 WebInspector.BaseNavigatorTreeElement.prototype = {
 664     onattach: function()
 665     {
 666         this.listItemElement.removeChildren();
 667         if (this._iconClasses) {
 668             for (var i = 0; i < this._iconClasses.length; ++i)
 669                 this.listItemElement.classList.add(this._iconClasses[i]);
 670         }
 671
 672         this.listItemElement.createChild("div", "selection");
 673
 674         if (!this._noIcon)
 675             this.imageElement = this.listItemElement.createChild("img", "icon");
 676
 677         this.titleElement = this.listItemElement.createChild("div", "base-navigator-tree-element-title");
 678         this.titleElement.textContent = this._titleText;
 679     },
 680
 681     /**
 682      * @param {!Array.<string>} iconClasses
 683      */
 684     updateIconClasses: function(iconClasses)
 685     {
 686         for (var i = 0; i < this._iconClasses.length; ++i)
 687             this.listItemElement.classList.remove(this._iconClasses[i]);
 688         this._iconClasses = iconClasses;
 689         for (var i = 0; i < this._iconClasses.length; ++i)
 690             this.listItemElement.classList.add(this._iconClasses[i]);
 691     },
 692
 693     onreveal: function()
 694     {
 695         if (this.listItemElement)
 696             this.listItemElement.scrollIntoViewIfNeeded(true);
 697     },
 698
 699     /**
 700      * @return {string}
 701      */
 702     get titleText()
 703     {
 704         return this._titleText;
 705     },
 706
 707     set titleText(titleText)
 708     {
 709         if (this._titleText === titleText)
 710             return;
 711         this._titleText = titleText || "";
 712         if (this.titleElement) {
 713             this.titleElement.textContent = this._titleText;
 714             this.titleElement.title = this._titleText;
 715         }
 716     },
 717
 718     /**
 719      * @return {string}
 720      */
 721     type: function()
 722     {
 723         return this._type;
 724     },
 725
 726     __proto__: TreeElement.prototype
 727 }
 728
 729 /**
 730  * @constructor
 731  * @extends {WebInspector.BaseNavigatorTreeElement}
 732  * @param {!WebInspector.NavigatorView} navigatorView
 733  * @param {string} type
 734  * @param {string} title
 735  */
 736 WebInspector.NavigatorFolderTreeElement = function(navigatorView, type, title)
 737 {
 738     var iconClass = WebInspector.NavigatorView.iconClassForType(type);
 739     WebInspector.BaseNavigatorTreeElement.call(this, type, title, [iconClass], true);
 740     this._navigatorView = navigatorView;
 741 }
 742
 743 WebInspector.NavigatorFolderTreeElement.prototype = {
 744     onpopulate: function()
 745     {
 746         this._node.populate();
 747     },
 748
 749     onattach: function()
 750     {
 751         WebInspector.BaseNavigatorTreeElement.prototype.onattach.call(this);
 752         this.collapse();
 753         this.listItemElement.addEventListener("contextmenu", this._handleContextMenuEvent.bind(this), false);
 754     },
 755
 756     /**
 757      * @param {!WebInspector.NavigatorFolderTreeNode} node
 758      */
 759     setNode: function(node)
 760     {
 761         this._node = node;
 762         var paths = [];
 763         while (node && !node.isRoot()) {
 764             paths.push(node._title);
 765             node = node.parent;
 766         }
 767         paths.reverse();
 768         this.tooltip = paths.join("/");
 769     },
 770
 771     /**
 772      * @param {!Event} event
 773      */
 774     _handleContextMenuEvent: function(event)
 775     {
 776         if (!this._node)
 777             return;
 778         this.select();
 779         this._navigatorView.handleFolderContextMenu(event, this._node);
 780     },
 781
 782     __proto__: WebInspector.BaseNavigatorTreeElement.prototype
 783 }
 784
 785 /**
 786  * @constructor
 787  * @extends {WebInspector.BaseNavigatorTreeElement}
 788  * @param {!WebInspector.NavigatorView} navigatorView
 789  * @param {!WebInspector.UISourceCode} uiSourceCode
 790  * @param {string} title
 791  */
 792 WebInspector.NavigatorSourceTreeElement = function(navigatorView, uiSourceCode, title)
 793 {
 794     this._navigatorView = navigatorView;
 795     this._uiSourceCode = uiSourceCode;
 796     WebInspector.BaseNavigatorTreeElement.call(this, WebInspector.NavigatorView.Types.UISourceCode, title, this._calculateIconClasses(), false);
 797     this.tooltip = uiSourceCode.originURL();
 798 }
 799
 800 WebInspector.NavigatorSourceTreeElement.prototype = {
 801     /**
 802      * @return {!WebInspector.UISourceCode}
 803      */
 804     get uiSourceCode()
 805     {
 806         return this._uiSourceCode;
 807     },
 808
 809     /**
 810      * @return {!Array.<string>}
 811      */
 812     _calculateIconClasses: function()
 813     {
 814         return ["navigator-" + this._uiSourceCode.contentType().name() + "-tree-item"];
 815     },
 816
 817     updateIcon: function()
 818     {
 819         this.updateIconClasses(this._calculateIconClasses());
 820     },
 821
 822     onattach: function()
 823     {
 824         WebInspector.BaseNavigatorTreeElement.prototype.onattach.call(this);
 825         this.listItemElement.draggable = true;
 826         this.listItemElement.addEventListener("click", this._onclick.bind(this), false);
 827         this.listItemElement.addEventListener("contextmenu", this._handleContextMenuEvent.bind(this), false);
 828         this.listItemElement.addEventListener("mousedown", this._onmousedown.bind(this), false);
 829         this.listItemElement.addEventListener("dragstart", this._ondragstart.bind(this), false);
 830     },
 831
 832     _onmousedown: function(event)
 833     {
 834         if (event.which === 1) // Warm-up data for drag'n'drop
 835             this._uiSourceCode.requestContent(callback.bind(this));
 836         /**
 837          * @param {?string} content
 838          * @this {WebInspector.NavigatorSourceTreeElement}
 839          */
 840         function callback(content)
 841         {
 842             this._warmedUpContent = content;
 843         }
 844     },
 845
 846     _shouldRenameOnMouseDown: function()
 847     {
 848         if (!this._uiSourceCode.canRename())
 849             return false;
 850         var isSelected = this === this.treeOutline.selectedTreeElement;
 851         var document = this.treeOutline.element.ownerDocument;
 852         var isFocused = this.treeOutline.element.isSelfOrAncestor(document.activeElement);
 853         return isSelected && isFocused && !WebInspector.isBeingEdited(this.treeOutline.element);
 854     },
 855
 856     selectOnMouseDown: function(event)
 857     {
 858         if (event.which !== 1 || !this._shouldRenameOnMouseDown()) {
 859             TreeElement.prototype.selectOnMouseDown.call(this, event);
 860             return;
 861         }
 862         setTimeout(rename.bind(this), 300);
 863
 864         /**
 865          * @this {WebInspector.NavigatorSourceTreeElement}
 866          */
 867         function rename()
 868         {
 869             if (this._shouldRenameOnMouseDown())
 870                 this._navigatorView.rename(this.uiSourceCode, false);
 871         }
 872     },
 873
 874     _ondragstart: function(event)
 875     {
 876         event.dataTransfer.setData("text/plain", this._warmedUpContent);
 877         event.dataTransfer.effectAllowed = "copy";
 878         return true;
 879     },
 880
 881     /**
 882      * @override
 883      * @return {boolean}
 884      */
 885     onspace: function()
 886     {
 887         this._navigatorView._sourceSelected(this.uiSourceCode, true);
 888         return true;
 889     },
 890
 891     /**
 892      * @param {!Event} event
 893      */
 894     _onclick: function(event)
 895     {
 896         this._navigatorView._sourceSelected(this.uiSourceCode, false);
 897     },
 898
 899     /**
 900      * @override
 901      * @return {boolean}
 902      */
 903     ondblclick: function(event)
 904     {
 905         var middleClick = event.button === 1;
 906         this._navigatorView._sourceSelected(this.uiSourceCode, !middleClick);
 907         return false;
 908     },
 909
 910     /**
 911      * @override
 912      * @return {boolean}
 913      */
 914     onenter: function()
 915     {
 916         this._navigatorView._sourceSelected(this.uiSourceCode, true);
 917         return true;
 918     },
 919
 920     /**
 921      * @override
 922      * @return {boolean}
 923      */
 924     ondelete: function()
 925     {
 926         this._navigatorView.sourceDeleted(this.uiSourceCode);
 927         return true;
 928     },
 929
 930     /**
 931      * @param {!Event} event
 932      */
 933     _handleContextMenuEvent: function(event)
 934     {
 935         this.select();
 936         this._navigatorView.handleFileContextMenu(event, this._uiSourceCode);
 937     },
 938
 939     __proto__: WebInspector.BaseNavigatorTreeElement.prototype
 940 }
 941
 942 /**
 943  * @constructor
 944  * @param {string} id
 945  */
 946 WebInspector.NavigatorTreeNode = function(id)
 947 {
 948     this.id = id;
 949     /** @type {!Map.<string, !WebInspector.NavigatorTreeNode>} */
 950     this._children = new Map();
 951 }
 952
 953 WebInspector.NavigatorTreeNode.prototype = {
 954     /**
 955      * @return {!TreeElement}
 956      */
 957     treeNode: function() { throw "Not implemented"; },
 958
 959     dispose: function() { },
 960
 961     /**
 962      * @return {boolean}
 963      */
 964     isRoot: function()
 965     {
 966         return false;
 967     },
 968
 969     /**
 970      * @return {boolean}
 971      */
 972     hasChildren: function()
 973     {
 974         return true;
 975     },
 976
 977     populate: function()
 978     {
 979         if (this.isPopulated())
 980             return;
 981         if (this.parent)
 982             this.parent.populate();
 983         this._populated = true;
 984         this.wasPopulated();
 985     },
 986
 987     wasPopulated: function()
 988     {
 989         var children = this.children();
 990         for (var i = 0; i < children.length; ++i)
 991             this.treeNode().appendChild(/** @type {!TreeElement} */ (children[i].treeNode()));
 992     },
 993
 994     /**
 995      * @param {!WebInspector.NavigatorTreeNode} node
 996      */
 997     didAddChild: function(node)
 998     {
 999         if (this.isPopulated())
1000             this.treeNode().appendChild(/** @type {!TreeElement} */ (node.treeNode()));
1001     },
1002
1003     /**
1004      * @param {!WebInspector.NavigatorTreeNode} node
1005      */
1006     willRemoveChild: function(node)
1007     {
1008         if (this.isPopulated())
1009             this.treeNode().removeChild(/** @type {!TreeElement} */ (node.treeNode()));
1010     },
1011
1012     /**
1013      * @return {boolean}
1014      */
1015     isPopulated: function()
1016     {
1017         return this._populated;
1018     },
1019
1020     /**
1021      * @return {boolean}
1022      */
1023     isEmpty: function()
1024     {
1025         return !this._children.size;
1026     },
1027
1028     /**
1029      * @param {string} id
1030      * @return {?WebInspector.NavigatorTreeNode}
1031      */
1032     child: function(id)
1033     {
1034         return this._children.get(id) || null;
1035     },
1036
1037     /**
1038      * @return {!Array.<!WebInspector.NavigatorTreeNode>}
1039      */
1040     children: function()
1041     {
1042         return this._children.valuesArray();
1043     },
1044
1045     /**
1046      * @param {!WebInspector.NavigatorTreeNode} node
1047      */
1048     appendChild: function(node)
1049     {
1050         this._children.set(node.id, node);
1051         node.parent = this;
1052         this.didAddChild(node);
1053     },
1054
1055     /**
1056      * @param {!WebInspector.NavigatorTreeNode} node
1057      */
1058     removeChild: function(node)
1059     {
1060         this.willRemoveChild(node);
1061         this._children.remove(node.id);
1062         delete node.parent;
1063         node.dispose();
1064     },
1065
1066     reset: function()
1067     {
1068         this._children.clear();
1069     }
1070 }
1071
1072 /**
1073  * @constructor
1074  * @extends {WebInspector.NavigatorTreeNode}
1075  * @param {!WebInspector.NavigatorView} navigatorView
1076  */
1077 WebInspector.NavigatorRootTreeNode = function(navigatorView)
1078 {
1079     WebInspector.NavigatorTreeNode.call(this, "");
1080     this._navigatorView = navigatorView;
1081 }
1082
1083 WebInspector.NavigatorRootTreeNode.prototype = {
1084     /**
1085      * @override
1086      * @return {boolean}
1087      */
1088     isRoot: function()
1089     {
1090         return true;
1091     },
1092
1093     /**
1094      * @override
1095      * @return {!TreeElement}
1096      */
1097     treeNode: function()
1098     {
1099         return this._navigatorView._scriptsTree.rootElement();
1100     },
1101
1102     __proto__: WebInspector.NavigatorTreeNode.prototype
1103 }
1104
1105 /**
1106  * @constructor
1107  * @extends {WebInspector.NavigatorTreeNode}
1108  * @param {!WebInspector.NavigatorView} navigatorView
1109  * @param {!WebInspector.UISourceCode} uiSourceCode
1110  */
1111 WebInspector.NavigatorUISourceCodeTreeNode = function(navigatorView, uiSourceCode)
1112 {
1113     WebInspector.NavigatorTreeNode.call(this, uiSourceCode.name());
1114     this._navigatorView = navigatorView;
1115     this._uiSourceCode = uiSourceCode;
1116     this._treeElement = null;
1117 }
1118
1119 WebInspector.NavigatorUISourceCodeTreeNode.prototype = {
1120     /**
1121      * @return {!WebInspector.UISourceCode}
1122      */
1123     uiSourceCode: function()
1124     {
1125         return this._uiSourceCode;
1126     },
1127
1128     updateIcon: function()
1129     {
1130         if (this._treeElement)
1131             this._treeElement.updateIcon();
1132     },
1133
1134     /**
1135      * @override
1136      * @return {!TreeElement}
1137      */
1138     treeNode: function()
1139     {
1140         if (this._treeElement)
1141             return this._treeElement;
1142
1143         this._treeElement = new WebInspector.NavigatorSourceTreeElement(this._navigatorView, this._uiSourceCode, "");
1144         this.updateTitle();
1145
1146         this._uiSourceCode.addEventListener(WebInspector.UISourceCode.Events.TitleChanged, this._titleChanged, this);
1147         this._uiSourceCode.addEventListener(WebInspector.UISourceCode.Events.WorkingCopyChanged, this._workingCopyChanged, this);
1148         this._uiSourceCode.addEventListener(WebInspector.UISourceCode.Events.WorkingCopyCommitted, this._workingCopyCommitted, this);
1149
1150         return this._treeElement;
1151     },
1152
1153     /**
1154      * @param {boolean=} ignoreIsDirty
1155      */
1156     updateTitle: function(ignoreIsDirty)
1157     {
1158         if (!this._treeElement)
1159             return;
1160
1161         var titleText = this._uiSourceCode.displayName();
1162         if (!ignoreIsDirty && (this._uiSourceCode.isDirty() || this._uiSourceCode.hasUnsavedCommittedChanges()))
1163             titleText = "*" + titleText;
1164         this._treeElement.titleText = titleText;
1165     },
1166
1167     /**
1168      * @override
1169      * @return {boolean}
1170      */
1171     hasChildren: function()
1172     {
1173         return false;
1174     },
1175
1176     dispose: function()
1177     {
1178         if (!this._treeElement)
1179             return;
1180         this._uiSourceCode.removeEventListener(WebInspector.UISourceCode.Events.TitleChanged, this._titleChanged, this);
1181         this._uiSourceCode.removeEventListener(WebInspector.UISourceCode.Events.WorkingCopyChanged, this._workingCopyChanged, this);
1182         this._uiSourceCode.removeEventListener(WebInspector.UISourceCode.Events.WorkingCopyCommitted, this._workingCopyCommitted, this);
1183     },
1184
1185     _titleChanged: function(event)
1186     {
1187         this.updateTitle();
1188     },
1189
1190     _workingCopyChanged: function(event)
1191     {
1192         this.updateTitle();
1193     },
1194
1195     _workingCopyCommitted: function(event)
1196     {
1197         this.updateTitle();
1198     },
1199
1200     /**
1201      * @param {boolean=} select
1202      */
1203     reveal: function(select)
1204     {
1205         this.parent.populate();
1206         this.parent.treeNode().expand();
1207         this._treeElement.reveal();
1208         if (select)
1209             this._treeElement.select(true);
1210     },
1211
1212     /**
1213      * @param {function(boolean)=} callback
1214      */
1215     rename: function(callback)
1216     {
1217         if (!this._treeElement)
1218             return;
1219
1220         // Tree outline should be marked as edited as well as the tree element to prevent search from starting.
1221         var treeOutlineElement = this._treeElement.treeOutline.element;
1222         WebInspector.markBeingEdited(treeOutlineElement, true);
1223
1224         /**
1225          * @param {!Element} element
1226          * @param {string} newTitle
1227          * @param {string} oldTitle
1228          * @this {WebInspector.NavigatorUISourceCodeTreeNode}
1229          */
1230         function commitHandler(element, newTitle, oldTitle)
1231         {
1232             if (newTitle !== oldTitle) {
1233                 this._treeElement.titleText = newTitle;
1234                 this._uiSourceCode.rename(newTitle, renameCallback.bind(this));
1235                 return;
1236             }
1237             afterEditing.call(this, true);
1238         }
1239
1240         /**
1241          * @param {boolean} success
1242          * @this {WebInspector.NavigatorUISourceCodeTreeNode}
1243          */
1244         function renameCallback(success)
1245         {
1246             if (!success) {
1247                 WebInspector.markBeingEdited(treeOutlineElement, false);
1248                 this.updateTitle();
1249                 this.rename(callback);
1250                 return;
1251             }
1252             afterEditing.call(this, true);
1253         }
1254
1255         /**
1256          * @this {WebInspector.NavigatorUISourceCodeTreeNode}
1257          */
1258         function cancelHandler()
1259         {
1260             afterEditing.call(this, false);
1261         }
1262
1263         /**
1264          * @param {boolean} committed
1265          * @this {WebInspector.NavigatorUISourceCodeTreeNode}
1266          */
1267         function afterEditing(committed)
1268         {
1269             WebInspector.markBeingEdited(treeOutlineElement, false);
1270             this.updateTitle();
1271             this._treeElement.treeOutline.focus();
1272             if (callback)
1273                 callback(committed);
1274         }
1275
1276         var editingConfig = new WebInspector.InplaceEditor.Config(commitHandler.bind(this), cancelHandler.bind(this));
1277         this.updateTitle(true);
1278         WebInspector.InplaceEditor.startEditing(this._treeElement.titleElement, editingConfig);
1279         treeOutlineElement.getComponentSelection().setBaseAndExtent(this._treeElement.titleElement, 0, this._treeElement.titleElement, 1);
1280     },
1281
1282     __proto__: WebInspector.NavigatorTreeNode.prototype
1283 }
1284
1285 /**
1286  * @constructor
1287  * @extends {WebInspector.NavigatorTreeNode}
1288  * @param {!WebInspector.NavigatorView} navigatorView
1289  * @param {?WebInspector.Project} project
1290  * @param {string} id
1291  * @param {string} type
1292  * @param {string} folderPath
1293  * @param {string} title
1294  */
1295 WebInspector.NavigatorFolderTreeNode = function(navigatorView, project, id, type, folderPath, title)
1296 {
1297     WebInspector.NavigatorTreeNode.call(this, id);
1298     this._navigatorView = navigatorView;
1299     this._project = project;
1300     this._type = type;
1301     this._folderPath = folderPath;
1302     this._title = title;
1303 }
1304
1305 WebInspector.NavigatorFolderTreeNode.prototype = {
1306     /**
1307      * @override
1308      * @return {!TreeElement}
1309      */
1310     treeNode: function()
1311     {
1312         if (this._treeElement)
1313             return this._treeElement;
1314         this._treeElement = this._createTreeElement(this._title, this);
1315         return this._treeElement;
1316     },
1317
1318     /**
1319      * @return {!TreeElement}
1320      */
1321     _createTreeElement: function(title, node)
1322     {
1323         var treeElement = new WebInspector.NavigatorFolderTreeElement(this._navigatorView, this._type, title);
1324         treeElement.setNode(node);
1325         return treeElement;
1326     },
1327
1328     wasPopulated: function()
1329     {
1330         if (!this._treeElement || this._treeElement._node !== this)
1331             return;
1332         this._addChildrenRecursive();
1333     },
1334
1335     _addChildrenRecursive: function()
1336     {
1337         var children = this.children();
1338         for (var i = 0; i < children.length; ++i) {
1339             var child = children[i];
1340             this.didAddChild(child);
1341             if (child instanceof WebInspector.NavigatorFolderTreeNode)
1342                 child._addChildrenRecursive();
1343         }
1344     },
1345
1346     _shouldMerge: function(node)
1347     {
1348         return this._type !== WebInspector.NavigatorView.Types.Domain && node instanceof WebInspector.NavigatorFolderTreeNode;
1349     },
1350
1351     didAddChild: function(node)
1352     {
1353         function titleForNode(node)
1354         {
1355             return node._title;
1356         }
1357
1358         if (!this._treeElement)
1359             return;
1360
1361         var children = this.children();
1362
1363         if (children.length === 1 && this._shouldMerge(node)) {
1364             node._isMerged = true;
1365             this._treeElement.titleText = this._treeElement.titleText + "/" + node._title;
1366             node._treeElement = this._treeElement;
1367             this._treeElement.setNode(node);
1368             return;
1369         }
1370
1371         var oldNode;
1372         if (children.length === 2)
1373             oldNode = children[0] !== node ? children[0] : children[1];
1374         if (oldNode && oldNode._isMerged) {
1375             delete oldNode._isMerged;
1376             var mergedToNodes = [];
1377             mergedToNodes.push(this);
1378             var treeNode = this;
1379             while (treeNode._isMerged) {
1380                 treeNode = treeNode.parent;
1381                 mergedToNodes.push(treeNode);
1382             }
1383             mergedToNodes.reverse();
1384             var titleText = mergedToNodes.map(titleForNode).join("/");
1385
1386             var nodes = [];
1387             treeNode = oldNode;
1388             do {
1389                 nodes.push(treeNode);
1390                 children = treeNode.children();
1391                 treeNode = children.length === 1 ? children[0] : null;
1392             } while (treeNode && treeNode._isMerged);
1393
1394             if (!this.isPopulated()) {
1395                 this._treeElement.titleText = titleText;
1396                 this._treeElement.setNode(this);
1397                 for (var i = 0; i < nodes.length; ++i) {
1398                     delete nodes[i]._treeElement;
1399                     delete nodes[i]._isMerged;
1400                 }
1401                 return;
1402             }
1403             var oldTreeElement = this._treeElement;
1404             var treeElement = this._createTreeElement(titleText, this);
1405             for (var i = 0; i < mergedToNodes.length; ++i)
1406                 mergedToNodes[i]._treeElement = treeElement;
1407             oldTreeElement.parent.appendChild(treeElement);
1408
1409             oldTreeElement.setNode(nodes[nodes.length - 1]);
1410             oldTreeElement.titleText = nodes.map(titleForNode).join("/");
1411             oldTreeElement.parent.removeChild(oldTreeElement);
1412             this._treeElement.appendChild(oldTreeElement);
1413             if (oldTreeElement.expanded)
1414                 treeElement.expand();
1415         }
1416         if (this.isPopulated())
1417             this._treeElement.appendChild(node.treeNode());
1418     },
1419
1420     willRemoveChild: function(node)
1421     {
1422         if (node._isMerged || !this.isPopulated())
1423             return;
1424         this._treeElement.removeChild(node._treeElement);
1425     },
1426
1427     __proto__: WebInspector.NavigatorTreeNode.prototype
1428 }