chrome/browser/resources/md_extensions/code_section.html

<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 {
        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 {
        color: var(--paper-grey-800);
        text-align: center;
      }

      .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>