/* * Copyright (C) 2009 Google Inc. All rights reserved. * Copyright (C) 2010 Apple Inc. All rights reserved. * * Redistribution and use in source and binary forms, with or without * modification, are permitted provided that the following conditions are * met: * * * Redistributions of source code must retain the above copyright * notice, this list of conditions and the following disclaimer. * * Redistributions in binary form must reproduce the above * copyright notice, this list of conditions and the following disclaimer * in the documentation and/or other materials provided with the * distribution. * * Neither the name of Google Inc. nor the names of its * contributors may be used to endorse or promote products derived from * this software without specific prior written permission. * * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. */ WebInspector.TextViewer = function(textModel, platform, url) { this._textModel = textModel; this._textModel.changeListener = this._textChanged.bind(this); this.element = document.createElement("div"); this.element.className = "text-editor monospace"; var syncScrollListener = this._syncScroll.bind(this); var syncDecorationsForLineListener = this._syncDecorationsForLine.bind(this); this._mainPanel = new WebInspector.TextEditorMainPanel(this._textModel, url, syncScrollListener, syncDecorationsForLineListener); this._gutterPanel = new WebInspector.TextEditorGutterPanel(this._textModel, syncDecorationsForLineListener); this.element.appendChild(this._mainPanel.element); this.element.appendChild(this._gutterPanel.element); } WebInspector.TextViewer.prototype = { set mimeType(mimeType) { this._mainPanel.mimeType = mimeType; }, set readOnly(readOnly) { this._mainPanel.readOnly = readOnly; }, get textModel() { return this._textModel; }, revealLine: function(lineNumber) { this._mainPanel.revealLine(lineNumber); }, addDecoration: function(lineNumber, decoration) { this._mainPanel.addDecoration(lineNumber, decoration); this._gutterPanel.addDecoration(lineNumber, decoration); }, removeDecoration: function(lineNumber, decoration) { this._mainPanel.removeDecoration(lineNumber, decoration); this._gutterPanel.removeDecoration(lineNumber, decoration); }, markAndRevealRange: function(range) { this._mainPanel.markAndRevealRange(range); }, highlightLine: function(lineNumber) { this._mainPanel.highlightLine(lineNumber); }, clearLineHighlight: function() { this._mainPanel.clearLineHighlight(); }, freeCachedElements: function() { this._mainPanel.freeCachedElements(); this._gutterPanel.freeCachedElements(); }, editLine: function(lineRow, callback) { this._mainPanel.editLine(lineRow, callback); }, get scrollTop() { return this._mainPanel.element.scrollTop; }, set scrollTop(scrollTop) { this._mainPanel.element.scrollTop = scrollTop; }, get scrollLeft() { return this._mainPanel.element.scrollLeft; }, set scrollLeft(scrollLeft) { this._mainPanel.element.scrollLeft = scrollLeft; }, beginUpdates: function() { this._mainPanel.beginUpdates(); this._gutterPanel.beginUpdates(); }, endUpdates: function() { this._mainPanel.endUpdates(); this._gutterPanel.endUpdates(); }, resize: function() { this._mainPanel.resize(); this._gutterPanel.resize(); this._updatePanelOffsets(); }, // WebInspector.TextModel listener _textChanged: function(oldRange, newRange, oldText, newText) { this._mainPanel.textChanged(); this._gutterPanel.textChanged(); this._updatePanelOffsets(); }, _updatePanelOffsets: function() { var lineNumbersWidth = this._gutterPanel.element.offsetWidth; if (lineNumbersWidth) this._mainPanel.element.style.setProperty("left", lineNumbersWidth + "px"); else this._mainPanel.element.style.removeProperty("left"); // Use default value set in CSS. }, _syncScroll: function() { // Async call due to performance reasons. setTimeout(function() { var mainElement = this._mainPanel.element; var gutterElement = this._gutterPanel.element; // Handle horizontal scroll bar at the bottom of the main panel. if (gutterElement.offsetHeight > mainElement.clientHeight) gutterElement.style.setProperty("padding-bottom", (gutterElement.offsetHeight - mainElement.clientHeight) + "px"); else gutterElement.style.removeProperty("padding-bottom"); gutterElement.scrollTop = mainElement.scrollTop; }.bind(this), 0); }, _syncDecorationsForLine: function(lineNumber) { if (lineNumber >= this._textModel.linesCount) return; var mainChunk = this._mainPanel.makeLineAChunk(lineNumber); var gutterChunk = this._gutterPanel.makeLineAChunk(lineNumber); var height = mainChunk.height; if (height) gutterChunk.element.style.setProperty("height", height + "px"); else gutterChunk.element.style.removeProperty("height"); } } WebInspector.TextEditorChunkedPanel = function(textModel) { this._textModel = textModel; this._defaultChunkSize = 50; this._paintCoalescingLevel = 0; this._domUpdateCoalescingLevel = 0; } WebInspector.TextEditorChunkedPanel.prototype = { get textModel() { return this._textModel; }, revealLine: function(lineNumber) { if (lineNumber >= this._textModel.linesCount) return; var chunk = this.makeLineAChunk(lineNumber); chunk.element.scrollIntoViewIfNeeded(); }, addDecoration: function(lineNumber, decoration) { var chunk = this.makeLineAChunk(lineNumber); chunk.addDecoration(decoration); }, removeDecoration: function(lineNumber, decoration) { var chunk = this.makeLineAChunk(lineNumber); chunk.removeDecoration(decoration); }, textChanged: function(oldRange, newRange, oldText, newText) { this._buildChunks(); }, _buildChunks: function() { this.beginDomUpdates(); this.element.removeChildren(); this._textChunks = []; for (var i = 0; i < this._textModel.linesCount; i += this._defaultChunkSize) { var chunk = this._createNewChunk(i, i + this._defaultChunkSize); this._textChunks.push(chunk); this.element.appendChild(chunk.element); } this._repaintAll(); this.endDomUpdates(); }, makeLineAChunk: function(lineNumber) { if (!this._textChunks) this._buildChunks(); var chunkNumber = this._chunkNumberForLine(lineNumber); var oldChunk = this._textChunks[chunkNumber]; if (oldChunk.linesCount === 1) return oldChunk; this.beginDomUpdates(); var wasExpanded = oldChunk.expanded; oldChunk.expanded = false; var insertIndex = chunkNumber + 1; // Prefix chunk. if (lineNumber > oldChunk.startLine) { var prefixChunk = this._createNewChunk(oldChunk.startLine, lineNumber); this._textChunks.splice(insertIndex++, 0, prefixChunk); this.element.insertBefore(prefixChunk.element, oldChunk.element); } // Line chunk. var lineChunk = this._createNewChunk(lineNumber, lineNumber + 1); this._textChunks.splice(insertIndex++, 0, lineChunk); this.element.insertBefore(lineChunk.element, oldChunk.element); // Suffix chunk. if (oldChunk.startLine + oldChunk.linesCount > lineNumber + 1) { var suffixChunk = this._createNewChunk(lineNumber + 1, oldChunk.startLine + oldChunk.linesCount); this._textChunks.splice(insertIndex, 0, suffixChunk); this.element.insertBefore(suffixChunk.element, oldChunk.element); } // Remove enclosing chunk. this._textChunks.splice(chunkNumber, 1); this.element.removeChild(oldChunk.element); if (wasExpanded) { if (prefixChunk) prefixChunk.expanded = true; lineChunk.expanded = true; if (suffixChunk) suffixChunk.expanded = true; } this.endDomUpdates(); return lineChunk; }, _scroll: function() { this._scheduleRepaintAll(); if (this._syncScrollListener) this._syncScrollListener(); }, _scheduleRepaintAll: function() { if (this._repaintAllTimer) clearTimeout(this._repaintAllTimer); this._repaintAllTimer = setTimeout(this._repaintAll.bind(this), 50); }, beginUpdates: function() { this._paintCoalescingLevel++; }, endUpdates: function() { this._paintCoalescingLevel--; if (!this._paintCoalescingLevel) this._repaintAll(); }, beginDomUpdates: function() { this._domUpdateCoalescingLevel++; }, endDomUpdates: function() { this._domUpdateCoalescingLevel--; }, _chunkNumberForLine: function(lineNumber) { for (var i = 0; i < this._textChunks.length; ++i) { var line = this._textChunks[i].startLine; if (lineNumber >= line && lineNumber < line + this._textChunks[i].linesCount) return i; } return this._textChunks.length - 1; }, _chunkForLine: function(lineNumber) { return this._textChunks[this._chunkNumberForLine(lineNumber)]; }, _repaintAll: function() { delete this._repaintAllTimer; if (this._paintCoalescingLevel || this._dirtyLines) return; if (!this._textChunks) this._buildChunks(); var visibleFrom = this.element.scrollTop; var visibleTo = this.element.scrollTop + this.element.clientHeight; var offset = 0; var fromIndex = -1; var toIndex = 0; for (var i = 0; i < this._textChunks.length; ++i) { var chunk = this._textChunks[i]; var chunkHeight = chunk.height; if (offset + chunkHeight > visibleFrom && offset < visibleTo) { if (fromIndex === -1) fromIndex = i; toIndex = i + 1; } else { if (offset >= visibleTo) break; } offset += chunkHeight; } if (toIndex) this._expandChunks(fromIndex, toIndex); }, _totalHeight: function(firstElement, lastElement) { lastElement = (lastElement || firstElement).nextElementSibling; if (lastElement) return lastElement.offsetTop - firstElement.offsetTop; else if (firstElement.offsetParent) return firstElement.offsetParent.scrollHeight - firstElement.offsetTop; return firstElement.offsetHeight; }, resize: function() { this._repaintAll(); } } WebInspector.TextEditorGutterPanel = function(textModel, syncDecorationsForLineListener) { WebInspector.TextEditorChunkedPanel.call(this, textModel); this._syncDecorationsForLineListener = syncDecorationsForLineListener; this.element = document.createElement("div"); this.element.className = "text-editor-lines"; this.element.addEventListener("scroll", this._scroll.bind(this), false); this.freeCachedElements(); this._buildChunks(); } WebInspector.TextEditorGutterPanel.prototype = { freeCachedElements: function() { this._cachedRows = []; }, _createNewChunk: function(startLine, endLine) { return new WebInspector.TextEditorGutterChunk(this, startLine, endLine); }, _expandChunks: function(fromIndex, toIndex) { for (var i = 0; i < this._textChunks.length; ++i) { this._textChunks[i].expanded = (fromIndex <= i && i < toIndex); } } } WebInspector.TextEditorGutterPanel.prototype.__proto__ = WebInspector.TextEditorChunkedPanel.prototype; WebInspector.TextEditorGutterChunk = function(textViewer, startLine, endLine) { this._textViewer = textViewer; this._textModel = textViewer._textModel; this.startLine = startLine; endLine = Math.min(this._textModel.linesCount, endLine); this.linesCount = endLine - startLine; this._expanded = false; this.element = document.createElement("div"); this.element.lineNumber = startLine; this.element.className = "webkit-line-number"; if (this.linesCount === 1) { // Single line chunks are typically created for decorations. Host line number in // the sub-element in order to allow flexible border / margin management. var innerSpan = document.createElement("span"); innerSpan.className = "webkit-line-number-inner"; innerSpan.textContent = startLine + 1; var outerSpan = document.createElement("div"); outerSpan.className = "webkit-line-number-outer"; outerSpan.appendChild(innerSpan); this.element.appendChild(outerSpan); } else { var lineNumbers = []; for (var i = startLine; i < endLine; ++i) { lineNumbers.push(i + 1); } this.element.textContent = lineNumbers.join("\n"); } } WebInspector.TextEditorGutterChunk.prototype = { addDecoration: function(decoration) { if (typeof decoration === "string") { this.element.addStyleClass(decoration); } }, removeDecoration: function(decoration) { if (typeof decoration === "string") { this.element.removeStyleClass(decoration); } }, get expanded() { return this._expanded; }, set expanded(expanded) { if (this.linesCount === 1) this._textViewer._syncDecorationsForLineListener(this.startLine); if (this._expanded === expanded) return; this._expanded = expanded; if (this.linesCount === 1) return; this._textViewer.beginDomUpdates(); if (expanded) { this._expandedLineRows = []; var parentElement = this.element.parentElement; for (var i = this.startLine; i < this.startLine + this.linesCount; ++i) { var lineRow = this._createRow(i); parentElement.insertBefore(lineRow, this.element); this._expandedLineRows.push(lineRow); } parentElement.removeChild(this.element); } else { var elementInserted = false; for (var i = 0; i < this._expandedLineRows.length; ++i) { var lineRow = this._expandedLineRows[i]; var parentElement = lineRow.parentElement; if (parentElement) { if (!elementInserted) { elementInserted = true; parentElement.insertBefore(this.element, lineRow); } parentElement.removeChild(lineRow); } this._textViewer._cachedRows.push(lineRow); } delete this._expandedLineRows; } this._textViewer.endDomUpdates(); }, get height() { if (!this._expandedLineRows) return this._textViewer._totalHeight(this.element); return this._textViewer._totalHeight(this._expandedLineRows[0], this._expandedLineRows[this._expandedLineRows.length - 1]); }, _createRow: function(lineNumber) { var lineRow = this._textViewer._cachedRows.pop() || document.createElement("div"); lineRow.lineNumber = lineNumber; lineRow.className = "webkit-line-number"; lineRow.textContent = lineNumber + 1; return lineRow; } } WebInspector.TextEditorMainPanel = function(textModel, url, syncScrollListener, syncDecorationsForLineListener) { WebInspector.TextEditorChunkedPanel.call(this, textModel); this._syncScrollListener = syncScrollListener; this._syncDecorationsForLineListener = syncDecorationsForLineListener; this._url = url; this._highlighter = new WebInspector.TextEditorHighlighter(textModel, this._highlightDataReady.bind(this)); this._readOnly = true; this.element = document.createElement("div"); this.element.className = "text-editor-contents"; this.element.tabIndex = 0; this.element.addEventListener("scroll", this._scroll.bind(this), false); // FIXME: Remove old live editing functionality and Preferences.sourceEditorEnabled flag. if (!Preferences.sourceEditorEnabled) this.element.addEventListener("keydown", this._handleKeyDown.bind(this), false); var handleDOMUpdates = this._handleDOMUpdates.bind(this); this.element.addEventListener("DOMCharacterDataModified", handleDOMUpdates, false); this.element.addEventListener("DOMNodeInserted", handleDOMUpdates, false); this.element.addEventListener("DOMNodeRemoved", handleDOMUpdates, false); // For some reasons, in a few corner cases the events above are not able to catch the editings. // To workaround that we also listen to a more general event as a backup. this.element.addEventListener("DOMSubtreeModified", this._handleDOMSubtreeModified.bind(this), false); this.freeCachedElements(); this._buildChunks(); } WebInspector.TextEditorMainPanel.prototype = { set mimeType(mimeType) { this._highlighter.mimeType = mimeType; }, set readOnly(readOnly) { // FIXME: Remove the Preferences.sourceEditorEnabled flag. if (!Preferences.sourceEditorEnabled) return; this._readOnly = readOnly; if (this._readOnly) this.element.removeStyleClass("text-editor-editable"); else this.element.addStyleClass("text-editor-editable"); }, markAndRevealRange: function(range) { if (this._rangeToMark) { var markedLine = this._rangeToMark.startLine; this._rangeToMark = null; this._paintLines(markedLine, markedLine + 1); } if (range) { this._rangeToMark = range; this.revealLine(range.startLine); this._paintLines(range.startLine, range.startLine + 1); if (this._markedRangeElement) this._markedRangeElement.scrollIntoViewIfNeeded(); } delete this._markedRangeElement; }, highlightLine: function(lineNumber) { this.clearLineHighlight(); this._highlightedLine = lineNumber; this.revealLine(lineNumber); this.addDecoration(lineNumber, "webkit-highlighted-line"); }, clearLineHighlight: function() { if (typeof this._highlightedLine === "number") { this.removeDecoration(this._highlightedLine, "webkit-highlighted-line"); delete this._highlightedLine; } }, freeCachedElements: function() { this._cachedSpans = []; this._cachedTextNodes = []; this._cachedRows = []; }, _handleKeyDown: function() { if (this._editingLine || event.metaKey || event.shiftKey || event.ctrlKey || event.altKey) return; var scrollValue = 0; if (event.keyCode === WebInspector.KeyboardShortcut.Keys.Up.code) scrollValue = -1; else if (event.keyCode == WebInspector.KeyboardShortcut.Keys.Down.code) scrollValue = 1; if (scrollValue) { event.preventDefault(); event.stopPropagation(); this.element.scrollByLines(scrollValue); return; } scrollValue = 0; if (event.keyCode === WebInspector.KeyboardShortcut.Keys.Left.code) scrollValue = -40; else if (event.keyCode == WebInspector.KeyboardShortcut.Keys.Right.code) scrollValue = 40; if (scrollValue) { event.preventDefault(); event.stopPropagation(); this.element.scrollLeft += scrollValue; } }, editLine: function(lineRow, callback) { var oldContent = lineRow.innerHTML; function finishEditing(committed, e, newContent) { if (committed) callback(newContent); lineRow.innerHTML = oldContent; delete this._editingLine; } this._editingLine = WebInspector.startEditing(lineRow, { context: null, commitHandler: finishEditing.bind(this, true), cancelHandler: finishEditing.bind(this, false), multiline: true }); }, _buildChunks: function() { this._highlighter.reset(); for (var i = 0; i < this._textModel.linesCount; ++i) this._textModel.removeAttribute(i, "highlight"); WebInspector.TextEditorChunkedPanel.prototype._buildChunks.call(this); }, _createNewChunk: function(startLine, endLine) { return new WebInspector.TextEditorMainChunk(this, startLine, endLine); }, _expandChunks: function(fromIndex, toIndex) { var lastChunk = this._textChunks[toIndex - 1]; var lastVisibleLine = lastChunk.startLine + lastChunk.linesCount; var selection = this._getSelection(); this._muteHighlightListener = true; this._highlighter.highlight(lastVisibleLine); delete this._muteHighlightListener; for (var i = 0; i < this._textChunks.length; ++i) { this._textChunks[i].expanded = (fromIndex <= i && i < toIndex); } this._restoreSelection(selection); }, _highlightDataReady: function(fromLine, toLine) { if (this._muteHighlightListener || this._dirtyLines) return; this._paintLines(fromLine, toLine, true /*restoreSelection*/); }, _paintLines: function(fromLine, toLine, restoreSelection) { var selection; var chunk = this._chunkForLine(fromLine); for (var i = fromLine; i < toLine; ++i) { if (i >= chunk.startLine + chunk.linesCount) chunk = this._chunkForLine(i); var lineRow = chunk.getExpandedLineRow(i); if (!lineRow) continue; if (restoreSelection && !selection) selection = this._getSelection(); this._paintLine(lineRow, i); } if (restoreSelection) this._restoreSelection(selection); }, _paintLine: function(lineRow, lineNumber) { this.beginDomUpdates(); try { var highlight = this._textModel.getAttribute(lineNumber, "highlight"); if (!highlight) { if (this._rangeToMark && this._rangeToMark.startLine === lineNumber) this._markedRangeElement = highlightSearchResult(lineRow, this._rangeToMark.startColumn, this._rangeToMark.endColumn - this._rangeToMark.startColumn); return; } lineRow.removeChildren(); var line = this._textModel.line(lineNumber); if (!line) lineRow.appendChild(document.createElement("br")); var plainTextStart = -1; for (var j = 0; j < line.length;) { if (j > 1000) { // This line is too long - do not waste cycles on minified js highlighting. if (plainTextStart === -1) plainTextStart = j; break; } var attribute = highlight[j]; if (!attribute || !attribute.tokenType) { if (plainTextStart === -1) plainTextStart = j; j++; } else { if (plainTextStart !== -1) { this._appendTextNode(lineRow, line.substring(plainTextStart, j)); plainTextStart = -1; } this._appendSpan(lineRow, line.substring(j, j + attribute.length), attribute.tokenType); j += attribute.length; } } if (plainTextStart !== -1) this._appendTextNode(lineRow, line.substring(plainTextStart, line.length)); if (this._rangeToMark && this._rangeToMark.startLine === lineNumber) this._markedRangeElement = highlightSearchResult(lineRow, this._rangeToMark.startColumn, this._rangeToMark.endColumn - this._rangeToMark.startColumn); if (lineRow.decorationsElement) lineRow.appendChild(lineRow.decorationsElement); } finally { this.endDomUpdates(); } }, _releaseLinesHighlight: function(lineRow) { if (!lineRow) return; if ("spans" in lineRow) { var spans = lineRow.spans; for (var j = 0; j < spans.length; ++j) this._cachedSpans.push(spans[j]); delete lineRow.spans; } if ("textNodes" in lineRow) { var textNodes = lineRow.textNodes; for (var j = 0; j < textNodes.length; ++j) this._cachedTextNodes.push(textNodes[j]); delete lineRow.textNodes; } this._cachedRows.push(lineRow); }, _getSelection: function() { var selection = window.getSelection(); if (!selection.rangeCount) return null; var selectionRange = selection.getRangeAt(0); // Selection may be outside of the viewer. if (!this.element.isAncestor(selectionRange.startContainer) || !this.element.isAncestor(selectionRange.endContainer)) return null; var start = this._selectionToPosition(selectionRange.startContainer, selectionRange.startOffset); var end = selectionRange.collapsed ? start : this._selectionToPosition(selectionRange.endContainer, selectionRange.endOffset); if (selection.anchorNode === selectionRange.startContainer && selection.anchorOffset === selectionRange.startOffset) return new WebInspector.TextRange(start.line, start.column, end.line, end.column); else return new WebInspector.TextRange(end.line, end.column, start.line, start.column); }, _restoreSelection: function(range) { if (!range) return; var start = this._positionToSelection(range.startLine, range.startColumn); var end = range.isEmpty() ? start : this._positionToSelection(range.endLine, range.endColumn); window.getSelection().setBaseAndExtent(start.container, start.offset, end.container, end.offset); }, _selectionToPosition: function(container, offset) { if (container === this.element && offset === 0) return { line: 0, column: 0 }; if (container === this.element && offset === 1) return { line: this._textModel.linesCount - 1, column: this._textModel.lineLength(this._textModel.linesCount - 1) }; var lineRow = container.enclosingNodeOrSelfWithNodeName("DIV"); var lineNumber = lineRow.lineNumber; if (container === lineRow && offset === 0) return { line: lineNumber, column: 0 }; // This may be chunk and chunks may contain \n. var column = 0; var node = lineRow.traverseNextTextNode(lineRow); while (node && node !== container) { var text = node.textContent; for (var i = 0; i < text.length; ++i) { if (text.charAt(i) === "\n") { lineNumber++; column = 0; } else column++; } node = node.traverseNextTextNode(lineRow); } if (node === container && offset) { var text = node.textContent; for (var i = 0; i < offset; ++i) { if (text.charAt(i) === "\n") { lineNumber++; column = 0; } else column++; } } return { line: lineNumber, column: column }; }, _positionToSelection: function(line, column) { var chunk = this._chunkForLine(line); var lineRow = chunk.getExpandedLineRow(line); if (lineRow) var rangeBoundary = lineRow.rangeBoundaryForOffset(column); else { var offset = column; for (var i = chunk.startLine; i < line; ++i) offset += this._textModel.lineLength(i) + 1; // \n lineRow = chunk.element; if (lineRow.firstChild) var rangeBoundary = { container: lineRow.firstChild, offset: offset }; else var rangeBoundary = { container: lineRow, offset: 0 }; } return rangeBoundary; }, _appendSpan: function(element, content, className) { if (className === "html-resource-link" || className === "html-external-link") { element.appendChild(this._createLink(content, className === "html-external-link")); return; } var span = this._cachedSpans.pop() || document.createElement("span"); span.className = "webkit-" + className; span.textContent = content; element.appendChild(span); if (!("spans" in element)) element.spans = []; element.spans.push(span); }, _appendTextNode: function(element, text) { var textNode = this._cachedTextNodes.pop(); if (textNode) textNode.nodeValue = text; else textNode = document.createTextNode(text); element.appendChild(textNode); if (!("textNodes" in element)) element.textNodes = []; element.textNodes.push(textNode); }, _createLink: function(content, isExternal) { var quote = content.charAt(0); if (content.length > 1 && (quote === "\"" || quote === "'")) content = content.substring(1, content.length - 1); else quote = null; var a = WebInspector.linkifyURLAsNode(this._rewriteHref(content), content, null, isExternal); var span = document.createElement("span"); span.className = "webkit-html-attribute-value"; if (quote) span.appendChild(document.createTextNode(quote)); span.appendChild(a); if (quote) span.appendChild(document.createTextNode(quote)); return span; }, _rewriteHref: function(hrefValue, isExternal) { if (!this._url || !hrefValue || hrefValue.indexOf("://") > 0) return hrefValue; return WebInspector.completeURL(this._url, hrefValue); }, textChanged: function(oldRange, newRange, oldText, newText) { // FIXME: Update only that part of the editor that has just been changed. this._buildChunks(); }, _handleDOMUpdates: function(e) { if (this._domUpdateCoalescingLevel) return; var target = e.target; if (target === this.element) return; var lineRow = target.enclosingNodeOrSelfWithClass("webkit-line-content"); if (!lineRow) return; if (lineRow.decorationsElement && lineRow.decorationsElement.isAncestor(target)) { if (this._syncDecorationsForLineListener) { // Wait until this event is processed and only then sync the sizes. This is necessary in // case of the DOMNodeRemoved event, because it is dispatched before the removal takes place. setTimeout(function() { this._syncDecorationsForLineListener(lineRow.lineNumber); }.bind(this), 0); } return; } if (this._readOnly) return; if (target === lineRow && (e.type === "DOMNodeInserted" || e.type === "DOMNodeRemoved")) { // The "lineNumber" (if any) is no longer valid for a line being removed or inserted. delete lineRow.lineNumber; } var startLine = 0; for (var row = lineRow; row; row = row.previousSibling) { if (typeof row.lineNumber === "number") { startLine = row.lineNumber; break; } } var endLine = this._textModel.linesCount; for (var row = lineRow.nextSibling; row; row = row.nextSibling) { if (typeof row.lineNumber === "number") { endLine = row.lineNumber; break; } } if (this._dirtyLines) { this._dirtyLines.start = Math.min(this._dirtyLines.start, startLine); this._dirtyLines.end = Math.max(this._dirtyLines.end, endLine); } else { this._dirtyLines = { start: startLine, end: endLine }; setTimeout(this._applyDomUpdates.bind(this), 0); } }, _handleDOMSubtreeModified: function(e) { if (this._domUpdateCoalescingLevel || this._readOnly || e.target !== this.element) return; // Proceed only when other events failed to catch the DOM updates, otherwise it is not necessary. if (this._dirtyLines) return; var selection = this._getSelection(); if (!selection) return; var startLine = Math.min(selection.startLine, selection.endLine); var endLine = Math.max(selection.startLine, selection.endLine) + 1; endLine = Math.min(this._textModel.linesCount, endLine); this._dirtyLines = { start: startLine, end: endLine }; setTimeout(this._applyDomUpdates.bind(this), 0); }, _applyDomUpdates: function() { if (!this._dirtyLines) return; var dirtyLines = this._dirtyLines; delete this._dirtyLines; // Check if the editor had been set readOnly by the moment when this async callback got executed. if (this._readOnly) return; // FIXME: DELETE DECORATIONS IN THE INVOLVED CHUNKS IF ANY! SYNC THE GUTTER ALSO. // FIXME: DELETE MARKED AND HIGHLIGHTED LINES (INVALIDATE SEARCH RESULTS)! this._markedRangeElement var firstChunkNumber = this._chunkNumberForLine(dirtyLines.start); var startLine = this._textChunks[firstChunkNumber].startLine; var endLine = this._textModel.linesCount; // Collect lines. var firstLineRow; if (firstChunkNumber) { var chunk = this._textChunks[firstChunkNumber - 1]; firstLineRow = chunk.expanded ? chunk.getExpandedLineRow(chunk.startLine + chunk.linesCount - 1) : chunk.element; firstLineRow = firstLineRow.nextSibling; } else { firstLineRow = this.element.firstChild; } var lines = []; for (var lineRow = firstLineRow; lineRow; lineRow = lineRow.nextSibling) { if (typeof lineRow.lineNumber === "number" && lineRow.lineNumber >= dirtyLines.end) { endLine = lineRow.lineNumber; break; } // Update with the newest lineNumber, so that the call to the _getSelection method below should work. lineRow.lineNumber = startLine + lines.length; this._collectLinesFromDiv(lines, lineRow); } // Try to decrease the range being replaced if possible. var startOffset = 0; while (startLine < dirtyLines.start && startOffset < lines.length) { if (this._textModel.line(startLine) !== lines[startOffset]) break; ++startOffset; ++startLine; } var endOffset = lines.length; while (endLine > dirtyLines.end && endOffset > startOffset) { if (this._textModel.line(endLine - 1) !== lines[endOffset - 1]) break; --endOffset; --endLine; } lines = lines.slice(startOffset, endOffset); var selection = this._getSelection(); this.beginUpdates(); if (lines.length === 0 && endLine < this._textModel.linesCount) { var range = new WebInspector.TextRange(startLine, 0, endLine, 0); var newRange = this._textModel.setText(range, ''); } else { var range = new WebInspector.TextRange(startLine, 0, endLine - 1, this._textModel.lineLength(endLine - 1)); var newRange = this._textModel.setText(range, lines.join("\n")); } this.endUpdates(); this._restoreSelection(selection); }, _collectLinesFromDiv: function(lines, element) { var textContents = []; var node = element.traverseNextNode(element); while (node) { if (node.nodeName.toLowerCase() === "br") textContents.push("\n"); else if (node.nodeType === Node.TEXT_NODE) textContents.push(node.textContent); node = node.traverseNextNode(element); } var textContent = textContents.join(''); // The last \n (if any) does not "count" in a DIV. textContent = textContent.replace(/\n$/, ''); textContents = textContent.split("\n"); for (var i = 0; i < textContents.length; ++i) lines.push(textContents[i]); } } WebInspector.TextEditorMainPanel.prototype.__proto__ = WebInspector.TextEditorChunkedPanel.prototype; WebInspector.TextEditorMainChunk = function(textViewer, startLine, endLine) { this._textViewer = textViewer; this._textModel = textViewer._textModel; this.element = document.createElement("div"); this.element.lineNumber = startLine; this.element.className = "webkit-line-content"; this.startLine = startLine; endLine = Math.min(this._textModel.linesCount, endLine); this.linesCount = endLine - startLine; this._expanded = false; var lines = []; for (var i = startLine; i < endLine; ++i) { lines.push(this._textModel.line(i)); } this.element.textContent = lines.join("\n"); // The last empty line will get swallowed otherwise. if (!lines[lines.length - 1]) this.element.appendChild(document.createElement("br")); } WebInspector.TextEditorMainChunk.prototype = { addDecoration: function(decoration) { if (typeof decoration === "string") { this.element.addStyleClass(decoration); return; } this._textViewer.beginDomUpdates(); if (!this.element.decorationsElement) { this.element.decorationsElement = document.createElement("div"); this.element.decorationsElement.className = "webkit-line-decorations"; this.element.appendChild(this.element.decorationsElement); } this.element.decorationsElement.appendChild(decoration); this._textViewer.endDomUpdates(); }, removeDecoration: function(decoration) { if (typeof decoration === "string") { this.element.removeStyleClass(decoration); return; } if (!this.element.decorationsElement) return; this._textViewer.beginDomUpdates(); this.element.decorationsElement.removeChild(decoration); this._textViewer.endDomUpdates(); }, get expanded() { return this._expanded; }, set expanded(expanded) { if (this._expanded === expanded) return; this._expanded = expanded; if (this.linesCount === 1) { if (expanded) this._textViewer._paintLine(this.element, this.startLine); return; } this._textViewer.beginDomUpdates(); if (expanded) { this._expandedLineRows = []; var parentElement = this.element.parentElement; for (var i = this.startLine; i < this.startLine + this.linesCount; ++i) { var lineRow = this._createRow(i); parentElement.insertBefore(lineRow, this.element); this._expandedLineRows.push(lineRow); this._textViewer._paintLine(lineRow, i); } parentElement.removeChild(this.element); } else { var elementInserted = false; for (var i = 0; i < this._expandedLineRows.length; ++i) { var lineRow = this._expandedLineRows[i]; var parentElement = lineRow.parentElement; if (parentElement) { if (!elementInserted) { elementInserted = true; parentElement.insertBefore(this.element, lineRow); } parentElement.removeChild(lineRow); } this._textViewer._releaseLinesHighlight(lineRow); } delete this._expandedLineRows; } this._textViewer.endDomUpdates(); }, get height() { if (!this._expandedLineRows) return this._textViewer._totalHeight(this.element); return this._textViewer._totalHeight(this._expandedLineRows[0], this._expandedLineRows[this._expandedLineRows.length - 1]); }, _createRow: function(lineNumber) { var lineRow = this._textViewer._cachedRows.pop() || document.createElement("div"); lineRow.lineNumber = lineNumber; lineRow.className = "webkit-line-content"; lineRow.textContent = this._textModel.line(lineNumber); if (!lineRow.textContent) lineRow.appendChild(document.createElement("br")); return lineRow; }, getExpandedLineRow: function(lineNumber) { if (!this._expanded || lineNumber < this.startLine || lineNumber >= this.startLine + this.linesCount) return null; if (!this._expandedLineRows) return this.element; return this._expandedLineRows[lineNumber - this.startLine]; } }