- Revision
- 190528
- Author
- [email protected]
- Date
- 2015-10-02 15:33:00 -0700 (Fri, 02 Oct 2015)
Log Message
Web Inspector: Copying inline style text puts "undefined" in the pasteboard
https://bugs.webkit.org/show_bug.cgi?id=149155
Patch by Devin Rousso <[email protected]> on 2015-10-02
Reviewed by Brian Burg.
Source/WebInspectorUI:
CSSStyleDeclarations for inline styles do not have a owner CSSRule, which means
that they do not have a selector or media list. CSS strings must have a selector
and, for inline styles without an owner rule and selector, this was a problem.
* UserInterface/Models/CSSStyleDeclaration.js:
(WebInspector.CSSStyleDeclaration.prototype.get mediaList):
(WebInspector.CSSStyleDeclaration.prototype.get selectorText):
(WebInspector.CSSStyleDeclaration.prototype.generateCSSRuleString):
Added getters for the list of media queries and selector text with fallbacks
for CSSStyleDeclarations that do not have an owner CSSRule (inline styles).
* UserInterface/Test.html:
Added CSSMedia include for new inspector/css/generate-css-rule-string.html test.
* UserInterface/Views/VisualStyleSelectorTreeItem.js:
(WebInspector.VisualStyleSelectorTreeItem.prototype._handleContextMenuEvent):
Removed parameter that no longer exists.
LayoutTests:
Added test for generating CSS rule strings with default formatting.
* inspector/css/generate-css-rule-string.html:
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (190527 => 190528)
--- trunk/LayoutTests/ChangeLog 2015-10-02 22:24:07 UTC (rev 190527)
+++ trunk/LayoutTests/ChangeLog 2015-10-02 22:33:00 UTC (rev 190528)
@@ -1,3 +1,14 @@
+2015-10-02 Devin Rousso <[email protected]>
+
+ Web Inspector: Copying inline style text puts "undefined" in the pasteboard
+ https://bugs.webkit.org/show_bug.cgi?id=149155
+
+ Reviewed by Brian Burg.
+
+ Added test for generating CSS rule strings with default formatting.
+
+ * inspector/css/generate-css-rule-string.html:
+
2015-10-02 Joseph Pecoraro <[email protected]>
Unreviewed, rolling out r190520, some tests assert / crash.
Added: trunk/LayoutTests/inspector/css/generate-css-rule-string-expected.txt (0 => 190528)
--- trunk/LayoutTests/inspector/css/generate-css-rule-string-expected.txt (rev 0)
+++ trunk/LayoutTests/inspector/css/generate-css-rule-string-expected.txt 2015-10-02 22:33:00 UTC (rev 190528)
@@ -0,0 +1,27 @@
+Testing that generated CSS rule strings have proper formatting.
+
+== Running test suite: CSS.generateCSSRuleString
+-- Running test case: InlineStyleString
+#test-node {
+ background-color: red;
+}
+
+-- Running test case: CSSRuleString0
+@media only screen and (min-width: 0px) {
+ body > div {
+ display: block;
+ width: 100%;
+ text-align: center;
+ }
+}
+
+-- Running test case: CSSRuleString1
+* {
+ margin: 0;
+ padding: 0;
+}
+
+-- Running test case: CSSRuleString2
+address, article, aside, div, footer, header, hgroup, layer, main, nav, section {
+}
+
Added: trunk/LayoutTests/inspector/css/generate-css-rule-string.html (0 => 190528)
--- trunk/LayoutTests/inspector/css/generate-css-rule-string.html (rev 0)
+++ trunk/LayoutTests/inspector/css/generate-css-rule-string.html 2015-10-02 22:33:00 UTC (rev 190528)
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+* { margin: 0; padding: 0; }
+
+@media only screen and (min-width: 0px) {
+ body > div {
+ display: block;
+ width: 100%;
+ text-align: center;
+ }
+}
+</style>
+<script type="text/_javascript_" src=""
+<script>
+function test() {
+ let nodeStyles;
+ let suite = InspectorTest.createAsyncSuite("CSS.generateCSSRuleString");
+
+ function validateSelectors()
+ {
+ suite.addTestCase({
+ name: "InlineStyleString",
+ description: "Check the formatting of the generated inline style string.",
+ test: (resolve, reject) => {
+ InspectorTest.log(nodeStyles.inlineStyle.generateCSSRuleString());
+ resolve();
+ }
+ });
+
+ for (let i = 0; i < nodeStyles.matchedRules.length; ++i) {
+ let rule = nodeStyles.matchedRules[i];
+ suite.addTestCase({
+ name: "CSSRuleString" + i,
+ description: "Check the formatting of the generated string for the matched CSS rule.",
+ test: (resolve, reject) => {
+ InspectorTest.log(rule.style.generateCSSRuleString());
+ resolve();
+ }
+ });
+ }
+
+ suite.runTestCasesAndFinish();
+ }
+
+ WebInspector.domTreeManager.requestDocument(function(documentNode) {
+ WebInspector.domTreeManager.querySelector(documentNode.id, "#test-node", function(contentNodeId) {
+ if (contentNodeId) {
+ let domNode = WebInspector.domTreeManager.nodeForId(contentNodeId);
+ nodeStyles = WebInspector.cssStyleManager.stylesForNode(domNode);
+ if (nodeStyles.needsRefresh)
+ nodeStyles.singleFireEventListener(WebInspector.DOMNodeStyles.Event.Refreshed, validateSelectors, this);
+ else
+ validateSelectors();
+ } else {
+ InspectorTest.log("DOM node not found.");
+ InspectorTest.completeTest();
+ }
+ });
+ });
+}
+</script>
+</head>
+<body _onload_="runTest()">
+ <p>Testing that generated CSS rule strings have proper formatting.</p>
+
+ <div id="test-node" style="background-color: red;"></div>
+</body>
+</html>
Modified: trunk/Source/WebInspectorUI/ChangeLog (190527 => 190528)
--- trunk/Source/WebInspectorUI/ChangeLog 2015-10-02 22:24:07 UTC (rev 190527)
+++ trunk/Source/WebInspectorUI/ChangeLog 2015-10-02 22:33:00 UTC (rev 190528)
@@ -1,3 +1,28 @@
+2015-10-02 Devin Rousso <[email protected]>
+
+ Web Inspector: Copying inline style text puts "undefined" in the pasteboard
+ https://bugs.webkit.org/show_bug.cgi?id=149155
+
+ Reviewed by Brian Burg.
+
+ CSSStyleDeclarations for inline styles do not have a owner CSSRule, which means
+ that they do not have a selector or media list. CSS strings must have a selector
+ and, for inline styles without an owner rule and selector, this was a problem.
+
+ * UserInterface/Models/CSSStyleDeclaration.js:
+ (WebInspector.CSSStyleDeclaration.prototype.get mediaList):
+ (WebInspector.CSSStyleDeclaration.prototype.get selectorText):
+ (WebInspector.CSSStyleDeclaration.prototype.generateCSSRuleString):
+ Added getters for the list of media queries and selector text with fallbacks
+ for CSSStyleDeclarations that do not have an owner CSSRule (inline styles).
+
+ * UserInterface/Test.html:
+ Added CSSMedia include for new inspector/css/generate-css-rule-string.html test.
+
+ * UserInterface/Views/VisualStyleSelectorTreeItem.js:
+ (WebInspector.VisualStyleSelectorTreeItem.prototype._handleContextMenuEvent):
+ Removed parameter that no longer exists.
+
2015-10-02 Joseph Pecoraro <[email protected]>
Unreviewed, rolling out r190520, some tests assert / crash.
Modified: trunk/Source/WebInspectorUI/UserInterface/Models/CSSStyleDeclaration.js (190527 => 190528)
--- trunk/Source/WebInspectorUI/UserInterface/Models/CSSStyleDeclaration.js 2015-10-02 22:24:07 UTC (rev 190527)
+++ trunk/Source/WebInspectorUI/UserInterface/Models/CSSStyleDeclaration.js 2015-10-02 22:33:00 UTC (rev 190528)
@@ -239,6 +239,20 @@
return this._styleSheetTextRange;
}
+ get mediaList()
+ {
+ if (this._ownerRule)
+ return this._ownerRule.mediaList;
+ return [];
+ }
+
+ get selectorText()
+ {
+ if (this._ownerRule)
+ return this._ownerRule.selectorText;
+ return this._node.appropriateSelectorFor(true);
+ }
+
propertyForName(name, dontCreateIfMissing)
{
console.assert(name);
@@ -288,26 +302,21 @@
generateCSSRuleString()
{
- if (!this._ownerRule)
- return;
-
+ // FIXME: <rdar://problem/10593948> Provide a way to change the tab width in the Web Inspector
+ const indentation = " ";
let styleText = "";
- let mediaQueriesCount = 0;
- let mediaList = this._ownerRule.mediaList;
- if (mediaList.length) {
- mediaQueriesCount = mediaList.length;
+ let mediaList = this.mediaList;
+ let mediaQueriesCount = mediaList.length;
+ for (let i = mediaQueriesCount - 1; i >= 0; --i)
+ styleText += indentation.repeat(mediaQueriesCount - i - 1) + "@media " + mediaList[i].text + " {\n";
- for (let i = mediaQueriesCount - 1; i >= 0; --i)
- styleText += " ".repeat(mediaQueriesCount - i - 1) + "@media " + mediaList[i].text + " {\n";
- }
+ styleText += indentation.repeat(mediaQueriesCount) + this.selectorText + " {\n";
- styleText += " ".repeat(mediaQueriesCount) + this._ownerRule.selectorText + " {\n";
-
for (let property of this._properties) {
if (property.anonymous)
continue;
- styleText += " ".repeat(mediaQueriesCount + 1) + property.text.trim();
+ styleText += indentation.repeat(mediaQueriesCount + 1) + property.text.trim();
if (!styleText.endsWith(";"))
styleText += ";";
@@ -316,7 +325,7 @@
}
for (let i = mediaQueriesCount; i > 0; --i)
- styleText += " ".repeat(i) + "}\n";
+ styleText += indentation.repeat(i) + "}\n";
styleText += "}";
Modified: trunk/Source/WebInspectorUI/UserInterface/Test.html (190527 => 190528)
--- trunk/Source/WebInspectorUI/UserInterface/Test.html 2015-10-02 22:24:07 UTC (rev 190527)
+++ trunk/Source/WebInspectorUI/UserInterface/Test.html 2015-10-02 22:33:00 UTC (rev 190528)
@@ -79,6 +79,7 @@
<script src=""
<script src=""
<script src=""
+ <script src=""
<script src=""
<script src=""
<script src=""
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorTreeItem.js (190527 => 190528)
--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorTreeItem.js 2015-10-02 22:24:07 UTC (rev 190527)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorTreeItem.js 2015-10-02 22:33:00 UTC (rev 190528)
@@ -144,8 +144,7 @@
}
contextMenu.appendItem(WebInspector.UIString("Copy Rule"), function() {
- let selectorText = !this.representedObject.ownerRule ? this.representedObject.node.appropriateSelectorFor(true) : null;
- InspectorFrontendHost.copyText(this.representedObject.generateCSSRuleString(selectorText));
+ InspectorFrontendHost.copyText(this.representedObject.generateCSSRuleString());
}.bind(this));
contextMenu.appendItem(WebInspector.UIString("Reset"), function() {
