Modernize image diff layout As per UX instructions, adds a border between the images and replaces the image outline with a box shadow. Change-Id: Iec157ce7e346cab217a49d6fcee5977c1702478c

diff --git a/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder-image.js b/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder-image.js
index 27f8d39..ec78421 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder-image.js
+++ b/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder-image.js

@@ -35,6 +35,7 @@
   GrDiffBuilderImage.prototype.constructor = GrDiffBuilderImage;
 
   GrDiffBuilderImage.prototype.renderDiff = function() {
+    this._outputEl.classList.add('image-diff');
     const section = this._createElement('tbody', 'image-diff');
 
     this._emitImagePair(section);
@@ -75,10 +76,10 @@
   GrDiffBuilderImage.prototype._emitImagePair = function(section) {
     const tr = this._createElement('tr');
 
-    tr.appendChild(this._createElement('td'));
+    tr.appendChild(this._createElement('td', 'left lineNum blank'));
     tr.appendChild(this._createImageCell(this._baseImage, 'left', section));
 
-    tr.appendChild(this._createElement('td'));
+    tr.appendChild(this._createElement('td', 'right lineNum blank'));
     tr.appendChild(this._createImageCell(
         this._revisionImage, 'right', section));
 
@@ -126,7 +127,7 @@
       addNamesInLabel = true;
     }
 
-    tr.appendChild(this._createElement('td'));
+    tr.appendChild(this._createElement('td', 'left lineNum blank'));
     let td = this._createElement('td', 'left');
     let label = this._createElement('label');
     let nameSpan;
@@ -145,7 +146,7 @@
     td.appendChild(label);
     tr.appendChild(td);
 
-    tr.appendChild(this._createElement('td'));
+    tr.appendChild(this._createElement('td', 'right lineNum blank'));
     td = this._createElement('td', 'right');
     label = this._createElement('label');
     labelSpan = this._createElement('span', 'label');

diff --git a/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder.js b/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder.js
index 997e1ba..409ccf9 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder.js
+++ b/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder.js

@@ -544,7 +544,7 @@
     return result;
   };
 
-  GrDiffBuilder.prototype._createElement = function(tagName, className) {
+  GrDiffBuilder.prototype._createElement = function(tagName, classStr) {
     const el = document.createElement(tagName);
     // When Shady DOM is being used, these classes are added to account for
     // Polymer's polyfill behavior. In order to guarantee sufficient
@@ -553,8 +553,10 @@
     // automatically) are not being used for performance reasons, this is
     // done manually.
     el.classList.add('style-scope', 'gr-diff');
-    if (className) {
-      el.classList.add(className);
+    if (classStr) {
+      for (const className of classStr.split(' ')) {
+        el.classList.add(className);
+      }
     }
     return el;
   };

diff --git a/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder_test.html b/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder_test.html
index 129bff1..a00ecb3 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder_test.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder_test.html

@@ -81,6 +81,13 @@
 
     teardown(() => { sandbox.restore(); });
 
+    test('_createElement classStr applies all classes', () => {
+      const node = builder._createElement('div', 'test classes');
+      assert.isTrue(node.classList.contains('gr-diff'));
+      assert.isTrue(node.classList.contains('test'));
+      assert.isTrue(node.classList.contains('classes'));
+    });
+
     test('context control buttons', () => {
       const section = {};
       const line = {contextGroup: {lines: []}};

diff --git a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
index 718fa17..17b3187 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html

@@ -55,11 +55,15 @@
         background-color: var(--table-header-background-color);
       }
       .image-diff .gr-diff {
+        background-color: var(--table-header-background-color);
         text-align: center;
       }
       .image-diff img {
+        box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
         max-width: 50em;
-        outline: 1px solid var(--border-color);
+      }
+      .image-diff .right.lineNum {
+        border-left: 1px solid var(--border-color);
       }
       .image-diff label,
       .binary-diff label {