Merge "Remove usage on customStyle and update usage on getComputedStyleValue to support polymer 2"

polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.js

@@ -1645,8 +1645,7 @@
     _computeShowRelatedToggle() {
       // Make sure the max height has been applied, since there is now content
       // to populate.
-      // TODO update to polymer 2.x syntax
+      if (!util.getComputedStyleValue('--relation-chain-max-height', this)) {
-      if (!this.getComputedStyleValue('--relation-chain-max-height')) {
         this._updateRelatedChangeMaxHeight();
       }
       // Prevents showMore from showing when click on related change, since the

polygerrit-ui/app/elements/change/gr-change-view/gr-change-view_test.html

@@ -92,9 +92,7 @@ limitations under the License.
     });
 
     getCustomCssValue = cssParam => {
-      // TODO: Update to be compatible with 2.x when we upgrade from
+      return util.getComputedStyleValue(cssParam, element);
-      // 1.x to 2.x.
-      return element.getComputedStyleValue(cssParam);
     };
 
     test('_handleMessageAnchorTap', () => {

polygerrit-ui/app/elements/diff/gr-diff/gr-diff_test.html

@@ -87,14 +87,14 @@ limitations under the License.
       element = fixture('basic');
       element.prefs = Object.assign({}, MINIMAL_PREFS, {line_wrapping: true});
       flushAsynchronousOperations();
-      assert.equal(element.customStyle['--line-limit'], '80ch');
+      assert.equal(util.getComputedStyleValue('--line-limit', element), '80ch');
     });
 
     test('line limit without line_wrapping', () => {
       element = fixture('basic');
       element.prefs = Object.assign({}, MINIMAL_PREFS, {line_wrapping: false});
       flushAsynchronousOperations();
-      assert.isNotOk(element.customStyle['--line-limit']);
+      assert.isNotOk(util.getComputedStyleValue('--line-limit', element));
     });
 
     suite('_get{PatchNum|IsParentComment}ByLineAndContent', () => {

polygerrit-ui/app/elements/gr-app-it_test.html

@@ -79,15 +79,18 @@ limitations under the License.
 
     test('applies --primary-text-color', () => {
       assert.equal(
-          element.getComputedStyleValue('--primary-text-color'), '#F00BAA');
+          util.getComputedStyleValue('--primary-text-color', element),
+          '#F00BAA');
     });
 
     test('applies --header-background-color', () => {
-      assert.equal(element.getComputedStyleValue('--header-background-color'),
+      assert.equal(
+          util.getComputedStyleValue('--header-background-color', element),
           '#F01BAA');
     });
     test('applies --footer-background-color', () => {
-      assert.equal(element.getComputedStyleValue('--footer-background-color'),
+      assert.equal(
+          util.getComputedStyleValue('--footer-background-color', element),
           '#F02BAA');
     });
   });

polygerrit-ui/app/scripts/util.js

@@ -75,5 +75,25 @@
     return wrappedPromise;
   };
 
+  /**
+   * Get computed style value.
+   *
+   * If ShadyCSS is provided, use ShadyCSS api.
+   * If `getComputedStyleValue` is provided on the elment, use it.
+   * Otherwise fallback to native method (in polymer 2).
+   *
+   */
+  util.getComputedStyleValue = (name, el) => {
+    let style;
+    if (window.ShadyCSS) {
+      style = ShadyCSS.getComputedStyleValue(el, name);
+    } else if (el.getComputedStyleValue) {
+      style = el.getComputedStyleValue(name);
+    } else {
+      style = getComputedStyle(el).getPropertyValue(name);
+    }
+    return style;
+  };
+
   window.util = util;
 })(window);