1<!DOCTYPE html>
2<!--
3Copyright 2015 The Chromium Authors. All rights reserved.
4Use of this source code is governed by a BSD-style license that can be
5found in the LICENSE file.
6-->
7
8<link rel="import" href="/tracing/ui/extras/drive/comment_element.html">
9
10<polymer-element name='tr-ui-e-drive-comments-side-panel'
11    extends='tr-ui-side-panel'>
12  <template>
13    <style>
14    :host {
15      flex-direction: column;
16      display: flex;
17      width: 290px;
18      overflow-y: scroll;
19      overflow-x: hidden;
20      background-color: #eee;
21    }
22    toolbar {
23      flex: 0 0 auto;
24      border-bottom: 1px solid black;
25      display: flex;
26    }
27    result-area {
28      flex: 1 1 auto;
29      display: block;
30      min-height: 0;
31      padding: 4px;
32    }
33    #comments-textarea-container {
34      display: flex;
35    }
36    #commentinput {
37      width: 100%;
38    }
39    </style>
40
41    <toolbar id='toolbar'></toolbar>
42    <result-area id='result_area'>
43      <template repeat="{{ comment in comments_ }}">
44        <tr-ui-e-drive-comment-element comment="{{comment}}"
45                         on-click="{{commentClick}}">
46        </tr-ui-e-drive-comment-element>
47      </template>
48      <div id="comments-textarea-container">
49        <textarea id="commentinput" on-focus='{{textAreaFocus}}'
50            on-blur='{{textAreaBlur}}'
51            on-keypress="{{textareaKeypress}}"></textarea>
52      </div>
53    </result-area>
54  </template>
55
56  <script>
57  'use strict';
58
59  Polymer({
60    ready: function() {
61      this.rangeOfInterest_ = new tr.b.Range();
62      this.selection_ = undefined;
63      this.comments_ = [];
64      this.annotationFromComment_ = undefined;
65      this.textAreaFocused = false;
66    },
67
68    setCommentProvider: function(commentProvider) {
69      this.commentProvider_ = commentProvider;
70    },
71
72    attached: function() {
73      if (this.commentProvider_ === undefined) {
74        this.commentProvider_ =
75            new tr.ui.e.drive.analysis.DefaultCommentProvider();
76      }
77      this.commentProvider_.attachToElement(this);
78    },
79
80    detached: function() {
81      this.commentProvider_.detachFromElement();
82    },
83
84    commentClick: function(event, detail, sender) {
85      var anchor = sender.comment.anchor;
86      if (anchor === undefined)
87        return;
88
89      var uiState =
90          JSON.parse(anchor).a[0][tr.ui.e.drive.constants.ANCHOR_NAME];
91
92      var myEvent = new CustomEvent('navigateToUIState', { detail:
93          new tr.ui.b.UIState(new tr.model.Location(uiState.location.xWorld,
94                                                uiState.location.yComponents),
95                                                uiState.scaleX)
96          });
97      document.dispatchEvent(myEvent);
98
99      if (this.annotationFromComment_)
100        this.model.removeAnnotation(this.annotationFromComment_);
101      var loc = new tr.model.Location(uiState.location.xWorld,
102                                  uiState.location.yComponents);
103
104      var text = sender.comment.author.displayName + ': ' +
105          sender.comment.content;
106      this.annotationFromComment_ =
107          new tr.model.CommentBoxAnnotation(loc, text);
108      this.model.addAnnotation(this.annotationFromComment_);
109    },
110
111    textareaKeypress: function(event, detail, sender) {
112      // Check for return key.
113      if (event.keyCode === 13 && !event.ctrlKey) {
114        this.commentProvider_.addComment(this.$.commentinput.value);
115        this.$.commentinput.value = '';
116      }
117      event.stopPropagation();
118      return true;
119    },
120
121    textAreaFocus: function(event) {
122      this.textAreaFocused = true;
123    },
124
125    textAreaBlur: function(event) {
126      this.textAreaFocused = false;
127    },
128
129    get rangeOfInterest() {
130      return this.rangeOfInterest_;
131    },
132
133    set rangeOfInterest(rangeOfInterest) {
134      this.rangeOfInterest_ = rangeOfInterest;
135      this.updateContents_();
136    },
137
138    get currentRangeOfInterest() {
139      if (this.rangeOfInterest_.isEmpty)
140        return this.model_.bounds;
141      else
142        return this.rangeOfInterest_;
143    },
144
145    get model() {
146      return this.model_;
147    },
148
149    set model(model) {
150      this.model_ = model;
151      this.updateContents_();
152    },
153
154    set selection(selection) {
155      this.selection_ = selection;
156    },
157
158    updateContents_: function() {
159      this.commentProvider_.updateComments();
160    },
161
162    supportsModel: function(m) {
163      if (m === undefined) {
164        return {
165          supported: false,
166          reason: 'Unknown tracing model'
167        };
168      }
169      return {
170        supported: true
171      };
172    },
173
174    get textLabel() {
175      return 'Comments';
176    }
177  });
178
179  </script>
180</polymer-element>
181