Remove shortcut reference from gr-diff-element gr-diff is part of Gerrit which is sometimes re-used outside of gerrit. `resolve` method will cause errors to be thrown when shortcut service (which is Gerrit specific) is not available. Instead we define the extra message in gr-diff-host and propagate it to the gr-diff-element Google-Bug-Id: b/354669376 Release-Notes: skip Change-Id: Ieb6ee9b76dda0c5fca6b98275fed32245c135f70

diff --git a/polygerrit-ui/app/elements/diff/gr-diff-host/gr-diff-host.ts b/polygerrit-ui/app/elements/diff/gr-diff-host/gr-diff-host.ts
index 00f7639..4814733 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-host/gr-diff-host.ts
+++ b/polygerrit-ui/app/elements/diff/gr-diff-host/gr-diff-host.ts

@@ -98,6 +98,8 @@
 import {keyed} from 'lit/directives/keyed.js';
 import {repeat} from 'lit/directives/repeat.js';
 import {ifDefined} from 'lit/directives/if-defined.js';
+import {Shortcut} from '../../lit/shortcut-controller';
+import {shortcutsServiceToken} from '../../../services/shortcuts/shortcuts-service';
 
 const EMPTY_BLAME = 'No blame information for this diff.';
 
@@ -227,6 +229,8 @@
   @state()
   private revisionImage?: Base64ImageFile;
 
+  private readonly getShortcutsService = resolve(this, shortcutsServiceToken);
+
   // Do not use, use diff instead through the getters and setters.
   // This is not a regular @state because we need to also send the
   // 'diff-changed' event when it is changed. And if we rely on @state
@@ -491,6 +495,10 @@
         .showNewlineWarningLeft=${showNewlineWarningLeft}
         .showNewlineWarningRight=${showNewlineWarningRight}
         .useNewImageDiffUi=${useNewImageDiffUi}
+        .binaryDiffHint=${` Download commit to view (shortcut:
+              ${this.getShortcutsService().getShortcut(
+                Shortcut.OPEN_DOWNLOAD_DIALOG
+              )})`}
       >
         ${repeat(
           this.threads,

diff --git a/polygerrit-ui/app/embed/diff/gr-diff/gr-diff-element.ts b/polygerrit-ui/app/embed/diff/gr-diff/gr-diff-element.ts
index db89823..eb04f57 100644
--- a/polygerrit-ui/app/embed/diff/gr-diff/gr-diff-element.ts
+++ b/polygerrit-ui/app/embed/diff/gr-diff/gr-diff-element.ts

@@ -24,7 +24,7 @@
 } from '../../../constants/constants';
 import {fire} from '../../../utils/event-util';
 import {RenderPreferences, LOST, DiffResponsiveMode} from '../../../api/diff';
-import {query, queryAll, state} from 'lit/decorators.js';
+import {property, query, queryAll, state} from 'lit/decorators.js';
 import {html, LitElement, nothing} from 'lit';
 import {when} from 'lit/directives/when.js';
 import {classMap} from 'lit/directives/class-map.js';
@@ -40,10 +40,6 @@
 import {subscribe} from '../../../elements/lit/subscription-controller';
 import {GrDiffSection} from '../gr-diff-builder/gr-diff-section';
 import {repeat} from 'lit/directives/repeat.js';
-import {
-  Shortcut,
-  shortcutsServiceToken,
-} from '../../../services/shortcuts/shortcuts-service';
 
 const LARGE_DIFF_THRESHOLD_LINES = 10000;
 
@@ -80,9 +76,11 @@
 
   @state() columnCount = 0;
 
-  private getDiffModel = resolve(this, diffModelToken);
+  // Extra message shown if files are binary to help users investigate contents.
+  @property({type: String})
+  binaryDiffHint = '';
 
-  private readonly getShortcutsService = resolve(this, shortcutsServiceToken);
+  private getDiffModel = resolve(this, diffModelToken);
 
   /**
    * The browser API for handling selection does not (yet) work for selection
@@ -368,12 +366,7 @@
       <tbody class="binary-diff">
         <tr>
           <td colspan=${this.columnCount}>
-            <span
-              >Difference in binary files. Download commit to view (shortcut:
-              ${this.getShortcutsService().getShortcut(
-                Shortcut.OPEN_DOWNLOAD_DIALOG
-              )})</span
-            >
+            <span>Difference in binary files.${this.binaryDiffHint}</span>
           </td>
         </tr>
       </tbody>

diff --git a/polygerrit-ui/app/embed/diff/gr-diff/gr-diff-element_test.ts b/polygerrit-ui/app/embed/diff/gr-diff/gr-diff-element_test.ts
index c793ee9..c9f4882 100644
--- a/polygerrit-ui/app/embed/diff/gr-diff/gr-diff-element_test.ts
+++ b/polygerrit-ui/app/embed/diff/gr-diff/gr-diff-element_test.ts

@@ -2804,9 +2804,7 @@
                 <tbody class="binary-diff">
                   <tr>
                     <td colspan="4">
-                      <span>
-                        ${'Difference in binary files. Download commit to view (shortcut:\n              d)'}
-                      </span>
+                      <span> Difference in binary files. </span>
                     </td>
                   </tr>
                 </tbody>
@@ -3368,11 +3366,12 @@
 
     test('binary', async () => {
       element.diff = {...createEmptyDiff(), content, binary: true};
+      element.binaryDiffHint = ' Download commit to view (shortcut: d)';
       await element.updateComplete;
       const body = queryAndAssert(element, 'tbody.binary-diff');
       assert.lightDom.equal(
         body,
-        /* HTML */ '<span>Difference in binary files. Download commit to view (shortcut:\n              d)</span>'
+        /* HTML */ '<span>Difference in binary files. Download commit to view (shortcut: d)</span>'
       );
     });
   });

diff --git a/polygerrit-ui/app/embed/diff/gr-diff/gr-diff.ts b/polygerrit-ui/app/embed/diff/gr-diff/gr-diff.ts
index 59dad46..07aaf55 100644
--- a/polygerrit-ui/app/embed/diff/gr-diff/gr-diff.ts
+++ b/polygerrit-ui/app/embed/diff/gr-diff/gr-diff.ts

@@ -187,6 +187,10 @@
   @property({type: Object})
   diffRangesToFocus?: DiffRangesToFocus;
 
+  // Extra message shown if files are binary to help users investigate contents.
+  @property({type: String})
+  binaryDiffHint = '';
+
   /**
    * True when diff is changed, until the content is done rendering.
    * Use getter/setter loading instead of this.
@@ -467,7 +471,9 @@
   }
 
   override render() {
-    return html`<gr-diff-element></gr-diff-element>`;
+    return html`<gr-diff-element
+      .binaryDiffHint=${this.binaryDiffHint}
+    ></gr-diff-element>`;
   }
 
   private addSelectionListeners() {