Changeset 182042 in webkit


Ignore:
Timestamp:
Mar 26, 2015, 4:38:12 PM (10 years ago)
Author:
timothy@apple.com
Message:

Web Inspector: Convert TreeElement classes to ES6
​https://bugs.webkit.org/show_bug.cgi?id=143111

Reviewed by Joseph Pecoraro.

  • UserInterface/Views/ApplicationCacheFrameTreeElement.js:
  • UserInterface/Views/ApplicationCacheManifestTreeElement.js:
  • UserInterface/Views/BreakpointTreeElement.js:
  • UserInterface/Views/CallFrameTreeElement.js:
  • UserInterface/Views/ContentFlowTreeElement.js:
  • UserInterface/Views/CookieStorageTreeElement.js:
  • UserInterface/Views/DOMStorageTreeElement.js:
  • UserInterface/Views/DOMTreeElement.js:
  • UserInterface/Views/DOMTreeOutline.js:
  • UserInterface/Views/DatabaseHostTreeElement.js:
  • UserInterface/Views/DatabaseTableTreeElement.js:
  • UserInterface/Views/DatabaseTreeElement.js:
  • UserInterface/Views/FolderTreeElement.js:
  • UserInterface/Views/FolderizedTreeElement.js:
  • UserInterface/Views/FrameTreeElement.js:
  • UserInterface/Views/GeneralTreeElement.js:
  • UserInterface/Views/IndexedDatabaseHostTreeElement.js:
  • UserInterface/Views/IndexedDatabaseObjectStoreIndexTreeElement.js:
  • UserInterface/Views/IndexedDatabaseObjectStoreTreeElement.js:
  • UserInterface/Views/IndexedDatabaseTreeElement.js:
  • UserInterface/Views/LegacyConsoleMessageImpl.js:
  • UserInterface/Views/LogTreeElement.js:
  • UserInterface/Views/NavigationSidebarPanel.js:
  • UserInterface/Views/ObjectTreeArrayIndexTreeElement.js:
  • UserInterface/Views/ObjectTreeBaseTreeElement.js:
  • UserInterface/Views/ObjectTreeMapEntryTreeElement.js:
  • UserInterface/Views/ObjectTreePropertyTreeElement.js:
  • UserInterface/Views/ObjectTreeSetIndexTreeElement.js:
  • UserInterface/Views/ObjectTreeView.js:
  • UserInterface/Views/ProfileNodeTreeElement.js:
  • UserInterface/Views/PropertiesSection.js:
  • UserInterface/Views/ResourceTreeElement.js:
  • UserInterface/Views/ScriptTreeElement.js:
  • UserInterface/Views/SearchResultTreeElement.js:
  • UserInterface/Views/SourceCodeTimelineTreeElement.js:
  • UserInterface/Views/SourceCodeTreeElement.js:
  • UserInterface/Views/SourceMapResourceTreeElement.js:
  • UserInterface/Views/StorageTreeElement.js:
  • UserInterface/Views/TimelineDataGrid.js:
  • UserInterface/Views/TimelineRecordTreeElement.js:
  • UserInterface/Views/TreeElementStatusButton.js:
  • UserInterface/Views/TreeOutline.js:
  • UserInterface/Views/TreeOutlineDataGridSynchronizer.js:
  • UserInterface/Views/TypePropertiesSection.js:

Converted to ES6 classes where possible.

Location:
trunk/Source/WebInspectorUI
Files:
45 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r182041 r182042  
     12015-03-26  Timothy Hatcher  <timothy@apple.com>
     2
     3        Web Inspector: Convert TreeElement classes to ES6
     4        https://bugs.webkit.org/show_bug.cgi?id=143111
     5
     6        Reviewed by Joseph Pecoraro.
     7
     8        * UserInterface/Views/ApplicationCacheFrameTreeElement.js:
     9        * UserInterface/Views/ApplicationCacheManifestTreeElement.js:
     10        * UserInterface/Views/BreakpointTreeElement.js:
     11        * UserInterface/Views/CallFrameTreeElement.js:
     12        * UserInterface/Views/ContentFlowTreeElement.js:
     13        * UserInterface/Views/CookieStorageTreeElement.js:
     14        * UserInterface/Views/DOMStorageTreeElement.js:
     15        * UserInterface/Views/DOMTreeElement.js:
     16        * UserInterface/Views/DOMTreeOutline.js:
     17        * UserInterface/Views/DatabaseHostTreeElement.js:
     18        * UserInterface/Views/DatabaseTableTreeElement.js:
     19        * UserInterface/Views/DatabaseTreeElement.js:
     20        * UserInterface/Views/FolderTreeElement.js:
     21        * UserInterface/Views/FolderizedTreeElement.js:
     22        * UserInterface/Views/FrameTreeElement.js:
     23        * UserInterface/Views/GeneralTreeElement.js:
     24        * UserInterface/Views/IndexedDatabaseHostTreeElement.js:
     25        * UserInterface/Views/IndexedDatabaseObjectStoreIndexTreeElement.js:
     26        * UserInterface/Views/IndexedDatabaseObjectStoreTreeElement.js:
     27        * UserInterface/Views/IndexedDatabaseTreeElement.js:
     28        * UserInterface/Views/LegacyConsoleMessageImpl.js:
     29        * UserInterface/Views/LogTreeElement.js:
     30        * UserInterface/Views/NavigationSidebarPanel.js:
     31        * UserInterface/Views/ObjectTreeArrayIndexTreeElement.js:
     32        * UserInterface/Views/ObjectTreeBaseTreeElement.js:
     33        * UserInterface/Views/ObjectTreeMapEntryTreeElement.js:
     34        * UserInterface/Views/ObjectTreePropertyTreeElement.js:
     35        * UserInterface/Views/ObjectTreeSetIndexTreeElement.js:
     36        * UserInterface/Views/ObjectTreeView.js:
     37        * UserInterface/Views/ProfileNodeTreeElement.js:
     38        * UserInterface/Views/PropertiesSection.js:
     39        * UserInterface/Views/ResourceTreeElement.js:
     40        * UserInterface/Views/ScriptTreeElement.js:
     41        * UserInterface/Views/SearchResultTreeElement.js:
     42        * UserInterface/Views/SourceCodeTimelineTreeElement.js:
     43        * UserInterface/Views/SourceCodeTreeElement.js:
     44        * UserInterface/Views/SourceMapResourceTreeElement.js:
     45        * UserInterface/Views/StorageTreeElement.js:
     46        * UserInterface/Views/TimelineDataGrid.js:
     47        * UserInterface/Views/TimelineRecordTreeElement.js:
     48        * UserInterface/Views/TreeElementStatusButton.js:
     49        * UserInterface/Views/TreeOutline.js:
     50        * UserInterface/Views/TreeOutlineDataGridSynchronizer.js:
     51        * UserInterface/Views/TypePropertiesSection.js:
     52        Converted to ES6 classes where possible.
     53
    1542015-03-26  Timothy Hatcher  <timothy@apple.com>
    255

  • trunk/Source/WebInspectorUI/UserInterface/Views/ApplicationCacheFrameTreeElement.js

    r173436 r182042  
    11/*
    2  * Copyright (C) 2013 Apple Inc. All rights reserved.
     2 * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
    33 *
    44 * Redistribution and use in source and binary forms, with or without
    … …  
    2424 */
    2525
    26 WebInspector.ApplicationCacheFrameTreeElement = function(representedObject)
     26WebInspector.ApplicationCacheFrameTreeElement = class ApplicationCacheFrameTreeElement extends WebInspector.GeneralTreeElement
    2727{
    28     console.assert(representedObject instanceof WebInspector.ApplicationCacheFrame);
     28    constructor(representedObject)
     29    {
     30        console.assert(representedObject instanceof WebInspector.ApplicationCacheFrame);
    2931
    30     WebInspector.GeneralTreeElement.call(this, WebInspector.ApplicationCacheFrameTreeElement.StyleClassName, "", "", representedObject, false);
     32        super("application-cache-frame", "", "", representedObject, false);
    3133
    32     this.small = true;
     34        this.small = true;
    3335
    34     this.updateTitles();
    35 };
     36        this.updateTitles();
     37    }
    3638
    37 WebInspector.ApplicationCacheFrameTreeElement.StyleClassName = "application-cache-frame";
    38 
    39 WebInspector.ApplicationCacheFrameTreeElement.prototype = {
    40     constructor: WebInspector.ApplicationCacheFrameTreeElement,
    41 
    42     updateTitles: function()
     39    updateTitles()
    4340    {
    4441        var url = this.representedObject.frame.url;
    … …  
    5855    }
    5956};
    60 
    61 WebInspector.ApplicationCacheFrameTreeElement.prototype.__proto__ = WebInspector.GeneralTreeElement.prototype;

  • trunk/Source/WebInspectorUI/UserInterface/Views/ApplicationCacheManifestTreeElement.js

    r173436 r182042  
    11/*
    2  * Copyright (C) 2013 Apple Inc. All rights reserved.
     2 * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
    33 *
    44 * Redistribution and use in source and binary forms, with or without
    … …  
    2424 */
    2525
    26 WebInspector.ApplicationCacheManifestTreeElement = function(representedObject)
     26WebInspector.ApplicationCacheManifestTreeElement = class ApplicationCacheManifestTreeElement extends WebInspector.StorageTreeElement
    2727{
    28     console.assert(representedObject instanceof WebInspector.ApplicationCacheManifest);
     28    constructor(representedObject)
     29    {
     30        console.assert(representedObject instanceof WebInspector.ApplicationCacheManifest);
    2931
    30     WebInspector.StorageTreeElement.call(this, WebInspector.ApplicationCacheManifestTreeElement.StyleClassName, "", representedObject);
    31 };
    32 
    33 WebInspector.ApplicationCacheManifestTreeElement.StyleClassName = "application-cache-manifest";
    34 
    35 WebInspector.ApplicationCacheManifestTreeElement.prototype = {
    36     constructor: WebInspector.ApplicationCacheManifestTreeElement,
     32        super("application-cache-manifest", "", representedObject);
     33    }
    3734
    3835    // Public
    … …  
    4441
    4542        return this._name;
    46     },
     43    }
    4744
    4845    get secondaryName()
    … …  
    5249
    5350        return this._secondaryName;
    54     },
     51    }
    5552
    5653    get categoryName()
    5754    {
    5855        return WebInspector.UIString("Application Cache");
    59     },
     56    }
    6057
    61     _generateTitles: function()
     58    _generateTitles()
    6259    {
    6360        var parsedURL = parseURL(this.representedObject.manifestURL);
    … …  
    7168    }
    7269};
    73 
    74 WebInspector.ApplicationCacheManifestTreeElement.prototype.__proto__ = WebInspector.StorageTreeElement.prototype;

  • trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointTreeElement.js

    r181759 r182042  
    11/*
    2  * Copyright (C) 2013, 2014 Apple Inc. All rights reserved.
     2 * Copyright (C) 2013-2015 Apple Inc. All rights reserved.
    33 *
    44 * Redistribution and use in source and binary forms, with or without
    … …  
    2424 */
    2525
    26 WebInspector.BreakpointTreeElement = function(breakpoint, className, title)
     26WebInspector.BreakpointTreeElement = class BreakpointTreeElement extends WebInspector.GeneralTreeElement
    2727{
    28     console.assert(breakpoint instanceof WebInspector.Breakpoint);
    29 
    30     if (!className)
    31         className = WebInspector.BreakpointTreeElement.GenericLineIconStyleClassName;
    32 
    33     WebInspector.GeneralTreeElement.call(this, [WebInspector.BreakpointTreeElement.StyleClassName, className], title, null, breakpoint, false);
    34 
    35     this._breakpoint = breakpoint;
    36 
    37     this._listeners = new WebInspector.EventListenerSet(this, "BreakpointTreeElement listeners");
    38     if (!title)
    39         this._listeners.register(breakpoint, WebInspector.Breakpoint.Event.LocationDidChange, this._breakpointLocationDidChange);
    40     this._listeners.register(breakpoint, WebInspector.Breakpoint.Event.DisabledStateDidChange, this._updateStatus);
    41     this._listeners.register(breakpoint, WebInspector.Breakpoint.Event.AutoContinueDidChange, this._updateStatus);
    42     this._listeners.register(breakpoint, WebInspector.Breakpoint.Event.ResolvedStateDidChange, this._updateStatus);
    43     this._listeners.register(WebInspector.debuggerManager, WebInspector.DebuggerManager.Event.BreakpointsEnabledDidChange, this._updateStatus);
    44 
    45     this._listeners.register(WebInspector.probeManager, WebInspector.ProbeManager.Event.ProbeSetAdded, this._probeSetAdded);
    46     this._listeners.register(WebInspector.probeManager, WebInspector.ProbeManager.Event.ProbeSetRemoved, this._probeSetRemoved);
    47 
    48     this._statusImageElement = document.createElement("img");
    49     this._statusImageElement.className = WebInspector.BreakpointTreeElement.StatusImageElementStyleClassName;
    50     this._listeners.register(this._statusImageElement, "mousedown", this._statusImageElementMouseDown);
    51     this._listeners.register(this._statusImageElement, "click", this._statusImageElementClicked);
    52 
    53     if (!title)
    54         this._updateTitles();
    55     this._updateStatus();
    56 
    57     this.status = this._statusImageElement;
    58     this.small = true;
    59 
    60     this._iconAnimationLayerElement = document.createElement("span");
    61     this.iconElement.appendChild(this._iconAnimationLayerElement);
    62 };
    63 
    64 WebInspector.BreakpointTreeElement.GenericLineIconStyleClassName = "breakpoint-generic-line-icon";
    65 WebInspector.BreakpointTreeElement.StyleClassName = "breakpoint";
    66 WebInspector.BreakpointTreeElement.StatusImageElementStyleClassName = "status-image";
    67 WebInspector.BreakpointTreeElement.StatusImageResolvedStyleClassName = "resolved";
    68 WebInspector.BreakpointTreeElement.StatusImageAutoContinueStyleClassName = "auto-continue";
    69 WebInspector.BreakpointTreeElement.StatusImageDisabledStyleClassName = "disabled";
    70 WebInspector.BreakpointTreeElement.FormattedLocationStyleClassName = "formatted-location";
    71 WebInspector.BreakpointTreeElement.ProbeDataUpdatedStyleClassName = "data-updated";
    72 
    73 WebInspector.BreakpointTreeElement.ProbeDataUpdatedAnimationDuration = 400; // milliseconds
    74 
    75 
    76 WebInspector.BreakpointTreeElement.prototype = {
    77     constructor: WebInspector.BreakpointTreeElement,
     28    constructor(breakpoint, className, title)
     29    {
     30        console.assert(breakpoint instanceof WebInspector.Breakpoint);
     31
     32        if (!className)
     33            className = WebInspector.BreakpointTreeElement.GenericLineIconStyleClassName;
     34
     35        super(["breakpoint", className], title, null, breakpoint, false);
     36
     37        this._breakpoint = breakpoint;
     38
     39        this._listeners = new WebInspector.EventListenerSet(this, "BreakpointTreeElement listeners");
     40        if (!title)
     41            this._listeners.register(breakpoint, WebInspector.Breakpoint.Event.LocationDidChange, this._breakpointLocationDidChange);
     42        this._listeners.register(breakpoint, WebInspector.Breakpoint.Event.DisabledStateDidChange, this._updateStatus);
     43        this._listeners.register(breakpoint, WebInspector.Breakpoint.Event.AutoContinueDidChange, this._updateStatus);
     44        this._listeners.register(breakpoint, WebInspector.Breakpoint.Event.ResolvedStateDidChange, this._updateStatus);
     45        this._listeners.register(WebInspector.debuggerManager, WebInspector.DebuggerManager.Event.BreakpointsEnabledDidChange, this._updateStatus);
     46
     47        this._listeners.register(WebInspector.probeManager, WebInspector.ProbeManager.Event.ProbeSetAdded, this._probeSetAdded);
     48        this._listeners.register(WebInspector.probeManager, WebInspector.ProbeManager.Event.ProbeSetRemoved, this._probeSetRemoved);
     49
     50        this._statusImageElement = document.createElement("img");
     51        this._statusImageElement.className = WebInspector.BreakpointTreeElement.StatusImageElementStyleClassName;
     52        this._listeners.register(this._statusImageElement, "mousedown", this._statusImageElementMouseDown);
     53        this._listeners.register(this._statusImageElement, "click", this._statusImageElementClicked);
     54
     55        if (!title)
     56            this._updateTitles();
     57        this._updateStatus();
     58
     59        this.status = this._statusImageElement;
     60        this.small = true;
     61
     62        this._iconAnimationLayerElement = document.createElement("span");
     63        this.iconElement.appendChild(this._iconAnimationLayerElement);
     64    }
    7865
    7966    // Public
    … …  
    8269    {
    8370        return this._breakpoint;
    84     },
     71    }
    8572
    8673    get filterableData()
    8774    {
    8875        return {text: this.breakpoint.url};
    89     },
    90 
    91     ondelete: function()
     76    }
     77
     78    ondelete()
    9279    {
    9380        if (!WebInspector.debuggerManager.isBreakpointRemovable(this._breakpoint))
    … …  
    9683        WebInspector.debuggerManager.removeBreakpoint(this._breakpoint);
    9784        return true;
    98     },
    99 
    100     onenter: function()
     85    }
     86
     87    onenter()
    10188    {
    10289        this._breakpoint.cycleToNextMode();
    10390        return true;
    104     },
    105 
    106     onspace: function()
     91    }
     92
     93    onspace()
    10794    {
    10895        this._breakpoint.cycleToNextMode();
    10996        return true;
    110     },
    111 
    112     oncontextmenu: function(event)
     97    }
     98
     99    oncontextmenu(event)
    113100    {
    114101        var contextMenu = new WebInspector.ContextMenu(event);
    115102        this._breakpoint.appendContextMenuItems(contextMenu, this._statusImageElement);
    116103        contextMenu.show();
    117     },
    118 
    119     onattach: function()
     104    }
     105
     106    onattach()
    120107    {
    121108        WebInspector.GeneralTreeElement.prototype.onattach.call(this);
    … …  
    126113            if (probeSet.breakpoint === this._breakpoint)
    127114                this._addProbeSet(probeSet);
    128     },
    129 
    130     ondetach: function()
     115    }
     116
     117    ondetach()
    131118    {
    132119        WebInspector.GeneralTreeElement.prototype.ondetach.call(this);
    … …  
    136123        if (this._probeSet)
    137124            this._removeProbeSet(this._probeSet);
    138     },
    139 
    140     removeStatusImage: function()
     125    }
     126
     127    removeStatusImage()
    141128    {
    142129        this._statusImageElement.remove();
    143130        this._statusImageElement = null;
    144     },
     131    }
    145132
    146133    // Private
    147134
    148     _updateTitles: function()
     135    _updateTitles()
    149136    {
    150137        var sourceCodeLocation = this._breakpoint.sourceCodeLocation;
    … …  
    167154            this.tooltip = this.mainTitle + " \u2014 " + WebInspector.UIString("originally %s").format(sourceCodeLocation.originalLocationString());
    168155        }
    169     },
    170 
    171     _updateStatus: function()
     156    }
     157
     158    _updateStatus()
    172159    {
    173160        if (!this._statusImageElement)
    … …  
    188175        else
    189176            this._statusImageElement.classList.remove(WebInspector.BreakpointTreeElement.StatusImageResolvedStyleClassName);
    190     },
    191 
    192     _addProbeSet: function(probeSet)
     177    }
     178
     179    _addProbeSet(probeSet)
    193180    {
    194181        console.assert(probeSet instanceof WebInspector.ProbeSet);
    … …  
    199186        probeSet.addEventListener(WebInspector.ProbeSet.Event.SamplesCleared, this._samplesCleared, this);
    200187        probeSet.dataTable.addEventListener(WebInspector.ProbeSetDataTable.Event.FrameInserted, this._dataUpdated, this);
    201     },
    202 
    203     _removeProbeSet: function(probeSet)
     188    }
     189
     190    _removeProbeSet(probeSet)
    204191    {
    205192        console.assert(probeSet instanceof WebInspector.ProbeSet);
    … …  
    209196        probeSet.dataTable.removeEventListener(WebInspector.ProbeSetDataTable.Event.FrameInserted, this._dataUpdated, this);
    210197        delete this._probeSet;
    211     },
    212 
    213     _probeSetAdded: function(event)
     198    }
     199
     200    _probeSetAdded(event)
    214201    {
    215202        var probeSet = event.data.probeSet;
    216203        if (probeSet.breakpoint === this._breakpoint)
    217204            this._addProbeSet(probeSet);
    218     },
    219 
    220     _probeSetRemoved: function(event)
     205    }
     206
     207    _probeSetRemoved(event)
    221208    {
    222209        var probeSet = event.data.probeSet;
    223210        if (probeSet.breakpoint === this._breakpoint)
    224211            this._removeProbeSet(probeSet);
    225     },
    226 
    227     _samplesCleared: function(event)
     212    }
     213
     214    _samplesCleared(event)
    228215    {
    229216        console.assert(this._probeSet);
    … …  
    232219        oldTable.removeEventListener(WebInspector.ProbeSetDataTable.Event.FrameInserted, this._dataUpdated, this);
    233220        this._probeSet.dataTable.addEventListener(WebInspector.ProbeSetDataTable.Event.FrameInserted, this._dataUpdated, this);
    234     },
    235 
    236     _dataUpdated: function()
     221    }
     222
     223    _dataUpdated()
    237224    {
    238225        if (this.element.classList.contains(WebInspector.BreakpointTreeElement.ProbeDataUpdatedStyleClassName)) {
    … …  
    249236            this.element.classList.remove(WebInspector.BreakpointTreeElement.ProbeDataUpdatedStyleClassName);
    250237        }.bind(this), WebInspector.BreakpointTreeElement.ProbeDataUpdatedAnimationDuration);
    251     },
    252 
    253 
    254     _breakpointLocationDidChange: function(event)
     238    }
     239
     240
     241    _breakpointLocationDidChange(event)
    255242    {
    256243        console.assert(event.target === this._breakpoint);
    … …  
    261248
    262249        this._updateTitles();
    263     },
    264 
    265     _statusImageElementMouseDown: function(event)
     250    }
     251
     252    _statusImageElementMouseDown(event)
    266253    {
    267254        // To prevent the tree element from selecting.
    268255        event.stopPropagation();
    269     },
    270 
    271     _statusImageElementClicked: function(event)
     256    }
     257
     258    _statusImageElementClicked(event)
    272259    {
    273260        this._breakpoint.cycleToNextMode();
    … …  
    275262};
    276263
    277 WebInspector.BreakpointTreeElement.prototype.__proto__ = WebInspector.GeneralTreeElement.prototype;
     264WebInspector.BreakpointTreeElement.GenericLineIconStyleClassName = "breakpoint-generic-line-icon";
     265WebInspector.BreakpointTreeElement.StatusImageElementStyleClassName = "status-image";
     266WebInspector.BreakpointTreeElement.StatusImageResolvedStyleClassName = "resolved";
     267WebInspector.BreakpointTreeElement.StatusImageAutoContinueStyleClassName = "auto-continue";
     268WebInspector.BreakpointTreeElement.StatusImageDisabledStyleClassName = "disabled";
     269WebInspector.BreakpointTreeElement.FormattedLocationStyleClassName = "formatted-location";
     270WebInspector.BreakpointTreeElement.ProbeDataUpdatedStyleClassName = "data-updated";
     271
     272WebInspector.BreakpointTreeElement.ProbeDataUpdatedAnimationDuration = 400; // milliseconds

  • trunk/Source/WebInspectorUI/UserInterface/Views/CallFrameTreeElement.js

    r164543 r182042  
    11/*
    2  * Copyright (C) 2013 Apple Inc. All rights reserved.
     2 * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
    33 *
    44 * Redistribution and use in source and binary forms, with or without
    … …  
    2424 */
    2525
    26 WebInspector.CallFrameTreeElement = function(callFrame)
     26WebInspector.CallFrameTreeElement = class CallFrameTreeElement extends WebInspector.GeneralTreeElement
    2727{
    28     console.assert(callFrame instanceof WebInspector.CallFrame);
     28    constructor(callFrame)
     29    {
     30        console.assert(callFrame instanceof WebInspector.CallFrame);
    2931
    30     var className = WebInspector.CallFrameTreeElement.FunctionIconStyleClassName;
    31     if (callFrame.nativeCode)
    32         className = WebInspector.CallFrameTreeElement.NativeIconStyleClassName;
     32        var className = WebInspector.CallFrameTreeElement.FunctionIconStyleClassName;
     33        if (callFrame.nativeCode)
     34            className = WebInspector.CallFrameTreeElement.NativeIconStyleClassName;
    3335
    34     // This is more than likely an event listener function with an "on" prefix and it is
    35     // as long or longer than the shortest event listener name -- "oncut".
    36     if (callFrame.functionName && callFrame.functionName.startsWith("on") && callFrame.functionName.length >= 5)
    37         className = WebInspector.CallFrameTreeElement.EventListenerIconStyleClassName;
     36        // This is more than likely an event listener function with an "on" prefix and it is
     37        // as long or longer than the shortest event listener name -- "oncut".
     38        if (callFrame.functionName && callFrame.functionName.startsWith("on") && callFrame.functionName.length >= 5)
     39            className = WebInspector.CallFrameTreeElement.EventListenerIconStyleClassName;
    3840
    39     var title = callFrame.functionName || WebInspector.UIString("(anonymous function)");
     41        var title = callFrame.functionName || WebInspector.UIString("(anonymous function)");
    4042
    41     WebInspector.GeneralTreeElement.call(this, className, title, null, callFrame, false);
     43        super(className, title, null, callFrame, false);
    4244
    43     if (!callFrame.nativeCode && callFrame.sourceCodeLocation) {
    44         var displayScriptURL = callFrame.sourceCodeLocation.displaySourceCode.url;
    45         if (displayScriptURL) {
    46             this.subtitle = document.createElement("span");
    47             callFrame.sourceCodeLocation.populateLiveDisplayLocationString(this.subtitle, "textContent");
    48             // Set the tooltip on the entire tree element in onattach, once the element is created.
    49             this.tooltipHandledSeparately = true;
     45        if (!callFrame.nativeCode && callFrame.sourceCodeLocation) {
     46            var displayScriptURL = callFrame.sourceCodeLocation.displaySourceCode.url;
     47            if (displayScriptURL) {
     48                this.subtitle = document.createElement("span");
     49                callFrame.sourceCodeLocation.populateLiveDisplayLocationString(this.subtitle, "textContent");
     50                // Set the tooltip on the entire tree element in onattach, once the element is created.
     51                this.tooltipHandledSeparately = true;
     52            }
    5053        }
     54
     55        this._callFrame = callFrame;
     56
     57        this.small = true;
    5158    }
    52 
    53     this._callFrame = callFrame;
    54 
    55     this.small = true;
    56 };
    57 
    58 WebInspector.CallFrameTreeElement.FunctionIconStyleClassName = "function-icon";
    59 WebInspector.CallFrameTreeElement.EventListenerIconStyleClassName = "event-listener-icon";
    60 WebInspector.CallFrameTreeElement.NativeIconStyleClassName = "native-icon";
    61 
    62 WebInspector.CallFrameTreeElement.prototype = {
    63     constructor: WebInspector.CallFrameTreeElement,
    6459
    6560    // Public
    … …  
    6863    {
    6964        return this._callFrame;
    70     },
     65    }
    7166
    7267    // Protected
    7368
    74     onattach: function()
     69    onattach()
    7570    {
    7671        WebInspector.GeneralTreeElement.prototype.onattach.call(this);
    … …  
    8580};
    8681
    87 WebInspector.CallFrameTreeElement.prototype.__proto__ = WebInspector.GeneralTreeElement.prototype;
     82WebInspector.CallFrameTreeElement.FunctionIconStyleClassName = "function-icon";
     83WebInspector.CallFrameTreeElement.EventListenerIconStyleClassName = "event-listener-icon";
     84WebInspector.CallFrameTreeElement.NativeIconStyleClassName = "native-icon";

  • trunk/Source/WebInspectorUI/UserInterface/Views/ContentFlowTreeElement.js

    r173436 r182042  
    11/*
     2 * Copyright (C) 2015 Apple Inc. All rights reserved.
    23 * Copyright (C) 2013 Adobe Systems Incorporated. All rights reserved.
    34 *
    … …  
    2829 */
    2930
    30 WebInspector.ContentFlowTreeElement = function(representedObject)
     31WebInspector.ContentFlowTreeElement = class ContentFlowTreeElement extends WebInspector.GeneralTreeElement
    3132{
    32     console.assert(representedObject instanceof WebInspector.ContentFlow);
    33     WebInspector.GeneralTreeElement.call(this, [WebInspector.ContentFlowTreeElement.StyleClassName, WebInspector.ContentFlowTreeElement.ContentFlowIconStyleClassName], representedObject.name, null, representedObject, false);
     33    constructor(representedObject)
     34    {
     35        console.assert(representedObject instanceof WebInspector.ContentFlow);
    3436
    35     this.small = true;
     37        super([WebInspector.ContentFlowTreeElement.StyleClassName, WebInspector.ContentFlowTreeElement.ContentFlowIconStyleClassName], representedObject.name, null, representedObject, false);
     38
     39        this.small = true;
     40    }
    3641};
    3742
    3843WebInspector.ContentFlowTreeElement.ContentFlowIconStyleClassName = "content-flow-icon";
    39 
    40 WebInspector.ContentFlowTreeElement.prototype = {
    41     constructor: WebInspector.ContentFlowTreeElement
    42 };
    43 
    44 WebInspector.ContentFlowTreeElement.prototype.__proto__ = WebInspector.GeneralTreeElement.prototype;

  • trunk/Source/WebInspectorUI/UserInterface/Views/CookieStorageTreeElement.js

    r173436 r182042  
    11/*
    2  * Copyright (C) 2013 Apple Inc. All rights reserved.
     2 * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
    33 *
    44 * Redistribution and use in source and binary forms, with or without
    … …  
    2424 */
    2525
    26 WebInspector.CookieStorageTreeElement = function(representedObject)
     26WebInspector.CookieStorageTreeElement = class CookieStorageTreeElement extends WebInspector.StorageTreeElement
    2727{
    28     console.assert(representedObject instanceof WebInspector.CookieStorageObject);
     28    constructor(representedObject)
     29    {
     30        console.assert(representedObject instanceof WebInspector.CookieStorageObject);
    2931
    30     WebInspector.StorageTreeElement.call(this, WebInspector.CookieStorageTreeElement.CookieIconStyleClassName, WebInspector.displayNameForHost(representedObject.host), representedObject);
    31 };
    32 
    33 WebInspector.CookieStorageTreeElement.CookieIconStyleClassName = "cookie-icon";
    34 
    35 WebInspector.CookieStorageTreeElement.prototype = {
    36     constructor: WebInspector.CookieStorageTreeElement,
     32        super(WebInspector.CookieStorageTreeElement.CookieIconStyleClassName, WebInspector.displayNameForHost(representedObject.host), representedObject);
     33    }
    3734
    3835    // Public
    … …  
    4138    {
    4239        return this.representedObject.host;
    43     },
     40    }
    4441
    4542    get categoryName()
    … …  
    4946};
    5047
    51 WebInspector.CookieStorageTreeElement.prototype.__proto__ = WebInspector.StorageTreeElement.prototype;
     48WebInspector.CookieStorageTreeElement.CookieIconStyleClassName = "cookie-icon";

  • trunk/Source/WebInspectorUI/UserInterface/Views/DOMStorageTreeElement.js

    r164543 r182042  
    2424 */
    2525
    26 WebInspector.DOMStorageTreeElement = function(representedObject)
     26WebInspector.DOMStorageTreeElement = class DOMStorageTreeElement extends WebInspector.StorageTreeElement
    2727{
    28     console.assert(representedObject instanceof WebInspector.DOMStorageObject);
     28    constructor(representedObject)
     29    {
     30        console.assert(representedObject instanceof WebInspector.DOMStorageObject);
    2931
    30     if (representedObject.isLocalStorage())
    31         var className = WebInspector.DOMStorageTreeElement.LocalStorageIconStyleClassName;
    32     else
    33         var className = WebInspector.DOMStorageTreeElement.SessionStorageIconStyleClassName;
     32        if (representedObject.isLocalStorage())
     33            var className = WebInspector.DOMStorageTreeElement.LocalStorageIconStyleClassName;
     34        else
     35            var className = WebInspector.DOMStorageTreeElement.SessionStorageIconStyleClassName;
    3436
    35     WebInspector.StorageTreeElement.call(this, className, WebInspector.displayNameForHost(representedObject.host), representedObject);
    36 };
    37 
    38 WebInspector.DOMStorageTreeElement.LocalStorageIconStyleClassName = "local-storage-icon";
    39 WebInspector.DOMStorageTreeElement.SessionStorageIconStyleClassName = "session-storage-icon";
    40 
    41 WebInspector.DOMStorageTreeElement.prototype = {
    42     constructor: WebInspector.DOMStorageTreeElement,
     37        super(className, WebInspector.displayNameForHost(representedObject.host), representedObject);
     38    }
    4339
    4440    // Public
    … …  
    4743    {
    4844        return WebInspector.displayNameForHost(this.representedObject.host);
    49     },
     45    }
    5046
    5147    get categoryName()
    … …  
    5753};
    5854
    59 WebInspector.DOMStorageTreeElement.prototype.__proto__ = WebInspector.StorageTreeElement.prototype;
     55WebInspector.DOMStorageTreeElement.LocalStorageIconStyleClassName = "local-storage-icon";
     56WebInspector.DOMStorageTreeElement.SessionStorageIconStyleClassName = "session-storage-icon";

  • trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js

    r180593 r182042  
    11/*
    2  * Copyright (C) 2007, 2008, 2013 Apple Inc.  All rights reserved.
     2 * Copyright (C) 2007, 2008, 2013, 2015 Apple Inc.  All rights reserved.
    33 * Copyright (C) 2008 Matt Lilek <webkit@mattlilek.com>
    44 * Copyright (C) 2009 Joseph Pecoraro
    … …  
    2929 */
    3030
    31 WebInspector.DOMTreeElement = function(node, elementCloseTag)
     31WebInspector.DOMTreeElement = class DOMTreeElement extends WebInspector.TreeElement
    3232{
    33     this._elementCloseTag = elementCloseTag;
    34     var hasChildrenOverride = !elementCloseTag && node.hasChildNodes() && !this._showInlineText(node);
    35 
    36     // The title will be updated in onattach.
    37     TreeElement.call(this, "", node, hasChildrenOverride);
    38 
    39     if (this.representedObject.nodeType() === Node.ELEMENT_NODE && !elementCloseTag)
    40         this._canAddAttributes = true;
    41     this._searchQuery = null;
    42     this._expandedChildrenLimit = WebInspector.DOMTreeElement.InitialChildrenLimit;
    43 };
    44 
    45 WebInspector.DOMTreeElement.InitialChildrenLimit = 500;
    46 WebInspector.DOMTreeElement.MaximumInlineTextChildLength = 80;
    47 
    48 // A union of HTML4 and HTML5-Draft elements that explicitly
    49 // or implicitly (for HTML5) forbid the closing tag.
    50 // FIXME: Revise once HTML5 Final is published.
    51 WebInspector.DOMTreeElement.ForbiddenClosingTagElements = [
    52     "area", "base", "basefont", "br", "canvas", "col", "command", "embed", "frame",
    53     "hr", "img", "input", "isindex", "keygen", "link", "meta", "param", "source"
    54 ].keySet();
    55 
    56 // These tags we do not allow editing their tag name.
    57 WebInspector.DOMTreeElement.EditTagBlacklist = [
    58     "html", "head", "body"
    59 ].keySet();
    60 
    61 WebInspector.DOMTreeElement.SearchHighlightStyleClassName = "search-highlight";
    62 WebInspector.DOMTreeElement.BouncyHighlightStyleClassName = "bouncy-highlight";
    63 
    64 WebInspector.DOMTreeElement.prototype = {
    65     isCloseTag: function()
     33    constructor(node, elementCloseTag)
     34    {
     35        super("", node);
     36
     37        this._elementCloseTag = elementCloseTag;
     38        this.hasChildren = !elementCloseTag && node.hasChildNodes() && !this._showInlineText(node);
     39
     40        if (this.representedObject.nodeType() === Node.ELEMENT_NODE && !elementCloseTag)
     41            this._canAddAttributes = true;
     42        this._searchQuery = null;
     43        this._expandedChildrenLimit = WebInspector.DOMTreeElement.InitialChildrenLimit;
     44    }
     45
     46    isCloseTag()
    6647    {
    6748        return this._elementCloseTag;
    68     },
    69 
    70     highlightSearchResults: function(searchQuery)
     49    }
     50
     51    highlightSearchResults(searchQuery)
    7152    {
    7253        if (this._searchQuery !== searchQuery) {
    … …  
    7859        this._searchHighlightsVisible = true;
    7960        this.updateTitle(true);
    80     },
    81 
    82     hideSearchHighlights: function()
     61    }
     62
     63    hideSearchHighlights()
    8364    {
    8465        delete this._searchHighlightsVisible;
    8566        this._updateSearchHighlight(false);
    86     },
    87 
    88     emphasizeSearchHighlight: function()
     67    }
     68
     69    emphasizeSearchHighlight()
    8970    {
    9071        var highlightElement = this.title.querySelector("." + WebInspector.DOMTreeElement.SearchHighlightStyleClassName);
    … …  
    11798
    11899        this._bouncyHighlightElement.addEventListener("webkitAnimationEnd", animationEnded.bind(this));
    119     },
    120 
    121     _updateSearchHighlight: function(show)
     100    }
     101
     102    _updateSearchHighlight(show)
    122103    {
    123104        if (!this._highlightResult)
    … …  
    153134        for (var i = 0, size = this._highlightResult.length; i < size; ++i)
    154135            updater(this._highlightResult[i]);
    155     },
     136    }
    156137
    157138    get hovered()
    158139    {
    159140        return this._hovered;
    160     },
     141    }
    161142
    162143    set hovered(x)
    … …  
    175156            }
    176157        }
    177     },
     158    }
    178159
    179160    get expandedChildrenLimit()
    180161    {
    181162        return this._expandedChildrenLimit;
    182     },
     163    }
    183164
    184165    set expandedChildrenLimit(x)
    … …  
    190171        if (this.treeOutline && !this._updateChildrenInProgress)
    191172            this._updateChildren(true);
    192     },
     173    }
    193174
    194175    get expandedChildCount()
    … …  
    200181            count--;
    201182        return count;
    202     },
    203 
    204     showChild: function(index)
     183    }
     184
     185    showChild(index)
    205186    {
    206187        console.assert(!this._elementCloseTag);
    … …  
    215196        // Whether index-th child is visible in the children tree
    216197        return this.expandedChildCount > index;
    217     },
    218 
    219     _createTooltipForNode: function()
     198    }
     199
     200    _createTooltipForNode()
    220201    {
    221202        var node = this.representedObject;
    … …  
    257238        }
    258239        WebInspector.RemoteObject.resolveNode(node, "", resolvedNode.bind(this));
    259     },
    260 
    261     updateSelection: function()
     240    }
     241
     242    updateSelection()
    262243    {
    263244        var listItemElement = this.listItemElement;
    … …  
    278259
    279260        this.selectionElement.style.height = listItemElement.offsetHeight + "px";
    280     },
    281 
    282     onattach: function()
     261    }
     262
     263    onattach()
    283264    {
    284265        if (this._hovered) {
    … …  
    290271        this.listItemElement.draggable = true;
    291272        this.listItemElement.addEventListener("dragstart", this);
    292     },
    293 
    294     onpopulate: function()
     273    }
     274
     275    onpopulate()
    295276    {
    296277        if (this.children.length || this._showInlineText(this.representedObject) || this._elementCloseTag)
    … …  
    298279
    299280        this.updateChildren();
    300     },
    301 
    302     expandRecursively: function()
    303     {
    304         function callback()
    305         {
    306             TreeElement.prototype.expandRecursively.call(this, Number.MAX_VALUE);
    307         }
    308 
    309         this.representedObject.getSubtree(-1, callback.bind(this));
    310     },
    311 
    312     updateChildren: function(fullRefresh)
     281    }
     282
     283    expandRecursively()
     284    {
     285        this.representedObject.getSubtree(-1, super.expandRecursively.bind(this, Number.MAX_VALUE));
     286    }
     287
     288    updateChildren(fullRefresh)
    313289    {
    314290        if (this._elementCloseTag)
    315291            return;
    316292        this.representedObject.getChildNodes(this._updateChildren.bind(this, fullRefresh));
    317     },
    318 
    319     insertChildElement: function(child, index, closingTag)
     293    }
     294
     295    insertChildElement(child, index, closingTag)
    320296    {
    321297        var newElement = new WebInspector.DOMTreeElement(child, closingTag);
    … …  
    323299        this.insertChild(newElement, index);
    324300        return newElement;
    325     },
    326 
    327     moveChild: function(child, targetIndex)
     301    }
     302
     303    moveChild(child, targetIndex)
    328304    {
    329305        var wasSelected = child.selected;
    … …  
    332308        if (wasSelected)
    333309            child.select();
    334     },
    335 
    336     _updateChildren: function(fullRefresh)
     310    }
     311
     312    _updateChildren(fullRefresh)
    337313    {
    338314        if (this._updateChildrenInProgress || !this.treeOutline._visible)
    … …  
    422398
    423399        delete this._updateChildrenInProgress;
    424     },
    425 
    426     adjustCollapsedRange: function()
     400    }
     401
     402    adjustCollapsedRange()
    427403    {
    428404        // Ensure precondition: only the tree elements for node children are found in the tree
    … …  
    431407            this.removeChild(this.expandAllButtonElement.__treeElement);
    432408
    433         const node = this.representedObject;
     409        var node = this.representedObject;
    434410        if (!node.children)
    435411            return;
    436         const childNodeCount = node.children.length;
     412        var childNodeCount = node.children.length;
    437413
    438414        // In case some nodes from the expanded range were removed, pull some nodes from the collapsed range into the expanded range at the bottom.
    … …  
    440416            this.insertChildElement(node.children[i], i);
    441417
    442         const expandedChildCount = this.expandedChildCount;
     418        var expandedChildCount = this.expandedChildCount;
    443419        if (childNodeCount > this.expandedChildCount) {
    444420            var targetButtonIndex = expandedChildCount;
    … …  
    448424                button.value = "";
    449425
    450                 var item = new TreeElement(button, null, false);
     426                var item = new WebInspector.TreeElement(button, null, false);
    451427                item.selectable = false;
    452428                item.expandAllButton = true;
    … …  
    462438        } else if (this.expandAllButtonElement)
    463439            delete this.expandAllButtonElement;
    464     },
    465 
    466     handleLoadAllChildren: function()
     440    }
     441
     442    handleLoadAllChildren()
    467443    {
    468444        this.expandedChildrenLimit = Math.max(this.representedObject.childNodeCount, this.expandedChildrenLimit + WebInspector.DOMTreeElement.InitialChildrenLimit);
    469     },
    470 
    471     onexpand: function()
     445    }
     446
     447    onexpand()
    472448    {
    473449        if (this._elementCloseTag)
    … …  
    476452        this.updateTitle();
    477453        this.treeOutline.updateSelection();
    478     },
    479 
    480     oncollapse: function()
     454    }
     455
     456    oncollapse()
    481457    {
    482458        if (this._elementCloseTag)
    … …  
    485461        this.updateTitle();
    486462        this.treeOutline.updateSelection();
    487     },
    488 
    489     onreveal: function()
     463    }
     464
     465    onreveal()
    490466    {
    491467        if (this.listItemElement) {
    … …  
    496472                this.listItemElement.scrollIntoViewIfNeeded(false);
    497473        }
    498     },
    499 
    500     onselect: function(treeElement, selectedByUser)
     474    }
     475
     476    onselect(treeElement, selectedByUser)
    501477    {
    502478        this.treeOutline.suppressRevealAndSelect = true;
    … …  
    506482        this.updateSelection();
    507483        this.treeOutline.suppressRevealAndSelect = false;
    508     },
    509 
    510     ondeselect: function(treeElement)
     484    }
     485
     486    ondeselect(treeElement)
    511487    {
    512488        this.treeOutline.selectDOMNode(null);
    513     },
    514 
    515     ondelete: function()
     489    }
     490
     491    ondelete()
    516492    {
    517493        if (this.representedObject.isInShadowTree())
    … …  
    524500            this.remove();
    525501        return true;
    526     },
    527 
    528     onenter: function()
     502    }
     503
     504    onenter()
    529505    {
    530506        // On Enter or Return start editing the first attribute
    … …  
    537513        // prevent a newline from being immediately inserted
    538514        return true;
    539     },
    540 
    541     selectOnMouseDown: function(event)
    542     {
    543         TreeElement.prototype.selectOnMouseDown.call(this, event);
     515    }
     516
     517    selectOnMouseDown(event)
     518    {
     519        super.selectOnMouseDown(event);
    544520
    545521        if (this._editing)
    … …  
    549525        if (event.detail >= 2)
    550526            event.preventDefault();
    551     },
    552 
    553     ondblclick: function(event)
     527    }
     528
     529    ondblclick(event)
    554530    {
    555531        if (this._editing || this._elementCloseTag)
    … …  
    561537        if (this.hasChildren && !this.expanded)
    562538            this.expand();
    563     },
    564 
    565     _insertInLastAttributePosition: function(tag, node)
     539    }
     540
     541    _insertInLastAttributePosition(tag, node)
    566542    {
    567543        if (tag.getElementsByClassName("html-attribute").length > 0)
    … …  
    576552
    577553        this.updateSelection();
    578     },
    579 
    580     _startEditingTarget: function(eventTarget)
     554    }
     555
     556    _startEditingTarget(eventTarget)
    581557    {
    582558        if (this.treeOutline.selectedDOMNode() !== this.representedObject)
    … …  
    606582
    607583        return false;
    608     },
    609 
    610     _populateTagContextMenu: function(contextMenu, event)
     584    }
     585
     586    _populateTagContextMenu(contextMenu, event)
    611587    {
    612588        var node = this.representedObject;
    … …  
    630606        this._populateNodeContextMenu(contextMenu);
    631607        this.treeOutline._populateContextMenu(contextMenu, this.representedObject);
    632     },
    633 
    634     _populateForcedPseudoStateItems: function(subMenu)
     608    }
     609
     610    _populateForcedPseudoStateItems(subMenu)
    635611    {
    636612        var node = this.representedObject;
    … …  
    644620            }, enabled, false);
    645621        });
    646     },
    647 
    648     _populateTextContextMenu: function(contextMenu, textNode)
     622    }
     623
     624    _populateTextContextMenu(contextMenu, textNode)
    649625    {
    650626        var node = this.representedObject;
    … …  
    653629
    654630        this._populateNodeContextMenu(contextMenu);
    655     },
    656 
    657     _populateNodeContextMenu: function(contextMenu)
     631    }
     632
     633    _populateNodeContextMenu(contextMenu)
    658634    {
    659635        // Add free-form node-related actions.
    … …  
    664640        if (!node.isInShadowTree())
    665641            contextMenu.appendItem(WebInspector.UIString("Delete Node"), this.remove.bind(this));
    666     },
    667 
    668     _startEditing: function()
     642    }
     643
     644    _startEditing()
    669645    {
    670646        if (this.treeOutline.selectedDOMNode() !== this.representedObject)
    … …  
    690666            return false;
    691667        }
    692     },
    693 
    694     _addNewAttribute: function()
     668    }
     669
     670    _addNewAttribute()
    695671    {
    696672        // Cannot just convert the textual html into an element without
    … …  
    705681        this._insertInLastAttributePosition(tag, attr);
    706682        return this._startEditingAttribute(attr, attr);
    707     },
    708 
    709     _triggerEditAttribute: function(attributeName)
     683    }
     684
     685    _triggerEditAttribute(attributeName)
    710686    {
    711687        var attributeElements = this.listItemElement.getElementsByClassName("html-attribute-name");
    … …  
    721697            }
    722698        }
    723     },
    724 
    725     _startEditingAttribute: function(attribute, elementForSelection)
     699    }
     700
     701    _startEditingAttribute(attribute, elementForSelection)
    726702    {
    727703        if (WebInspector.isBeingEdited(attribute))
    … …  
    757733
    758734        return true;
    759     },
    760 
    761     _startEditingTextNode: function(textNode)
     735    }
     736
     737    _startEditingTextNode(textNode)
    762738    {
    763739        if (WebInspector.isBeingEdited(textNode))
    … …  
    770746
    771747        return true;
    772     },
    773 
    774     _startEditingTagName: function(tagNameElement)
     748    }
     749
     750    _startEditingTagName(tagNameElement)
    775751    {
    776752        if (!tagNameElement) {
    … …  
    813789        window.getSelection().setBaseAndExtent(tagNameElement, 0, tagNameElement, 1);
    814790        return true;
    815     },
    816 
    817     _startEditingAsHTML: function(commitCallback, error, initialValue)
     791    }
     792
     793    _startEditingAsHTML(commitCallback, error, initialValue)
    818794    {
    819795        if (error)
    … …  
    869845        config.setMultiline(true);
    870846        this._editing = WebInspector.startEditing(this._htmlEditElement, config);
    871     },
    872 
    873     _attributeEditingCommitted: function(element, newText, oldText, attributeName, moveDirection)
     847    }
     848
     849    _attributeEditingCommitted(element, newText, oldText, attributeName, moveDirection)
    874850    {
    875851        this._editing = false;
    … …  
    926902
    927903        this.representedObject.setAttribute(attributeName, newText, moveToNextAttributeIfNeeded.bind(this));
    928     },
    929 
    930     _tagNameEditingCommitted: function(element, newText, oldText, tagName, moveDirection)
     904    }
     905
     906    _tagNameEditingCommitted(element, newText, oldText, tagName, moveDirection)
    931907    {
    932908        this._editing = false;
    … …  
    987963
    988964        this.representedObject.setNodeName(newText, changeTagNameCallback);
    989     },
    990 
    991     _textNodeEditingCommitted: function(element, newText)
     965    }
     966
     967    _textNodeEditingCommitted(element, newText)
    992968    {
    993969        this._editing = false;
    … …  
    1002978
    1003979        textNode.setNodeValue(newText, this.updateTitle.bind(this));
    1004     },
    1005 
    1006     _editingCancelled: function(element, context)
     980    }
     981
     982    _editingCancelled(element, context)
    1007983    {
    1008984        this._editing = false;
    … …  
    1010986        // Need to restore attributes structure.
    1011987        this.updateTitle();
    1012     },
    1013 
    1014     _distinctClosingTagElement: function()
     988    }
     989
     990    _distinctClosingTagElement()
    1015991    {
    1016992        // FIXME: Improve the Tree Element / Outline Abstraction to prevent crawling the DOM
    … …  
    10281004        var tags = this.listItemElement.getElementsByClassName("html-tag");
    10291005        return (tags.length === 1 ? null : tags[tags.length - 1]);
    1030     },
    1031 
    1032     updateTitle: function(onlySearchQueryChanged)
     1006    }
     1007
     1008    updateTitle(onlySearchQueryChanged)
    10331009    {
    10341010        // If we are editing, return early to prevent canceling the edit.
    … …  
    10491025        this.updateSelection();
    10501026        this._highlightSearchResults();
    1051     },
    1052 
    1053     _buildAttributeDOM: function(parentElement, name, value, node)
     1027    }
     1028
     1029    _buildAttributeDOM(parentElement, name, value, node)
    10541030    {
    10551031        var hasText = (value.length > 0);
    … …  
    10881064        if (hasText)
    10891065            attrSpanElement.appendChild(document.createTextNode("\""));
    1090     },
    1091 
    1092     _buildTagDOM: function(parentElement, tagName, isClosingTag, isDistinctTreeElement)
     1066    }
     1067
     1068    _buildTagDOM(parentElement, tagName, isClosingTag, isDistinctTreeElement)
    10931069    {
    10941070        var node = this.representedObject;
    … …  
    11121088        tagElement.appendChild(document.createTextNode(">"));
    11131089        parentElement.appendChild(document.createTextNode("\u200B"));
    1114     },
    1115 
    1116     _nodeTitleInfo: function()
     1090    }
     1091
     1092    _nodeTitleInfo()
    11171093    {
    11181094        var node = this.representedObject;
    11191095        var info = {titleDOM: document.createDocumentFragment(), hasChildren: this.hasChildren};
     1096
     1097        function trimedNodeValue()
     1098        {
     1099            // Trim empty lines from the beginning and extra space at the end since most style and script tags begin with a newline
     1100            // and end with a newline and indentation for the end tag.
     1101            return node.nodeValue().replace(/^[\n\r]*/, "").replace(/\s*$/, "");
     1102        }
    11201103
    11211104        switch (node.nodeType()) {
    … …  
    11781161
    11791162            case Node.TEXT_NODE:
    1180                 function trimedNodeValue()
    1181                 {
    1182                     // Trim empty lines from the beginning and extra space at the end since most style and script tags begin with a newline
    1183                     // and end with a newline and indentation for the end tag.
    1184                     return node.nodeValue().replace(/^[\n\r]*/, "").replace(/\s*$/, "");
    1185                 }
    1186 
    11871163                if (node.parentNode && node.parentNode.nodeName().toLowerCase() === "script") {
    11881164                    var newNode = info.titleDOM.createChild("span", "html-text-node large");
    … …  
    12381214
    12391215        return info;
    1240     },
    1241 
    1242     _singleTextChild: function(node)
     1216    }
     1217
     1218    _singleTextChild(node)
    12431219    {
    12441220        if (!node)
    … …  
    12541230        var sibling = firstChild.nextSibling;
    12551231        return sibling ? null : firstChild;
    1256     },
    1257 
    1258     _showInlineText: function(node)
     1232    }
     1233
     1234    _showInlineText(node)
    12591235    {
    12601236        if (node.nodeType() === Node.ELEMENT_NODE) {
    … …  
    12641240        }
    12651241        return false;
    1266     },
    1267 
    1268     remove: function()
     1242    }
     1243
     1244    remove()
    12691245    {
    12701246        var parentElement = this.parent;
    … …  
    12861262
    12871263        this.representedObject.removeNode(removeNodeCallback);
    1288     },
    1289 
    1290     _editAsHTML: function()
     1264    }
     1265
     1266    _editAsHTML()
    12911267    {
    12921268        var treeOutline = this.treeOutline;
    … …  
    13231299
    13241300        node.getOuterHTML(this._startEditingAsHTML.bind(this, commitChange));
    1325     },
    1326 
    1327     _copyHTML: function()
     1301    }
     1302
     1303    _copyHTML()
    13281304    {
    13291305        this.representedObject.copyNode();
    1330     },
    1331 
    1332     _highlightSearchResults: function()
     1306    }
     1307
     1308    _highlightSearchResults()
    13331309    {
    13341310        if (!this.title || !this._searchQuery || !this._searchHighlightsVisible)
    … …  
    13571333        this._highlightResult = [];
    13581334        WebInspector.highlightRangesWithStyleClass(this.title, matchRanges, WebInspector.DOMTreeElement.SearchHighlightStyleClassName, this._highlightResult);
    1359     },
    1360 
    1361     handleEvent: function(event)
     1335    }
     1336
     1337    handleEvent(event)
    13621338    {
    13631339        if (event.type === "dragstart" && this._editing)
    … …  
    13661342};
    13671343
    1368 WebInspector.DOMTreeElement.prototype.__proto__ = TreeElement.prototype;
     1344WebInspector.DOMTreeElement.InitialChildrenLimit = 500;
     1345WebInspector.DOMTreeElement.MaximumInlineTextChildLength = 80;
     1346
     1347// A union of HTML4 and HTML5-Draft elements that explicitly
     1348// or implicitly (for HTML5) forbid the closing tag.
     1349WebInspector.DOMTreeElement.ForbiddenClosingTagElements = [
     1350    "area", "base", "basefont", "br", "canvas", "col", "command", "embed", "frame",
     1351    "hr", "img", "input", "isindex", "keygen", "link", "meta", "param", "source",
     1352    "wbr", "track", "menuitem"
     1353].keySet();
     1354
     1355// These tags we do not allow editing their tag name.
     1356WebInspector.DOMTreeElement.EditTagBlacklist = [
     1357    "html", "head", "body"
     1358].keySet();
     1359
     1360WebInspector.DOMTreeElement.SearchHighlightStyleClassName = "search-highlight";
     1361WebInspector.DOMTreeElement.BouncyHighlightStyleClassName = "bouncy-highlight";

  • trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js

    r181769 r182042  
    11/*
    2  * Copyright (C) 2007, 2008, 2013 Apple Inc.  All rights reserved.
     2 * Copyright (C) 2007, 2008, 2013, 2015 Apple Inc.  All rights reserved.
    33 * Copyright (C) 2008 Matt Lilek <webkit@mattlilek.com>
    44 * Copyright (C) 2009 Joseph Pecoraro
    … …  
    2929 */
    3030
    31 WebInspector.DOMTreeOutline = function(omitRootDOMNode, selectEnabled, showInElementsPanelEnabled)
     31WebInspector.DOMTreeOutline = class DOMTreeOutline extends WebInspector.TreeOutline
    3232{
    33     this.element = document.createElement("ol");
    34     this.element.addEventListener("mousedown", this._onmousedown.bind(this), false);
    35     this.element.addEventListener("mousemove", this._onmousemove.bind(this), false);
    36     this.element.addEventListener("mouseout", this._onmouseout.bind(this), false);
    37     this.element.addEventListener("dragstart", this._ondragstart.bind(this), false);
    38     this.element.addEventListener("dragover", this._ondragover.bind(this), false);
    39     this.element.addEventListener("dragleave", this._ondragleave.bind(this), false);
    40     this.element.addEventListener("drop", this._ondrop.bind(this), false);
    41     this.element.addEventListener("dragend", this._ondragend.bind(this), false);
    42 
    43     this.element.classList.add(WebInspector.DOMTreeOutline.StyleClassName);
    44     this.element.classList.add(WebInspector.SyntaxHighlightedStyleClassName);
    45 
    46     TreeOutline.call(this, this.element);
    47 
    48     this._includeRootDOMNode = !omitRootDOMNode;
    49     this._selectEnabled = selectEnabled;
    50     this._showInElementsPanelEnabled = showInElementsPanelEnabled;
    51     this._rootDOMNode = null;
    52     this._selectedDOMNode = null;
    53     this._eventSupport = new WebInspector.Object();
    54     this._editing = false;
    55 
    56     this._visible = false;
    57 
    58     this.element.addEventListener("contextmenu", this._contextMenuEventFired.bind(this), true);
    59 
    60     this._hideElementKeyboardShortcut = new WebInspector.KeyboardShortcut(null, "H", this._hideElement.bind(this), this.element);
    61     this._hideElementKeyboardShortcut.implicitlyPreventsDefault = false;
    62 
    63     WebInspector.showShadowDOMSetting.addEventListener(WebInspector.Setting.Event.Changed, this._showShadowDOMSettingChanged, this);
    64 };
    65 
    66 // FIXME: Move to a WebInspector.Object subclass and we can remove this.
    67 WebInspector.Object.deprecatedAddConstructorFunctions(WebInspector.DOMTreeOutline);
    68 
    69 WebInspector.DOMTreeOutline.StyleClassName = "dom-tree-outline";
    70 
    71 WebInspector.DOMTreeOutline.Event = {
    72     SelectedNodeChanged: "dom-tree-outline-selected-node-changed"
    73 };
    74 
    75 WebInspector.DOMTreeOutline.prototype = {
    76     constructor: WebInspector.DOMTreeOutline,
    77 
    78     wireToDomAgent: function()
     33    constructor(omitRootDOMNode, selectEnabled, showInElementsPanelEnabled)
     34    {
     35        var element = document.createElement("ol");
     36
     37        super(element);
     38
     39        element.addEventListener("mousedown", this._onmousedown.bind(this), false);
     40        element.addEventListener("mousemove", this._onmousemove.bind(this), false);
     41        element.addEventListener("mouseout", this._onmouseout.bind(this), false);
     42        element.addEventListener("dragstart", this._ondragstart.bind(this), false);
     43        element.addEventListener("dragover", this._ondragover.bind(this), false);
     44        element.addEventListener("dragleave", this._ondragleave.bind(this), false);
     45        element.addEventListener("drop", this._ondrop.bind(this), false);
     46        element.addEventListener("dragend", this._ondragend.bind(this), false);
     47
     48        element.classList.add("dom-tree-outline");
     49        element.classList.add(WebInspector.SyntaxHighlightedStyleClassName);
     50
     51        this._includeRootDOMNode = !omitRootDOMNode;
     52        this._selectEnabled = selectEnabled;
     53        this._showInElementsPanelEnabled = showInElementsPanelEnabled;
     54        this._rootDOMNode = null;
     55        this._selectedDOMNode = null;
     56        this._eventSupport = new WebInspector.Object();
     57        this._editing = false;
     58
     59        this._visible = false;
     60
     61        this.element.addEventListener("contextmenu", this._contextMenuEventFired.bind(this), true);
     62
     63        this._hideElementKeyboardShortcut = new WebInspector.KeyboardShortcut(null, "H", this._hideElement.bind(this), this.element);
     64        this._hideElementKeyboardShortcut.implicitlyPreventsDefault = false;
     65
     66        WebInspector.showShadowDOMSetting.addEventListener(WebInspector.Setting.Event.Changed, this._showShadowDOMSettingChanged, this);
     67    }
     68
     69    // Public
     70
     71    wireToDomAgent()
    7972    {
    8073        this._elementsTreeUpdater = new WebInspector.DOMTreeUpdater(this);
    81     },
    82 
    83     close: function()
     74    }
     75
     76    close()
    8477    {
    8578        if (this._elementsTreeUpdater) {
    … …  
    8780            this._elementsTreeUpdater = null;
    8881        }
    89     },
    90 
    91     setVisible: function(visible, omitFocus)
     82    }
     83
     84    setVisible(visible, omitFocus)
    9285    {
    9386        this._visible = visible;
    … …  
    9891        if (this._selectedDOMNode)
    9992            this._revealAndSelectNode(this._selectedDOMNode, omitFocus);
    100     },
    101 
    102     addEventListener: function(eventType, listener, thisObject)
     93    }
     94
     95    addEventListener(eventType, listener, thisObject)
    10396    {
    10497        this._eventSupport.addEventListener(eventType, listener, thisObject);
    105     },
    106 
    107     removeEventListener: function(eventType, listener, thisObject)
     98    }
     99
     100    removeEventListener(eventType, listener, thisObject)
    108101    {
    109102        this._eventSupport.removeEventListener(eventType, listener, thisObject);
    110     },
     103    }
    111104
    112105    get rootDOMNode()
    113106    {
    114107        return this._rootDOMNode;
    115     },
     108    }
    116109
    117110    set rootDOMNode(x)
    … …  
    125118
    126119        this.update();
    127     },
     120    }
    128121
    129122    get isXMLMimeType()
    130123    {
    131124        return this._isXMLMimeType;
    132     },
    133 
    134     selectedDOMNode: function()
     125    }
     126
     127    selectedDOMNode()
    135128    {
    136129        return this._selectedDOMNode;
    137     },
    138 
    139     selectDOMNode: function(node, focus)
     130    }
     131
     132    selectDOMNode(node, focus)
    140133    {
    141134        if (this._selectedDOMNode === node) {
    … …  
    154147        if (!node || this._selectedDOMNode === node)
    155148            this._selectedNodeChanged();
    156     },
     149    }
    157150
    158151    get editing()
    159152    {
    160153        return this._editing;
    161     },
    162 
    163     update: function()
     154    }
     155
     156    update()
    164157    {
    165158        var selectedNode = this.selectedTreeElement ? this.selectedTreeElement.representedObject : null;
    … …  
    188181        if (selectedNode)
    189182            this._revealAndSelectNode(selectedNode, true);
    190     },
    191 
    192     updateSelection: function()
     183    }
     184
     185    updateSelection()
    193186    {
    194187        if (!this.selectedTreeElement)
    … …  
    196189        var element = this.treeOutline.selectedTreeElement;
    197190        element.updateSelection();
    198     },
    199 
    200     _selectedNodeChanged: function()
     191    }
     192
     193    _selectedNodeChanged()
    201194    {
    202195        this._eventSupport.dispatchEventToListeners(WebInspector.DOMTreeOutline.Event.SelectedNodeChanged);
    203     },
    204 
    205     findTreeElement: function(node)
     196    }
     197
     198    findTreeElement(node)
    206199    {
    207200        function isAncestorNode(ancestor, node)
    … …  
    215208        }
    216209
    217         var treeElement = TreeOutline.prototype.findTreeElement.call(this, node, isAncestorNode, parentNode);
     210        var treeElement = super.findTreeElement(node, isAncestorNode, parentNode);
    218211        if (!treeElement && node.nodeType() === Node.TEXT_NODE) {
    219212            // The text node might have been inlined if it was short, so try to find the parent element.
    220             treeElement = TreeOutline.prototype.findTreeElement.call(this, node.parentNode, isAncestorNode, parentNode);
     213            treeElement = super.findTreeElement(node.parentNode, isAncestorNode, parentNode);
    221214        }
    222215
    223216        return treeElement;
    224     },
    225 
    226     createTreeElementFor: function(node)
     217    }
     218
     219    createTreeElementFor(node)
    227220    {
    228221        var treeElement = this.findTreeElement(node);
    … …  
    237230
    238231        return null;
    239     },
     232    }
    240233
    241234    set suppressRevealAndSelect(x)
    … …  
    244237            return;
    245238        this._suppressRevealAndSelect = x;
    246     },
    247 
    248     _revealAndSelectNode: function(node, omitFocus)
    249     {
    250         if (!node || this._suppressRevealAndSelect)
    251             return;
    252 
    253         var treeElement = this.createTreeElementFor(node);
    254         if (!treeElement)
    255             return;
    256 
    257         treeElement.revealAndSelect(omitFocus);
    258     },
    259 
    260     _treeElementFromEvent: function(event)
    261     {
    262         var scrollContainer = this.element.parentElement;
    263 
    264         // We choose this X coordinate based on the knowledge that our list
    265         // items extend at least to the right edge of the outer <ol> container.
    266         // In the no-word-wrap mode the outer <ol> may be wider than the tree container
    267         // (and partially hidden), in which case we are left to use only its right boundary.
    268         var x = scrollContainer.totalOffsetLeft + scrollContainer.offsetWidth - 36;
    269 
    270         var y = event.pageY;
    271 
    272         // Our list items have 1-pixel cracks between them vertically. We avoid
    273         // the cracks by checking slightly above and slightly below the mouse
    274         // and seeing if we hit the same element each time.
    275         var elementUnderMouse = this.treeElementFromPoint(x, y);
    276         var elementAboveMouse = this.treeElementFromPoint(x, y - 2);
    277         var element;
    278         if (elementUnderMouse === elementAboveMouse)
    279             element = elementUnderMouse;
    280         else
    281             element = this.treeElementFromPoint(x, y + 2);
    282 
    283         return element;
    284     },
    285 
    286     _onmousedown: function(event)
    287     {
    288         var element = this._treeElementFromEvent(event);
    289         if (!element || element.isEventWithinDisclosureTriangle(event)) {
    290             event.preventDefault();
    291             return;
    292         }
    293 
    294         element.select();
    295     },
    296 
    297     _onmousemove: function(event)
    298     {
    299         var element = this._treeElementFromEvent(event);
    300         if (element && this._previousHoveredElement === element)
    301             return;
    302 
    303         if (this._previousHoveredElement) {
    304             this._previousHoveredElement.hovered = false;
    305             delete this._previousHoveredElement;
    306         }
    307 
    308         if (element) {
    309             element.hovered = true;
    310             this._previousHoveredElement = element;
    311 
    312             // Lazily compute tag-specific tooltips.
    313             if (element.representedObject && !element.tooltip && element._createTooltipForNode)
    314                 element._createTooltipForNode();
    315         }
    316 
    317         WebInspector.domTreeManager.highlightDOMNode(element ? element.representedObject.id : 0);
    318     },
    319 
    320     _onmouseout: function(event)
    321     {
    322         var nodeUnderMouse = document.elementFromPoint(event.pageX, event.pageY);
    323         if (nodeUnderMouse && nodeUnderMouse.isDescendant(this.element))
    324             return;
    325 
    326         if (this._previousHoveredElement) {
    327             this._previousHoveredElement.hovered = false;
    328             delete this._previousHoveredElement;
    329         }
    330 
    331         WebInspector.domTreeManager.hideDOMNodeHighlight();
    332     },
    333 
    334     _ondragstart: function(event)
    335     {
    336         var treeElement = this._treeElementFromEvent(event);
    337         if (!treeElement)
    338             return false;
    339 
    340         if (!this._isValidDragSourceOrTarget(treeElement))
    341             return false;
    342 
    343         if (treeElement.representedObject.nodeName() === "BODY" || treeElement.representedObject.nodeName() === "HEAD")
    344             return false;
    345 
    346         event.dataTransfer.setData("text/plain", treeElement.listItemElement.textContent);
    347         event.dataTransfer.effectAllowed = "copyMove";
    348         this._nodeBeingDragged = treeElement.representedObject;
    349 
    350         WebInspector.domTreeManager.hideDOMNodeHighlight();
    351 
    352         return true;
    353     },
    354 
    355     _ondragover: function(event)
    356     {
    357         if (!this._nodeBeingDragged)
    358             return false;
    359 
    360         var treeElement = this._treeElementFromEvent(event);
    361         if (!this._isValidDragSourceOrTarget(treeElement))
    362             return false;
    363 
    364         var node = treeElement.representedObject;
    365         while (node) {
    366             if (node === this._nodeBeingDragged)
    367                 return false;
    368             node = node.parentNode;
    369         }
    370 
    371         treeElement.updateSelection();
    372         treeElement.listItemElement.classList.add("elements-drag-over");
    373         this._dragOverTreeElement = treeElement;
    374         event.preventDefault();
    375         event.dataTransfer.dropEffect = "move";
    376         return false;
    377     },
    378 
    379     _ondragleave: function(event)
    380     {
    381         this._clearDragOverTreeElementMarker();
    382         event.preventDefault();
    383         return false;
    384     },
    385 
    386     _isValidDragSourceOrTarget: function(treeElement)
    387     {
    388         if (!treeElement)
    389             return false;
    390 
    391         var node = treeElement.representedObject;
    392         if (!(node instanceof WebInspector.DOMNode))
    393             return false;
    394 
    395         if (!node.parentNode || node.parentNode.nodeType() !== Node.ELEMENT_NODE)
    396             return false;
    397 
    398         return true;
    399     },
    400 
    401     _ondrop: function(event)
    402     {
    403         event.preventDefault();
    404         var treeElement = this._treeElementFromEvent(event);
    405         if (this._nodeBeingDragged && treeElement) {
    406             var parentNode;
    407             var anchorNode;
    408 
    409             if (treeElement._elementCloseTag) {
    410                 // Drop onto closing tag -> insert as last child.
    411                 parentNode = treeElement.representedObject;
    412             } else {
    413                 var dragTargetNode = treeElement.representedObject;
    414                 parentNode = dragTargetNode.parentNode;
    415                 anchorNode = dragTargetNode;
    416             }
    417 
    418             function callback(error, newNodeId)
    419             {
    420                 if (error)
    421                     return;
    422 
    423                 this._updateModifiedNodes();
    424                 var newNode = WebInspector.domTreeManager.nodeForId(newNodeId);
    425                 if (newNode)
    426                     this.selectDOMNode(newNode, true);
    427             }
    428             this._nodeBeingDragged.moveTo(parentNode, anchorNode, callback.bind(this));
    429         }
    430 
    431         delete this._nodeBeingDragged;
    432     },
    433 
    434     _ondragend: function(event)
    435     {
    436         event.preventDefault();
    437         this._clearDragOverTreeElementMarker();
    438         delete this._nodeBeingDragged;
    439     },
    440 
    441     _clearDragOverTreeElementMarker: function()
    442     {
    443         if (this._dragOverTreeElement) {
    444             this._dragOverTreeElement.updateSelection();
    445             this._dragOverTreeElement.listItemElement.classList.remove("elements-drag-over");
    446             delete this._dragOverTreeElement;
    447         }
    448     },
    449 
    450     _contextMenuEventFired: function(event)
    451     {
    452         var treeElement = this._treeElementFromEvent(event);
    453         if (!treeElement)
    454             return;
    455 
    456         var contextMenu = new WebInspector.ContextMenu(event);
    457         this.populateContextMenu(contextMenu, event, treeElement);
    458         contextMenu.show();
    459     },
    460 
    461     populateContextMenu: function(contextMenu, event, treeElement)
     239    }
     240
     241    populateContextMenu(contextMenu, event, treeElement)
    462242    {
    463243        var tag = event.target.enclosingNodeOrSelfWithClass("html-tag");
    … …  
    484264
    485265        return populated;
    486     },
    487 
    488     adjustCollapsedRange: function()
    489     {
    490     },
    491 
    492     _updateModifiedNodes: function()
     266    }
     267
     268    adjustCollapsedRange()
     269    {
     270    }
     271
     272    // Private
     273
     274    _revealAndSelectNode(node, omitFocus)
     275    {
     276        if (!node || this._suppressRevealAndSelect)
     277            return;
     278
     279        var treeElement = this.createTreeElementFor(node);
     280        if (!treeElement)
     281            return;
     282
     283        treeElement.revealAndSelect(omitFocus);
     284    }
     285
     286    _treeElementFromEvent(event)
     287    {
     288        var scrollContainer = this.element.parentElement;
     289
     290        // We choose this X coordinate based on the knowledge that our list
     291        // items extend at least to the right edge of the outer <ol> container.
     292        // In the no-word-wrap mode the outer <ol> may be wider than the tree container
     293        // (and partially hidden), in which case we are left to use only its right boundary.
     294        var x = scrollContainer.totalOffsetLeft + scrollContainer.offsetWidth - 36;
     295
     296        var y = event.pageY;
     297
     298        // Our list items have 1-pixel cracks between them vertically. We avoid
     299        // the cracks by checking slightly above and slightly below the mouse
     300        // and seeing if we hit the same element each time.
     301        var elementUnderMouse = this.treeElementFromPoint(x, y);
     302        var elementAboveMouse = this.treeElementFromPoint(x, y - 2);
     303        var element;
     304        if (elementUnderMouse === elementAboveMouse)
     305            element = elementUnderMouse;
     306        else
     307            element = this.treeElementFromPoint(x, y + 2);
     308
     309        return element;
     310    }
     311
     312    _onmousedown(event)
     313    {
     314        var element = this._treeElementFromEvent(event);
     315        if (!element || element.isEventWithinDisclosureTriangle(event)) {
     316            event.preventDefault();
     317            return;
     318        }
     319
     320        element.select();
     321    }
     322
     323    _onmousemove(event)
     324    {
     325        var element = this._treeElementFromEvent(event);
     326        if (element && this._previousHoveredElement === element)
     327            return;
     328
     329        if (this._previousHoveredElement) {
     330            this._previousHoveredElement.hovered = false;
     331            delete this._previousHoveredElement;
     332        }
     333
     334        if (element) {
     335            element.hovered = true;
     336            this._previousHoveredElement = element;
     337
     338            // Lazily compute tag-specific tooltips.
     339            if (element.representedObject && !element.tooltip && element._createTooltipForNode)
     340                element._createTooltipForNode();
     341        }
     342
     343        WebInspector.domTreeManager.highlightDOMNode(element ? element.representedObject.id : 0);
     344    }
     345
     346    _onmouseout(event)
     347    {
     348        var nodeUnderMouse = document.elementFromPoint(event.pageX, event.pageY);
     349        if (nodeUnderMouse && nodeUnderMouse.isDescendant(this.element))
     350            return;
     351
     352        if (this._previousHoveredElement) {
     353            this._previousHoveredElement.hovered = false;
     354            delete this._previousHoveredElement;
     355        }
     356
     357        WebInspector.domTreeManager.hideDOMNodeHighlight();
     358    }
     359
     360    _ondragstart(event)
     361    {
     362        var treeElement = this._treeElementFromEvent(event);
     363        if (!treeElement)
     364            return false;
     365
     366        if (!this._isValidDragSourceOrTarget(treeElement))
     367            return false;
     368
     369        if (treeElement.representedObject.nodeName() === "BODY" || treeElement.representedObject.nodeName() === "HEAD")
     370            return false;
     371
     372        event.dataTransfer.setData("text/plain", treeElement.listItemElement.textContent);
     373        event.dataTransfer.effectAllowed = "copyMove";
     374        this._nodeBeingDragged = treeElement.representedObject;
     375
     376        WebInspector.domTreeManager.hideDOMNodeHighlight();
     377
     378        return true;
     379    }
     380
     381    _ondragover(event)
     382    {
     383        if (!this._nodeBeingDragged)
     384            return false;
     385
     386        var treeElement = this._treeElementFromEvent(event);
     387        if (!this._isValidDragSourceOrTarget(treeElement))
     388            return false;
     389
     390        var node = treeElement.representedObject;
     391        while (node) {
     392            if (node === this._nodeBeingDragged)
     393                return false;
     394            node = node.parentNode;
     395        }
     396
     397        treeElement.updateSelection();
     398        treeElement.listItemElement.classList.add("elements-drag-over");
     399        this._dragOverTreeElement = treeElement;
     400        event.preventDefault();
     401        event.dataTransfer.dropEffect = "move";
     402        return false;
     403    }
     404
     405    _ondragleave(event)
     406    {
     407        this._clearDragOverTreeElementMarker();
     408        event.preventDefault();
     409        return false;
     410    }
     411
     412    _isValidDragSourceOrTarget(treeElement)
     413    {
     414        if (!treeElement)
     415            return false;
     416
     417        var node = treeElement.representedObject;
     418        if (!(node instanceof WebInspector.DOMNode))
     419            return false;
     420
     421        if (!node.parentNode || node.parentNode.nodeType() !== Node.ELEMENT_NODE)
     422            return false;
     423
     424        return true;
     425    }
     426
     427    _ondrop(event)
     428    {
     429        event.preventDefault();
     430
     431        function callback(error, newNodeId)
     432        {
     433            if (error)
     434                return;
     435
     436            this._updateModifiedNodes();
     437            var newNode = WebInspector.domTreeManager.nodeForId(newNodeId);
     438            if (newNode)
     439                this.selectDOMNode(newNode, true);
     440        }
     441
     442        var treeElement = this._treeElementFromEvent(event);
     443        if (this._nodeBeingDragged && treeElement) {
     444            var parentNode;
     445            var anchorNode;
     446
     447            if (treeElement._elementCloseTag) {
     448                // Drop onto closing tag -> insert as last child.
     449                parentNode = treeElement.representedObject;
     450            } else {
     451                var dragTargetNode = treeElement.representedObject;
     452                parentNode = dragTargetNode.parentNode;
     453                anchorNode = dragTargetNode;
     454            }
     455
     456            this._nodeBeingDragged.moveTo(parentNode, anchorNode, callback.bind(this));
     457        }
     458
     459        delete this._nodeBeingDragged;
     460    }
     461
     462    _ondragend(event)
     463    {
     464        event.preventDefault();
     465        this._clearDragOverTreeElementMarker();
     466        delete this._nodeBeingDragged;
     467    }
     468
     469    _clearDragOverTreeElementMarker()
     470    {
     471        if (this._dragOverTreeElement) {
     472            this._dragOverTreeElement.updateSelection();
     473            this._dragOverTreeElement.listItemElement.classList.remove("elements-drag-over");
     474            delete this._dragOverTreeElement;
     475        }
     476    }
     477
     478    _contextMenuEventFired(event)
     479    {
     480        var treeElement = this._treeElementFromEvent(event);
     481        if (!treeElement)
     482            return;
     483
     484        var contextMenu = new WebInspector.ContextMenu(event);
     485        this.populateContextMenu(contextMenu, event, treeElement);
     486        contextMenu.show();
     487    }
     488
     489    _updateModifiedNodes()
    493490    {
    494491        if (this._elementsTreeUpdater)
    495492            this._elementsTreeUpdater._updateModifiedNodes();
    496     },
    497 
    498     _populateContextMenu: function(contextMenu, domNode)
     493    }
     494
     495    _populateContextMenu(contextMenu, domNode)
    499496    {
    500497        if (!this._showInElementsPanelEnabled)
    … …  
    508505        contextMenu.appendSeparator();
    509506        contextMenu.appendItem(WebInspector.UIString("Reveal in DOM Tree"), revealElement);
    510     },
    511 
    512     _showShadowDOMSettingChanged: function(event)
     507    }
     508
     509    _showShadowDOMSettingChanged(event)
    513510    {
    514511        var nodeToSelect = this.selectedTreeElement ? this.selectedTreeElement.representedObject : null;
    … …  
    525522        if (nodeToSelect)
    526523            this.selectDOMNode(nodeToSelect);
    527     },
    528 
    529     _hideElement: function(event, keyboardShortcut)
     524    }
     525
     526    _hideElement(event, keyboardShortcut)
    530527    {
    531528        if (!this.selectedTreeElement || WebInspector.isEditingAnyField())
    … …  
    578575};
    579576
    580 WebInspector.DOMTreeOutline.prototype.__proto__ = TreeOutline.prototype;
     577WebInspector.DOMTreeOutline.Event = {
     578    SelectedNodeChanged: "dom-tree-outline-selected-node-changed"
     579};

  • trunk/Source/WebInspectorUI/UserInterface/Views/DatabaseHostTreeElement.js

    r164543 r182042  
    11/*
    2  * Copyright (C) 2013 Apple Inc. All rights reserved.
     2 * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
    33 *
    44 * Redistribution and use in source and binary forms, with or without
    … …  
    2424 */
    2525
    26 WebInspector.DatabaseHostTreeElement = function(host)
     26WebInspector.DatabaseHostTreeElement = class DatabaseHostTreeElement extends WebInspector.StorageTreeElement
    2727{
    28     WebInspector.StorageTreeElement.call(this, WebInspector.FolderTreeElement.FolderIconStyleClassName, WebInspector.displayNameForHost(host), null);
     28    constructor(host)
     29    {
     30        super(WebInspector.FolderTreeElement.FolderIconStyleClassName, WebInspector.displayNameForHost(host), null);
    2931
    30     this._host = host;
     32        this._host = host;
    3133
    32     this.hasChildren = true;
    33 };
    34 
    35 WebInspector.DatabaseHostTreeElement.prototype = {
    36     constructor: WebInspector.DatabaseHostTreeElement,
     34        this.hasChildren = true;
     35    }
    3736
    3837    // Public
    … …  
    4140    {
    4241        return WebInspector.displayNameForHost(this._host);
    43     },
     42    }
    4443
    4544    get categoryName()
    … …  
    4847    }
    4948};
    50 
    51 WebInspector.DatabaseHostTreeElement.prototype.__proto__ = WebInspector.StorageTreeElement.prototype;

  • trunk/Source/WebInspectorUI/UserInterface/Views/DatabaseTableTreeElement.js

    r164543 r182042  
    11/*
    2  * Copyright (C) 2013 Apple Inc. All rights reserved.
     2 * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
    33 *
    44 * Redistribution and use in source and binary forms, with or without
    … …  
    2424 */
    2525
    26 WebInspector.DatabaseTableTreeElement = function(representedObject)
     26WebInspector.DatabaseTableTreeElement = class DatabaseTableTreeElement extends WebInspector.GeneralTreeElement
    2727{
    28     console.assert(representedObject instanceof WebInspector.DatabaseTableObject);
     28    constructor(representedObject)
     29    {
     30        console.assert(representedObject instanceof WebInspector.DatabaseTableObject);
    2931
    30     WebInspector.GeneralTreeElement.call(this, WebInspector.DatabaseTableTreeElement.DatabaseTableIconStyleClassName, representedObject.name, null, representedObject, false);
     32        super("database-table-icon", representedObject.name, null, representedObject, false);
    3133
    32     this.small = true;
     34        this.small = true;
     35    }
    3336};
    34 
    35 WebInspector.DatabaseTableTreeElement.DatabaseTableIconStyleClassName = "database-table-icon";
    36 
    37 WebInspector.DatabaseTableTreeElement.prototype = {
    38     constructor: WebInspector.DatabaseTableTreeElement
    39 };
    40 
    41 WebInspector.DatabaseTableTreeElement.prototype.__proto__ = WebInspector.GeneralTreeElement.prototype;

  • trunk/Source/WebInspectorUI/UserInterface/Views/DatabaseTreeElement.js

    r164543 r182042  
    11/*
    2  * Copyright (C) 2013 Apple Inc. All rights reserved.
     2 * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
    33 *
    44 * Redistribution and use in source and binary forms, with or without
    … …  
    2424 */
    2525
    26 WebInspector.DatabaseTreeElement = function(representedObject)
     26WebInspector.DatabaseTreeElement = class DatabaseTreeElement extends WebInspector.GeneralTreeElement
    2727{
    28     console.assert(representedObject instanceof WebInspector.DatabaseObject);
     28    constructor(representedObject)
     29    {
     30        console.assert(representedObject instanceof WebInspector.DatabaseObject);
    2931
    30     WebInspector.GeneralTreeElement.call(this, WebInspector.DatabaseTreeElement.DatabaseIconStyleClassName, representedObject.name, null, representedObject, true);
     32        super("database-icon", representedObject.name, null, representedObject, true);
    3133
    32     this.small = true;
    33     this.hasChildren = false;
     34        this.small = true;
     35        this.hasChildren = false;
    3436
    35     // Since we are initially telling the tree element we don't have any children, make sure that we try to populate
    36     // the tree element (which will get a list of tables) when the element is created.
    37     this.onpopulate();
    38 };
    39 
    40 WebInspector.DatabaseTreeElement.DatabaseIconStyleClassName = "database-icon";
    41 
    42 WebInspector.DatabaseTreeElement.prototype = {
    43     constructor: WebInspector.DatabaseTreeElement,
     37        // Since we are initially telling the tree element we don't have any children, make sure that we try to populate
     38        // the tree element (which will get a list of tables) when the element is created.
     39        this.onpopulate();
     40    }
    4441
    4542    // Overrides from TreeElement (Private)
    4643
    47     oncollapse: function()
     44    oncollapse()
    4845    {
    4946        this.shouldRefreshChildren = true;
    50     },
     47    }
    5148
    52     onpopulate: function()
     49    onpopulate()
    5350    {
    5451        if (this.children.length && !this.shouldRefreshChildren)
    … …  
    7269    }
    7370};
    74 
    75 WebInspector.DatabaseTreeElement.prototype.__proto__ = WebInspector.GeneralTreeElement.prototype;

  • trunk/Source/WebInspectorUI/UserInterface/Views/FolderTreeElement.js

    r181452 r182042  
    11/*
    2  * Copyright (C) 2013 Apple Inc. All rights reserved.
     2 * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
    33 *
    44 * Redistribution and use in source and binary forms, with or without
    … …  
    2424 */
    2525
    26 WebInspector.FolderTreeElement = function(title, subtitle, additionalClassNames, representedObject)
     26WebInspector.FolderTreeElement = class FolderTreeElement extends WebInspector.GeneralTreeElement
    2727{
    28     var classNames;
    29     if (!additionalClassNames)
    30         classNames = [];
    31     else if (additionalClassNames.constructor === Array)
    32         classNames = additionalClassNames;
    33     else if (typeof additionalClassNames === "string")
    34         classNames = [additionalClassNames];
     28    constructor(title, subtitle, additionalClassNames, representedObject)
     29    {
     30        var classNames;
     31        if (!additionalClassNames)
     32            classNames = [];
     33        else if (additionalClassNames.constructor === Array)
     34            classNames = additionalClassNames;
     35        else if (typeof additionalClassNames === "string")
     36            classNames = [additionalClassNames];
    3537
    36     classNames.unshift(WebInspector.FolderTreeElement.FolderIconStyleClassName);
     38        classNames.unshift(WebInspector.FolderTreeElement.FolderIconStyleClassName);
    3739
    38     WebInspector.GeneralTreeElement.call(this, classNames, title, subtitle, representedObject, true);
     40        super(classNames, title, subtitle, representedObject, true);
    3941
    40     this.small = true;
    41 };
    42 
    43 WebInspector.FolderTreeElement.FolderIconStyleClassName = "folder-icon";
    44 
    45 WebInspector.FolderTreeElement.prototype = {
    46     constructor: WebInspector.FolderTreeElement
     42        this.small = true;
     43    }
    4744
    4845    // No Methods or Properties
    4946};
    5047
    51 WebInspector.FolderTreeElement.prototype.__proto__ = WebInspector.GeneralTreeElement.prototype;
     48WebInspector.FolderTreeElement.FolderIconStyleClassName = "folder-icon";

  • trunk/Source/WebInspectorUI/UserInterface/Views/FolderizedTreeElement.js

    r181185 r182042  
    11/*
    2  * Copyright (C) 2014 Apple Inc. All rights reserved.
     2 * Copyright (C) 2014-2015 Apple Inc. All rights reserved.
    33 *
    44 * Redistribution and use in source and binary forms, with or without
    … …  
    2424 */
    2525
    26 WebInspector.FolderizedTreeElement = function(classNames, title, subtitle, representedObject, hasChildren)
     26WebInspector.FolderizedTreeElement = class FolderizedTreeElement extends WebInspector.GeneralTreeElement
    2727{
    28     WebInspector.GeneralTreeElement.call(this, classNames, title, subtitle, representedObject, hasChildren);
    29 
    30     this.shouldRefreshChildren = true;
    31 
    32     this._folderSettingsKey = "";
    33     this._folderTypeMap = new Map;
    34     this._folderizeSettingsMap = new Map;
    35     this._groupedIntoFolders = false;
    36     this._clearNewChildQueue();
    37 };
    38 
    39 WebInspector.FolderizedTreeElement.MediumChildCountThreshold = 5;
    40 WebInspector.FolderizedTreeElement.LargeChildCountThreshold = 15;
    41 WebInspector.FolderizedTreeElement.NumberOfMediumCategoriesThreshold = 2;
    42 WebInspector.FolderizedTreeElement.NewChildQueueUpdateInterval = 500;
    43 
    44 WebInspector.FolderizedTreeElement.prototype = {
    45     constructor: WebInspector.FolderizedTreeElement,
    46     __proto__: WebInspector.GeneralTreeElement.prototype,
     28    constructor(classNames, title, subtitle, representedObject, hasChildren)
     29    {
     30        super(classNames, title, subtitle, representedObject, hasChildren);
     31
     32        this.shouldRefreshChildren = true;
     33
     34        this._folderSettingsKey = "";
     35        this._folderTypeMap = new Map;
     36        this._folderizeSettingsMap = new Map;
     37        this._groupedIntoFolders = false;
     38        this._clearNewChildQueue();
     39    }
    4740
    4841    // Public
    … …  
    5144    {
    5245        return this._groupedIntoFolders;
    53     },
     46    }
    5447
    5548    set folderSettingsKey(x)
    5649    {
    5750        this._folderSettingsKey = x;
    58     },
    59 
    60     registerFolderizeSettings: function(type, folderDisplayName, validateRepresentedObjectCallback, countChildrenCallback, treeElementConstructor)
     51    }
     52
     53    registerFolderizeSettings(type, folderDisplayName, validateRepresentedObjectCallback, countChildrenCallback, treeElementConstructor)
    6154    {
    6255        console.assert(type);
    … …  
    7568
    7669        this._folderizeSettingsMap.set(type, settings);
    77     },
     70    }
    7871
    7972    // Overrides from TreeElement (Private).
    8073
    81     removeChildren: function()
    82     {
    83         TreeElement.prototype.removeChildren.call(this);
     74    removeChildren()
     75    {
     76        super.removeChildren();
    8477
    8578        this._clearNewChildQueue();
    … …  
    9184
    9285        this._groupedIntoFolders = false;
    93     },
     86    }
    9487
    9588    // Protected
    9689
    97     addChildForRepresentedObject: function(representedObject)
     90    addChildForRepresentedObject(representedObject)
    9891    {
    9992        var settings = this._settingsForRepresentedObject(representedObject);
    … …  
    109102
    110103        this._addTreeElement(childTreeElement);
    111     },
    112 
    113     addRepresentedObjectToNewChildQueue: function(representedObject)
     104    }
     105
     106    addRepresentedObjectToNewChildQueue(representedObject)
    114107    {
    115108        // This queue reduces flashing as resources load and change folders when their type becomes known.
    … …  
    118111        if (!this._newChildQueueTimeoutIdentifier)
    119112            this._newChildQueueTimeoutIdentifier = setTimeout(this._populateFromNewChildQueue.bind(this), WebInspector.FolderizedTreeElement.NewChildQueueUpdateInterval);
    120     },
    121 
    122     removeChildForRepresentedObject: function(representedObject)
     113    }
     114
     115    removeChildForRepresentedObject(representedObject)
    123116    {
    124117        this._removeRepresentedObjectFromNewChildQueue(representedObject);
    … …  
    138131
    139132        this._removeTreeElement(childTreeElement);
    140     },
    141 
    142     compareChildTreeElements: function(a, b)
     133    }
     134
     135    compareChildTreeElements(a, b)
    143136    {
    144137        return this._compareTreeElementsByMainTitle(a, b);
    145     },
    146 
    147     updateParentStatus: function()
     138    }
     139
     140    updateParentStatus()
    148141    {
    149142        var hasChildren = false;
    … …  
    158151        if (!this.hasChildren)
    159152            this.removeChildren();
    160     },
    161 
    162     prepareToPopulate: function()
     153    }
     154
     155    prepareToPopulate()
    163156    {
    164157        if (!this._groupedIntoFolders && this._shouldGroupIntoFolders())
    165158            this._groupedIntoFolders = true;
    166     },
     159    }
    167160
    168161    // Private
    169162
    170     _clearNewChildQueue: function()
     163    _clearNewChildQueue()
    171164    {
    172165        this._newChildQueue = [];
    … …  
    175168            this._newChildQueueTimeoutIdentifier = null;
    176169        }
    177     },
    178 
    179     _populateFromNewChildQueue: function()
     170    }
     171
     172    _populateFromNewChildQueue()
    180173    {
    181174        if (!this.children.length) {
    … …  
    191184
    192185        this._clearNewChildQueue();
    193     },
    194 
    195     _removeRepresentedObjectFromNewChildQueue: function(representedObject)
     186    }
     187
     188    _removeRepresentedObjectFromNewChildQueue(representedObject)
    196189    {
    197190        this._newChildQueue.remove(representedObject);
    198     },
    199 
    200     _addTreeElement: function(childTreeElement)
     191    }
     192
     193    _addTreeElement(childTreeElement)
    201194    {
    202195        console.assert(childTreeElement);
    … …  
    216209        if (wasSelected)
    217210            childTreeElement.revealAndSelect(true, false, true, true);
    218     },
    219 
    220     _compareTreeElementsByMainTitle: function(a, b)
     211    }
     212
     213    _compareTreeElementsByMainTitle(a, b)
    221214    {
    222215        return a.mainTitle.localeCompare(b.mainTitle);
    223     },
    224 
    225     _insertFolderTreeElement: function(folderTreeElement)
     216    }
     217
     218    _insertFolderTreeElement(folderTreeElement)
    226219    {
    227220        console.assert(this._groupedIntoFolders);
    228221        console.assert(!folderTreeElement.parent);
    229222        this.insertChild(folderTreeElement, insertionIndexForObjectInListSortedByFunction(folderTreeElement, this.children, this._compareTreeElementsByMainTitle));
    230     },
    231 
    232     _insertChildTreeElement: function(parentTreeElement, childTreeElement)
     223    }
     224
     225    _insertChildTreeElement(parentTreeElement, childTreeElement)
    233226    {
    234227        console.assert(!childTreeElement.parent);
    235228        parentTreeElement.insertChild(childTreeElement, insertionIndexForObjectInListSortedByFunction(childTreeElement, parentTreeElement.children, this.compareChildTreeElements.bind(this)));
    236     },
    237 
    238     _removeTreeElement: function(childTreeElement, suppressOnDeselect, suppressSelectSibling)
     229    }
     230
     231    _removeTreeElement(childTreeElement, suppressOnDeselect, suppressSelectSibling)
    239232    {
    240233        var oldParent = childTreeElement.parent;
    … …  
    254247        if (!oldParent.children.length)
    255248            oldParent.parent.removeChild(oldParent);
    256     },
    257 
    258     _parentTreeElementForRepresentedObject: function(representedObject)
     249    }
     250
     251    _parentTreeElementForRepresentedObject(representedObject)
    259252    {
    260253        if (!this._groupedIntoFolders)
    … …  
    287280        this._folderTypeMap.set(settings.type, folder);
    288281        return folder;
    289     },
    290 
    291     _folderTreeElementExpandedStateChange: function(folderTreeElement)
     282    }
     283
     284    _folderTreeElementExpandedStateChange(folderTreeElement)
    292285    {
    293286        console.assert(folderTreeElement.__expandedSetting);
    294287        folderTreeElement.__expandedSetting.value = folderTreeElement.expanded;
    295     },
    296 
    297     _settingsForRepresentedObject: function(representedObject)
     288    }
     289
     290    _settingsForRepresentedObject(representedObject)
    298291    {
    299292        for (var settings of this._folderizeSettingsMap.values()) {
    … …  
    302295        }
    303296        return null;
    304     },
    305 
    306     _shouldGroupIntoFolders: function()
     297    }
     298
     299    _shouldGroupIntoFolders()
    307300    {
    308301        // Already grouped into folders, keep it that way.
    … …  
    359352    }
    360353};
     354
     355WebInspector.FolderizedTreeElement.MediumChildCountThreshold = 5;
     356WebInspector.FolderizedTreeElement.LargeChildCountThreshold = 15;
     357WebInspector.FolderizedTreeElement.NumberOfMediumCategoriesThreshold = 2;
     358WebInspector.FolderizedTreeElement.NewChildQueueUpdateInterval = 500;

  • trunk/Source/WebInspectorUI/UserInterface/Views/FrameTreeElement.js

    r180319 r182042  
    11/*
    2  * Copyright (C) 2013 Apple Inc. All rights reserved.
     2 * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
    33 *
    44 * Redistribution and use in source and binary forms, with or without
    … …  
    2424 */
    2525
    26 WebInspector.FrameTreeElement = function(frame, representedObject)
     26WebInspector.FrameTreeElement = class FrameTreeElement extends WebInspector.ResourceTreeElement
    2727{
    28     console.assert(frame instanceof WebInspector.Frame);
    29 
    30     WebInspector.ResourceTreeElement.call(this, frame.mainResource, representedObject || frame);
    31 
    32     this._frame = frame;
    33 
    34     this._updateExpandedSetting();
    35 
    36     frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
    37     frame.addEventListener(WebInspector.Frame.Event.ResourceWasAdded, this._resourceWasAdded, this);
    38     frame.addEventListener(WebInspector.Frame.Event.ResourceWasRemoved, this._resourceWasRemoved, this);
    39     frame.addEventListener(WebInspector.Frame.Event.ChildFrameWasAdded, this._childFrameWasAdded, this);
    40     frame.addEventListener(WebInspector.Frame.Event.ChildFrameWasRemoved, this._childFrameWasRemoved, this);
    41 
    42     frame.domTree.addEventListener(WebInspector.DOMTree.Event.ContentFlowWasAdded, this._childContentFlowWasAdded, this);
    43     frame.domTree.addEventListener(WebInspector.DOMTree.Event.ContentFlowWasRemoved, this._childContentFlowWasRemoved, this);
    44     frame.domTree.addEventListener(WebInspector.DOMTree.Event.RootDOMNodeInvalidated, this._rootDOMNodeInvalidated, this);
    45 
    46     if (this._frame.isMainFrame())
    47         this._downloadingPage = false;
    48 
    49     this.shouldRefreshChildren = true;
    50     this.folderSettingsKey = this._frame.url.hash;
    51 
    52     this.registerFolderizeSettings("frames", WebInspector.UIString("Frames"),
    53         function(representedObject) { return representedObject instanceof WebInspector.Frame; },
    54         function() { return this.frame.childFrames.length; }.bind(this),
    55         WebInspector.FrameTreeElement
    56     );
    57 
    58     this.registerFolderizeSettings("flows", WebInspector.UIString("Flows"),
    59         function(representedObject) { return representedObject instanceof WebInspector.ContentFlow; },
    60         function() { return this.frame.domTree.flowsCount; }.bind(this),
    61         WebInspector.ContentFlowTreeElement
    62     );
    63 
    64     function makeValidateCallback(resourceType) {
    65         return function(representedObject) {
    66             return representedObject instanceof WebInspector.Resource && representedObject.type === resourceType;
    67         };
    68     }
    69 
    70     function makeChildCountCallback(frame, resourceType) {
    71         return function() {
    72             return frame.resourcesWithType(resourceType).length;
    73         };
    74     }
    75 
    76     for (var key in WebInspector.Resource.Type) {
    77         var value = WebInspector.Resource.Type[key];
    78         var folderName = WebInspector.Resource.displayNameForType(value, true);
    79         this.registerFolderizeSettings(key, folderName,
    80             makeValidateCallback(value),
    81             makeChildCountCallback(this.frame, value),
    82             WebInspector.ResourceTreeElement
     28    constructor(frame, representedObject)
     29    {
     30        console.assert(frame instanceof WebInspector.Frame);
     31
     32        super(frame.mainResource, representedObject || frame);
     33
     34        this._frame = frame;
     35
     36        this._updateExpandedSetting();
     37
     38        frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
     39        frame.addEventListener(WebInspector.Frame.Event.ResourceWasAdded, this._resourceWasAdded, this);
     40        frame.addEventListener(WebInspector.Frame.Event.ResourceWasRemoved, this._resourceWasRemoved, this);
     41        frame.addEventListener(WebInspector.Frame.Event.ChildFrameWasAdded, this._childFrameWasAdded, this);
     42        frame.addEventListener(WebInspector.Frame.Event.ChildFrameWasRemoved, this._childFrameWasRemoved, this);
     43
     44        frame.domTree.addEventListener(WebInspector.DOMTree.Event.ContentFlowWasAdded, this._childContentFlowWasAdded, this);
     45        frame.domTree.addEventListener(WebInspector.DOMTree.Event.ContentFlowWasRemoved, this._childContentFlowWasRemoved, this);
     46        frame.domTree.addEventListener(WebInspector.DOMTree.Event.RootDOMNodeInvalidated, this._rootDOMNodeInvalidated, this);
     47
     48        if (this._frame.isMainFrame())
     49            this._downloadingPage = false;
     50
     51        this.shouldRefreshChildren = true;
     52        this.folderSettingsKey = this._frame.url.hash;
     53
     54        this.registerFolderizeSettings("frames", WebInspector.UIString("Frames"),
     55            function(representedObject) { return representedObject instanceof WebInspector.Frame; },
     56            function() { return this.frame.childFrames.length; }.bind(this),
     57            WebInspector.FrameTreeElement
    8358        );
    84     }
    85 
    86     this.updateParentStatus();
    87 };
    88 
    89 WebInspector.FrameTreeElement.prototype = {
    90     constructor: WebInspector.FrameTreeElement,
    91     __proto__: WebInspector.ResourceTreeElement.prototype,
     59
     60        this.registerFolderizeSettings("flows", WebInspector.UIString("Flows"),
     61            function(representedObject) { return representedObject instanceof WebInspector.ContentFlow; },
     62            function() { return this.frame.domTree.flowsCount; }.bind(this),
     63            WebInspector.ContentFlowTreeElement
     64        );
     65
     66        function makeValidateCallback(resourceType) {
     67            return function(representedObject) {
     68                return representedObject instanceof WebInspector.Resource && representedObject.type === resourceType;
     69            };
     70        }
     71
     72        function makeChildCountCallback(frame, resourceType) {
     73            return function() {
     74                return frame.resourcesWithType(resourceType).length;
     75            };
     76        }
     77
     78        for (var key in WebInspector.Resource.Type) {
     79            var value = WebInspector.Resource.Type[key];
     80            var folderName = WebInspector.Resource.displayNameForType(value, true);
     81            this.registerFolderizeSettings(key, folderName,
     82                makeValidateCallback(value),
     83                makeChildCountCallback(this.frame, value),
     84                WebInspector.ResourceTreeElement
     85            );
     86        }
     87
     88        this.updateParentStatus();
     89    }
    9290
    9391    // Public
    … …  
    9694    {
    9795        return this._frame;
    98     },
    99 
    100     descendantResourceTreeElementTypeDidChange: function(resourceTreeElement, oldType)
     96    }
     97
     98    descendantResourceTreeElementTypeDidChange(resourceTreeElement, oldType)
    10199    {
    102100        // Called by descendant ResourceTreeElements.
    … …  
    105103        // based on sorting and possible folder changes.
    106104        this._addTreeElement(resourceTreeElement);
    107     },
    108 
    109     descendantResourceTreeElementMainTitleDidChange: function(resourceTreeElement, oldMainTitle)
     105    }
     106
     107    descendantResourceTreeElementMainTitleDidChange(resourceTreeElement, oldMainTitle)
    110108    {
    111109        // Called by descendant ResourceTreeElements.
    … …  
    114112        // based on sorting and possible folder changes.
    115113        this._addTreeElement(resourceTreeElement);
    116     },
     114    }
    117115
    118116    // Overrides from SourceCodeTreeElement.
    119117
    120     updateSourceMapResources: function()
     118    updateSourceMapResources()
    121119    {
    122120        // Frames handle their own SourceMapResources.
    … …  
    132130        if (this.resource && this.resource.sourceMaps.length)
    133131            this.shouldRefreshChildren = true;
    134     },
    135 
    136     onattach: function()
     132    }
     133
     134    onattach()
    137135    {
    138136        // Immediate superclasses are skipped, since Frames handle their own SourceMapResources.
    … …  
    143141            WebInspector.notifications.addEventListener(WebInspector.Notification.PageArchiveEnded, this._pageArchiveEnded, this);
    144142        }
    145     },
    146 
    147     ondetach: function()
     143    }
     144
     145    ondetach()
    148146    {
    149147        WebInspector.ResourceTreeElement.prototype.ondetach.call(this);
    … …  
    153151            WebInspector.notifications.removeEventListener(WebInspector.Notification.PageArchiveEnded, this._pageArchiveEnded, this);
    154152        }
    155     },
     153    }
    156154
    157155    // Overrides from FolderizedTreeElement (Protected).
    158156
    159     compareChildTreeElements: function(a, b)
     157    compareChildTreeElements(a, b)
    160158    {
    161159        if (a === b)
    … …  
    170168        if (!aIsResource && !bIsResource) {
    171169            // When both components are not resources then default to base class comparison.
    172             return WebInspector.ResourceTreeElement.prototype.compareChildTreeElements.call(this, a, b);
     170            return super.compareChildTreeElements(a, b);
    173171        }
    174172
    … …  
    176174        // FIXME: There should be a better way to group the elements by their type.
    177175        return aIsResource ? 1 : -1;
    178     },
     176    }
    179177
    180178    // Called from ResourceTreeElement.
    181179
    182     updateStatusForMainFrame: function()
     180    updateStatusForMainFrame()
    183181    {
    184182        function loadedImages()
    … …  
    222220            }.bind(this));
    223221        }
    224     },
     222    }
    225223
    226224    // Overrides from TreeElement (Private).
    227225
    228     onpopulate: function()
     226    onpopulate()
    229227    {
    230228        if (this.children.length && !this.shouldRefreshChildren)
    … …  
    253251            this.addChildForRepresentedObject(flowMap[flowKey]);
    254252
    255     },
    256 
    257     onexpand: function()
     253    }
     254
     255    onexpand()
    258256    {
    259257        this._expandedSetting.value = true;
    260258        this._frame.domTree.requestContentFlowList();
    261     },
    262 
    263     oncollapse: function()
     259    }
     260
     261    oncollapse()
    264262    {
    265263        // Only store the setting if we have children, since setting hasChildren to false will cause a collapse,
    … …  
    267265        if (this.hasChildren)
    268266            this._expandedSetting.value = false;
    269     },
     267    }
    270268
    271269    // Private
    272270
    273     _updateExpandedSetting: function()
     271    _updateExpandedSetting()
    274272    {
    275273        this._expandedSetting = new WebInspector.Setting("frame-expanded-" + this._frame.url.hash, this._frame.isMainFrame() ? true : false);
    … …  
    278276        else
    279277            this.collapse();
    280     },
    281 
    282     _mainResourceDidChange: function(event)
     278    }
     279
     280    _mainResourceDidChange(event)
    283281    {
    284282        this._updateResource(this._frame.mainResource);
    … …  
    295293
    296294        this.shouldRefreshChildren = true;
    297     },
    298 
    299     _resourceWasAdded: function(event)
     295    }
     296
     297    _resourceWasAdded(event)
    300298    {
    301299        this.addRepresentedObjectToNewChildQueue(event.data.resource);
    302     },
    303 
    304     _resourceWasRemoved: function(event)
     300    }
     301
     302    _resourceWasRemoved(event)
    305303    {
    306304        this.removeChildForRepresentedObject(event.data.resource);
    307     },
    308 
    309     _childFrameWasAdded: function(event)
     305    }
     306
     307    _childFrameWasAdded(event)
    310308    {
    311309        this.addRepresentedObjectToNewChildQueue(event.data.childFrame);
    312     },
    313 
    314     _childFrameWasRemoved: function(event)
     310    }
     311
     312    _childFrameWasRemoved(event)
    315313    {
    316314        this.removeChildForRepresentedObject(event.data.childFrame);
    317     },
    318 
    319     _childContentFlowWasAdded: function(event)
     315    }
     316
     317    _childContentFlowWasAdded(event)
    320318    {
    321319        this.addRepresentedObjectToNewChildQueue(event.data.flow);
    322     },
    323 
    324     _childContentFlowWasRemoved: function(event)
     320    }
     321
     322    _childContentFlowWasRemoved(event)
    325323    {
    326324        this.removeChildForRepresentedObject(event.data.flow);
    327     },
    328 
    329     _rootDOMNodeInvalidated: function()
     325    }
     326
     327    _rootDOMNodeInvalidated()
    330328    {
    331329        if (this.expanded)
    332330            this._frame.domTree.requestContentFlowList();
    333     },
    334 
    335     _reloadPageClicked: function(event)
     331    }
     332
     333    _reloadPageClicked(event)
    336334    {
    337335        // Ignore cache when the shift key is pressed.
    338336        PageAgent.reload(event.data.shiftKey);
    339     },
    340 
    341     _downloadButtonClicked: function(event)
     337    }
     338
     339    _downloadButtonClicked(event)
    342340    {
    343341        WebInspector.archiveMainFrame();
    344     },
    345 
    346     _updateDownloadButton: function()
     342    }
     343
     344    _updateDownloadButton()
    347345    {
    348346        console.assert(this._frame.isMainFrame());
    … …  
    361359
    362360        this._downloadButton.enabled = WebInspector.canArchiveMainFrame();
    363     },
    364 
    365     _pageArchiveStarted: function(event)
     361    }
     362
     363    _pageArchiveStarted(event)
    366364    {
    367365        this._downloadingPage = true;
    368366        this._updateDownloadButton();
    369     },
    370 
    371     _pageArchiveEnded: function(event)
     367    }
     368
     369    _pageArchiveEnded(event)
    372370    {
    373371        this._downloadingPage = false;

  • trunk/Source/WebInspectorUI/UserInterface/Views/GeneralTreeElement.js

    r181184 r182042  
    2424 */
    2525
    26 WebInspector.GeneralTreeElement = function(classNames, title, subtitle, representedObject, hasChildren)
     26WebInspector.GeneralTreeElement = class GeneralTreeElement extends WebInspector.TreeElement
    2727{
    28     TreeElement.call(this, "", representedObject, hasChildren);
    29 
    30     this.classNames = classNames;
    31 
    32     this._tooltipHandledSeparately = false;
    33     this._mainTitle = title || "";
    34     this._subtitle = subtitle || "";
    35     this._status = "";
    36 };
    37 
    38 WebInspector.GeneralTreeElement.StyleClassName = "item";
    39 WebInspector.GeneralTreeElement.DisclosureButtonStyleClassName = "disclosure-button";
    40 WebInspector.GeneralTreeElement.IconElementStyleClassName = "icon";
    41 WebInspector.GeneralTreeElement.StatusElementStyleClassName = "status";
    42 WebInspector.GeneralTreeElement.TitlesElementStyleClassName = "titles";
    43 WebInspector.GeneralTreeElement.MainTitleElementStyleClassName = "title";
    44 WebInspector.GeneralTreeElement.SubtitleElementStyleClassName = "subtitle";
    45 WebInspector.GeneralTreeElement.NoSubtitleStyleClassName = "no-subtitle";
    46 WebInspector.GeneralTreeElement.SmallStyleClassName = "small";
    47 WebInspector.GeneralTreeElement.TwoLineStyleClassName = "two-line";
    48 
    49 WebInspector.GeneralTreeElement.Event = {
    50     MainTitleDidChange: "general-tree-element-main-title-did-change"
    51 };
    52 
    53 WebInspector.GeneralTreeElement.prototype = {
    54     constructor: WebInspector.GeneralTreeElement,
    55     __proto__: TreeElement.prototype,
     28    constructor(classNames, title, subtitle, representedObject, hasChildren)
     29    {
     30        super("", representedObject, hasChildren);
     31
     32        this.classNames = classNames;
     33
     34        this._tooltipHandledSeparately = false;
     35        this._mainTitle = title || "";
     36        this._subtitle = subtitle || "";
     37        this._status = "";
     38    }
    5639
    5740    // Public
    … …  
    6043    {
    6144        return this._listItemNode;
    62     },
     45    }
    6346
    6447    get iconElement()
    … …  
    6649        this._createElementsIfNeeded();
    6750        return this._iconElement;
    68     },
     51    }
    6952
    7053    get titlesElement()
    … …  
    7255        this._createElementsIfNeeded();
    7356        return this._titlesElement;
    74     },
     57    }
    7558
    7659    get mainTitleElement()
    … …  
    7861        this._createElementsIfNeeded();
    7962        return this._mainTitleElement;
    80     },
     63    }
    8164
    8265    get subtitleElement()
    … …  
    8568        this._createSubtitleElementIfNeeded();
    8669        return this._subtitleElement;
    87     },
     70    }
    8871
    8972    get classNames()
    9073    {
    9174        return this._classNames;
    92     },
     75    }
    9376
    9477    set classNames(x)
    … …  
    10891                this._listItemNode.classList.add(this._classNames[i]);
    10992        }
    110     },
    111 
    112     addClassName: function(className)
     93    }
     94
     95    addClassName(className)
    11396    {
    11497        if (this._classNames.contains(className))
    … …  
    119102        if (this._listItemNode)
    120103            this._listItemNode.classList.add(className);
    121     },
    122 
    123     removeClassName: function(className)
     104    }
     105
     106    removeClassName(className)
    124107    {
    125108        if (!this._classNames.contains(className))
    … …  
    130113        if (this._listItemNode)
    131114            this._listItemNode.classList.remove(className);
    132     },
     115    }
    133116
    134117    get small()
    135118    {
    136119        return this._small;
    137     },
     120    }
    138121
    139122    set small(x)
    … …  
    147130                this._listItemNode.classList.remove(WebInspector.GeneralTreeElement.SmallStyleClassName);
    148131        }
    149     },
     132    }
    150133
    151134    get twoLine()
    152135    {
    153136        return this._twoLine;
    154     },
     137    }
    155138
    156139    set twoLine(x)
    … …  
    164147                this._listItemNode.classList.remove(WebInspector.GeneralTreeElement.TwoLineStyleClassName);
    165148        }
    166     },
     149    }
    167150
    168151    get mainTitle()
    169152    {
    170153        return this._mainTitle;
    171     },
     154    }
    172155
    173156    set mainTitle(x)
    … …  
    177160        this.didChange();
    178161        this.dispatchEventToListeners(WebInspector.GeneralTreeElement.Event.MainTitleDidChange);
    179     },
     162    }
    180163
    181164    get subtitle()
    182165    {
    183166        return this._subtitle;
    184     },
     167    }
    185168
    186169    set subtitle(x)
    … …  
    189172        this._updateTitleElements();
    190173        this.didChange();
    191     },
     174    }
    192175
    193176    get status()
    194177    {
    195178        return this._status;
    196     },
     179    }
    197180
    198181    set status(x)
    … …  
    208191        this._status = x || "";
    209192        this._updateStatusElement();
    210     },
     193    }
    211194
    212195    get filterableData()
    213196    {
    214197        return {text: [this.mainTitle, this.subtitle]};
    215     },
     198    }
    216199
    217200    get tooltipHandledSeparately()
    218201    {
    219202        return this._tooltipHandledSeparately;
    220     },
     203    }
    221204
    222205    set tooltipHandledSeparately(x)
    223206    {
    224207        this._tooltipHandledSeparately = x || false;
    225     },
     208    }
    226209
    227210    // Overrides from TreeElement (Private)
    228211
    229     isEventWithinDisclosureTriangle: function(event)
     212    isEventWithinDisclosureTriangle(event)
    230213    {
    231214        return event.target === this._disclosureButton;
    232     },
    233 
    234     onattach: function()
     215    }
     216
     217    onattach()
    235218    {
    236219        this._createElementsIfNeeded();
    237220        this._updateTitleElements();
    238221
    239         this._listItemNode.classList.add(WebInspector.GeneralTreeElement.StyleClassName);
     222        this._listItemNode.classList.add("item");
    240223
    241224        if (this._classNames) {
    … …  
    265248
    266249        this._updateStatusElement();
    267     },
    268 
    269     ondetach: function()
     250    }
     251
     252    ondetach()
    270253    {
    271254        if (this._boundContextMenuEventHandler) {
    … …  
    273256            delete this._boundContextMenuEventHandler;
    274257        }
    275     },
    276 
    277     onreveal: function()
     258    }
     259
     260    onreveal()
    278261    {
    279262        if (this._listItemNode)
    280263            this._listItemNode.scrollIntoViewIfNeeded(false);
    281     },
     264    }
    282265
    283266    // Protected
    284267
    285     callFirstAncestorFunction: function(functionName, args)
     268    callFirstAncestorFunction(functionName, args)
    286269    {
    287270        // Call the first ancestor that implements a function named functionName (if any).
    … …  
    295278            currentNode = currentNode.parent;
    296279        }
    297     },
     280    }
    298281
    299282    // Private
    300283
    301     _createElementsIfNeeded: function()
     284    _createElementsIfNeeded()
    302285    {
    303286        if (this._createdElements)
    … …  
    322305
    323306        this._createdElements = true;
    324     },
    325 
    326     _createSubtitleElementIfNeeded: function()
     307    }
     308
     309    _createSubtitleElementIfNeeded()
    327310    {
    328311        if (this._subtitleElement)
    … …  
    332315        this._subtitleElement.className = WebInspector.GeneralTreeElement.SubtitleElementStyleClassName;
    333316        this._titlesElement.appendChild(this._subtitleElement);
    334     },
    335 
    336     _updateTitleElements: function()
     317    }
     318
     319    _updateTitleElements()
    337320    {
    338321        if (!this._createdElements)
    … …  
    378361                this._listItemNode.title = subtitleText;
    379362        }
    380     },
    381 
    382     _updateStatusElement: function()
     363    }
     364
     365    _updateStatusElement()
    383366    {
    384367        if (!this._statusElement)
    … …  
    395378    }
    396379};
     380
     381WebInspector.GeneralTreeElement.DisclosureButtonStyleClassName = "disclosure-button";
     382WebInspector.GeneralTreeElement.IconElementStyleClassName = "icon";
     383WebInspector.GeneralTreeElement.StatusElementStyleClassName = "status";
     384WebInspector.GeneralTreeElement.TitlesElementStyleClassName = "titles";
     385WebInspector.GeneralTreeElement.MainTitleElementStyleClassName = "title";
     386WebInspector.GeneralTreeElement.SubtitleElementStyleClassName = "subtitle";
     387WebInspector.GeneralTreeElement.NoSubtitleStyleClassName = "no-subtitle";
     388WebInspector.GeneralTreeElement.SmallStyleClassName = "small";
     389WebInspector.GeneralTreeElement.TwoLineStyleClassName = "two-line";
     390
     391WebInspector.GeneralTreeElement.Event = {
     392    MainTitleDidChange: "general-tree-element-main-title-did-change"
     393};

  • trunk/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseHostTreeElement.js

    r164543 r182042  
    2424 */
    2525
    26 WebInspector.IndexedDatabaseHostTreeElement = function(host)
     26WebInspector.IndexedDatabaseHostTreeElement = class IndexedDatabaseHostTreeElement extends WebInspector.StorageTreeElement
    2727{
    28     WebInspector.StorageTreeElement.call(this, WebInspector.FolderTreeElement.FolderIconStyleClassName, WebInspector.displayNameForHost(host), null);
     28    constructor(host)
     29    {
     30        super(WebInspector.FolderTreeElement.FolderIconStyleClassName, WebInspector.displayNameForHost(host), null);
    2931
    30     this._host = host;
     32        this._host = host;
    3133
    32     this.hasChildren = true;
    33 };
    34 
    35 WebInspector.IndexedDatabaseHostTreeElement.prototype = {
    36     constructor: WebInspector.IndexedDatabaseHostTreeElement,
    37     __proto__: WebInspector.StorageTreeElement.prototype,
     34        this.hasChildren = true;
     35    }
    3836
    3937    // Public
    … …  
    4240    {
    4341        return WebInspector.displayNameForHost(this._host);
    44     },
     42    }
    4543
    4644    get categoryName()

  • trunk/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseObjectStoreIndexTreeElement.js

    r164543 r182042  
    2424 */
    2525
    26 WebInspector.IndexedDatabaseObjectStoreIndexTreeElement = function(objectStoreIndex)
     26WebInspector.IndexedDatabaseObjectStoreIndexTreeElement = class IndexedDatabaseObjectStoreIndexTreeElement extends WebInspector.GeneralTreeElement
    2727{
    28     console.assert(objectStoreIndex instanceof WebInspector.IndexedDatabaseObjectStoreIndex);
     28    constructor(objectStoreIndex)
     29    {
     30        console.assert(objectStoreIndex instanceof WebInspector.IndexedDatabaseObjectStoreIndex);
    2931
    30     this._objectStoreIndex = objectStoreIndex;
     32        super("database-table-icon", objectStoreIndex.name, null, objectStoreIndex, false);
    3133
    32     WebInspector.GeneralTreeElement.call(this, WebInspector.IndexedDatabaseObjectStoreTreeElement.IconStyleClassName, objectStoreIndex.name, null, objectStoreIndex, false);
     34        this._objectStoreIndex = objectStoreIndex;
    3335
    34     this.small = true;
    35 };
    36 
    37 WebInspector.IndexedDatabaseObjectStoreIndexTreeElement.IconStyleClassName = "database-table-icon";
    38 
    39 WebInspector.IndexedDatabaseObjectStoreIndexTreeElement.prototype = {
    40     constructor: WebInspector.IndexedDatabaseObjectStoreIndexTreeElement,
    41     __proto__: WebInspector.GeneralTreeElement.prototype,
     36        this.small = true;
     37    }
    4238
    4339    // Public

  • trunk/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseObjectStoreTreeElement.js

    r164543 r182042  
    11/*
    2  * Copyright (C) 2014 Apple Inc. All rights reserved.
     2 * Copyright (C) 2014-2015 Apple Inc. All rights reserved.
    33 *
    44 * Redistribution and use in source and binary forms, with or without
    … …  
    2424 */
    2525
    26 WebInspector.IndexedDatabaseObjectStoreTreeElement = function(objectStore)
     26WebInspector.IndexedDatabaseObjectStoreTreeElement = class IndexedDatabaseObjectStoreTreeElement extends WebInspector.GeneralTreeElement
    2727{
    28     console.assert(objectStore instanceof WebInspector.IndexedDatabaseObjectStore);
     28    constructor(objectStore)
     29    {
     30        console.assert(objectStore instanceof WebInspector.IndexedDatabaseObjectStore);
    2931
    30     this._objectStore = objectStore;
     32        super(WebInspector.IndexedDatabaseObjectStoreTreeElement.IconStyleClassName, objectStore.name, null, objectStore, !!this._objectStore.indexes.length);
    3133
    32     WebInspector.GeneralTreeElement.call(this, WebInspector.IndexedDatabaseObjectStoreTreeElement.IconStyleClassName, objectStore.name, null, objectStore, !!this._objectStore.indexes.length);
     34        this._objectStore = objectStore;
    3335
    34     this.small = true;
    35 };
    36 
    37 WebInspector.IndexedDatabaseObjectStoreTreeElement.IconStyleClassName = "database-table-icon";
    38 
    39 WebInspector.IndexedDatabaseObjectStoreTreeElement.prototype = {
    40     constructor: WebInspector.IndexedDatabaseObjectStoreTreeElement,
    41     __proto__: WebInspector.GeneralTreeElement.prototype,
     36        this.small = true;
     37    }
    4238
    4339    // Public
    … …  
    4642    {
    4743        return this._objectStore;
    48     },
     44    }
    4945
    5046    // Overrides from TreeElement (Protected)
    5147
    52     oncollapse: function()
     48    oncollapse()
    5349    {
    5450        this.shouldRefreshChildren = true;
    55     },
     51    }
    5652
    57     onpopulate: function()
     53    onpopulate()
    5854    {
    5955        if (this.children.length && !this.shouldRefreshChildren)

  • trunk/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseTreeElement.js

    r164543 r182042  
    11/*
    2  * Copyright (C) 2014 Apple Inc. All rights reserved.
     2 * Copyright (C) 2014-2015 Apple Inc. All rights reserved.
    33 *
    44 * Redistribution and use in source and binary forms, with or without
    … …  
    2424 */
    2525
    26 WebInspector.IndexedDatabaseTreeElement = function(indexedDatabase)
     26WebInspector.IndexedDatabaseTreeElement = class IndexedDatabaseTreeElement extends WebInspector.GeneralTreeElement
    2727{
    28     console.assert(indexedDatabase instanceof WebInspector.IndexedDatabase);
     28    constructor(indexedDatabase)
     29    {
     30        console.assert(indexedDatabase instanceof WebInspector.IndexedDatabase);
    2931
    30     this._indexedDatabase = indexedDatabase;
     32        this._indexedDatabase = indexedDatabase;
    3133
    32     WebInspector.GeneralTreeElement.call(this, WebInspector.IndexedDatabaseTreeElement.IconStyleClassName, indexedDatabase.name, null, indexedDatabase, !!this._indexedDatabase.objectStores.length);
     34        super("database-icon", indexedDatabase.name, null, indexedDatabase, !!this._indexedDatabase.objectStores.length);
    3335
    34     this.small = true;
    35 };
    36 
    37 WebInspector.IndexedDatabaseTreeElement.IconStyleClassName = "database-icon";
    38 
    39 WebInspector.IndexedDatabaseTreeElement.prototype = {
    40     constructor: WebInspector.IndexedDatabaseTreeElement,
     36        this.small = true;
     37    }
    4138
    4239    // Public
    … …  
    4542    {
    4643        return this._indexedDatabase;
    47     },
     44    }
    4845
    4946    // Overrides from TreeElement (Protected)
    5047
    51     oncollapse: function()
     48    oncollapse()
    5249    {
    5350        this.shouldRefreshChildren = true;
    54     },
     51    }
    5552
    56     onpopulate: function()
     53    onpopulate()
    5754    {
    5855        if (this.children.length && !this.shouldRefreshChildren)
    … …  
    6764    }
    6865};
    69 
    70 WebInspector.IndexedDatabaseTreeElement.prototype.__proto__ = WebInspector.GeneralTreeElement.prototype;

  • trunk/Source/WebInspectorUI/UserInterface/Views/LegacyConsoleMessageImpl.js

    r181961 r182042  
    140140            var ol = document.createElement("ol");
    141141            ol.className = "outline-disclosure";
    142             var treeOutline = new TreeOutline(ol);
     142            var treeOutline = new WebInspector.TreeOutline(ol);
    143143
    144144            var content = this._formattedMessage;
    145             var root = new TreeElement(content, null, true);
     145            var root = new WebInspector.TreeElement(content, null, true);
    146146            content.treeElementForTest = root;
    147147            treeOutline.appendChild(root);
    … …  
    621621            }
    622622
    623             var treeElement = new TreeElement(content);
     623            var treeElement = new WebInspector.TreeElement(content);
    624624            parentTreeElement.appendChild(treeElement);
    625625        }

  • trunk/Source/WebInspectorUI/UserInterface/Views/LogTreeElement.js

    r164543 r182042  
    11/*
    2  * Copyright (C) 2013 Apple Inc. All rights reserved.
     2 * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
    33 *
    44 * Redistribution and use in source and binary forms, with or without
    … …  
    2424 */
    2525
    26 WebInspector.LogTreeElement = function(representedObject)
     26WebInspector.LogTreeElement = class LogTreeElement extends WebInspector.GeneralTreeElement
    2727{
    28     console.assert(representedObject instanceof WebInspector.LogObject);
     28    constructor(representedObject)
     29    {
     30        console.assert(representedObject instanceof WebInspector.LogObject);
    2931
    30     WebInspector.GeneralTreeElement.call(this, WebInspector.LogTreeElement.StyleClassName, WebInspector.UIString("Console"), representedObject.startDate.toLocaleTimeString(), representedObject, false);
     32        super("log-icon", WebInspector.UIString("Console"), representedObject.startDate.toLocaleTimeString(), representedObject, false);
    3133
    32     this._logObject = representedObject;
     34        this._logObject = representedObject;
    3335
    34     this.small = true;
    35 };
    36 
    37 WebInspector.LogTreeElement.StyleClassName = "log-icon";
    38 
    39 WebInspector.LogTreeElement.prototype = {
    40     constructor: WebInspector.LogTreeElement,
     36        this.small = true;
     37    }
    4138
    4239    // Public
    … …  
    4744    }
    4845};
    49 
    50 WebInspector.LogTreeElement.prototype.__proto__ = WebInspector.GeneralTreeElement.prototype;

  • trunk/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.js

    r182041 r182042  
    158158        this.contentElement.appendChild(contentTreeOutlineElement);
    159159
    160         var contentTreeOutline = new TreeOutline(contentTreeOutlineElement);
     160        var contentTreeOutline = new WebInspector.TreeOutline(contentTreeOutlineElement);
    161161        contentTreeOutline.allowsRepeatSelection = true;
    162162

  • trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreeArrayIndexTreeElement.js

    r181186 r182042  
    2424 */
    2525
    26 WebInspector.ObjectTreeArrayIndexTreeElement = function(property, propertyPath)
     26WebInspector.ObjectTreeArrayIndexTreeElement = class ObjectTreeArrayIndexTreeElement extends WebInspector.ObjectTreeBaseTreeElement
    2727{
    28     console.assert(property.isIndexProperty(), "ArrayIndexTreeElement expects numeric property names");
     28    constructor(property, propertyPath)
     29    {
     30        console.assert(property.isIndexProperty(), "ObjectTreeArrayIndexTreeElement expects numeric property names");
    2931
    30     WebInspector.ObjectTreeBaseTreeElement.call(this, property, propertyPath, property);
     32        super(property, propertyPath, property);
    3133
    32     this.mainTitle = this._titleFragment();
    33     this.addClassName("object-tree-property");
    34     this.addClassName("object-tree-array-index");
     34        this.mainTitle = this._titleFragment();
     35        this.addClassName("object-tree-property");
     36        this.addClassName("object-tree-array-index");
    3537
    36     if (!this.property.hasValue())
    37         this.addClassName("accessor");
    38 };
    39 
    40 WebInspector.ObjectTreeArrayIndexTreeElement.prototype = {
    41     constructor: WebInspector.ObjectTreeArrayIndexTreeElement,
    42     __proto__: WebInspector.ObjectTreeBaseTreeElement.prototype,
     38        if (!this.property.hasValue())
     39            this.addClassName("accessor");
     40    }
    4341
    4442    // Protected
    … …  
    4947
    5048        this.removeClassName("accessor");
    51     },
     49    }
    5250
    5351    // Private

  • trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreeBaseTreeElement.js

    r181186 r182042  
    2424 */
    2525
    26 WebInspector.ObjectTreeBaseTreeElement = function(representedObject, propertyPath, property)
     26WebInspector.ObjectTreeBaseTreeElement = class ObjectTreeBaseTreeElement extends WebInspector.GeneralTreeElement
    2727{
    28     console.assert(representedObject);
    29     console.assert(propertyPath instanceof WebInspector.PropertyPath);
    30     console.assert(!property || property instanceof WebInspector.PropertyDescriptor);
    31 
    32     this._property = property;
    33     this._propertyPath = propertyPath;
    34 
    35     WebInspector.GeneralTreeElement.call(this, null, null, null, representedObject, false);
    36 
    37     this.small = true;
    38     this.toggleOnClick = true;
    39     this.selectable = false;
    40     this.tooltipHandledSeparately = true;
    41 };
    42 
    43 WebInspector.ObjectTreeBaseTreeElement.prototype = {
    44     constructor: WebInspector.ObjectTreeBaseTreeElement,
    45     __proto__: WebInspector.GeneralTreeElement.prototype,
     28    constructor(representedObject, propertyPath, property)
     29    {
     30        console.assert(representedObject);
     31        console.assert(propertyPath instanceof WebInspector.PropertyPath);
     32        console.assert(!property || property instanceof WebInspector.PropertyDescriptor);
     33
     34        super(null, null, null, representedObject, false);
     35
     36        this._property = property;
     37        this._propertyPath = propertyPath;
     38
     39        this.small = true;
     40        this.toggleOnClick = true;
     41        this.selectable = false;
     42        this.tooltipHandledSeparately = true;
     43    }
    4644
    4745    // Public
    … …  
    5048    {
    5149        return this._property;
    52     },
     50    }
    5351
    5452    get propertyPath()
    5553    {
    5654        return this._propertyPath;
    57     },
     55    }
    5856
    5957    // Protected
    … …  
    6260    {
    6361        this._contextMenuHandler(event);
    64     },
     62    }
    6563
    6664    resolvedValue()
    … …  
    7270            return this._property.value;
    7371        return null;
    74     },
     72    }
    7573
    7674    resolvedValuePropertyPath()
    … …  
    8280            return this._propertyPath.appendPropertyDescriptor(this._property.value, this._property, WebInspector.PropertyPath.Type.Value);
    8381        return null;
    84     },
     82    }
    8583
    8684    thisPropertyPath()
    … …  
    8886        console.assert(this._property);
    8987        return this._propertyPath.appendPropertyDescriptor(null, this._property, this.propertyPathType());
    90     },
     88    }
    9189
    9290    hadError()
    … …  
    9492        console.assert(this._property);
    9593        return this._property.wasThrown || this._getterHadError;
    96     },
     94    }
    9795
    9896    propertyPathType()
    … …  
    106104            return WebInspector.PropertyPath.Type.Setter;
    107105        return WebInspector.PropertyPath.Type.Value;
    108     },
     106    }
    109107
    110108    propertyPathString(propertyPath)
    … …  
    114112
    115113        return propertyPath.displayPath(this.propertyPathType());
    116     },
     114    }
    117115
    118116    createInteractiveGetterElement()
    … …  
    135133
    136134        return getterElement;
    137     },
     135    }
    138136
    139137    createReadOnlyIconElement()
    … …  
    143141        readOnlyElement.title = WebInspector.UIString("Read only");
    144142        return readOnlyElement;
    145     },
     143    }
    146144
    147145    // Private
    … …  
    161159
    162160        WebInspector.consoleLogViewController.appendImmediateExecutionWithResult(text, resolvedValue);
    163     },
     161    }
    164162
    165163    _contextMenuHandler(event)
    … …  
    185183        if (!contextMenu.isEmpty())
    186184            contextMenu.show();
    187     },
     185    }
    188186
    189187    _appendMenusItemsForObject(contextMenu, resolvedValue)

  • trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreeMapEntryTreeElement.js

    r181186 r182042  
    2424 */
    2525
    26 WebInspector.ObjectTreeMapEntryTreeElement = function(object, propertyPath)
     26WebInspector.ObjectTreeMapEntryTreeElement = class ObjectTreeMapEntryTreeElement extends WebInspector.ObjectTreeBaseTreeElement
    2727{
    28     console.assert(object instanceof WebInspector.RemoteObject);
     28    constructor(object, propertyPath)
     29    {
     30        console.assert(object instanceof WebInspector.RemoteObject);
    2931
    30     this._object = object;
     32        // Treat the same as an array-index just with different strings and widths.
     33        super(this._object, propertyPath);
    3134
    32     // Treat the same as an array-index just with different strings and widths.
    33     WebInspector.ObjectTreeBaseTreeElement.call(this, this._object, propertyPath);
     35        this._object = object;
    3436
    35     this.mainTitle = this._titleFragment();
    36     this.addClassName("object-tree-array-index");
    37     this.addClassName("object-tree-map-entry");
    38 };
    39 
    40 WebInspector.ObjectTreeMapEntryTreeElement.prototype = {
    41     constructor: WebInspector.ObjectTreeMapEntryTreeElement,
    42     __proto__: WebInspector.ObjectTreeBaseTreeElement.prototype,
     37        this.mainTitle = this._titleFragment();
     38        this.addClassName("object-tree-array-index");
     39        this.addClassName("object-tree-map-entry");
     40    }
    4341
    4442    // Public
    … …  
    4745    {
    4846        return this._object;
    49     },
     47    }
    5048
    5149    // Protected
    … …  
    5452    {
    5553        return this._object;
    56     },
     54    }
    5755
    5856    propertyPathType()
    5957    {
    6058        return WebInspector.PropertyPath.Type.Value;
    61     },
     59    }
    6260
    6361    // Private
    … …  
    8482};
    8583
     84WebInspector.ObjectTreeMapKeyTreeElement = class ObjectTreeMapKeyTreeElement extends WebInspector.ObjectTreeMapEntryTreeElement
     85{
     86    constructor(object, propertyPath)
     87    {
     88        super(object, propertyPath);
    8689
    87 WebInspector.ObjectTreeMapKeyTreeElement = function(object, propertyPath)
    88 {
    89     WebInspector.ObjectTreeMapEntryTreeElement.call(this, object, propertyPath);
    90     this.addClassName("key");
    91 };
    92 
    93 WebInspector.ObjectTreeMapKeyTreeElement.prototype = {
    94     constructor: WebInspector.ObjectTreeMapKeyTreeElement,
    95     __proto__: WebInspector.ObjectTreeMapEntryTreeElement.prototype,
    96 
     90        this.addClassName("key");
     91    }
     92   
    9793    // Protected
    9894
    … …  
    10096    {
    10197        return WebInspector.UIString("key");
    102     },
     98    }
    10399
    104100    resolvedValuePropertyPath()
    … …  
    108104};
    109105
     106WebInspector.ObjectTreeMapValueTreeElement = class ObjectTreeMapValueTreeElement extends WebInspector.ObjectTreeMapEntryTreeElement
     107{
     108    constructor(object, propertyPath, key)
     109    {
     110        super(object, propertyPath);
    110111
    111 WebInspector.ObjectTreeMapValueTreeElement = function(object, propertyPath, key)
    112 {
    113     this._key = key;
    114     WebInspector.ObjectTreeMapEntryTreeElement.call(this, object, propertyPath);
    115     this.addClassName("value");
    116 };
     112        this._key = key;
    117113
    118 WebInspector.ObjectTreeMapValueTreeElement.prototype = {
    119     constructor: WebInspector.ObjectTreeMapValueTreeElement,
    120     __proto__: WebInspector.ObjectTreeMapEntryTreeElement.prototype,
    121 
     114        this.addClassName("value");
     115    }
     116   
    122117    // Protected
    123118
    … …  
    125120    {
    126121        return WebInspector.UIString("value");
    127     },
     122    }
    128123
    129124    resolvedValuePropertyPath()

  • trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreePropertyTreeElement.js

    r181614 r182042  
    2424 */
    2525
    26 WebInspector.ObjectTreePropertyTreeElement = function(property, propertyPath, mode, prototypeName)
     26WebInspector.ObjectTreePropertyTreeElement = class ObjectTreePropertyTreeElement extends WebInspector.ObjectTreeBaseTreeElement
    2727{
    28     this._mode = mode || WebInspector.ObjectTreeView.Mode.Properties;
    29     this._prototypeName = prototypeName;
    30 
    31     WebInspector.ObjectTreeBaseTreeElement.call(this, property, propertyPath, property);
    32 
    33     this.mainTitle = this._titleFragment();
    34     this.addClassName("object-tree-property");
    35 
    36     if (this.property.hasValue()) {
    37         this.addClassName(this.property.value.type);
    38         if (this.property.value.subtype)
    39             this.addClassName(this.property.value.subtype);
    40     } else
    41         this.addClassName("accessor");
    42 
    43     if (this.property.wasThrown)
    44         this.addClassName("had-error");
    45     if (this.property.name === "__proto__")
    46         this.addClassName("prototype-property");
    47 
    48     this._updateTooltips();
    49     this._updateHasChildren();
    50 };
    51 
    52 WebInspector.ObjectTreePropertyTreeElement.prototype = {
    53     constructor: WebInspector.ObjectTreePropertyTreeElement,
    54     __proto__: WebInspector.ObjectTreeBaseTreeElement.prototype,
    55 
     28    constructor(property, propertyPath, mode, prototypeName)
     29    {
     30        super(property, propertyPath, property);
     31
     32        this._mode = mode || WebInspector.ObjectTreeView.Mode.Properties;
     33        this._prototypeName = prototypeName;
     34
     35        this.mainTitle = this._titleFragment();
     36        this.addClassName("object-tree-property");
     37
     38        if (this.property.hasValue()) {
     39            this.addClassName(this.property.value.type);
     40            if (this.property.value.subtype)
     41                this.addClassName(this.property.value.subtype);
     42        } else
     43            this.addClassName("accessor");
     44
     45        if (this.property.wasThrown)
     46            this.addClassName("had-error");
     47        if (this.property.name === "__proto__")
     48            this.addClassName("prototype-property");
     49
     50        this._updateTooltips();
     51        this._updateHasChildren();
     52    }
     53   
    5654    // Protected
    5755
    … …  
    5957    {
    6058        this._updateChildren();
    61     },
     59    }
    6260
    6361    onexpand()
    … …  
    6563        if (this._previewView)
    6664            this._previewView.showTitle();
    67     },
     65    }
    6866
    6967    oncollapse()
    … …  
    7169        if (this._previewView)
    7270            this._previewView.showPreview();
    73     },
     71    }
    7472
    7573    invokedGetter()
    … …  
    8684
    8785        this._updateHasChildren();
    88     },
     86    }
    8987
    9088    // Private
    … …  
    10098        else
    10199            this.hasChildren = !wasThrown && valueHasChildren && (this.property.name === "__proto__" || this._alwaysDisplayAsProperty());
    102     },
     100    }
    103101
    104102    _updateTooltips()
    … …  
    114112
    115113        this.iconElement.title = attributes.join(" ");
    116     },
     114    }
    117115
    118116    _titleFragment()
    … …  
    125123        else
    126124            return this._createTitleAPIStyle();
    127     },
     125    }
    128126
    129127    _createTitlePrototype()
    … …  
    137135        nameElement.title = this.propertyPathString(this.thisPropertyPath());
    138136        return nameElement;
    139     },
     137    }
    140138
    141139    _createTitlePropertyStyle()
    … …  
    185183        container.appendChild(valueOrGetterElement);
    186184        return container;
    187     },
     185    }
    188186
    189187    _createTitleAPIStyle()
    … …  
    221219
    222220        return container;
    223     },
     221    }
    224222
    225223    _alwaysDisplayAsProperty()
    … …  
    238236
    239237        return false;
    240     },
     238    }
    241239
    242240    _functionPropertyString()
    243241    {
    244242        return "function" + this._functionParameterString();
    245     },
     243    }
    246244
    247245    _functionParameterString()
    … …  
    284282        var match = resolvedValue.description.match(/^function.*?(\([^)]+?\))/);
    285283        return match ? match[1] : "()";
    286     },
     284    }
    287285
    288286    _sanitizedPrototypeString(value)
    … …  
    297295
    298296        return value.description.replace(/Prototype$/, "");
    299     },
     297    }
    300298
    301299    _updateChildren()
    … …  
    311309        else
    312310            resolvedValue.getDisplayablePropertyDescriptors(this._updateChildrenInternal.bind(this, this._updateProperties, this._mode));
    313     },
     311    }
    314312
    315313    _updateChildrenInternal(handler, mode, list)
    … …  
    318316
    319317        if (!list) {
    320             var errorMessageElement = WebInspector.ObjectTreeView.emptyMessageElement(WebInspector.UIString("Could not fetch properties. Object may no longer exist."));
    321             this.appendChild(new TreeElement(errorMessageElement, null, false));
     318            var errorMessageElement = WebInspector.ObjectTreeView.createEmptyMessageElement(WebInspector.UIString("Could not fetch properties. Object may no longer exist."));
     319            this.appendChild(new WebInspector.TreeElement(errorMessageElement, null, false));
    322320            return;
    323321        }
    324322
    325323        handler.call(this, list, this.resolvedValuePropertyPath(), mode);
    326     },
     324    }
    327325
    328326    _updateEntries(entries, propertyPath, mode)
    … …  
    337335
    338336        if (!this.children.length) {
    339             var emptyMessageElement = WebInspector.ObjectTreeView.emptyMessageElement(WebInspector.UIString("No Entries."));
    340             this.appendChild(new TreeElement(emptyMessageElement, null, false));
     337            var emptyMessageElement = WebInspector.ObjectTreeView.createEmptyMessageElement(WebInspector.UIString("No Entries."));
     338            this.appendChild(new WebInspector.TreeElement(emptyMessageElement, null, false));
    341339        }
    342340
    … …  
    347345                this.appendChild(new WebInspector.ObjectTreePropertyTreeElement(propertyDescriptor, propertyPath, mode));
    348346        }.bind(this));
    349     },
     347    }
    350348
    351349    _updateProperties(properties, propertyPath, mode)
    352350    {
    353         properties.sort(WebInspector.ObjectTreeView.ComparePropertyDescriptors);
     351        properties.sort(WebInspector.ObjectTreeView.comparePropertyDescriptors);
    354352
    355353        var resolvedValue = this.resolvedValue();
    … …  
    381379
    382380        if (!this.children.length) {
    383             var emptyMessageElement = WebInspector.ObjectTreeView.emptyMessageElement(WebInspector.UIString("No Properties."));
    384             this.appendChild(new TreeElement(emptyMessageElement, null, false));
     381            var emptyMessageElement = WebInspector.ObjectTreeView.createEmptyMessageElement(WebInspector.UIString("No Properties."));
     382            this.appendChild(new WebInspector.TreeElement(emptyMessageElement, null, false));
    385383        }
    386384    }

  • trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreeSetIndexTreeElement.js

    r181186 r182042  
    2424 */
    2525
    26 WebInspector.ObjectTreeSetIndexTreeElement = function(object, propertyPath)
     26WebInspector.ObjectTreeSetIndexTreeElement = class ObjectTreeSetIndexTreeElement extends WebInspector.ObjectTreeBaseTreeElement
    2727{
    28     console.assert(object instanceof WebInspector.RemoteObject);
     28    constructor(object, propertyPath)
     29    {
     30        console.assert(object instanceof WebInspector.RemoteObject);
    2931
    30     this._object = object;
     32        // Treat the same as an array-index just with different strings and widths.
     33        super(object, propertyPath);
    3134
    32     // Treat the same as an array-index just with different strings and widths.
    33     WebInspector.ObjectTreeBaseTreeElement.call(this, this._object, propertyPath);
     35        this._object = object;
    3436
    35     this.mainTitle = this._titleFragment();
    36     this.addClassName("object-tree-array-index");
    37 };
    38 
    39 WebInspector.ObjectTreeSetIndexTreeElement.prototype = {
    40     constructor: WebInspector.ObjectTreeSetIndexTreeElement,
    41     __proto__: WebInspector.ObjectTreeBaseTreeElement.prototype,
     37        this.mainTitle = this._titleFragment();
     38        this.addClassName("object-tree-array-index");
     39    }
    4240
    4341    // Public
    … …  
    4644    {
    4745        return this._object;
    48     },
     46    }
    4947
    5048    // Protected
    … …  
    5351    {
    5452        return this._object;
    55     },
     53    }
    5654
    5755    resolvedValuePropertyPath()
    5856    {
    5957        return this.propertyPath.appendSetIndex(this._object);
    60     },
     58    }
    6159
    6260    // Private

  • trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreeView.js

    r181769 r182042  
    6565    this._outlineElement = document.createElement("ol");
    6666    this._outlineElement.className = "object-tree-outline";
    67     this._outline = new TreeOutline(this._outlineElement);
     67    this._outline = new WebInspector.TreeOutline(this._outlineElement);
    6868    this._element.appendChild(this._outlineElement);
    6969
    … …  
    234234        if (!list) {
    235235            var errorMessageElement = WebInspector.ObjectTreeView.emptyMessageElement(WebInspector.UIString("Could not fetch properties. Object may no longer exist."));
    236             this._outline.appendChild(new TreeElement(errorMessageElement, null, false));
     236            this._outline.appendChild(new WebInspector.TreeElement(errorMessageElement, null, false));
    237237            return;
    238238        }
    … …  
    253253        if (!this._outline.children.length) {
    254254            var emptyMessageElement = WebInspector.ObjectTreeView.emptyMessageElement(WebInspector.UIString("No Entries."));
    255             this._outline.appendChild(new TreeElement(emptyMessageElement, null, false));
     255            this._outline.appendChild(new WebInspector.TreeElement(emptyMessageElement, null, false));
    256256        }
    257257
    … …  
    285285        if (!this._outline.children.length) {
    286286            var emptyMessageElement = WebInspector.ObjectTreeView.emptyMessageElement(WebInspector.UIString("No Properties."));
    287             this._outline.appendChild(new TreeElement(emptyMessageElement, null, false));
     287            this._outline.appendChild(new WebInspector.TreeElement(emptyMessageElement, null, false));
    288288        }
    289289    },

  • trunk/Source/WebInspectorUI/UserInterface/Views/ProfileNodeTreeElement.js

    r164543 r182042  
    11/*
    2  * Copyright (C) 2014 Apple Inc. All rights reserved.
     2 * Copyright (C) 2014-2105 Apple Inc. All rights reserved.
    33 *
    44 * Redistribution and use in source and binary forms, with or without
    … …  
    2424 */
    2525
    26 WebInspector.ProfileNodeTreeElement = function(profileNode, delegate)
     26WebInspector.ProfileNodeTreeElement = class ProfileNodeTreeElement extends WebInspector.GeneralTreeElement
    2727{
    28     console.assert(profileNode);
     28    constructor(profileNode, delegate)
     29    {
     30        console.assert(profileNode);
    2931
    30     this._profileNode = profileNode;
    31     this._delegate = delegate || null;
     32        var title = profileNode.functionName;
     33        var subtitle = "";
    3234
    33     var title = profileNode.functionName;
    34     var subtitle = "";
     35        if (!title) {
     36            switch (profileNode.type) {
     37            case WebInspector.ProfileNode.Type.Function:
     38                title = WebInspector.UIString("(anonymous function)");
     39                break;
     40            case WebInspector.ProfileNode.Type.Program:
     41                title = WebInspector.UIString("(program)");
     42                break;
     43            default:
     44                title = WebInspector.UIString("(anonymous function)");
     45                console.error("Unknown ProfileNode type: " + profileNode.type);
     46            }
     47        }
    3548
    36     if (!title) {
     49        var sourceCodeLocation = profileNode.sourceCodeLocation;
     50        if (sourceCodeLocation) {
     51            subtitle = document.createElement("span");
     52            sourceCodeLocation.populateLiveDisplayLocationString(subtitle, "textContent");
     53        }
     54
     55        var className;
     56
    3757        switch (profileNode.type) {
    3858        case WebInspector.ProfileNode.Type.Function:
    39             title = WebInspector.UIString("(anonymous function)");
     59            className = WebInspector.CallFrameTreeElement.FunctionIconStyleClassName;
     60            if (!sourceCodeLocation)
     61                className = WebInspector.CallFrameTreeElement.NativeIconStyleClassName;
    4062            break;
    4163        case WebInspector.ProfileNode.Type.Program:
    42             title = WebInspector.UIString("(program)");
     64            className = WebInspector.TimelineRecordTreeElement.EvaluatedRecordIconStyleClass;
    4365            break;
    44         default:
    45             title = WebInspector.UIString("(anonymous function)");
    46             console.error("Unknown ProfileNode type: " + profileNode.type);
    4766        }
     67
     68        console.assert(className);
     69
     70        // This is more than likely an event listener function with an "on" prefix and it is
     71        // as long or longer than the shortest event listener name -- "oncut".
     72        if (profileNode.functionName && profileNode.functionName.startsWith("on") && profileNode.functionName.length >= 5)
     73            className = WebInspector.CallFrameTreeElement.EventListenerIconStyleClassName;
     74
     75        var hasChildren = !!profileNode.childNodes.length;
     76
     77        super([className], title, subtitle, profileNode, hasChildren);
     78
     79        this._profileNode = profileNode;
     80        this._delegate = delegate || null;
     81
     82        this.small = true;
     83        this.shouldRefreshChildren = true;
     84
     85        if (sourceCodeLocation)
     86            this.tooltipHandledSeparately = true;
    4887    }
    49 
    50     var sourceCodeLocation = this._profileNode.sourceCodeLocation;
    51     if (sourceCodeLocation) {
    52         subtitle = document.createElement("span");
    53         sourceCodeLocation.populateLiveDisplayLocationString(subtitle, "textContent");
    54     }
    55 
    56     var className;
    57 
    58     switch (this._profileNode.type) {
    59     case WebInspector.ProfileNode.Type.Function:
    60         className = WebInspector.CallFrameTreeElement.FunctionIconStyleClassName;
    61         if (!sourceCodeLocation)
    62             className = WebInspector.CallFrameTreeElement.NativeIconStyleClassName;
    63         break;
    64     case WebInspector.ProfileNode.Type.Program:
    65         className = WebInspector.TimelineRecordTreeElement.EvaluatedRecordIconStyleClass;
    66         break;
    67     }
    68 
    69     console.assert(className);
    70 
    71     // This is more than likely an event listener function with an "on" prefix and it is
    72     // as long or longer than the shortest event listener name -- "oncut".
    73     if (profileNode.functionName && profileNode.functionName.startsWith("on") && profileNode.functionName.length >= 5)
    74         className = WebInspector.CallFrameTreeElement.EventListenerIconStyleClassName;
    75 
    76     var hasChildren = !!profileNode.childNodes.length;
    77 
    78     WebInspector.GeneralTreeElement.call(this, [className], title, subtitle, profileNode, hasChildren);
    79 
    80     this.small = true;
    81     this.shouldRefreshChildren = true;
    82 
    83     if (sourceCodeLocation)
    84         this.tooltipHandledSeparately = true;
    85 };
    86 
    87 WebInspector.ProfileNodeTreeElement.prototype = {
    88     constructor: WebInspector.ProfileNodeTreeElement,
    89     __proto__: WebInspector.GeneralTreeElement.prototype,
    9088
    9189    // Public
    … …  
    9492    {
    9593        return this._profileNode;
    96     },
     94    }
    9795
    9896    get filterableData()
    … …  
    10098        var url = this._profileNode.sourceCodeLocation ? this._profileNode.sourceCodeLocation.sourceCode.url : "";
    10199        return {text: [this.mainTitle, url || ""]};
    102     },
     100    }
    103101
    104102    // Protected
    105103
    106     onattach: function()
     104    onattach()
    107105    {
    108106        WebInspector.GeneralTreeElement.prototype.onattach.call(this);
    … …  
    115113        var tooltipPrefix = this.mainTitle + "\n";
    116114        this._profileNode.sourceCodeLocation.populateLiveDisplayLocationTooltip(this.element, tooltipPrefix);
    117     },
     115    }
    118116
    119     onpopulate: function()
     117    onpopulate()
    120118    {
    121119        if (!this.hasChildren || !this.shouldRefreshChildren)

  • trunk/Source/WebInspectorUI/UserInterface/Views/PropertiesSection.js

    r173431 r182042  
    2929    this.propertiesElement.className = "properties properties-tree";
    3030    this.propertiesElement.tabIndex = 0;
    31     this.propertiesTreeOutline = new TreeOutline(this.propertiesElement);
     31    this.propertiesTreeOutline = new WebInspector.TreeOutline(this.propertiesElement);
    3232    this.propertiesTreeOutline.section = this;
    3333

  • trunk/Source/WebInspectorUI/UserInterface/Views/ResourceTreeElement.js

    r180486 r182042  
    11/*
    2  * Copyright (C) 2013 Apple Inc. All rights reserved.
     2 * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
    33 *
    44 * Redistribution and use in source and binary forms, with or without
    … …  
    2424 */
    2525
    26 WebInspector.ResourceTreeElement = function(resource, representedObject)
     26WebInspector.ResourceTreeElement = class ResourceTreeElement extends WebInspector.SourceCodeTreeElement
    2727{
    28     console.assert(resource instanceof WebInspector.Resource);
     28    constructor(resource, representedObject)
     29    {
     30        console.assert(resource instanceof WebInspector.Resource);
    2931
    30     WebInspector.SourceCodeTreeElement.call(this, resource, [WebInspector.ResourceTreeElement.StyleClassName, WebInspector.ResourceTreeElement.ResourceIconStyleClassName, resource.type], "", "", representedObject || resource, false);
     32        super(resource, ["resource", WebInspector.ResourceTreeElement.ResourceIconStyleClassName, resource.type], "", "", representedObject || resource, false);
    3133
    32     this._updateResource(resource);
    33 };
     34        this._updateResource(resource);
     35    }
    3436
    35 WebInspector.ResourceTreeElement.StyleClassName = "resource";
    36 WebInspector.ResourceTreeElement.ResourceIconStyleClassName = "resource-icon";
    37 WebInspector.ResourceTreeElement.FailedStyleClassName = "failed";
     37    // Static
    3838
    39 WebInspector.ResourceTreeElement.compareResourceTreeElements = function(a, b)
    40 {
    41     // Compare by type first to keep resources grouped by type when not sorted into folders.
    42     var comparisonResult = a.resource.type.localeCompare(b.resource.type);
    43     if (comparisonResult !== 0)
    44         return comparisonResult;
     39    static compareResourceTreeElements(a, b)
     40    {
     41        // Compare by type first to keep resources grouped by type when not sorted into folders.
     42        var comparisonResult = a.resource.type.localeCompare(b.resource.type);
     43        if (comparisonResult !== 0)
     44            return comparisonResult;
    4545
    46     // Compare async resource types by their first timestamp so they are in chronological order.
    47     if (a.resource.type === WebInspector.Resource.Type.XHR || a.resource.type === WebInspector.Resource.Type.WebSocket)
    48         return a.resource.firstTimestamp - b.resource.firstTimestamp || 0;
     46        // Compare async resource types by their first timestamp so they are in chronological order.
     47        if (a.resource.type === WebInspector.Resource.Type.XHR || a.resource.type === WebInspector.Resource.Type.WebSocket)
     48            return a.resource.firstTimestamp - b.resource.firstTimestamp || 0;
    4949
    50     // Compare by subtitle when the types are the same. The subtitle is used to show the
    51     // domain of the resource. This causes resources to group by domain. If the resource
    52     // is on the same domain as the frame it will have an empty subtitle. This is good
    53     // because empty string sorts first, so those will appear before external resources.
    54     comparisonResult = a.subtitle.localeCompare(b.subtitle);
    55     if (comparisonResult !== 0)
    56         return comparisonResult;
     50        // Compare by subtitle when the types are the same. The subtitle is used to show the
     51        // domain of the resource. This causes resources to group by domain. If the resource
     52        // is on the same domain as the frame it will have an empty subtitle. This is good
     53        // because empty string sorts first, so those will appear before external resources.
     54        comparisonResult = a.subtitle.localeCompare(b.subtitle);
     55        if (comparisonResult !== 0)
     56            return comparisonResult;
    5757
    58     // Compare by title when the subtitles are the same.
    59     return a.mainTitle.localeCompare(b.mainTitle);
    60 };
     58        // Compare by title when the subtitles are the same.
     59        return a.mainTitle.localeCompare(b.mainTitle);
     60    }
    6161
    62 WebInspector.ResourceTreeElement.compareFolderAndResourceTreeElements = function(a, b)
    63 {
    64     var aIsFolder = a instanceof WebInspector.FolderTreeElement;
    65     var bIsFolder = b instanceof WebInspector.FolderTreeElement;
     62    static compareFolderAndResourceTreeElements(a, b)
     63    {
     64        var aIsFolder = a instanceof WebInspector.FolderTreeElement;
     65        var bIsFolder = b instanceof WebInspector.FolderTreeElement;
    6666
    67     if (aIsFolder && !bIsFolder)
    68         return -1;
    69     if (!aIsFolder && bIsFolder)
    70         return 1;
    71     if (aIsFolder && bIsFolder)
    72         return a.mainTitle.localeCompare(b.mainTitle);
     67        if (aIsFolder && !bIsFolder)
     68            return -1;
     69        if (!aIsFolder && bIsFolder)
     70            return 1;
     71        if (aIsFolder && bIsFolder)
     72            return a.mainTitle.localeCompare(b.mainTitle);
    7373
    74     return WebInspector.ResourceTreeElement.compareResourceTreeElements(a, b);
    75 };
    76 
    77 WebInspector.ResourceTreeElement.prototype = {
    78     constructor: WebInspector.ResourceTreeElement,
    79     __proto__: WebInspector.SourceCodeTreeElement.prototype,
     74        return WebInspector.ResourceTreeElement.compareResourceTreeElements(a, b);
     75    }
    8076
    8177    // Public
    … …  
    8480    {
    8581        return this._resource;
    86     },
     82    }
    8783
    8884    get filterableData()
    8985    {
    9086        return {text: this._resource.url};
    91     },
     87    }
    9288
    93     ondblclick: function()
     89    ondblclick()
    9490    {
    9591        InspectorFrontendHost.openInNewTab(this._resource.url);
    96     },
     92    }
    9793
    9894    // Protected (Used by FrameTreeElement)
    9995
    100     _updateResource: function(resource)
     96    _updateResource(resource)
    10197    {
    10298        console.assert(resource instanceof WebInspector.Resource);
    … …  
    126122        this._updateStatus();
    127123        this._updateToolTip();
    128     },
     124    }
    129125
    130126    // Protected
    131127
    132     _updateTitles: function()
     128    _updateTitles()
    133129    {
    134130        var frame = this._resource.parentFrame;
    … …  
    153149        if (oldMainTitle !== this.mainTitle)
    154150            this.callFirstAncestorFunction("descendantResourceTreeElementMainTitleDidChange", [this, oldMainTitle]);
    155     },
     151    }
    156152
    157153    // Private
    158154
    159     _updateStatus: function()
     155    _updateStatus()
    160156    {
    161157        if (this._resource.failed)
    … …  
    175171            this.status = spinner.element;
    176172        }
    177     },
     173    }
    178174
    179     _updateToolTip: function()
     175    _updateToolTip()
    180176    {
    181177        this.tooltip = this._resource.url;
    182     },
     178    }
    183179
    184     _urlDidChange: function(event)
     180    _urlDidChange(event)
    185181    {
    186182        this._updateTitles();
    187183        this._updateToolTip();
    188     },
     184    }
    189185
    190     _typeDidChange: function(event)
     186    _typeDidChange(event)
    191187    {
    192188        this.removeClassName(event.data.oldType);
    … …  
    196192    }
    197193};
     194
     195WebInspector.ResourceTreeElement.ResourceIconStyleClassName = "resource-icon";
     196WebInspector.ResourceTreeElement.FailedStyleClassName = "failed";

  • trunk/Source/WebInspectorUI/UserInterface/Views/ScriptTreeElement.js

    r173436 r182042  
    11/*
    2  * Copyright (C) 2013 Apple Inc. All rights reserved.
     2 * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
    33 *
    44 * Redistribution and use in source and binary forms, with or without
    … …  
    2424 */
    2525
    26 WebInspector.ScriptTreeElement = function(script)
     26WebInspector.ScriptTreeElement = class ScriptTreeElement extends WebInspector.SourceCodeTreeElement
    2727{
    28     console.assert(script instanceof WebInspector.Script);
     28    constructor(script)
     29    {
     30        console.assert(script instanceof WebInspector.Script);
    2931
    30     WebInspector.SourceCodeTreeElement.call(this, script, WebInspector.ScriptTreeElement.StyleClassName, null, null, script, false);
     32        super(script, "script", null, null, script, false);
    3133
    32     this.mainTitle = script.displayName;
     34        this.mainTitle = script.displayName;
    3335
    34     if (script.url) {
    35         // Show the host as the subtitle if it is different from the main title.
    36         var subtitle = WebInspector.displayNameForHost(script.urlComponents.host);
    37         this.subtitle = this.mainTitle !== subtitle ? subtitle : null;
     36        if (script.url) {
     37            // Show the host as the subtitle if it is different from the main title.
     38            var subtitle = WebInspector.displayNameForHost(script.urlComponents.host);
     39            this.subtitle = this.mainTitle !== subtitle ? subtitle : null;
    3840
    39         this.tooltip = script.url;
     41            this.tooltip = script.url;
    4042
    41         this.addClassName(WebInspector.ResourceTreeElement.ResourceIconStyleClassName);
    42         this.addClassName(WebInspector.Resource.Type.Script);
    43     } else
    44         this.addClassName(WebInspector.ScriptTreeElement.AnonymousScriptIconStyleClassName);
     43            this.addClassName(WebInspector.ResourceTreeElement.ResourceIconStyleClassName);
     44            this.addClassName(WebInspector.Resource.Type.Script);
     45        } else
     46            this.addClassName(WebInspector.ScriptTreeElement.AnonymousScriptIconStyleClassName);
    4547
    46     this._script = script;
    47 };
    48 
    49 WebInspector.ScriptTreeElement.AnonymousScriptIconStyleClassName = "anonymous-script-icon";
    50 WebInspector.ScriptTreeElement.StyleClassName = "script";
    51 
    52 WebInspector.ScriptTreeElement.prototype = {
    53     constructor: WebInspector.ScriptTreeElement,
     48        this._script = script;
     49    }
    5450
    5551    // Public
    … …  
    6157};
    6258
    63 WebInspector.ScriptTreeElement.prototype.__proto__ = WebInspector.SourceCodeTreeElement.prototype;
     59WebInspector.ScriptTreeElement.AnonymousScriptIconStyleClassName = "anonymous-script-icon";

  • trunk/Source/WebInspectorUI/UserInterface/Views/SearchResultTreeElement.js

    r176358 r182042  
    11/*
    2  * Copyright (C) 2013 Apple Inc. All rights reserved.
     2 * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
    33 *
    44 * Redistribution and use in source and binary forms, with or without
    … …  
    2424 */
    2525
    26 WebInspector.SearchResultTreeElement = function(representedObject)
     26WebInspector.SearchResultTreeElement = class SearchResultTreeElement extends WebInspector.GeneralTreeElement
    2727{
    28     console.assert(representedObject instanceof WebInspector.DOMSearchMatchObject || representedObject instanceof WebInspector.SourceCodeSearchMatchObject);
     28    constructor(representedObject)
     29    {
     30        console.assert(representedObject instanceof WebInspector.DOMSearchMatchObject || representedObject instanceof WebInspector.SourceCodeSearchMatchObject);
    2931
    30     var title = WebInspector.SearchResultTreeElement.truncateAndHighlightTitle(representedObject.title, representedObject.searchTerm, representedObject.sourceCodeTextRange);
     32        var title = WebInspector.SearchResultTreeElement.truncateAndHighlightTitle(representedObject.title, representedObject.searchTerm, representedObject.sourceCodeTextRange);
    3133
    32     WebInspector.GeneralTreeElement.call(this, representedObject.className, title, null, representedObject, false);
    33     this.small = true;
    34 };
     34        super(representedObject.className, title, null, representedObject, false);
    3535
    36 WebInspector.SearchResultTreeElement.CharactersToShowBeforeSearchMatch = 15;
    37 WebInspector.SearchResultTreeElement.CharactersToShowAfterSearchMatch = 50;
    38 WebInspector.SearchResultTreeElement.HighlightedStyleClassName = "highlighted";
     36        this.small = true;
     37    }
    3938
    40 WebInspector.SearchResultTreeElement.prototype = {
    41     constructor: WebInspector.SearchResultTreeElement,
     39    // Static
     40
     41    static truncateAndHighlightTitle(title, searchTerm, sourceCodeTextRange)
     42    {
     43        // Use the original location, since those line/column offsets match the line text in title.
     44        var textRange = sourceCodeTextRange.textRange;
     45
     46        var searchTermIndex = textRange.startColumn;
     47
     48        // We should only have one line text ranges, so make sure that is the case.
     49        console.assert(textRange.startLine === textRange.endLine);
     50
     51        // Show some characters before the matching text (if there are enough) for context. TreeOutline takes care of the truncating
     52        // at the end of the string.
     53        var modifiedTitle = null;
     54        if (searchTermIndex > WebInspector.SearchResultTreeElement.CharactersToShowBeforeSearchMatch) {
     55            modifiedTitle = "\u2026" + title.substring(searchTermIndex - WebInspector.SearchResultTreeElement.CharactersToShowBeforeSearchMatch);
     56            searchTermIndex = WebInspector.SearchResultTreeElement.CharactersToShowBeforeSearchMatch + 1;
     57        } else
     58            modifiedTitle = title;
     59
     60        // Truncate the tail of the title so the tooltip isn't so large.
     61        modifiedTitle = modifiedTitle.trimEnd(searchTermIndex + searchTerm.length + WebInspector.SearchResultTreeElement.CharactersToShowAfterSearchMatch);
     62
     63        console.assert(modifiedTitle.substring(searchTermIndex, searchTermIndex + searchTerm.length).toLowerCase() === searchTerm.toLowerCase());
     64
     65        var highlightedTitle = document.createDocumentFragment();
     66
     67        highlightedTitle.appendChild(document.createTextNode(modifiedTitle.substring(0, searchTermIndex)));
     68
     69        var highlightSpan = document.createElement("span");
     70        highlightSpan.className = "highlighted";
     71        highlightSpan.appendChild(document.createTextNode(modifiedTitle.substring(searchTermIndex, searchTermIndex + searchTerm.length)));
     72        highlightedTitle.appendChild(highlightSpan);
     73
     74        highlightedTitle.appendChild(document.createTextNode(modifiedTitle.substring(searchTermIndex + searchTerm.length)));
     75
     76        return highlightedTitle;
     77    }
    4278
    4379    // Public
    … …  
    4985};
    5086
    51 WebInspector.SearchResultTreeElement.prototype.__proto__ = WebInspector.GeneralTreeElement.prototype;
    52 
    53 WebInspector.SearchResultTreeElement.truncateAndHighlightTitle = function(title, searchTerm, sourceCodeTextRange)
    54 {
    55     // Use the original location, since those line/column offsets match the line text in title.
    56     var textRange = sourceCodeTextRange.textRange;
    57 
    58     var searchTermIndex = textRange.startColumn;
    59 
    60     // We should only have one line text ranges, so make sure that is the case.
    61     console.assert(textRange.startLine === textRange.endLine);
    62 
    63     // Show some characters before the matching text (if there are enough) for context. TreeOutline takes care of the truncating
    64     // at the end of the string.
    65     var modifiedTitle = null;
    66     if (searchTermIndex > WebInspector.SearchResultTreeElement.CharactersToShowBeforeSearchMatch) {
    67         modifiedTitle = "\u2026" + title.substring(searchTermIndex - WebInspector.SearchResultTreeElement.CharactersToShowBeforeSearchMatch);
    68         searchTermIndex = WebInspector.SearchResultTreeElement.CharactersToShowBeforeSearchMatch + 1;
    69     } else
    70         modifiedTitle = title;
    71 
    72     // Truncate the tail of the title so the tooltip isn't so large.
    73     modifiedTitle = modifiedTitle.trimEnd(searchTermIndex + searchTerm.length + WebInspector.SearchResultTreeElement.CharactersToShowAfterSearchMatch);
    74 
    75     console.assert(modifiedTitle.substring(searchTermIndex, searchTermIndex + searchTerm.length).toLowerCase() === searchTerm.toLowerCase());
    76 
    77     var highlightedTitle = document.createDocumentFragment();
    78 
    79     highlightedTitle.appendChild(document.createTextNode(modifiedTitle.substring(0, searchTermIndex)));
    80 
    81     var highlightSpan = document.createElement("span");
    82     highlightSpan.className = WebInspector.SearchResultTreeElement.HighlightedStyleClassName;
    83     highlightSpan.appendChild(document.createTextNode(modifiedTitle.substring(searchTermIndex, searchTermIndex + searchTerm.length)));
    84     highlightedTitle.appendChild(highlightSpan);
    85 
    86     highlightedTitle.appendChild(document.createTextNode(modifiedTitle.substring(searchTermIndex + searchTerm.length)));
    87 
    88     return highlightedTitle;
    89 };
     87WebInspector.SearchResultTreeElement.CharactersToShowBeforeSearchMatch = 15;
     88WebInspector.SearchResultTreeElement.CharactersToShowAfterSearchMatch = 50;

  • trunk/Source/WebInspectorUI/UserInterface/Views/SourceCodeTimelineTreeElement.js

    r164543 r182042  
    11/*
    2  * Copyright (C) 2013 Apple Inc. All rights reserved.
     2 * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
    33 *
    44 * Redistribution and use in source and binary forms, with or without
    … …  
    2424 */
    2525
    26 WebInspector.SourceCodeTimelineTreeElement = function(sourceCodeTimeline, subtitleNameStyle, includeTimerIdentifierInMainTitle)
     26WebInspector.SourceCodeTimelineTreeElement = class SourceCodeTimelineTreeElement extends WebInspector.TimelineRecordTreeElement
    2727{
    28     console.assert(sourceCodeTimeline);
     28    constructor(sourceCodeTimeline, subtitleNameStyle, includeTimerIdentifierInMainTitle)
     29    {
     30        console.assert(sourceCodeTimeline);
    2931
    30     this._sourceCodeTimeline = sourceCodeTimeline;
     32        subtitleNameStyle = subtitleNameStyle || WebInspector.SourceCodeLocation.NameStyle.None;
    3133
    32     subtitleNameStyle = subtitleNameStyle || WebInspector.SourceCodeLocation.NameStyle.None;
     34        super(sourceCodeTimeline.records[0], subtitleNameStyle, includeTimerIdentifierInMainTitle, sourceCodeTimeline.sourceCodeLocation, sourceCodeTimeline);
    3335
    34     WebInspector.TimelineRecordTreeElement.call(this, sourceCodeTimeline.records[0], subtitleNameStyle, includeTimerIdentifierInMainTitle, sourceCodeTimeline.sourceCodeLocation, sourceCodeTimeline);
    35 };
    36 
    37 WebInspector.SourceCodeTimelineTreeElement.prototype = {
    38     constructor: WebInspector.SourceCodeTimelineTreeElement,
    39     __proto__: WebInspector.TimelineRecordTreeElement.prototype,
     36        this._sourceCodeTimeline = sourceCodeTimeline;
     37    }
    4038
    4139    // Public
    4240
    43     record: undefined,
     41    get record()
     42    {
     43        return undefined;
     44    }
    4445
    4546    get sourceCodeTimeline()

  • trunk/Source/WebInspectorUI/UserInterface/Views/SourceCodeTreeElement.js

    r175784 r182042  
    11/*
    2  * Copyright (C) 2013 Apple Inc. All rights reserved.
     2 * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
    33 *
    44 * Redistribution and use in source and binary forms, with or without
    … …  
    2424 */
    2525
    26 WebInspector.SourceCodeTreeElement = function(sourceCode, classNames, title, subtitle, representedObject, hasChildren)
     26WebInspector.SourceCodeTreeElement = class SourceCodeTreeElement extends WebInspector.FolderizedTreeElement
    2727{
    28     console.assert(sourceCode instanceof WebInspector.SourceCode);
    29 
    30     WebInspector.FolderizedTreeElement.call(this, classNames, title, subtitle, representedObject || sourceCode, hasChildren);
    31 
    32     this.small = true;
    33 
    34     this._updateSourceCode(sourceCode);
    35 };
    36 
    37 WebInspector.SourceCodeTreeElement.prototype = {
    38     constructor: WebInspector.SourceCodeTreeElement,
    39     __proto__: WebInspector.FolderizedTreeElement.prototype,
     28    constructor(sourceCode, classNames, title, subtitle, representedObject, hasChildren)
     29    {
     30        console.assert(sourceCode instanceof WebInspector.SourceCode);
     31
     32        super(classNames, title, subtitle, representedObject || sourceCode, hasChildren);
     33
     34        this.small = true;
     35
     36        this._updateSourceCode(sourceCode);
     37    }
    4038
    4139    // Public
    4240
    43     updateSourceMapResources: function()
     41    updateSourceMapResources()
    4442    {
    4543        if (!this.treeOutline || !this.treeOutline.includeSourceMapResourceChildren)
    … …  
    5149        if (!this.hasChildren)
    5250            this.removeChildren();
    53     },
     51    }
    5452
    5553    // Overrides from TreeElement
    5654
    57     onattach: function()
     55    onattach()
    5856    {
    5957        WebInspector.GeneralTreeElement.prototype.onattach.call(this);
    6058
    6159        this.updateSourceMapResources();
    62     },
    63 
    64     onpopulate: function()
     60    }
     61
     62    onpopulate()
    6563    {
    6664        if (!this.treeOutline || !this.treeOutline.includeSourceMapResourceChildren)
    … …  
    131129        for (var i = 0; i < this.children.length; ++i)
    132130            findAndCombineFolderChains(this.children[i], null);
    133     },
     131    }
    134132
    135133    // Protected
    136134
    137     createFoldersAsNeededForSubpath: function(subpath)
     135    createFoldersAsNeededForSubpath(subpath)
    138136    {
    139137        if (!subpath)
    … …  
    170168
    171169        return currentFolderTreeElement;
    172     },
    173 
    174     descendantResourceTreeElementTypeDidChange: function(childTreeElement, oldType)
     170    }
     171
     172    descendantResourceTreeElementTypeDidChange(childTreeElement, oldType)
    175173    {
    176174        // Called by descendant SourceMapResourceTreeElements.
    … …  
    186184        if (wasSelected)
    187185            childTreeElement.revealAndSelect(true, false, true, true);
    188     },
     186    }
    189187
    190188    // Protected (ResourceTreeElement calls this when its Resource changes dynamically for Frames)
    191189
    192     _updateSourceCode: function(sourceCode)
     190    _updateSourceCode(sourceCode)
    193191    {
    194192        console.assert(sourceCode instanceof WebInspector.SourceCode);

  • trunk/Source/WebInspectorUI/UserInterface/Views/SourceMapResourceTreeElement.js

    r166190 r182042  
    11/*
    2  * Copyright (C) 2013 Apple Inc. All rights reserved.
     2 * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
    33 *
    44 * Redistribution and use in source and binary forms, with or without
    … …  
    2424 */
    2525
    26 WebInspector.SourceMapResourceTreeElement = function(sourceMapResource, representedObject)
     26WebInspector.SourceMapResourceTreeElement = class SourceMapResourceTreeElement extends WebInspector.ResourceTreeElement
    2727{
    28     console.assert(sourceMapResource instanceof WebInspector.SourceMapResource);
     28    constructor(sourceMapResource, representedObject)
     29    {
     30        console.assert(sourceMapResource instanceof WebInspector.SourceMapResource);
    2931
    30     WebInspector.ResourceTreeElement.call(this, sourceMapResource);
     32        super(sourceMapResource);
    3133
    32     console.assert(this.resource === sourceMapResource);
     34        console.assert(this.resource === sourceMapResource);
    3335
    34     this.addClassName(WebInspector.SourceMapResourceTreeElement.StyleClassName);
    35 };
    36 
    37 WebInspector.SourceMapResourceTreeElement.StyleClassName = "source-map-resource";
    38 
    39 WebInspector.SourceMapResourceTreeElement.prototype = {
    40     constructor: WebInspector.SourceMapResourceTreeElement,
     36        this.addClassName("source-map-resource");
     37    }
    4138
    4239    // Protected
    4340
    44     _updateTitles: function()
     41    _updateTitles()
    4542    {
    4643        var oldMainTitle = this.mainTitle;
    … …  
    5754    }
    5855};
    59 
    60 WebInspector.SourceMapResourceTreeElement.prototype.__proto__ = WebInspector.ResourceTreeElement.prototype;

  • trunk/Source/WebInspectorUI/UserInterface/Views/StorageTreeElement.js

    r164543 r182042  
    11/*
    2  * Copyright (C) 2013 Apple Inc. All rights reserved.
     2 * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
    33 *
    44 * Redistribution and use in source and binary forms, with or without
    … …  
    2424 */
    2525
    26 WebInspector.StorageTreeElement = function(classNames, title, representedObject)
     26WebInspector.StorageTreeElement = class StorageTreeElement extends WebInspector.GeneralTreeElement
    2727{
    28     WebInspector.GeneralTreeElement.call(this, classNames, title, null, representedObject, false);
     28    constructor(classNames, title, representedObject)
     29    {
     30        super(classNames, title, null, representedObject, false);
    2931
    30     this.small = true;
    31     this.flattened = false;
    32 };
    33 
    34 WebInspector.StorageTreeElement.prototype = {
    35     constructor: WebInspector.StorageTreeElement,
     32        this.small = true;
     33        this.flattened = false;
     34    }
    3635
    3736    // Public
    … …  
    4039    {
    4140        return this._flattened;
    42     },
     41    }
    4342
    4443    set flattened(flattened)
    … …  
    5857        this.subtitle = this.name;
    5958        this._updateChildrenTitles();
    60     },
     59    }
    6160
    6261    // Private
    6362
    64     _updateChildrenTitles: function()
     63    _updateChildrenTitles()
    6564    {
    6665        for (var i = 0; i < this.children.length; ++i) {
    … …  
    7069    }
    7170};
    72 
    73 WebInspector.StorageTreeElement.prototype.__proto__ = WebInspector.GeneralTreeElement.prototype;

  • trunk/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.js

    r181185 r182042  
    462462            var contentElement = document.createElement("ol");
    463463            contentElement.classList.add("timeline-data-grid-tree-outline");
    464             this._popoverCallStackTreeOutline = new TreeOutline(contentElement);
     464            this._popoverCallStackTreeOutline = new WebInspector.TreeOutline(contentElement);
    465465            this._popoverCallStackTreeOutline.onselect = this._popoverCallStackTreeElementSelected.bind(this);
    466466        } else

  • trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordTreeElement.js

    r181626 r182042  
    11/*
    2  * Copyright (C) 2014 Apple Inc. All rights reserved.
     2 * Copyright (C) 2014-2015 Apple Inc. All rights reserved.
    33 *
    44 * Redistribution and use in source and binary forms, with or without
    … …  
    2424 */
    2525
    26 WebInspector.TimelineRecordTreeElement = function(timelineRecord, subtitleNameStyle, includeTimerIdentifierInMainTitle, sourceCodeLocation, representedObject)
     26WebInspector.TimelineRecordTreeElement = class TimelineRecordTreeElement extends WebInspector.GeneralTreeElement
    2727{
    28     console.assert(timelineRecord);
     28    constructor(timelineRecord, subtitleNameStyle, includeTimerIdentifierInMainTitle, sourceCodeLocation, representedObject)
     29    {
     30        console.assert(timelineRecord);
    2931
    30     this._record = timelineRecord;
    31     this._sourceCodeLocation = sourceCodeLocation || timelineRecord.sourceCodeLocation || null;
     32        sourceCodeLocation = sourceCodeLocation || timelineRecord.sourceCodeLocation || null;
    3233
    33     var title = "";
    34     var subtitle = "";
     34        var title = "";
     35        var subtitle = "";
    3536
    36     if (this._sourceCodeLocation) {
    37         subtitle = document.createElement("span");
     37        if (sourceCodeLocation) {
     38            subtitle = document.createElement("span");
    3839
    39         if (subtitleNameStyle !== WebInspector.SourceCodeLocation.NameStyle.None)
    40             this._sourceCodeLocation.populateLiveDisplayLocationString(subtitle, "textContent", null, subtitleNameStyle);
    41         else
    42             this._sourceCodeLocation.populateLiveDisplayLocationString(subtitle, "textContent", null, WebInspector.SourceCodeLocation.NameStyle.None, WebInspector.UIString("line "));
     40            if (subtitleNameStyle !== WebInspector.SourceCodeLocation.NameStyle.None)
     41                sourceCodeLocation.populateLiveDisplayLocationString(subtitle, "textContent", null, subtitleNameStyle);
     42            else
     43                sourceCodeLocation.populateLiveDisplayLocationString(subtitle, "textContent", null, WebInspector.SourceCodeLocation.NameStyle.None, WebInspector.UIString("line "));
     44        }
     45
     46        var iconStyleClass = null;
     47
     48        switch (timelineRecord.type) {
     49        case WebInspector.TimelineRecord.Type.Layout:
     50            title = WebInspector.LayoutTimelineRecord.displayNameForEventType(timelineRecord.eventType);
     51
     52            switch (timelineRecord.eventType) {
     53            case WebInspector.LayoutTimelineRecord.EventType.InvalidateStyles:
     54            case WebInspector.LayoutTimelineRecord.EventType.RecalculateStyles:
     55                iconStyleClass = WebInspector.TimelineRecordTreeElement.StyleRecordIconStyleClass;
     56                break;
     57            case WebInspector.LayoutTimelineRecord.EventType.InvalidateLayout:
     58            case WebInspector.LayoutTimelineRecord.EventType.ForcedLayout:
     59            case WebInspector.LayoutTimelineRecord.EventType.Layout:
     60                iconStyleClass = WebInspector.TimelineRecordTreeElement.LayoutRecordIconStyleClass;
     61                break;
     62            case WebInspector.LayoutTimelineRecord.EventType.Paint:
     63                iconStyleClass = WebInspector.TimelineRecordTreeElement.PaintRecordIconStyleClass;
     64                break;
     65            default:
     66                console.error("Unknown LayoutTimelineRecord eventType: " + timelineRecord.eventType, timelineRecord);
     67            }
     68
     69            break;
     70
     71        case WebInspector.TimelineRecord.Type.Script:
     72            title = WebInspector.ScriptTimelineRecord.EventType.displayName(timelineRecord.eventType, timelineRecord.details, includeTimerIdentifierInMainTitle);
     73
     74            switch (timelineRecord.eventType) {
     75            case WebInspector.ScriptTimelineRecord.EventType.ScriptEvaluated:
     76                iconStyleClass = WebInspector.TimelineRecordTreeElement.EvaluatedRecordIconStyleClass;
     77                break;
     78            case WebInspector.ScriptTimelineRecord.EventType.EventDispatched:
     79                iconStyleClass = WebInspector.TimelineRecordTreeElement.EventRecordIconStyleClass;
     80                break;
     81            case WebInspector.ScriptTimelineRecord.EventType.ProbeSampleRecorded:
     82                iconStyleClass = WebInspector.TimelineRecordTreeElement.ProbeRecordIconStyleClass;
     83                break;
     84            case WebInspector.ScriptTimelineRecord.EventType.ConsoleProfileRecorded:
     85                iconStyleClass = WebInspector.TimelineRecordTreeElement.ConsoleProfileIconStyleClass;
     86                break;
     87            case WebInspector.ScriptTimelineRecord.EventType.TimerFired:
     88            case WebInspector.ScriptTimelineRecord.EventType.TimerInstalled:
     89            case WebInspector.ScriptTimelineRecord.EventType.TimerRemoved:
     90                iconStyleClass = WebInspector.TimelineRecordTreeElement.TimerRecordIconStyleClass;
     91                break;
     92            case WebInspector.ScriptTimelineRecord.EventType.AnimationFrameFired:
     93            case WebInspector.ScriptTimelineRecord.EventType.AnimationFrameRequested:
     94            case WebInspector.ScriptTimelineRecord.EventType.AnimationFrameCanceled:
     95                iconStyleClass = WebInspector.TimelineRecordTreeElement.AnimationRecordIconStyleClass;
     96                break;
     97            default:
     98                console.error("Unknown ScriptTimelineRecord eventType: " + timelineRecord.eventType, timelineRecord);
     99            }
     100
     101            break;
     102
     103        case WebInspector.TimelineRecord.Type.RunLoop:
     104            title = WebInspector.UIString("Runloop Executed");
     105            iconStyleClass = WebInspector.TimelineRecordTreeElement.RunLoopRecordIconStyleClass;
     106            break;
     107
     108        default:
     109            console.error("Unknown TimelineRecord type: " + timelineRecord.type, timelineRecord);
     110        }
     111
     112        super([iconStyleClass], title, subtitle, representedObject || timelineRecord, false);
     113
     114        this._record = timelineRecord;
     115        this._sourceCodeLocation = sourceCodeLocation;
     116
     117        this.small = true;
     118
     119        if (this._sourceCodeLocation)
     120            this.tooltipHandledSeparately = true;
    43121    }
    44122
    45     var iconStyleClass = null;
     123    // Public
    46124
    47     switch (timelineRecord.type) {
    48     case WebInspector.TimelineRecord.Type.Layout:
    49         title = WebInspector.LayoutTimelineRecord.displayNameForEventType(timelineRecord.eventType);
    50 
    51         switch (timelineRecord.eventType) {
    52         case WebInspector.LayoutTimelineRecord.EventType.InvalidateStyles:
    53         case WebInspector.LayoutTimelineRecord.EventType.RecalculateStyles:
    54             iconStyleClass = WebInspector.TimelineRecordTreeElement.StyleRecordIconStyleClass;
    55             break;
    56         case WebInspector.LayoutTimelineRecord.EventType.InvalidateLayout:
    57         case WebInspector.LayoutTimelineRecord.EventType.ForcedLayout:
    58         case WebInspector.LayoutTimelineRecord.EventType.Layout:
    59             iconStyleClass = WebInspector.TimelineRecordTreeElement.LayoutRecordIconStyleClass;
    60             break;
    61         case WebInspector.LayoutTimelineRecord.EventType.Paint:
    62             iconStyleClass = WebInspector.TimelineRecordTreeElement.PaintRecordIconStyleClass;
    63             break;
    64         default:
    65             console.error("Unknown LayoutTimelineRecord eventType: " + timelineRecord.eventType, timelineRecord);
    66         }
    67 
    68         break;
    69 
    70     case WebInspector.TimelineRecord.Type.Script:
    71         title = WebInspector.ScriptTimelineRecord.EventType.displayName(timelineRecord.eventType, timelineRecord.details, includeTimerIdentifierInMainTitle);
    72 
    73         switch (timelineRecord.eventType) {
    74         case WebInspector.ScriptTimelineRecord.EventType.ScriptEvaluated:
    75             iconStyleClass = WebInspector.TimelineRecordTreeElement.EvaluatedRecordIconStyleClass;
    76             break;
    77         case WebInspector.ScriptTimelineRecord.EventType.EventDispatched:
    78             iconStyleClass = WebInspector.TimelineRecordTreeElement.EventRecordIconStyleClass;
    79             break;
    80         case WebInspector.ScriptTimelineRecord.EventType.ProbeSampleRecorded:
    81             iconStyleClass = WebInspector.TimelineRecordTreeElement.ProbeRecordIconStyleClass;
    82             break;
    83         case WebInspector.ScriptTimelineRecord.EventType.ConsoleProfileRecorded:
    84             iconStyleClass = WebInspector.TimelineRecordTreeElement.ConsoleProfileIconStyleClass;
    85             break;
    86         case WebInspector.ScriptTimelineRecord.EventType.TimerFired:
    87         case WebInspector.ScriptTimelineRecord.EventType.TimerInstalled:
    88         case WebInspector.ScriptTimelineRecord.EventType.TimerRemoved:
    89             iconStyleClass = WebInspector.TimelineRecordTreeElement.TimerRecordIconStyleClass;
    90             break;
    91         case WebInspector.ScriptTimelineRecord.EventType.AnimationFrameFired:
    92         case WebInspector.ScriptTimelineRecord.EventType.AnimationFrameRequested:
    93         case WebInspector.ScriptTimelineRecord.EventType.AnimationFrameCanceled:
    94             iconStyleClass = WebInspector.TimelineRecordTreeElement.AnimationRecordIconStyleClass;
    95             break;
    96         default:
    97             console.error("Unknown ScriptTimelineRecord eventType: " + timelineRecord.eventType, timelineRecord);
    98         }
    99 
    100         break;
    101 
    102     case WebInspector.TimelineRecord.Type.RunLoop:
    103         title = WebInspector.UIString("Runloop Executed");
    104         iconStyleClass = WebInspector.TimelineRecordTreeElement.RunLoopRecordIconStyleClass;
    105         break;
    106 
    107     default:
    108         console.error("Unknown TimelineRecord type: " + timelineRecord.type, timelineRecord);
     125    get record()
     126    {
     127        return this._record;
    109128    }
    110129
    111     WebInspector.GeneralTreeElement.call(this, [iconStyleClass], title, subtitle, representedObject || timelineRecord, false);
     130    get filterableData()
     131    {
     132        var url = this._sourceCodeLocation ? this._sourceCodeLocation.sourceCode.url : "";
     133        return {text: [this.mainTitle, url || "", this._record.details || ""]};
     134    }
    112135
    113     this.small = true;
     136    // Protected
    114137
    115     if (this._sourceCodeLocation)
    116         this.tooltipHandledSeparately = true;
     138    onattach()
     139    {
     140        WebInspector.GeneralTreeElement.prototype.onattach.call(this);
     141
     142        console.assert(this.element);
     143
     144        if (!this.tooltipHandledSeparately)
     145            return;
     146
     147        var tooltipPrefix = this.mainTitle + "\n";
     148        this._sourceCodeLocation.populateLiveDisplayLocationTooltip(this.element, tooltipPrefix);
     149    }
    117150};
    118151
    … …  
    127160WebInspector.TimelineRecordTreeElement.ProbeRecordIconStyleClass = "probe-record";
    128161WebInspector.TimelineRecordTreeElement.ConsoleProfileIconStyleClass = "console-profile-record";
    129 
    130 WebInspector.TimelineRecordTreeElement.prototype = {
    131     constructor: WebInspector.TimelineRecordTreeElement,
    132     __proto__: WebInspector.GeneralTreeElement.prototype,
    133 
    134     // Public
    135 
    136     get record()
    137     {
    138         return this._record;
    139     },
    140 
    141     get filterableData()
    142     {
    143         var url = this._sourceCodeLocation ? this._sourceCodeLocation.sourceCode.url : "";
    144         return {text: [this.mainTitle, url || "", this._record.details || ""]};
    145     },
    146 
    147     // Protected
    148 
    149     onattach: function()
    150     {
    151         WebInspector.GeneralTreeElement.prototype.onattach.call(this);
    152 
    153         console.assert(this.element);
    154 
    155         if (!this.tooltipHandledSeparately)
    156             return;
    157 
    158         var tooltipPrefix = this.mainTitle + "\n";
    159         this._sourceCodeLocation.populateLiveDisplayLocationTooltip(this.element, tooltipPrefix);
    160     }
    161 };

  • trunk/Source/WebInspectorUI/UserInterface/Views/TreeElementStatusButton.js

    r181769 r182042  
    11/*
    2  * Copyright (C) 2013 Apple Inc. All rights reserved.
     2 * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
    33 *
    44 * Redistribution and use in source and binary forms, with or without
    … …  
    2424 */
    2525
    26 WebInspector.TreeElementStatusButton = function(element) {
    27     // FIXME: Convert this to a WebInspector.Object subclass, and call super().
    28     // WebInspector.Object.call(this);
     26WebInspector.TreeElementStatusButton = class TreeElementStatusButton extends WebInspector.Object
     27{
     28    constructor(element)
     29    {
     30        super();
    2931
    30     console.assert(element);
     32        console.assert(element);
    3133
    32     this._element = element;
    33     this._element.classList.add(WebInspector.TreeElementStatusButton.StyleClassName);
    34     this._element.addEventListener("click", this._clicked.bind(this));
    35 };
    36 
    37 WebInspector.TreeElementStatusButton.StyleClassName = "status-button";
    38 WebInspector.TreeElementStatusButton.DisabledStyleClassName = "disabled";
    39 
    40 WebInspector.TreeElementStatusButton.Event = {
    41     Clicked: "status-button-clicked"
    42 };
    43 
    44 WebInspector.TreeElementStatusButton.prototype = {
    45     constructor: WebInspector.TreeElementStatusButton,
     34        this._element = element;
     35        this._element.classList.add("status-button");
     36        this._element.addEventListener("click", this._clicked.bind(this));
     37    }
    4638
    4739    // Public
    … …  
    5042    {
    5143        return this._element;
    52     },
     44    }
    5345
    5446    get hidden()
    5547    {
    5648        return !this._element.classList.contains(WebInspector.TreeElementStatusButton.DisabledStyleClassName);
    57     },
     49    }
    5850
    5951    set hidden(flag)
    6052    {
    6153        this._element.classList.toggle("hidden", flag);
    62     },
     54    }
    6355
    6456    get enabled()
    6557    {
    6658        return !this._element.classList.contains(WebInspector.TreeElementStatusButton.DisabledStyleClassName);
    67     },
     59    }
    6860
    6961    set enabled(flag)
    … …  
    7365        else
    7466            this._element.classList.add(WebInspector.TreeElementStatusButton.DisabledStyleClassName);
    75     },
     67    }
    7668
    7769    // Private
    7870
    79     _clicked: function(event)
     71    _clicked(event)
    8072    {
    8173        if (!this.enabled)
    … …  
    8880};
    8981
    90 WebInspector.TreeElementStatusButton.prototype.__proto__ = WebInspector.Object.prototype;
     82WebInspector.TreeElementStatusButton.DisabledStyleClassName = "disabled";
     83
     84WebInspector.TreeElementStatusButton.Event = {
     85    Clicked: "status-button-clicked"
     86};

  • trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.js

    r181769 r182042  
    11/*
    2  * Copyright (C) 2007, 2013 Apple Inc.  All rights reserved.
     2 * Copyright (C) 2007, 2013, 2015 Apple Inc.  All rights reserved.
    33 *
    44 * Redistribution and use in source and binary forms, with or without
    … …  
    2727 */
    2828
    29 function TreeOutline(listNode)
     29WebInspector.TreeOutline = class TreeOutline extends WebInspector.Object
    3030{
    31     // FIXME: Convert this to a WebInspector.Object subclass, and call super().
    32     // WebInspector.Object.call(this);
    33 
    34     this.element = listNode;
    35 
    36     this.children = [];
    37     this.selectedTreeElement = null;
    38     this._childrenListNode = listNode;
    39     this._childrenListNode.removeChildren();
    40     this._knownTreeElements = [];
    41     this._treeElementsExpandedState = [];
    42     this.expandTreeElementsWhenArrowing = false;
    43     this.allowsRepeatSelection = false;
    44     this.root = true;
    45     this.hasChildren = false;
    46     this.expanded = true;
    47     this.selected = false;
    48     this.treeOutline = this;
    49 
    50     this._childrenListNode.tabIndex = 0;
    51     this._childrenListNode.addEventListener("keydown", this._treeKeyDown.bind(this), true);
    52 }
    53 
    54 TreeOutline._knownTreeElementNextIdentifier = 1;
    55 TreeOutline.prototype.constructor = TreeOutline;
    56 
    57 TreeOutline.prototype.appendChild = function(child)
    58 {
    59     if (!child)
    60         throw "child can't be undefined or null";
    61 
    62     var lastChild = this.children[this.children.length - 1];
    63     if (lastChild) {
    64         lastChild.nextSibling = child;
    65         child.previousSibling = lastChild;
    66     } else {
    67         child.previousSibling = null;
    68         child.nextSibling = null;
    69     }
    70 
    71     var isFirstChild = !this.children.length;
    72 
    73     this.children.push(child);
    74     this.hasChildren = true;
    75     child.parent = this;
    76     child.treeOutline = this.treeOutline;
    77     child.treeOutline._rememberTreeElement(child);
    78 
    79     var current = child.children[0];
    80     while (current) {
    81         current.treeOutline = this.treeOutline;
    82         current.treeOutline._rememberTreeElement(current);
    83         current = current.traverseNextTreeElement(false, child, true);
    84     }
    85 
    86     if (child.hasChildren && child.treeOutline._treeElementsExpandedState[child.identifier] !== undefined)
    87         child.expanded = child.treeOutline._treeElementsExpandedState[child.identifier];
    88 
    89     if (this._childrenListNode)
    90         child._attach();
    91 
    92     if (this.treeOutline.onadd)
    93         this.treeOutline.onadd(child);
    94 
    95     if (isFirstChild && this.expanded)
    96         this.expand();
    97 };
    98 
    99 TreeOutline.prototype.insertChild = function(child, index)
    100 {
    101     if (!child)
    102         throw "child can't be undefined or null";
    103 
    104     var previousChild = (index > 0 ? this.children[index - 1] : null);
    105     if (previousChild) {
    106         previousChild.nextSibling = child;
    107         child.previousSibling = previousChild;
    108     } else {
    109         child.previousSibling = null;
    110     }
    111 
    112     var nextChild = this.children[index];
    113     if (nextChild) {
    114         nextChild.previousSibling = child;
    115         child.nextSibling = nextChild;
    116     } else {
    117         child.nextSibling = null;
    118     }
    119 
    120     var isFirstChild = !this.children.length;
    121 
    122     this.children.splice(index, 0, child);
    123     this.hasChildren = true;
    124     child.parent = this;
    125     child.treeOutline = this.treeOutline;
    126     child.treeOutline._rememberTreeElement(child);
    127 
    128     var current = child.children[0];
    129     while (current) {
    130         current.treeOutline = this.treeOutline;
    131         current.treeOutline._rememberTreeElement(current);
    132         current = current.traverseNextTreeElement(false, child, true);
    133     }
    134 
    135     if (child.hasChildren && child.treeOutline._treeElementsExpandedState[child.identifier] !== undefined)
    136         child.expanded = child.treeOutline._treeElementsExpandedState[child.identifier];
    137 
    138     if (this._childrenListNode)
    139         child._attach();
    140 
    141     if (this.treeOutline.onadd)
    142         this.treeOutline.onadd(child);
    143 
    144     if (isFirstChild && this.expanded)
    145         this.expand();
    146 };
    147 
    148 TreeOutline.prototype.removeChildAtIndex = function(childIndex, suppressOnDeselect, suppressSelectSibling)
    149 {
    150     if (childIndex < 0 || childIndex >= this.children.length)
    151         throw "childIndex out of range";
    152 
    153     var child = this.children[childIndex];
    154     this.children.splice(childIndex, 1);
    155 
    156     var parent = child.parent;
    157     if (child.deselect(suppressOnDeselect)) {
    158         if (child.previousSibling && !suppressSelectSibling)
    159             child.previousSibling.select(true, false);
    160         else if (child.nextSibling && !suppressSelectSibling)
    161             child.nextSibling.select(true, false);
    162         else if (!suppressSelectSibling)
    163             parent.select(true, false);
    164     }
    165 
    166     if (child.previousSibling)
    167         child.previousSibling.nextSibling = child.nextSibling;
    168     if (child.nextSibling)
    169         child.nextSibling.previousSibling = child.previousSibling;
    170 
    171     if (child.treeOutline) {
    172         child.treeOutline._forgetTreeElement(child);
    173         child.treeOutline._forgetChildrenRecursive(child);
    174     }
    175 
    176     child._detach();
    177     child.treeOutline = null;
    178     child.parent = null;
    179     child.nextSibling = null;
    180     child.previousSibling = null;
    181 
    182     if (this.treeOutline && this.treeOutline.onremove)
    183         this.treeOutline.onremove(child);
    184 };
    185 
    186 TreeOutline.prototype.removeChild = function(child, suppressOnDeselect, suppressSelectSibling)
    187 {
    188     if (!child)
    189         throw "child can't be undefined or null";
    190 
    191     var childIndex = this.children.indexOf(child);
    192     if (childIndex === -1)
    193         throw "child not found in this node's children";
    194 
    195     this.removeChildAtIndex(childIndex, suppressOnDeselect, suppressSelectSibling);
    196 
    197     if (!this.children.length) {
    198         this._listItemNode.classList.remove("parent");
     31    constructor(listNode)
     32    {
     33        super();
     34
     35        this.element = listNode;
     36
     37        this.children = [];
     38        this.selectedTreeElement = null;
     39        this._childrenListNode = listNode;
     40        this._childrenListNode.removeChildren();
     41        this._knownTreeElements = [];
     42        this._treeElementsExpandedState = [];
     43        this.expandTreeElementsWhenArrowing = false;
     44        this.allowsRepeatSelection = false;
     45        this.root = true;
    19946        this.hasChildren = false;
    200     }
    201 };
    202 
    203 TreeOutline.prototype.removeChildren = function(suppressOnDeselect)
    204 {
    205     var treeOutline = this.treeOutline;
    206 
    207     for (var i = 0; i < this.children.length; ++i) {
    208         var child = this.children[i];
    209         child.deselect(suppressOnDeselect);
     47        this.expanded = true;
     48        this.selected = false;
     49        this.treeOutline = this;
     50
     51        this._childrenListNode.tabIndex = 0;
     52        this._childrenListNode.addEventListener("keydown", this._treeKeyDown.bind(this), true);
     53    }
     54
     55    // Methods
     56
     57    appendChild(child)
     58    {
     59        if (!child)
     60            throw "child can't be undefined or null";
     61
     62        var lastChild = this.children[this.children.length - 1];
     63        if (lastChild) {
     64            lastChild.nextSibling = child;
     65            child.previousSibling = lastChild;
     66        } else {
     67            child.previousSibling = null;
     68            child.nextSibling = null;
     69        }
     70
     71        var isFirstChild = !this.children.length;
     72
     73        this.children.push(child);
     74        this.hasChildren = true;
     75        child.parent = this;
     76        child.treeOutline = this.treeOutline;
     77        child.treeOutline._rememberTreeElement(child);
     78
     79        var current = child.children[0];
     80        while (current) {
     81            current.treeOutline = this.treeOutline;
     82            current.treeOutline._rememberTreeElement(current);
     83            current = current.traverseNextTreeElement(false, child, true);
     84        }
     85
     86        if (child.hasChildren && child.treeOutline._treeElementsExpandedState[child.identifier] !== undefined)
     87            child.expanded = child.treeOutline._treeElementsExpandedState[child.identifier];
     88
     89        if (this._childrenListNode)
     90            child._attach();
     91
     92        if (this.treeOutline.onadd)
     93            this.treeOutline.onadd(child);
     94
     95        if (isFirstChild && this.expanded)
     96            this.expand();
     97    }
     98
     99    insertChild(child, index)
     100    {
     101        if (!child)
     102            throw "child can't be undefined or null";
     103
     104        var previousChild = (index > 0 ? this.children[index - 1] : null);
     105        if (previousChild) {
     106            previousChild.nextSibling = child;
     107            child.previousSibling = previousChild;
     108        } else {
     109            child.previousSibling = null;
     110        }
     111
     112        var nextChild = this.children[index];
     113        if (nextChild) {
     114            nextChild.previousSibling = child;
     115            child.nextSibling = nextChild;
     116        } else {
     117            child.nextSibling = null;
     118        }
     119
     120        var isFirstChild = !this.children.length;
     121
     122        this.children.splice(index, 0, child);
     123        this.hasChildren = true;
     124        child.parent = this;
     125        child.treeOutline = this.treeOutline;
     126        child.treeOutline._rememberTreeElement(child);
     127
     128        var current = child.children[0];
     129        while (current) {
     130            current.treeOutline = this.treeOutline;
     131            current.treeOutline._rememberTreeElement(current);
     132            current = current.traverseNextTreeElement(false, child, true);
     133        }
     134
     135        if (child.hasChildren && child.treeOutline._treeElementsExpandedState[child.identifier] !== undefined)
     136            child.expanded = child.treeOutline._treeElementsExpandedState[child.identifier];
     137
     138        if (this._childrenListNode)
     139            child._attach();
     140
     141        if (this.treeOutline.onadd)
     142            this.treeOutline.onadd(child);
     143
     144        if (isFirstChild && this.expanded)
     145            this.expand();
     146    }
     147
     148    removeChildAtIndex(childIndex, suppressOnDeselect, suppressSelectSibling)
     149    {
     150        if (childIndex < 0 || childIndex >= this.children.length)
     151            throw "childIndex out of range";
     152
     153        var child = this.children[childIndex];
     154        this.children.splice(childIndex, 1);
     155
     156        var parent = child.parent;
     157        if (child.deselect(suppressOnDeselect)) {
     158            if (child.previousSibling && !suppressSelectSibling)
     159                child.previousSibling.select(true, false);
     160            else if (child.nextSibling && !suppressSelectSibling)
     161                child.nextSibling.select(true, false);
     162            else if (!suppressSelectSibling)
     163                parent.select(true, false);
     164        }
     165
     166        if (child.previousSibling)
     167            child.previousSibling.nextSibling = child.nextSibling;
     168        if (child.nextSibling)
     169            child.nextSibling.previousSibling = child.previousSibling;
    210170
    211171        if (child.treeOutline) {
    … …  
    220180        child.previousSibling = null;
    221181
    222         if (treeOutline && treeOutline.onremove)
    223             treeOutline.onremove(child);
    224     }
    225 
    226     this.children = [];
     182        if (this.treeOutline && this.treeOutline.onremove)
     183            this.treeOutline.onremove(child);
     184    }
     185
     186    removeChild(child, suppressOnDeselect, suppressSelectSibling)
     187    {
     188        if (!child)
     189            throw "child can't be undefined or null";
     190
     191        var childIndex = this.children.indexOf(child);
     192        if (childIndex === -1)
     193            throw "child not found in this node's children";
     194
     195        this.removeChildAtIndex(childIndex, suppressOnDeselect, suppressSelectSibling);
     196
     197        if (!this.children.length) {
     198            this._listItemNode.classList.remove("parent");
     199            this.hasChildren = false;
     200        }
     201    }
     202
     203    removeChildren(suppressOnDeselect)
     204    {
     205        var treeOutline = this.treeOutline;
     206
     207        for (var i = 0; i < this.children.length; ++i) {
     208            var child = this.children[i];
     209            child.deselect(suppressOnDeselect);
     210
     211            if (child.treeOutline) {
     212                child.treeOutline._forgetTreeElement(child);
     213                child.treeOutline._forgetChildrenRecursive(child);
     214            }
     215
     216            child._detach();
     217            child.treeOutline = null;
     218            child.parent = null;
     219            child.nextSibling = null;
     220            child.previousSibling = null;
     221
     222            if (treeOutline && treeOutline.onremove)
     223                treeOutline.onremove(child);
     224        }
     225
     226        this.children = [];
     227    }
     228
     229    removeChildrenRecursive(suppressOnDeselect)
     230    {
     231        var childrenToRemove = this.children;
     232
     233        var treeOutline = this.treeOutline;
     234
     235        var child = this.children[0];
     236        while (child) {
     237            if (child.children.length)
     238                childrenToRemove = childrenToRemove.concat(child.children);
     239            child = child.traverseNextTreeElement(false, this, true);
     240        }
     241
     242        for (var i = 0; i < childrenToRemove.length; ++i) {
     243            child = childrenToRemove[i];
     244            child.deselect(suppressOnDeselect);
     245
     246            if (child.treeOutline)
     247                child.treeOutline._forgetTreeElement(child);
     248
     249            child._detach();
     250            child.children = [];
     251            child.treeOutline = null;
     252            child.parent = null;
     253            child.nextSibling = null;
     254            child.previousSibling = null;
     255
     256            if (treeOutline && treeOutline.onremove)
     257                treeOutline.onremove(child);
     258        }
     259
     260        this.children = [];
     261    }
     262
     263    _rememberTreeElement(element)
     264    {
     265        if (!this._knownTreeElements[element.identifier])
     266            this._knownTreeElements[element.identifier] = [];
     267
     268        // check if the element is already known
     269        var elements = this._knownTreeElements[element.identifier];
     270        if (elements.indexOf(element) !== -1)
     271            return;
     272
     273        // add the element
     274        elements.push(element);
     275    }
     276
     277    _forgetTreeElement(element)
     278    {
     279        if (this.selectedTreeElement === element)
     280            this.selectedTreeElement = null;
     281        if (this._knownTreeElements[element.identifier])
     282            this._knownTreeElements[element.identifier].remove(element, true);
     283    }
     284
     285    _forgetChildrenRecursive(parentElement)
     286    {
     287        var child = parentElement.children[0];
     288        while (child) {
     289            this._forgetTreeElement(child);
     290            child = child.traverseNextTreeElement(false, parentElement, true);
     291        }
     292    }
     293
     294    getCachedTreeElement(representedObject)
     295    {
     296        if (!representedObject)
     297            return null;
     298
     299        if (representedObject.__treeElementIdentifier) {
     300            // If this representedObject has a tree element identifier, and it is a known TreeElement
     301            // in our tree we can just return that tree element.
     302            var elements = this._knownTreeElements[representedObject.__treeElementIdentifier];
     303            if (elements) {
     304                for (var i = 0; i < elements.length; ++i)
     305                    if (elements[i].representedObject === representedObject)
     306                        return elements[i];
     307            }
     308        }
     309        return null;
     310    }
     311
     312    findTreeElement(representedObject, isAncestor, getParent)
     313    {
     314        if (!representedObject)
     315            return null;
     316
     317        var cachedElement = this.getCachedTreeElement(representedObject);
     318        if (cachedElement)
     319            return cachedElement;
     320
     321        // The representedObject isn't known, so we start at the top of the tree and work down to find the first
     322        // tree element that represents representedObject or one of its ancestors.
     323        var item;
     324        var found = false;
     325        for (var i = 0; i < this.children.length; ++i) {
     326            item = this.children[i];
     327            if (item.representedObject === representedObject || (isAncestor && isAncestor(item.representedObject, representedObject))) {
     328                found = true;
     329                break;
     330            }
     331        }
     332
     333        if (!found)
     334            return null;
     335
     336        // Make sure the item that we found is connected to the root of the tree.
     337        // Build up a list of representedObject's ancestors that aren't already in our tree.
     338        var ancestors = [];
     339        var currentObject = representedObject;
     340        while (currentObject) {
     341            ancestors.unshift(currentObject);
     342            if (currentObject === item.representedObject)
     343                break;
     344            currentObject = getParent(currentObject);
     345        }
     346
     347        // For each of those ancestors we populate them to fill in the tree.
     348        for (var i = 0; i < ancestors.length; ++i) {
     349            // Make sure we don't call findTreeElement with the same representedObject
     350            // again, to prevent infinite recursion.
     351            if (ancestors[i] === representedObject)
     352                continue;
     353
     354            // FIXME: we could do something faster than findTreeElement since we will know the next
     355            // ancestor exists in the tree.
     356            item = this.findTreeElement(ancestors[i], isAncestor, getParent);
     357            if (item)
     358                item.onpopulate();
     359        }
     360
     361        return this.getCachedTreeElement(representedObject);
     362    }
     363
     364    _treeElementDidChange(treeElement)
     365    {
     366        if (treeElement.treeOutline !== this)
     367            return;
     368
     369        if (this.onchange)
     370            this.onchange(treeElement);
     371    }
     372
     373    treeElementFromNode(node)
     374    {
     375        var listNode = node.enclosingNodeOrSelfWithNodeNameInArray(["ol", "li"]);
     376        if (listNode)
     377            return listNode.parentTreeElement || listNode.treeElement;
     378        return null;
     379    }
     380
     381    treeElementFromPoint(x, y)
     382    {
     383        var node = this._childrenListNode.ownerDocument.elementFromPoint(x, y);
     384        if (!node)
     385            return null;
     386
     387        return this.treeElementFromNode(node);
     388    }
     389
     390    _treeKeyDown(event)
     391    {
     392        if (event.target !== this._childrenListNode)
     393            return;
     394
     395        if (!this.selectedTreeElement || event.shiftKey || event.metaKey || event.ctrlKey)
     396            return;
     397
     398        var handled = false;
     399        var nextSelectedElement;
     400        if (event.keyIdentifier === "Up" && !event.altKey) {
     401            nextSelectedElement = this.selectedTreeElement.traversePreviousTreeElement(true);
     402            while (nextSelectedElement && !nextSelectedElement.selectable)
     403                nextSelectedElement = nextSelectedElement.traversePreviousTreeElement(!this.expandTreeElementsWhenArrowing);
     404            handled = nextSelectedElement ? true : false;
     405        } else if (event.keyIdentifier === "Down" && !event.altKey) {
     406            nextSelectedElement = this.selectedTreeElement.traverseNextTreeElement(true);
     407            while (nextSelectedElement && !nextSelectedElement.selectable)
     408                nextSelectedElement = nextSelectedElement.traverseNextTreeElement(!this.expandTreeElementsWhenArrowing);
     409            handled = nextSelectedElement ? true : false;
     410        } else if (event.keyIdentifier === "Left") {
     411            if (this.selectedTreeElement.expanded) {
     412                if (event.altKey)
     413                    this.selectedTreeElement.collapseRecursively();
     414                else
     415                    this.selectedTreeElement.collapse();
     416                handled = true;
     417            } else if (this.selectedTreeElement.parent && !this.selectedTreeElement.parent.root) {
     418                handled = true;
     419                if (this.selectedTreeElement.parent.selectable) {
     420                    nextSelectedElement = this.selectedTreeElement.parent;
     421                    while (nextSelectedElement && !nextSelectedElement.selectable)
     422                        nextSelectedElement = nextSelectedElement.parent;
     423                    handled = nextSelectedElement ? true : false;
     424                } else if (this.selectedTreeElement.parent)
     425                    this.selectedTreeElement.parent.collapse();
     426            }
     427        } else if (event.keyIdentifier === "Right") {
     428            if (!this.selectedTreeElement.revealed()) {
     429                this.selectedTreeElement.reveal();
     430                handled = true;
     431            } else if (this.selectedTreeElement.hasChildren) {
     432                handled = true;
     433                if (this.selectedTreeElement.expanded) {
     434                    nextSelectedElement = this.selectedTreeElement.children[0];
     435                    while (nextSelectedElement && !nextSelectedElement.selectable)
     436                        nextSelectedElement = nextSelectedElement.nextSibling;
     437                    handled = nextSelectedElement ? true : false;
     438                } else {
     439                    if (event.altKey)
     440                        this.selectedTreeElement.expandRecursively();
     441                    else
     442                        this.selectedTreeElement.expand();
     443                }
     444            }
     445        } else if (event.keyCode === 8 /* Backspace */ || event.keyCode === 46 /* Delete */) {
     446            if (this.selectedTreeElement.ondelete)
     447                handled = this.selectedTreeElement.ondelete();
     448            if (!handled && this.treeOutline.ondelete)
     449                handled = this.treeOutline.ondelete(this.selectedTreeElement);
     450        } else if (isEnterKey(event)) {
     451            if (this.selectedTreeElement.onenter)
     452                handled = this.selectedTreeElement.onenter();
     453            if (!handled && this.treeOutline.onenter)
     454                handled = this.treeOutline.onenter(this.selectedTreeElement);
     455        } else if (event.keyIdentifier === "U+0020" /* Space */) {
     456            if (this.selectedTreeElement.onspace)
     457                handled = this.selectedTreeElement.onspace();
     458            if (!handled && this.treeOutline.onspace)
     459                handled = this.treeOutline.onspace(this.selectedTreeElement);
     460        }
     461
     462        if (nextSelectedElement) {
     463            nextSelectedElement.reveal();
     464            nextSelectedElement.select(false, true);
     465        }
     466
     467        if (handled) {
     468            event.preventDefault();
     469            event.stopPropagation();
     470        }
     471    }
     472
     473    expand()
     474    {
     475        // this is the root, do nothing
     476    }
     477
     478    collapse()
     479    {
     480        // this is the root, do nothing
     481    }
     482
     483    revealed()
     484    {
     485        return true;
     486    }
     487
     488    reveal()
     489    {
     490        // this is the root, do nothing
     491    }
     492
     493    select()
     494    {
     495        // this is the root, do nothing
     496    }
     497
     498    revealAndSelect(omitFocus)
     499    {
     500        // this is the root, do nothing
     501    }
    227502};
    228503
    229 TreeOutline.prototype.removeChildrenRecursive = function(suppressOnDeselect)
     504WebInspector.TreeOutline._knownTreeElementNextIdentifier = 1;
     505
     506WebInspector.TreeElement = class TreeElement extends WebInspector.Object
    230507{
    231     var childrenToRemove = this.children;
    232 
    233     var treeOutline = this.treeOutline;
    234 
    235     var child = this.children[0];
    236     while (child) {
    237         if (child.children.length)
    238             childrenToRemove = childrenToRemove.concat(child.children);
    239         child = child.traverseNextTreeElement(false, this, true);
    240     }
    241 
    242     for (var i = 0; i < childrenToRemove.length; ++i) {
    243         child = childrenToRemove[i];
    244         child.deselect(suppressOnDeselect);
    245 
    246         if (child.treeOutline)
    247             child.treeOutline._forgetTreeElement(child);
    248 
    249         child._detach();
    250         child.children = [];
    251         child.treeOutline = null;
    252         child.parent = null;
    253         child.nextSibling = null;
    254         child.previousSibling = null;
    255 
    256         if (treeOutline && treeOutline.onremove)
    257             treeOutline.onremove(child);
    258     }
    259 
    260     this.children = [];
    261 };
    262 
    263 TreeOutline.prototype._rememberTreeElement = function(element)
    264 {
    265     if (!this._knownTreeElements[element.identifier])
    266         this._knownTreeElements[element.identifier] = [];
    267 
    268     // check if the element is already known
    269     var elements = this._knownTreeElements[element.identifier];
    270     if (elements.indexOf(element) !== -1)
    271         return;
    272 
    273     // add the element
    274     elements.push(element);
    275 };
    276 
    277 TreeOutline.prototype._forgetTreeElement = function(element)
    278 {
    279     if (this.selectedTreeElement === element)
    280         this.selectedTreeElement = null;
    281     if (this._knownTreeElements[element.identifier])
    282         this._knownTreeElements[element.identifier].remove(element, true);
    283 };
    284 
    285 TreeOutline.prototype._forgetChildrenRecursive = function(parentElement)
    286 {
    287     var child = parentElement.children[0];
    288     while (child) {
    289         this._forgetTreeElement(child);
    290         child = child.traverseNextTreeElement(false, parentElement, true);
    291     }
    292 };
    293 
    294 TreeOutline.prototype.getCachedTreeElement = function(representedObject)
    295 {
    296     if (!representedObject)
    297         return null;
    298 
    299     if (representedObject.__treeElementIdentifier) {
    300         // If this representedObject has a tree element identifier, and it is a known TreeElement
    301         // in our tree we can just return that tree element.
    302         var elements = this._knownTreeElements[representedObject.__treeElementIdentifier];
    303         if (elements) {
    304             for (var i = 0; i < elements.length; ++i)
    305                 if (elements[i].representedObject === representedObject)
    306                     return elements[i];
    307         }
    308     }
    309     return null;
    310 };
    311 
    312 TreeOutline.prototype.findTreeElement = function(representedObject, isAncestor, getParent)
    313 {
    314     if (!representedObject)
    315         return null;
    316 
    317     var cachedElement = this.getCachedTreeElement(representedObject);
    318     if (cachedElement)
    319         return cachedElement;
    320 
    321     // The representedObject isn't known, so we start at the top of the tree and work down to find the first
    322     // tree element that represents representedObject or one of its ancestors.
    323     var item;
    324     var found = false;
    325     for (var i = 0; i < this.children.length; ++i) {
    326         item = this.children[i];
    327         if (item.representedObject === representedObject || (isAncestor && isAncestor(item.representedObject, representedObject))) {
    328             found = true;
    329             break;
    330         }
    331     }
    332 
    333     if (!found)
    334         return null;
    335 
    336     // Make sure the item that we found is connected to the root of the tree.
    337     // Build up a list of representedObject's ancestors that aren't already in our tree.
    338     var ancestors = [];
    339     var currentObject = representedObject;
    340     while (currentObject) {
    341         ancestors.unshift(currentObject);
    342         if (currentObject === item.representedObject)
    343             break;
    344         currentObject = getParent(currentObject);
    345     }
    346 
    347     // For each of those ancestors we populate them to fill in the tree.
    348     for (var i = 0; i < ancestors.length; ++i) {
    349         // Make sure we don't call findTreeElement with the same representedObject
    350         // again, to prevent infinite recursion.
    351         if (ancestors[i] === representedObject)
    352             continue;
    353 
    354         // FIXME: we could do something faster than findTreeElement since we will know the next
    355         // ancestor exists in the tree.
    356         item = this.findTreeElement(ancestors[i], isAncestor, getParent);
    357         if (item)
    358             item.onpopulate();
    359     }
    360 
    361     return this.getCachedTreeElement(representedObject);
    362 };
    363 
    364 TreeOutline.prototype._treeElementDidChange = function(treeElement)
    365 {
    366     if (treeElement.treeOutline !== this)
    367         return;
    368 
    369     if (this.onchange)
    370         this.onchange(treeElement);
    371 };
    372 
    373 TreeOutline.prototype.treeElementFromNode = function(node)
    374 {
    375     var listNode = node.enclosingNodeOrSelfWithNodeNameInArray(["ol", "li"]);
    376     if (listNode)
    377         return listNode.parentTreeElement || listNode.treeElement;
    378     return null;
    379 };
    380 
    381 TreeOutline.prototype.treeElementFromPoint = function(x, y)
    382 {
    383     var node = this._childrenListNode.ownerDocument.elementFromPoint(x, y);
    384     if (!node)
    385         return null;
    386 
    387     return this.treeElementFromNode(node);
    388 };
    389 
    390 TreeOutline.prototype._treeKeyDown = function(event)
    391 {
    392     if (event.target !== this._childrenListNode)
    393         return;
    394 
    395     if (!this.selectedTreeElement || event.shiftKey || event.metaKey || event.ctrlKey)
    396         return;
    397 
    398     var handled = false;
    399     var nextSelectedElement;
    400     if (event.keyIdentifier === "Up" && !event.altKey) {
    401         nextSelectedElement = this.selectedTreeElement.traversePreviousTreeElement(true);
    402         while (nextSelectedElement && !nextSelectedElement.selectable)
    403             nextSelectedElement = nextSelectedElement.traversePreviousTreeElement(!this.expandTreeElementsWhenArrowing);
    404         handled = nextSelectedElement ? true : false;
    405     } else if (event.keyIdentifier === "Down" && !event.altKey) {
    406         nextSelectedElement = this.selectedTreeElement.traverseNextTreeElement(true);
    407         while (nextSelectedElement && !nextSelectedElement.selectable)
    408             nextSelectedElement = nextSelectedElement.traverseNextTreeElement(!this.expandTreeElementsWhenArrowing);
    409         handled = nextSelectedElement ? true : false;
    410     } else if (event.keyIdentifier === "Left") {
    411         if (this.selectedTreeElement.expanded) {
    412             if (event.altKey)
    413                 this.selectedTreeElement.collapseRecursively();
    414             else
    415                 this.selectedTreeElement.collapse();
    416             handled = true;
    417         } else if (this.selectedTreeElement.parent && !this.selectedTreeElement.parent.root) {
    418             handled = true;
    419             if (this.selectedTreeElement.parent.selectable) {
    420                 nextSelectedElement = this.selectedTreeElement.parent;
    421                 while (nextSelectedElement && !nextSelectedElement.selectable)
    422                     nextSelectedElement = nextSelectedElement.parent;
    423                 handled = nextSelectedElement ? true : false;
    424             } else if (this.selectedTreeElement.parent)
    425                 this.selectedTreeElement.parent.collapse();
    426         }
    427     } else if (event.keyIdentifier === "Right") {
    428         if (!this.selectedTreeElement.revealed()) {
    429             this.selectedTreeElement.reveal();
    430             handled = true;
    431         } else if (this.selectedTreeElement.hasChildren) {
    432             handled = true;
    433             if (this.selectedTreeElement.expanded) {
    434                 nextSelectedElement = this.selectedTreeElement.children[0];
    435                 while (nextSelectedElement && !nextSelectedElement.selectable)
    436                     nextSelectedElement = nextSelectedElement.nextSibling;
    437                 handled = nextSelectedElement ? true : false;
    438             } else {
    439                 if (event.altKey)
    440                     this.selectedTreeElement.expandRecursively();
    441                 else
    442                     this.selectedTreeElement.expand();
    443             }
    444         }
    445     } else if (event.keyCode === 8 /* Backspace */ || event.keyCode === 46 /* Delete */) {
    446         if (this.selectedTreeElement.ondelete)
    447             handled = this.selectedTreeElement.ondelete();
    448         if (!handled && this.treeOutline.ondelete)
    449             handled = this.treeOutline.ondelete(this.selectedTreeElement);
    450     } else if (isEnterKey(event)) {
    451         if (this.selectedTreeElement.onenter)
    452             handled = this.selectedTreeElement.onenter();
    453         if (!handled && this.treeOutline.onenter)
    454             handled = this.treeOutline.onenter(this.selectedTreeElement);
    455     } else if (event.keyIdentifier === "U+0020" /* Space */) {
    456         if (this.selectedTreeElement.onspace)
    457             handled = this.selectedTreeElement.onspace();
    458         if (!handled && this.treeOutline.onspace)
    459             handled = this.treeOutline.onspace(this.selectedTreeElement);
    460     }
    461 
    462     if (nextSelectedElement) {
    463         nextSelectedElement.reveal();
    464         nextSelectedElement.select(false, true);
    465     }
    466 
    467     if (handled) {
    468         event.preventDefault();
    469         event.stopPropagation();
    470     }
    471 };
    472 
    473 TreeOutline.prototype.expand = function()
    474 {
    475     // this is the root, do nothing
    476 };
    477 
    478 TreeOutline.prototype.collapse = function()
    479 {
    480     // this is the root, do nothing
    481 };
    482 
    483 TreeOutline.prototype.revealed = function()
    484 {
    485     return true;
    486 };
    487 
    488 TreeOutline.prototype.reveal = function()
    489 {
    490     // this is the root, do nothing
    491 };
    492 
    493 TreeOutline.prototype.select = function()
    494 {
    495     // this is the root, do nothing
    496 };
    497 
    498 TreeOutline.prototype.revealAndSelect = function(omitFocus)
    499 {
    500     // this is the root, do nothing
    501 };
    502 
    503 TreeOutline.prototype.__proto__ = WebInspector.Object.prototype;
    504 
    505 function TreeElement(title, representedObject, hasChildren)
    506 {
    507     // FIXME: Convert this to a WebInspector.Object subclass, and call super().
    508     // WebInspector.Object.call(this);
    509 
    510     this._title = title;
    511     this.representedObject = (representedObject || {});
    512 
    513     if (this.representedObject.__treeElementIdentifier)
    514         this.identifier = this.representedObject.__treeElementIdentifier;
    515     else {
    516         this.identifier = TreeOutline._knownTreeElementNextIdentifier++;
    517         this.representedObject.__treeElementIdentifier = this.identifier;
    518     }
    519 
    520     this._hidden = false;
    521     this._selectable = true;
    522     this.expanded = false;
    523     this.selected = false;
    524     this.hasChildren = hasChildren;
    525     this.children = [];
    526     this.treeOutline = null;
    527     this.parent = null;
    528     this.previousSibling = null;
    529     this.nextSibling = null;
    530     this._listItemNode = null;
    531 }
    532 
    533 TreeElement.prototype = {
    534     constructor: TreeElement,
    535 
    536     arrowToggleWidth: 10,
    537 
    538     get selectable() {
     508    constructor(title, representedObject, hasChildren)
     509    {
     510        super();
     511
     512        this._title = title;
     513        this.representedObject = (representedObject || {});
     514
     515        if (this.representedObject.__treeElementIdentifier)
     516            this.identifier = this.representedObject.__treeElementIdentifier;
     517        else {
     518            this.identifier = WebInspector.TreeOutline._knownTreeElementNextIdentifier++;
     519            this.representedObject.__treeElementIdentifier = this.identifier;
     520        }
     521
     522        this._hidden = false;
     523        this._selectable = true;
     524        this.expanded = false;
     525        this.selected = false;
     526        this.hasChildren = hasChildren;
     527        this.children = [];
     528        this.treeOutline = null;
     529        this.parent = null;
     530        this.previousSibling = null;
     531        this.nextSibling = null;
     532        this._listItemNode = null;
     533    }
     534
     535    // Methods
     536
     537    appendChild() { return WebInspector.TreeOutline.prototype.appendChild.apply(this, arguments); }
     538    insertChild() { return WebInspector.TreeOutline.prototype.insertChild.apply(this, arguments); }
     539    removeChild() { return WebInspector.TreeOutline.prototype.removeChild.apply(this, arguments); }
     540    removeChildAtIndex() { return WebInspector.TreeOutline.prototype.removeChildAtIndex.apply(this, arguments); }
     541    removeChildren() { return WebInspector.TreeOutline.prototype.removeChildren.apply(this, arguments); }
     542    removeChildrenRecursive() { return WebInspector.TreeOutline.prototype.removeChildrenRecursive.apply(this, arguments); }
     543
     544    get arrowToggleWidth()
     545    {
     546        return 10;
     547    }
     548
     549    get selectable()
     550    {
    539551        if (this._hidden)
    540552            return false;
    541553        return this._selectable;
    542     },
    543 
    544     set selectable(x) {
     554    }
     555
     556    set selectable(x)
     557    {
    545558        this._selectable = x;
    546     },
    547 
    548     get listItemElement() {
     559    }
     560
     561    get listItemElement()
     562    {
    549563        return this._listItemNode;
    550     },
    551 
    552     get childrenListElement() {
     564    }
     565
     566    get childrenListElement()
     567    {
    553568        return this._childrenListNode;
    554     },
    555 
    556     get title() {
     569    }
     570
     571    get title()
     572    {
    557573        return this._title;
    558     },
    559 
    560     set title(x) {
     574    }
     575
     576    set title(x)
     577    {
    561578        this._title = x;
    562579        this._setListItemNodeContent();
    563580        this.didChange();
    564     },
    565 
    566     get titleHTML() {
     581    }
     582
     583    get titleHTML()
     584    {
    567585        return this._titleHTML;
    568     },
    569 
    570     set titleHTML(x) {
     586    }
     587
     588    set titleHTML(x)
     589    {
    571590        this._titleHTML = x;
    572591        this._setListItemNodeContent();
    573592        this.didChange();
    574     },
    575 
    576     get tooltip() {
     593    }
     594
     595    get tooltip()
     596    {
    577597        return this._tooltip;
    578     },
    579 
    580     set tooltip(x) {
     598    }
     599
     600    set tooltip(x)
     601    {
    581602        this._tooltip = x;
    582603        if (this._listItemNode)
    583604            this._listItemNode.title = x ? x : "";
    584605        this.didChange();
    585     },
    586 
    587     get hasChildren() {
     606    }
     607
     608    get hasChildren()
     609    {
    588610        return this._hasChildren;
    589     },
    590 
    591     set hasChildren(x) {
     611    }
     612
     613    set hasChildren(x)
     614    {
    592615        if (this._hasChildren === x)
    593616            return;
    … …  
    606629
    607630        this.didChange();
    608     },
    609 
    610     get hidden() {
     631    }
     632
     633    get hidden()
     634    {
    611635        return this._hidden;
    612     },
    613 
    614     set hidden(x) {
     636    }
     637
     638    set hidden(x)
     639    {
    615640        if (this._hidden === x)
    616641            return;
    … …  
    632657        if (this.treeOutline && this.treeOutline.onhidden)
    633658            this.treeOutline.onhidden(this, x);
    634     },
    635 
    636     get shouldRefreshChildren() {
     659    }
     660
     661    get shouldRefreshChildren()
     662    {
    637663        return this._shouldRefreshChildren;
    638     },
    639 
    640     set shouldRefreshChildren(x) {
     664    }
     665
     666    set shouldRefreshChildren(x)
     667    {
    641668        this._shouldRefreshChildren = x;
    642669        if (x && this.expanded)
    643670            this.expand();
    644     },
    645 
    646     _fireDidChange: function()
     671    }
     672
     673    _fireDidChange()
    647674    {
    648675        delete this._didChangeTimeoutIdentifier;
    … …  
    650677        if (this.treeOutline)
    651678            this.treeOutline._treeElementDidChange(this);
    652     },
    653 
    654     didChange: function()
     679    }
     680
     681    didChange()
    655682    {
    656683        if (!this.treeOutline)
    … …  
    660687        if (!this._didChangeTimeoutIdentifier)
    661688            this._didChangeTimeoutIdentifier = setTimeout(this._fireDidChange.bind(this), 0);
    662     },
    663 
    664     _setListItemNodeContent: function()
     689    }
     690
     691    _setListItemNodeContent()
    665692    {
    666693        if (!this._listItemNode)
    … …  
    680707        }
    681708    }
    682 };
    683 
    684 TreeElement.prototype.appendChild = TreeOutline.prototype.appendChild;
    685 TreeElement.prototype.insertChild = TreeOutline.prototype.insertChild;
    686 TreeElement.prototype.removeChild = TreeOutline.prototype.removeChild;
    687 TreeElement.prototype.removeChildAtIndex = TreeOutline.prototype.removeChildAtIndex;
    688 TreeElement.prototype.removeChildren = TreeOutline.prototype.removeChildren;
    689 TreeElement.prototype.removeChildrenRecursive = TreeOutline.prototype.removeChildrenRecursive;
    690 
    691 TreeElement.prototype._attach = function()
    692 {
    693     if (!this._listItemNode || this.parent._shouldRefreshChildren) {
     709
     710    _attach()
     711    {
     712        if (!this._listItemNode || this.parent._shouldRefreshChildren) {
     713            if (this._listItemNode && this._listItemNode.parentNode)
     714                this._listItemNode.parentNode.removeChild(this._listItemNode);
     715
     716            this._listItemNode = this.treeOutline._childrenListNode.ownerDocument.createElement("li");
     717            this._listItemNode.treeElement = this;
     718            this._setListItemNodeContent();
     719            this._listItemNode.title = this._tooltip ? this._tooltip : "";
     720
     721            if (this.hidden)
     722                this._listItemNode.classList.add("hidden");
     723            if (this.hasChildren)
     724                this._listItemNode.classList.add("parent");
     725            if (this.expanded)
     726                this._listItemNode.classList.add("expanded");
     727            if (this.selected)
     728                this._listItemNode.classList.add("selected");
     729
     730            this._listItemNode.addEventListener("mousedown", WebInspector.TreeElement.treeElementMouseDown);
     731            this._listItemNode.addEventListener("click", WebInspector.TreeElement.treeElementToggled);
     732            this._listItemNode.addEventListener("dblclick", WebInspector.TreeElement.treeElementDoubleClicked);
     733
     734            if (this.onattach)
     735                this.onattach(this);
     736        }
     737
     738        var nextSibling = null;
     739        if (this.nextSibling && this.nextSibling._listItemNode && this.nextSibling._listItemNode.parentNode === this.parent._childrenListNode)
     740            nextSibling = this.nextSibling._listItemNode;
     741        this.parent._childrenListNode.insertBefore(this._listItemNode, nextSibling);
     742        if (this._childrenListNode)
     743            this.parent._childrenListNode.insertBefore(this._childrenListNode, this._listItemNode.nextSibling);
     744        if (this.selected)
     745            this.select();
     746        if (this.expanded)
     747            this.expand();
     748    }
     749
     750    _detach()
     751    {
     752        if (this.ondetach)
     753            this.ondetach(this);
    694754        if (this._listItemNode && this._listItemNode.parentNode)
    695755            this._listItemNode.parentNode.removeChild(this._listItemNode);
    696 
    697         this._listItemNode = this.treeOutline._childrenListNode.ownerDocument.createElement("li");
    698         this._listItemNode.treeElement = this;
    699         this._setListItemNodeContent();
    700         this._listItemNode.title = this._tooltip ? this._tooltip : "";
    701 
    702         if (this.hidden)
    703             this._listItemNode.classList.add("hidden");
    704         if (this.hasChildren)
    705             this._listItemNode.classList.add("parent");
    706         if (this.expanded)
    707             this._listItemNode.classList.add("expanded");
    708         if (this.selected)
    709             this._listItemNode.classList.add("selected");
    710 
    711         this._listItemNode.addEventListener("mousedown", TreeElement.treeElementMouseDown, false);
    712         this._listItemNode.addEventListener("click", TreeElement.treeElementToggled, false);
    713         this._listItemNode.addEventListener("dblclick", TreeElement.treeElementDoubleClicked, false);
    714 
    715         if (this.onattach)
    716             this.onattach(this);
    717     }
    718 
    719     var nextSibling = null;
    720     if (this.nextSibling && this.nextSibling._listItemNode && this.nextSibling._listItemNode.parentNode === this.parent._childrenListNode)
    721         nextSibling = this.nextSibling._listItemNode;
    722     this.parent._childrenListNode.insertBefore(this._listItemNode, nextSibling);
    723     if (this._childrenListNode)
    724         this.parent._childrenListNode.insertBefore(this._childrenListNode, this._listItemNode.nextSibling);
    725     if (this.selected)
    726         this.select();
    727     if (this.expanded)
    728         this.expand();
    729 };
    730 
    731 TreeElement.prototype._detach = function()
    732 {
    733     if (this.ondetach)
    734         this.ondetach(this);
    735     if (this._listItemNode && this._listItemNode.parentNode)
    736         this._listItemNode.parentNode.removeChild(this._listItemNode);
    737     if (this._childrenListNode && this._childrenListNode.parentNode)
    738         this._childrenListNode.parentNode.removeChild(this._childrenListNode);
    739 };
    740 
    741 TreeElement.treeElementMouseDown = function(event)
    742 {
    743     var element = event.currentTarget;
    744     if (!element || !element.treeElement || !element.treeElement.selectable)
    745         return;
    746 
    747     if (element.treeElement.isEventWithinDisclosureTriangle(event)) {
    748         event.preventDefault();
    749         return;
    750     }
    751 
    752     element.treeElement.selectOnMouseDown(event);
    753 };
    754 
    755 TreeElement.treeElementToggled = function(event)
    756 {
    757     var element = event.currentTarget;
    758     if (!element || !element.treeElement)
    759         return;
    760 
    761     var toggleOnClick = element.treeElement.toggleOnClick && !element.treeElement.selectable;
    762     var isInTriangle = element.treeElement.isEventWithinDisclosureTriangle(event);
    763     if (!toggleOnClick && !isInTriangle)
    764         return;
    765 
    766     if (element.treeElement.expanded) {
    767         if (event.altKey)
    768             element.treeElement.collapseRecursively();
    769         else
    770             element.treeElement.collapse();
    771     } else {
    772         if (event.altKey)
    773             element.treeElement.expandRecursively();
    774         else
    775             element.treeElement.expand();
    776     }
    777     event.stopPropagation();
    778 };
    779 
    780 TreeElement.treeElementDoubleClicked = function(event)
    781 {
    782     var element = event.currentTarget;
    783     if (!element || !element.treeElement)
    784         return;
    785 
    786     if (element.treeElement.isEventWithinDisclosureTriangle(event))
    787         return;
    788 
    789     if (element.treeElement.ondblclick)
    790         element.treeElement.ondblclick.call(element.treeElement, event);
    791     else if (element.treeElement.hasChildren && !element.treeElement.expanded)
    792         element.treeElement.expand();
    793 };
    794 
    795 TreeElement.prototype.collapse = function()
    796 {
    797     if (this._listItemNode)
    798         this._listItemNode.classList.remove("expanded");
    799     if (this._childrenListNode)
    800         this._childrenListNode.classList.remove("expanded");
    801 
    802     this.expanded = false;
    803     if (this.treeOutline)
    804         this.treeOutline._treeElementsExpandedState[this.identifier] = false;
    805 
    806     if (this.oncollapse)
    807         this.oncollapse(this);
    808 
    809     if (this.treeOutline && this.treeOutline.oncollapse)
    810         this.treeOutline.oncollapse(this);
    811 };
    812 
    813 TreeElement.prototype.collapseRecursively = function()
    814 {
    815     var item = this;
    816     while (item) {
    817         if (item.expanded)
    818             item.collapse();
    819         item = item.traverseNextTreeElement(false, this, true);
    820     }
    821 };
    822 
    823 TreeElement.prototype.expand = function()
    824 {
    825     if (this.expanded && !this._shouldRefreshChildren && this._childrenListNode)
    826         return;
    827 
    828     // Set this before onpopulate. Since onpopulate can add elements and call onadd, this makes
    829     // sure the expanded flag is true before calling those functions. This prevents the possibility
    830     // of an infinite loop if onpopulate or onadd were to call expand.
    831 
    832     this.expanded = true;
    833     if (this.treeOutline)
    834         this.treeOutline._treeElementsExpandedState[this.identifier] = true;
    835 
    836     // If there are no children, return. We will be expanded once we have children.
    837     if (!this.hasChildren)
    838         return;
    839 
    840     if (this.treeOutline && (!this._childrenListNode || this._shouldRefreshChildren)) {
    841756        if (this._childrenListNode && this._childrenListNode.parentNode)
    842757            this._childrenListNode.parentNode.removeChild(this._childrenListNode);
    843 
    844         this._childrenListNode = this.treeOutline._childrenListNode.ownerDocument.createElement("ol");
    845         this._childrenListNode.parentTreeElement = this;
    846         this._childrenListNode.classList.add("children");
    847 
     758    }
     759
     760    static treeElementMouseDown(event)
     761    {
     762        var element = event.currentTarget;
     763        if (!element || !element.treeElement || !element.treeElement.selectable)
     764            return;
     765
     766        if (element.treeElement.isEventWithinDisclosureTriangle(event)) {
     767            event.preventDefault();
     768            return;
     769        }
     770
     771        element.treeElement.selectOnMouseDown(event);
     772    }
     773
     774    static treeElementToggled(event)
     775    {
     776        var element = event.currentTarget;
     777        if (!element || !element.treeElement)
     778            return;
     779
     780        var toggleOnClick = element.treeElement.toggleOnClick && !element.treeElement.selectable;
     781        var isInTriangle = element.treeElement.isEventWithinDisclosureTriangle(event);
     782        if (!toggleOnClick && !isInTriangle)
     783            return;
     784
     785        if (element.treeElement.expanded) {
     786            if (event.altKey)
     787                element.treeElement.collapseRecursively();
     788            else
     789                element.treeElement.collapse();
     790        } else {
     791            if (event.altKey)
     792                element.treeElement.expandRecursively();
     793            else
     794                element.treeElement.expand();
     795        }
     796        event.stopPropagation();
     797    }
     798
     799    static treeElementDoubleClicked(event)
     800    {
     801        var element = event.currentTarget;
     802        if (!element || !element.treeElement)
     803            return;
     804
     805        if (element.treeElement.isEventWithinDisclosureTriangle(event))
     806            return;
     807
     808        if (element.treeElement.ondblclick)
     809            element.treeElement.ondblclick.call(element.treeElement, event);
     810        else if (element.treeElement.hasChildren && !element.treeElement.expanded)
     811            element.treeElement.expand();
     812    }
     813
     814    collapse()
     815    {
     816        if (this._listItemNode)
     817            this._listItemNode.classList.remove("expanded");
     818        if (this._childrenListNode)
     819            this._childrenListNode.classList.remove("expanded");
     820
     821        this.expanded = false;
     822        if (this.treeOutline)
     823            this.treeOutline._treeElementsExpandedState[this.identifier] = false;
     824
     825        if (this.oncollapse)
     826            this.oncollapse(this);
     827
     828        if (this.treeOutline && this.treeOutline.oncollapse)
     829            this.treeOutline.oncollapse(this);
     830    }
     831
     832    collapseRecursively()
     833    {
     834        var item = this;
     835        while (item) {
     836            if (item.expanded)
     837                item.collapse();
     838            item = item.traverseNextTreeElement(false, this, true);
     839        }
     840    }
     841
     842    expand()
     843    {
     844        if (this.expanded && !this._shouldRefreshChildren && this._childrenListNode)
     845            return;
     846
     847        // Set this before onpopulate. Since onpopulate can add elements and call onadd, this makes
     848        // sure the expanded flag is true before calling those functions. This prevents the possibility
     849        // of an infinite loop if onpopulate or onadd were to call expand.
     850
     851        this.expanded = true;
     852        if (this.treeOutline)
     853            this.treeOutline._treeElementsExpandedState[this.identifier] = true;
     854
     855        // If there are no children, return. We will be expanded once we have children.
     856        if (!this.hasChildren)
     857            return;
     858
     859        if (this.treeOutline && (!this._childrenListNode || this._shouldRefreshChildren)) {
     860            if (this._childrenListNode && this._childrenListNode.parentNode)
     861                this._childrenListNode.parentNode.removeChild(this._childrenListNode);
     862
     863            this._childrenListNode = this.treeOutline._childrenListNode.ownerDocument.createElement("ol");
     864            this._childrenListNode.parentTreeElement = this;
     865            this._childrenListNode.classList.add("children");
     866
     867            if (this.hidden)
     868                this._childrenListNode.classList.add("hidden");
     869
     870            this.onpopulate();
     871
     872            for (var i = 0; i < this.children.length; ++i)
     873                this.children[i]._attach();
     874
     875            delete this._shouldRefreshChildren;
     876        }
     877
     878        if (this._listItemNode) {
     879            this._listItemNode.classList.add("expanded");
     880            if (this._childrenListNode && this._childrenListNode.parentNode !== this._listItemNode.parentNode)
     881                this.parent._childrenListNode.insertBefore(this._childrenListNode, this._listItemNode.nextSibling);
     882        }
     883
     884        if (this._childrenListNode)
     885            this._childrenListNode.classList.add("expanded");
     886
     887        if (this.onexpand)
     888            this.onexpand(this);
     889
     890        if (this.treeOutline && this.treeOutline.onexpand)
     891            this.treeOutline.onexpand(this);
     892    }
     893
     894    expandRecursively(maxDepth)
     895    {
     896        var item = this;
     897        var info = {};
     898        var depth = 0;
     899
     900        // The Inspector uses TreeOutlines to represents object properties, so recursive expansion
     901        // in some case can be infinite, since JavaScript objects can hold circular references.
     902        // So default to a recursion cap of 3 levels, since that gives fairly good results.
     903        if (maxDepth === undefined)
     904            maxDepth = 3;
     905
     906        while (item) {
     907            if (depth < maxDepth)
     908                item.expand();
     909            item = item.traverseNextTreeElement(false, this, (depth >= maxDepth), info);
     910            depth += info.depthChange;
     911        }
     912    }
     913
     914    hasAncestor(ancestor)
     915        {
     916        if (!ancestor)
     917            return false;
     918
     919        var currentNode = this.parent;
     920        while (currentNode) {
     921            if (ancestor === currentNode)
     922                return true;
     923            currentNode = currentNode.parent;
     924        }
     925
     926        return false;
     927    }
     928
     929    reveal()
     930    {
     931        var currentAncestor = this.parent;
     932        while (currentAncestor && !currentAncestor.root) {
     933            if (!currentAncestor.expanded)
     934                currentAncestor.expand();
     935            currentAncestor = currentAncestor.parent;
     936        }
     937
     938        if (this.onreveal)
     939            this.onreveal(this);
     940    }
     941
     942    revealed()
     943    {
    848944        if (this.hidden)
    849             this._childrenListNode.classList.add("hidden");
    850 
    851         this.onpopulate();
    852 
    853         for (var i = 0; i < this.children.length; ++i)
    854             this.children[i]._attach();
    855 
    856         delete this._shouldRefreshChildren;
    857     }
    858 
    859     if (this._listItemNode) {
    860         this._listItemNode.classList.add("expanded");
    861         if (this._childrenListNode && this._childrenListNode.parentNode !== this._listItemNode.parentNode)
    862             this.parent._childrenListNode.insertBefore(this._childrenListNode, this._listItemNode.nextSibling);
    863     }
    864 
    865     if (this._childrenListNode)
    866         this._childrenListNode.classList.add("expanded");
    867 
    868     if (this.onexpand)
    869         this.onexpand(this);
    870 
    871     if (this.treeOutline && this.treeOutline.onexpand)
    872         this.treeOutline.onexpand(this);
     945            return false;
     946
     947        var currentAncestor = this.parent;
     948        while (currentAncestor && !currentAncestor.root) {
     949            if (!currentAncestor.expanded)
     950                return false;
     951            if (currentAncestor.hidden)
     952                return false;
     953            currentAncestor = currentAncestor.parent;
     954        }
     955
     956        return true;
     957    }
     958
     959    selectOnMouseDown(event)
     960    {
     961        this.select(false, true);
     962    }
     963
     964    select(omitFocus, selectedByUser, suppressOnSelect, suppressOnDeselect)
     965    {
     966        if (!this.treeOutline || !this.selectable)
     967            return;
     968
     969        if (this.selected && !this.treeOutline.allowsRepeatSelection)
     970            return;
     971
     972        if (!omitFocus)
     973            this.treeOutline._childrenListNode.focus();
     974
     975        // Focusing on another node may detach "this" from tree.
     976        if (!this.treeOutline)
     977            return;
     978
     979        this.treeOutline.processingSelectionChange = true;
     980
     981        if (!this.selected) {
     982            if (this.treeOutline.selectedTreeElement)
     983                this.treeOutline.selectedTreeElement.deselect(suppressOnDeselect);
     984
     985            this.selected = true;
     986            this.treeOutline.selectedTreeElement = this;
     987
     988            if (this._listItemNode)
     989                this._listItemNode.classList.add("selected");
     990        }
     991
     992        if (this.onselect && !suppressOnSelect)
     993            this.onselect(this, selectedByUser);
     994
     995        if (this.treeOutline.onselect && !suppressOnSelect)
     996            this.treeOutline.onselect(this, selectedByUser);
     997
     998        delete this.treeOutline.processingSelectionChange;
     999    }
     1000
     1001    revealAndSelect(omitFocus, selectedByUser, suppressOnSelect, suppressOnDeselect)
     1002    {
     1003        this.reveal();
     1004        this.select(omitFocus, selectedByUser, suppressOnSelect, suppressOnDeselect);
     1005    }
     1006
     1007    deselect(suppressOnDeselect)
     1008    {
     1009        if (!this.treeOutline || this.treeOutline.selectedTreeElement !== this || !this.selected)
     1010            return false;
     1011
     1012        this.selected = false;
     1013        this.treeOutline.selectedTreeElement = null;
     1014
     1015        if (this._listItemNode)
     1016            this._listItemNode.classList.remove("selected");
     1017
     1018        if (this.ondeselect && !suppressOnDeselect)
     1019            this.ondeselect(this);
     1020
     1021        if (this.treeOutline.ondeselect && !suppressOnDeselect)
     1022            this.treeOutline.ondeselect(this);
     1023
     1024        return true;
     1025    }
     1026
     1027    onpopulate()
     1028    {
     1029        // Overriden by subclasses.
     1030    }
     1031
     1032    traverseNextTreeElement(skipUnrevealed, stayWithin, dontPopulate, info)
     1033    {
     1034        if (!dontPopulate && this.hasChildren)
     1035            this.onpopulate.call(this); // FIXME: This shouldn't need to use call, but this is working around a JSC bug. https://webkit.org/b/74811
     1036
     1037        if (info)
     1038            info.depthChange = 0;
     1039
     1040        var element = skipUnrevealed ? (this.revealed() ? this.children[0] : null) : this.children[0];
     1041        if (element && (!skipUnrevealed || (skipUnrevealed && this.expanded))) {
     1042            if (info)
     1043                info.depthChange = 1;
     1044            return element;
     1045        }
     1046
     1047        if (this === stayWithin)
     1048            return null;
     1049
     1050        element = skipUnrevealed ? (this.revealed() ? this.nextSibling : null) : this.nextSibling;
     1051        if (element)
     1052            return element;
     1053
     1054        element = this;
     1055        while (element && !element.root && !(skipUnrevealed ? (element.revealed() ? element.nextSibling : null) : element.nextSibling) && element.parent !== stayWithin) {
     1056            if (info)
     1057                info.depthChange -= 1;
     1058            element = element.parent;
     1059        }
     1060
     1061        if (!element)
     1062            return null;
     1063
     1064        return (skipUnrevealed ? (element.revealed() ? element.nextSibling : null) : element.nextSibling);
     1065    }
     1066
     1067    traversePreviousTreeElement(skipUnrevealed, dontPopulate)
     1068    {
     1069        var element = skipUnrevealed ? (this.revealed() ? this.previousSibling : null) : this.previousSibling;
     1070        if (!dontPopulate && element && element.hasChildren)
     1071            element.onpopulate();
     1072
     1073        while (element && (skipUnrevealed ? (element.revealed() && element.expanded ? element.children[element.children.length - 1] : null) : element.children[element.children.length - 1])) {
     1074            if (!dontPopulate && element.hasChildren)
     1075                element.onpopulate();
     1076            element = (skipUnrevealed ? (element.revealed() && element.expanded ? element.children[element.children.length - 1] : null) : element.children[element.children.length - 1]);
     1077        }
     1078
     1079        if (element)
     1080            return element;
     1081
     1082        if (!this.parent || this.parent.root)
     1083            return null;
     1084
     1085        return this.parent;
     1086    }
     1087
     1088    isEventWithinDisclosureTriangle(event)
     1089    {
     1090        if (!document.contains(this._listItemNode))
     1091            return false;
     1092
     1093        // FIXME: We should not use getComputedStyle(). For that we need to get rid of using ::before for disclosure triangle. (http://webk.it/74446)
     1094        var computedLeftPadding = window.getComputedStyle(this._listItemNode).getPropertyCSSValue("padding-left").getFloatValue(CSSPrimitiveValue.CSS_PX);
     1095        var left = this._listItemNode.totalOffsetLeft + computedLeftPadding;
     1096        return event.pageX >= left && event.pageX <= left + this.arrowToggleWidth && this.hasChildren;
     1097    }
    8731098};
    874 
    875 TreeElement.prototype.expandRecursively = function(maxDepth)
    876 {
    877     var item = this;
    878     var info = {};
    879     var depth = 0;
    880 
    881     // The Inspector uses TreeOutlines to represents object properties, so recursive expansion
    882     // in some case can be infinite, since JavaScript objects can hold circular references.
    883     // So default to a recursion cap of 3 levels, since that gives fairly good results.
    884     if (maxDepth === undefined)
    885         maxDepth = 3;
    886 
    887     while (item) {
    888         if (depth < maxDepth)
    889             item.expand();
    890         item = item.traverseNextTreeElement(false, this, (depth >= maxDepth), info);
    891         depth += info.depthChange;
    892     }
    893 };
    894 
    895 TreeElement.prototype.hasAncestor = function(ancestor) {
    896     if (!ancestor)
    897         return false;
    898 
    899     var currentNode = this.parent;
    900     while (currentNode) {
    901         if (ancestor === currentNode)
    902             return true;
    903         currentNode = currentNode.parent;
    904     }
    905 
    906     return false;
    907 };
    908 
    909 TreeElement.prototype.reveal = function()
    910 {
    911     var currentAncestor = this.parent;
    912     while (currentAncestor && !currentAncestor.root) {
    913         if (!currentAncestor.expanded)
    914             currentAncestor.expand();
    915         currentAncestor = currentAncestor.parent;
    916     }
    917 
    918     if (this.onreveal)
    919         this.onreveal(this);
    920 };
    921 
    922 TreeElement.prototype.revealed = function()
    923 {
    924     if (this.hidden)
    925         return false;
    926 
    927     var currentAncestor = this.parent;
    928     while (currentAncestor && !currentAncestor.root) {
    929         if (!currentAncestor.expanded)
    930             return false;
    931         if (currentAncestor.hidden)
    932             return false;
    933         currentAncestor = currentAncestor.parent;
    934     }
    935 
    936     return true;
    937 };
    938 
    939 TreeElement.prototype.selectOnMouseDown = function(event)
    940 {
    941     this.select(false, true);
    942 };
    943 
    944 TreeElement.prototype.select = function(omitFocus, selectedByUser, suppressOnSelect, suppressOnDeselect)
    945 {
    946     if (!this.treeOutline || !this.selectable)
    947         return;
    948 
    949     if (this.selected && !this.treeOutline.allowsRepeatSelection)
    950         return;
    951 
    952     if (!omitFocus)
    953         this.treeOutline._childrenListNode.focus();
    954 
    955     // Focusing on another node may detach "this" from tree.
    956     if (!this.treeOutline)
    957         return;
    958 
    959     this.treeOutline.processingSelectionChange = true;
    960 
    961     if (!this.selected) {
    962         if (this.treeOutline.selectedTreeElement)
    963             this.treeOutline.selectedTreeElement.deselect(suppressOnDeselect);
    964 
    965         this.selected = true;
    966         this.treeOutline.selectedTreeElement = this;
    967 
    968         if (this._listItemNode)
    969             this._listItemNode.classList.add("selected");
    970     }
    971 
    972     if (this.onselect && !suppressOnSelect)
    973         this.onselect(this, selectedByUser);
    974 
    975     if (this.treeOutline.onselect && !suppressOnSelect)
    976         this.treeOutline.onselect(this, selectedByUser);
    977 
    978     delete this.treeOutline.processingSelectionChange;
    979 };
    980 
    981 TreeElement.prototype.revealAndSelect = function(omitFocus, selectedByUser, suppressOnSelect, suppressOnDeselect)
    982 {
    983     this.reveal();
    984     this.select(omitFocus, selectedByUser, suppressOnSelect, suppressOnDeselect);
    985 };
    986 
    987 TreeElement.prototype.deselect = function(suppressOnDeselect)
    988 {
    989     if (!this.treeOutline || this.treeOutline.selectedTreeElement !== this || !this.selected)
    990         return false;
    991 
    992     this.selected = false;
    993     this.treeOutline.selectedTreeElement = null;
    994 
    995     if (this._listItemNode)
    996         this._listItemNode.classList.remove("selected");
    997 
    998     if (this.ondeselect && !suppressOnDeselect)
    999         this.ondeselect(this);
    1000 
    1001     if (this.treeOutline.ondeselect && !suppressOnDeselect)
    1002         this.treeOutline.ondeselect(this);
    1003 
    1004     return true;
    1005 };
    1006 
    1007 TreeElement.prototype.onpopulate = function()
    1008 {
    1009     // Overriden by subclasses.
    1010 };
    1011 
    1012 TreeElement.prototype.traverseNextTreeElement = function(skipUnrevealed, stayWithin, dontPopulate, info)
    1013 {
    1014     if (!dontPopulate && this.hasChildren)
    1015         this.onpopulate.call(this); // FIXME: This shouldn't need to use call, but this is working around a JSC bug. https://webkit.org/b/74811
    1016 
    1017     if (info)
    1018         info.depthChange = 0;
    1019 
    1020     var element = skipUnrevealed ? (this.revealed() ? this.children[0] : null) : this.children[0];
    1021     if (element && (!skipUnrevealed || (skipUnrevealed && this.expanded))) {
    1022         if (info)
    1023             info.depthChange = 1;
    1024         return element;
    1025     }
    1026 
    1027     if (this === stayWithin)
    1028         return null;
    1029 
    1030     element = skipUnrevealed ? (this.revealed() ? this.nextSibling : null) : this.nextSibling;
    1031     if (element)
    1032         return element;
    1033 
    1034     element = this;
    1035     while (element && !element.root && !(skipUnrevealed ? (element.revealed() ? element.nextSibling : null) : element.nextSibling) && element.parent !== stayWithin) {
    1036         if (info)
    1037             info.depthChange -= 1;
    1038         element = element.parent;
    1039     }
    1040 
    1041     if (!element)
    1042         return null;
    1043 
    1044     return (skipUnrevealed ? (element.revealed() ? element.nextSibling : null) : element.nextSibling);
    1045 };
    1046 
    1047 TreeElement.prototype.traversePreviousTreeElement = function(skipUnrevealed, dontPopulate)
    1048 {
    1049     var element = skipUnrevealed ? (this.revealed() ? this.previousSibling : null) : this.previousSibling;
    1050     if (!dontPopulate && element && element.hasChildren)
    1051         element.onpopulate();
    1052 
    1053     while (element && (skipUnrevealed ? (element.revealed() && element.expanded ? element.children[element.children.length - 1] : null) : element.children[element.children.length - 1])) {
    1054         if (!dontPopulate && element.hasChildren)
    1055             element.onpopulate();
    1056         element = (skipUnrevealed ? (element.revealed() && element.expanded ? element.children[element.children.length - 1] : null) : element.children[element.children.length - 1]);
    1057     }
    1058 
    1059     if (element)
    1060         return element;
    1061 
    1062     if (!this.parent || this.parent.root)
    1063         return null;
    1064 
    1065     return this.parent;
    1066 };
    1067 
    1068 TreeElement.prototype.isEventWithinDisclosureTriangle = function(event)
    1069 {
    1070     if (!document.contains(this._listItemNode))
    1071         return false;
    1072 
    1073     // FIXME: We should not use getComputedStyle(). For that we need to get rid of using ::before for disclosure triangle. (http://webk.it/74446)
    1074     var computedLeftPadding = window.getComputedStyle(this._listItemNode).getPropertyCSSValue("padding-left").getFloatValue(CSSPrimitiveValue.CSS_PX);
    1075     var left = this._listItemNode.totalOffsetLeft + computedLeftPadding;
    1076     return event.pageX >= left && event.pageX <= left + this.arrowToggleWidth && this.hasChildren;
    1077 };
    1078 
    1079 TreeElement.prototype.__proto__ = WebInspector.Object.prototype;

  • trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutlineDataGridSynchronizer.js

    r181769 r182042  
    11/*
    2  * Copyright (C) 2013 Apple Inc. All rights reserved.
     2 * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
    33 *
    44 * Redistribution and use in source and binary forms, with or without
    … …  
    2424 */
    2525
    26 WebInspector.TreeOutlineDataGridSynchronizer = function(treeOutline, dataGrid, delegate)
     26WebInspector.TreeOutlineDataGridSynchronizer = class TreeOutlineDataGridSynchronizer extends WebInspector.Object
    2727{
    28     // FIXME: Convert this to a WebInspector.Object subclass, and call super().
    29     // WebInspector.Object.call(this);
    30 
    31     this._treeOutline = treeOutline;
    32     this._dataGrid = dataGrid;
    33     this._delegate = delegate || null;
    34     this._enabled = true;
    35 
    36     this._treeOutline.element.parentNode.addEventListener("scroll", this._treeOutlineScrolled.bind(this));
    37     this._dataGrid.scrollContainer.addEventListener("scroll", this._dataGridScrolled.bind(this));
    38 
    39     this._treeOutline.__dataGridNode = this._dataGrid;
    40 
    41     this._dataGrid.addEventListener(WebInspector.DataGrid.Event.ExpandedNode, this._dataGridNodeExpanded, this);
    42     this._dataGrid.addEventListener(WebInspector.DataGrid.Event.CollapsedNode, this._dataGridNodeCollapsed, this);
    43     this._dataGrid.addEventListener(WebInspector.DataGrid.Event.SelectedNodeChanged, this._dataGridNodeSelected, this);
    44 
    45     // FIXME: This is a hack. TreeOutline should just dispatch events via WebInspector.Object.
    46     var existingOnAdd = treeOutline.onadd;
    47     var existingOnRemove = treeOutline.onremove;
    48     var existingOnExpand = treeOutline.onexpand;
    49     var existingOnCollapse = treeOutline.oncollapse;
    50     var existingOnHidden = treeOutline.onhidden;
    51     var existingOnSelect = treeOutline.onselect;
    52 
    53     treeOutline.onadd = function(element) {
    54         this._treeElementAdded(element);
    55         if (existingOnAdd)
    56             existingOnAdd.call(treeOutline, element);
    57     }.bind(this);
    58 
    59     treeOutline.onremove = function(element) {
    60         this._treeElementRemoved(element);
    61         if (existingOnRemove)
    62             existingOnRemove.call(treeOutline, element);
    63     }.bind(this);
    64 
    65     treeOutline.onexpand = function(element) {
    66         this._treeElementExpanded(element);
    67         if (existingOnExpand)
    68             existingOnExpand.call(treeOutline, element);
    69     }.bind(this);
    70 
    71     treeOutline.oncollapse = function(element) {
    72         this._treeElementCollapsed(element);
    73         if (existingOnCollapse)
    74             existingOnCollapse.call(treeOutline, element);
    75     }.bind(this);
    76 
    77     treeOutline.onhidden = function(element, hidden) {
    78         this._treeElementHiddenChanged(element, hidden);
    79         if (existingOnHidden)
    80             existingOnHidden.call(treeOutline, element, hidden);
    81     }.bind(this);
    82 
    83     treeOutline.onselect = function(element, selectedByUser) {
    84         this._treeElementSelected(element, selectedByUser);
    85         if (existingOnSelect)
    86             existingOnSelect.call(treeOutline, element, selectedByUser);
    87     }.bind(this);
    88 };
    89 
    90 WebInspector.TreeOutlineDataGridSynchronizer.prototype = {
    91     constructor: WebInspector.TreeOutlineDataGridSynchronizer,
    92     __proto__: WebInspector.Object.prototype,
     28    constructor(treeOutline, dataGrid, delegate)
     29    {
     30        super();
     31
     32        this._treeOutline = treeOutline;
     33        this._dataGrid = dataGrid;
     34        this._delegate = delegate || null;
     35        this._enabled = true;
     36
     37        this._treeOutline.element.parentNode.addEventListener("scroll", this._treeOutlineScrolled.bind(this));
     38        this._dataGrid.scrollContainer.addEventListener("scroll", this._dataGridScrolled.bind(this));
     39
     40        this._treeOutline.__dataGridNode = this._dataGrid;
     41
     42        this._dataGrid.addEventListener(WebInspector.DataGrid.Event.ExpandedNode, this._dataGridNodeExpanded, this);
     43        this._dataGrid.addEventListener(WebInspector.DataGrid.Event.CollapsedNode, this._dataGridNodeCollapsed, this);
     44        this._dataGrid.addEventListener(WebInspector.DataGrid.Event.SelectedNodeChanged, this._dataGridNodeSelected, this);
     45
     46        // FIXME: This is a hack. TreeOutline should just dispatch events via WebInspector.Object.
     47        var existingOnAdd = treeOutline.onadd;
     48        var existingOnRemove = treeOutline.onremove;
     49        var existingOnExpand = treeOutline.onexpand;
     50        var existingOnCollapse = treeOutline.oncollapse;
     51        var existingOnHidden = treeOutline.onhidden;
     52        var existingOnSelect = treeOutline.onselect;
     53
     54        treeOutline.onadd = function(element) {
     55            this._treeElementAdded(element);
     56            if (existingOnAdd)
     57                existingOnAdd.call(treeOutline, element);
     58        }.bind(this);
     59
     60        treeOutline.onremove = function(element) {
     61            this._treeElementRemoved(element);
     62            if (existingOnRemove)
     63                existingOnRemove.call(treeOutline, element);
     64        }.bind(this);
     65
     66        treeOutline.onexpand = function(element) {
     67            this._treeElementExpanded(element);
     68            if (existingOnExpand)
     69                existingOnExpand.call(treeOutline, element);
     70        }.bind(this);
     71
     72        treeOutline.oncollapse = function(element) {
     73            this._treeElementCollapsed(element);
     74            if (existingOnCollapse)
     75                existingOnCollapse.call(treeOutline, element);
     76        }.bind(this);
     77
     78        treeOutline.onhidden = function(element, hidden) {
     79            this._treeElementHiddenChanged(element, hidden);
     80            if (existingOnHidden)
     81                existingOnHidden.call(treeOutline, element, hidden);
     82        }.bind(this);
     83
     84        treeOutline.onselect = function(element, selectedByUser) {
     85            this._treeElementSelected(element, selectedByUser);
     86            if (existingOnSelect)
     87                existingOnSelect.call(treeOutline, element, selectedByUser);
     88        }.bind(this);
     89    }
    9390
    9491    // Public
    … …  
    9794    {
    9895        return this._treeOutline;
    99     },
     96    }
    10097
    10198    get dataGrid()
    10299    {
    103100        return this._dataGrid;
    104     },
     101    }
    105102
    106103    get delegate()
    107104    {
    108105        return this._delegate;
    109     },
     106    }
    110107
    111108    get enabled()
    112109    {
    113110        return this._enabled;
    114     },
     111    }
    115112
    116113    set enabled(x)
    117114    {
    118115        this._enabled = x || false;
    119     },
    120 
    121     associate: function(treeElement, dataGridNode)
     116    }
     117
     118    associate(treeElement, dataGridNode)
    122119    {
    123120        console.assert(treeElement);
    … …  
    126123        treeElement.__dataGridNode = dataGridNode;
    127124        dataGridNode.__treeElement = treeElement;
    128     },
    129 
    130     synchronize: function()
     125    }
     126
     127    synchronize()
    131128    {
    132129        this._dataGrid.scrollContainer.scrollTop = this._treeOutline.element.parentNode.scrollTop;
    … …  
    135132        else if (this._dataGrid.selectedNode)
    136133            this._dataGrid.selectedNode.deselect(true);
    137     },
    138 
    139     treeElementForDataGridNode: function(dataGridNode)
     134    }
     135
     136    treeElementForDataGridNode(dataGridNode)
    140137    {
    141138        return dataGridNode.__treeElement || null;
    142     },
    143 
    144     dataGridNodeForTreeElement: function(treeElement)
     139    }
     140
     141    dataGridNodeForTreeElement(treeElement)
    145142    {
    146143        if (treeElement.__dataGridNode)
    … …  
    155152
    156153        return null;
    157     },
     154    }
    158155
    159156    // Private
    160157
    161     _treeOutlineScrolled: function(event)
     158    _treeOutlineScrolled(event)
    162159    {
    163160        if (!this._enabled)
    … …  
    171168        this._ignoreNextDataGridScrollEvent = true;
    172169        this._dataGrid.scrollContainer.scrollTop = this._treeOutline.element.parentNode.scrollTop;
    173     },
    174 
    175     _dataGridScrolled: function(event)
     170    }
     171
     172    _dataGridScrolled(event)
    176173    {
    177174        if (!this._enabled)
    … …  
    185182        this._ignoreNextTreeOutlineScrollEvent = true;
    186183        this._treeOutline.element.parentNode.scrollTop = this._dataGrid.scrollContainer.scrollTop;
    187     },
    188 
    189     _dataGridNodeSelected: function(event)
     184    }
     185
     186    _dataGridNodeSelected(event)
    190187    {
    191188        if (!this._enabled)
    … …  
    195192        if (dataGridNode)
    196193            dataGridNode.__treeElement.select(true, true, true, true);
    197     },
    198 
    199     _dataGridNodeExpanded: function(event)
     194    }
     195
     196    _dataGridNodeExpanded(event)
    200197    {
    201198        if (!this._enabled)
    … …  
    207204        if (!dataGridNode.__treeElement.expanded)
    208205            dataGridNode.__treeElement.expand();
    209     },
    210 
    211     _dataGridNodeCollapsed: function(event)
     206    }
     207
     208    _dataGridNodeCollapsed(event)
    212209    {
    213210        if (!this._enabled)
    … …  
    219216        if (dataGridNode.__treeElement.expanded)
    220217            dataGridNode.__treeElement.collapse();
    221     },
    222 
    223     _treeElementSelected: function(treeElement, selectedByUser)
     218    }
     219
     220    _treeElementSelected(treeElement, selectedByUser)
    224221    {
    225222        if (!this._enabled)
    … …  
    230227
    231228        dataGridNode.select(true);
    232     },
    233 
    234     _treeElementAdded: function(treeElement)
     229    }
     230
     231    _treeElementAdded(treeElement)
    235232    {
    236233        if (!this._enabled)
    … …  
    247244
    248245        parentDataGridNode.insertChild(dataGridNode, childIndex);
    249     },
    250 
    251     _treeElementRemoved: function(treeElement)
     246    }
     247
     248    _treeElementRemoved(treeElement)
    252249    {
    253250        if (!this._enabled)
    … …  
    259256        if (dataGridNode.parent)
    260257            dataGridNode.parent.removeChild(dataGridNode);
    261     },
    262 
    263     _treeElementExpanded: function(treeElement)
     258    }
     259
     260    _treeElementExpanded(treeElement)
    264261    {
    265262        if (!this._enabled)
    … …  
    271268        if (!dataGridNode.expanded)
    272269            dataGridNode.expand();
    273     },
    274 
    275     _treeElementCollapsed: function(treeElement)
     270    }
     271
     272    _treeElementCollapsed(treeElement)
    276273    {
    277274        if (!this._enabled)
    … …  
    283280        if (dataGridNode.expanded)
    284281            dataGridNode.collapse();
    285     },
    286 
    287     _treeElementHiddenChanged: function(treeElement, hidden)
     282    }
     283
     284    _treeElementHiddenChanged(treeElement, hidden)
    288285    {
    289286        if (!this._enabled)
    … …  
    296293    }
    297294};
    298 
    299 WebInspector.TreeOutlineDataGridSynchronizer.prototype.__proto__ = WebInspector.Object.prototype;

  • trunk/Source/WebInspectorUI/UserInterface/Views/TypePropertiesSection.js

    r181723 r182042  
    11/*
    2  * Copyright (C) 2014 Apple Inc. All rights reserved.
     2 * Copyright (C) 2014-2015 Apple Inc. All rights reserved.
    33 *
    44 * Redistribution and use in source and binary forms, with or without
    … …  
    6969            title.className = "info";
    7070            title.textContent = this.emptyPlaceholder;
    71             var infoElement = new TreeElement(title, null, false);
     71            var infoElement = new WebInspector.TreeElement(title, null, false);
    7272            this.propertiesTreeOutline.appendChild(infoElement);
    7373        }
    … …  
    126126};
    127127
    128 WebInspector.TypePropertyTreeElement = function(property)
     128WebInspector.TypePropertyTreeElement = class TypePropertyTreeElement extends WebInspector.TreeElement
    129129{
    130     this.property = property;
     130    constructor(property)
     131    {
     132        super(this.nameElement, null, false);
    131133
    132     this.nameElement = document.createElement("span");
    133     this.nameElement.className = "name";
    134     this.nameElement.textContent = this.property.name;
     134        this.property = property;
    135135
    136     TreeElement.call(this, this.nameElement, null, false);
     136        this.nameElement = document.createElement("span");
     137        this.nameElement.className = "name";
     138        this.nameElement.textContent = this.property.name;
    137139
    138     this.toggleOnClick = true;
    139     this.hasChildren = !!this.property.structure;
    140 };
     140        this.toggleOnClick = true;
     141        this.hasChildren = !!this.property.structure;
     142    }
    141143
    142 WebInspector.TypePropertyTreeElement.prototype = {
    143     constructor: WebInspector.TypePropertyTreeElement,
    144     __proto__: TreeElement.prototype,
    145 
    146     onpopulate: function()
     144    onpopulate()
    147145    {
    148146        this.removeChildren();
    … …  
    185183    }
    186184};
    187 
Note: See TracChangeset for help on using the changeset viewer.