chrome/browser/resources/md_extensions/keyboard_shortcuts.html

<link rel="import" href="chrome://resources/html/polymer.html">

<link rel="import" href="chrome://resources/cr_elements/cr_container_shadow_behavior.html">
<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
<link rel="import" href="chrome://resources/html/cr.html">
<link rel="import" href="chrome://resources/html/md_select_css.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
<link rel="import" href="item_behavior.html">
<link rel="import" href="shortcut_input.html">

<dom-module id="extensions-keyboard-shortcuts">
  <template>
    <style include="md-select cr-shared-style">
      :host {
        height: 100%;
      }

      .shortcut-card {
        @apply --cr-primary-text;
        @apply --cr-card-elevation;
        background-color: var(--cr-card-background-color);
        border-radius: var(--cr-card-border-radius);
        margin: 0 auto 16px auto;
        padding-bottom: 8px;
        width: var(--cr-toolbar-field-width);
      }

      .shortcut-card:last-of-type {
        margin-bottom: 64px;
      }

      #container {
        box-sizing: border-box;
        height: 100%;
        overflow: overlay;
        padding-top: 24px;
      }

      .command-entry {
        align-items: start;
        display: flex;
        /* Makes top/bottom spacing of each row more even, while leaving
           space for cr-input error message in between rows. */
        margin-bottom: -8px;
        padding-top: 16px;
      }

      .command-name {
        /* Align with cr-input by matching the field's top padding. */
        flex: 1;
        margin-top: 6px;
      }

      .command-entry .md-select {
        /* TODO(scottchen): line-height needs adjustment to fix large fonts. */
        line-height: 22px;
        margin-inline-start: var(--cr-section-padding);
      }

      .card-title {
        align-items: center;
        border-bottom: var(--cr-separator-line);
        display: flex;
        margin-bottom: 9px;
        padding: 16px var(--cr-section-padding);
        @apply --cr-title-text;
      }

      .icon {
        height: 20px;
        margin-inline-end: 20px;
        width: 20px;
      }

      .card-controls {
        /* We line up the controls with the name, which is after the
           20px left padding + 20px icon + 20px margin on the icon. */
        margin-inline-end: 20px;
        margin-inline-start: 60px;
      }
    </style>
    <div id="container">
      <template is="dom-repeat" items="[[calculateShownItems_(items.*)]]">
        <div class="shortcut-card">
          <div class="card-title">
            <img class="icon" src="[[item.iconUrl]]"
                alt$="[[appOrExtension(
                    item.type,
                    '$i18nPolymer{appIcon}',
                    '$i18nPolymer{extensionIcon}')]]">
            <span>[[item.name]]</span>
          </div>
          <div class="card-controls">
            <template is="dom-repeat" items="[[item.commands]]" as="command">
              <div class="command-entry" command="[[command]]">
                <span class="command-name">[[command.description]]</span>
                <extensions-shortcut-input delegate="[[delegate]]"
                    item="[[item.id]]" shortcut="[[command.keybinding]]"
                    command-name="[[command.name]]">
                </extensions-shortcut-input>
                <!-- Binding "value" to triggerScopeChange_ to trigger update
                    only after CommandScope_ becomes available. -->
                <select class="md-select" on-change="onScopeChanged_"
                    disabled$="[[computeScopeDisabled_(command)]]"
                    value="[[
                        triggerScopeChange_(command.scope, CommandScope_)]]">
                  <option value$="[[CommandScope_.CHROME]]">
                    $i18n{shortcutScopeInChrome}
                  </option>
                  <option value$="[[CommandScope_.GLOBAL]]">
                    $i18n{shortcutScopeGlobal}
                  </option>
                </select>
              </div>
            </template>
          </div>
        </div>
      </template>
    </div>
  </template>
  <script src="keyboard_shortcuts.js"></script>
</dom-module>