| <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/icons.html"> |
| <link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.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/cr/ui/focus_outline_manager.html"> |
| <link rel="import" href="chrome://resources/html/cr/ui/focus_without_ink.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-icon/iron-icon.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(--google-grey-refresh-700); |
| @apply --cr-icon-height-width; |
| flex-shrink: 0; |
| } |
| |
| iron-icon[icon='cr:warning'] { |
| --iron-icon-fill-color: var(--paper-orange-500); |
| } |
| |
| iron-icon[icon='cr:error'] { |
| --iron-icon-fill-color: var(--paper-red-700); |
| } |
| |
| /* TODO(dpapad): There is a lot of duplicated styling between |
| * detail_view.html and error_page.html. Refactor such that no duplication |
| * happens.*/ |
| #main { |
| @apply --cr-card-elevation; |
| background-color: white; |
| margin: auto; |
| min-height: 100%; |
| width: 640px; |
| } |
| |
| .section { |
| padding: 0 var(--cr-section-padding); |
| } |
| |
| #heading { |
| align-items: center; |
| display: flex; |
| height: 40px; |
| margin-bottom: 30px; |
| padding: 8px 12px 0; |
| @apply --cr-title-text; |
| } |
| |
| #heading span { |
| flex: 1; |
| margin: 0 10px; |
| } |
| |
| #errorsList { |
| min-height: 100px; |
| } |
| |
| .error-item { |
| @apply --cr-section; |
| padding-left: 0; |
| } |
| |
| .error-item 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; |
| word-break: break-word; |
| } |
| |
| .devtools-controls { |
| padding: 0 var(--cr-section-padding); |
| } |
| |
| .details-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); |
| } |
| |
| extensions-code-section { |
| background: white; |
| height: 200px; |
| margin-bottom: 20px; |
| } |
| |
| /* 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 + 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"> |
| <paper-icon-button-light class="icon-arrow-back no-overlap"> |
| <button id="closeButton" aria-label="$i18n{back}" |
| on-click="onCloseButtonTap_"> |
| </button> |
| </paper-icon-button-light> |
| <span>$i18n{errorsPageHeading}</span> |
| <paper-button on-click="onClearAllTap_" hidden="[[!entries_.length]]"> |
| $i18n{clearAll} |
| </paper-button> |
| </div> |
| <div class="section"> |
| <div id="errorsList"> |
| <template is="dom-repeat" items="[[entries_]]"> |
| <div class="item-container"> |
| <div class$="error-item |
| [[computeErrorClass_(item, selectedEntry_)]]"> |
| <div actionable class="start" on-click="onErrorItemAction_" |
| on-keydown="onErrorItemAction_" tabindex="0" |
| role="button" aria-expanded$="[[isAriaExpanded_( |
| index, selectedEntry_)]]"> |
| <iron-icon icon$="cr:[[computeErrorIcon_(item)]]" |
| title$="[[computeErrorTypeLabel_(item)]]"> |
| </iron-icon> |
| <div id$="[[item.id]]" class="error-message"> |
| [[item.message]] |
| </div> |
| <div class$="cr-icon [[iconName_(index, selectedEntry_)]]"> |
| </div> |
| </div> |
| <div class="separator"></div> |
| <paper-icon-button-light class="icon-delete-gray"> |
| <button on-click="onDeleteErrorAction_" |
| aria-describedby$="[[item.id]]" |
| aria-label="$i18n{clearEntry}" |
| on-keydown="onDeleteErrorAction_"> |
| </button> |
| </paper-icon-button-light> |
| </div> |
| <iron-collapse opened="[[isOpened_(index, selectedEntry_)]]"> |
| <div class="devtools-controls"> |
| <template is="dom-if" |
| if="[[computeIsRuntimeError_(item)]]"> |
| <div class="details-heading"> |
| $i18n{errorContext} |
| </div> |
| <span class="context-url"> |
| [[getContextUrl_( |
| item, '$i18nPolymer{errorContextUnknown}')]] |
| </span> |
| <div class="details-heading"> |
| $i18n{stackTrace} |
| </div> |
| <ul class="stack-trace-container" |
| on-keydown="onStackKeydown_"> |
| <template is="dom-repeat" items="[[item.stackTrace]]"> |
| <li on-click="onStackFrameTap_" |
| tabindex$="[[getStackFrameTabIndex_(item, |
| selectedStackFrame_)]]" |
| hidden="[[!shouldDisplayFrame_(item.url)]]" |
| class$="[[getStackFrameClass_(item, |
| selectedStackFrame_)]]"> |
| [[getStackTraceLabel_(item)]] |
| </li> |
| </template> |
| </ul> |
| </template> |
| <template is="dom-if" |
| if="[[isOpened_(index, selectedEntry_)]]"> |
| <extensions-code-section code="[[code_]]" |
| could-not-display-code="$i18n{noErrorsToShow}"> |
| </extensions-code-section> |
| </template> |
| </div> |
| </iron-collapse> |
| </div> |
| </template> |
| </div> |
| </div> |
| </div> |
| </div> |
| </template> |
| <script src="error_page.js"></script> |
| </dom-module> |
