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