From 354780772e8cb8aad18753029b26e8858dfe508d Mon Sep 17 00:00:00 2001 From: Michael Ratcliffe Date: Fri, 10 Jan 2014 17:55:58 +0000 Subject: [PATCH] Bug 952511 - markupview still change attribute values. r=pbrosset --- browser/devtools/markupview/markup-view.js | 122 ++---------------- .../test/browser_inspector_markup_edit.js | 2 +- 2 files changed, 12 insertions(+), 112 deletions(-) diff --git a/browser/devtools/markupview/markup-view.js b/browser/devtools/markupview/markup-view.js index 5c033f05abe3..8c7482b56585 100644 --- a/browser/devtools/markupview/markup-view.js +++ b/browser/devtools/markupview/markup-view.js @@ -21,7 +21,6 @@ const {UndoStack} = require("devtools/shared/undo"); const {editableField, InplaceEditor} = require("devtools/shared/inplace-editor"); const {gDevTools} = Cu.import("resource:///modules/devtools/gDevTools.jsm", {}); const {HTMLEditor} = require("devtools/markupview/html-editor"); -const {OutputParser} = require("devtools/output-parser"); const promise = require("sdk/core/promise"); const {Tooltip} = require("devtools/shared/widgets/Tooltip"); const EventEmitter = require("devtools/shared/event-emitter"); @@ -65,7 +64,6 @@ function MarkupView(aInspector, aFrame, aControllerWindow) { this._frame = aFrame; this.doc = this._frame.contentDocument; this._elt = this.doc.querySelector("#root"); - this._outputParser = new OutputParser(); this.htmlEditor = new HTMLEditor(this.doc); this.layoutHelpers = new LayoutHelpers(this.doc.defaultView); @@ -102,9 +100,6 @@ function MarkupView(aInspector, aFrame, aControllerWindow) { this._boundFocus = this._onFocus.bind(this); this._frame.addEventListener("focus", this._boundFocus, false); - this._handlePrefChange = this._handlePrefChange.bind(this); - gDevTools.on("pref-changed", this._handlePrefChange); - this._initPreview(); this._initTooltips(); this._initHighlighter(); @@ -247,12 +242,6 @@ MarkupView.prototype = { return this._containers.get(aNode); }, - _handlePrefChange: function(event, data) { - if (data.pref == "devtools.defaultColorUnit") { - this.update(); - } - }, - update: function() { let updateChildren = function(node) { this.getContainer(node).update(); @@ -676,8 +665,10 @@ MarkupView.prototype = { * node is scrolled on to screen. */ showNode: function(aNode, centered) { - let container = this.importNode(aNode); let parent = aNode; + + this.importNode(aNode); + while ((parent = parent.parentNode())) { this.importNode(parent); this.expandNode(parent); @@ -1065,8 +1056,6 @@ MarkupView.prototype = { * Tear down the markup panel. */ destroy: function() { - gDevTools.off("pref-changed", this._handlePrefChange); - // Note that if the toolbox is closed, this will work fine, but will fail // in case the browser is closed and will trigger a noSuchActor message. this._hideBoxModel(); @@ -1074,8 +1063,6 @@ MarkupView.prototype = { this._hoveredNode = null; this._inspector.toolbox.off("picker-node-hovered", this._onToolboxPickerHover); - this._outputParser = null; - this.htmlEditor.destroy(); this.htmlEditor = null; @@ -1907,106 +1894,19 @@ ElementEditor.prototype = { this.attrs[aAttr.name] = attr; - name.textContent = aAttr.name; - - if (typeof aAttr.value !== "undefined") { - let outputParser = this.markup._outputParser; - let frag = outputParser.parseHTMLAttribute(aAttr.value, { - urlClass: "theme-link", - baseURI: this.node.baseURI - }); - frag = this._truncateFrag(frag); - val.appendChild(frag); + let collapsedValue; + if (aAttr.value.match(COLLAPSE_DATA_URL_REGEX)) { + collapsedValue = truncateString(aAttr.value, COLLAPSE_DATA_URL_LENGTH); + } else { + collapsedValue = truncateString(aAttr.value, COLLAPSE_ATTRIBUTE_LENGTH); } + name.textContent = aAttr.name; + val.textContent = collapsedValue; + return attr; }, - /** - * We truncate HTML attributes to a text length defined by - * COLLAPSE_DATA_URL_LENGTH and COLLAPSE_ATTRIBUTE_LENGTH. Because we parse - * text into document fragments we need to process each fragment and truncate - * according to the fragment's textContent length. - * - * @param {DocumentFragment} frag - * The fragment to truncate. - * @return {[DocumentFragment]} - * Truncated fragment. - */ - _truncateFrag: function(frag) { - let text = frag.textContent; - - if (!text) { - return frag; - } - - let chars = 0; - let maxWidth = text.match(COLLAPSE_DATA_URL_REGEX) ? - COLLAPSE_DATA_URL_LENGTH : COLLAPSE_ATTRIBUTE_LENGTH; - let overBy = text.length - maxWidth; - let children = frag.childNodes; - let croppedNode = null; - - if (overBy <= 0) { - return frag; - } - - // For fragments containing only one single node we just need to truncate - // frag.textContent. - if (children.length === 1) { - let length = text.length; - let start = text.substr(0, maxWidth / 2); - let end = text.substr(length - maxWidth / 2, length - 1); - - frag.textContent = start + "…" + end; - return frag; - } - - // First maxWidth / 2 chars plus … - for (let i = 0; i < children.length; i++) { - let node = children[i]; - let text = node.textContent; - - let numChars = text.length; - if (chars + numChars > maxWidth / 2) { - let insertionPoint = maxWidth / 2 - chars; - let start = text.substr(0, insertionPoint) + "…"; - let end = text.substr(insertionPoint); - - if (end.length > maxWidth / 2) { - end = end.substr(end.length - maxWidth / 2); - } - - node.textContent = start + end; - croppedNode = node; - break; - } else { - chars += numChars; - } - } - - // Last maxWidth / two chars. - chars = 0; - for (let i = children.length - 1; i >= 0; i--) { - let node = children[i]; - let text = node.textContent; - - let numChars = text.length; - if (chars + numChars > maxWidth / 2) { - if (node !== croppedNode) { - node.parentNode.removeChild(node); - chars += numChars; - } else { - break; - } - } else { - chars += numChars; - } - } - - return frag; - }, - /** * Parse a user-entered attribute string and apply the resulting * attributes to the node. This operation is undoable. diff --git a/browser/devtools/markupview/test/browser_inspector_markup_edit.js b/browser/devtools/markupview/test/browser_inspector_markup_edit.js index 94a54ab57d00..6573b1f74620 100644 --- a/browser/devtools/markupview/test/browser_inspector_markup_edit.js +++ b/browser/devtools/markupview/test/browser_inspector_markup_edit.js @@ -38,7 +38,7 @@ function test() { let LONG_ATTRIBUTE_COLLAPSED = "ABCDEFGHIJKLMNOPQRSTUVWXYZ-ABCDEFGHIJKLMNOPQRSTUVWXYZ-ABCDEF\u2026UVWXYZ-ABCDEFGHIJKLMNOPQRSTUVWXYZ-ABCDEFGHIJKLMNOPQRSTUVWXYZ"; let DATA_URL_INLINE_STYLE='color: red; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC");'; - let DATA_URL_INLINE_STYLE_COLLAPSED="color: #F00; background: url('data:image/png;base64,iVBORw0K\u2026w83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC');"; + let DATA_URL_INLINE_STYLE_COLLAPSED='color: red; background: url("data:image/png;base64,iVBORw0KG\u2026NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC");'; let DATA_URL_ATTRIBUTE = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC"; let DATA_URL_ATTRIBUTE_COLLAPSED = "data:image/png;base64,iVBORw0K\u20269/AFGGFyjOXZtQAAAAAElFTkSuQmCC";