1 files changed, 185 insertions, 0 deletions
diff --git a/chromium/third_party/catapult/tracing/tracing/ui/extras/drive/comments_side_panel.html b/chromium/third_party/catapult/tracing/tracing/ui/extras/drive/comments_side_panel.html
new file mode 100644
index 00000000000..8f52839029d
--- /dev/null
+++ b/chromium/third_party/catapult/tracing/tracing/ui/extras/drive/comments_side_panel.html
@@ -0,0 +1,185 @@
+<!DOCTYPE html>
+<!--
+Copyright 2015 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="import" href="/tracing/ui/extras/drive/comment_element.html">
+<link rel="import" href="/tracing/ui/side_panel/side_panel_registry.html">
+
+<dom-module id='tr-ui-e-drive-comments-side-panel'>
+  <template>
+    <style>
+    :host {
+      flex-direction: column;
+      display: flex;
+      width: 290px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      background-color: #eee;
+    }
+    toolbar {
+      flex: 0 0 auto;
+      border-bottom: 1px solid black;
+      display: flex;
+    }
+    result-area {
+      flex: 1 1 auto;
+      display: block;
+      min-height: 0;
+      padding: 4px;
+    }
+    #comments-textarea-container {
+      display: flex;
+    }
+    #commentinput {
+      width: 100%;
+    }
+    </style>
+
+    <toolbar id='toolbar'></toolbar>
+    <result-area id='result_area'>
+      <template is="dom-repeat" items="{{comments_}}" repeat="{{ comment in comments_ }}">
+        <tr-ui-e-drive-comment-element comment="{{comment}}"
+                         on-click="commentClick">
+        </tr-ui-e-drive-comment-element>
+      </template>
+      <div id="comments-textarea-container">
+        <textarea id="commentinput" on-focus='textAreaFocus'
+            on-blur='textAreaBlur'
+            on-keypress="textareaKeypress"></textarea>
+      </div>
+    </result-area>
+  </template>
+</dom-module>
+<script>
+'use strict';
+
+Polymer({
+  is: 'tr-ui-e-drive-comments-side-panel',
+  behaviors: [tr.ui.behaviors.SidePanel],
+
+  ready() {
+    this.rangeOfInterest_ = new tr.b.math.Range();
+    this.selection_ = undefined;
+    this.comments_ = [];
+    this.annotationFromComment_ = undefined;
+    this.textAreaFocused = false;
+  },
+
+  setCommentProvider(commentProvider) {
+    this.commentProvider_ = commentProvider;
+  },
+
+  attached() {
+    if (this.commentProvider_ === undefined) {
+      this.commentProvider_ =
+          new tr.ui.e.drive.analysis.DefaultCommentProvider();
+    }
+    this.commentProvider_.attachToElement(this);
+  },
+
+  detached() {
+    this.commentProvider_.detachFromElement();
+  },
+
+  commentClick(event) {
+    const anchor = event.currentTarget.comment.anchor;
+    if (!anchor) return;
+
+    const uiState =
+        JSON.parse(anchor).a[0][tr.ui.e.drive.constants.ANCHOR_NAME];
+
+    const myEvent = new CustomEvent('navigateToUIState', { detail:
+        new tr.ui.b.UIState(new tr.model.Location(uiState.location.xWorld,
+            uiState.location.yComponents),
+        uiState.scaleX)
+    });
+    document.dispatchEvent(myEvent);
+
+    if (this.annotationFromComment_) {
+      this.model.removeAnnotation(this.annotationFromComment_);
+    }
+    const loc = new tr.model.Location(uiState.location.xWorld,
+        uiState.location.yComponents);
+
+    const text = sender.comment.author.displayName + ': ' +
+        sender.comment.content;
+    this.annotationFromComment_ =
+        new tr.model.CommentBoxAnnotation(loc, text);
+    this.model.addAnnotation(this.annotationFromComment_);
+  },
+
+  textareaKeypress(event) {
+    // Check for return key.
+    if (event.keyCode === 13 && !event.ctrlKey) {
+      this.commentProvider_.addComment(this.$.commentinput.value);
+      this.$.commentinput.value = '';
+    }
+    event.stopPropagation();
+    return true;
+  },
+
+  textAreaFocus(event) {
+    this.textAreaFocused = true;
+  },
+
+  textAreaBlur(event) {
+    this.textAreaFocused = false;
+  },
+
+  get rangeOfInterest() {
+    return this.rangeOfInterest_;
+  },
+
+  set rangeOfInterest(rangeOfInterest) {
+    this.rangeOfInterest_ = rangeOfInterest;
+    this.updateContents_();
+  },
+
+  get currentRangeOfInterest() {
+    if (this.rangeOfInterest_.isEmpty) {
+      return this.model_.bounds;
+    }
+    return this.rangeOfInterest_;
+  },
+
+  get model() {
+    return this.model_;
+  },
+
+  set model(model) {
+    this.model_ = model;
+    this.updateContents_();
+  },
+
+  set selection(selection) {
+    this.selection_ = selection;
+  },
+
+  updateContents_() {
+    this.commentProvider_.updateComments();
+  },
+
+  supportsModel(m) {
+    if (m === undefined) {
+      return {
+        supported: false,
+        reason: 'Unknown tracing model'
+      };
+    }
+    return {
+      supported: true
+    };
+  },
+
+  get textLabel() {
+    return 'Comments';
+  }
+});
+
+tr.ui.side_panel.SidePanelRegistry.register(function() {
+  return document.createElement('tr-ui-e-drive-comments-side-panel');
+});
+</script>