Web Inspector: Add style editing debug mode
authornvasilyev@apple.com <nvasilyev@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 5 Dec 2018 01:37:03 +0000 (01:37 +0000)
committernvasilyev@apple.com <nvasilyev@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 5 Dec 2018 01:37:03 +0000 (01:37 +0000)
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):

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@238882 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Base/Setting.js
Source/WebInspectorUI/UserInterface/Models/CSSProperty.js
Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js
Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css
Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js

index 9271caa..b4fdaa2 100644 (file)
@@ -1,3 +1,28 @@
+2018-12-04  Nikita Vasilyev  <nvasilyev@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  <mattbaker@apple.com>
 
         Web Inspector: REGRESSION(r238602): Elements: changing selection no longer highlights the selected node
index 86814ee..d0508a3 100644 (file)
@@ -138,6 +138,7 @@ WI.settings = {
     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"),
index 278cd5e..d6e4ad7 100644 (file)
@@ -369,6 +369,12 @@ WI.CSSProperty = class CSSProperty extends WI.Object
 
         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;
index 40a36e8..8a74021 100644 (file)
@@ -317,6 +317,10 @@ WI.SettingsTabContentView = class SettingsTabContentView extends WI.TabContentVi
 
         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"));
index 78f2b97..beb7128 100644 (file)
     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%);
index 2a223b7..a21e7d4 100644 (file)
@@ -112,6 +112,8 @@ WI.SpreadsheetCSSStyleDeclarationEditor = class SpreadsheetCSSStyleDeclarationEd
             this.addBlankProperty(this._propertyViews.length - 1 - this._pendingAddBlankPropertyIndexOffset);
         else if (this.hasSelectedProperties())
             this.selectProperties(this._anchorIndex, this._focusIndex);
+
+        this._updateDebugLockStatus();
     }
 
     detached()
@@ -610,6 +612,15 @@ WI.SpreadsheetCSSStyleDeclarationEditor = class SpreadsheetCSSStyleDeclarationEd
             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);
     }
 };