chrome/browser/resources/history/history_item.html

    <style include="shared-style cr-icons">
      :host {
        display: block;
        outline: none;
        pointer-events: none;
      }

      #main-container {
        position: relative;
      }

      :host([is-card-end]) #main-container {
        margin-bottom: var(--card-padding-between);
      }

      :host([is-card-start][is-card-end]) #main-container {
        border-radius: var(--cr-card-border-radius);
      }

      #date-accessed {
        display: none;
      }

      :host([is-card-start]) #date-accessed {
        display: block;
        font-size: 123%;
        font-weight: 400;
        letter-spacing: .25px;
        padding-bottom: 4px;
        padding-top: 8px;
      }

      #item-container {
        align-items: center;
        display: flex;
        min-height: var(--item-height);
        padding-inline-start: 10px;
        pointer-events: auto;
      }

      :host([is-card-start]) #item-container {
        padding-top: var(--card-first-last-item-padding);
      }

      :host([is-card-end]) #item-container {
        padding-bottom: var(--card-first-last-item-padding);
      }

      #item-info {
        align-items: center;
        display: flex;
        flex: 1;
        min-width: 0;
      }

      #title-and-domain {
        align-items: center;
        display: flex;
        flex: 1;
        height: var(--item-height);
        margin-inline-end: auto;
        overflow: hidden;
        /* Allows the link's focus outline to be shown completely. */
        padding-inline-start: 5px;
      }

      #checkbox {
        margin: 12px;
      }

      /* #checkbox[unresolved] styling is necessary since cr-checkbox is being
         lazy-loaded. */
      #checkbox[unresolved] {
        border: 2px solid var(--cr-secondary-text-color);
        border-radius: 2px;
        content: '';
        display: block;
        height: 12px;
        width: 12px;
      }

      #time-accessed {
        color: var(--history-item-time-color);
        margin-inline-start: 6px;
        min-width: 96px;
      }

      #domain {
        color: var(--cr-secondary-text-color);
        margin-inline-start: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      #menu-button {
        --cr-icon-button-margin-end: 12px;
        --cr-icon-button-margin-start: 12px;
      }

      #bookmark-star {
        --cr-icon-button-fill-color: var(--interactive-color);
        --cr-icon-button-icon-size: 16px;
        --cr-icon-button-margin-start: 12px;
        --cr-icon-button-size: 32px;
      }

      #debug-container {
        color: var(--history-item-time-color);
        display: flex;
        padding-inline-start: 22px;
        pointer-events: auto;
      }

      .debug-info:not(:first-child) {
        margin-inline-start: 15px;
      }

      #time-gap-separator {
        border-inline-start: 1px solid #888;
        height: 15px;
        margin-inline-start: 77px;
      }

      @media (prefers-color-scheme: dark) {
        #time-gap-separator {
          border-color: var(--google-grey-500);
        }
      }

      #background-clip {
        /* Prevent artifacts when zoomed by overlapping the next item. */
        bottom: -0.4px;
        clip: rect(auto 999px auto -5px); /* Clip the top and bottom edges. */
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
        z-index: -1;
      }

      :host([is-card-end]) #background-clip {
        bottom: 0;
        clip: rect(auto 999px 500px -5px); /* Clip the top edge. */
      }

      :host-context([enable-branding-update]):host([is-card-start]) #background-clip {
        clip: auto;
      }

      #background {
        background-color: var(--cr-card-background-color);
        bottom: 0;
        box-shadow: var(--cr-card-shadow);
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
      }

      :host(:not([is-card-start])) #background {
        top: -5px; /* Draw the box shadow up the full edge of the background. */
      }

      :host([is-card-start]) #background {
        border-radius: var(--cr-card-border-radius) var(--cr-card-border-radius) 0 0;
      }

      :host([is-card-end]) #background {
        border-radius: 0 0 var(--cr-card-border-radius) var(--cr-card-border-radius);
      }

      :host([is-card-start][is-card-end]) #background {
        border-radius: var(--cr-card-border-radius);
      }

      #options {
        align-items: center;
        display: flex;
      }
    </style>

    <div id="main-container">
      <div id="background-clip" aria-hidden="true">
        <div id="background"></div>
      </div>
      <div id="date-accessed" class="card-title" role="row">
        <div role="rowheader">
          <div role="heading" aria-level="2">
            [[cardTitle_(numberOfItems, searchTerm, item.dateRelativeDay)]]
          </div>
        </div>
      </div>
      <div role="row" on-mousedown="onRowMousedown_" on-click="onRowClick_">
        <div id="item-container" focus-row-container>
          <div role="gridcell">
            <cr-checkbox id="checkbox" checked="[[selected]]" unresolved
                focus-row-control focus-type="cr-checkbox"
                on-mousedown="onCheckboxClick_" on-keydown="onCheckboxClick_"
                on-change="onCheckboxChange_" class="no-label"
                hidden="[[selectionNotAllowed_]]"
                disabled="[[selectionNotAllowed_]]">
              [[getEntrySummary_(item)]]
            </cr-checkbox>
          </div>
          <!-- ARIA hidden to avoid redundancy since timestamp is already part of
              |getEntrySummary_|. -->
          <span id="time-accessed" aria-hidden="true">
            [[item.readableTimestamp]]
          </span>
          <div role="gridcell" id="item-info">
            <div id="title-and-domain">
              <a href="[[item.url]]" id="link" class="website-link"
                  focus-row-control focus-type="link"
                  title="[[item.title]]" on-click="onLinkClick_"
                  on-contextmenu="onLinkRightClick_"
                  aria-describedby$="[[ariaDescribedByForHeading_]]">
                <div class="website-icon" id="icon"></div>
                <history-searched-label class="website-title"
                    title="[[item.title]]"
                    search-term="[[searchTerm]]"></history-searched-label>
              </a>
              <span id="domain">[[item.domain]]</span>
            </div>
            <template is="dom-if" if="[[item.starred]]">
              <cr-icon-button id="bookmark-star" iron-icon="cr:star"
                  on-click="onRemoveBookmarkTap_"
                  aria-hidden="true">
              </cr-icon-button>
            </template>
          </div>
          <div role="gridcell" id="options">
            <cr-icon-button id="menu-button" iron-icon="cr:more-vert"
                focus-row-control focus-type="cr-menu-button"
                title="$i18n{actionMenuDescription}" on-click="onMenuButtonTap_"
                aria-haspopup="menu"
                aria-describedby$="[[ariaDescribedByForHeading_]]">
            </cr-icon-button>
          </div>
        </div>
        <template is="dom-if" if="[[item.debug]]">
          <div id="debug-container" aria-hidden="true">
            <div class="debug-info">DEBUG</div>
            <div class="debug-info"
                hidden="[[!item.debug.isUrlInLocalDatabase]]">
              in local data
            </div>
            <div class="debug-info" hidden="[[!item.isUrlInRemoteUserData]]">
              in remote data
            </div>
            <div class="debug-info"
                hidden="[[!item.debug.isUrlInLocalDatabase]]">
              typed count: [[item.debug.typedCount]]
            </div>
            <div class="debug-info"
                hidden="[[!item.debug.isUrlInLocalDatabase]]">
              visit count: [[item.debug.visitCount]]
            </div>
          </div>
        </template>
        <div id="time-gap-separator" hidden="[[!hasTimeGap]]"></div>
      </div>
    </div>