Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (238881 => 238882)
--- trunk/Source/WebInspectorUI/ChangeLog 2018-12-05 01:04:22 UTC (rev 238881)
+++ trunk/Source/WebInspectorUI/ChangeLog 2018-12-05 01:37:03 UTC (rev 238882)
@@ -1,3 +1,28 @@
+2018-12-04 Nikita Vasilyev <nvasil...@apple.com>
+
+ Web Inspector: Add style editing debug mode
+ https://bugs.webkit.org/show_bug.cgi?id=192282
+ <rdar://problem/46399176>
+
+ Reviewed by Matt Baker.
+
+ Introduce a style editing debug mode to help to troubleshoot complex bugs in the style editor.
+
+ - Log CSS changes;
+ - Display red border for locked style declarations.
+
+ * UserInterface/Base/Setting.js:
+ * UserInterface/Models/CSSProperty.js:
+ (WI.CSSProperty.prototype._updateOwnerStyleText):
+ * UserInterface/Views/SettingsTabContentView.js:
+ (WI.SettingsTabContentView.prototype._createDebugSettingsView):
+ * UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css:
+ (.spreadsheet-style-declaration-editor.debug-style-locked::after):
+ * UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js:
+ (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.layout):
+ (WI.SpreadsheetCSSStyleDeclarationEditor.prototype._updateStyleLock):
+ (WI.SpreadsheetCSSStyleDeclarationEditor.prototype._updateDebugLockStatus):
+
2018-12-04 Matt Baker <mattba...@apple.com>
Web Inspector: REGRESSION(r238602): Elements: changing selection no longer highlights the selected node
Modified: trunk/Source/WebInspectorUI/UserInterface/Base/Setting.js (238881 => 238882)
--- trunk/Source/WebInspectorUI/UserInterface/Base/Setting.js 2018-12-05 01:04:22 UTC (rev 238881)
+++ trunk/Source/WebInspectorUI/UserInterface/Base/Setting.js 2018-12-05 01:37:03 UTC (rev 238882)
@@ -138,6 +138,7 @@
autoLogProtocolMessages: new WI.Setting("auto-collect-protocol-messages", false),
autoLogTimeStats: new WI.Setting("auto-collect-time-stats", false),
enableLayoutFlashing: new WI.Setting("enable-layout-flashing", false),
+ enableStyleEditingDebugMode: new WI.Setting("enable-style-editing-debug-mode", false),
enableUncaughtExceptionReporter: new WI.Setting("enable-uncaught-exception-reporter", true),
filterMultiplexingBackendInspectorProtocolMessages: new WI.Setting("filter-multiplexing-backend-inspector-protocol-messages", true),
layoutDirection: new WI.Setting("layout-direction-override", "system"),
Modified: trunk/Source/WebInspectorUI/UserInterface/Models/CSSProperty.js (238881 => 238882)
--- trunk/Source/WebInspectorUI/UserInterface/Models/CSSProperty.js 2018-12-05 01:04:22 UTC (rev 238881)
+++ trunk/Source/WebInspectorUI/UserInterface/Models/CSSProperty.js 2018-12-05 01:37:03 UTC (rev 238882)
@@ -369,6 +369,12 @@
console.assert(oldText === styleText.slice(range.startOffset, range.endOffset), "_styleSheetTextRange data is invalid.");
+ if (WI.settings.enableStyleEditingDebugMode.value) {
+ let prefix = styleText.slice(0, range.startOffset);
+ let postfix = styleText.slice(range.endOffset);
+ console.info(`${prefix}%c${oldText}%c${newText}%c${postfix}`, `background: hsl(356, 100%, 90%); color: black`, `background: hsl(100, 100%, 91%); color: black`, `background: transparent`);
+ }
+
let newStyleText = this._appendSemicolonIfNeeded(styleText.slice(0, range.startOffset)) + newText + styleText.slice(range.endOffset);
let lineDelta = newText.lineCount - oldText.lineCount;
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js (238881 => 238882)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js 2018-12-05 01:04:22 UTC (rev 238881)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js 2018-12-05 01:37:03 UTC (rev 238882)
@@ -317,6 +317,10 @@
this._debugSettingsView.addSeparator();
+ this._debugSettingsView.addSetting(WI.unlocalizedString("Styles:"), WI.settings.enableStyleEditingDebugMode, WI.unlocalizedString("Enable style editing debug mode"));
+
+ this._debugSettingsView.addSeparator();
+
this._debugSettingsView.addSetting(WI.unlocalizedString("Debugging:"), WI.settings.pauseForInternalScripts, WI.unlocalizedString("Pause in WebKit-internal scripts"));
this._debugSettingsView.addSetting(WI.unlocalizedString("Uncaught Exception Reporter:"), WI.settings.enableUncaughtExceptionReporter, WI.unlocalizedString("Enabled"));
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css (238881 => 238882)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css 2018-12-05 01:04:22 UTC (rev 238881)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css 2018-12-05 01:37:03 UTC (rev 238882)
@@ -164,6 +164,17 @@
color: var(--syntax-highlight-comment-color);
}
+.spreadsheet-style-declaration-editor.debug-style-locked::after {
+ content: "";
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ right: 0;
+ width: 2px;
+ background-color: red;
+ pointer-events: none;
+}
+
@media (prefers-dark-interface) {
.spreadsheet-style-declaration-editor {
--background-color-selected: hsl(230, 51%, 36%);
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js (238881 => 238882)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js 2018-12-05 01:04:22 UTC (rev 238881)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js 2018-12-05 01:37:03 UTC (rev 238882)
@@ -112,6 +112,8 @@
this.addBlankProperty(this._propertyViews.length - 1 - this._pendingAddBlankPropertyIndexOffset);
else if (this.hasSelectedProperties())
this.selectProperties(this._anchorIndex, this._focusIndex);
+
+ this._updateDebugLockStatus();
}
detached()
@@ -610,7 +612,16 @@
return;
this._style.locked = this._focused || this._inlineSwatchActive;
+ this._updateDebugLockStatus();
}
+
+ _updateDebugLockStatus()
+ {
+ if (!this._style || !WI.settings.enableStyleEditingDebugMode.value)
+ return;
+
+ this.element.classList.toggle("debug-style-locked", this._style.locked);
+ }
};
WI.SpreadsheetCSSStyleDeclarationEditor.Event = {
