Ranged highlights: initial commit

- Initial commit: structure, 'enabled' property controls sample mouseDown handler. - Minimal integration: isRangeSelected - Minimal test. Change-Id: I963ac7b158d57a1c24ee302d99eb6af26b0aeeeb
2016-06-10 12:47:57 -07:00
parent 2860362e9d
commit ab1b211d80
6 changed files with 191 additions and 8 deletions
--- a/polygerrit-ui/app/elements/diff/gr-diff-highlight/gr-diff-highlight.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff-highlight/gr-diff-highlight.html
@@ -0,0 +1,40 @@
+<!--
+Copyright (C) 2016 The Android Open Source Project
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<link rel="import" href="../../../bower_components/polymer/polymer.html">
+
+<link rel="import" href="../gr-selection-action-box/gr-selection-action-box.html">
+
+<dom-module id="gr-diff-highlight">
+  <template>
+    <style>
+      :host {
+        position: relative;
+      }
+      .contentWrapper ::content .range {
+        background-color: #ffd500 !important;
+        display: inline;
+      }
+      .contentWrapper ::content .rangeHighlight {
+        background-color: #ff0 !important;
+        display: inline;
+      }
+    </style>
+    <div class="contentWrapper">
+      <content></content>
+    </div>
+  </template>
+  <script src="gr-diff-highlight.js"></script>
+</dom-module>
--- a/polygerrit-ui/app/elements/diff/gr-diff-highlight/gr-diff-highlight.js
+++ b/polygerrit-ui/app/elements/diff/gr-diff-highlight/gr-diff-highlight.js
@@ -0,0 +1,80 @@
+// Copyright (C) 2016 The Android Open Source Project
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+(function() {
+  'use strict';
+
+  Polymer({
+    is: 'gr-diff-highlight',
+
+    properties: {
+      comments: Object,
+      enabled: {
+        type: Boolean,
+        observer: '_enabledChanged',
+      },
+      loggedIn: Boolean,
+      _cachedDiffBuilder: Object,
+      _diffElement: Object,
+      _enabledListeners: {
+        type: Object,
+        value: function() {
+          return {
+            'down': '_handleDown',
+          };
+        },
+      },
+    },
+
+    get diffBuilder() {
+      if (!this._cachedDiffBuilder) {
+        this._cachedDiffBuilder =
+            Polymer.dom(this).querySelector('gr-diff-builder');
+      }
+      return this._cachedDiffBuilder;
+    },
+
+    get diffElement() {
+      if (!this._diffElement) {
+        this._diffElement = Polymer.dom(this).querySelector('#diffTable');
+      }
+      return this._diffElement;
+    },
+
+    detached: function() {
+      this.enabled = false;
+    },
+
+    _enabledChanged: function() {
+      for (var eventName in this._enabledListeners) {
+        var methodName = this._enabledListeners[eventName];
+        if (this.enabled) {
+          this.listen(this, eventName, methodName);
+        } else {
+          this.unlisten(this, eventName, methodName);
+        };
+      };
+    },
+
+    isRangeSelected: function() {
+      return !!this.$$('gr-selection-action-box');
+    },
+
+    _handleDown: function(e) {
+      var actionBox = this.$$('gr-selection-action-box');
+      if (actionBox && !actionBox.contains(e.target)) {
+        this._removeActionBox();
+      }
+    },
+  });
+})();
--- a/polygerrit-ui/app/elements/diff/gr-diff-highlight/gr-diff-highlight_test.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff-highlight/gr-diff-highlight_test.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<!--
+Copyright (C) 2016 The Android Open Source Project
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+<title>gr-diff-highlight</title>
+
+<script src="../../../bower_components/webcomponentsjs/webcomponents.min.js"></script>
+<script src="../../../bower_components/web-component-tester/browser.js"></script>
+
+<link rel="import" href="../../../bower_components/iron-test-helpers/iron-test-helpers.html">
+<link rel="import" href="gr-diff-highlight.html">
+
+<test-fixture id="basic">
+  <template>
+    <gr-diff-highlight></gr-diff-highlight>
+  </template>
+</test-fixture>
+
+<script>
+  suite('gr-diff-highlight', function() {
+    var element;
+
+    setup(function() {
+      element = fixture('basic');
+    });
+
+    test('handles down only when enabled ', function() {
+      sinon.stub(element, '_handleDown');
+      MockInteractions.down(element);
+      assert.isFalse(element._handleDown.called);
+      element.enabled = true;
+      MockInteractions.down(element);
+      assert.isTrue(element._handleDown.called);
+      element._handleDown.restore();
+    });
+  });
+</script>
--- a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
@@ -19,6 +19,7 @@ limitations under the License.
 <link rel="import" href="../../shared/gr-rest-api-interface/gr-rest-api-interface.html">
 <link rel="import" href="../gr-diff-builder/gr-diff-builder.html">
 <link rel="import" href="../gr-diff-comment-thread/gr-diff-comment-thread.html">
+<link rel="import" href="../gr-diff-highlight/gr-diff-highlight.html">
 <link rel="import" href="../gr-diff-selection/gr-diff-selection.html">

 <dom-module id="gr-diff">
@@ -142,14 +143,20 @@ limitations under the License.
    <div class$="[[_computeContainerClass(_loggedIn, viewMode)]]"
        on-tap="_handleTap">
      <gr-diff-selection>
-        <gr-diff-builder
-            id="diffBuilder"
-            view-mode="[[viewMode]]"
-            is-image-diff="[[isImageDiff]]"
-            base-image="[[_baseImage]]"
-            revision-image="[[_revisionImage]]">
-          <table id="diffTable"></table>
-        </gr-diff-builder>
+        <gr-diff-highlight
+            id="highlights"
+            logged-in="[[_loggedIn]]"
+            enabled="[[hasRangedComments]]"
+            comments="[[_comments]]">
+          <gr-diff-builder
+              id="diffBuilder"
+              view-mode="[[viewMode]]"
+              is-image-diff="[[isImageDiff]]"
+              base-image="[[_baseImage]]"
+              revision-image="[[_revisionImage]]">
+            <table id="diffTable"></table>
+          </gr-diff-builder>
+        </gr-diff-highlight>
      </gr-diff-selection>
    </div>
    <gr-rest-api-interface id="restAPI"></gr-rest-api-interface>
--- a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.js
+++ b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.js
@@ -131,6 +131,10 @@
      }.bind(this));
    },

+    isRangeSelected: function() {
+      return this.$.highlights.isRangeSelected();
+    },
+
    _advanceElementWithinNodeList: function(els, curIndex, direction) {
      var idx = Math.max(0, Math.min(els.length - 1, curIndex + direction));
      if (curIndex !== idx) {
--- a/polygerrit-ui/app/test/index.html
+++ b/polygerrit-ui/app/test/index.html
@@ -46,6 +46,7 @@ limitations under the License.
    'diff/gr-diff-comment-thread/gr-diff-comment-thread_test.html',
    'diff/gr-diff-comment/gr-diff-comment_test.html',
    'diff/gr-diff-cursor/gr-diff-cursor_test.html',
+    'diff/gr-diff-highlight/gr-diff-highlight_test.html',
    'diff/gr-diff-preferences/gr-diff-preferences_test.html',
    'diff/gr-diff-selection/gr-diff-selection_test.html',
    'diff/gr-diff-view/gr-diff-view_test.html',