chrome/browser/resources/extensions/extension_code.js

   1 // Copyright 2014 The Chromium Authors. All rights reserved.
   2 // Use of this source code is governed by a BSD-style license that can be
   3 // found in the LICENSE file.
   4
   5 /**
   6  * @typedef {{afterHighlight: string,
   7  *            beforeHighlight: string,
   8  *            highlight: string,
   9  *            title: string}}
  10  */
  11 var ExtensionHighlight;
  12
  13 cr.define('extensions', function() {
  14   'use strict';
  15
  16   /**
  17    * ExtensionCode is an element which displays code in a styled div, and is
  18    * designed to highlight errors.
  19    * @constructor
  20    * @extends {HTMLDivElement}
  21    */
  22   function ExtensionCode(div) {
  23     div.__proto__ = ExtensionCode.prototype;
  24     return div;
  25   }
  26
  27   ExtensionCode.prototype = {
  28     __proto__: HTMLDivElement.prototype,
  29
  30     /**
  31      * Populate the content area of the code div with the given code. This will
  32      * highlight the erroneous section (if any).
  33      * @param {?ExtensionHighlight} code The 'highlight' strings represent the
  34      *     three portions of the file's content to display - the portion which
  35      *     is most relevant and should be emphasized (highlight), and the parts
  36      *     both before and after this portion. The title is the error message,
  37      *     which will be the mouseover hint for the highlighted region. These
  38      *     may be empty.
  39      *  @param {string} emptyMessage The message to display if the code
  40      *     object is empty (e.g., 'could not load code').
  41      */
  42     populate: function(code, emptyMessage) {
  43       // Clear any remnant content, so we don't have multiple code listed.
  44       this.clear();
  45
  46       // If there's no code, then display an appropriate message.
  47       if (!code ||
  48           (!code.highlight && !code.beforeHighlight && !code.afterHighlight)) {
  49         var span = document.createElement('span');
  50         span.classList.add('extension-code-empty');
  51         span.textContent = emptyMessage;
  52         this.appendChild(span);
  53         return;
  54       }
  55
  56       var sourceDiv = document.createElement('div');
  57       sourceDiv.classList.add('extension-code-source');
  58       this.appendChild(sourceDiv);
  59
  60       var lineCount = 0;
  61       var createSpan = function(source, isHighlighted) {
  62         lineCount += source.split('\n').length - 1;
  63         var span = document.createElement('span');
  64         span.className = isHighlighted ? 'extension-code-highlighted-source' :
  65                                          'extension-code-normal-source';
  66         span.textContent = source;
  67         return span;
  68       };
  69
  70       if (code.beforeHighlight)
  71         sourceDiv.appendChild(createSpan(code.beforeHighlight, false));
  72
  73       if (code.highlight) {
  74         var highlightSpan = createSpan(code.highlight, true);
  75         highlightSpan.title = code.message;
  76         sourceDiv.appendChild(highlightSpan);
  77       }
  78
  79       if (code.afterHighlight)
  80         sourceDiv.appendChild(createSpan(code.afterHighlight, false));
  81
  82       // Make the line numbers. This should be the number of line breaks + 1
  83       // (the last line doesn't break, but should still be numbered).
  84       var content = '';
  85       for (var i = 1; i < lineCount + 1; ++i)
  86         content += i + '\n';
  87       var span = document.createElement('span');
  88       span.textContent = content;
  89
  90       var linesDiv = document.createElement('div');
  91       linesDiv.classList.add('extension-code-line-numbers');
  92       linesDiv.appendChild(span);
  93       this.insertBefore(linesDiv, this.firstChild);
  94     },
  95
  96     /**
  97      * Clears the content of the element.
  98      */
  99     clear: function() {
 100       while (this.firstChild)
 101         this.removeChild(this.firstChild);
 102     },
 103
 104     /**
 105      * Scrolls to the error, if there is one. This cannot be called when the
 106      * div is hidden.
 107      */
 108     scrollToError: function() {
 109       var errorSpan = this.querySelector('.extension-code-highlighted-source');
 110       if (errorSpan)
 111         this.scrollTop = errorSpan.offsetTop - this.clientHeight / 2;
 112     }
 113   };
 114
 115   // Export
 116   return {
 117     ExtensionCode: ExtensionCode
 118   };
 119 });