Home | History | Annotate | Download | only in cc 
      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 
     11 base.requireStylesheet('cc.layer_viewer');
     12 
     13 base.require('base.raf');
     14 base.require('base.settings');
     15 base.require('cc.constants');
     16 base.require('cc.layer_tree_quad_stack_viewer');
     17 base.require('tracing.analysis.util');
     18 base.require('ui.drag_handle');
     19 
     20 base.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