Changeset 238882 in webkit

Timestamp:

Dec 4, 2018 5:37:03 PM (5 years ago)

Author:

Nikita Vasilyev

Message:

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):

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Base/Setting.js (modified) (1 diff)
• UserInterface/Models/CSSProperty.js (modified) (1 diff)
• UserInterface/Views/SettingsTabContentView.js (modified) (1 diff)
• UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css (modified) (1 diff)
• UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js (modified) (2 diffs)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+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>
 

trunk/Source/WebInspectorUI/UserInterface/Base/Setting.js

@@ -139 +139 @@
     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),

trunk/Source/WebInspectorUI/UserInterface/Models/CSSProperty.js

@@ -370 +370 @@
         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);
 

trunk/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js

@@ -318 +318 @@
         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"));
 

trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css

@@ -165 +165 @@
 }
 
+.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 {

trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js

@@ -113 +113 @@
         else if (this.hasSelectedProperties())
             this.selectProperties(this._anchorIndex, this._focusIndex);
+
+        this._updateDebugLockStatus();
     }
 
@@ -611 +613 @@
 
         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);
     }
 };