<!DOCTYPE html>
<!--
Copyright (c) 2013 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->

<link rel="stylesheet"
      href="/ui/extras/chrome/cc/layer_tree_host_impl_view.css">

<link rel="import" href="/extras/chrome/cc/layer_tree_host_impl.html">
<link rel="import" href="/ui/extras/chrome/cc/layer_picker.html">
<link rel="import" href="/ui/extras/chrome/cc/layer_view.html">
<link rel="import" href="/extras/chrome/cc/tile.html">
<link rel="import" href="/ui/analysis/object_snapshot_view.html">
<link rel="import" href="/ui/base/drag_handle.html">

<script>
'use strict';

tr.exportTo('tr.ui.e.chrome.cc', function() {
  /*
   * Displays a LayerTreeHostImpl snapshot in a human readable form.
   * @constructor
   */
  var LayerTreeHostImplSnapshotView = tr.ui.b.define(
      'tr-ui-e-chrome-cc-layer-tree-host-impl-snapshot-view',
      tr.ui.analysis.ObjectSnapshotView);

  LayerTreeHostImplSnapshotView.prototype = {
    __proto__: tr.ui.analysis.ObjectSnapshotView.prototype,

    decorate: function() {
      this.classList.add('tr-ui-e-chrome-cc-lthi-s-view');

      this.selection_ = undefined;

      this.layerPicker_ = new tr.ui.e.chrome.cc.LayerPicker();
      this.layerPicker_.addEventListener(
          'selection-change',
          this.onLayerPickerSelectionChanged_.bind(this));

      this.layerView_ = new tr.ui.e.chrome.cc.LayerView();
      this.layerView_.addEventListener(
          'selection-change',
          this.onLayerViewSelectionChanged_.bind(this));
      this.dragHandle_ = new tr.ui.b.DragHandle();
      this.dragHandle_.horizontal = false;
      this.dragHandle_.target = this.layerView_;

      this.appendChild(this.layerPicker_);
      this.appendChild(this.dragHandle_);
      this.appendChild(this.layerView_);

      // Make sure we have the current values from layerView_ and layerPicker_,
      // since those might have been created before we added the listener.
      this.onLayerViewSelectionChanged_();
      this.onLayerPickerSelectionChanged_();

    },

    get objectSnapshot() {
      return this.objectSnapshot_;
    },

    set objectSnapshot(objectSnapshot) {
      this.objectSnapshot_ = objectSnapshot;

      var lthi = this.objectSnapshot;
      var layerTreeImpl;
      if (lthi)
        layerTreeImpl = lthi.getTree(this.layerPicker_.whichTree);

      this.layerPicker_.lthiSnapshot = lthi;
      this.layerView_.layerTreeImpl = layerTreeImpl;
      this.layerView_.regenerateContent();

      if (!this.selection_)
        return;
      this.selection = this.selection_.findEquivalent(lthi);
    },

    get selection() {
      return this.selection_;
    },

    set selection(selection) {
      if (this.selection_ == selection)
        return;
      this.selection_ = selection;
      this.layerPicker_.selection = selection;
      this.layerView_.selection = selection;
      tr.b.dispatchSimpleEvent(this, 'cc-selection-change');
    },

    onLayerPickerSelectionChanged_: function() {
      this.selection_ = this.layerPicker_.selection;
      this.layerView_.selection = this.selection;
      this.layerView_.layerTreeImpl = this.layerPicker_.layerTreeImpl;
      this.layerView_.isRenderPassQuads = this.layerPicker_.isRenderPassQuads;
      this.layerView_.regenerateContent();
      tr.b.dispatchSimpleEvent(this, 'cc-selection-change');
    },

    onLayerViewSelectionChanged_: function() {
      this.selection_ = this.layerView_.selection;
      this.layerPicker_.selection = this.selection;
      tr.b.dispatchSimpleEvent(this, 'cc-selection-change');
    },

    get extraHighlightsByLayerId() {
      return this.layerView_.extraHighlightsByLayerId;
    },

    set extraHighlightsByLayerId(extraHighlightsByLayerId) {
      this.layerView_.extraHighlightsByLayerId = extraHighlightsByLayerId;
    }
  };

  tr.ui.analysis.ObjectSnapshotView.register(
      LayerTreeHostImplSnapshotView, {typeName: 'cc::LayerTreeHostImpl'});

  return {
    LayerTreeHostImplSnapshotView: LayerTreeHostImplSnapshotView
  };
});
</script>