PolyGerrit: Migrate from customStyle to updateStyles

This is a preperation change to upgrade to polymer 2.x.

See [1]

Also use getComputedStyleValue where possible to get the value
customStyle also had the ability to get the value, but in polymer 2.x
the only way possible is to use getComputedStyleValue.

Also when updating to polymer 2.x we need to update getComputedStyleValue
syntax to match [1] which is not possible in polymer 1.x.

[1] https://www.polymer-project.org/2.0/docs/upgrade#use-updatestyles-instead-of-customstyle

Change-Id: I7b4139f7eeddb4d7d5da3f518e950a8fd0e2f4f7

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

diff --git a/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.js b/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.js
index ffabb37..60c8ec0 100644
--- a/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.js
+++ b/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.js
@@ -1107,9 +1107,9 @@
     },
 
     _computeRelatedChangesClass(collapsed, loading) {
-      // TODO(beckysiegel) figure out how to check for customstyle in Polymer2,
-      // since customStyle was removed.
-      if (!loading && !this.customStyle['--relation-chain-max-height']) {
+      // TODO update to polymer 2.x syntax
+      if (!loading &&
+          !this.getComputedStyleValue('--relation-chain-max-height')) {
         this._updateRelatedChangeMaxHeight();
       }
       return collapsed ? 'collapsed' : '';

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

diff --git a/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view_test.html b/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view_test.html
index a455c18..1a97c5c 100644
--- a/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view_test.html
+++ b/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view_test.html
@@ -66,6 +66,12 @@
       });
     });
 
+    getCustomCssValue = cssParam => {
+      // TODO: Update to be compatible with 2.x when we upgrade from
+      // 1.x to 2.x.
+      return element.getComputedStyleValue(cssParam);
+    };
+
     suite('keyboard shortcuts', () => {
       test('S should toggle the CL star', () => {
         const starStub = sandbox.stub(element.$.changeStar, 'toggleStar');
@@ -1067,10 +1073,10 @@
         // 20 (adjusted height) - 8 (remainder) = 12 (max height to set).
 
         element._updateRelatedChangeMaxHeight();
-        assert.equal(element.customStyle['--relation-chain-max-height'],
+        assert.equal(getCustomCssValue('--relation-chain-max-height'),
             '12px');
-        assert.equal(element.customStyle['--related-change-btn-top-padding'],
-            undefined);
+        assert.equal(getCustomCssValue('--related-change-btn-top-padding'),
+            '');
       });
 
       test('_updateRelatedChangeMaxHeight with commit toggle', () => {
@@ -1083,9 +1089,9 @@
         // 50 (existing height)  - 2 (remainder) = 48 (max height to set).
 
         element._updateRelatedChangeMaxHeight();
-        assert.equal(element.customStyle['--relation-chain-max-height'],
+        assert.equal(getCustomCssValue('--relation-chain-max-height'),
             '48px');
-        assert.equal(element.customStyle['--related-change-btn-top-padding'],
+        assert.equal(getCustomCssValue('--related-change-btn-top-padding'),
             '2px');
       });
 
@@ -1100,7 +1106,7 @@
         // 400 (new height) % 12 (line height) = 4 (remainder).
         // 400 (new height) - 4 (remainder) = 396.
 
-        assert.equal(element.customStyle['--relation-chain-max-height'],
+        assert.equal(getCustomCssValue('--relation-chain-max-height'),
             '396px');
       });
 
@@ -1119,7 +1125,7 @@
         // 100 (new height) % 12 (line height) = 4 (remainder).
         // 100 (new height) - 4 (remainder) = 96.
         element._updateRelatedChangeMaxHeight();
-        assert.equal(element.customStyle['--relation-chain-max-height'],
+        assert.equal(getCustomCssValue('--relation-chain-max-height'),
             '96px');
       });