chromium/chrome/browser/resources/new_tab_page/app.html

<div id="content">
  ${this.lazyRender_ && this.oneGoogleBarEnabled_ ? html`
    <div id="oneGoogleBarScrim" ?hidden="${!this.showBackgroundImage_}"
        ?fixed="${this.scrolledToTop_}"></div>
    <ntp-iframe id="oneGoogleBar" src="${this.oneGoogleBarIframePath_}"
        ?hidden="${!this.oneGoogleBarLoaded_}"
        allow="camera ${this.oneGoogleBarIframeOrigin_}; display-capture ${this.oneGoogleBarIframeOrigin_}"> <!-- presubmit: ignore-long-line -->
    </ntp-iframe>
  ` : ''}
  <!-- TODO(crbug.com/40743294): Instead of ?hidden="${!this.logoEnabled_}" it would
       be nicer to use Lit's conditional rendering. However, that breaks
       StartupBrowserCreatorPickerNoParamsTest.ShowPickerWhenAlreadyLaunched on
       the msan builder. See crbug.com/1169070. -->
  <ntp-logo id="logo" ?single-colored="${this.singleColoredLogo_}"
      .dark="${this.isThemeDark_()}" .backgroundColor="${this.backgroundColor_}"
      ?hidden="${!this.logoEnabled_}">
  </ntp-logo>
  <div id="searchboxContainer">
    <cr-searchbox id="searchbox" ?is-dark="${this.isThemeDark_()}"
        ?color-source-is-baseline="${this.colorSourceIsBaseline}"
        @open-lens-search="${this.onOpenLensSearch_}"
        @open-voice-search="${this.onOpenVoiceSearch_}" ?shown="${this.realboxShown_}"
        ?had-secondary-side="${this.realboxHadSecondarySide}"
        @had-secondary-side-changed="${this.onRealboxHadSecondarySideChanged_}"
        ?can-show-secondary-side="${this.realboxCanShowSecondarySide}">
    </cr-searchbox>
    ${this.showLensUploadDialog_ ? html`
      <ntp-lens-upload-dialog id="lensUploadDialog"
          @close-lens-search="${this.onCloseLensSearch_}">
      </ntp-lens-upload-dialog>
    ` : ''}
  </div>
  ${this.lazyRender_ ? html`
    <cr-toast id="webstoreToast" duration="10000" hidden>
      <div>$i18n{webstoreThemesToastMessage}</div>
      <cr-button @click="${this.onWebstoreToastButtonClick_}">
        $i18n{webstoreThemesToastButtonText}
      </cr-button>
    </cr-toast>
  ` : ''}
  ${this.lazyRender_ ? html`
    ${this.shortcutsEnabled_ ? html`
      <cr-most-visited id="mostVisited" .theme="${this.theme_?.mostVisited || null}"
          ?single-row="${this.singleRowShortcutsEnabled_}" reflow-on-overflow>
      </cr-most-visited>
    ` : ''}
    ${this.middleSlotPromoEnabled_ ? html`
      <ntp-middle-slot-promo
          @ntp-middle-slot-promo-loaded="${this.onMiddleSlotPromoLoaded_}"
          ?hidden="${!this.promoAndModulesLoaded_}">
      </ntp-middle-slot-promo>
    ` : ''}
    ${this.modulesEnabled_ ? html`
      ${!this.modulesRedesignedEnabled_ ? html`
        <ntp-modules id="modules"
            ?modules-shown-to-user="${this.modulesShownToUser}"
            @modules-shown-to-user-changed="${this.onModulesShownToUserChanged_}"
            @customize-module="${this.onCustomizeModule_}"
            @modules-loaded="${this.onModulesLoaded_}"
            ?hidden="${!this.promoAndModulesLoaded_}">
        </ntp-modules>
      ` : html`
        <ntp-modules-v2 id="modules"
            ?modules-shown-to-user="${this.modulesShownToUser}"
            @modules-shown-to-user-changed="${this.onModulesShownToUserChanged_}"
            @customize-module="${this.onCustomizeModule_}"
            @modules-loaded="${this.onModulesLoaded_}"
            ?hidden="${!this.promoAndModulesLoaded_}">
        </ntp-modules-v2>
      `}
    ` : ''}
    <a id="backgroundImageAttribution"
        href="${this.backgroundImageAttributionUrl_}"
        ?hidden="${!this.backgroundImageAttribution1_}">
      <div id="backgroundImageAttribution1Container">
        <div id="linkIcon" ?hidden="${!this.backgroundImageAttributionUrl_}"></div>
        <div id="backgroundImageAttribution1">
          ${this.backgroundImageAttribution1_}
        </div>
      </div>
      <div id="backgroundImageAttribution2"
          ?hidden="${!this.backgroundImageAttribution2_}">
        ${this.backgroundImageAttribution2_}
      </div>
    </a>
    <div id="customizeButtons">
      ${this.wallpaperSearchButtonEnabled_ ? html`
        <cr-button id="wallpaperSearchButton"
            class="customize-button" @click="${this.onWallpaperSearchClick_}"
            title="$i18n{customizeThisPageWallpaperSearch}"
            aria-pressed="${this.showWallpaperSearch_}">
          <div id="wallpaperSearchIcon"
              class="customize-icon cr-icon" slot="prefix-icon"></div>
          <div id="wallpaperSearchText" class="customize-text"
              ?hidden="${this.showWallpaperSearch_}">
            $i18n{wallpaperSearchButton}
          </div>
        </cr-button>
      ` : ''}
      <cr-button id="customizeButton" class="customize-button"
          @click="${this.onCustomizeClick_}" title="$i18n{customizeThisPage}"
          aria-pressed="${this.showCustomize_}">
        <div id="customizeIcon"
            class="customize-icon cr-icon" slot="prefix-icon"></div>
        <div id="customizeText" class="customize-text"
            ?hidden="${!this.showCustomizeChromeText_}">
          $i18n{customizeButton}
        </div>
      </cr-button>
    </div>
    ${this.showThemeAttribution_() ? html`
      <div id="themeAttribution">
        <div>$i18n{themeCreatedBy}</div>
        <img src="${this.theme_!.backgroundImage!.attributionUrl!.url}">
      </div>
    ` : ''}
  ` : ''}
  <div id="contentBottomSpacer"></div>
</div>
${this.showVoiceSearchOverlay_ ? html`
  <ntp-voice-search-overlay @close="${this.onVoiceSearchOverlayClose_}">
  </ntp-voice-search-overlay>
` : ''}
<svg>
  <defs>
    <clipPath id="oneGoogleBarClipPath">
      <!-- Set an initial non-empty clip-path so the OneGoogleBar resize events
           are processed. When the clip-path is empty, it's possible for the
           OneGoogleBar to get into a state where it does not send  the
           'overlayUpdates' message which is used to populate this
           clip-path. -->
      <rect x="0" y="0" width="1" height="1"></rect>
    </clipPath>
  </defs>
</svg>