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