chrome/browser/resources/md_extensions/error_page.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/cr_icons_css.html">
<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
<link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
<link rel="import" href="chrome://resources/html/cr.html">
<link rel="import" href="chrome://resources/html/cr/ui/focus_outline_manager.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-collapse/iron-collapse.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
<link rel="import" href="code_section.html">
<link rel="import" href="item_util.html">
<link rel="import" href="navigation_helper.html">

<dom-module id="extensions-error-page">
  <template>
    <style include="paper-button-style cr-icons cr-shared-style">
      :host {
        display: block;
        height: 100%;
      }

      #container {
        height: 100%;
        overflow: overlay;
      }

      iron-icon {
        --iron-icon-fill-color: var(--paper-grey-500);
        @apply(--cr-icon-height-width);
      }

      iron-icon[icon=warning] {
        --iron-icon-fill-color: var(--paper-orange-500);
      }

      iron-icon[icon=error] {
        --iron-icon-fill-color: var(--paper-red-700);
      }

      #main {
        background-color: white;
        margin: auto;
        min-height: 100%;
        width: 640px;
      }

      .section {
        padding: 0 var(--cr-section-padding);
      }

      #heading {
        height: 40px;
        margin-bottom: 30px;
        padding: 8px 12px 0;
        @apply(--cr-title-text);
      }

      #errors-list {
        min-height: 100px;
      }

      .error-item {
        @apply(--cr-section);
        padding-left: 0;
      }

      .error-item button[is='paper-icon-button-light'] {
        -webkit-margin-end: 0;
      }

      .error-item.selected {
        background-color: rgba(0, 0, 0, 0.08);
      }

      .error-item .start {
        align-items: center;
        align-self: stretch;  /* Makes the tappable area fill its parent. */
        display: flex;
        flex: 1;
        padding: 0 var(--cr-section-padding);
      }

      .error-message {
        -webkit-margin-start: 10px;
        flex-grow: 1;
      }

      #devtools-controls {
        padding: 0 var(--cr-section-padding);
      }

      #stack-trace-heading {
        @apply(--cr-title-text);
        align-items: center;
        display: flex;
        height: var(--cr-section-min-height);
      }

      #stack-trace-container {
        list-style: none;
        margin-top: 0;
        padding: 0;
      }

      #stack-trace-container li {
        cursor: pointer;
        font-family: monospace;
        padding: 4px;
      }

      #stack-trace-container li.selected,
      #stack-trace-container li:hover {
        background: var(--google-blue-100);
      }

      #dev-tool-button {
        margin-bottom: 20px;
        max-width: 300px;
      }

      extensions-code-section {
        background: white;
        height: 200px;
      }

      /* TODO(scottchen): extract to shared location from settings. */
      .separator {
        --separator-gaps: 9px;
        -webkit-border-start: var(--cr-separator-line);
        -webkit-margin-end: var(--cr-section-padding);
        /**
         * Makes the tappable area fill its parent.
         * TODO(scottchen): This is an explicit reminder to override once
         * .separator styling is extracted from settings.
         */
        -webkit-margin-start: 0;
        flex-shrink: 0;
        height: calc(var(--cr-section-min-height) -
            var(--separator-gaps));

      }

      /* TODO(scottchen): extract to shared location from settings. */
      .separator + button[is='paper-icon-button-light'] {
        -webkit-margin-start: var(--cr-icon-ripple-margin);
      }

      :host-context(.focus-outline-visible) .start:focus {
        outline: -webkit-focus-ring-color auto 5px;
      }

      .start:focus {
        outline: none;
      }
    </style>
    <div id="container">
      <div id="main">
        <div id="heading">
          <button id="close-button" is="paper-icon-button-light"
              class="icon-arrow-back no-overlap" on-tap="onCloseButtonTap_">
          </button>
          <span>$i18n{errorsPageHeading}</span>
        </div>
        <div class="section">
          <extensions-code-section id="code-section"
              could-not-display-code="$i18n{noErrorsToShow}">
          </extensions-code-section>
          <div id="errors-list">
            <template is="dom-repeat" items="[[entries_]]">
              <div class="item-container">
                <div class$="error-item
                    [[computeErrorClass_(item, selectedEntry_)]]">
                  <div actionable class=" start" on-tap="onErrorItemAction_"
                      on-keydown="onErrorItemAction_" tabindex="0">
                    <iron-icon icon$="[[computeErrorIcon_(item)]]"></iron-icon>
                    <div class="error-message">[[item.message]]</div>
                    <div class$="cr-icon [[iconName_(index, selectedEntry_)]]"
                        hidden="[[!computeIsRuntimeError_(item)]]">
                    </div>
                  </div>
                  <div class="separator"></div>
                  <button is="paper-icon-button-light" class="icon-delete-gray"
                      on-tap="onDeleteErrorAction_"
                      on-keydown="onDeleteErrorAction_">
                  </button>
                </div>
                <template is="dom-if" if="[[computeIsRuntimeError_(item)]]">
                  <iron-collapse opened="[[isOpened_(index, selectedEntry_)]]">
                    <div id="devtools-controls">
                      <div id="stack-trace-heading">
                        $i18n{stackTrace}
                      </div>
                      <ul id="stack-trace-container">
                        <template is="dom-repeat" items="[[item.stackTrace]]">
                          <li on-tap="onStackFrameTap_"
                              hidden="[[!shouldDisplayFrame_(item.url)]]"
                              class$="[[getStackFrameClass_(item,
                                  selectedStackFrame_)]]">
                            [[getStackTraceLabel_(item)]]
                          </li>
                        </template>
                      </ul>
                      <paper-button id="dev-tool-button" class="action-button"
                          disabled="[[!item.canInspect]]"
                          on-tap="onDevToolButtonTap_">
                        $i18n{openInDevtool}
                      </paper-button>
                    </div>
                  </iron-collapse>
                </template>
              </div>
            </template>
          </div>
        </div>
      </div>
    </div>
  </template>
  <script src="error_page.js"></script>
</dom-module>