Skip to content

Commit

Permalink
Web Inspector: give WI.StepsFunction a better name and move it to i…
Browse files Browse the repository at this point in the history
…ts own file

https://bugs.webkit.org/show_bug.cgi?id=259503

Reviewed by Timothy Hatcher and Tim Nguyen.

`WI.StepsFunction` should really be named `WI.StepsTimingFunction` to convey it's true purpose.

It also shouldn't really be in `Source/WebInspectorUI/UserInterface/Models/Geometry.js` since it has nothing to do with geometry.

* Source/WebInspectorUI/UserInterface/Models/StepsTimingFunction.js: Added.
(WI.StepsTimingFunction):
(WI.StepsTimingFunction.fromString):
(WI.StepsTimingFunction.prototype.get type):
(WI.StepsTimingFunction.prototype.get count):
(WI.StepsTimingFunction.prototype.copy):
(WI.StepsTimingFunction.prototype.toString):
* Source/WebInspectorUI/UserInterface/Models/Geometry.js:
(WI.Spring):
(WI.StepsFunction): Deleted.
(WI.StepsFunction.fromString): Deleted.
(WI.StepsFunction.prototype.get type): Deleted.
(WI.StepsFunction.prototype.get count): Deleted.
(WI.StepsFunction.prototype.copy): Deleted.
(WI.StepsFunction.prototype.toString): Deleted.
* Source/WebInspectorUI/UserInterface/Models/Animation.js:
(WI.Animation.prototype._updateEffect):
* Source/WebInspectorUI/UserInterface/Views/AnimationContentView.js:
(WI.AnimationContentView.prototype._refreshPreview):

* Source/WebInspectorUI/UserInterface/Main.html:
* Source/WebInspectorUI/UserInterface/Test.html:

* LayoutTests/inspector/animation/resources/lifecycle-utilities.js:
* LayoutTests/inspector/unit-tests/geometry.html:
* LayoutTests/inspector/unit-tests/geometry-expected.txt:
* LayoutTests/inspector/unit-tests/steps-timing-function.html: Added.
* LayoutTests/inspector/unit-tests/steps-timing-function-expected.txt: Added.

Canonical link: https://commits.webkit.org/266345@main
  • Loading branch information
dcrousso committed Jul 27, 2023
1 parent e1cc9fc commit 8868d37
Show file tree
Hide file tree
Showing 10 changed files with 169 additions and 136 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ function destroyAnimations() {

TestPage.registerInitializer(() => {
function jsonKeyframeFilter(key, value) {
if ((key === "easing" || key === "timingFunction") && (value instanceof WI.CubicBezierTimingFunction || value instanceof WI.StepsFunction || value instanceof WI.SpringTimingFunction))
if ((key === "easing" || key === "timingFunction") && (value instanceof WI.CubicBezierTimingFunction || value instanceof WI.StepsTimingFunction || value instanceof WI.SpringTimingFunction))
return value.toString();
return value;
}
Expand Down
48 changes: 0 additions & 48 deletions LayoutTests/inspector/unit-tests/geometry.html

This file was deleted.

Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
Tests for WI.Geometry classes.
Tests for WI.StepsTimingFunction.


== Running test suite: WI.Geometry
-- Running test case: WI.StepFunction
== Running test suite: WI.StepsTimingFunction
-- Running test case: WI.StepsTimingFunction.fromString.Valid
PASS: Should parse 'steps(1)' as 'step-end'.
PASS: Should parse 'steps(2, jump-start)' as 'steps(2, jump-start)'.
PASS: Should parse 'steps(3, jump-end)' as 'steps(3, jump-end)'.
Expand All @@ -12,6 +12,8 @@ PASS: Should parse 'steps(6, end)' as 'steps(6, end)'.
PASS: Should parse 'steps(7, start)' as 'steps(7, start)'.
PASS: Should parse 'step-start' as 'step-start'.
PASS: Should parse 'step-end' as 'step-end'.

-- Running test case: WI.StepsTimingFunction.fromString.Invalid
PASS: Should not parse invalid 'steps()'.
PASS: Should not parse invalid 'steps(0)'.
PASS: Should not parse invalid 'steps(0, 1)'.
Expand Down
53 changes: 53 additions & 0 deletions LayoutTests/inspector/unit-tests/steps-timing-function.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<!DOCTYPE html>
<html>
<head>
<script src="../../http/tests/inspector/resources/inspector-test.js"></script>
<script>
function test() {
let suite = InspectorTest.createSyncSuite("WI.StepsTimingFunction");

suite.addTestCase({
name: "WI.StepsTimingFunction.fromString.Valid",
test() {
let test = (inputString, expectedString) => {
expectedString ||= inputString;
InspectorTest.expectEqual(WI.StepsTimingFunction.fromString(inputString).toString(), expectedString, `Should parse '${inputString}' as '${expectedString}'.`);
};

test("steps(1)", "step-end");
test("steps(2, jump-start)");
test("steps(3, jump-end)");
test("steps(4, jump-none)");
test("steps(5, jump-both)");
test("steps(6, end)");
test("steps(7, start)");
test("step-start");
test("step-end");
},
});

suite.addTestCase({
name: "WI.StepsTimingFunction.fromString.Invalid",
test() {
let test = (inputString) => {
InspectorTest.expectNull(WI.StepsTimingFunction.fromString(inputString), `Should not parse invalid '${inputString}'.`);
};

test("steps()");
test("steps(0)");
test("steps(0, 1)");
test("steps(0, 1, 2)");
test("steps(\"test\")");
test("steps(0, \"test\")");
test("steps(0, 1, \"test\")");
},
});

suite.runTestCasesAndFinish();
}
</script>
</head>
<body onload="runTest()">
<p>Tests for WI.StepsTimingFunction.</p>
</body>
</html>
1 change: 1 addition & 0 deletions Source/WebInspectorUI/UserInterface/Main.html
Original file line number Diff line number Diff line change
Expand Up @@ -519,6 +519,7 @@
<script src="Models/SourceMap.js"></script>
<script src="Models/SpringTimingFunction.js"></script>
<script src="Models/StackTrace.js"></script>
<script src="Models/StepsTimingFunction.js"></script>
<script src="Models/StructureDescription.js"></script>
<script src="Models/SymbolicBreakpoint.js"></script>
<script src="Models/TextMarker.js"></script>
Expand Down
4 changes: 2 additions & 2 deletions Source/WebInspectorUI/UserInterface/Models/Animation.js
Original file line number Diff line number Diff line change
Expand Up @@ -265,15 +265,15 @@ WI.Animation = class Animation extends WI.Object

if ("timingFunction" in this._effect) {
let timingFunction = this._effect.timingFunction;
this._effect.timingFunction = WI.CubicBezierTimingFunction.fromString(timingFunction) || WI.StepsFunction.fromString(timingFunction) || WI.SpringTimingFunction.fromString(timingFunction);
this._effect.timingFunction = WI.CubicBezierTimingFunction.fromString(timingFunction) || WI.StepsTimingFunction.fromString(timingFunction) || WI.SpringTimingFunction.fromString(timingFunction);
console.assert(this._effect.timingFunction, timingFunction);
}

if ("keyframes" in this._effect) {
for (let keyframe of this._effect.keyframes) {
if (keyframe.easing) {
let easing = keyframe.easing;
keyframe.easing = WI.CubicBezierTimingFunction.fromString(easing) || WI.StepsFunction.fromString(easing) || WI.SpringTimingFunction.fromString(easing);
keyframe.easing = WI.CubicBezierTimingFunction.fromString(easing) || WI.StepsTimingFunction.fromString(easing) || WI.SpringTimingFunction.fromString(easing);
console.assert(keyframe.easing, easing);
}

Expand Down
77 changes: 0 additions & 77 deletions Source/WebInspectorUI/UserInterface/Models/Geometry.js
Original file line number Diff line number Diff line change
Expand Up @@ -333,80 +333,3 @@ WI.Polygon = class Polygon
return new WI.Rect(minX, minY, maxX - minX, maxY - minY);
}
};

WI.StepsFunction = class StepsFunction
{
constructor(type, count)
{
console.assert(Object.values(WI.StepsFunction.Type).includes(type), type);
console.assert(count > 0, count);

this._type = type;
this._count = count;
}

// Static

static fromString(text)
{
if (!text?.length)
return null;

let trimmedText = text.toLowerCase().replace(/\s/g, "");
if (!trimmedText.length)
return null;

let keywordValue = WI.StepsFunction.keywordValues[trimmedText];
if (keywordValue)
return new WI.StepsFunction(...keywordValue);

let matches = trimmedText.match(/^steps\((\d+)(?:,([a-z-]+))?\)$/);
if (!matches)
return null;

let type = matches[2] || WI.StepsFunction.Type.JumpEnd;
if (Object.values(WI.StepsFunction).includes(type))
return null;

let count = Number(matches[1]);
if (isNaN(count) || count <= 0)
return null;

return new WI.StepsFunction(type, count);
}

// Public

get type() { return this._type; }
get count() { return this._count; }

copy()
{
return new WI.StepsFunction(this._type, this._count);
}

toString()
{
if (this._type === WI.StepsFunction.Type.JumpStart && this._count === 1)
return "step-start";

if (this._type === WI.StepsFunction.Type.JumpEnd && this._count === 1)
return "step-end";

return `steps(${this._count}, ${this._type})`;
}
};

WI.StepsFunction.Type = {
JumpStart: "jump-start",
JumpEnd: "jump-end",
JumpNone: "jump-none",
JumpBoth: "jump-both",
Start: "start",
End: "end",
};

WI.StepsFunction.keywordValues = {
"step-start": [WI.StepsFunction.Type.JumpStart, 1],
"step-end": [WI.StepsFunction.Type.JumpEnd, 1],
};
101 changes: 101 additions & 0 deletions Source/WebInspectorUI/UserInterface/Models/StepsTimingFunction.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
/*
* Copyright (C) 2013 Apple Inc. All rights reserved.
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions
* are met:
* 1. Redistributions of source code must retain the above copyright
* notice, this list of conditions and the following disclaimer.
* 2. Redistributions in binary form must reproduce the above copyright
* notice, this list of conditions and the following disclaimer in the
* documentation and/or other materials provided with the distribution.
*
* THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
* AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
* THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
* PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
* BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
* CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
* SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
* INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
* CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
* ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
* THE POSSIBILITY OF SUCH DAMAGE.
*/

WI.StepsTimingFunction = class StepsTimingFunction
{
constructor(type, count)
{
console.assert(Object.values(WI.StepsTimingFunction.Type).includes(type), type);
console.assert(count > 0, count);

this._type = type;
this._count = count;
}

// Static

static fromString(text)
{
if (!text?.length)
return null;

let trimmedText = text.toLowerCase().replace(/\s/g, "");
if (!trimmedText.length)
return null;

let keywordValue = WI.StepsTimingFunction.keywordValues[trimmedText];
if (keywordValue)
return new WI.StepsTimingFunction(...keywordValue);

let matches = trimmedText.match(/^steps\((\d+)(?:,([a-z-]+))?\)$/);
if (!matches)
return null;

let type = matches[2] || WI.StepsTimingFunction.Type.JumpEnd;
if (Object.values(WI.StepsTimingFunction).includes(type))
return null;

let count = Number(matches[1]);
if (isNaN(count) || count <= 0)
return null;

return new WI.StepsTimingFunction(type, count);
}

// Public

get type() { return this._type; }
get count() { return this._count; }

copy()
{
return new WI.StepsTimingFunction(this._type, this._count);
}

toString()
{
if (this._type === WI.StepsTimingFunction.Type.JumpStart && this._count === 1)
return "step-start";

if (this._type === WI.StepsTimingFunction.Type.JumpEnd && this._count === 1)
return "step-end";

return `steps(${this._count}, ${this._type})`;
}
};

WI.StepsTimingFunction.Type = {
JumpStart: "jump-start",
JumpEnd: "jump-end",
JumpNone: "jump-none",
JumpBoth: "jump-both",
Start: "start",
End: "end",
};

WI.StepsTimingFunction.keywordValues = {
"step-start": [WI.StepsTimingFunction.Type.JumpStart, 1],
"step-end": [WI.StepsTimingFunction.Type.JumpEnd, 1],
};
1 change: 1 addition & 0 deletions Source/WebInspectorUI/UserInterface/Test.html
Original file line number Diff line number Diff line change
Expand Up @@ -231,6 +231,7 @@
<script src="Models/SourceMap.js"></script>
<script src="Models/SpringTimingFunction.js"></script>
<script src="Models/StackTrace.js"></script>
<script src="Models/StepsTimingFunction.js"></script>
<script src="Models/SymbolicBreakpoint.js"></script>
<script src="Models/TextRange.js"></script>
<script src="Models/TimelineMarker.js"></script>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -291,22 +291,22 @@ WI.AnimationContentView = class AnimationContentView extends WI.ContentView
pathSteps.push((1 - easing.outPoint.y) * (height + adjustEasingHeight)); // y2
pathSteps.push(width); // x
pathSteps.push(0); // y
} else if (easing instanceof WI.StepsFunction) {
} else if (easing instanceof WI.StepsTimingFunction) {
let goUpFirst = false;
let stepStartAdjust = 0;
let stepCountAdjust = 0;

switch (easing.type) {
case WI.StepsFunction.Type.JumpStart:
case WI.StepsFunction.Type.Start:
case WI.StepsTimingFunction.Type.JumpStart:
case WI.StepsTimingFunction.Type.Start:
goUpFirst = true;
break;

case WI.StepsFunction.Type.JumpNone:
case WI.StepsTimingFunction.Type.JumpNone:
--stepCountAdjust;
break;

case WI.StepsFunction.Type.JumpBoth:
case WI.StepsTimingFunction.Type.JumpBoth:
++stepStartAdjust;
++stepCountAdjust;
break;
Expand Down

0 comments on commit 8868d37

Please sign in to comment.