1 files changed, 81 insertions, 63 deletions
diff --git a/chromium/third_party/catapult/tracing/tracing/ui/analysis/multi_object_sub_view.html b/chromium/third_party/catapult/tracing/tracing/ui/analysis/multi_object_sub_view.html
index 8241ab16aa2..d95ab8ba29b 100644
--- a/chromium/third_party/catapult/tracing/tracing/ui/analysis/multi_object_sub_view.html
+++ b/chromium/third_party/catapult/tracing/tracing/ui/analysis/multi_object_sub_view.html
@@ -5,89 +5,107 @@ 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/unit.html">
 <link rel="import" href="/tracing/model/event_set.html">
 <link rel="import" href="/tracing/ui/analysis/analysis_link.html">
 <link rel="import" href="/tracing/ui/analysis/analysis_sub_view.html">
 <link rel="import" href="/tracing/ui/base/dom_helpers.html">
 <link rel="import" href="/tracing/ui/base/table.html">
 <link rel="import" href="/tracing/value/ui/scalar_span.html">
-<link rel="import" href="/tracing/value/unit.html">
 
-<polymer-element name="tr-ui-a-multi-object-sub-view"
-    extends="tr-ui-a-sub-view">
+<dom-module id='tr-ui-a-multi-object-sub-view'>
   <template>
     <style>
     :host {
       display: flex;
+      font-size: 12px;
     }
     </style>
     <tr-ui-b-table id="content"></tr-ui-b-table>
   </template>
-  <script>
-  'use strict';
+</dom-module>
+<script>
+'use strict';
 
-  Polymer({
-    created: function() {
-      this.currentSelection_ = undefined;
-    },
+Polymer({
+  is: 'tr-ui-a-multi-object-sub-view',
+  behaviors: [tr.ui.analysis.AnalysisSubView],
 
-    ready: function() {
-      this.$.content.showHeader = false;
-    },
+  created: function() {
+    this.currentSelection_ = undefined;
+  },
 
-    get selection() {
-      return this.currentSelection_;
-    },
+  ready: function() {
+    this.$.content.showHeader = false;
+  },
 
-    set selection(selection) {
-      this.currentSelection_ = selection;
+  get selection() {
+    return this.currentSelection_;
+  },
 
-      var objectEvents = tr.b.asArray(selection).sort(
-          tr.b.Range.compareByMinTimes);
+  set selection(selection) {
+    this.currentSelection_ = selection;
 
-      var timeSpanConfig = {
-        unit: tr.v.Unit.byName.timeStampInMs,
-        ownerDocument: this.ownerDocument
-      };
-      var table = this.$.content;
-      table.tableColumns = [
-        {
-          title: 'First',
-          value: function(event) {
-            if (event instanceof tr.model.ObjectSnapshot)
-              return tr.v.ui.createScalarSpan(event.ts, timeSpanConfig);
+    var objectEvents = tr.b.asArray(selection).sort(
+        tr.b.Range.compareByMinTimes);
 
-            var spanEl = document.createElement('span');
-            spanEl.appendChild(tr.v.ui.createScalarSpan(
-                event.creationTs, timeSpanConfig));
-            spanEl.appendChild(tr.ui.b.createSpan({
-                textContent: '-',
-                marginLeft: '4px',
-                marginRight: '4px'
-            }));
-            if (event.deletionTs != Number.MAX_VALUE) {
-              spanEl.appendChild(tr.v.ui.createScalarSpan(
-                  event.deletionTs, timeSpanConfig));
-            }
-            return spanEl;
-          },
-          width: '200px'
+    var timeSpanConfig = {
+      unit: tr.b.Unit.byName.timeStampInMs,
+      ownerDocument: this.ownerDocument
+    };
+    var table = this.$.content;
+    table.tableColumns = [
+      {
+        title: 'First',
+        value: function(event) {
+          if (event instanceof tr.model.ObjectSnapshot)
+            return tr.v.ui.createScalarSpan(event.ts, timeSpanConfig);
+
+          var spanEl = document.createElement('span');
+          Polymer.dom(spanEl).appendChild(tr.v.ui.createScalarSpan(
+              event.creationTs, timeSpanConfig));
+          Polymer.dom(spanEl).appendChild(tr.ui.b.createSpan({
+              textContent: '-',
+              marginLeft: '4px',
+              marginRight: '4px'
+          }));
+          if (event.deletionTs !== Number.MAX_VALUE) {
+            Polymer.dom(spanEl).appendChild(tr.v.ui.createScalarSpan(
+                event.deletionTs, timeSpanConfig));
+          }
+          return spanEl;
         },
-        {
-          title: 'Second',
-          value: function(event) {
-            var linkEl = document.createElement('tr-ui-a-analysis-link');
-            linkEl.setSelectionAndContent(function() {
-                return new tr.model.EventSet(event);
-            }, event.userFriendlyName);
-            return linkEl;
-          },
-          width: '100%'
-        }
-      ];
-      table.tableRows = objectEvents;
-      table.rebuild();
-    }
-  });
-  </script>
-</polymer-element>
+        width: '200px'
+      },
+      {
+        title: 'Second',
+        value: function(event) {
+          var linkEl = document.createElement('tr-ui-a-analysis-link');
+          linkEl.setSelectionAndContent(function() {
+              return new tr.model.EventSet(event);
+          }, event.userFriendlyName);
+          return linkEl;
+        },
+        width: '100%'
+      }
+    ];
+    table.tableRows = objectEvents;
+    table.rebuild();
+  }
+});
+
+tr.ui.analysis.AnalysisSubView.register(
+    'tr-ui-a-multi-object-sub-view',
+    tr.model.ObjectInstance,
+    {
+      multi: true,
+      title: 'Object Instances',
+    });
+tr.ui.analysis.AnalysisSubView.register(
+    'tr-ui-a-multi-object-sub-view',
+    tr.model.ObjectSnapshot,
+    {
+      multi: true,
+      title: 'Object Snapshots',
+    });
+</script>