src/third_party/trace-viewer/trace_viewer/tracing/analysis/analysis_view.html

   1 <!DOCTYPE html>
   2 <!--
   3 Copyright (c) 2014 The Chromium Authors. All rights reserved.
   4 Use of this source code is governed by a BSD-style license that can be
   5 found in the LICENSE file.
   6 -->
   7
   8 <link rel="import" href="/tracing/analysis/analysis_results.html">
   9 <link rel="import" href="/tracing/analysis/analyze_counters.html">
  10 <link rel="import" href="/tracing/analysis/analyze_objects.html">
  11 <link rel="import" href="/tracing/analysis/analyze_slices.html">
  12 <link rel="import" href="/tracing/analysis/analyze_samples.html">
  13 <link rel="import" href="/tracing/analysis/default_object_view.html">
  14 <link rel="import" href="/tracing/analysis/object_instance_view.html">
  15 <link rel="import" href="/tracing/analysis/object_snapshot_view.html">
  16 <link rel="import" href="/tracing/analysis/slice_view.html">
  17 <link rel="import" href="/tracing/analysis/tab_view.html">
  18
  19 <!--
  20 @fileoverview A component used to display an analysis of a selection,
  21 using custom elements specialized for different event types.
  22 -->
  23 <polymer-element name="tracing-analysis-view"
  24     constructor="TracingAnalysisView">
  25   <template>
  26     <style>
  27       :host {
  28         background-color: white;
  29         display: flex;
  30         flex-direction: column;
  31         height: 275px;
  32         overflow: auto;
  33       }
  34
  35       :host(.tall-mode) {
  36         height: 525px;
  37       }
  38
  39       ::content > * {
  40         flex: 1 0 auto;
  41       }
  42     </style>
  43     <content></content>
  44   </template>
  45   <script>
  46   'use strict';
  47   (function() {
  48     /**
  49      * Utility function used to convert camelCase to Title Case.
  50      */
  51     function convertEventTypeToTabName(eventType) {
  52       var result = eventType.replace(/[A-Z]/g, ' $&');
  53       result = result.charAt(0).toUpperCase() + result.slice(1);
  54       return result;
  55     }
  56
  57     Polymer({
  58       ready: function() {
  59         this.currentView_ = undefined;
  60         this.currentSelection_ = undefined;
  61       },
  62
  63       set tallMode(value) {
  64         if (value)
  65           this.classList.add('tall-mode');
  66         else
  67           this.classList.remove('tall-mode');
  68       },
  69
  70       get tallMode() {
  71         return this.classList.contains('tall-mode');
  72       },
  73
  74       get currentView() {
  75         return this.currentView_;
  76       },
  77
  78       get selection() {
  79         return this.currentSelection_;
  80       },
  81
  82       set selection(selection) {
  83         this.processSelection_(selection);
  84       },
  85
  86       processSelection_: function(selection) {
  87         this.tallMode = false;
  88         this.textContent = '';
  89
  90         var eventsByType = selection.getEventsOrganizedByType(true);
  91
  92         var categoriesToAnalyze = tvcm.dictionaryLength(eventsByType)
  93
  94         var subViewsParent;
  95         var usingTabs = false;
  96         // If we have to analyze more than one category, we use a tab view
  97         // for displaying them.
  98         if (categoriesToAnalyze > 1) {
  99           usingTabs = true;
 100           subViewsParent = new TracingAnalysisTabView();
 101           this.appendChild(subViewsParent);
 102         } else {
 103           subViewsParent = this;
 104         }
 105
 106         for (var eventType in eventsByType) {
 107           var currentEvents = eventsByType[eventType];
 108           var subView = undefined;
 109
 110           subView = this.findSubViewForEventsOfSingleType_(
 111                         eventsByType[eventType]);
 112           subViewsParent.appendChild(subView);
 113           // There are some subViews that get configured by 'modelEvent'
 114           // instead of selection. We need to move them off of this craziness.
 115           // But, cc.LayerTreeHostView has a concept called selection as
 116           // well, but its selection is a cc.Selection. So the properties
 117           // collide, in a scary way.
 118           if (subView.__lookupSetter__('modelEvent')) {
 119             if (eventsByType[eventType].length != 1)
 120               throw new Error('modelEvent-configuration only supported with ' +
 121                 ' selections of length=1');
 122             subView.modelEvent = eventsByType[eventType][0];
 123           } else {
 124             subView.selection = eventsByType[eventType];
 125           }
 126
 127           this.tallMode = this.tallMode || subView.requiresTallView;
 128           if (usingTabs) {
 129             var tabLabel = convertEventTypeToTabName(eventType);
 130             subView.tabLabel = tabLabel;
 131             // Some subViews are not actually built off analysis-sub-view,
 132             // thus they don't all implement the tabLabel property.
 133             // This is here in place as a workaround until they are converted
 134             // to sub-views.
 135             if (!subView.hasAttribute('tab-label'))
 136               subView.setAttribute('tab-label', tabLabel);
 137           }
 138         }
 139
 140         if (usingTabs) {
 141           subViewsParent.selectedTab = subViewsParent.firstChild;
 142           this.currentView_ = subViewsParent
 143         } else {
 144           this.currentView_ = this.firstChild;
 145         }
 146       },
 147
 148       findSubViewForEventsOfSingleType_: function(selection) {
 149         var supportedSubViewTypes = tracing.getAnalysisSubViewTypes().filter(
 150             function(subViewTypes) {
 151               return subViewTypes.supportsSelectionPredicate(selection);
 152             });
 153
 154         if (supportedSubViewTypes.length == 0)
 155           throw new Error('Received events that could not be analyzed!');
 156
 157         // Pick the most important registered type handler.
 158         supportedSubViewTypes.sort(function(x,y) {
 159           return y.importance - x.importance;
 160         });
 161         var subViewType = supportedSubViewTypes[0];
 162
 163         if (subViewType.options.passSelectionToConstructor)
 164           return new subViewType.viewConstructor(selection);
 165         else
 166           return new subViewType.viewConstructor();
 167       }
 168     });
 169   })();
 170   </script>
 171 </polymer-element>