Diff
Modified: trunk/LayoutTests/ChangeLog (217910 => 217911)
--- trunk/LayoutTests/ChangeLog 2017-06-07 23:27:14 UTC (rev 217910)
+++ trunk/LayoutTests/ChangeLog 2017-06-07 23:53:10 UTC (rev 217911)
@@ -1,3 +1,13 @@
+2017-06-07 Devin Rousso <[email protected]>
+
+ Web Inspector: Allow user to choose stylesheet when creating new rules
+ https://bugs.webkit.org/show_bug.cgi?id=172487
+
+ Reviewed by Joseph Pecoraro.
+
+ * inspector/css/add-rule-expected.html: Added.
+ * inspector/css/add-rule.html: Added.
+
2017-06-07 Youenn Fablet <[email protected]>
getUserMedia is prompting too often
Added: trunk/LayoutTests/inspector/css/add-rule-expected.txt (0 => 217911)
--- trunk/LayoutTests/inspector/css/add-rule-expected.txt (rev 0)
+++ trunk/LayoutTests/inspector/css/add-rule-expected.txt 2017-06-07 23:53:10 UTC (rev 217911)
@@ -0,0 +1,22 @@
+Testing that CSS.addRule works for all types of stylesheets.
+
+
+== Running test suite: CSS.addRule
+-- Running test case: CSS.addRule.InNonExistingInspectorStyleSheet
+PASS: Rule selector should be "body"
+PASS: Rule range should be [0:0,0:4]
+PASS: Rule origin should be "inspector"
+
+-- Running test case: CSS.addRule.InExistingInspectorStyleSheet
+PASS: Rule selector should be "div"
+PASS: Rule range should be [1:0,1:3]
+PASS: Rule origin should be "inspector"
+
+-- Running test case: CSS.addRule.ExternalStyleSheet
+PASS: Rule selector should be "div"
+PASS: Rule range should be [2:0,2:3]
+PASS: Rule origin should be "regular"
+
+-- Running test case: CSS.addRule.BadStyleSheetId
+PASS: No target stylesheet found
+
Added: trunk/LayoutTests/inspector/css/add-rule.html (0 => 217911)
--- trunk/LayoutTests/inspector/css/add-rule.html (rev 0)
+++ trunk/LayoutTests/inspector/css/add-rule.html 2017-06-07 23:53:10 UTC (rev 217911)
@@ -0,0 +1,153 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src=""
+<link rel="stylesheet" href=""
+<script>
+function test() {
+ let nodeStyles = null;
+
+ let suite = InspectorTest.createAsyncSuite("CSS.addRule");
+
+ let mainFrame = WebInspector.frameResourceManager.mainFrame;
+
+ function stringify(range) {
+ return `${range.startLine}:${range.startColumn},${range.endLine}:${range.endColumn}`;
+ }
+
+ suite.addTestCase({
+ name: "CSS.addRule.InNonExistingInspectorStyleSheet",
+ description: "Ensure that an inspector style sheet is created and the rule is added.",
+ test(resolve, reject) {
+ function ruleAdded(error, rulePayload) {
+ if (error) {
+ reject(error);
+ return;
+ }
+
+ InspectorTest.expectEqual(rulePayload.selectorList.text, "body", `Rule selector should be "body"`);
+ InspectorTest.expectEqual(stringify(rulePayload.selectorList.range), "0:0,0:4", `Rule range should be [0:0,0:4]`);
+ InspectorTest.expectEqual(rulePayload.origin, "inspector", `Rule origin should be "inspector"`);
+
+ resolve();
+ }
+
+ function inspectorStyleSheetAvailable(styleSheet) {
+ if (!styleSheet) {
+ reject("Missing inspector style sheet");
+ return;
+ }
+
+ CSSAgent.addRule(styleSheet.id, "body", ruleAdded);
+ }
+
+ function usedExistingInspectorStylesheet(styleSheet) {
+ reject("Inspector style sheet already exists");
+ }
+
+ const doNotCreateIfMissing = true;
+ WebInspector.cssStyleManager.preferredInspectorStyleSheetForFrame(mainFrame, usedExistingInspectorStylesheet, doNotCreateIfMissing);
+
+ WebInspector.cssStyleManager.preferredInspectorStyleSheetForFrame(mainFrame, inspectorStyleSheetAvailable);
+ }
+ });
+
+ suite.addTestCase({
+ name: "CSS.addRule.InExistingInspectorStyleSheet",
+ description: "Ensure that a rule is added to the existing inspector style sheet.",
+ test(resolve, reject) {
+ function ruleAdded(error, rulePayload) {
+ if (error) {
+ reject(error);
+ return;
+ }
+
+ InspectorTest.expectEqual(rulePayload.selectorList.text, "div", `Rule selector should be "div"`);
+ InspectorTest.expectEqual(stringify(rulePayload.selectorList.range), "1:0,1:3", `Rule range should be [1:0,1:3]`);
+ InspectorTest.expectEqual(rulePayload.origin, "inspector", `Rule origin should be "inspector"`);
+
+ resolve();
+ }
+
+ let inspectorStyleSheet = null;
+ for (let styleSheet of WebInspector.cssStyleManager.styleSheets) {
+ if (styleSheet.isInspectorStyleSheet()) {
+ if (inspectorStyleSheet) {
+ reject("There should only be one inspector style sheet");
+ return;
+ }
+
+ inspectorStyleSheet = styleSheet;
+ }
+ }
+
+ if (inspectorStyleSheet)
+ CSSAgent.addRule(inspectorStyleSheet.id, "div", ruleAdded);
+ else
+ reject("Missing inspector style sheet");
+ }
+ });
+
+ suite.addTestCase({
+ name: "CSS.addRule.ExternalStyleSheet",
+ description: "Ensure that a rule is added to the external style sheet.",
+ test(resolve, reject) {
+ function ruleAdded(error, rulePayload) {
+ if (error) {
+ reject(error);
+ return;
+ }
+
+ InspectorTest.expectEqual(rulePayload.selectorList.text, "div", `Rule selector should be "div"`);
+ InspectorTest.expectEqual(stringify(rulePayload.selectorList.range), "2:0,2:3", `Rule range should be [2:0,2:3]`);
+ InspectorTest.expectEqual(rulePayload.origin, "regular", `Rule origin should be "regular"`);
+
+ resolve();
+ }
+
+ let externalStyleSheet = null;
+ for (let styleSheet of WebInspector.cssStyleManager.styleSheets) {
+ if (styleSheet.displayName === "external.css") {
+ if (externalStyleSheet) {
+ reject("There should only be one external style sheet");
+ return;
+ }
+
+ externalStyleSheet = styleSheet;
+ }
+ }
+
+ if (externalStyleSheet)
+ CSSAgent.addRule(externalStyleSheet.id, "div", ruleAdded);
+ else
+ reject("Missing external style sheet");
+ }
+ });
+
+ // ------
+
+ suite.addTestCase({
+ name: "CSS.addRule.BadStyleSheetId",
+ description: "Ensure that adding a rule to a style sheet with an invalid id is handled properly.",
+ test(resolve, reject) {
+ function ruleAdded(error, rulePayload) {
+ if (error) {
+ InspectorTest.pass(error);
+ resolve();
+ return;
+ }
+
+ reject(JSON.stringify(rulePayload));
+ }
+ CSSAgent.addRule("DOES_NOT_EXIST", "div", ruleAdded);
+ }
+ });
+
+ suite.runTestCasesAndFinish();
+}
+</script>
+</head>
+<body _onload_="runTest()">
+ <p>Testing that CSS.addRule works for all types of stylesheets.</p>
+</body>
+</html>
Modified: trunk/Source/WebCore/ChangeLog (217910 => 217911)
--- trunk/Source/WebCore/ChangeLog 2017-06-07 23:27:14 UTC (rev 217910)
+++ trunk/Source/WebCore/ChangeLog 2017-06-07 23:53:10 UTC (rev 217911)
@@ -1,3 +1,16 @@
+2017-06-07 Devin Rousso <[email protected]>
+
+ Web Inspector: Allow user to choose stylesheet when creating new rules
+ https://bugs.webkit.org/show_bug.cgi?id=172487
+
+ Reviewed by Joseph Pecoraro.
+
+ New test: inspector/css/add-rule.html
+
+ * inspector/InspectorStyleSheet.cpp:
+ (WebCore::InspectorStyleSheet::addRule):
+ Reparse the content when a new rule is added to a non-inspector origin stylesheet.
+
2017-06-07 Youenn Fablet <[email protected]>
getUserMedia is prompting too often
Modified: trunk/Source/WebCore/inspector/InspectorStyleSheet.cpp (217910 => 217911)
--- trunk/Source/WebCore/inspector/InspectorStyleSheet.cpp 2017-06-07 23:27:14 UTC (rev 217910)
+++ trunk/Source/WebCore/inspector/InspectorStyleSheet.cpp 2017-06-07 23:53:10 UTC (rev 217911)
@@ -929,12 +929,28 @@
if (text.hasException())
return text.releaseException();
+ auto addRuleResult = m_pageStyleSheet->addRule(selector, emptyString(), std::nullopt);
+ if (addRuleResult.hasException())
+ return addRuleResult.releaseException();
+
StringBuilder styleSheetText;
styleSheetText.append(text.releaseReturnValue());
- auto addRuleResult = m_pageStyleSheet->addRule(selector, emptyString(), std::nullopt);
- if (addRuleResult.hasException())
- return addRuleResult.releaseException();
+ if (!styleSheetText.isEmpty())
+ styleSheetText.append('\n');
+
+ styleSheetText.append(selector);
+ styleSheetText.appendLiteral(" {}");
+
+ // Using setText() as this operation changes the stylesheet rule set.
+ setText(styleSheetText.toString());
+
+ // Inspector Style Sheets are always treated as though their parsed data is ready.
+ if (m_origin == Inspector::Protocol::CSS::StyleSheetOrigin::Inspector)
+ fireStyleSheetChanged();
+ else
+ reparseStyleSheet(styleSheetText.toString());
+
ASSERT(m_pageStyleSheet->length());
unsigned lastRuleIndex = m_pageStyleSheet->length() - 1;
CSSRule* rule = m_pageStyleSheet->item(lastRuleIndex);
@@ -948,16 +964,6 @@
return Exception { SYNTAX_ERR };
}
- if (!styleSheetText.isEmpty())
- styleSheetText.append('\n');
-
- styleSheetText.append(selector);
- styleSheetText.appendLiteral(" {}");
- // Using setText() as this operation changes the stylesheet rule set.
- setText(styleSheetText.toString());
-
- fireStyleSheetChanged();
-
return styleRule;
}
Modified: trunk/Source/WebInspectorUI/ChangeLog (217910 => 217911)
--- trunk/Source/WebInspectorUI/ChangeLog 2017-06-07 23:27:14 UTC (rev 217910)
+++ trunk/Source/WebInspectorUI/ChangeLog 2017-06-07 23:53:10 UTC (rev 217911)
@@ -1,3 +1,25 @@
+2017-06-07 Devin Rousso <[email protected]>
+
+ Web Inspector: Allow user to choose stylesheet when creating new rules
+ https://bugs.webkit.org/show_bug.cgi?id=172487
+
+ Reviewed by Joseph Pecoraro.
+
+ * Localizations/en.lproj/localizedStrings.js:
+ * UserInterface/Models/DOMNodeStyles.js:
+ (WebInspector.DOMNodeStyles.prototype.addRule.inspectorStyleSheetAvailable):
+ (WebInspector.DOMNodeStyles.prototype.addRule):
+ * UserInterface/Views/CSSStyleDetailsSidebarPanel.js:
+ (WebInspector.CSSStyleDetailsSidebarPanel.prototype.initialLayout):
+ (WebInspector.CSSStyleDetailsSidebarPanel.prototype._newRuleButtonContextMenu):
+ * UserInterface/Views/RulesStyleDetailsPanel.js:
+ (WebInspector.RulesStyleDetailsPanel.prototype.newRuleButtonClicked):
+ (WebInspector.RulesStyleDetailsPanel.prototype.newRuleButtonContextMenu):
+ * UserInterface/Views/VisualStyleSelectorSection.js:
+ (WebInspector.VisualStyleSelectorSection):
+ (WebInspector.VisualStyleSelectorSection.prototype._addNewRuleContextMenu):
+ (WebInspector.VisualStyleSelectorSection.prototype._addNewRule): Renamed _addNewRuleClick.
+
2017-06-06 Joseph Pecoraro <[email protected]>
Unreviewed rollout r217807. Caused a test to crash.
Modified: trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js (217910 => 217911)
--- trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2017-06-07 23:27:14 UTC (rev 217910)
+++ trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2017-06-07 23:53:10 UTC (rev 217911)
@@ -112,6 +112,7 @@
localizedStrings["Auto Increment"] = "Auto Increment";
localizedStrings["Automatically continue after evaluating"] = "Automatically continue after evaluating";
localizedStrings["Automatically insert newline"] = "Automatically insert newline";
+localizedStrings["Available Style Sheets"] = "Available Style Sheets";
localizedStrings["Average Time"] = "Average Time";
localizedStrings["Back (%s)"] = "Back (%s)";
localizedStrings["Background"] = "Background";
Modified: trunk/Source/WebInspectorUI/UserInterface/Models/DOMNodeStyles.js (217910 => 217911)
--- trunk/Source/WebInspectorUI/UserInterface/Models/DOMNodeStyles.js 2017-06-07 23:27:14 UTC (rev 217910)
+++ trunk/Source/WebInspectorUI/UserInterface/Models/DOMNodeStyles.js 2017-06-07 23:53:10 UTC (rev 217911)
@@ -263,7 +263,7 @@
return this._pendingRefreshTask;
}
- addRule(selector, text)
+ addRule(selector, text, styleSheetId)
{
selector = selector || this._node.appropriateSelectorFor(true);
@@ -302,10 +302,16 @@
function inspectorStyleSheetAvailable(styleSheet)
{
+ if (!styleSheet)
+ return;
+
CSSAgent.addRule(styleSheet.id, selector, addedRule.bind(this));
}
- WebInspector.cssStyleManager.preferredInspectorStyleSheetForFrame(this._node.frame, inspectorStyleSheetAvailable.bind(this));
+ if (styleSheetId)
+ inspectorStyleSheetAvailable.call(this, WebInspector.cssStyleManager.styleSheetForIdentifier(styleSheetId));
+ else
+ WebInspector.cssStyleManager.preferredInspectorStyleSheetForFrame(this._node.frame, inspectorStyleSheetAvailable.bind(this));
}
rulesForSelector(selector)
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js (217910 => 217911)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js 2017-06-07 23:27:14 UTC (rev 217910)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js 2017-06-07 23:53:10 UTC (rev 217911)
@@ -170,6 +170,7 @@
let newRuleButton = optionsContainer.createChild("img", "new-rule");
newRuleButton.title = WebInspector.UIString("Add new rule");
newRuleButton.addEventListener("click", this._newRuleButtonClicked.bind(this));
+ newRuleButton.addEventListener("contextmenu", this._newRuleButtonContextMenu.bind(this));
this._filterBar = new WebInspector.FilterBar;
this._filterBar.placeholder = WebInspector.UIString("Filter Styles");
@@ -322,6 +323,12 @@
this._selectedPanel.newRuleButtonClicked();
}
+ _newRuleButtonContextMenu(event)
+ {
+ if (this._selectedPanel && typeof this._selectedPanel.newRuleButtonContextMenu === "function")
+ this._selectedPanel.newRuleButtonContextMenu(event);
+ }
+
_classToggleButtonClicked(event)
{
this._classToggleButton.classList.toggle("selected");
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.js (217910 => 217911)
--- trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.js 2017-06-07 23:27:14 UTC (rev 217910)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.js 2017-06-07 23:53:10 UTC (rev 217911)
@@ -397,6 +397,32 @@
this.nodeStyles.addRule(newInspectorRuleSelector);
}
+ newRuleButtonContextMenu(event)
+ {
+ if (this.nodeStyles.node.isInUserAgentShadowTree())
+ return;
+
+ let styleSheets = WebInspector.cssStyleManager.styleSheets.filter(styleSheet => styleSheet.hasInfo() && !styleSheet.isInlineStyleTag() && !styleSheet.isInlineStyleAttributeStyleSheet());
+ if (!styleSheets.length)
+ return;
+
+ const justSelector = true;
+ let selector = this.nodeStyles.node.appropriateSelectorFor(justSelector);
+
+ let contextMenu = WebInspector.ContextMenu.createFromEvent(event);
+
+ const handler = null;
+ const disabled = true;
+ contextMenu.appendItem(WebInspector.UIString("Available Style Sheets"), handler, disabled);
+
+ for (let styleSheet of styleSheets) {
+ contextMenu.appendItem(styleSheet.displayName, () => {
+ const text = "";
+ this.nodeStyles.addRule(selector, text, styleSheet.id);
+ });
+ }
+ }
+
sectionForStyle(style)
{
if (style.__rulesSection)
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorSection.js (217910 => 217911)
--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorSection.js 2017-06-07 23:27:14 UTC (rev 217910)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorSection.js 2017-06-07 23:53:10 UTC (rev 217911)
@@ -60,7 +60,8 @@
this._newInspectorRuleSelector = null;
let addGlyphElement = useSVGSymbol("Images/Plus13.svg", "visual-style-selector-section-add-rule", WebInspector.UIString("Add new rule"));
- addGlyphElement.addEventListener("click", this._addNewRule.bind(this));
+ addGlyphElement.addEventListener("click", this._addNewRuleClick.bind(this));
+ addGlyphElement.addEventListener("contextmenu", this._addNewRuleContextMenu.bind(this));
controlElement.appendChild(addGlyphElement);
this._headerElement.addEventListener("mouseover", this._handleMouseOver.bind(this));
@@ -256,7 +257,7 @@
this.dispatchEventToListeners(WebInspector.VisualStyleSelectorSection.Event.SelectorChanged);
}
- _addNewRule(event)
+ _addNewRuleClick(event)
{
if (!this._nodeStyles || this._nodeStyles.node.isInUserAgentShadowTree())
return;
@@ -272,6 +273,29 @@
this._nodeStyles.addRule(selector);
}
+ _addNewRuleContextMenu(event)
+ {
+ if (!this._nodeStyles || this._nodeStyles.node.isInUserAgentShadowTree())
+ return;
+
+ let styleSheets = WebInspector.cssStyleManager.styleSheets.filter(styleSheet => styleSheet.hasInfo() && !styleSheet.isInlineStyleTag() && !styleSheet.isInlineStyleAttributeStyleSheet());
+ if (!styleSheets.length)
+ return;
+
+ let contextMenu = WebInspector.ContextMenu.createFromEvent(event);
+
+ const handler = null;
+ const disabled = true;
+ contextMenu.appendItem(WebInspector.UIString("Available Style Sheets"), handler, disabled);
+
+ for (let styleSheet of styleSheets) {
+ contextMenu.appendItem(styleSheet.displayName, () => {
+ const text = "";
+ this._nodeStyles.addRule(this.currentStyle().selectorText, text, styleSheet.id);
+ });
+ }
+ }
+
_treeElementCheckboxToggled(event)
{
let style = this.currentStyle();
