chromium/chrome/browser/resources/settings/search_page/search_page.html

<style include="cr-shared-style iron-flex settings-shared md-select">
  :host {
    --favicon-size: 0;
  }

  #search-wrapper {
    align-items: center;
    display: flex;
    min-height: var(--cr-section-min-height);
  }

  .default-search-engine .cr-row {
    --cr-section-min-height: 55px;
    gap: 12px;
    padding: 0;
  }

  .default-search-engine {
    padding-top: var(--cr-section-vertical-padding);
  }

  .search-engine-name {
    margin-inline-end: auto;
  }

  site-favicon {
    --site-favicon-border-radius: 4px;
    --site-favicon-height: var(--favicon-size);
    --site-favicon-width: var(--favicon-size);
  }

  settings-search-engine-list-dialog {
    --search-engine-icon-size: var(--favicon-size);
  }

</style>
<settings-animated-pages id="pages" section="search"
    focus-config="[[focusConfig_]]">
  <div route-path="default">
    <!-- Omnibox search engine -->
    <div class="cr-row first">
      <template is="dom-if" if="[[searchEngineChoiceSettingsUi_]]">
        <div class="default-search-engine flex">
          $i18n{searchPageTitle}
          <div class="secondary">
            $i18n{searchEngineChoiceEntryPointSubtitle}
            <a href="$i18n{searchExplanationLearnMoreURL}"
                aria-label="$i18n{searchExplanationLearnMoreA11yLabel}"
                target="_blank">
              $i18n{learnMore}
            </a>
          </div>
          <template is="dom-if" if="[[isDefaultSearchControlledByPolicy_(
              prefs.default_search_provider_data.template_url_data)]]">
            <cr-policy-pref-indicator pref="[[
                prefs.default_search_provider_data.template_url_data]]">
            </cr-policy-pref-indicator>
          </template>
          <div class="cr-row first">
            <site-favicon favicon-url="[[defaultSearchEngine_.iconURL]]"
                url="[[defaultSearchEngine_.url]]"
                icon-path="[[defaultSearchEngine_.iconPath]]">
            </site-favicon>
            <div class="search-engine-name">[[defaultSearchEngine_.name]]</div>
            <cr-button id="openDialogButton"
                on-click="onOpenDialogButtonClick_"
                disabled$="[[isDefaultSearchEngineEnforced_(
                    prefs.default_search_provider_data.template_url_data)]]">
              $i18n{searchEnginesChange}
            </cr-button>
          </div>
        </div>
        <template is="dom-if" if="[[showSearchEngineListDialog_]]" restamp>
          <settings-search-engine-list-dialog
              search-engines="[[searchEngines_]]"
              on-close="onSearchEngineListDialogClose_"
              on-search-engine-changed="onDefaultSearchEngineChangedInDialog_">
          </settings-search-engine-list-dialog>
        </template>
        <cr-toast id="confirmationToast" duration="10000">
          <div>[[confirmationToastLabel_]]</div>
        </cr-toast>
      </template>
      <template is="dom-if" if="[[!searchEngineChoiceSettingsUi_]]">
        <div id="searchExplanation" class="flex cr-padded-text">
          $i18n{searchExplanation}
          <a href="$i18n{searchExplanationLearnMoreURL}"
              aria-label="$i18n{searchExplanationLearnMoreA11yLabel}"
              target="_blank">
            $i18n{learnMore}
          </a>
        </div>
        <template is="dom-if" if="[[isDefaultSearchControlledByPolicy_(
            prefs.default_search_provider_data.template_url_data)]]">
          <cr-policy-pref-indicator pref="[[
              prefs.default_search_provider_data.template_url_data]]">
          </cr-policy-pref-indicator>
        </template>
        <select class="md-select" on-change="onChange_"
            aria-labelledby="searchExplanation"
            disabled$="[[isDefaultSearchEngineEnforced_(
                prefs.default_search_provider_data.template_url_data)]]">
          <template is="dom-repeat" items="[[searchEngines_]]">
            <option selected="[[item.default]]">[[item.name]]</option>
          </template>
        </select>
      </template>
    </div>
    <template is="dom-if"
        if="[[prefs.default_search_provider_data.template_url_data.extensionId]]">
      <div class="cr-row continuation">
        <extension-controlled-indicator
            class="flex"
            extension-id="[[
                prefs.default_search_provider_data.template_url_data.extensionId]]"
            extension-name="[[
                prefs.default_search_provider_data.template_url_data.controlledByName]]"
            extension-can-be-disabled="[[
                prefs.default_search_provider_data.template_url_data.extensionCanBeDisabled]]"
            on-disable-extension="onDisableExtension_">
        </extension-controlled-indicator>
      </div>
    </template>

    <!-- Manage search engines -->
    <cr-link-row class="hr" id="enginesSubpageTrigger"
        label="$i18n{searchEnginesManageSiteSearch}"
        on-click="onManageSearchEnginesClick_"
        role-description="$i18n{subpageArrowRoleDescription}"></cr-link-row>
  </div>
  <template is="dom-if" route-path="/searchEngines">
    <settings-subpage
        associated-control="[[$$('#enginesSubpageTrigger')]]"
        page-title="$i18n{searchEnginesManageSiteSearch}"
        search-label="$i18n{searchEnginesSearch}"
        search-term="{{searchEnginesFilter_}}">
      <settings-search-engines-page prefs="{{prefs}}"
          filter="[[searchEnginesFilter_]]">
    </settings-subpage>
  </template>
</settings-animated-pages>