chrome/browser/resources/suggest_internals/app.html

<style include="cr-page-host-style cr-shared-style">
  :host {
    display: block;
    height: 100%;
    overflow: hidden;
  }

  cr-toolbar {
    --cr-toolbar-left-spacer-width: 300px;
  }

  #requests {
    height: calc(100% - var(--cr-toolbar-height));
    overflow: auto;
  }

  [slot='header'] {
    padding: 0 var(--cr-section-padding) var(--cr-section-padding);
  }
</style>
<cr-toolbar page-name="Suggest Debug Tool" search-prompt="Filter requests"
    clear-label="Clear filter" on-search-changed="onFilterChanged_"
    always-show-logo show-search>
</cr-toolbar>
<div id="requests">
  <template is="dom-if" if="[[hardcodedRequest_]]">
    <suggest-request request="[[hardcodedRequest_]]"
        on-show-toast="onShowToast_"
        on-open-view-response-dialog="onOpenViewResponseDialog_"
        on-open-hardcode-response-dialog="onOpenHardcodeResponseDialog_">
    </suggest-request>
  </template>
  <template is="dom-repeat" items="[[requests_]]" as="request"
      filter="[[requestFilter_(filter_)]]">
    <suggest-request request="[[request]]"
        on-show-toast="onShowToast_"
        on-open-view-request-dialog="onOpenViewRequestDialog_"
        on-open-view-response-dialog="onOpenViewResponseDialog_"
        on-open-hardcode-response-dialog="onOpenHardcodeResponseDialog_">
    </suggest-request>
  </template>
</div>
<cr-dialog id="viewRequestDialog">
  <div slot="header">
    Copy the encoded proto value for this key from the request data, follow
    the respective link, and click "Import from clipboard" to see its content.
  </div>
  <div slot="body">
    <cr-link-row class="hr" external label="X-Client-Data"
        on-click="onClientDataLinkClick_">
    </cr-link-row>
  </div>
  <div slot="button-container">
    <cr-button class="cancel-button" on-click="onCloseDialogs_">
      Close
    </cr-button>
  </div>
</cr-dialog>
<cr-dialog id="viewResponseDialog">
  <div slot="header">
    Copy the encoded proto value for these keys from the JSON response, follow
    the respective link, and click "Import from clipboard" to see its content.
  </div>
  <div slot="body">
    <cr-link-row class="hr" external label="google:groupsinfo"
        on-click="onGroupsInfoLinkClick_">
    </cr-link-row>
    <cr-link-row class="hr" external label="google:entityinfo"
        on-click="onEntityInfoLinkClick_">
    </cr-link-row>
  </div>
  <div slot="button-container">
    <cr-button class="cancel-button" on-click="onCloseDialogs_">
      Close
    </cr-button>
  </div>
</cr-dialog>
<cr-dialog id="hardcodeResponseDialog">
  <div slot="header">
    Confirm to hardcode the following response for all Suggest requests.
  </div>
  <div slot="body">
    <cr-textarea label="Response" value="{{responseText_}}" autogrow>
    </cr-textarea>
  </div>
  <div slot="button-container">
    <cr-button class="cancel-button" on-click="onCloseDialogs_">
      Cancel
    </cr-button>
    <cr-button class="action-button"
        on-click="onConfirmHardcodeResponseDialog_">
      Confirm
    </cr-button>
  </div>
</cr-dialog>
<cr-toast id="toast" duration="[[toastDuration_]]">
  <div>[[toastMessage_]]</div>
</cr-toast>