1 files changed, 79 insertions, 0 deletions
diff --git a/chromium/third_party/catapult/tracing/tracing/ui/analysis/single_async_slice_sub_view.html b/chromium/third_party/catapult/tracing/tracing/ui/analysis/single_async_slice_sub_view.html
new file mode 100644
index 00000000000..cc7f7b840dd
--- /dev/null
+++ b/chromium/third_party/catapult/tracing/tracing/ui/analysis/single_async_slice_sub_view.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<!--
+Copyright (c) 2013 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/base/utils.html">
+<link rel="import" href="/tracing/ui/analysis/analysis_sub_view.html">
+<link rel="import" href="/tracing/ui/analysis/related_events.html">
+<link rel="import" href="/tracing/ui/analysis/single_event_sub_view.html">
+
+<dom-module id='tr-ui-a-single-async-slice-sub-view'>
+  <template>
+    <style>
+    :host {
+      display: flex;
+      flex-direction: row;
+    }
+    #events {
+      display:flex;
+      flex-direction: column;
+    }
+    </style>
+    <tr-ui-a-single-event-sub-view id="content"></tr-ui-a-single-event-sub-view>
+    <div id="events">
+      <tr-ui-a-related-events id="relatedEvents"></tr-ui-a-related-events>
+    </div>
+  </template>
+</dom-module>
+<script>
+'use strict';
+
+Polymer({
+  is: 'tr-ui-a-single-async-slice-sub-view',
+  behaviors: [tr.ui.analysis.AnalysisSubView],
+
+  get selection() {
+    return this.$.content.selection;
+  },
+
+  set selection(selection) {
+    if (selection.length !== 1) {
+      throw new Error('Only supports single slices');
+    }
+    this.$.content.setSelectionWithoutErrorChecks(selection);
+    this.$.relatedEvents.setRelatedEvents(selection);
+    if (this.$.relatedEvents.hasRelatedEvents()) {
+      this.$.relatedEvents.style.display = '';
+    } else {
+      this.$.relatedEvents.style.display = 'none';
+    }
+  },
+
+  getEventRows_(event) {
+    // TODO(nduca): Figure out if there is a cleaner way to do this.
+    const rows = this.__proto__.__proto__.getEventRows_(event);
+
+    // Put the ID up top.
+    rows.splice(0, 0, {
+      name: 'ID',
+      value: event.id
+    });
+    return rows;
+  },
+
+  get relatedEventsToHighlight() {
+    if (!this.currentSelection_) return undefined;
+    return tr.b.getOnlyElement(this.currentSelection_).associatedEvents;
+  }
+});
+tr.ui.analysis.AnalysisSubView.register(
+    'tr-ui-a-single-async-slice-sub-view',
+    tr.model.AsyncSlice,
+    {
+      multi: false,
+      title: 'Async Slice',
+    });
+</script>