chrome/browser/resources/internals/user_education/user_education_internals.html

<style include="cr-hidden-style cr-shared-style cr-nav-menu-item-style">
:host {
  display: flex;
  flex-direction: column;
  height: 100%;

  --iph-section-border-color: var(--google-green-300);
  --main-column-max-width: 680px;
  --side-bar-width: 200px;
  --tutorials-section-border-color: var(--google-blue-300);
}

@media (prefers-color-scheme: dark) {
  :host {
    --iph-section-border-color: var(--google-green-700);
    --tutorials-section-border-color: var(--google-blue-700);
  }
}

cr-toolbar {
  min-height: 56px;

  --cr-toolbar-center-basis: var(--main-column-max-width);
}

cr-toolbar:not([narrow]) {
  --cr-toolbar-left-spacer-width: var(--side-bar-width);
}

user-education-internals-card.highlighted {
  background-color: var(--cr-iph-anchor-highlight-color);
}

h2 {
  padding-inline: var(--cr-section-padding);
}

#cr-container-shadow-top {
  /* Needs to be higher than #container's z-index to appear above
    * scrollbars. */
  z-index: 2;
}

#container {
  align-items: flex-start;
  color: var(--cr-primary-text-color);
  display: flex;
  flex: 1;
  overflow: auto;
}

#left,
#main,
#right {
  flex: 1;
}

#left {
  height: 100%;
  position: sticky;
  top: 0;
}

#sidebar {
  width: var(--side-bar-width);
}

#main {
  display: flex;
  flex-basis: var(--main-column-max-width);
  justify-content: center;
  position: relative;
}

#content {
  width: var(--main-column-max-width);
}

#tutorials {
  border-inline-start: 1px solid var(--tutorials-section-border-color);
  padding-inline: var(--cr-section-padding);
  scroll-margin-top: 16px;
}

#iph {
  border-inline-start: 1px solid var(--iph-section-border-color);
  padding-inline: var(--cr-section-padding);
  scroll-margin-top: 16px;
}

user-education-internals-card {
  padding-block: var(--cr-section-vertical-padding);
  padding-inline: var(--cr-section-padding);
}

#session {
  padding-block-start: 0;
  padding-block-end: var(--cr-section-vertical-padding);
  margin-block-start: 0;
  margin-block-end: var(--cr-section-vertical-padding);
  padding-inline: var(--cr-section-padding);
}

#label h3 {
  margin-block: 0;
}

#left h2 {
  border-bottom: 1px solid var(--cr-separator-color);
  margin: 0 0 12px 0;
  padding: 16px;
}

/* Width is left + --cr-section-padding + main. */
@media (max-width: 920px) {
  #main {
    flex: 1;
    min-width: auto;
  }

  #content {
    flex-basis: var(--main-column-max-width);
    padding-inline: var(--cr-section-indent-padding);
    width: auto;
  }
}

</style>
<cr-toolbar id="toolbar" page-name="IPH Tester"
    clear-label="Clear Search"
    search-prompt="Search IPH and Tutorials"
    autofocus
    on-search-changed="onSearchChanged_"
    role="banner"
    narrow="{{narrow_}}"
    narrow-threshold="920"></cr-toolbar>
<div id="container">
  <div id="left" hidden$="[[narrow_]]">
    <div role="navigation">
      <iron-location hash="{{hash_}}"></iron-location>
      <h2>Navigation</h2>
      <cr-menu-selector id="menu" selectable="a" attr-for-selected="href"
          on-iron-activate="onSelectorActivate_" on-click="onLinkClick_"
          selected-attribute="selected">
        <a role="menuitem" href="#tutorials" class="cr-nav-menu-item">
          Tutorials
        </a>
        <a role="menuitem" href="#iph" class="cr-nav-menu-item">
          Feature Promos
        </a>
    </div>
  </div>
  <div id="main">
    <cr-toast id="errorMessageToast" duration="5000">
      <iron-icon id="errorMessageIcon" class="error-outline"
                 icon="cr:error-outline">
      </iron-icon>
      <span id="errorMessage">[[featurePromoErrorMessage_]]</span>
    </cr-toast>
    <div id="content">
      <div id="tutorials">
        <a name="tutorials"></a>
        <h2>Tutorials</h2>
        <template id="tutorials" is="dom-repeat" items="[[tutorials_]]">
          <user-education-internals-card
              id="[[item.internalName]]"
              hidden$="[[!promoFilter_(item, filter)]]"
              promo="[[item]]"
              on-promo-launch="startTutorial_">
          </user-education-internals-card>
        </template>
      </div>
      <div id="iph">
        <a name="iph"></a>
        <h2>Feature Promos</h2>
        <div id="session">
          <cr-expand-button expanded="{{sessionExpanded_}}">
            <div id="label"><h3>Session Data</h3></div>
          </cr-expand-button>
          <div id="sessionData" hidden="[[!sessionExpanded_]]">
            <template is="dom-repeat" items="[[sessionData_]]">
              <p><b>[[item.name]]</b> [[item.value]]</p>
            </template>
            <cr-button id="clearSession" on-click="clearSessionData_">
              Clear Session Data
            </cr-button>
          </div>
        </div>
        <template is="dom-repeat" id="promos" items="[[featurePromos_]]">
          <user-education-internals-card
              id="[[item.internalName]]"
              hidden$="[[!promoFilter_(item, filter)]]"
              promo="[[item]]"
              on-promo-launch="showFeaturePromo_"
              on-clear-promo-data="clearPromoData_">
          </user-education-internals-card>
        </template>
      </div>
    </div>
  </div>
  <div id="right" hidden$="[[narrow_]]"></div>
</div>