Changeset 142626 in webkit


Ignore:
Timestamp:
Feb 12, 2013 7:56:28 AM (11 years ago)
Author:
yurys@chromium.org
Message:

Web Inspector: add initial implementation of native memory graph to Timeline
​https://bugs.webkit.org/show_bug.cgi?id=109578

Reviewed by Alexander Pavlov.

This change adds inital implementation of native memory graph UI. The graph
will be shown in the same place as DOM counters graph on the Timeline panel.

Added NativeMemoryGraph.js that reuses parts of DOM counters graph
implementation. MemoryStatistics.js was refactor to allow sharing
more code between DOM counters and native memory graph.

  • WebCore.gypi:
  • WebCore.vcproj/WebCore.vcproj:
  • inspector/compile-front-end.py:
  • inspector/front-end/MemoryStatistics.js:

(WebInspector.MemoryStatistics):
(WebInspector.MemoryStatistics.prototype._createCurrentValuesBar):
(WebInspector.MemoryStatistics.prototype._createCounterUIList):
(WebInspector.MemoryStatistics.prototype._createCounterUIList.getNodeCount):
(WebInspector.MemoryStatistics.prototype._createCounterUIList.getListenerCount):
(WebInspector.MemoryStatistics.prototype._canvasHeight):
(WebInspector.MemoryStatistics.prototype._updateSize):
(WebInspector.MemoryStatistics.prototype._highlightCurrentPositionOnGraphs):
(WebInspector.MemoryStatistics.prototype._drawMarker):

  • inspector/front-end/NativeMemoryGraph.js: Added.

(WebInspector.NativeMemoryGraph):
(WebInspector.NativeMemoryCounterUI):
(WebInspector.NativeMemoryCounterUI.prototype._hslToString):
(WebInspector.NativeMemoryCounterUI.prototype.updateCurrentValue):
(WebInspector.NativeMemoryCounterUI.prototype.clearCurrentValueAndMarker):
(WebInspector.NativeMemoryGraph.prototype._createCurrentValuesBar):
(WebInspector.NativeMemoryGraph.prototype._createCounterUIList.getCounterValue):
(WebInspector.NativeMemoryGraph.prototype._createCounterUIList):
(WebInspector.NativeMemoryGraph.prototype._canvasHeight):
(WebInspector.NativeMemoryGraph.prototype._onRecordAdded.addStatistics):
(WebInspector.NativeMemoryGraph.prototype._onRecordAdded):
(WebInspector.NativeMemoryGraph.prototype._draw):
(WebInspector.NativeMemoryGraph.prototype._clearCurrentValueAndMarker):
(WebInspector.NativeMemoryGraph.prototype._updateCurrentValue):
(WebInspector.NativeMemoryGraph.prototype._restoreImageUnderMarker):
(WebInspector.NativeMemoryGraph.prototype._saveImageUnderMarker):
(WebInspector.NativeMemoryGraph.prototype._drawMarker):
(WebInspector.NativeMemoryGraph.prototype._maxCounterValue):
(WebInspector.NativeMemoryGraph.prototype._resetTotalValues):
(WebInspector.NativeMemoryGraph.prototype.valueGetter):
(WebInspector.NativeMemoryGraph.prototype._drawGraph):
(WebInspector.NativeMemoryGraph.prototype._discardImageUnderMarker):

  • inspector/front-end/TimelinePanel.js:
  • inspector/front-end/WebKit.qrc:
  • inspector/front-end/timelinePanel.css:

(#memory-graphs-canvas-container.dom-counters .resources-dividers):
(.memory-category-value):

Location:
trunk/Source/WebCore
Files:
1 added
8 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebCore/ChangeLog

    r142621 r142626  
     12013-02-12  Yury Semikhatsky  <yurys@chromium.org>
     2
     3        Web Inspector: add initial implementation of native memory graph to Timeline
     4        https://bugs.webkit.org/show_bug.cgi?id=109578
     5
     6        Reviewed by Alexander Pavlov.
     7
     8        This change adds inital implementation of native memory graph UI. The graph
     9        will be shown in the same place as DOM counters graph on the Timeline panel.
     10
     11        Added NativeMemoryGraph.js that reuses parts of DOM counters graph
     12        implementation. MemoryStatistics.js was refactor to allow sharing
     13        more code between DOM counters and native memory graph.
     14
     15        * WebCore.gypi:
     16        * WebCore.vcproj/WebCore.vcproj:
     17        * inspector/compile-front-end.py:
     18        * inspector/front-end/MemoryStatistics.js:
     19        (WebInspector.MemoryStatistics):
     20        (WebInspector.MemoryStatistics.prototype._createCurrentValuesBar):
     21        (WebInspector.MemoryStatistics.prototype._createCounterUIList):
     22        (WebInspector.MemoryStatistics.prototype._createCounterUIList.getNodeCount):
     23        (WebInspector.MemoryStatistics.prototype._createCounterUIList.getListenerCount):
     24        (WebInspector.MemoryStatistics.prototype._canvasHeight):
     25        (WebInspector.MemoryStatistics.prototype._updateSize):
     26        (WebInspector.MemoryStatistics.prototype._highlightCurrentPositionOnGraphs):
     27        (WebInspector.MemoryStatistics.prototype._drawMarker):
     28        * inspector/front-end/NativeMemoryGraph.js: Added.
     29        (WebInspector.NativeMemoryGraph):
     30        (WebInspector.NativeMemoryCounterUI):
     31        (WebInspector.NativeMemoryCounterUI.prototype._hslToString):
     32        (WebInspector.NativeMemoryCounterUI.prototype.updateCurrentValue):
     33        (WebInspector.NativeMemoryCounterUI.prototype.clearCurrentValueAndMarker):
     34        (WebInspector.NativeMemoryGraph.prototype._createCurrentValuesBar):
     35        (WebInspector.NativeMemoryGraph.prototype._createCounterUIList.getCounterValue):
     36        (WebInspector.NativeMemoryGraph.prototype._createCounterUIList):
     37        (WebInspector.NativeMemoryGraph.prototype._canvasHeight):
     38        (WebInspector.NativeMemoryGraph.prototype._onRecordAdded.addStatistics):
     39        (WebInspector.NativeMemoryGraph.prototype._onRecordAdded):
     40        (WebInspector.NativeMemoryGraph.prototype._draw):
     41        (WebInspector.NativeMemoryGraph.prototype._clearCurrentValueAndMarker):
     42        (WebInspector.NativeMemoryGraph.prototype._updateCurrentValue):
     43        (WebInspector.NativeMemoryGraph.prototype._restoreImageUnderMarker):
     44        (WebInspector.NativeMemoryGraph.prototype._saveImageUnderMarker):
     45        (WebInspector.NativeMemoryGraph.prototype._drawMarker):
     46        (WebInspector.NativeMemoryGraph.prototype._maxCounterValue):
     47        (WebInspector.NativeMemoryGraph.prototype._resetTotalValues):
     48        (WebInspector.NativeMemoryGraph.prototype.valueGetter):
     49        (WebInspector.NativeMemoryGraph.prototype._drawGraph):
     50        (WebInspector.NativeMemoryGraph.prototype._discardImageUnderMarker):
     51        * inspector/front-end/TimelinePanel.js:
     52        * inspector/front-end/WebKit.qrc:
     53        * inspector/front-end/timelinePanel.css:
     54        (#memory-graphs-canvas-container.dom-counters .resources-dividers):
     55        (.memory-category-value):
     56
    1572013-02-12  Andrey Lushnikov  <lushnikov@chromium.org>
    258

  • trunk/Source/WebCore/WebCore.gypi

    r142610 r142626  
    53935393        'webinspector_timeline_js_files': [
    53945394            'inspector/front-end/MemoryStatistics.js',
     5395            'inspector/front-end/NativeMemoryGraph.js',
    53955396            'inspector/front-end/TimelineFrameController.js',
    53965397            'inspector/front-end/TimelineModel.js',

  • trunk/Source/WebCore/WebCore.vcproj/WebCore.vcproj

    r142610 r142626  
    7733177331                                </File>
    7733277332                                <File
     77333                                        RelativePath="..\inspector\front-end\MemoryStatistics.js"
     77334                                        >
     77335                                </File>
     77336                                <File
    7733377337                                        RelativePath="..\inspector\front-end\MetricsSidebarPane.js"
    7733477338                                        >
    … …  
    7734077344                                <File
    7734177345                                        RelativePath="..\inspector\front-end\NativeHeapSnapshot.js"
     77346                                        >
     77347                                </File>
     77348                                <File
     77349                                        RelativePath="..\inspector\front-end\NativeMemoryGraph.js"
    7734277350                                        >
    7734377351                                </File>

  • trunk/Source/WebCore/inspector/compile-front-end.py

    r142610 r142626  
    279279        "sources": [
    280280            "MemoryStatistics.js",
     281            "NativeMemoryGraph.js",
    281282            "TimelineModel.js",
    282283            "TimelineOverviewPane.js",

  • trunk/Source/WebCore/inspector/front-end/MemoryStatistics.js

    r142278 r142626  
    5252    this._canvasContainer = this._memorySidebarView.mainElement;
    5353    this._canvasContainer.id = "memory-graphs-canvas-container";
    54     this._currentValuesBar = this._canvasContainer.createChild("div");
    55     this._currentValuesBar.id = "counter-values-bar";
     54    this._createCurrentValuesBar();
    5655    this._canvas = this._canvasContainer.createChild("canvas");
    5756    this._canvas.id = "memory-counters-graph";
    … …  
    6867    // Populate sidebar
    6968    this._memorySidebarView.sidebarElement.createChild("div", "sidebar-tree sidebar-tree-section").textContent = WebInspector.UIString("COUNTERS");
    70     function getDocumentCount(entry)
    71     {
    72         return entry.documentCount;
    73     }
    74     function getNodeCount(entry)
    75     {
    76         return entry.nodeCount;
    77     }
    78     function getListenerCount(entry)
    79     {
    80         return entry.listenerCount;
    81     }
    82     this._counterUI = [
    83         new WebInspector.DOMCounterUI(this, "Document Count", "Documents: %d", [100,0,0], getDocumentCount),
    84         new WebInspector.DOMCounterUI(this, "DOM Node Count", "Nodes: %d", [0,100,0], getNodeCount),
    85         new WebInspector.DOMCounterUI(this, "Event Listener Count", "Listeners: %d", [0,0,100], getListenerCount)
    86     ];
     69    this._counterUI = this._createCounterUIList();
    8770
    8871    TimelineAgent.setIncludeMemoryDetails(true);
    … …  
    241224
    242225WebInspector.MemoryStatistics.prototype = {
     226    _createCurrentValuesBar: function()
     227    {
     228        this._currentValuesBar = this._canvasContainer.createChild("div");
     229        this._currentValuesBar.id = "counter-values-bar";
     230        this._canvasContainer.addStyleClass("dom-counters");
     231    },
     232
     233    _createCounterUIList: function()
     234    {
     235        function getDocumentCount(entry)
     236        {
     237            return entry.documentCount;
     238        }
     239        function getNodeCount(entry)
     240        {
     241            return entry.nodeCount;
     242        }
     243        function getListenerCount(entry)
     244        {
     245            return entry.listenerCount;
     246        }
     247        return [
     248            new WebInspector.DOMCounterUI(this, "Document Count", "Documents: %d", [100,0,0], getDocumentCount),
     249            new WebInspector.DOMCounterUI(this, "DOM Node Count", "Nodes: %d", [0,100,0], getNodeCount),
     250            new WebInspector.DOMCounterUI(this, "Event Listener Count", "Listeners: %d", [0,0,100], getListenerCount)
     251        ];
     252    },
     253
    243254    _onRecordsCleared: function()
    244255    {
    … …  
    275286    },
    276287
     288    _canvasHeight: function()
     289    {
     290        return this._canvasContainer.offsetHeight - this._currentValuesBar.offsetHeight;
     291    },
     292
    277293    _updateSize: function()
    278294    {
    … …  
    280296        this._canvasContainer.style.width = width + "px";
    281297
    282         var height = this._canvasContainer.offsetHeight - this._currentValuesBar.offsetHeight;
     298        var height = this._canvasHeight();
    283299        this._canvas.width = width;
    284300        this._canvas.height = height;
    … …  
    412428        var ctx = this._canvas.getContext("2d");
    413429        this._restoreImageUnderMarker(ctx);
    414         this._saveImageUnderMarker(ctx, x, index);
    415430        this._drawMarker(ctx, x, index);
    416431    },
    … …  
    440455    _drawMarker: function(ctx, x, index)
    441456    {
     457        this._saveImageUnderMarker(ctx, x, index);
    442458        const radius = 2;
    443459        for (var i = 0; i < this._counterUI.length; i++) {

  • trunk/Source/WebCore/inspector/front-end/TimelinePanel.js

    r142460 r142626  
    3131
    3232importScript("MemoryStatistics.js");
     33importScript("NativeMemoryGraph.js");
    3334importScript("TimelineModel.js");
    3435importScript("TimelineOverviewPane.js");

  • trunk/Source/WebCore/inspector/front-end/WebKit.qrc

    r142610 r142626  
    115115    <file>NativeBreakpointsSidebarPane.js</file>
    116116    <file>NativeHeapSnapshot.js</file>
     117    <file>NativeMemoryGraph.js</file>
    117118    <file>NativeMemorySnapshotView.js</file>
    118119    <file>NavigatorOverlayController.js</file>

  • trunk/Source/WebCore/inspector/front-end/timelinePanel.css

    r138244 r142626  
    544544}
    545545
    546 #memory-graphs-canvas-container .resources-dividers {
     546#memory-graphs-canvas-container.dom-counters .resources-dividers {
    547547    top: 15px;
    548548}
    … …  
    685685    padding: 0;
    686686}
     687
     688.memory-category-value {
     689    float: right;
     690}
Note: See TracChangeset for help on using the changeset viewer.