Bug 1962756 - add button to link preview to jump to settings - r=Mardak,firefox-ai-ml-reviewers,fluent-reviewers,bolsson

- update styles with moz-button
- redirect to #general-link-preview
- add dismiss event dispatch

Differential Revision: https://phabricator.services.mozilla.com/D248343

browser/components/genai/content/link-preview-card.css

@@ -176,3 +176,9 @@
     }
   }
 }
+
+.reading-time-settings-container {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+}

browser/components/genai/content/link-preview-card.mjs

@@ -55,6 +55,24 @@ class LinkPreviewCard extends MozLitElement {
     this.isGenerationErrorState = false;
   }
 
+  /**
+   * Handles click events on the settings button.
+   *
+   * Prevents the default event behavior and opens Firefox's preferences
+   * page with the link preview settings section focused.
+   *
+   * @param {MouseEvent} _event - The click event from the settings button.
+   */
+  handleSettingsClick(_event) {
+    const win = this.ownerGlobal;
+    win.openPreferences("general-link-preview");
+    this.dispatchEvent(
+      new CustomEvent("LinkPreviewCard:dismiss", {
+        detail: "settings",
+      })
+    );
+  }
+
   addKeyPoint(text) {
     this.keyPoints.push(text);
     this.requestUpdate();
@@ -365,23 +383,33 @@ class LinkPreviewCard extends MozLitElement {
             : ""}
           ${readingTimeMinsFast && readingTimeMinsSlow
             ? html`
-                <div
-                  class="og-card-reading-time"
-                  data-l10n-id="link-preview-reading-time"
-                  data-l10n-args=${JSON.stringify({
-                    range:
-                      readingTimeMinsFast === readingTimeMinsSlow
-                        ? `~${readingTimeMinsFastStr}`
-                        : `${readingTimeRange}`,
-                    rangePlural:
-                      readingTimeMinsFast === readingTimeMinsSlow
-                        ? lazy.pluralRules.select(readingTimeMinsFast)
-                        : lazy.pluralRules.selectRange(
-                            readingTimeMinsFast,
-                            readingTimeMinsSlow
-                          ),
-                  })}
-                ></div>
+                <div class="reading-time-settings-container">
+                  <div
+                    class="og-card-reading-time"
+                    data-l10n-id="link-preview-reading-time"
+                    data-l10n-args=${JSON.stringify({
+                      range:
+                        readingTimeMinsFast === readingTimeMinsSlow
+                          ? `~${readingTimeMinsFastStr}`
+                          : `${readingTimeRange}`,
+                      rangePlural:
+                        readingTimeMinsFast === readingTimeMinsSlow
+                          ? lazy.pluralRules.select(readingTimeMinsFast)
+                          : lazy.pluralRules.selectRange(
+                              readingTimeMinsFast,
+                              readingTimeMinsSlow
+                            ),
+                    })}
+                  ></div>
+                  <moz-button
+                    type="icon ghost"
+                    iconSrc="chrome://global/skin/icons/settings.svg"
+                    data-l10n-id="link-preview-settings-button"
+                    data-l10n-attrs="title"
+                    @click=${this.handleSettingsClick}
+                  >
+                  </moz-button>
+                </div>
               `
             : ""}
         </div>

browser/locales-preview/linkPreview.ftl

@@ -16,3 +16,7 @@ link-preview-generation-error-unexpected = Something went wrong.
 
 # Text for the retry link when generation fails
 link-preview-generation-retry = Try again
+
+# Button that opens the Link Preview settings
+link-preview-settings-button =
+.title = Link Preview Settings