Changeset 237574 in webkit

Timestamp:

Oct 29, 2018 5:10:53 PM (6 years ago)

Author:

Devin Rousso

Message:

Web Inspector: Canvas: show warning when path moves offscreen
​https://bugs.webkit.org/show_bug.cgi?id=191016

Reviewed by Joseph Pecoraro.

• UserInterface/Models/RecordingAction.js:

(WI.RecordingAction):
(WI.RecordingAction.deriveCurrentState):
(WI.RecordingAction.prototype.get isVisual):
(WI.RecordingAction.prototype.get warning): Added.
(WI.RecordingAction.prototype.process.checkInvalidCurrentAxisPoint): Added.
(WI.RecordingAction.prototype.process):
(WI.RecordingAction.prototype.get hasVisibleEffect): Deleted.
Replace hasVisibleEffect with a more general warning value, so that it can be used for
more types of warnings.

• UserInterface/Views/RecordingActionTreeElement.js:

(WI.RecordingActionTreeElement.prototype.onattach):

• UserInterface/Views/RecordingActionTreeElement.css:

(.item.action.visual.warning:not(.invalid) > .status > .warning): Added.
(.item.action.visual.no-visible-effect:not(.invalid) > .status > .warning): Deleted.

• Localizations/en.lproj/localizedStrings.js:

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• Localizations/en.lproj/localizedStrings.js (modified) (1 diff)
• UserInterface/Models/RecordingAction.js (modified) (6 diffs)
• UserInterface/Views/RecordingActionTreeElement.css (modified) (1 diff)
• UserInterface/Views/RecordingActionTreeElement.js (modified) (1 diff)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2018-10-29  Devin Rousso  <drousso@apple.com>
+
+        Web Inspector: Canvas: show warning when path moves offscreen
+        https://bugs.webkit.org/show_bug.cgi?id=191016
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/Models/RecordingAction.js:
+        (WI.RecordingAction):
+        (WI.RecordingAction.deriveCurrentState):
+        (WI.RecordingAction.prototype.get isVisual):
+        (WI.RecordingAction.prototype.get warning): Added.
+        (WI.RecordingAction.prototype.process.checkInvalidCurrentAxisPoint): Added.
+        (WI.RecordingAction.prototype.process):
+        (WI.RecordingAction.prototype.get hasVisibleEffect): Deleted.
+        Replace `hasVisibleEffect` with a more general `warning` value, so that it can be used for
+        more types of warnings.
+
+        * UserInterface/Views/RecordingActionTreeElement.js:
+        (WI.RecordingActionTreeElement.prototype.onattach):
+        * UserInterface/Views/RecordingActionTreeElement.css:
+        (.item.action.visual.warning:not(.invalid) > .status > .warning): Added.
+        (.item.action.visual.no-visible-effect:not(.invalid) > .status > .warning): Deleted.
+
+        * Localizations/en.lproj/localizedStrings.js:
+
 2018-10-29  Devin Rousso  <drousso@apple.com>
 

trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js

@@ -852 +852 @@
 localizedStrings["The “%s”\ntable is empty."] = "The “%s”\ntable is empty.";
 localizedStrings["This action causes no visual change"] = "This action causes no visual change";
+localizedStrings["This action moves the path outside the visible area"] = "This action moves the path outside the visible area";
 localizedStrings["This object is a root"] = "This object is a root";
 localizedStrings["This object is referenced by internal objects"] = "This object is referenced by internal objects";

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

@@ -45 +45 @@
         this._isGetter = false;
         this._isVisual = false;
-        this._hasVisibleEffect = undefined;
 
         this._states = [];
         this._stateModifiers = new Set;
 
+        this._warning = null;
         this._swizzled = false;
         this._processed = false;
@@ -136 +136 @@
             let matrix = context.getTransform();
 
-            let state = {
-                currentX: context.currentX,
-                currentY: context.currentY,
-                direction: context.direction,
-                fillStyle: context.fillStyle,
-                font: context.font,
-                globalAlpha: context.globalAlpha,
-                globalCompositeOperation: context.globalCompositeOperation,
-                imageSmoothingEnabled: context.imageSmoothingEnabled,
-                imageSmoothingQuality: context.imageSmoothingQuality,
-                lineCap: context.lineCap,
-                lineDash: context.getLineDash(),
-                lineDashOffset: context.lineDashOffset,
-                lineJoin: context.lineJoin,
-                lineWidth: context.lineWidth,
-                miterLimit: context.miterLimit,
-                shadowBlur: context.shadowBlur,
-                shadowColor: context.shadowColor,
-                shadowOffsetX: context.shadowOffsetX,
-                shadowOffsetY: context.shadowOffsetY,
-                strokeStyle: context.strokeStyle,
-                textAlign: context.textAlign,
-                textBaseline: context.textBaseline,
-                transform: [matrix.a, matrix.b, matrix.c, matrix.d, matrix.e, matrix.f],
-                webkitImageSmoothingEnabled: context.webkitImageSmoothingEnabled,
-                webkitLineDash: context.webkitLineDash,
-                webkitLineDashOffset: context.webkitLineDashOffset,
-            };
+            let state = {};
+
+            if (WI.ImageUtilities.supportsCanvasPathDebugging()) {
+                state.currentX = context.currentX;
+                state.currentY = context.currentY;
+            }
+
+            state.direction = context.direction;
+            state.fillStyle = context.fillStyle;
+            state.font = context.font;
+            state.globalAlpha = context.globalAlpha;
+            state.globalCompositeOperation = context.globalCompositeOperation;
+            state.imageSmoothingEnabled = context.imageSmoothingEnabled;
+            state.imageSmoothingQuality = context.imageSmoothingQuality;
+            state.lineCap = context.lineCap;
+            state.lineDash = context.getLineDash();
+            state.lineDashOffset = context.lineDashOffset;
+            state.lineJoin = context.lineJoin;
+            state.lineWidth = context.lineWidth;
+            state.miterLimit = context.miterLimit;
+            state.shadowBlur = context.shadowBlur;
+            state.shadowColor = context.shadowColor;
+            state.shadowOffsetX = context.shadowOffsetX;
+            state.shadowOffsetY = context.shadowOffsetY;
+            state.strokeStyle = context.strokeStyle;
+            state.textAlign = context.textAlign;
+            state.textBaseline = context.textBaseline;
+            state.transform = [matrix.a, matrix.b, matrix.c, matrix.d, matrix.e, matrix.f];
+            state.webkitImageSmoothingEnabled = context.webkitImageSmoothingEnabled;
+            state.webkitLineDash = context.webkitLineDash;
+            state.webkitLineDashOffset = context.webkitLineDashOffset;
 
             if (WI.ImageUtilities.supportsCanvasPathDebugging())
@@ -196 +199 @@
     get isGetter() { return this._isGetter; }
     get isVisual() { return this._isVisual; }
-    get hasVisibleEffect() { return this._hasVisibleEffect; }
     get states() { return this._states; }
     get stateModifiers() { return this._stateModifiers; }
+    get warning() { return this._warning; }
 
     get ready()
@@ -216 +219 @@
             if (this._valid && this._isVisual) {
                 let contentBefore = recording.visualActionIndexes.length ? recording.actions[recording.visualActionIndexes.lastValue].snapshot : recording.initialState.content;
-                this._hasVisibleEffect = this._snapshot !== contentBefore;
+                if (this._snapshot === contentBefore)
+                    this._warning = WI.UIString("This action causes no visual change");
             }
             return;
@@ -245 +249 @@
         this.apply(context);
 
-        if (shouldCheckHasVisualEffect)
-            this._hasVisibleEffect = !Array.shallowEqual(contentBefore, getContent());
+        if (shouldCheckHasVisualEffect) {
+            let contentAfter = getContent();
+            if (Array.shallowEqual(contentBefore, contentAfter))
+                this._warning = WI.UIString("This action causes no visual change");
+        }
 
         if (recording.type === WI.Recording.Type.Canvas2D) {
@@ -260 +267 @@
             this._states.push(currentState);
 
+            let lastState = null;
             if (lastAction) {
-                let lastState = lastAction.states.lastValue;
+                lastState = lastAction.states.lastValue;
                 for (let key in currentState) {
                     if (!(key in lastState) || (currentState[key] !== lastState[key] && !Object.shallowEqual(currentState[key], lastState[key])))
                         this._stateModifiers.add(key);
                 }
+            }
+
+            if (WI.ImageUtilities.supportsCanvasPathDebugging()) {
+                let currentX = currentState.currentX;
+                let invalidX = (currentX < 0 || currentX >= context.canvas.width) && (!lastState || currentX !== lastState.currentX);
+
+                let currentY = currentState.currentY;
+                let invalidY = (currentY < 0 || currentY >= context.canvas.height) && (!lastState || currentY !== lastState.currentY);
+
+                if (invalidX || invalidY)
+                    this._warning = WI.UIString("This action moves the path outside the visible area");
             }
         }

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

@@ -221 +221 @@
 }
 
-.item.action.visual.no-visible-effect:not(.invalid) > .status > .warning {
+.item.action.warning:not(.invalid) > .status > .warning {
     width: 12px;
     height: 12px;

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

@@ -408 +408 @@
         this.element.dataset.index = this._index.toLocaleString();
 
-        if (this.representedObject.valid && this.representedObject.isVisual && !this.representedObject.hasVisibleEffect) {
-            this.addClassName("no-visible-effect");
-
-            const title = WI.UIString("This action causes no visual change");
-            this.status = WI.ImageUtilities.useSVGSymbol("Images/Warning.svg", "warning", title);
+        if (this.representedObject.valid && this.representedObject.warning) {
+            this.addClassName("warning");
+            this.status = WI.ImageUtilities.useSVGSymbol("Images/Warning.svg", "warning", this.representedObject.warning);
         }
     }