Show a message for whitespace only changes The message will be shown only if: 1. finished loading 2. ignore_whitespace is enabled 3. empty diff Change-Id: I67948bfa593fa6ab1dd4623e19c83008f2a10c6e

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 8176d80..cbb653b 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html

@@ -330,6 +330,12 @@
         -ms-user-select: text;
         user-select: text;
       }
+
+      .whitespace-change-only-message {
+        background-color: var(--diff-context-control-background-color);
+        border: 1px solid var(--diff-context-control-border-color);
+        text-align: center;
+      }
     </style>
     <style include="gr-syntax-theme"></style>
     <style include="gr-ranged-comment-theme"></style>
@@ -365,6 +371,13 @@
                 id="diffTable"
                 class$="[[_diffTableClass]]"
                 role="presentation"></table>
+
+            <template is="dom-if" if="[[showNoChangeMessage(loading, prefs, _diffLength)]]">
+              <div class="whitespace-change-only-message">
+                This file only contains whitespace changes.
+                Modify the whitespace setting to see the changes.
+              </div>
+            </template>
           </gr-diff-builder>
         </gr-diff-highlight>
       </gr-diff-selection>

diff --git a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.js b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.js
index c69b313..113e28f 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.js
+++ b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.js

@@ -296,6 +296,12 @@
       this._unobserveNodes();
     },
 
+    showNoChangeMessage(loading, prefs, diffLength) {
+      return !loading &&
+        prefs && prefs.ignore_whitespace !== 'IGNORE_NONE'
+        && diffLength === 0;
+    },
+
     _enableSelectionObserver(loggedIn, isAttached) {
       // Polymer 2: check for undefined
       if ([loggedIn, isAttached].some(arg => arg === undefined)) {

diff --git a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff_test.html b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff_test.html
index a86f5c7..15deaff 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff_test.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff_test.html

@@ -1007,6 +1007,100 @@
         });
       });
     });
+
+    suite('whitespace changes only message', () => {
+      const setupDiff = function(ignore_whitespace, diffContent) {
+        element = fixture('basic');
+        element.prefs = {
+          ignore_whitespace,
+          auto_hide_diff_table_header: true,
+          context: 10,
+          cursor_blink_rate: 0,
+          font_size: 12,
+          intraline_difference: true,
+          line_length: 100,
+          line_wrapping: false,
+          show_line_endings: true,
+          show_tabs: true,
+          show_whitespace_errors: true,
+          syntax_highlighting: true,
+          tab_size: 8,
+          theme: 'DEFAULT',
+        };
+
+        element.diff = {
+          intraline_status: 'OK',
+          change_type: 'MODIFIED',
+          diff_header: [
+            'diff --git a/carrot.js b/carrot.js',
+            'index 2adc47d..f9c2f2c 100644',
+            '--- a/carrot.js',
+            '+++ b/carrot.jjs',
+            'file differ',
+          ],
+          content: diffContent,
+          binary: true,
+        };
+
+        element._renderDiffTable();
+        flushAsynchronousOperations();
+      };
+
+      test('show the message if ignore_whitespace is criteria matches', () => {
+        setupDiff('IGNORE_ALL', [{skip: 100}]);
+        assert.isTrue(element.showNoChangeMessage(
+            /* loading= */ false,
+            element.prefs,
+            element._diffLength
+          ));
+      });
+
+      test('do not show the message if still loading', () => {
+        setupDiff('IGNORE_ALL', [{skip: 100}]);
+        assert.isFalse(element.showNoChangeMessage(
+            /* loading= */ true,
+            element.prefs,
+            element._diffLength
+          ));
+      });
+
+      test('do not show the message if contains valid changes', () => {
+        const content = [{
+          a: ['all work and no play make andybons a dull boy'],
+          b: ['elgoog elgoog elgoog'],
+        }, {
+          ab: [
+            'Non eram nescius, Brute, cum, quae summis ingeniis ',
+            'exquisitaque doctrina philosophi Graeco sermone tractavissent',
+          ],
+        }];
+        setupDiff('IGNORE_ALL', content);
+        assert.equal(element._diffLength, 3);
+        assert.isFalse(element.showNoChangeMessage(
+            /* loading= */ false,
+            element.prefs,
+            element._diffLength
+          ));
+      });
+
+      test('do not show message if ignore whitespace is disabled', () => {
+        const content = [{
+          a: ['all work and no play make andybons a dull boy'],
+          b: ['elgoog elgoog elgoog'],
+        }, {
+          ab: [
+            'Non eram nescius, Brute, cum, quae summis ingeniis ',
+            'exquisitaque doctrina philosophi Graeco sermone tractavissent',
+          ],
+        }];
+        setupDiff('IGNORE_NONE', content);
+        assert.isFalse(element.showNoChangeMessage(
+            /* loading= */ false,
+            element.prefs,
+            element._diffLength
+          ));
+      });
+    });
   });
 
   a11ySuite('basic');