chrome/browser/resources/side_panel/customize_chrome/app.html.ts

// Copyright 2024 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 {AppElement} from './app.js';

export function getHtml(this: AppElement) {
  // clang-format off
  return html`<!--_html_template_start_-->
<cr-page-selector id="container"
    class="sp-scroller sp-scroller-top-of-page sp-scroller-bottom-of-page"
    selected="${this.page_}" attr-for-selected="page-name">
  <div page-name="overview" id="overviewPage">
    <div id="appearance" class="section sp-card">
      <sp-heading hide-back-button>
        <h2 slot="heading">$i18n{appearanceHeader}</h2>
      </sp-heading>
      <customize-chrome-appearance @edit-theme-click="${this.onEditThemeClick_}"
          @wallpaper-search-click="${this.onWallpaperSearchSelect_}"
          id="appearanceElement">
      </customize-chrome-appearance>
    </div>
    ${this.toolbarCustomizationEnabled_ ? html`
      <hr class="sp-cards-separator">
      <cr-button id="toolbarButton" class="section sp-card"
          @click="${this.onToolbarCustomizationButtonClick_}">
        <sp-heading hide-back-button id="toolbar-customization-heading">
          <h2 slot="heading" id="toolbar-customization-inner-heading"
              aria-label="$i18n{toolbarButtonA11yLabel}">
            $i18n{toolbarHeader}
            <new-badge></new-badge>
          </h2>
        </sp-heading>
        <cr-icon icon="cr:chevron-right" slot="suffix-icon"></cr-icon>
      </cr-button>
    ` : ''}
     ${this.isSourceTabFirstPartyNtp_ ? html`<hr class="sp-cards-separator">
    <div id="shortcuts" class="section sp-card">
      <sp-heading hide-back-button>
        <h2 slot="heading">$i18n{shortcutsHeader}</h2>
      </sp-heading>
      <customize-chrome-shortcuts></customize-chrome-shortcuts>
    </div>`: ''}
    ${(this.modulesEnabled_ && this.isSourceTabFirstPartyNtp_) ? html`
      <hr class="sp-cards-separator">
      <div id="modules" class="section sp-card">
        <sp-heading hide-back-button>
          <h2 slot="heading">$i18n{cardsHeader}</h2>
        </sp-heading>
        <customize-chrome-cards></customize-chrome-cards>
      </div>
    ` : ''}
    ${this.extensionsCardEnabled_ ? html`
      <hr class="sp-cards-separator">
      <div id="extensions" class="section sp-card">
        <sp-heading hide-back-button>
          <h2 slot="heading">Extensions</h2>
        </sp-heading>
        <div class="description" @click="${this.onChromeWebStoreLinkClick_}">
          $i18nRaw{customizeWithChromeWebstoreLabel}
        </div>
        <div id="buttonContainer">
          <cr-chip id="couponsButton" chip-role="link"
            @click="${this.onCouponsButtonClick_}">
            <div class="cr-icon"></div>
            $i18n{webstoreShoppingCategoryLabel}
          </cr-chip>
          <cr-chip id="writingButton" chip-role="link"
            @click="${this.onWritingButtonClick_}">
            <div class="cr-icon"></div>
            $i18n{webstoreWritingHelpCollectionLabel}
          </cr-chip>
          <cr-chip id="productivityButton" chip-role="link"
            @click="${this.onProductivityButtonClick_}">
            <div class="cr-icon"></div>
            $i18n{webstoreProductivityCategoryLabel}
          </cr-chip>
        </div>
      </div>
    ` : ''}
  </div>
  ${(this.isSourceTabFirstPartyNtp_) ? html`
  <customize-chrome-categories @back-click="${this.onBackClick_}"
      @collection-select="${this.onCollectionSelect_}" page-name="categories"
      id="categoriesPage" @local-image-upload="${this.onLocalImageUpload_}"
      @wallpaper-search-select="${this.onWallpaperSearchSelect_}">
  </customize-chrome-categories>`: ''}
  ${(this.isSourceTabFirstPartyNtp_) ? html`
  <customize-chrome-themes @back-click="${this.onBackClick_}"
      page-name="themes" id="themesPage"
      .selectedCollection="${this.selectedCollection_}">
  </customize-chrome-themes>`: ''}
  ${(this.wallpaperSearchEnabled_ && this.isSourceTabFirstPartyNtp_) ? html`
    <customize-chrome-wallpaper-search @back-click="${this.onBackClick_}"
        page-name="wallpaper-search" id="wallpaperSearchPage">
    </customize-chrome-wallpaper-search>
  ` : ''}
  ${this.toolbarCustomizationEnabled_ ? html`
    <customize-chrome-toolbar @back-click="${this.onBackClick_}"
      page-name="toolbar" id="toolbarPage"></customize-chrome-toolbar>
  ` : ''}
</cr-page-selector>
<!--_html_template_end_-->`;
  // clang-format on
}