1// Copyright (c) 2013 The Chromium Authors. All rights reserved.
2// Use of this source code is governed by a BSD-style license that can be
3// found in the LICENSE file.
4
5'use strict';
6
7/**
8 * @fileoverview LayerViewer coordinates graphical and analysis views of layers.
9 */
10
11base.requireStylesheet('cc.layer_viewer');
12
13base.require('base.raf');
14base.require('base.settings');
15base.require('cc.constants');
16base.require('cc.layer_tree_quad_stack_viewer');
17base.require('tracing.analysis.util');
18base.require('ui.drag_handle');
19
20base.exportTo('cc', function() {
21  var constants = cc.constants;
22
23  /**
24   * @constructor
25   */
26  var LayerViewer = ui.define('layer-viewer');
27
28  LayerViewer.prototype = {
29    __proto__: HTMLUnknownElement.prototype,
30
31    decorate: function() {
32      this.layerTreeQuadStackViewer_ = new cc.LayerTreeQuadStackViewer();
33      this.dragBar_ = new ui.DragHandle();
34      this.analysisEl_ = document.createElement('layer-viewer-analysis');
35
36      this.dragBar_.target = this.analysisEl_;
37
38      this.appendChild(this.layerTreeQuadStackViewer_);
39      this.appendChild(this.dragBar_);
40      this.appendChild(this.analysisEl_);
41
42      this.layerTreeQuadStackViewer_.addEventListener('selectionChange',
43          this.layerTreeQuadStackViewerSelectionChanged_.bind(this));
44    },
45
46    get layerTreeImpl() {
47      return this.layerTreeQuadStackViewer_.layerTreeImpl;
48    },
49
50    set layerTreeImpl(newValue) {
51      return this.layerTreeQuadStackViewer_.layerTreeImpl = newValue;
52    },
53
54    get selection() {
55      return this.layerTreeQuadStackViewer_.selection;
56    },
57
58    set selection(newValue) {
59      this.layerTreeQuadStackViewer_.selection = newValue;
60    },
61
62    layerTreeQuadStackViewerSelectionChanged_: function(event) {
63      var selection = event.newValue;
64      if (selection) {
65        this.dragBar_.style.display = '';
66        this.analysisEl_.style.display = '';
67        this.analysisEl_.textContent = '';
68        var analysis = selection.createAnalysis();
69        this.analysisEl_.appendChild(analysis);
70      } else {
71        this.dragBar_.style.display = 'none';
72        this.analysisEl_.style.display = 'none';
73        var analysis = this.analysisEl_.firstChild;
74        if (analysis)
75          this.analysisEl_.removeChild(analysis);
76        this.layerTreeQuadStackViewer_.style.height =
77            window.getComputedStyle(this).height;
78      }
79    }
80  };
81  return {
82    LayerViewer: LayerViewer
83  };
84});
85