blob: 0d74f4b20e7c119a9f8ea496ee093d1c3b02f836 [file] [log] [blame]
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
<link rel="import" href="chrome://resources/html/cr.html">
<link rel="import" href="chrome://resources/html/i18n_behavior.html">
<link rel="import" href="chrome://resources/html/load_time_data.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
<dom-module id="extensions-code-section">
<template>
<style include="cr-hidden-style">
:host {
display: block;
}
#scroll-container {
/* TODO(crbug.com/937159): all of the code themed for "light mode" and
* needs to be updated to co-exist with "dark mode" when specs are
* available. */
background: white;
border: 1px solid var(--paper-grey-500);
height: 100%;
overflow: auto;
position: relative;
}
#main {
color: var(--paper-grey-800);
display: flex;
font-family: monospace;
min-height: 100%;
}
#line-numbers {
background: var(--paper-grey-300);
border-right: 1px solid var(--paper-grey-500);
display: flex;
flex-direction: column;
padding: 0 8px;
text-align: right;
}
#source {
display: flex;
flex-direction: column;
margin-inline-start: 4px;
}
#line-numbers span,
#source span {
white-space: pre;
}
#no-code {
text-align: center;
}
:host-context(html:not([dark])) #no-code {
color: var(--paper-grey-800);
}
.more-code {
color: var(--paper-grey-500);
}
#highlight-description {
height: 0;
overflow: hidden;
}
</style>
<div id="scroll-container" hidden="[[!highlighted_]]">
<div id="main">
<!-- Line numbers are not useful to a screenreader -->
<div id="line-numbers" aria-hidden="true">
<div class="more-code before" hidden="[[!truncatedBefore_]]">
...
</div>
<span>[[lineNumbers_]]</span>
<div class="more-code after" hidden="[[!truncatedAfter_]]">
...
</div>
</div>
<div id="source">
<div class="more-code before" hidden="[[!truncatedBefore_]]">
[[getLinesNotShownLabel_(
truncatedBefore_,
'$i18nPolymer{errorLinesNotShownSingular}',
'$i18nPolymer{errorLinesNotShownPlural}')]]
</div>
<span><!-- Whitespace is preserved in this span. Ignore new lines.
--><span>[[before_]]</span><!--
--><mark aria-label$="[[highlighted_]]"
aria-describedby="highlight-description"><!--
--><span aria-hidden="true">[[highlighted_]]</span><!--
--></mark><!--
--><span>[[after_]]</span><!--
--></span>
<div class="more-code after" hidden="[[!truncatedAfter_]]">
[[getLinesNotShownLabel_(
truncatedAfter_,
'$i18nPolymer{errorLinesNotShownSingular}',
'$i18nPolymer{errorLinesNotShownPlural}')]]
</div>
</div>
</div>
</div>
<div id="no-code" hidden="[[highlighted_]]">[[couldNotDisplayCode]]</div>
<div id="highlight-description" aria-hidden="true">
[[highlightDescription_]]
</div>
</template>
<script src="code_section.js"></script>
</dom-module>