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

   1 // Copyright (c) 2015 The Chromium Authors. All rights reserved.
   2 // Use of this source code is governed by a BSD-style license that can be
   3 // found in the LICENSE file.
   4
   5 /**
   6  * @constructor
   7  * @param {!WebInspector.StylesSidebarPane} ssp
   8  */
   9 WebInspector.PropertyChangeHighlighter = function(ssp)
  10 {
  11     this._styleSidebarPane = ssp;
  12     WebInspector.targetManager.addModelListener(WebInspector.CSSStyleModel, WebInspector.CSSStyleModel.Events.LayoutEditorChange, this._onLayoutEditorChange, this);
  13     this._animationDuration = 1400;
  14     this._requestAnimationFrame = ssp.element.window().requestAnimationFrame;
  15 }
  16
  17 WebInspector.PropertyChangeHighlighter.prototype = {
  18     /**
  19      * @param {!WebInspector.Event} event
  20      */
  21     _onLayoutEditorChange: function(event)
  22     {
  23         this._target = event.target.target();
  24         this._styleSheetId = event.data.id;
  25         this._changeRange = event.data.range;
  26         delete this._animationStart;
  27         if (!this._nextAnimation)
  28             this._nextAnimation = this._requestAnimationFrame.call(null, this.update.bind(this));
  29     },
  30
  31     /**
  32      * @param {number} now
  33      */
  34     update: function(now)
  35     {
  36         delete this._nextAnimation;
  37         if (!this._styleSheetId)
  38             return;
  39         var node = this._styleSidebarPane.node();
  40         if (!node || this._target !== node.target()) {
  41             this._clear();
  42             return;
  43         }
  44
  45         var sectionBlocks = this._styleSidebarPane.sectionBlocks();
  46         var foundSection = null;
  47         for (var block of sectionBlocks) {
  48             for (var section of block.sections) {
  49                 var declaration = section.styleRule.style();
  50                 if (declaration.styleSheetId !== this._styleSheetId)
  51                     continue;
  52
  53                 if (this._checkRanges(declaration.range, this._changeRange)) {
  54                     foundSection = section;
  55                     break;
  56                 }
  57             }
  58             if (foundSection)
  59                 break;
  60         }
  61
  62         if (!foundSection) {
  63             this._clear();
  64             return;
  65         }
  66
  67         var treeElement = foundSection.propertiesTreeOutline.firstChild();
  68         var foundTreeElement = null;
  69         while (treeElement) {
  70             if (treeElement.property.range  && this._checkRanges(treeElement.property.range, this._changeRange)) {
  71                 foundTreeElement = treeElement;
  72                 break;
  73             }
  74             treeElement = treeElement.traverseNextTreeElement(false, null, true);
  75         }
  76
  77         if (!foundTreeElement) {
  78             this._clear();
  79             return;
  80         }
  81
  82         if (!this._animationStart)
  83             this._animationStart = now;
  84
  85         var animationProgress = (now - this._animationStart) / this._animationDuration;
  86         var valueElement = foundTreeElement.valueElement;
  87         valueElement.classList.toggle("css-update-highlight", animationProgress < 1);
  88         valueElement.classList.toggle("first-part", animationProgress < 0.2);
  89
  90         if (animationProgress > 1) {
  91             this._clear();
  92             delete valueElement.style.backgroundColor;
  93             return;
  94         }
  95
  96         valueElement.style.backgroundColor = "rgba(158, 54, 153, " + (1 - animationProgress) + ")";
  97         this._nextAnimation = this._requestAnimationFrame.call(null, this.update.bind(this));
  98     },
  99
 100     _clear: function()
 101     {
 102         delete this._styleSheetId;
 103         delete this._changeRange;
 104         delete this._target;
 105         delete this._animationStart;
 106     },
 107
 108     /**
 109      *
 110      * @param {!CSSAgent.SourceRange} outterRange
 111      * @param {!CSSAgent.SourceRange} innerRange
 112      * @return {boolean}
 113      */
 114     _checkRanges: function(outterRange, innerRange)
 115     {
 116         var startsBefore = outterRange.startLine < innerRange.startLine || (outterRange.startLine === innerRange.startLine && outterRange.startColumn <= innerRange.startColumn);
 117         // SSP might be outdated, so inner range will a bit bigger than outter. E.g.; "padding-left: 9px" -> "padding-left: 10px"
 118         var eps = 5;
 119         var endsAfter = outterRange.endLine > innerRange.endLine || (outterRange.endLine === innerRange.endLine && outterRange.endColumn + eps >= innerRange.endColumn);
 120         return startsBefore && endsAfter;
 121     }
 122 }