Devtools: Add editable keyframes to the styles sidebar pane

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

 /*
  * Copyright (C) 2007 Apple Inc.  All rights reserved.
  * Copyright (C) 2009 Joseph Pecoraro
  *
  * 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.
@@ skipping 33 matching lines @@
     this._linkifier = new WebInspector.Linkifier(new WebInspector.Linkifier.DefaultCSSFormatter());
 
     this.element.classList.add("styles-pane");
     this.element.addEventListener("mousemove", this._mouseMovedOverElement.bind(this), false);
     this._keyDownBound = this._keyDown.bind(this);
     this._keyUpBound = this._keyUp.bind(this);
     new WebInspector.PropertyChangeHighlighter(this);
 }
 
 /**
- * @enum {string}
- */
-WebInspector.StylesSidebarPane.Events = {
-    SelectorEditingStarted: "SelectorEditingStarted",
-    SelectorEditingEnded: "SelectorEditingEnded"
-};
-
-/**
  * @param {!WebInspector.CSSProperty} property
  * @return {!Element}
  */
 WebInspector.StylesSidebarPane.createExclamationMark = function(property)
 {
     var exclamationElement = createElement("label", "dt-icon-label");
     exclamationElement.className = "exclamation-mark";
     if (!WebInspector.StylesSidebarPane.ignoreErrorsForProperty(property))
         exclamationElement.type = "warning-icon";
     exclamationElement.title = WebInspector.CSSMetadata.cssPropertiesMetainfo.keySet()[property.name.toLowerCase()] ? WebInspector.UIString("Invalid property value") : WebInspector.UIString("Unknown property name");
@@ skipping 173 matching lines @@
     },
 
     /**
      * @override
      * @return {!Promise.<?>}
      */
     doUpdate: function()
     {
         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));
     },
 
     /**
      * @param {function()} callback
      */
     runDecoratorAfterUpdate: function(callback)
     {
         this._decoratorCallback = callback;
     },
 
@@ skipping 19 matching lines @@
          * @return {?WebInspector.CSSStyleModel.MatchedStyleResult}
          * @this {WebInspector.StylesSidebarPane}
          */
         function validateStyles(matchedStyles)
         {
             return matchedStyles && matchedStyles.node() === this.node() ? matchedStyles : null;
         }
     },
 
     /**
+     * @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>}
      */
     _matchedStylesForNode: function(node)
     {
         var cssModel = this.cssModel();
         if (!cssModel)
             return Promise.resolve(/** @type {?WebInspector.CSSStyleModel.MatchedStyleResult} */(null));
         return cssModel.matchedStylesPromise(node.id)
     },
@@ skipping 51 matching lines @@
      * @param {?WebInspector.DOMNode} node
      */
     _canAffectCurrentStyles: function(node)
     {
         var currentNode = this.node();
         return currentNode && (currentNode === node || node.parentNode === currentNode.parentNode || node.isAncestor(currentNode));
     },
 
     /**
      * @param {?WebInspector.CSSStyleModel.MatchedStyleResult} matchedStyles
+     * @param {?Array.<!WebInspector.CSSKeyframesRule>} keyframesRules
      */
-    _innerRebuildUpdate: function(matchedStyles)
+    _innerRebuildUpdate: function(matchedStyles, keyframesRules)
     {
         this._linkifier.reset();
         this._sectionsContainer.removeChildren();
         this._sectionBlocks = [];
 
         var node = this.node();
         if (!matchedStyles || !node)
             return;
 
         this._sectionBlocks = this._rebuildSectionsForMatchedStyleRules(matchedStyles);
         var pseudoTypes = [];
         var keys = new Set(matchedStyles.pseudoStyles().keys());
         if (keys.delete(DOMAgent.PseudoType.Before))
             pseudoTypes.push(DOMAgent.PseudoType.Before);
         pseudoTypes = pseudoTypes.concat(keys.valuesArray().sort());
         for (var pseudoType of pseudoTypes) {
             var block = WebInspector.SectionBlock.createPseudoTypeBlock(pseudoType);
             var styles = /** @type {!Array<!WebInspector.CSSStyleDeclaration>} */(matchedStyles.pseudoStyles().get(pseudoType));
             for (var style of styles) {
                 var section = new WebInspector.StylePropertiesSection(this, matchedStyles, style);
                 block.sections.push(section);
             }
             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)
                 this._sectionsContainer.appendChild(titleElement);
             for (var section of block.sections)
                 this._sectionsContainer.appendChild(section.element);
         }
 
         if (this._filterRegex)
             this._updateFilter();
@@ skipping 267 matching lines @@
  */
 WebInspector.SectionBlock.createPseudoTypeBlock = function(pseudoType)
 {
     var separatorElement = createElement("div");
     separatorElement.className = "sidebar-separator";
     separatorElement.textContent = WebInspector.UIString("Pseudo ::%s element", pseudoType);
     return new WebInspector.SectionBlock(separatorElement);
 }
 
 /**
+ * @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}
  */
 WebInspector.SectionBlock.createInheritedNodeBlock = function(node)
 {
     var separatorElement = createElement("div");
     separatorElement.className = "sidebar-separator";
     var link = WebInspector.DOMPresentationUtils.linkifyNodeReference(node);
     separatorElement.createTextChild(WebInspector.UIString("Inherited from") + " ");
     separatorElement.appendChild(link);
@@ skipping 15 matching lines @@
      */
     titleElement: function()
     {
         return this._titleElement;
     }
 }
 
 /**
  * @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)
 {
     this._parentPane = parentPane;
     this._style = style;
     this._matchedStyles = matchedStyles;
     this.editable = !!(style.styleSheetId && style.range);
 
     var rule = style.parentRule;
     this.element = createElementWithClass("div", "styles-section matched-styles monospace");
     this.element._section = this;
 
     this._titleElement = this.element.createChild("div", "styles-section-title " + (rule ? "styles-selector" : ""));
 
     this.propertiesTreeOutline = new TreeOutline();
     this.propertiesTreeOutline.element.classList.add("style-properties", "monospace");
     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();
     selectorContainer.appendChild(this._selectorElement);
     this._selectorElement.addEventListener("mouseenter", this._onMouseEnterSelector.bind(this), false);
     this._selectorElement.addEventListener("mouseleave", this._onMouseOutSelector.bind(this), false);
 
     var openBrace = createElement("span");
     openBrace.textContent = " {";
     selectorContainer.appendChild(openBrace);
@@ skipping 109 matching lines @@
 
     _onMouseEnterSelector: function()
     {
         if (this._hoverTimer)
             clearTimeout(this._hoverTimer);
         this._hoverTimer = setTimeout(this._highlight.bind(this), 300);
     },
 
     _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;
         domModel.highlightDOMNodeWithConfig(node.id, { mode: "all", showInfo: undefined, selectors: selectors });
     },
 
     /**
      * @return {?WebInspector.StylePropertiesSection}
      */
     firstSibling: function()
@@ skipping 169 matching lines @@
         this._mediaListElement.removeChildren();
         this._createMediaList(this._style.parentRule ? this._style.parentRule.media : null);
     },
 
     /**
      * @param {string} propertyName
      * @return {boolean}
      */
     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);
         }
         return false;
     },
 
     /**
      * @return {?WebInspector.StylePropertiesSection}
      */
@@ skipping 38 matching lines @@
     update: function(full)
     {
         this._selectorElement.textContent = this._selectorText();
         this._markSelectorMatches();
         if (full) {
             this.propertiesTreeOutline.removeChildren();
             this.onpopulate();
         } 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);
             }
         }
         this.afterUpdate();
     },
 
     afterUpdate: function()
     {
         if (this._afterUpdate) {
             this._afterUpdate(this);
             delete this._afterUpdate;
             this._afterUpdateFinishedForTest();
         }
     },
 
     _afterUpdateFinishedForTest: function()
     {
     },
 
     onpopulate: function()
     {
         var style = this._style;
         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()
     {
         var hasMatchingChild = false;
         for (var child of this.propertiesTreeOutline.rootElement().children())
             hasMatchingChild |= child._updateFilter();
 
         var regex = this._parentPane.filterRegex();
         var hideRule = !hasMatchingChild && regex && !regex.test(this.element.textContent);
@@ skipping 387 matching lines @@
  * @param {!WebInspector.Linkifier} linkifier
  * @param {?WebInspector.CSSRule} rule
  * @return {!Node}
  */
 WebInspector.StylePropertiesSection.createRuleOriginNode = function(cssModel, linkifier, rule)
 {
     if (!rule)
         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())
         return WebInspector.StylePropertiesSection._linkifyRuleLocation(cssModel, linkifier, rule.styleSheetId, ruleLocation);
 
     if (rule.isUserAgent())
         return createTextNode(WebInspector.UIString("user agent stylesheet"));
     if (rule.isInjected())
         return createTextNode(WebInspector.UIString("injected stylesheet"));
     if (rule.isViaInspector())
@@ skipping 154 matching lines @@
         this._style = newRule.style;
         // FIXME: replace this instance by a normal WebInspector.StylePropertiesSection.
         this._normal = true;
     },
 
     __proto__: WebInspector.StylePropertiesSection.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
  * @param {boolean} overloaded
  */
 WebInspector.StylePropertyTreeElement = function(stylesPane, matchedStyles, property, isShorthand, inherited, overloaded)
 {
     // Pass an empty title, the title gets made later in onattach.
     TreeElement.call(this, "", isShorthand);
     this._style = property.ownerStyle;
@@ skipping 222 matching lines @@
         if (section && section._parentPane)
             section._parentPane._refreshUpdate(section);
     },
 
     /**
      * @param {!WebInspector.TextRange} oldStyleRange
      */
     _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);
     },
 
     /**
      * @param {!Event} event
      */
     _toggleEnabled: function(event)
     {
         var disabled = !event.target.checked;
@@ skipping 33 matching lines @@
 
         var longhandProperties = this._style.longhandProperties(this.name);
         for (var i = 0; i < longhandProperties.length; ++i) {
             var name = longhandProperties[i].name;
             var inherited = false;
             var overloaded = false;
 
             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);
             this.appendChild(item);
         }
     },
 
     /**
      * @override
      */
@@ skipping 919 matching lines @@
     WebInspector.context.addFlavorChangeListener(WebInspector.DOMNode, onNodeChanged);
     onNodeChanged();
     return button;
 
     function onNodeChanged()
     {
         var node = WebInspector.context.flavor(WebInspector.DOMNode);
         button.setEnabled(!!node);
     }
 }