tools/cc-frame-viewer/src/model_view.js

   1 /* Copyright (c) 2012 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 base.require('ui');
   8 base.require('model');
   9 base.require('ui.drag_handle');
  10 base.require('ui.list_view');
  11 base.require('analysis_view');
  12 base.require('lthi_view');
  13 base.requireStylesheet('model_view');
  14
  15 base.exportTo('ccfv', function() {
  16   var ModelView = ui.define('x-model-view');
  17
  18   ModelView.prototype = {
  19     __proto__: HTMLUnknownElement.prototype,
  20
  21     decorate: function() {
  22       this.model_ = undefined;
  23
  24       this.lthiHistorySelector_ = document.createElement('select');
  25       this.lthiHistorySelector_.addEventListener(
  26         'change', this.onLTHISelectorChanged_);
  27
  28       this.lthiView_ = new ccfv.LTHIView();
  29       this.lthiView_.addEventListener(
  30         'selection-changed',
  31         this.onLTHIViewSelectionChanged_.bind(this));
  32
  33       this.lthiList_ = new ui.ListView();
  34       this.lthiList_.classList.add('lthi-list');
  35       this.lthiList_.addEventListener(
  36         'selection-changed',
  37         this.updateLTHIView_.bind(this));
  38
  39       this.analysisView_ = new ccfv.AnalysisView();
  40
  41       var lthiPicker = document.createElement('div');
  42       lthiPicker.className = 'lthi-picker';
  43       lthiPicker.appendChild(this.lthiHistorySelector_);
  44
  45       var lthiAndAnalysisView = document.createElement('div');
  46       lthiAndAnalysisView.className = 'lthi-and-analysis-view';
  47       lthiAndAnalysisView.appendChild(this.lthiView_);
  48       var dragHandle = new ui.DragHandle();
  49       dragHandle.target = this.analysisView_;
  50       lthiAndAnalysisView.appendChild(dragHandle);
  51       lthiAndAnalysisView.appendChild(this.analysisView_);
  52
  53       var lthiView = document.createElement('div');
  54       lthiView.className = 'lthi-view';
  55       lthiView.appendChild(this.lthiList_);
  56       lthiView.appendChild(lthiAndAnalysisView);
  57
  58       this.appendChild(lthiPicker);
  59       this.appendChild(lthiView);
  60     },
  61
  62     get model() {
  63       return this.model_;
  64     },
  65
  66     set model(model) {
  67       this.model_ = model;
  68       this.updateLTHISelector_();
  69     },
  70
  71     updateLTHISelector_: function() {
  72       this.lthiHistorySelector_.textContent = '';
  73       this.lthiList_.textContent = '';
  74       if (!this.model_)
  75         return this.updateLTHIList_();
  76
  77       var lthiHistories = base.dictionaryValues(this.model_.lthiHistories);
  78       lthiHistories.forEach(function(lthiHistory) {
  79         var option = document.createElement('option');
  80         option.textContent = 'LTHI ' + lthiHistory.id;
  81         option.lthiHistory = lthiHistory;
  82         this.lthiHistorySelector_.appendChild(option);
  83       }.bind(this));
  84       this.updateLTHIList_();
  85     },
  86
  87     onLTHISelectorChanged_: function() {
  88       this.updateLTHIList_();
  89     },
  90
  91     get selectedLTHI() {
  92       var el = this.lthiList_.selectedElement;
  93       if (!el)
  94         return undefined;
  95       return el.lthi;
  96     },
  97
  98     updateLTHIList_: function() {
  99       var lthiHistory =
 100         this.lthiHistorySelector_.selectedOptions[0].lthiHistory;
 101       this.lthiList_.textContent = '';
 102       lthiHistory.lthiSnapshots.forEach(function(lthi, index) {
 103         var lthiItem = document.createElement('div');
 104         lthiItem.lthi = lthi;
 105         this.lthiList_.appendChild(lthiItem);
 106
 107         lthiItem.selected = index == 0;
 108         lthiItem.textContent = 'Frame ' + lthi.snapshotNumber;
 109       }.bind(this));
 110       this.updateLTHIView_();
 111     },
 112
 113     updateLTHIView_: function() {
 114       if (this.lthiView_.lthi != this.selectedLTHI)
 115         this.lthiView_.lthi = this.selectedLTHI;
 116     },
 117
 118     onLTHIViewSelectionChanged_: function(e) {
 119       this.analysisView_.selection = e.selection;
 120     }
 121   };
 122
 123   return {
 124     ModelView: ModelView,
 125   }
 126 });
 127