src/third_party/trace-viewer/trace_viewer/cc/layer_view.html

   1 <!DOCTYPE html>
   2 <!--
   3 Copyright (c) 2013 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="stylesheet" href="/cc/layer_view.css">
   9
  10 <link rel="import" href="/cc/constants.html">
  11 <link rel="import" href="/cc/layer_tree_quad_stack_view.html">
  12 <link rel="import" href="/cc/picture.html">
  13 <link rel="import" href="/base/raf.html">
  14 <link rel="import" href="/base/settings.html">
  15 <link rel="import" href="/base/ui/drag_handle.html">
  16 <link rel="import" href="/tracing/analysis/util.html">
  17
  18 <script>
  19 'use strict';
  20
  21 /**
  22  * @fileoverview LayerView coordinates graphical and analysis views of layers.
  23  */
  24
  25 tv.exportTo('cc', function() {
  26   var constants = cc.constants;
  27
  28   /**
  29    * @constructor
  30    */
  31   var LayerView = tv.ui.define('layer-view');
  32
  33   LayerView.prototype = {
  34     __proto__: HTMLUnknownElement.prototype,
  35
  36     decorate: function() {
  37       this.layerTreeQuadStackView_ = new cc.LayerTreeQuadStackView();
  38       this.dragBar_ = new tv.ui.DragHandle();
  39       this.analysisEl_ = document.createElement('layer-view-analysis');
  40       this.analysisEl_.addEventListener('requestSelectionChange',
  41           this.onRequestSelectionChangeFromAnalysisEl_.bind(this));
  42
  43       this.dragBar_.target = this.analysisEl_;
  44
  45       this.appendChild(this.layerTreeQuadStackView_);
  46       this.appendChild(this.dragBar_);
  47       this.appendChild(this.analysisEl_);
  48
  49       this.layerTreeQuadStackView_.addEventListener('selection-change',
  50           function() {
  51             this.layerTreeQuadStackViewSelectionChanged_();
  52           }.bind(this));
  53       this.layerTreeQuadStackViewSelectionChanged_();
  54     },
  55
  56     get layerTreeImpl() {
  57       return this.layerTreeQuadStackView_.layerTreeImpl;
  58     },
  59
  60     set layerTreeImpl(newValue) {
  61       return this.layerTreeQuadStackView_.layerTreeImpl = newValue;
  62     },
  63
  64     set isRenderPassQuads(newValue) {
  65       return this.layerTreeQuadStackView_.isRenderPassQuads = newValue;
  66     },
  67
  68     get selection() {
  69       return this.layerTreeQuadStackView_.selection;
  70     },
  71
  72     set selection(newValue) {
  73       this.layerTreeQuadStackView_.selection = newValue;
  74     },
  75
  76     regenerateContent: function() {
  77       this.layerTreeQuadStackView_.regenerateContent();
  78     },
  79
  80     layerTreeQuadStackViewSelectionChanged_: function() {
  81       var selection = this.layerTreeQuadStackView_.selection;
  82       if (selection) {
  83         this.dragBar_.style.display = '';
  84         this.analysisEl_.style.display = '';
  85         this.analysisEl_.textContent = '';
  86
  87         var layer = selection.layer;
  88         if (layer && layer.args && layer.args.pictures) {
  89           this.analysisEl_.appendChild(
  90               this.createPictureBtn_(layer.args.pictures));
  91         }
  92
  93         var analysis = selection.createAnalysis();
  94         this.analysisEl_.appendChild(analysis);
  95       } else {
  96         this.dragBar_.style.display = 'none';
  97         this.analysisEl_.style.display = 'none';
  98         var analysis = this.analysisEl_.firstChild;
  99         if (analysis)
 100           this.analysisEl_.removeChild(analysis);
 101         this.layerTreeQuadStackView_.style.height =
 102             window.getComputedStyle(this).height;
 103       }
 104       tv.dispatchSimpleEvent(this, 'selection-change');
 105     },
 106
 107     createPictureBtn_: function(pictures) {
 108       if (!(pictures instanceof Array))
 109         pictures = [pictures];
 110
 111       var link = new tracing.analysis.AnalysisLink();
 112       link.innerText = 'View in Picture Debugger';
 113       link.selectionGenerator = function() {
 114         var layeredPicture = new cc.LayeredPicture(pictures);
 115         var snapshot = new cc.PictureSnapshot(layeredPicture);
 116         snapshot.picture = layeredPicture;
 117
 118         var selection = new tracing.Selection();
 119         selection.push(snapshot);
 120         return selection;
 121       };
 122       return link;
 123     },
 124
 125     onRequestSelectionChangeFromAnalysisEl_: function(e) {
 126       if (!(e.selection instanceof cc.Selection))
 127         return;
 128
 129       e.stopPropagation();
 130       this.selection = e.selection;
 131     },
 132
 133     get extraHighlightsByLayerId() {
 134       return this.layerTreeQuadStackView_.extraHighlightsByLayerId;
 135     },
 136
 137     set extraHighlightsByLayerId(extraHighlightsByLayerId) {
 138       this.layerTreeQuadStackView_.extraHighlightsByLayerId =
 139           extraHighlightsByLayerId;
 140     }
 141   };
 142
 143   return {
 144     LayerView: LayerView
 145   };
 146 });
 147 </script>