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="/tvcm/raf.html">
  14 <link rel="import" href="/tvcm/settings.html">
  15 <link rel="import" href="/tracing/analysis/util.html">
  16 <link rel="import" href="/tvcm/ui/drag_handle.html">
  17
  18 <script>
  19 'use strict';
  20
  21 /**
  22  * @fileoverview LayerView coordinates graphical and analysis views of layers.
  23  */
  24
  25 tvcm.exportTo('cc', function() {
  26   var constants = cc.constants;
  27
  28   /**
  29    * @constructor
  30    */
  31   var LayerView = tvcm.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 tvcm.ui.DragHandle();
  39       this.analysisEl_ = document.createElement('layer-view-analysis');
  40
  41       this.dragBar_.target = this.analysisEl_;
  42
  43       this.appendChild(this.layerTreeQuadStackView_);
  44       this.appendChild(this.dragBar_);
  45       this.appendChild(this.analysisEl_);
  46
  47       this.layerTreeQuadStackView_.addEventListener('selectionChange',
  48           function() {
  49             this.layerTreeQuadStackViewSelectionChanged_();
  50           }.bind(this));
  51       this.layerTreeQuadStackViewSelectionChanged_();
  52     },
  53
  54     get layerTreeImpl() {
  55       return this.layerTreeQuadStackView_.layerTreeImpl;
  56     },
  57
  58     set layerTreeImpl(newValue) {
  59       return this.layerTreeQuadStackView_.layerTreeImpl = newValue;
  60     },
  61
  62     set isRenderPassQuads(newValue) {
  63       return this.layerTreeQuadStackView_.isRenderPassQuads = newValue;
  64     },
  65
  66     get selection() {
  67       return this.layerTreeQuadStackView_.selection;
  68     },
  69
  70     set selection(newValue) {
  71       this.layerTreeQuadStackView_.selection = newValue;
  72     },
  73
  74     regenerateContent: function() {
  75       this.layerTreeQuadStackView_.regenerateContent();
  76     },
  77
  78     layerTreeQuadStackViewSelectionChanged_: function() {
  79       var selection = this.layerTreeQuadStackView_.selection;
  80       if (selection) {
  81         this.dragBar_.style.display = '';
  82         this.analysisEl_.style.display = '';
  83         this.analysisEl_.textContent = '';
  84
  85         var layer = selection.layer;
  86         if (layer && layer.args && layer.args.pictures) {
  87           this.analysisEl_.appendChild(
  88               this.createPictureBtn_(layer.args.pictures));
  89         }
  90
  91         var analysis = selection.createAnalysis();
  92         this.analysisEl_.appendChild(analysis);
  93       } else {
  94         this.dragBar_.style.display = 'none';
  95         this.analysisEl_.style.display = 'none';
  96         var analysis = this.analysisEl_.firstChild;
  97         if (analysis)
  98           this.analysisEl_.removeChild(analysis);
  99         this.layerTreeQuadStackView_.style.height =
 100             window.getComputedStyle(this).height;
 101       }
 102     },
 103
 104     createPictureBtn_: function(pictures) {
 105       if (!(pictures instanceof Array))
 106         pictures = [pictures];
 107
 108       var link = new tracing.analysis.AnalysisLink();
 109       link.innerText = 'View in Picture Debugger';
 110       link.selectionGenerator = function() {
 111         var layeredPicture = new cc.LayeredPicture(pictures);
 112         var snapshot = new cc.PictureSnapshot(layeredPicture);
 113         snapshot.picture = layeredPicture;
 114
 115         var selection = new tracing.Selection();
 116         selection.push(snapshot);
 117         return selection;
 118       };
 119       return link;
 120     }
 121   };
 122
 123   return {
 124     LayerView: LayerView
 125   };
 126 });
 127 </script>