[Reading Mode] Add header component for immersive mode Currently, the Reading Mode title, pin button, and close button are part of the Side Panel UI. In immersive mode, the side panel is hidden, so we need to manually reimplement these UI elements to maintain consistency. Note: This patch only adds the visual elements. Future work is required to implement full functionality and match the Side Panel UI 1:1. Bug: 465517960 Change-Id: I8d7d2b454a3f9844c14835e7e6e1055f4a8be25c Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7255592 Commit-Queue: Jacobo Misael Tapia <jatapiaro@google.com> Reviewed-by: Kristi Saney <kristislee@google.com> Reviewed-by: Lauren Winston <lwinston@google.com> Cr-Commit-Position: refs/heads/main@{#1558289}

diff --git a/chrome/browser/resources/side_panel/read_anything/BUILD.gn b/chrome/browser/resources/side_panel/read_anything/BUILD.gn
index ae4cdd2..6d1aa7d 100644
--- a/chrome/browser/resources/side_panel/read_anything/BUILD.gn
+++ b/chrome/browser/resources/side_panel/read_anything/BUILD.gn

@@ -18,6 +18,8 @@
     "app/app_style_updater.ts",
     "app/app.html.ts",
     "app/app.ts",
+    "app/read_anything_header.html.ts",
+    "app/read_anything_header.ts",
     "app/read_anything_toolbar.html.ts",
     "app/read_anything_toolbar.ts",
     "content/content_controller.ts",
@@ -76,6 +78,7 @@
   ]
   css_files = [
     "app/app.css",
+    "app/read_anything_header.css",
     "app/read_anything_toolbar.css",
     "app/toolbar_styles_shared.css",
     "menus/font_select.css",

diff --git a/chrome/browser/resources/side_panel/read_anything/app/app.html.ts b/chrome/browser/resources/side_panel/read_anything/app/app.html.ts
index 50db8d7..412f731e 100644
--- a/chrome/browser/resources/side_panel/read_anything/app/app.html.ts
+++ b/chrome/browser/resources/side_panel/read_anything/app/app.html.ts

@@ -9,6 +9,7 @@
 export function getHtml(this: AppElement) {
   // clang-format off
   return html`<!--_html_template_start_-->
+<read-anything-header id="header" hidden></read-anything-header>
 <div id="appFlexParent">
   <div id="toolbar-container">
     <read-anything-toolbar

diff --git a/chrome/browser/resources/side_panel/read_anything/app/app.ts b/chrome/browser/resources/side_panel/read_anything/app/app.ts
index 37c83b50..5fa5e64 100644
--- a/chrome/browser/resources/side_panel/read_anything/app/app.ts
+++ b/chrome/browser/resources/side_panel/read_anything/app/app.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 './read_anything_header.js';
 import './read_anything_toolbar.js';
 import '/strings.m.js';
 import '//read-anything-side-panel.top-chrome/shared/sp_empty_state.js';
@@ -33,12 +34,14 @@
 import {getCss} from './app.css.js';
 import {getHtml} from './app.html.js';
 import {AppStyleUpdater} from './app_style_updater.js';
+import type {ReadAnythingHeaderElement} from './read_anything_header.js';
 import type {ReadAnythingToolbarElement} from './read_anything_toolbar.js';
 
 const AppElementBase = WebUiListenerMixinLit(CrLitElement);
 
 export interface AppElement {
   $: {
+    header: ReadAnythingHeaderElement,
     toolbar: ReadAnythingToolbarElement,
     appFlexParent: HTMLElement,
     containerParent: HTMLElement,

diff --git a/chrome/browser/resources/side_panel/read_anything/app/icons.html b/chrome/browser/resources/side_panel/read_anything/app/icons.html
index 1da89667..51bbca6b 100644
--- a/chrome/browser/resources/side_panel/read_anything/app/icons.html
+++ b/chrome/browser/resources/side_panel/read_anything/app/icons.html

@@ -78,6 +78,11 @@
       <g id="view" viewBox="0 0 16 16">
         <path d="M2.4 13.6V10.4H3.6V12.4H5.6V13.6H2.4ZM10.4 13.6V12.4H12.4V10.4H13.6V13.6H10.4ZM2.4 5.6V2.4H5.6V3.6H3.6V5.6H2.4ZM12.4 5.6V3.6H10.4V2.4H13.6V5.6H12.4Z"></path>
       </g>
+      <g id="pin" viewBox="0 0 9 14">
+        <path
+          d="M6.66615 5.68335L8.26615 7.28335V8.66668H4.83281V12.45L4.13281 13.1333L3.43281 12.45V8.66668H-0.000520706V7.28335L1.59948 5.68335V1.38335H0.799479V1.33514e-05H7.46615V1.38335H6.66615V5.68335ZM1.94948 7.28335H6.31615L5.28281 6.25001V1.38335H2.98281V6.25001L1.94948 7.28335Z">
+        </path>
+      </g>
   </svg>
 </cr-iconset>
 <cr-iconset name="read-anything-20" size="20">

diff --git a/chrome/browser/resources/side_panel/read_anything/app/read_anything_header.css b/chrome/browser/resources/side_panel/read_anything/app/read_anything_header.css
new file mode 100644
index 0000000..aadd947
--- /dev/null
+++ b/chrome/browser/resources/side_panel/read_anything/app/read_anything_header.css

@@ -0,0 +1,22 @@
+/* Copyright 2025 The Chromium Authors
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file. */
+
+/* #css_wrapper_metadata_start
+ * #type=style-lit
+ * #import=//resources/cr_elements/cr_icons_lit.css.js
+ * #import=//resources/cr_elements/cr_shared_vars.css.js
+ * #import=./toolbar_styles_shared.css.js
+ * #include=toolbar-styles-shared cr-icons-lit
+ * #scheme=relative
+ * #css_wrapper_metadata_end */
+
+.read-anything-header {
+  align-items: center;
+  background-color: var(--color-sys-base-container-elevated);
+  display: flex;
+  font-size: 14px;
+  justify-content: space-between;
+  padding-left: 16px;
+  padding-right: 8px;
+}

diff --git a/chrome/browser/resources/side_panel/read_anything/app/read_anything_header.html.ts b/chrome/browser/resources/side_panel/read_anything/app/read_anything_header.html.ts
new file mode 100644
index 0000000..5e13b94
--- /dev/null
+++ b/chrome/browser/resources/side_panel/read_anything/app/read_anything_header.html.ts

@@ -0,0 +1,34 @@
+// Copyright 2025 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {html} from '//resources/lit/v3_0/lit.rollup.js';
+
+import type {ReadAnythingHeaderElement} from './read_anything_header.js';
+
+export function getHtml(this: ReadAnythingHeaderElement) {
+  if (!this.isImmersiveEnabled_) {
+    return html``;
+  }
+
+  // clang-format off
+  return html`<!--_html_template_start_-->
+<header id="headerContainer" class="read-anything-header">
+  <p>$i18n{readAnythingTabTitle}</p>
+  <div>
+    <cr-icon-button class="toolbar-button"
+      id="pin"
+      iron-icon="read-anything:pin">
+    </cr-icon-button>
+    <cr-icon-button class="toolbar-button"
+      id="close"
+      iron-icon="cr:close"
+      aria-label="$i18n{readingModeLanguageMenuClose}"
+      title="$i18n{readingModeLanguageMenuClose}"
+    >
+    </cr-icon-button>
+  </div>
+</header>
+<!--_html_template_end_-->`;
+  // clang-format on
+}

diff --git a/chrome/browser/resources/side_panel/read_anything/app/read_anything_header.ts b/chrome/browser/resources/side_panel/read_anything/app/read_anything_header.ts
new file mode 100644
index 0000000..0d06f21
--- /dev/null
+++ b/chrome/browser/resources/side_panel/read_anything/app/read_anything_header.ts

@@ -0,0 +1,65 @@
+// Copyright 2025 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import './icons.html.js';
+import '../read_aloud/voice_selection_menu.js';
+import '../menus/simple_action_menu.js';
+import '../menus/color_menu.js';
+import '../menus/font_menu.js';
+import '../menus/font_select.js';
+import '../menus/line_focus_menu.js';
+import '../menus/line_spacing_menu.js';
+import '../menus/letter_spacing_menu.js';
+import '../menus/highlight_menu.js';
+import '../menus/rate_menu.js';
+import '//resources/cr_elements/cr_action_menu/cr_action_menu.js';
+import '//resources/cr_elements/cr_button/cr_button.js';
+import '//resources/cr_elements/cr_icon_button/cr_icon_button.js';
+import '//resources/cr_elements/cr_lazy_render/cr_lazy_render_lit.js';
+import '//resources/cr_elements/icons.html.js';
+
+import type {CrIconButtonElement} from '//resources/cr_elements/cr_icon_button/cr_icon_button.js';
+import {I18nMixinLit} from '//resources/cr_elements/i18n_mixin_lit.js';
+import {WebUiListenerMixinLit} from '//resources/cr_elements/web_ui_listener_mixin_lit.js';
+import {CrLitElement} from '//resources/lit/v3_0/lit.rollup.js';
+
+import {getCss} from './read_anything_header.css.js';
+import {getHtml} from './read_anything_header.html.js';
+
+export interface ReadAnythingHeaderElement {
+  $: {
+    close: CrIconButtonElement,
+  };
+}
+
+const ReadAnythingHeaderElementBase =
+    WebUiListenerMixinLit(I18nMixinLit(CrLitElement));
+
+export class ReadAnythingHeaderElement extends ReadAnythingHeaderElementBase {
+  static get is() {
+    return 'read-anything-header';
+  }
+  static override get styles() {
+    return getCss();
+  }
+
+  override render() {
+    return getHtml.bind(this)();
+  }
+
+  protected isImmersiveEnabled_: boolean = false;
+
+  constructor() {
+    super();
+    this.isImmersiveEnabled_ = chrome.readingMode.isImmersiveEnabled;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'read-anything-header': ReadAnythingHeaderElement;
+  }
+}
+
+customElements.define(ReadAnythingHeaderElement.is, ReadAnythingHeaderElement);