Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(7)

Unified Diff: tracing/tracing/ui/extras/side_panel/fame_data_side_panel_test.html

Issue 1996303002: [Tracing] Introduce Frame Data Side Panel (Closed) Base URL: https://github.com/catapult-project/catapult.git@master
Patch Set: Address review comments; Move BlameContext.attributedEvents computation logic in Created 4 years, 7 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
Index: tracing/tracing/ui/extras/side_panel/fame_data_side_panel_test.html
diff --git a/tracing/tracing/ui/extras/side_panel/fame_data_side_panel_test.html b/tracing/tracing/ui/extras/side_panel/fame_data_side_panel_test.html
new file mode 100644
index 0000000000000000000000000000000000000000..9c2956c6e275f3cceffeaf47a7a544dd8f890ffd
--- /dev/null
+++ b/tracing/tracing/ui/extras/side_panel/fame_data_side_panel_test.html
@@ -0,0 +1,221 @@
+<!DOCTYPE html>
Xiaocheng 2016/05/31 12:01:10 Incorrect file name.
+<!--
+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/extras/importer/trace_event_importer.html">
+<link rel="import" href="/tracing/model/model.html">
+<link rel="import" href="/tracing/model/scoped_id.html">
+<link rel="import" href="/tracing/ui/extras/side_panel/frame_data_side_panel.html">
+
+<script>
+'use strict';
+
+tr.b.unittest.testSuite(function() {
+ function topLevelEvent(pid, id) {
+ return {
+ pid: pid,
+ id: id,
+ tid: 1,
+ ts: 0,
+ ph: 'O',
+ cat: 'blink',
+ scope: 'PlatformThread',
+ name: 'TopLevel',
+ args: {snapshot: {}}
+ };
+ }
+
+ function renderFrameEvent(pid, id, parent) {
+ return {
+ pid: pid,
+ id: id,
+ tid: 1,
+ ts: 0,
+ ph: 'O',
+ cat: 'blink',
+ scope: 'RenderFrame',
+ name: 'RenderFrame',
+ args: {snapshot: {parent: {
+ id_ref: parent.id,
+ scope: parent.scope
+ }}}
+ };
+ }
+
+ function frameTreeNodeEvent(pid, id, opt_renderFrame, opt_parentId) {
+ var ans = {
+ pid: pid,
+ id: id,
+ tid: 1,
+ ts: 0,
+ ph: 'O',
+ cat: 'navigation',
+ scope: 'FrameTreeNode',
+ name: 'FrameTreeNode',
+ args: {snapshot: {}}
+ };
+ if (opt_renderFrame) {
+ ans.args.snapshot.RenderFrame = {
+ id_ref: opt_renderFrame.id,
+ pid_ref: opt_renderFrame.pid,
+ scope: 'RenderFrame'
+ };
+ }
+ if (opt_parentId) {
+ ans.args.snapshot.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 events = [
+ topLevelEvent(1, '0x1'),
+ renderFrameEvent(1, '0x2', {id: '0x1', scope: 'PlatformThread'}),
+ frameTreeNodeEvent(2, '0x3')
+ ];
+ var panel = document.createElement('tr-ui-e-s-frame-data-side-panel');
+ panel.model = tr.c.TestUtils.newModelWithEvents([events]);
+ 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 events = [
+ topLevelEvent(1, '0x1'),
+ renderFrameEvent(1, '0x2', {id: '0x1', scope: 'PlatformThread'}),
+ frameTreeNodeEvent(2, '0x3', {id: '0x2', pid: 1})
+ ];
+ var panel = document.createElement('tr-ui-e-s-frame-data-side-panel');
+ panel.model = tr.c.TestUtils.newModelWithEvents([events]);
+ assert.lengthOf(panel.$.table.tableRows, 2);
+
+ this.addHTMLOutput(panel);
+ });
+
+ function sliceEvent(pid, start, duration) {
+ return {
+ pid: pid,
+ ts: start,
+ dur: duration,
+ tid: 1,
+ ph: 'X',
+ cat: 'cat',
+ name: 'a',
+ args: {}
+ };
+ }
+
+ function enterTopLevelEvent(pid, ts, id) {
+ return {
+ pid: pid,
+ ts: ts,
+ id: id,
+ tid: 1,
+ ph: '(',
+ cat: 'blink',
+ name: 'FrameBlameContext',
+ scope: 'PlatformThread'
+ };
+ }
+
+ function leaveTopLevelEvent(pid, ts, id) {
+ return {
+ pid: pid,
+ ts: ts,
+ id: id,
+ tid: 1,
+ ph: ')',
+ cat: 'blink',
+ name: 'FrameBlameContext',
+ scope: 'PlatformThread'
+ };
+ }
+
+ function getTopLevelSnapshot(process, id) {
+ return process.objects.getSnapshotAt(
+ new tr.model.ScopedId('PlatformThread', id), 0);
+ }
+
+ /**
+ * Changes the range of interest. Checks if the panel updates correspondingly.
+ */
+ test('respondToRangeOfInterest', function() {
+ var events = [
+ topLevelEvent(1, '0x1'),
+ enterTopLevelEvent(1, 1000, '0x1'),
+ sliceEvent(1, 1500, 500),
+ sliceEvent(1, 2500, 500),
+ leaveTopLevelEvent(1, 3500, '0x1')
+ ];
+ var model = tr.c.TestUtils.newModelWithEvents([events]);
+ var topLevel = getTopLevelSnapshot(model.processes[1], '0x1');
+ var slice1 = model.processes[1].threads[1].sliceGroup.slices[0];
+ var slice2 = model.processes[1].threads[1].sliceGroup.slices[1];
+
+ var panel = document.createElement('tr-ui-e-s-frame-data-side-panel');
+ panel.model = model;
+
+ // 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 events = [
+ topLevelEvent(1, '0x1'),
+ enterTopLevelEvent(1, 1000, '0x1'),
+ sliceEvent(1, 1500, 500),
+ leaveTopLevelEvent(1, 2500, '0x1')
+ ];
+ var model = tr.c.TestUtils.newModelWithEvents([events]);
+ var topLevel = getTopLevelSnapshot(model.processes[1], '0x1');
+ var slice = model.processes[1].threads[1].sliceGroup.slices[0];
+
+ var panel = document.createElement('tr-ui-e-s-frame-data-side-panel');
+ panel.model = model;
+
+ 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);
+ });
+
petrcermak 2016/05/31 09:57:24 nit: remove blank line.
Xiaocheng 2016/05/31 12:01:10 Done.
+});
+</script>

Powered by Google App Engine
This is Rietveld 408576698