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