OLD | NEW |
| (Empty) |
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 | |
OLD | NEW |