chromium/chrome/browser/resources/commerce/product_specifications/app.html

<style include="cr-hidden-style">
  :host {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: fit-content;
  }

  product-specifications-header {
    height: 38px;
    margin-bottom: 24px;
    width: 100%;
  }

  #summaryContainer {
    background-color: var(--color-product-specifications-summary-background);
    border-radius: 12px;
    display: flex;
    min-height: 50px;
    min-width: 758px;
    padding: 16px;
    width: fit-content;
  }

  :host([show-table-data-unavailable-container_]) #summaryContainer {
    justify-content: center;
  }

  #tableDataUnavailable {
    align-items: center;
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 100%;
    min-height: 589px;
  }

  #emptyImg {
    height: 204px;
    margin-top: 93px;
  }

  .table-data-unavailable-message {
    font-size: 20px;
    font-weight: 500;
    line-height: 24px;
    margin-top: 11px;
  }

  .table-data-unavailable-description {
    font-size: 14px;
    line-height: 20px;
    margin-top: 8px;
    width: 360px;
  }

  .table-data-unavailable-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    width: 100%;
  }

  product-selector {
    border-radius: 8px;
    margin-bottom: 90px;
    margin-top: 32px;
  }

  horizontal-carousel[can-scroll] #summaryTable {
    --last-column-overflow-x: hidden;
  }

  #newColumnSelector {
    margin-inline-start: 8px;
  }

  #footer {
    align-items: center;
    color: var(--color-side-panel-card-secondary-foreground);
    display: flex;
    font-size: 11px;
    font-weight: 400;
    gap: 16px;
    justify-content: flex-start;
    line-height: 16px;
    margin-top: 20px;
    max-width: 566px;
  }

  #footer a {
    color: var(--cr-link-color);
  }

  #turnOnSyncButton {
    margin-top: 32px;
  }
</style>
<product-specifications-header id="header" subtitle="[[setName_]]"
    menu-button-disabled$="[[loadingState_.loading]]"
    on-delete-click="deleteSet_"
    on-name-change="updateSetName_"
    on-see-all-click="seeAllSets_">
</product-specifications-header>

<div id="summaryContainer">
  <div id="tableDataUnavailable"
      hidden="[[!showTableDataUnavailableContainer_]]">
    <picture>
      <source srcset="images/empty_state_dark.svg"
          media="(prefers-color-scheme: dark)">
      <img id="emptyImg" src="images/empty_state.svg">
    </picture>
    <div id="empty"
        class="table-data-unavailable-container"
        hidden$="[[!isAppStateTableEmpty_(appState_)]]">
      <div class="table-data-unavailable-message">$i18n{emptyStateTitle}</div>
      <div class="table-data-unavailable-description">
        $i18n{emptyStateDescription}
      </div>
      <product-selector id="productSelector"
          on-selected-url-change="onUrlAdd_">
      </product-selector>
    </div>
    <div id="syncPromo"
        class="table-data-unavailable-container"
        hidden="[[!isAppStateSyncScreen_(appState_)]]">
      <div class="table-data-unavailable-message">
        $i18n{compareSyncMessage}
      </div>
      <div class="table-data-unavailable-description">
        $i18n{compareSyncDescription}
      </div>
      <cr-button id="turnOnSyncButton" class="action-button"
          on-click="showSyncSetupFlow_">
        $i18n{compareSyncButton}
      </cr-button>
    </div>
    <div id="error"
        class="table-data-unavailable-container"
        hidden="[[!isAppStateError_(appState_)]]">
      <div class="table-data-unavailable-message">
        $i18n{compareErrorMessage}
      </div>
      <div class="table-data-unavailable-description">
        $i18n{compareErrorDescription}
      </div>
    </div>
  </div>
  <!-- TODO(b/357616541): Give loading state the same max-width as
       the horizontal-carousel and restyle accordingly. -->
  <loading-state id="loading" hidden$="[[!isAppStateLoading_(appState_)]]"
      column-count="[[loadingState_.urlCount]]">
  </loading-state>
  <horizontal-carousel id="specs"
      hidden$="[[!isAppStateTablePopulated_(appState_)]]">
      <product-specifications-table slot="table"
          id="summaryTable"
          columns="[[tableColumns_]]"
          on-url-change="onUrlChange_"
          on-url-remove="onUrlRemove_"
          on-url-order-update="onUrlOrderUpdate_"
          on-unavailable-action-attempted="showOfflineToast_">
    </product-specifications-table>
    <new-column-selector slot="selector" id="newColumnSelector"
        excluded-urls="[[getTableUrls_(tableColumns_)]]"
        on-selected-url-change="onUrlAdd_">
    </new-column-selector>
  </horizontal-carousel>
</div>
<div id="footer" hidden="[[showTableDataUnavailableContainer_]]">
  <div id="disclaimer">[[getDisclaimerText_()]]
    <a id="learnMoreLink" href="$i18n{compareLearnMoreUrl}"
        target="_blank" aria-label="$i18n{learnMoreA11yLabel}">
      $i18n{learnMore}
    </a>
  </div>
  <template is="dom-if"
      if="[[canShowFeedbackButtons_(productSpecificationsFeatureState_.*)]]">
    <div id="feedbackLoading" hidden$="[[!isAppStateLoading_(appState_)]]">
      <cr-loading-gradient>
        <svg height="16" width="44" xmlns="http://www.w3.org/2000/svg">
          <clipPath>
            <circle cx="8" cy="8" r="8"></circle>
            <circle cx="36" cy="8" r="8"></circle>
          </clipPath>
        </svg>
      </cr-loading-gradient>
    </div>
    <cr-feedback-buttons id="feedbackButtons"
        hidden$="[[loadingState_.loading]]"
        on-selected-option-changed="onFeedbackSelectedOptionChanged_">
    </cr-feedback-buttons>
  </template>
</div>
<cr-toast id="offlineToast">
  <div>$i18n{offlineMessage}</div>
</cr-toast>