Attachment 356330 Details for Bug 192282 – Patch

[patch] Patch

patch.txt (text/plain), 6.56 KB, created by Nikita Vasilyev on 2018-12-01 17:57:45 PST

(hide)

Description:

Filename:

MIME Type:

Creator: Nikita Vasilyev

Created: 2018-12-01 17:57:45 PST

Size: 6.56 KB

patch

obsolete

>diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog
>index 55e1def1224..027fd8a774a 100644
>--- a/Source/WebInspectorUI/ChangeLog
>+++ b/Source/WebInspectorUI/ChangeLog
>@@ -1,3 +1,28 @@
>+2018-12-01  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 NOBODY (OOPS!).
>+
>+        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-11-30  Nikita Vasilyev  <nvasilyev@apple.com>
> 
>         Web Inspector: Jumping from Computed to Styles should select property
>diff --git a/Source/WebInspectorUI/UserInterface/Base/Setting.js b/Source/WebInspectorUI/UserInterface/Base/Setting.js
>index 86814eee985..d0508a33170 100644
>--- a/Source/WebInspectorUI/UserInterface/Base/Setting.js
>+++ b/Source/WebInspectorUI/UserInterface/Base/Setting.js
>@@ -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"),
>diff --git a/Source/WebInspectorUI/UserInterface/Models/CSSProperty.js b/Source/WebInspectorUI/UserInterface/Models/CSSProperty.js
>index 278cd5ead4f..d6e4ad71535 100644
>--- a/Source/WebInspectorUI/UserInterface/Models/CSSProperty.js
>+++ b/Source/WebInspectorUI/UserInterface/Models/CSSProperty.js
>@@ -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;
>diff --git a/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js b/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js
>index 40a36e845cb..8a740216ab3 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js
>@@ -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"));
>diff --git a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css
>index 78f2b97ace2..beb712841e2 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css
>@@ -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%);
>diff --git a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js
>index 6a14d9fda9c..8024c30a5ed 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js
>@@ -110,6 +110,8 @@ WI.SpreadsheetCSSStyleDeclarationEditor = class SpreadsheetCSSStyleDeclarationEd
> 
>         if (!isNaN(this._pendingAddBlankPropertyIndexOffset))
>             this.addBlankProperty(this._propertyViews.length - 1 - this._pendingAddBlankPropertyIndexOffset);
>+
>+        this._updateDebugLockStatus();
>     }
> 
>     detached()
>@@ -600,6 +602,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);
>     }
> };
>

Actions: View | Formatted Diff | Diff

Attachments on bug 192282: 356327 | 356328 | 356329 | 356330 | 356531 | 356542