Bug 1248381 - Inspector panel should display properly capitalized node name; r?miker
MozReview-Commit-ID: ESlN5Qp9xHj
--- a/devtools/client/inspector/markup/markup.js
+++ b/devtools/client/inspector/markup/markup.js
@@ -2636,17 +2636,17 @@ function ElementEditor(container, node)
this.container.undo.do(() => {
doMods.apply();
}, function() {
undoMods.apply();
});
}
});
- let tagName = this.node.nodeName.toLowerCase();
+ let tagName = this.getTagName(this.node);
this.tag.textContent = tagName;
this.closeTag.textContent = tagName;
this.update();
this.initialized = true;
}
ElementEditor.prototype = {
@@ -2662,16 +2662,34 @@ ElementEditor.prototype = {
}
flashElementOn(this.getAttributeElement(attrName));
this.animationTimers[attrName] = setTimeout(() => {
flashElementOff(this.getAttributeElement(attrName));
}, this.markup.CONTAINER_FLASHING_DURATION);
},
+
+ /**
+ * Returns the name of a node.
+ *
+ * @param {DOMNode} node
+ * The node to get the name of.
+ * @return {String} A tag name with correct case
+ */
+ getTagName: function(node) {
+ // Check the node is a SVG element
+ if (node.namespaceURI === "http://www.w3.org/2000/svg") {
+ // nodeName is already in the correct case
+ return node.nodeName;
+ }
+
+ return node.nodeName.toLowerCase();
+ },
+
/**
* Returns information about node in the editor.
*
* @param {DOMNode} node
* The node to get information from.
* @return {Object} An object literal with the following information:
* {type: "attribute", name: "rel", value: "index", el: node}
*/
--- a/devtools/client/inspector/markup/test/browser.ini
+++ b/devtools/client/inspector/markup/test/browser.ini
@@ -7,16 +7,17 @@ support-files =
doc_markup_dragdrop.html
doc_markup_dragdrop_autoscroll.html
doc_markup_edit.html
doc_markup_events.html
doc_markup_events_form.html
doc_markup_events_jquery.html
doc_markup_events-overflow.html
doc_markup_flashing.html
+ doc_markup_html_mixed_case.html
doc_markup_links.html
doc_markup_mutation.html
doc_markup_navigation.html
doc_markup_not_displayed.html
doc_markup_pagesize_01.html
doc_markup_pagesize_02.html
doc_markup_search.html
doc_markup_svg_attributes.html
@@ -91,16 +92,17 @@ skip-if = e10s # Bug 1040751 - CodeMirro
[browser_markup_image_tooltip_mutations.js]
[browser_markup_keybindings_01.js]
[browser_markup_keybindings_02.js]
[browser_markup_keybindings_03.js]
[browser_markup_keybindings_04.js]
[browser_markup_keybindings_delete_attributes.js]
[browser_markup_mutation_01.js]
[browser_markup_mutation_02.js]
+[browser_markup_node_names.js]
[browser_markup_navigation.js]
[browser_markup_node_not_displayed_01.js]
[browser_markup_node_not_displayed_02.js]
[browser_markup_pagesize_01.js]
[browser_markup_pagesize_02.js]
[browser_markup_remove_xul_attributes.js]
skip-if = e10s # Bug 1036409 - The last selected node isn't reselected
[browser_markup_search_01.js]
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_node_names.js
@@ -0,0 +1,28 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test element node name in the markupview
+const TEST_URL = URL_ROOT + "doc_markup_html_mixed_case.html";
+
+add_task(function*() {
+ let {inspector} = yield openInspectorForURL(TEST_URL);
+
+ // Get and open the svg element to show its children
+ let svgNodeFront = yield getNodeFront("svg", inspector);
+ yield inspector.markup.expandNode(svgNodeFront);
+ yield waitForMultipleChildrenUpdates(inspector);
+
+ let clipPathContainer = yield getContainerForSelector("clipPath", inspector);
+ info("Checking the clipPath element");
+ ok(clipPathContainer.editor.tag.textContent === "clipPath",
+ "clipPath node name is not lowercased");
+
+ let divContainer = yield getContainerForSelector("div", inspector);
+
+ info("Checking the div element");
+ ok(divContainer.editor.tag.textContent === "div",
+ "div node name is lowercased");
+});
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/markup/test/doc_markup_html_mixed_case.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <svg viewBox="0 0 2 2" width=200 height=200>
+ <clipPath>
+ <rect x=0 y=0 width=1 height=1 />
+ </clipPath>
+ <circle cx=1 cy=1 r=1 fill=lime />
+ </svg>
+ <DIV></DIV>
+ </body>
+</html>