blob: 15ed0416a89a707d237c05ed88079f6390a886a4 [file] [log] [blame]
<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">
<link rel="import" href="shared_style.html">
<dom-module id="extensions-error-page">
<template>
<style include="paper-button-style cr-icons cr-shared-style shared-style">
:host {
display: block;
height: 100%;
}
iron-icon {
--iron-icon-fill-color: var(--google-grey-refresh-700);
@apply --cr-icon-height-width;
flex-shrink: 0;
}
iron-icon[icon='cr:warning'] {
/* TODO(dbeam): find dark mode equivalent for this orange. */
--iron-icon-fill-color: var(--paper-orange-500);
}
iron-icon[icon='cr:error'] {
--iron-icon-fill-color: var(--error-color);
}
.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-inline-start: 0;
}
.error-item paper-icon-button-light {
margin-inline-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 {
flex-grow: 1;
margin-inline-start: 10px;
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);
color: var(--google-grey-900); /* Same in light & dark modes. */
}
extensions-code-section {
height: 200px;
margin-bottom: 20px;
}
:host-context(.focus-outline-visible) .start:focus {
outline: -webkit-focus-ring-color auto 5px;
}
.start:focus {
outline: none;
}
.context-url {
word-wrap: break-word;
}
</style>
<div class="page-container" id="container">
<div class="page-content">
<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>
<extensions-code-section code="[[code_]]"
could-not-display-code="$i18n{noErrorsToShow}">
</extensions-code-section>
</div>
</iron-collapse>
</div>
</template>
</div>
</div>
</div>
</div>
</template>
<script src="error_page.js"></script>
</dom-module>