mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-26 19:55:39 +00:00
Bug 952511 - markupview still change attribute values. r=pbrosset
This commit is contained in:
parent
0e4a452417
commit
354780772e
@ -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.
|
||||
|
@ -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";
|
||||
|
Loading…
Reference in New Issue
Block a user