Devtools: Add editable keyframes to the styles sidebar pane

third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js

Index: third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js
diff --git a/third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js b/third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js
index e6227863999a72a4f0558a76a34547f2e7a12cd8..44f0737fa984d95f214e6a68d1cb3453b747c41a 100644
--- a/third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js
+++ b/third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js
@@ -51,14 +51,6 @@ WebInspector.StylesSidebarPane = function()
 }
 
 /**
- * @enum {string}
- */
-WebInspector.StylesSidebarPane.Events = {
-    SelectorEditingStarted: "SelectorEditingStarted",
-    SelectorEditingEnded: "SelectorEditingEnded"
-};
-
-/**
  * @param {!WebInspector.CSSProperty} property
  * @return {!Element}
  */
@@ -252,8 +244,12 @@ WebInspector.StylesSidebarPane.prototype = {
     {
         this._discardElementUnderMouse();
 
-        return this.fetchMatchedCascade()
-            .then(this._innerRebuildUpdate.bind(this));
+        var promises = [
+            this.fetchMatchedCascade(),
+            this._fetchMatchedKeyframes()
+        ];
+
+        return Promise.all(promises).spread(this._innerRebuildUpdate.bind(this));
     },
 
     /**
@@ -293,6 +289,17 @@ WebInspector.StylesSidebarPane.prototype = {
     },
 
     /**
+     * @return {!Promise.<?Array.<!WebInspector.CSSKeyframesRule>>}
+     */
+    _fetchMatchedKeyframes: function()
+    {
+        var node = this.node();
+        if (!node || !this.cssModel())
+            return Promise.resolve();
+        return this.cssModel().matchedKeyframesPromise(node.id);
+    },
+
+    /**
      * @param {!WebInspector.DOMNode} node
      * @return {!Promise.<?WebInspector.CSSStyleModel.MatchedStyleResult>}
      */
@@ -364,8 +371,9 @@ WebInspector.StylesSidebarPane.prototype = {
 
     /**
      * @param {?WebInspector.CSSStyleModel.MatchedStyleResult} matchedStyles
+     * @param {?Array.<!WebInspector.CSSKeyframesRule>} keyframesRules
      */
-    _innerRebuildUpdate: function(matchedStyles)
+    _innerRebuildUpdate: function(matchedStyles, keyframesRules)
     {
         this._linkifier.reset();
         this._sectionsContainer.removeChildren();
@@ -391,6 +399,15 @@ WebInspector.StylesSidebarPane.prototype = {
             this._sectionBlocks.push(block);
         }
 
+        if (keyframesRules) {
+            for (var keyframesRule of keyframesRules) {
+                var block = WebInspector.SectionBlock.createKeyframesBlock(keyframesRule.name().text);
+                for (var keyframe of keyframesRule.keyframes())
+                    block.sections.push(new WebInspector.KeyframePropertiesSection(this, keyframe.style));
+                this._sectionBlocks.push(block);
+            }
+        }
+
         for (var block of this._sectionBlocks) {
             var titleElement = block.titleElement();
             if (titleElement)
@@ -678,6 +695,18 @@ WebInspector.SectionBlock.createPseudoTypeBlock = function(pseudoType)
 }
 
 /**
+ * @param {string} keyframesName
+ * @return {!WebInspector.SectionBlock}
+ */
+WebInspector.SectionBlock.createKeyframesBlock = function(keyframesName)
+{
+    var separatorElement = createElement("div");
+    separatorElement.className = "sidebar-separator";
+    separatorElement.textContent = WebInspector.UIString("@keyframes " + keyframesName);
+    return new WebInspector.SectionBlock(separatorElement);
+}
+
+/**
  * @param {!WebInspector.DOMNode} node
  * @return {!WebInspector.SectionBlock}
  */
@@ -713,7 +742,7 @@ WebInspector.SectionBlock.prototype = {
 /**
  * @constructor
  * @param {!WebInspector.StylesSidebarPane} parentPane
- * @param {!WebInspector.CSSStyleModel.MatchedStyleResult} matchedStyles
+ * @param {?WebInspector.CSSStyleModel.MatchedStyleResult} matchedStyles

[lushnikov, 2016/01/13 01:42:18]

can we keep matchedStyles non-nullable? You can make method isKeyframesSection()
which checks the type of style.parentRule

[samli, 2016/01/13 04:59:36]

I just tried this and think it's semantically wrong. The keyframe sections don't
rely on matched styles at all. If we make it non-nullable there's no way for a
tree element to know if it is overloaded or not.

Also semantically, StylesPropertySection shouldn't need to be self-aware about
keyframe sections.

  * @param {!WebInspector.CSSStyleDeclaration} style
  */
 WebInspector.StylePropertiesSection = function(parentPane, matchedStyles, style)
@@ -734,6 +763,7 @@ WebInspector.StylePropertiesSection = function(parentPane, matchedStyles, style)
     this.propertiesTreeOutline.section = this;
     this.element.appendChild(this.propertiesTreeOutline.element);
 
+    // TODO(samli): Rename selector to header text.
     var selectorContainer = createElement("div");
     this._selectorElement = createElementWithClass("span", "selector");
     this._selectorElement.textContent = this._selectorText();
@@ -863,7 +893,7 @@ WebInspector.StylePropertiesSection.prototype = {
 
     _highlight: function()
     {
-        WebInspector.DOMModel.hideDOMNodeHighlight()
+        WebInspector.DOMModel.hideDOMNodeHighlight();
         var node = this._parentPane.node();
         var domModel = node.domModel();
         var selectors = this._style.parentRule ? this._style.parentRule.selectorText() : undefined;
@@ -1053,7 +1083,7 @@ WebInspector.StylePropertiesSection.prototype = {
      */
     isPropertyInherited: function(propertyName)
     {
-        if (this._matchedStyles.isInherited(this._style)) {
+        if (this._matchedStyles && this._matchedStyles.isInherited(this._style)) {
             // While rendering inherited stylesheet, reverse meaning of this property.
             // Render truly inherited properties with black, i.e. return them as non-inherited.
             return !WebInspector.CSSMetadata.isPropertyInherited(propertyName);
@@ -1112,8 +1142,7 @@ WebInspector.StylePropertiesSection.prototype = {
         } else {
             var child = this.propertiesTreeOutline.firstChild();
             while (child) {
-                var overloaded = this._matchedStyles.propertyState(child.property) === WebInspector.CSSStyleModel.MatchedStyleResult.PropertyState.Overloaded;
-                child.setOverloaded(overloaded);
+                child.setOverloaded(this._isPropertyOverloaded(child.property));
                 child = child.traverseNextTreeElement(false, null, true);
             }
         }
@@ -1139,13 +1168,22 @@ WebInspector.StylePropertiesSection.prototype = {
         for (var property of style.leadingProperties()) {
             var isShorthand = !!WebInspector.CSSMetadata.cssPropertiesMetainfo.longhands(property.name);
             var inherited = this.isPropertyInherited(property.name);
-            var overloaded = this._matchedStyles.propertyState(property) === WebInspector.CSSStyleModel.MatchedStyleResult.PropertyState.Overloaded;
+            var overloaded = this._isPropertyOverloaded(property);
             var item = new WebInspector.StylePropertyTreeElement(this._parentPane, this._matchedStyles, property, isShorthand, inherited, overloaded);
             this.propertiesTreeOutline.appendChild(item);
         }
     },
 
     /**
+     * @param {!WebInspector.CSSProperty} property
+     * @return {boolean}
+     */
+    _isPropertyOverloaded: function(property)

[lushnikov, 2016/01/13 01:42:18]

you can avoid doing this if matchedStyles will be non-nullable

[samli, 2016/01/13 04:59:36]

Ack, see above comment.

+    {
+        return !!this._matchedStyles && this._matchedStyles.propertyState(property) === WebInspector.CSSStyleModel.MatchedStyleResult.PropertyState.Overloaded;
+    },
+
+    /**
      * @return {boolean}
      */
     _updateFilter: function()
@@ -1553,7 +1591,11 @@ WebInspector.StylePropertiesSection.createRuleOriginNode = function(cssModel, li
         return createTextNode("");
 
     var firstMatchingIndex = rule.matchingSelectors && rule.matchingSelectors.length ? rule.matchingSelectors[0] : 0;
-    var ruleLocation = rule.selectors[firstMatchingIndex].range;
+    var ruleLocation;
+    if (rule instanceof WebInspector.CSSStyleRule)
+        ruleLocation = rule.selectors[firstMatchingIndex].range;
+    else if (rule instanceof WebInspector.CSSKeyframeRule)
+        ruleLocation = rule.key().range;
 
     var header = rule.styleSheetId ? cssModel.styleSheetHeaderForId(rule.styleSheetId) : null;
     if (ruleLocation && rule.styleSheetId && header && header.resourceURL())
@@ -1728,9 +1770,106 @@ WebInspector.BlankStylePropertiesSection.prototype = {
 
 /**
  * @constructor
+ * @extends {WebInspector.StylePropertiesSection}
+ * @param {!WebInspector.StylesSidebarPane} stylesPane
+ * @param {!WebInspector.CSSStyleDeclaration} style
+ */
+WebInspector.KeyframePropertiesSection = function(stylesPane, style)
+{
+    WebInspector.StylePropertiesSection.call(this, stylesPane, null, style);
+    this._selectorElement.className = "keyframe-key";
+}
+
+WebInspector.KeyframePropertiesSection.prototype = {
+    /**
+     * @override
+     * @return {string}
+     */
+    _selectorText: function()
+    {
+        return this._style.parentRule.key().text;
+    },
+
+    /**
+     * @override
+     * @param {!Element} element
+     * @param {string} newContent
+     * @param {string} oldContent
+     * @param {!WebInspector.StylePropertyTreeElement.Context|undefined} context
+     * @param {string} moveDirection
+     */
+    editingSelectorCommitted: function(element, newContent, oldContent, context, moveDirection)
+    {
+        this._editingSelectorEnded();
+        if (newContent)
+            newContent = newContent.trim();
+        if (newContent === oldContent) {
+            // Revert to a trimmed version of the selector if need be.
+            this._selectorElement.textContent = newContent;
+            this._moveEditorFromSelector(moveDirection);
+            return;
+        }
+        var rule = this._style.parentRule;
+        var oldRange = rule.key().range;
+        if (!rule || !oldRange)
+            return;
+
+        /**
+         * @param {!WebInspector.CSSRule} rule
+         * @param {!WebInspector.TextRange} oldRange
+         * @param {boolean} success
+         * @this {WebInspector.StylePropertiesSection}
+         */
+        function finishCallback(rule, oldRange, success)
+        {
+            if (success) {
+                var newRange = /** @type {!WebInspector.TextRange} */(rule.key().range);
+                rule.style.sourceStyleSheetEdited(/** @type {string} */(rule.styleSheetId), oldRange, newRange);
+                this._parentPane._styleSheetRuleEdited(rule, oldRange, newRange);
+                this._parentPane._refreshUpdate(this);
+            }
+
+            delete this._parentPane._userOperation;
+            this._moveEditorFromSelector(moveDirection);
+            this._editingSelectorCommittedForTest();
+        }
+
+        // This gets deleted in finishOperationAndMoveEditor(), which is called both on success and failure.
+        this._parentPane._userOperation = true;
+        var selectedNode = this._parentPane.node();
+        rule.setKeyText(newContent, finishCallback.bind(this, rule, oldRange));
+    },
+
+    /**
+     * @override
+     */
+    _markSelectorHighlights: function()
+    {
+    },
+
+    /**
+     * @override
+     */
+    _markSelectorMatches: function()
+    {
+        this._selectorElement.textContent = this._style.parentRule.key().text;
+    },
+
+    /**
+     * @override
+     */
+    _highlight: function()
+    {
+    },
+
+    __proto__: WebInspector.StylePropertiesSection.prototype
+}
+
+/**
+ * @constructor
  * @extends {TreeElement}
  * @param {!WebInspector.StylesSidebarPane} stylesPane
- * @param {!WebInspector.CSSStyleModel.MatchedStyleResult} matchedStyles
+ * @param {?WebInspector.CSSStyleModel.MatchedStyleResult} matchedStyles
  * @param {!WebInspector.CSSProperty} property
  * @param {boolean} isShorthand
  * @param {boolean} inherited
@@ -1973,7 +2112,8 @@ WebInspector.StylePropertyTreeElement.prototype = {
     _styleTextEdited: function(oldStyleRange)
     {
         var newStyleRange = /** @type {!WebInspector.TextRange} */ (this._style.range);
-        this._matchedStyles.resetActiveProperties();
+        if (this._matchedStyles)
+            this._matchedStyles.resetActiveProperties();
         if (this._style.parentRule)
             this._parentPane._styleSheetRuleEdited(this._style.parentRule, oldStyleRange, newStyleRange);
     },
@@ -2027,7 +2167,9 @@ WebInspector.StylePropertyTreeElement.prototype = {
             var section = this.section();
             if (section) {
                 inherited = section.isPropertyInherited(name);
-                overloaded = this._matchedStyles.propertyState(longhandProperties[i]) === WebInspector.CSSStyleModel.MatchedStyleResult.PropertyState.Overloaded;
+                overloaded = this._matchedStyles
+                    ? this._matchedStyles.propertyState(longhandProperties[i]) === WebInspector.CSSStyleModel.MatchedStyleResult.PropertyState.Overloaded
+                    : false;
             }
 
             var item = new WebInspector.StylePropertyTreeElement(this._parentPane, this._matchedStyles, longhandProperties[i], false, inherited, overloaded);