[CombinedDiffView] Make the file name a link to open in sources panel

Fixed: 402735506
Change-Id: Icb754ba0349b22124dd5cae3a4b2dd900f5b46c0
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6372359
Commit-Queue: Ergün Erdoğmuş <[email protected]>
Commit-Queue: Wolfgang Beyer <[email protected]>
Auto-Submit: Ergün Erdoğmuş <[email protected]>
Reviewed-by: Wolfgang Beyer <[email protected]>

Author: ergunsh

front_end/panels/changes/CombinedDiffView.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
@@ -38,6 +39,7 @@ interface SingleDiffViewInput {
   diff: Diff.Diff.DiffArray;
   copied: boolean;
   onCopy: (fileUrl: string, diff: Diff.Diff.DiffArray) => void;
+  onFileNameClick: (fileUrl: string) => void;
 }
 
 export interface ViewInput {
@@ -47,15 +49,15 @@ export interface ViewInput {
 type View = (input: ViewInput, output: undefined, target: HTMLElement) => void;
 
 function renderSingleDiffView(singleDiffViewInput: SingleDiffViewInput): Lit.TemplateResult {
-  const {fileName, fileUrl, mimeType, icon, diff, copied, onCopy} = singleDiffViewInput;
+  const {fileName, fileUrl, mimeType, icon, diff, copied, onCopy, onFileNameClick} = singleDiffViewInput;
 
   return html`
     <details open>
       <summary>
         <div class="summary-left">
           <devtools-icon class="drop-down-icon" .name=${'arrow-drop-down'}></devtools-icon>
           ${icon}
-          <span class="file-name">${fileName}</span>
+          <button class="file-name-link" @click=${() => onFileNameClick(fileUrl)}>${fileName}</button>
         </div>
         <div class="summary-right">
           ${copied ? html`<span class="copied">${i18nString(UIStrings.copied)}</span>` : html`
@@ -125,6 +127,11 @@ export class CombinedDiffView extends UI.Widget.Widget {
     }, COPIED_TO_CLIPBOARD_TEXT_TIMEOUT_MS);
   }
 
+  #onFileNameClick(fileUrl: string): void {
+    const uiSourceCode = this.#modifiedUISourceCodes.find(uiSourceCode => uiSourceCode.url() === fileUrl);
+    void Common.Revealer.reveal(uiSourceCode);
+  }
+
   async #initializeModifiedUISourceCodes(): Promise<void> {
     if (!this.#workspaceDiff) {
       return;
@@ -183,6 +190,7 @@ export class CombinedDiffView extends UI.Widget.Widget {
                 icon: PanelUtils.PanelUtils.getIconForSourceFile(uiSourceCode, {width: 18, height: 18}),
                 copied: this.#copiedFiles[uiSourceCode.url()],
                 onCopy: this.#onCopyDiff.bind(this),
+                onFileNameClick: this.#onFileNameClick.bind(this),
               };
             })
             .sort((a, b) => Platform.StringUtilities.compare(a.fileName, b.fileName));

front_end/panels/changes/combinedDiffView.css

@@ -30,12 +30,21 @@
         align-items: center;
         flex-grow: 0;
 
-        .file-name {
+        .file-name-link {
           padding-left: var(--sys-size-5);
           width: 100%;
           text-overflow: ellipsis;
           overflow: hidden;
           text-wrap-mode: nowrap;
+          border: none;
+          background: none;
+          font: inherit;
+
+          &:hover {
+            color: var(--sys-color-primary);
+            text-decoration: underline;
+            cursor: pointer;
+          }
         }
 
         devtools-icon {