| <!DOCTYPE html> |
| <!-- |
| Copyright 2016 The Chromium Authors. All rights reserved. |
| Use of this source code is governed by a BSD-style license that can be |
| found in the LICENSE file. |
| --> |
| |
| <link rel="import" href="/tracing/core/test_utils.html"> |
| <link rel="import" href="/tracing/extras/chrome/blame_context/frame_tree_node.html"> |
| <link rel="import" href="/tracing/extras/chrome/blame_context/render_frame.html"> |
| <link rel="import" href="/tracing/extras/chrome/blame_context/top_level.html"> |
| <link rel="import" href="/tracing/ui/extras/side_panel/frame_data_side_panel.html"> |
| |
| <script> |
| 'use strict'; |
| |
| tr.b.unittest.testSuite(function() { |
| var TestUtils = tr.c.TestUtils; |
| |
| function topLevelOptions(pid, id) { |
| return { |
| pid: pid, |
| id: id, |
| cat: 'blink', |
| scope: 'PlatformThread', |
| name: 'TopLevel' |
| }; |
| } |
| |
| function renderFrameOptions(pid, id, parent) { |
| return { |
| pid: pid, |
| id: id, |
| cat: 'blink', |
| scope: 'RenderFrame', |
| name: 'RenderFrame', |
| args: {parent: { |
| id_ref: parent.id, |
| scope: parent.scope |
| }} |
| }; |
| } |
| |
| function frameTreeNodeOptions(pid, id, opt_renderFrame, opt_parentId) { |
| var ans = { |
| pid: pid, |
| id: id, |
| cat: 'navigation', |
| scope: 'FrameTreeNode', |
| name: 'FrameTreeNode', |
| args: {} |
| }; |
| if (opt_renderFrame) { |
| ans.args.renderFrame = { |
| id_ref: opt_renderFrame.id, |
| pid_ref: opt_renderFrame.pid, |
| scope: 'RenderFrame' |
| }; |
| } |
| if (opt_parentId) { |
| ans.args.parent = { |
| id_ref: opt_parentId, |
| scope: 'FrameTreeNode' |
| }; |
| } |
| return ans; |
| } |
| |
| /** |
| * Creates some independent contexts. Checks if all are present in the panel. |
| */ |
| test('basic', function() { |
| var panel = document.createElement('tr-ui-e-s-frame-data-side-panel'); |
| panel.model = TestUtils.newModel(function(model) { |
| TestUtils.newSnapshot(model, topLevelOptions(1, '0x1')); |
| TestUtils.newSnapshot(model, renderFrameOptions( |
| 1, '0x2', {id: '0x1', scope: 'PlatformThread'})); |
| TestUtils.newSnapshot(model, frameTreeNodeOptions( |
| 2, '0x3')); |
| }); |
| assert.lengthOf(panel.$.table.tableRows, 3); |
| |
| this.addHTMLOutput(panel); |
| }); |
| |
| /** |
| * Creates a FrameTreeNode in the browser process and a RenderFrame in a |
| * renderer process that are the same frame. Checks if they are merged into |
| * one row in the panel. |
| */ |
| test('mergeCrossProcessFrameBlameContexts', function() { |
| var panel = document.createElement('tr-ui-e-s-frame-data-side-panel'); |
| panel.model = TestUtils.newModel(function(model) { |
| TestUtils.newSnapshot(model, topLevelOptions(1, '0x1')); |
| TestUtils.newSnapshot(model, renderFrameOptions( |
| 1, '0x2', {id: '0x1', scope: 'PlatformThread'})); |
| TestUtils.newSnapshot(model, frameTreeNodeOptions( |
| 2, '0x3', {id: '0x2', pid: 1})); |
| }); |
| assert.lengthOf(panel.$.table.tableRows, 2); |
| |
| this.addHTMLOutput(panel); |
| }); |
| |
| function newAttributedSlice(model, pid, start, duration, context) { |
| var slice = TestUtils.newSliceEx({start: start, duration: duration}); |
| slice.contexts = [{type: 'FrameBlameContext', snapshot: context}]; |
| model.getOrCreateProcess(pid).getOrCreateThread(1).sliceGroup.pushSlice( |
| slice); |
| return slice; |
| } |
| |
| /** |
| * Changes the range of interest. Checks if the panel updates correspondingly. |
| */ |
| test('respondToRangeOfInterest', function() { |
| var topLevel; |
| var slice1; |
| var slice2; |
| var panel = document.createElement('tr-ui-e-s-frame-data-side-panel'); |
| panel.model = TestUtils.newModel(function(model) { |
| topLevel = TestUtils.newSnapshot(model, topLevelOptions(1, '0x1')); |
| slice1 = newAttributedSlice(model, 1, 1500, 500, topLevel); |
| slice2 = newAttributedSlice(model, 1, 2500, 500, topLevel); |
| }); |
| |
| // The default range of interest contains both slices. |
| assert.isTrue(panel.$.table.tableRows[0].eventsOfInterest.equals( |
| new tr.model.EventSet([topLevel, slice1, slice2]))); |
| |
| // The new range of interest contains only slice2. |
| panel.rangeOfInterest = tr.b.Range.fromExplicitRange(slice2.start, |
| slice2.end); |
| assert.isTrue(panel.$.table.tableRows[0].eventsOfInterest.equals( |
| new tr.model.EventSet([topLevel, slice2]))); |
| |
| this.addHTMLOutput(panel); |
| }); |
| |
| /** |
| * Selects a row in the panel. Checks if the context(s) of the row and the |
| * slices attributed to the row are selected. |
| */ |
| test('selectAttributedEvents', function() { |
| var topLevel; |
| var slice; |
| var panel = document.createElement('tr-ui-e-s-frame-data-side-panel'); |
| panel.model = TestUtils.newModel(function(model) { |
| topLevel = TestUtils.newSnapshot(model, topLevelOptions(1, '0x1')); |
| slice = newAttributedSlice(model, 1, 1500, 500, topLevel); |
| }); |
| |
| var selectionChanged = false; |
| panel.addEventListener('requestSelectionChange', function(e) { |
| selectionChanged = true; |
| assert.isTrue( |
| e.selection.equals(new tr.model.EventSet([topLevel, slice]))); |
| }); |
| panel.$.table.selectedTableRow = panel.$.table.tableRows[0]; |
| assert.isTrue(selectionChanged); |
| |
| this.addHTMLOutput(panel); |
| }); |
| }); |
| </script> |