Changeset 28002 in webkit


Ignore:
Timestamp:
Nov 24, 2007 2:35:52 PM (16 years ago)
Author:
timothy@apple.com
Message:

Reviewed by Adam Roben.

Bug 16121: Web Inspector needs helper functions that pass a 'this' object to
addEventListener and setTimeout
​http://bugs.webkit.org/show_bug.cgi?id=16121

Add Function.prototype.bind. This helper will return a wrapper function
that will call the original function with the supplied arguments
and using the supplied 'this' object.

  • page/inspector/Database.js: Remove a use of setTimeout by inheriting some common functions from Resource.
  • page/inspector/DatabasePanel.js: Use the new bind function.
  • page/inspector/ConsolePanel.js: Ditto.
  • page/inspector/DocumentPanel.js: Ditto.
  • page/inspector/NetworkPanel.js: Ditto.
  • page/inspector/PropertiesSection.js: Ditto.
  • page/inspector/Resource.js: Ditto.
  • page/inspector/SidebarPane.js: Ditto.
  • page/inspector/inspector.html: Moved Database.js after Resource.js, now that Database.js uses it.
  • page/inspector/inspector.js: Use the new bind function. Also removed a setTimeout used for the localized strings code. There is now a load event listener added to the localized strings script element that will call WebInspector.loaded.
  • page/inspector/utilities.js: Add Function.prototype.bind.
Location:
trunk/WebCore
Files:
12 edited

Legend:

Unmodified
Added
Removed

  • trunk/WebCore/ChangeLog

    r27999 r28002  
     12007-11-24  Timothy Hatcher  <timothy@apple.com>
     2
     3        Reviewed by Adam Roben.
     4
     5        Bug 16121: Web Inspector needs helper functions that pass a 'this' object to
     6        addEventListener and setTimeout
     7        http://bugs.webkit.org/show_bug.cgi?id=16121
     8
     9        Add Function.prototype.bind. This helper will return a wrapper function
     10        that will call the original function with the supplied arguments
     11        and using the supplied 'this' object.
     12
     13        * page/inspector/Database.js: Remove a use of setTimeout by
     14          inheriting some common functions from Resource.
     15        * page/inspector/DatabasePanel.js: Use the new bind function.
     16        * page/inspector/ConsolePanel.js: Ditto.
     17        * page/inspector/DocumentPanel.js: Ditto.
     18        * page/inspector/NetworkPanel.js: Ditto.
     19        * page/inspector/PropertiesSection.js: Ditto.
     20        * page/inspector/Resource.js: Ditto.
     21        * page/inspector/SidebarPane.js: Ditto.
     22        * page/inspector/inspector.html: Moved Database.js after Resource.js,
     23          now that Database.js uses it.
     24        * page/inspector/inspector.js: Use the new bind function. Also
     25          removed a setTimeout used for the localized strings code. There is
     26          now a load event listener added to the localized strings script
     27          element that will call WebInspector.loaded.
     28        * page/inspector/utilities.js: Add Function.prototype.bind.
     29
    1302007-11-24  Timothy Hatcher  <timothy@apple.com>
    231

  • trunk/WebCore/page/inspector/ConsolePanel.js

    r27883 r28002  
    4040    this.element.appendChild(this.messageList);
    4141
    42     var console = this;
    43     this.messageList.addEventListener("click", function(event) { console.messageListClicked(event) }, true);
     42    this.messageList.addEventListener("click", this.messageListClicked.bind(this), true);
    4443
    4544    this.consolePrompt = document.createElement("textarea");
    … …  
    4746    this.element.appendChild(this.consolePrompt);
    4847
    49     this.consolePrompt.addEventListener("keydown", function(event) { console.promptKeypress(event) }, false);
     48    this.consolePrompt.addEventListener("keydown", this.promptKeypress.bind(this), false);
    5049}
    5150

  • trunk/WebCore/page/inspector/Database.js

    r26787 r28002  
    9696    },
    9797
    98     updateTitleSoon: function()
    99     {
    100         if (this.updateTitleTimeout)
    101             return;
    102         var _self = this;
    103         this.updateTitleTimeout = setTimeout(function () { _self.updateTitle() }, 0);
    104     },
    105 
    10698    updateTitle: function()
    10799    {
    … …  
    129121    },
    130122
    131     select: function()
    132     {
    133         WebInspector.navigateToResource(this);
    134     },
    135 
    136     deselect: function()
    137     {
    138         this.listItem.deselect(true);
    139         if (WebInspector.currentPanel === this._panel)
    140             WebInspector.currentPanel = null;
    141     },
    142 
    143     attach: function()
    144     {
    145         this.panel.attach();
    146     },
    147 
    148     detach: function()
    149     {
    150         if (this._panel)
    151             this.panel.detach();
    152     }
     123    // Inherit the other functions from the Resource prototype.
     124    updateTitleSoon: WebInspector.Resource.prototype.updateTitleSoon,
     125    select: WebInspector.Resource.prototype.select,
     126    deselect: WebInspector.Resource.prototype.deselect,
     127    attach: WebInspector.Resource.prototype.attach,
     128    detach: WebInspector.Resource.prototype.detach
    153129}

  • trunk/WebCore/page/inspector/DatabasePanel.js

    r27892 r28002  
    4141    this.element.appendChild(this.queryPromptElement);
    4242
    43     var panel = this;
    44     this.queryPromptElement.addEventListener("keydown", function(event) { panel.queryInputKeypress(event) }, false);
     43    this.queryPromptElement.addEventListener("keydown", this.queryInputKeypress.bind(this), false);
    4544
    4645    this.queryPromptHistory = [];
    … …  
    5352    queryView.contentElement.appendChild(queryView.commandListElement);
    5453
     54    var panel = this;
    5555    queryView.show = function()
    5656    {
    … …  
    7070    browseView.reloadTableElement.className = "database-table-reload";
    7171    browseView.reloadTableElement.title = WebInspector.UIString("Reload");
    72     browseView.reloadTableElement.addEventListener("click", function() { panel.updateTableList(); panel.updateTableBrowser() }, false);
     72    browseView.reloadTableElement.addEventListener("click", this.reloadClicked.bind(this), false);
    7373
    7474    browseView.show = function()
    … …  
    136136    },
    137137
     138    reloadClicked: function()
     139    {
     140        this.updateTableList();
     141        this.updateTableBrowser();
     142    },
     143
    138144    updateTableList: function()
    139145    {
    … …  
    146152            var changeTableFunction = function()
    147153            {
    148                 var browseView = panel.views.browse;
    149154                var index = browseView.tableSelectElement.selectedIndex;
    150155                if (index != -1)

  • trunk/WebCore/page/inspector/DocumentPanel.js

    r27999 r28002  
    8484    domView.sidebarResizeElement = document.createElement("div");
    8585    domView.sidebarResizeElement.className = "sidebar-resizer-vertical sidebar-resizer-vertical-right";
    86     domView.sidebarResizeElement.addEventListener("mousedown", function(event) { panel.rightSidebarResizerDragStart(event) }, false);
     86    domView.sidebarResizeElement.addEventListener("mousedown", this.rightSidebarResizerDragStart.bind(this), false);
    8787
    8888    domView.contentElement.appendChild(domView.sideContentElement);
    … …  
    385385        if (document.body.offsetWidth <= 0) {
    386386            // The stylesheet hasn't loaded yet, so we need to update later.
    387             var panel = this;
    388             setTimeout(function() { panel.updateBreadcrumbSizes() }, 0);
     387            setTimeout(this.updateBreadcrumbSizes.bind(this), 0);
    389388            return;
    390389        }
    … …  
    756755        if (document.body.offsetWidth <= 0) {
    757756            // The stylesheet hasn't loaded yet, so we need to update later.
    758             var element = this;
    759             setTimeout(function() { element.updateSelection() }, 0);
     757            setTimeout(this.updateSelection.bind(this), 0);
    760758            return;
    761759        }
    … …  
    772770    onattach: function()
    773771    {
    774         var element = this;
    775         this.listItemElement.addEventListener("mousedown", function(event) { element.onmousedown(event) }, false);
     772        this.listItemElement.addEventListener("mousedown", this.onmousedown.bind(this), false);
    776773    },
    777774

  • trunk/WebCore/page/inspector/NetworkPanel.js

    r27999 r28002  
    4747    this.resourcesElement = document.createElement("div");
    4848    this.resourcesElement.className = "network-resources";
    49     var panel = this;
    50     this.resourcesElement.addEventListener("click", function(event) { return panel.onClick(event) }, false);
     49    this.resourcesElement.addEventListener("click", this.resourcesClicked.bind(this), false);
    5150    this.timelineElement.appendChild(this.resourcesElement);
    5251
    … …  
    6160    this.graphModeSelectElement = document.createElement("select");
    6261    this.graphModeSelectElement.className = "network-graph-mode";
    63     this.graphModeSelectElement.addEventListener("change", function(event) { return panel.onModeChange(event) }, false);
     62    this.graphModeSelectElement.addEventListener("change", this.changeGraphMode.bind(this), false);
    6463    this.graphLabelElement.appendChild(this.graphModeSelectElement);
    6564    this.graphLabelElement.appendChild(document.createElement("br"));
    … …  
    113112    },
    114113
    115     onClick: function(event)
     114    resourcesClicked: function(event)
    116115    {
    117116        // If the click wasn't inside a network resource row, ignore it.
    … …  
    135134    },
    136135
    137     onModeChange: function(event)
     136    changeGraphMode: function(event)
    138137    {
    139138        this.updateSummaryGraph();
    … …  
    231230        if ("sortTimelineEntriesTimeout" in this)
    232231            return;
    233 
    234         var _self = this;
    235         this.sortTimelineEntriesTimeout = setTimeout(function () { _self.sortTimelineEntriesIfNeeded() }, 500);
     232        this.sortTimelineEntriesTimeout = setTimeout(this.sortTimelineEntriesIfNeeded.bind(this), 500);
    236233    },
    237234
    … …  
    284281        if ("updateTimelineDividersTimeout" in this)
    285282            return;
    286 
    287         var _self = this;
    288         this.updateTimelineDividersTimeout = setTimeout(function () { _self.updateTimelineDividersIfNeeded() }, 500);
     283        this.updateTimelineDividersTimeout = setTimeout(this.updateTimelineDividersIfNeeded.bind(this), 500);
    289284    },
    290285
    … …  
    303298        if (document.body.offsetWidth <= 0) {
    304299            // The stylesheet hasn't loaded yet, so we need to update later.
    305             var panel = this;
    306             setTimeout(function () { panel.updateTimelineDividersIfNeeded() }, 0);
     300            setTimeout(this.updateTimelineDividersIfNeeded.bind(this), 0);
    307301            return;
    308302        }
    … …  
    338332        if ("refreshAllTimelineEntriesTimeout" in this)
    339333            return;
    340 
    341         var _self = this;
    342         this.refreshAllTimelineEntriesTimeout = setTimeout(function () { _self.refreshAllTimelineEntries() }, 500, skipBoundryUpdate, skipTimelineSort, immediate);
     334        this.refreshAllTimelineEntriesTimeout = setTimeout(this.refreshAllTimelineEntries.bind(this), 500, skipBoundryUpdate, skipTimelineSort, immediate);
    343335    },
    344336
    … …  
    593585        if ("updateSummaryGraphTimeout" in this)
    594586            return;
    595 
    596         var _self = this;
    597         this.updateSummaryGraphTimeout = setTimeout(function () { _self.updateSummaryGraph() }, 500);
     587        this.updateSummaryGraphTimeout = setTimeout(this.updateSummaryGraph.bind(this), 500);
    598588    },
    599589
    … …  
    704694    this.fileElement.insertBefore(this.tipButtonElement, this.fileElement.firstChild);
    705695
    706     var entry = this;
    707     this.tipButtonElement.addEventListener("click", function(event) { entry.toggleTipBalloon(event) }, false );
     696    this.tipButtonElement.addEventListener("click", this.toggleTipBalloon.bind(this), false );
    708697
    709698    this.areaElement = document.createElement("div");

  • trunk/WebCore/page/inspector/PropertiesSection.js

    r27575 r28002  
    4343    this.headerElement.appendChild(this.titleElement);
    4444    this.headerElement.appendChild(this.subtitleElement);
    45 
    46     var section = this;
    47     this.headerElement.addEventListener("click", function() { section.expanded = !section.expanded; }, false);
     45    this.headerElement.addEventListener("click", this.toggleExpanded.bind(this), false);
    4846
    4947    this.propertiesElement = document.createElement("ol");
    … …  
    133131        this._expanded = false;
    134132        this.element.removeStyleClass("expanded");
     133    },
     134
     135    toggleExpanded: function()
     136    {
     137        this.expanded = !this.expanded;
    135138    }
    136139}

  • trunk/WebCore/page/inspector/Resource.js

    r27883 r28002  
    497497        if (this.updateTitleTimeout)
    498498            return;
    499         var _self = this;
    500         this.updateTitleTimeout = setTimeout(function () { _self.updateTitle() }, 0);
     499        this.updateTitleTimeout = setTimeout(this.updateTitle.bind(this), 0);
    501500    },
    502501

  • trunk/WebCore/page/inspector/SidebarPane.js

    r27431 r28002  
    3434    this.titleElement = document.createElement("div");
    3535    this.titleElement.className = "title";
    36 
    37     var pane = this;
    38     this.titleElement.addEventListener("click", function() { pane.expanded = !pane.expanded; }, false);
     36    this.titleElement.addEventListener("click", this.toggleExpanded.bind(this), false);
    3937
    4038    this.bodyElement = document.createElement("div");
    … …  
    117115        if (this.oncollapse)
    118116            this.oncollapse(this);
     117    },
     118
     119    toggleExpanded: function()
     120    {
     121        this.expanded = !this.expanded;
    119122    }
    120123}

  • trunk/WebCore/page/inspector/inspector.html

    r27999 r28002  
    3434    <script type="text/javascript" src="treeoutline.js"></script>
    3535    <script type="text/javascript" src="inspector.js"></script>
    36     <script type="text/javascript" src="Database.js"></script>
    3736    <script type="text/javascript" src="Resource.js"></script>
    3837    <script type="text/javascript" src="ResourceCategory.js"></script>
     38    <script type="text/javascript" src="Database.js"></script>
    3939    <script type="text/javascript" src="SidebarPane.js"></script>
    4040    <script type="text/javascript" src="PropertiesSection.js"></script>

  • trunk/WebCore/page/inspector/inspector.js

    r27935 r28002  
    211211}
    212212
    213 WebInspector.setupLocalizedString = function(event)
    214 {
    215     var localizedStringsURL = InspectorController.localizedStringsURL();
    216     if (localizedStringsURL) {
    217         var localizedStringsScriptElement = document.createElement("script");
    218         localizedStringsScriptElement.type = "text/javascript";
    219         localizedStringsScriptElement.src = localizedStringsURL;
    220         document.getElementsByTagName("head").item(0).appendChild(localizedStringsScriptElement);
    221     }
    222 }
    223 
    224213WebInspector.loaded = function()
    225214{
    … …  
    260249    this.addMainEventListeners(document);
    261250
    262     window.addEventListener("unload", function(event) { WebInspector.windowUnload(event) }, true);
    263     window.addEventListener("resize", function(event) { WebInspector.windowResize(event) }, true);
    264 
    265     document.addEventListener("mousedown", function(event) { WebInspector.changeFocus(event) }, true);
    266     document.addEventListener("focus", function(event) { WebInspector.changeFocus(event) }, true);
    267     document.addEventListener("keypress", function(event) { WebInspector.documentKeypress(event) }, true);
    268     document.addEventListener("beforecopy", function(event) { WebInspector.documentCanCopy(event) }, true);
    269     document.addEventListener("copy", function(event) { WebInspector.documentCopy(event) }, true);
     251    window.addEventListener("unload", this.windowUnload.bind(this), true);
     252    window.addEventListener("resize", this.windowResize.bind(this), true);
     253
     254    document.addEventListener("mousedown", this.changeFocus.bind(this), true);
     255    document.addEventListener("focus", this.changeFocus.bind(this), true);
     256    document.addEventListener("keypress", this.documentKeypress.bind(this), true);
     257    document.addEventListener("beforecopy", this.documentCanCopy.bind(this), true);
     258    document.addEventListener("copy", this.documentCopy.bind(this), true);
    270259
    271260    document.getElementById("back").title = WebInspector.UIString("Show previous panel.");
    … …  
    274263    document.getElementById("search").setAttribute("placeholder", WebInspector.UIString("Search"));
    275264
    276     document.getElementById("back").addEventListener("click", function(event) { WebInspector.back() }, true);
    277     document.getElementById("forward").addEventListener("click", function(event) { WebInspector.forward() }, true);
     265    document.getElementById("back").addEventListener("click", this.back.bind(this), true);
     266    document.getElementById("forward").addEventListener("click", this.forward.bind(this), true);
    278267    this.updateBackForwardButtons();
    279268
    280     document.getElementById("attachToggle").addEventListener("click", function(event) { WebInspector.toggleAttach() }, true);
    281     document.getElementById("statusToggle").addEventListener("click", function(event) { WebInspector.toggleStatusArea() }, true);
    282     document.getElementById("sidebarResizeWidget").addEventListener("mousedown", WebInspector.sidebarResizerDragStart, true);
    283     document.getElementById("sidebarResizer").addEventListener("mousedown", WebInspector.sidebarResizerDragStart, true);
    284     document.getElementById("searchResultsResizer").addEventListener("mousedown", WebInspector.searchResultsResizerDragStart, false);
     269    document.getElementById("attachToggle").addEventListener("click", this.toggleAttach.bind(this), true);
     270    document.getElementById("statusToggle").addEventListener("click", this.toggleStatusArea.bind(this), true);
     271
     272    document.getElementById("sidebarResizeWidget").addEventListener("mousedown", this.sidebarResizerDragStart, true);
     273    document.getElementById("sidebarResizer").addEventListener("mousedown", this.sidebarResizerDragStart, true);
     274    document.getElementById("searchResultsResizer").addEventListener("mousedown", this.searchResultsResizerDragStart, true);
    285275
    286276    document.body.addStyleClass("detached");
    … …  
    291281var windowLoaded = function()
    292282{
    293     WebInspector.setupLocalizedString(event);
    294 
    295     // Delay calling loaded to give time for the localized strings file to load.
    296     // Calling it too early will cause localized string lookups to fail.
    297     setTimeout(function() { WebInspector.loaded() }, 0);
     283    var localizedStringsURL = InspectorController.localizedStringsURL();
     284    if (localizedStringsURL) {
     285        var localizedStringsScriptElement = document.createElement("script");
     286        localizedStringsScriptElement.addEventListener("load", WebInspector.loaded.bind(WebInspector), false);
     287        localizedStringsScriptElement.type = "text/javascript";
     288        localizedStringsScriptElement.src = localizedStringsURL;
     289        document.getElementsByTagName("head").item(0).appendChild(localizedStringsScriptElement);
     290    } else
     291        WebInspector.loaded();
    298292
    299293    delete windowLoaded;

  • trunk/WebCore/page/inspector/utilities.js

    r27981 r28002  
    8080{
    8181    var properties = [];
    82     for (var prop in obj) {
     82    for (var prop in obj)
    8383        properties.push(prop);
    84     }
    85 
    8684    properties.sort();
    8785    return properties;
     86}
     87
     88Function.prototype.bind = function(thisObject)
     89{
     90    var func = this;
     91    var args = Array.prototype.slice.call(arguments, 1);
     92    return function() { return func.apply(thisObject, args.concat(Array.prototype.slice.call(arguments, 0))) };
    8893}
    8994
    … …  
    141146        if (node.nodeName.toLowerCase() === nodeName.toLowerCase())
    142147            return node;
    143 
    144148    return null;
    145149}
    … …  
    150154        if (node.nodeType === Node.ELEMENT_NODE && node.hasStyleClass(className))
    151155            return node;
    152 
    153156    return null;
    154157}
    … …  
    158161    if (!this.parentNode)
    159162        return null;
    160 
    161163    return this.parentNode.firstParentOrSelfWithClass(className);
    162164}
Note: See TracChangeset for help on using the changeset viewer.