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