Changeset 197059 in webkit

Timestamp:

Feb 24, 2016, 5:28:51 PM (11 years ago)

Author:

commit-queue@webkit.org

Message:

Web Inspector: Visual Styles sidebar should support multiple animations
​https://bugs.webkit.org/show_bug.cgi?id=154546
<rdar://problem/24773861>

Patch by Devin Rousso <Devin Rousso> on 2016-02-24
Reviewed by Timothy Hatcher.

• UserInterface/Views/VisualStyleDetailsPanel.js:

(WebInspector.VisualStyleDetailsPanel.prototype._populateTransitionSection):
Set additional flags on the optional properties of transition to ensure
that the initial value of a new row is not considered invalid.

(WebInspector.VisualStyleDetailsPanel.prototype._populateAnimationSection):
Added a comma-separated keyword list to provide support for multiple
animations per rule.

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Views/VisualStyleDetailsPanel.js (modified) (4 diffs)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2016-02-24  Devin Rousso  <dcrousso+webkit@gmail.com>
+
+        Web Inspector: Visual Styles sidebar should support multiple animations
+        https://bugs.webkit.org/show_bug.cgi?id=154546
+        <rdar://problem/24773861>
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/Views/VisualStyleDetailsPanel.js:
+        (WebInspector.VisualStyleDetailsPanel.prototype._populateTransitionSection):
+        Set additional flags on the optional properties of transition to ensure
+        that the initial value of a new row is not considered invalid.
+
+        (WebInspector.VisualStyleDetailsPanel.prototype._populateAnimationSection):
+        Added a comma-separated keyword list to provide support for multiple
+        animations per rule.
+
 2016-02-24  Timothy Hatcher  <timothy@apple.com>
 

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

@@ -1265 +1265 @@
 
         let transitionProperty = new WebInspector.VisualStylePropertyNameInput("transition-property", WebInspector.UIString("Property"));
+        transitionProperty.masterProperty = true;
         let transitionTiming = new WebInspector.VisualStyleTimingEditor("transition-timing-function", WebInspector.UIString("Timing"), ["Linear", "Ease", "Ease In", "Ease Out", "Ease In Out"]);
+        transitionTiming.optionalProperty = true;
 
         transitionPropertyRow.element.appendChild(transitionProperty.element);
@@ -1274 +1276 @@
         let transitionTimeKeywords = ["s", "ms"];
         let transitionDuration = new WebInspector.VisualStyleNumberInputBox("transition-duration", WebInspector.UIString("Duration"), null, transitionTimeKeywords);
+        transitionDuration.optionalProperty = true;
         let transitionDelay = new WebInspector.VisualStyleNumberInputBox("transition-delay", WebInspector.UIString("Delay"), null, transitionTimeKeywords);
         transitionDelay.optionalProperty = true;
@@ -1280 +1283 @@
         transitionDurationRow.element.appendChild(transitionDelay.element);
 
-        let transitionProperties = [transitionProperty, transitionTiming, transitionDuration, transitionDelay];
+        let transitionProperties = [transitionProperty, transitionDuration, transitionTiming, transitionDelay];
         let transitionPropertyCombiner = new WebInspector.VisualStylePropertyCombiner("transition", transitionProperties);
 
@@ -1304 +1307 @@
         let properties = group.properties;
 
+        let animationRow = new WebInspector.DetailsSectionRow;
+
+        properties.animation = new WebInspector.VisualStyleCommaSeparatedKeywordEditor("animation", null, {
+            "animation-name": "none",
+            "animation-timing-function": "ease",
+            "animation-iteration-count": "1",
+            "animation-duration": "0",
+            "animation-delay": "0",
+            "animation-direction": "normal",
+            "animation-fill-mode": "none",
+            "animation-play-state": "running"
+        });
+
+        animationRow.element.appendChild(properties.animation.element);
+
         let animationNameRow = new WebInspector.DetailsSectionRow;
 
-        properties.animationName = new WebInspector.VisualStyleBasicInput("animation-name", WebInspector.UIString("Name"), WebInspector.UIString("Enter the name of a Keyframe"));
-
-        animationNameRow.element.appendChild(properties.animationName.element);
+        let animationName = new WebInspector.VisualStyleBasicInput("animation-name", WebInspector.UIString("Name"), WebInspector.UIString("Enter the name of a Keyframe"));
+        animationName.masterProperty = true;
+
+        animationNameRow.element.appendChild(animationName.element);
 
         let animationTimingRow = new WebInspector.DetailsSectionRow;
 
-        properties.animationTiming = new WebInspector.VisualStyleTimingEditor("animation-timing-function", WebInspector.UIString("Timing"), ["Linear", "Ease", "Ease In", "Ease Out", "Ease In Out"]);
-        properties.animationIterationCount = new WebInspector.VisualStyleNumberInputBox("animation-iteration-count", WebInspector.UIString("Iterations"), this._keywords.defaults.concat(["Infinite"]), null);
-
-        animationTimingRow.element.appendChild(properties.animationTiming.element);
-        animationTimingRow.element.appendChild(properties.animationIterationCount.element);
+        let animationTiming = new WebInspector.VisualStyleTimingEditor("animation-timing-function", WebInspector.UIString("Timing"), ["Linear", "Ease", "Ease In", "Ease Out", "Ease In Out"]);
+        animationTiming.optionalProperty = true;
+        let animationIterationCount = new WebInspector.VisualStyleNumberInputBox("animation-iteration-count", WebInspector.UIString("Iterations"), this._keywords.defaults.concat(["Infinite"]), null);
+        animationIterationCount.optionalProperty = true;
+
+        animationTimingRow.element.appendChild(animationTiming.element);
+        animationTimingRow.element.appendChild(animationIterationCount.element);
 
         let animationDurationRow = new WebInspector.DetailsSectionRow;
 
         let animationTimeKeywords = ["s", "ms"];
-        properties.animationDuration = new WebInspector.VisualStyleNumberInputBox("animation-duration", WebInspector.UIString("Duration"), null, animationTimeKeywords);
-        properties.animationDelay = new WebInspector.VisualStyleNumberInputBox("animation-delay", WebInspector.UIString("Delay"), null, animationTimeKeywords);
-
-        animationDurationRow.element.appendChild(properties.animationDuration.element);
-        animationDurationRow.element.appendChild(properties.animationDelay.element);
+        let animationDuration = new WebInspector.VisualStyleNumberInputBox("animation-duration", WebInspector.UIString("Duration"), null, animationTimeKeywords);
+        animationDuration.optionalProperty = true;
+        let animationDelay = new WebInspector.VisualStyleNumberInputBox("animation-delay", WebInspector.UIString("Delay"), null, animationTimeKeywords);
+        animationDelay.optionalProperty = true;
+
+        animationDurationRow.element.appendChild(animationDuration.element);
+        animationDurationRow.element.appendChild(animationDelay.element);
 
         let animationDirectionRow = new WebInspector.DetailsSectionRow;
 
-        properties.animationDirection = new WebInspector.VisualStyleKeywordPicker("animation-direction", WebInspector.UIString("Direction"), {
+        let animationDirection = new WebInspector.VisualStyleKeywordPicker("animation-direction", WebInspector.UIString("Direction"), {
             basic: this._keywords.normal.concat(["Reverse"]),
             advanced: ["Alternate", "Alternate Reverse"]
         });
-        properties.animationFillMode = new WebInspector.VisualStyleKeywordPicker("animation-fill-mode", WebInspector.UIString("Fill Mode"), this._keywords.defaults.concat(["None", "Forwards", "Backwards", "Both"]));
-
-        animationDirectionRow.element.appendChild(properties.animationDirection.element);
-        animationDirectionRow.element.appendChild(properties.animationFillMode.element);
+        animationDirection.optionalProperty = true;
+        let animationFillMode = new WebInspector.VisualStyleKeywordPicker("animation-fill-mode", WebInspector.UIString("Fill Mode"), this._keywords.defaults.concat(["None", "Forwards", "Backwards", "Both"]));
+        animationFillMode.optionalProperty = true;
+
+        animationDirectionRow.element.appendChild(animationDirection.element);
+        animationDirectionRow.element.appendChild(animationFillMode.element);
 
         let animationStateRow = new WebInspector.DetailsSectionRow;
 
-        properties.animationPlayState = new WebInspector.VisualStyleKeywordIconList("animation-play-state", WebInspector.UIString("State"), ["Running", "Paused", "Initial"]);
-
-        animationStateRow.element.appendChild(properties.animationPlayState.element);
-
-        let animationGroup = new WebInspector.DetailsSectionGroup([animationNameRow, animationTimingRow, animationDurationRow, animationDirectionRow, animationStateRow]);
+        let animationPlayState = new WebInspector.VisualStyleKeywordIconList("animation-play-state", WebInspector.UIString("State"), ["Running", "Paused", "Initial"]);
+        animationPlayState.optionalProperty = true;
+
+        animationStateRow.element.appendChild(animationPlayState.element);
+
+        let animationProperties = [animationName, animationDuration, animationTiming, animationDelay, animationIterationCount, animationDirection, animationFillMode, animationPlayState];
+        let animationPropertyCombiner = new WebInspector.VisualStylePropertyCombiner("animation", animationProperties);
+
+        let noRemainingCommaSeparatedEditorItems = this._noRemainingCommaSeparatedEditorItems.bind(this, animationPropertyCombiner, animationProperties);
+        properties.animation.addEventListener(WebInspector.VisualStyleCommaSeparatedKeywordEditor.Event.NoRemainingTreeItems, noRemainingCommaSeparatedEditorItems, this);
+
+        let selectedCommaSeparatedEditorItemValueChanged = this._selectedCommaSeparatedEditorItemValueChanged.bind(this, properties.animation, animationPropertyCombiner);
+        animationPropertyCombiner.addEventListener(WebInspector.VisualStylePropertyEditor.Event.ValueDidChange, selectedCommaSeparatedEditorItemValueChanged, this);
+
+        let commaSeparatedEditorTreeItemSelected = this._commaSeparatedEditorTreeItemSelected.bind(animationPropertyCombiner);
+        properties.animation.addEventListener(WebInspector.VisualStyleCommaSeparatedKeywordEditor.Event.TreeItemSelected, commaSeparatedEditorTreeItemSelected, this);
+
+        group.specifiedWidthProperties = [properties.animation];
+
+        let animationGroup = new WebInspector.DetailsSectionGroup([animationRow, animationNameRow, animationTimingRow, animationDurationRow, animationDirectionRow, animationStateRow]);
         this._populateSection(group, [animationGroup]);
     }