Diff
Modified: trunk/LayoutTests/ChangeLog (222136 => 222137)
--- trunk/LayoutTests/ChangeLog 2017-09-17 17:28:15 UTC (rev 222136)
+++ trunk/LayoutTests/ChangeLog 2017-09-17 20:11:37 UTC (rev 222137)
@@ -1,3 +1,15 @@
+2017-09-17 Nikita Vasilyev <nvasil...@apple.com>
+
+ Web Inspector: Styles Redesign: support toggling properties
+ https://bugs.webkit.org/show_bug.cgi?id=176643
+
+ Reviewed by Matt Baker.
+
+ Add tests for String.prototype.lineCount and String.prototype.lastLine.
+
+ * inspector/unit-tests/string-utilities-expected.txt:
+ * inspector/unit-tests/string-utilities.html:
+
2017-09-16 Antti Koivisto <an...@apple.com>
Computing animated style should not require renderers
Modified: trunk/LayoutTests/inspector/unit-tests/string-utilities-expected.txt (222136 => 222137)
--- trunk/LayoutTests/inspector/unit-tests/string-utilities-expected.txt 2017-09-17 17:28:15 UTC (rev 222136)
+++ trunk/LayoutTests/inspector/unit-tests/string-utilities-expected.txt 2017-09-17 20:11:37 UTC (rev 222137)
@@ -34,3 +34,15 @@
PASS: "a1" < "a10"
PASS: "a10" > "a1"
+-- Running test case: String.prototype.get lineCount
+PASS: A string with two line breaks should have three lines.
+PASS: A string with two consecutive line breaks should have three lines.
+PASS: A string with a traling line breaks should have two lines.
+PASS: An empty string is one line.
+
+-- Running test case: String.prototype.get lastLine
+PASS: Last line of one line string is the same string.
+PASS: Last line of a three line string should be the third line.
+PASS: Last line of a string with a traling line break should be empty.
+PASS: Last line of an empty string is the same empty string.
+
Modified: trunk/LayoutTests/inspector/unit-tests/string-utilities.html (222136 => 222137)
--- trunk/LayoutTests/inspector/unit-tests/string-utilities.html 2017-09-17 17:28:15 UTC (rev 222136)
+++ trunk/LayoutTests/inspector/unit-tests/string-utilities.html 2017-09-17 20:11:37 UTC (rev 222137)
@@ -53,6 +53,31 @@
}
});
+
+ suite.addTestCase({
+ name: "String.prototype.get lineCount",
+ test() {
+ InspectorTest.expectEqual("1\n2\n3".lineCount, 3, "A string with two line breaks should have three lines.");
+ InspectorTest.expectEqual("1\n\n3".lineCount, 3, "A string with two consecutive line breaks should have three lines.");
+ InspectorTest.expectEqual("1\n".lineCount, 2, "A string with a traling line breaks should have two lines.");
+ InspectorTest.expectEqual("".lineCount, 1, "An empty string is one line.");
+
+ return true;
+ }
+ });
+
+ suite.addTestCase({
+ name: "String.prototype.get lastLine",
+ test() {
+ InspectorTest.expectEqual("single line".lastLine, "single line", "Last line of one line string is the same string.");
+ InspectorTest.expectEqual("1\n2\n3".lastLine, "3", "Last line of a three line string should be the third line.");
+ InspectorTest.expectEqual("1\n".lastLine, "", "Last line of a string with a traling line break should be empty.");
+ InspectorTest.expectEqual("".lastLine, "", "Last line of an empty string is the same empty string.");
+
+ return true;
+ }
+ });
+
suite.runTestCasesAndFinish();
}
</script>
Modified: trunk/Source/WebInspectorUI/ChangeLog (222136 => 222137)
--- trunk/Source/WebInspectorUI/ChangeLog 2017-09-17 17:28:15 UTC (rev 222136)
+++ trunk/Source/WebInspectorUI/ChangeLog 2017-09-17 20:11:37 UTC (rev 222137)
@@ -1,3 +1,61 @@
+2017-09-17 Nikita Vasilyev <nvasil...@apple.com>
+
+ Web Inspector: Styles Redesign: support toggling properties
+ https://bugs.webkit.org/show_bug.cgi?id=176643
+
+ Reviewed by Matt Baker.
+
+ Add checkboxes to toggle (comment/uncomment) CSS properties.
+
+ * UserInterface/Base/Utilities.js:
+ (String.prototype.get lineCount):
+ (String.prototype.get lastLine):
+ Add string methods that are used by WI.CSSProperty.prototype._updateOwnerStyleText.
+
+ * UserInterface/Models/CSSProperty.js:
+ (WI.CSSProperty.prototype.commentOut):
+ (WI.CSSProperty.prototype.set text):
+ (WI.CSSProperty.prototype.get editable):
+ (WI.CSSProperty.prototype._updateOwnerStyleText):
+ Add methods necessary for property toggling.
+
+ * UserInterface/Models/CSSStyleDeclaration.js:
+ (WI.CSSStyleDeclaration):
+ (WI.CSSStyleDeclaration.prototype.get allVisibleProperties):
+ Add a getter that is used by SpreadsheetCSSStyleDeclarationEditor.prototype._propertiesToRender.
+
+ (WI.CSSStyleDeclaration.prototype.get visibleProperties):
+ * UserInterface/Models/TextRange.js:
+ (WI.TextRange.prototype.clone):
+ (WI.TextRange.prototype.cloneAndModify):
+ (WI.TextRange.prototype.relativeTo):
+ Add methods that are used by WI.CSSProperty.prototype._updateOwnerStyleText.
+
+ * UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css:
+ (.spreadsheet-style-declaration-editor):
+ (.spreadsheet-style-declaration-editor .property-toggle):
+ (.spreadsheet-css-declaration:matches(:hover, :focus) .property-toggle,):
+ (.spreadsheet-style-declaration-editor .property.disabled,):
+ * UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js:
+ (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.layout):
+ (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.set style):
+ (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.get _propertiesToRender):
+ (WI.SpreadsheetCSSStyleDeclarationEditor):
+ (WI.SpreadsheetStyleProperty):
+ (WI.SpreadsheetStyleProperty.prototype.get element):
+ (WI.SpreadsheetStyleProperty.prototype._update):
+ * UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css:
+ * UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js:
+ (WI.SpreadsheetCSSStyleDeclarationSection.prototype.initialLayout):
+ * UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js:
+ (WI.SpreadsheetRulesStyleDetailsPanel.prototype.refresh):
+ (WI.SpreadsheetRulesStyleDetailsPanel):
+ * UserInterface/Views/SyntaxHighlightingDefaultTheme.css:
+ (.cm-s-default .cm-comment,):
+ * UserInterface/Views/Variables.css:
+ (:root):
+ Make comment color a CSS variable.
+
2017-09-15 Devin Rousso <web...@devinrousso.com>
Web Inspector: REGRESSION(r222057): recording state doesn't update when changing actions
Modified: trunk/Source/WebInspectorUI/UserInterface/Base/Utilities.js (222136 => 222137)
--- trunk/Source/WebInspectorUI/UserInterface/Base/Utilities.js 2017-09-17 17:28:15 UTC (rev 222136)
+++ trunk/Source/WebInspectorUI/UserInterface/Base/Utilities.js 2017-09-17 20:11:37 UTC (rev 222137)
@@ -759,6 +759,39 @@
}
});
+Object.defineProperty(String.prototype, "lineCount",
+{
+ get()
+ {
+ "use strict";
+
+ let lineCount = 1;
+ let index = 0;
+ while (true) {
+ index = this.indexOf("\n", index);
+ if (index === -1)
+ return lineCount;
+
+ index += "\n".length;
+ lineCount++;
+ }
+ }
+});
+
+Object.defineProperty(String.prototype, "lastLine",
+{
+ get()
+ {
+ "use strict";
+
+ let index = this.lastIndexOf("\n");
+ if (index === -1)
+ return this;
+
+ return this.slice(index + "\n".length);
+ }
+});
+
Object.defineProperty(String.prototype, "hash",
{
get()
Modified: trunk/Source/WebInspectorUI/UserInterface/Models/CSSProperty.js (222136 => 222137)
--- trunk/Source/WebInspectorUI/UserInterface/Models/CSSProperty.js 2017-09-17 17:28:15 UTC (rev 222136)
+++ trunk/Source/WebInspectorUI/UserInterface/Models/CSSProperty.js 2017-09-17 20:11:37 UTC (rev 222137)
@@ -118,6 +118,20 @@
this.dispatchEventToListeners(WI.CSSProperty.Event.Changed);
}
+ commentOut(disabled)
+ {
+ console.assert(this._enabled === disabled, "CSS property is already " + (disabled ? "disabled" : "enabled"));
+ if (this._enabled === !disabled)
+ return;
+
+ this._enabled = !disabled;
+
+ if (disabled)
+ this.text = "/* " + this._text + " */";
+ else
+ this.text = this._text.slice(2, -2).trim();
+ }
+
get synthesizedText()
{
var name = this.name;
@@ -133,6 +147,15 @@
return this._text || this.synthesizedText;
}
+ set text(newText)
+ {
+ if (this._text === newText)
+ return;
+
+ this._updateOwnerStyleText(this._text, newText);
+ this._text = newText;
+ }
+
get name() { return this._name; }
get canonicalName()
@@ -199,6 +222,11 @@
get variable() { return this._variable; }
get styleSheetTextRange() { return this._styleSheetTextRange; }
+ get editable()
+ {
+ return this._styleSheetTextRange && this._ownerStyle && this._ownerStyle.styleSheetTextRange;
+ }
+
get styleDeclarationTextRange()
{
if ("_styleDeclarationTextRange" in this)
@@ -254,6 +282,22 @@
return this._hasOtherVendorNameOrKeyword;
}
+
+ // Private
+
+ _updateOwnerStyleText(oldText, newText)
+ {
+ let styleText = this._ownerStyle.text || "";
+
+ // _styleSheetTextRange is the position of the property within the stylesheet.
+ // range is the position of the property within the rule.
+ let range = this._styleSheetTextRange.relativeTo(this._ownerStyle.styleSheetTextRange.startLine, this._ownerStyle.styleSheetTextRange.startColumn);
+ range.resolveOffsets(styleText);
+
+ let newStyleText = styleText.slice(0, range.startOffset) + newText + styleText.slice(range.endOffset);
+ this._styleSheetTextRange = this._styleSheetTextRange.cloneAndModify(0, 0, newText.lineCount - oldText.lineCount, newText.lastLine.length - oldText.lastLine.length);
+ this._ownerStyle.text = newStyleText;
+ }
};
WI.CSSProperty.Event = {
Modified: trunk/Source/WebInspectorUI/UserInterface/Models/CSSStyleDeclaration.js (222136 => 222137)
--- trunk/Source/WebInspectorUI/UserInterface/Models/CSSStyleDeclaration.js 2017-09-17 17:28:15 UTC (rev 222136)
+++ trunk/Source/WebInspectorUI/UserInterface/Models/CSSStyleDeclaration.js 2017-09-17 20:11:37 UTC (rev 222137)
@@ -46,6 +46,9 @@
this._initialText = text;
this._hasModifiedInitialText = false;
+ this._allProperties = [];
+ this._allVisibleProperties = null;
+
this.update(text, properties, styleSheetTextRange, true);
}
@@ -106,14 +109,14 @@
this._propertyNameMap = {};
delete this._visibleProperties;
+ this._allVisibleProperties = null;
var editable = this.editable;
- for (var i = 0; i < this._properties.length; ++i) {
- var property = this._properties[i];
+ for (let property of this._allProperties) {
property.ownerStyle = this;
- // Store the property in a map if we arn't editable. This
+ // Store the property in a map if we aren't editable. This
// allows for quick lookup for computed style. Editable
// styles don't use the map since they need to account for
// overridden properties.
@@ -221,15 +224,19 @@
get allProperties() { return this._allProperties; }
+ get allVisibleProperties()
+ {
+ if (!this._allVisibleProperties)
+ this._allVisibleProperties = this._allProperties.filter((property) => !!property.styleDeclarationTextRange);
+
+ return this._allVisibleProperties;
+ }
+
get visibleProperties()
{
- if (this._visibleProperties)
- return this._visibleProperties;
+ if (!this._visibleProperties)
+ this._visibleProperties = this._properties.filter((property) => !!property.styleDeclarationTextRange);
- this._visibleProperties = this._properties.filter(function(property) {
- return !!property.styleDeclarationTextRange;
- });
-
return this._visibleProperties;
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Models/TextRange.js (222136 => 222137)
--- trunk/Source/WebInspectorUI/UserInterface/Models/TextRange.js 2017-09-17 17:28:15 UTC (rev 222136)
+++ trunk/Source/WebInspectorUI/UserInterface/Models/TextRange.js 2017-09-17 20:11:37 UTC (rev 222137)
@@ -108,4 +108,30 @@
return true;
}
+
+ clone()
+ {
+ console.assert(!isNaN(this._startLine), "TextRange needs line/column data.");
+ return new WI.TextRange(this._startLine, this._startColumn, this._endLine, this._endColumn);
+ }
+
+ cloneAndModify(deltaStartLine, deltaStartColumn, deltaEndLine, deltaEndColumn)
+ {
+ console.assert(!isNaN(this._startLine), "TextRange needs line/column data.");
+ return new WI.TextRange(this._startLine + deltaStartLine, this._startColumn + deltaStartColumn, this._endLine + deltaEndLine, this._endColumn + deltaEndColumn);
+ }
+
+ relativeTo(line, column)
+ {
+ let deltaStartColumn = 0;
+ if (this._startLine === line)
+ deltaStartColumn = -column;
+
+ let deltaEndColumn = 0;
+ if (this._endLine === line)
+ deltaEndColumn = -column;
+
+ return this.cloneAndModify(-line, deltaStartColumn, -line, deltaEndColumn);
+ }
+
};
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css (222136 => 222137)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css 2017-09-17 17:28:15 UTC (rev 222136)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css 2017-09-17 20:11:37 UTC (rev 222137)
@@ -24,6 +24,8 @@
*/
.spreadsheet-style-declaration-editor {
+ position: relative;
+ padding-left: 17px;
clear: both;
}
@@ -38,3 +40,22 @@
.spreadsheet-style-declaration-editor.no-properties {
display: none;
}
+
+.spreadsheet-style-declaration-editor .property-toggle {
+ visibility: hidden;
+ position: absolute;
+ left: 1px;
+ width: 10px;
+ height: 10px;
+ margin: 0;
+}
+
+.spreadsheet-css-declaration:matches(:hover, :focus) .property-toggle,
+.spreadsheet-style-declaration-editor .property.disabled .property-toggle {
+ visibility: visible;
+}
+
+.spreadsheet-style-declaration-editor .property.disabled,
+.spreadsheet-style-declaration-editor .property.disabled > * {
+ color: var(--syntax-highlight-comment-color) !important;
+}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js (222136 => 222137)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js 2017-09-17 17:28:15 UTC (rev 222136)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js 2017-09-17 20:11:37 UTC (rev 222137)
@@ -46,7 +46,7 @@
this.element.classList.toggle("no-properties", !properties.length);
for (let property of properties)
- this.element.append(this._renderProperty(property));
+ this.element.append(new WI.SpreadsheetStyleProperty(property).element);
}
get style()
@@ -61,7 +61,7 @@
this._style = style || null;
- this.needsLayout(WI.View.LayoutReason.Dirty);
+ this.needsLayout();
}
// Private
@@ -69,30 +69,66 @@
get _propertiesToRender()
{
if (this._style._styleSheetTextRange)
- return this._style.visibleProperties;
+ return this._style.allVisibleProperties;
- return this._style.properties;
+ return this._style.allProperties;
}
+};
- _renderProperty(cssProperty)
+WI.SpreadsheetCSSStyleDeclarationEditor.StyleClassName = "spreadsheet-style-declaration-editor";
+
+WI.SpreadsheetStyleProperty = class SpreadsheetStyleProperty extends WI.Object
+{
+ constructor(property)
{
- let propertyElement = document.createElement("div");
- propertyElement.classList.add("property");
+ super();
- let nameElement = propertyElement.appendChild(document.createElement("span"));
+ this._property = property;
+ this._element = document.createElement("div");
+ this._element.classList.add("property");
+
+ this._update();
+ }
+
+ // Public
+
+ get element() { return this._element; }
+
+ // Private
+
+ _update()
+ {
+ this.element.removeChildren();
+ this.element.classList.toggle("disabled", !this._property.enabled);
+
+ if (this._property.editable) {
+ this._checkboxElement = this.element.appendChild(document.createElement("input"));
+ this._checkboxElement.classList.add("property-toggle");
+ this._checkboxElement.type = "checkbox";
+ this._checkboxElement.checked = this._property.enabled;
+ this._checkboxElement.addEventListener("change", () => {
+ let disabled = !this._checkboxElement.checked;
+ this._property.commentOut(disabled);
+ this._update();
+ });
+ }
+
+ if (!this._property.enabled)
+ this.element.append("/* ");
+
+ let nameElement = this.element.appendChild(document.createElement("span"));
nameElement.classList.add("name");
- nameElement.textContent = cssProperty.name;
+ nameElement.textContent = this._property.name;
- propertyElement.append(": ");
+ this.element.append(": ");
- let valueElement = propertyElement.appendChild(document.createElement("span"));
+ let valueElement = this.element.appendChild(document.createElement("span"));
valueElement.classList.add("value");
- valueElement.textContent = cssProperty.value;
+ valueElement.textContent = this._property.value;
- propertyElement.append(";");
+ this.element.append(";");
- return propertyElement;
+ if (!this._property.enabled)
+ this.element.append(" */");
}
};
-
-WI.SpreadsheetCSSStyleDeclarationEditor.StyleClassName = "spreadsheet-style-declaration-editor";
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css (222136 => 222137)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css 2017-09-17 17:28:15 UTC (rev 222136)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css 2017-09-17 20:11:37 UTC (rev 222137)
@@ -83,10 +83,6 @@
color: black;
}
-.spreadsheet-css-declaration .properties {
- margin-left: 1.4em;
-}
-
.spreadsheet-css-declaration.locked {
background-color: hsl(0, 0%, 97%)
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js (222136 => 222137)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js 2017-09-17 17:28:15 UTC (rev 222136)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js 2017-09-17 20:11:37 UTC (rev 222137)
@@ -70,7 +70,7 @@
this._element.append(this._createMediaHeader(), this._headerElement, openBrace);
this.addSubview(this._propertiesEditor);
- this._propertiesEditor.needsLayout(WI.View.LayoutReason.Dirty);
+ this._propertiesEditor.needsLayout();
this._element.append(closeBrace);
if (!this._style.editable)
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js (222136 => 222137)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js 2017-09-17 17:28:15 UTC (rev 222136)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js 2017-09-17 20:11:37 UTC (rev 222137)
@@ -116,7 +116,7 @@
this._inspectorSection = section;
this.addSubview(section);
- section.needsLayout(WI.View.LayoutReason.Dirty);
+ section.needsLayout();
previousStyle = style;
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SyntaxHighlightingDefaultTheme.css (222136 => 222137)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SyntaxHighlightingDefaultTheme.css 2017-09-17 17:28:15 UTC (rev 222136)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SyntaxHighlightingDefaultTheme.css 2017-09-17 20:11:37 UTC (rev 222137)
@@ -35,7 +35,7 @@
.cm-s-default .cm-comment,
.syntax-highlighted :matches(.css-comment, ._javascript_-comment, .html-comment) {
- color: hsl(119, 100%, 22%);
+ color: var(--syntax-highlight-comment-color);
}
.cm-s-default :matches(.cm-tag, .cm-bracket, .cm-atom, .cm-keyword, .cm-m-_javascript_.cm-builtin),
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css (222136 => 222137)
--- trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css 2017-09-17 17:28:15 UTC (rev 222136)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css 2017-09-17 20:11:37 UTC (rev 222137)
@@ -80,6 +80,7 @@
--syntax-highlight-string-color: hsl(1, 79%, 42%);
--syntax-highlight-regexp-color: hsl(20, 100%, 44%);
--syntax-highlight-symbol-color: hsl(172, 45%, 45%);
+ --syntax-highlight-comment-color: hsl(119, 100%, 22%);
--syntax-highlight-regex-group-color: var(--text-color-gray-medium);
