Changeset 139614 in webkit


Ignore:
Timestamp:
Jan 14, 2013 7:37:40 AM (11 years ago)
Author:
aandrey@chromium.org
Message:

Web Inspector: [Canvas] UI: add control buttons for doing the replay steps
​https://bugs.webkit.org/show_bug.cgi?id=106788

Reviewed by Pavel Feldman.

Adding UI control buttons for doing the Canvas replay steps.
Drive-by: fixed a bug in DataGrid (found by the JSCompiler).

  • inspector/front-end/CanvasProfileView.js:

(WebInspector.CanvasProfileView):
(WebInspector.CanvasProfileView.prototype._createControlButton):
(WebInspector.CanvasProfileView.prototype._onReplayStepClick):
(WebInspector.CanvasProfileView.prototype._onReplayFirstStepClick):
(WebInspector.CanvasProfileView.prototype._onReplayLastStepClick):
(WebInspector.CanvasProfileView.prototype._enableWaitIcon):
(WebInspector.CanvasProfileView.prototype._replayTraceLog.didReplayTraceLog):
(WebInspector.CanvasProfileView.prototype._replayTraceLog):
(WebInspector.CanvasProfileView.prototype._didReceiveTraceLog):
(WebInspector.CanvasProfileType.prototype._updateDecorationElement):

  • inspector/front-end/DOMExtension.js:

(Element.prototype.enableStyleClass):

  • inspector/front-end/DataGrid.js:

(WebInspector.DataGrid.prototype.setRootNode):
(WebInspector.DataGrid.prototype._startEditingColumnOfDataGridNode):
(WebInspector.DataGrid.prototype.moveToNextIfNeeded):
(WebInspector.DataGrid.prototype._editingCommitted):
(WebInspector.DataGridNode):

  • inspector/front-end/canvasProfiler.css:

(.canvas-replay-image):
(.canvas-replay-image.wait):
(.canvas-replay-controls):
(.canvas-replay-log):
(.canvas-control-button):
(.canvas-control-button:active):
(.canvas-control-button:disabled):
(.canvas-control-button img):
(.canvas-replay-first-step img):
(.canvas-replay-next-step img):
(.canvas-replay-prev-step img):
(.canvas-replay-last-step img):

Location:
trunk/Source/WebCore
Files:
6 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebCore/ChangeLog

    r139611 r139614  
     12013-01-14  Andrey Adaikin  <aandrey@chromium.org>
     2
     3        Web Inspector: [Canvas] UI: add control buttons for doing the replay steps
     4        https://bugs.webkit.org/show_bug.cgi?id=106788
     5
     6        Reviewed by Pavel Feldman.
     7
     8        Adding UI control buttons for doing the Canvas replay steps.
     9        Drive-by: fixed a bug in DataGrid (found by the JSCompiler).
     10
     11        * inspector/front-end/CanvasProfileView.js:
     12        (WebInspector.CanvasProfileView):
     13        (WebInspector.CanvasProfileView.prototype._createControlButton):
     14        (WebInspector.CanvasProfileView.prototype._onReplayStepClick):
     15        (WebInspector.CanvasProfileView.prototype._onReplayFirstStepClick):
     16        (WebInspector.CanvasProfileView.prototype._onReplayLastStepClick):
     17        (WebInspector.CanvasProfileView.prototype._enableWaitIcon):
     18        (WebInspector.CanvasProfileView.prototype._replayTraceLog.didReplayTraceLog):
     19        (WebInspector.CanvasProfileView.prototype._replayTraceLog):
     20        (WebInspector.CanvasProfileView.prototype._didReceiveTraceLog):
     21        (WebInspector.CanvasProfileType.prototype._updateDecorationElement):
     22        * inspector/front-end/DOMExtension.js:
     23        (Element.prototype.enableStyleClass):
     24        * inspector/front-end/DataGrid.js:
     25        (WebInspector.DataGrid.prototype.setRootNode):
     26        (WebInspector.DataGrid.prototype._startEditingColumnOfDataGridNode):
     27        (WebInspector.DataGrid.prototype.moveToNextIfNeeded):
     28        (WebInspector.DataGrid.prototype._editingCommitted):
     29        (WebInspector.DataGridNode):
     30        * inspector/front-end/canvasProfiler.css:
     31        (.canvas-replay-image):
     32        (.canvas-replay-image.wait):
     33        (.canvas-replay-controls):
     34        (.canvas-replay-log):
     35        (.canvas-control-button):
     36        (.canvas-control-button:active):
     37        (.canvas-control-button:disabled):
     38        (.canvas-control-button img):
     39        (.canvas-replay-first-step img):
     40        (.canvas-replay-next-step img):
     41        (.canvas-replay-prev-step img):
     42        (.canvas-replay-last-step img):
     43
    1442013-01-14  Tommy Widenflycht  <tommyw@google.com>
    245

  • trunk/Source/WebCore/English.lproj/localizedStrings.js

    r139408 r139614  
    778778localizedStrings["Capturing\u2026"] = "Capturing\u2026";
    779779localizedStrings["There is an uninstrumented canvas on the page. Reload the page to instrument it."] = "There is an uninstrumented canvas on the page. Reload the page to instrument it.";
     780localizedStrings["First call."] = "First call.";
     781localizedStrings["Previous call."] = "Previous call.";
     782localizedStrings["Next call."] = "Next call.";
     783localizedStrings["Last call."] = "Last call.";
    780784localizedStrings["Reload"] = "Reload";
    781785localizedStrings["Binary File"] = "Binary File";

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

    r139408 r139614  
    4444    this._splitView = new WebInspector.SplitView(false, "canvasProfileViewSplitLocation", 300);
    4545
     46    var replayImageContainer = this._splitView.firstElement();
     47    replayImageContainer.id = "canvas-replay-image-container";
     48    this._replayImageElement = replayImageContainer.createChild("image", "canvas-replay-image");
     49    this._debugInfoElement = replayImageContainer.createChild("div");
     50
     51    var replayInfoContainer = this._splitView.secondElement();
     52    var controlsContainer = replayInfoContainer.createChild("div", "canvas-replay-controls");
     53    var logGridContainer = replayInfoContainer.createChild("div", "canvas-replay-log");
     54
     55    this._createControlButton(controlsContainer, "canvas-replay-first-step", WebInspector.UIString("First call."), this._onReplayFirstStepClick.bind(this));
     56    this._createControlButton(controlsContainer, "canvas-replay-prev-step", WebInspector.UIString("Previous call."), this._onReplayStepClick.bind(this, false));
     57    this._createControlButton(controlsContainer, "canvas-replay-next-step", WebInspector.UIString("Next call."), this._onReplayStepClick.bind(this, true));
     58    this._createControlButton(controlsContainer, "canvas-replay-last-step", WebInspector.UIString("Last call."), this._onReplayLastStepClick.bind(this));
     59
    4660    var columns = { 0: {}, 1: {}, 2: {} };
    4761    columns[0].title = "#";
    … …  
    5771    this._logGrid = new WebInspector.DataGrid(columns);
    5872    this._logGrid.element.addStyleClass("fill");
    59     this._logGrid.show(this._splitView.secondElement());
     73    this._logGrid.show(logGridContainer);
    6074    this._logGrid.addEventListener(WebInspector.DataGrid.Events.SelectedNode, this._replayTraceLog.bind(this));
    61 
    62     var replayImageContainer = this._splitView.firstElement();
    63     replayImageContainer.id = "canvas-replay-image-container";
    64 
    65     this._replayImageElement = document.createElement("image");
    66     this._replayImageElement.id = "canvas-replay-image";
    67 
    68     replayImageContainer.appendChild(this._replayImageElement);
    69     this._debugInfoElement = document.createElement("div");
    70     replayImageContainer.appendChild(this._debugInfoElement);
    7175
    7276    this._splitView.show(this.element);
    … …  
    103107
    104108    /**
     109     * @param {Element} parent
     110     * @param {string} className
     111     * @param {string} title
     112     * @param {function(this:WebInspector.CanvasProfileView)} clickCallback
     113     */
     114    _createControlButton: function(parent, className, title, clickCallback)
     115    {
     116        var button = parent.createChild("button", "canvas-control-button");
     117        button.addStyleClass(className);
     118        button.title = title;
     119        button.createChild("img");
     120        button.addEventListener("click", clickCallback, false);
     121    },
     122
     123    /**
     124     * @param {boolean} forward
     125     */
     126    _onReplayStepClick: function(forward)
     127    {
     128        var selectedNode = this._logGrid.selectedNode;
     129        if (!selectedNode)
     130            return;
     131        var nextNode = forward ? selectedNode.traverseNextNode(false) : selectedNode.traversePreviousNode(false);
     132        if (nextNode)
     133            nextNode.revealAndSelect();
     134        else
     135            selectedNode.reveal();
     136    },
     137
     138    _onReplayFirstStepClick: function()
     139    {
     140        var rootNode = this._logGrid.rootNode();
     141        var children = rootNode && rootNode.children;
     142        var firstNode = children && children[0];
     143        if (firstNode)
     144            firstNode.revealAndSelect();
     145    },
     146
     147    _onReplayLastStepClick: function()
     148    {
     149        var rootNode = this._logGrid.rootNode();
     150        var children = rootNode && rootNode.children;
     151        var lastNode = children && children[children.length - 1];
     152        if (lastNode)
     153            lastNode.revealAndSelect();
     154    },
     155
     156    /**
    105157     * @param {boolean} enable
    106158     */
    … …  
    109161        function showWaitIcon()
    110162        {
    111             this._replayImageElement.className = "wait";
     163            this._replayImageElement.addStyleClass("wait");
    112164            this._debugInfoElement.textContent = "";
    113165            delete this._showWaitIconTimer;
    … …  
    121173                delete this._showWaitIconTimer;
    122174            }
    123             this._replayImageElement.className = enable ? "wait" : "";
     175            this._replayImageElement.enableStyleClass("wait", enable);
    124176            this._debugInfoElement.textContent = "";
    125177        }
    … …  
    134186        function didReplayTraceLog(error, dataURL)
    135187        {
     188            if (callNode !== this._logGrid.selectedNode)
     189                return;
    136190            this._enableWaitIcon(false);
    137191            if (error)
    … …  
    154208            this._logGrid.rootNode().appendChild(this._createCallNode(i, calls[i]));
    155209        var lastNode = this._logGrid.rootNode().children[calls.length - 1];
    156         if (lastNode) {
    157             lastNode.reveal();
    158             lastNode.select();
    159         }
    160     },
    161 
     210        if (lastNode)
     211            lastNode.revealAndSelect();
     212    },
     213
     214    /**
     215     * @param {number} index
     216     * @param {Object} call
     217     */
    162218    _createCallNode: function(index, call)
    163219    {
    … …  
    295351        function callback(error, result)
    296352        {
    297             var showWarning = (!error && result);
    298             if (showWarning)
    299                 this._decorationElement.removeStyleClass("hidden");
    300             else
    301                 this._decorationElement.addStyleClass("hidden");
     353            var hideWarning = (error || !result);
     354            this._decorationElement.enableStyleClass("hidden", hideWarning);
    302355        }
    303356        CanvasAgent.hasUninstrumentedCanvases(callback.bind(this));

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

    r138532 r139614  
    145145}
    146146
     147/**
     148 * @param {string} className
     149 */
    147150Element.prototype.removeStyleClass = function(className)
    148151{
    … …  
    157160}
    158161
     162/**
     163 * @param {string} className
     164 */
    159165Element.prototype.addStyleClass = function(className)
    160166{
    … …  
    162168}
    163169
     170/**
     171 * @param {string} className
     172 * @return {boolean}
     173 */
    164174Element.prototype.hasStyleClass = function(className)
    165175{
    166176    return this.classList.contains(className);
     177}
     178
     179/**
     180 * @param {string} className
     181 * @param {*} enable
     182 */
     183Element.prototype.enableStyleClass = function(className, enable)
     184{
     185    if (enable)
     186        this.addStyleClass(className);
     187    else
     188        this.removeStyleClass(className);
    167189}
    168190

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

    r139452 r139614  
    234234
    235235WebInspector.DataGrid.prototype = {
     236    /**
     237     * @param {!WebInspector.DataGridNode} rootNode
     238     */
    236239    setRootNode: function(rootNode)
    237240    {
    … …  
    241244            this._rootNode._isRoot = false;
    242245        }
     246        /** @type {!WebInspector.DataGridNode} */
    243247        this._rootNode = rootNode;
    244248        rootNode._isRoot = true;
    … …  
    249253    },
    250254
     255    /**
     256     * @return {!WebInspector.DataGridNode}
     257     */
    251258    rootNode: function()
    252259    {
    … …  
    282289    {
    283290        this._editing = true;
     291        /** @type {WebInspector.DataGridNode} */
    284292        this._editingNode = node;
    285293        this._editingNode.select();
    … …  
    359367
    360368                var lastEditableColumn = this._nextEditableColumn(this._columnsArray.length, true);
    361                 var nextDataGridNode = currentEditingNode.traversePreviousNode(true, null, true);
     369                var nextDataGridNode = currentEditingNode.traversePreviousNode(true, true);
    362370                if (nextDataGridNode)
    363371                    return this._startEditingColumnOfDataGridNode(nextDataGridNode, lastEditableColumn);
    … …  
    10511059    this._data = data || {};
    10521060    this.hasChildren = hasChildren || false;
     1061    /** @type {!Array.<WebInspector.DataGridNode>} */
    10531062    this.children = [];
    10541063    this.dataGrid = null;
    10551064    this.parent = null;
     1065    /** @type {WebInspector.DataGridNode} */
    10561066    this.previousSibling = null;
     1067    /** @type {WebInspector.DataGridNode} */
    10571068    this.nextSibling = null;
    10581069    this.disclosureToggleWidth = 10;
    … …  
    10601071
    10611072WebInspector.DataGridNode.prototype = {
     1073    /** @type {boolean} */
    10621074    selectable: true,
    10631075
     1076    /** @type {boolean} */
    10641077    _isRoot: false,
    10651078
    … …  
    15401553    },
    15411554
     1555    /**
     1556     * @param {boolean} skipHidden
     1557     * @param {WebInspector.DataGridNode=} stayWithin
     1558     * @param {boolean=} dontPopulate
     1559     * @param {Object=} info
     1560     * @return {WebInspector.DataGridNode}
     1561     */
    15421562    traverseNextNode: function(skipHidden, stayWithin, dontPopulate, info)
    15431563    {
    … …  
    15751595    },
    15761596
     1597    /**
     1598     * @param {boolean} skipHidden
     1599     * @param {boolean=} dontPopulate
     1600     * @return {WebInspector.DataGridNode}
     1601     */
    15771602    traversePreviousNode: function(skipHidden, dontPopulate)
    15781603    {

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

    r134405 r139614  
    4646}
    4747
    48 #canvas-replay-image {
     48.canvas-replay-image {
    4949    zoom: 100;
    5050    height: auto;
    … …  
    5656}
    5757
    58 #canvas-replay-image.wait {
     58.canvas-replay-image.wait {
    5959    content: url(Images/spinnerActiveSelected.gif);
    6060    zoom: inherit;
    … …  
    6464    margin: -16px 0 0 -16px;
    6565}
     66
     67.canvas-replay-controls {
     68    position: absolute;
     69    top: 0;
     70    left: 0;
     71    right: 0;
     72    height: 26px;
     73    border: 1px solid #aaa;
     74    background-image: -webkit-linear-gradient(rgb(243,243,243), rgb(235,235,235));
     75}
     76
     77.canvas-replay-log {
     78    position: absolute;
     79    top: 24px;
     80    left: 0;
     81    right: 0;
     82    bottom: 0;
     83}
     84
     85.canvas-control-button {
     86    display: inline-block;
     87    position: relative;
     88    width: 32px;
     89    height: 24px;
     90    padding: 0;
     91    margin-left: -1px;
     92    vertical-align: top;
     93    background-color: transparent;
     94    border: 0 transparent none;
     95    border-left: 1px solid rgb(202, 202, 202);
     96    border-right: 1px solid rgb(202, 202, 202);
     97}
     98
     99.canvas-control-button:active {
     100    background-color: rgb(163,163,163);
     101    border-left: 1px solid rgb(120, 120, 120);
     102    border-right: 1px solid rgb(120, 120, 120);
     103}
     104
     105.canvas-control-button:disabled {
     106    opacity: 0.5;
     107}
     108
     109.canvas-control-button img {
     110    margin-top: 1px;
     111}
     112
     113.canvas-replay-first-step img {
     114    content: url(Images/debuggerContinue.png);
     115    -webkit-transform: rotate(180deg);
     116}
     117.canvas-replay-next-step img {
     118    content: url(Images/debuggerStepInto.png);
     119}
     120.canvas-replay-prev-step img {
     121    content: url(Images/debuggerStepOut.png);
     122}
     123.canvas-replay-last-step img {
     124    content: url(Images/debuggerContinue.png);
     125}
Note: See TracChangeset for help on using the changeset viewer.