chrome/browser/resources/new_tab_page/app.html

<!-- #html_wrapper_imports_start
import {nothing} from '//resources/lit/v3_0/lit.rollup.js';
#html_wrapper_imports_end -->
<div id="content">
  ${this.lazyRender_ && this.microsoftModuleEnabled_ ? html`
    <iframe id="microsoftAuth" src="${this.microsoftAuthIframePath_}"></iframe>
  ` : ''}
  ${this.lazyRender_ && this.oneGoogleBarEnabled_ ?
    (
      this.ntpRealboxNextEnabled_ ?
        html`
        <div id="oneGoogleBarStackingContext">
          <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>
        </div>
        ` :
        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_}"
      .theme="${this.theme_}" ?hidden="${!this.logoEnabled_}">
  </ntp-logo>
  ${this.ntpRealboxNextEnabled_ ? html`
    <div id="scrim"
        @click="${this.showComposebox_ && this.composeboxCloseByClickOutside_ ? this.onComposeboxClickOutside_ : nothing}"
        ?hidden="${!this.showScrim_}"></div>
  ` : ''}
  <div id="searchboxContainer">
    <cr-searchbox id="searchbox" ?is-dark="${this.isThemeDark_()}"
        placeholder-text="$i18n{searchBoxPlaceholder}"
        ?color-source-is-baseline="${this.colorSourceIsBaseline}"
        @open-composebox="${this.openComposebox_}"
        @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}"
        ?compose-button-enabled="${this.composeButtonEnabled}"
        ?composebox-enabled="${this.composeboxEnabled}"
        realbox-layout-mode="${this.realboxLayoutMode_}"
        ?ntp-realbox-next-enabled="${this.ntpRealboxNextEnabled_}"
        ?cycling-placeholders="${this.searchboxCyclingPlaceholders_}"
        @dropdown-visible-changed="${this.onDropdownVisibleChanged_}"
        @searchbox-input-focus-changed="${this.onInputFocusChanged_}">
    </cr-searchbox>
    ${this.showComposebox_ ? html`
      <ntp-composebox id="composebox"
          ?ntp-realbox-next-enabled="${this.ntpRealboxNextEnabled_}"
          @composebox-initialized="${this.onComposeboxInitialized_}"
          @close-composebox="${this.closeComposebox_}"
          @composebox-dropdown-visible-changed="${this.onDropdownVisibleChanged_}"
          @composebox-input-focus-changed="${this.onInputFocusChanged_}"
          realbox-layout-mode="${this.realboxLayoutMode_}">
      </ntp-composebox>
    ` : ''}
    ${this.showLensUploadDialog_ ? html`
      <ntp-lens-upload-dialog id="lensUploadDialog"
          @close-lens-search="${this.onCloseLensSearch_}">
      </ntp-lens-upload-dialog>
    ` : ''}
  </div>
  ${this.lazyRender_ && this.ntpNextFeaturesEnabled_ ? html`
    <ntp-action-chips></ntp-action-chips>
  ` : ''}
  ${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 reflow-on-overflow
          ?enable-show-more-button="${this.ntpNextFeaturesEnabled_}">
      </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`
      ${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>
      `}
    ` : ''}
    ${ this.showBrowserPromo_ ? (() => { switch (this.browserPromoType_) {
     case "simple":
      return html`
        <individual-promos maxPromos="${this.browserPromoLimit_}">
        </individual-promos>

      `;
     case "setuplist":
      return html`
        <setup-list-module-wrapper maxPromos="${this.browserPromoLimit_}"
            maxCompletedPromos="${this.browserPromoCompletedLimit_}">
        </setup-list-module-wrapper>
      `;
     default:
      return '';
    } })() : '' }
  ${!this.isFooterVisible_ ? html`
      <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>
      <ntp-customize-buttons id="customizeButtons"
          ?modules-shown-to-user="${this.modulesShownToUser}"
          ?show-background-image="${this.showBackgroundImage_}"
          ?show-customize="${this.showCustomize_}"
          ?show-customize-chrome-text="${this.showCustomizeChromeText_}"
          ?show-wallpaper-search="${this.showWallpaperSearch_}"
          ?show-wallpaper-search-button="${this.showWallpaperSearchButton_}"
          ?wallpaper-search-button-animation-enabled="${this.wallpaperSearchButtonAnimationEnabled_}"
          @customize-click="${this.onCustomizeClick_}"
          @wallpaper-search-click="${this.onWallpaperSearchClick_}" show-shadow>
      </ntp-customize-buttons>
    ` : ''}
    ${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>
` : ''}
${!this.ntpRealboxNextEnabled_ && this.showComposebox_ ? html`
  <div id="scrim"
      @click="${this.composeboxCloseByClickOutside_ ? this.onComposeboxClickOutside_ : nothing}"></div>
` : ''}
<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>