Index: third_party/WebKit/Source/devtools/front_end/elements/PropertyChangeHighlighter.js |
diff --git a/third_party/WebKit/Source/devtools/front_end/elements/PropertyChangeHighlighter.js b/third_party/WebKit/Source/devtools/front_end/elements/PropertyChangeHighlighter.js |
index 303df99a7677afa1e9c568366006c11ea96b1390..bc8adef6e661a7f5cb3478a8c9e883ada567ef05 100644 |
--- a/third_party/WebKit/Source/devtools/front_end/elements/PropertyChangeHighlighter.js |
+++ b/third_party/WebKit/Source/devtools/front_end/elements/PropertyChangeHighlighter.js |
@@ -1,138 +1,144 @@ |
// Copyright (c) 2015 The Chromium Authors. All rights reserved. |
// Use of this source code is governed by a BSD-style license that can be |
// found in the LICENSE file. |
- |
/** |
- * @constructor |
- * @param {!WebInspector.StylesSidebarPane} ssp |
- * @param {!WebInspector.CSSModel} cssModel |
- * @param {!CSSAgent.StyleSheetId} styleSheetId |
- * @param {!WebInspector.TextRange} range |
+ * @unrestricted |
*/ |
-WebInspector.PropertyChangeHighlighter = function(ssp, cssModel, styleSheetId, range) |
-{ |
+WebInspector.PropertyChangeHighlighter = class { |
+ /** |
+ * @param {!WebInspector.StylesSidebarPane} ssp |
+ * @param {!WebInspector.CSSModel} cssModel |
+ * @param {!CSSAgent.StyleSheetId} styleSheetId |
+ * @param {!WebInspector.TextRange} range |
+ */ |
+ constructor(ssp, cssModel, styleSheetId, range) { |
this._styleSidebarPane = ssp; |
this._target = cssModel.target(); |
this._styleSheetId = styleSheetId; |
this._range = range; |
-}; |
+ } |
-WebInspector.PropertyChangeHighlighter.prototype = { |
- /** |
- */ |
- perform: function() |
- { |
- var node = this._styleSidebarPane.node(); |
- if (!node || this._target !== node.target()) |
- return; |
+ /** |
+ */ |
+ perform() { |
+ var node = this._styleSidebarPane.node(); |
+ if (!node || this._target !== node.target()) |
+ return; |
- var foundSection = null; |
- for (var section of this._styleSidebarPane.allSections()) { |
- var declaration = section.style(); |
- if (declaration.styleSheetId !== this._styleSheetId) |
- continue; |
+ var foundSection = null; |
+ for (var section of this._styleSidebarPane.allSections()) { |
+ var declaration = section.style(); |
+ if (declaration.styleSheetId !== this._styleSheetId) |
+ continue; |
- var parentRule = declaration.parentRule; |
- var isInlineSelector = this._range.isEmpty(); |
- var isMatchingRule = parentRule && parentRule.selectorRange() && this._range.compareTo(parentRule.selectorRange()) === 0; |
- if (isInlineSelector || isMatchingRule) { |
- section.element.animate([ |
- { offset: 0, backgroundColor: "rgba(255, 227, 199, 1)" }, |
- { offset: 0.5, backgroundColor: "rgba(255, 227, 199, 1)" }, |
- { offset: 0.9, backgroundColor: "rgba(255, 227, 199, 0)" }, |
- { offset: 1, backgroundColor: "white" } |
- ], { duration : 400, easing: "cubic-bezier(0, 0, 0.2, 1)" }); |
- return; |
- } |
- |
- if (this._checkRanges(declaration.range, this._range)) { |
- foundSection = section; |
- break; |
- } |
- } |
+ var parentRule = declaration.parentRule; |
+ var isInlineSelector = this._range.isEmpty(); |
+ var isMatchingRule = |
+ parentRule && parentRule.selectorRange() && this._range.compareTo(parentRule.selectorRange()) === 0; |
+ if (isInlineSelector || isMatchingRule) { |
+ section.element.animate( |
+ [ |
+ {offset: 0, backgroundColor: 'rgba(255, 227, 199, 1)'}, |
+ {offset: 0.5, backgroundColor: 'rgba(255, 227, 199, 1)'}, |
+ {offset: 0.9, backgroundColor: 'rgba(255, 227, 199, 0)'}, {offset: 1, backgroundColor: 'white'} |
+ ], |
+ {duration: 400, easing: 'cubic-bezier(0, 0, 0.2, 1)'}); |
+ return; |
+ } |
- if (!foundSection) |
- return; |
+ if (this._checkRanges(declaration.range, this._range)) { |
+ foundSection = section; |
+ break; |
+ } |
+ } |
- var highlightElement; |
- var treeElement = foundSection.propertiesTreeOutline.firstChild(); |
- var foundTreeElement = null; |
- while (!highlightElement && treeElement) { |
- if (treeElement.property.range && this._checkRanges(treeElement.property.range, this._range)) { |
- highlightElement = treeElement.valueElement; |
- break; |
- } |
- treeElement = treeElement.traverseNextTreeElement(false, null, true); |
- } |
+ if (!foundSection) |
+ return; |
- if (highlightElement) { |
- highlightElement.animate([ |
- { offset: 0, backgroundColor: "rgba(158, 54, 153, 1)", color: "white" }, |
- { offset: 0.5, backgroundColor: "rgba(158, 54, 153, 1)", color: "white" }, |
- { offset: 0.9, backgroundColor: "rgba(158, 54, 153, 0)", color: "initial" }, |
- { offset: 1, backgroundColor: "white", color: "initial" } |
- ], { duration : 400, easing: "cubic-bezier(0, 0, 0.2, 1)" }); |
- } |
- }, |
+ var highlightElement; |
+ var treeElement = foundSection.propertiesTreeOutline.firstChild(); |
+ var foundTreeElement = null; |
+ while (!highlightElement && treeElement) { |
+ if (treeElement.property.range && this._checkRanges(treeElement.property.range, this._range)) { |
+ highlightElement = treeElement.valueElement; |
+ break; |
+ } |
+ treeElement = treeElement.traverseNextTreeElement(false, null, true); |
+ } |
- /** |
- * |
- * @param {!WebInspector.TextRange} outterRange |
- * @param {!WebInspector.TextRange} innerRange |
- * @return {boolean} |
- */ |
- _checkRanges: function(outterRange, innerRange) |
- { |
- var startsBefore = outterRange.startLine < innerRange.startLine || (outterRange.startLine === innerRange.startLine && outterRange.startColumn <= innerRange.startColumn); |
- // SSP might be outdated, so inner range will a bit bigger than outter. E.g.; "padding-left: 9px" -> "padding-left: 10px" |
- var eps = 5; |
- var endsAfter = outterRange.endLine > innerRange.endLine || (outterRange.endLine === innerRange.endLine && outterRange.endColumn + eps >= innerRange.endColumn); |
- return startsBefore && endsAfter; |
+ if (highlightElement) { |
+ highlightElement.animate( |
+ [ |
+ {offset: 0, backgroundColor: 'rgba(158, 54, 153, 1)', color: 'white'}, |
+ {offset: 0.5, backgroundColor: 'rgba(158, 54, 153, 1)', color: 'white'}, |
+ {offset: 0.9, backgroundColor: 'rgba(158, 54, 153, 0)', color: 'initial'}, |
+ {offset: 1, backgroundColor: 'white', color: 'initial'} |
+ ], |
+ {duration: 400, easing: 'cubic-bezier(0, 0, 0.2, 1)'}); |
} |
+ } |
+ |
+ /** |
+ * |
+ * @param {!WebInspector.TextRange} outterRange |
+ * @param {!WebInspector.TextRange} innerRange |
+ * @return {boolean} |
+ */ |
+ _checkRanges(outterRange, innerRange) { |
+ var startsBefore = outterRange.startLine < innerRange.startLine || |
+ (outterRange.startLine === innerRange.startLine && outterRange.startColumn <= innerRange.startColumn); |
+ // SSP might be outdated, so inner range will a bit bigger than outter. E.g.; "padding-left: 9px" -> "padding-left: 10px" |
+ var eps = 5; |
+ var endsAfter = outterRange.endLine > innerRange.endLine || |
+ (outterRange.endLine === innerRange.endLine && outterRange.endColumn + eps >= innerRange.endColumn); |
+ return startsBefore && endsAfter; |
+ } |
}; |
/** |
- * @constructor |
- * @param {!WebInspector.StylesSidebarPane} ssp |
- * @param {!WebInspector.CSSProperty} cssProperty |
+ * @unrestricted |
*/ |
-WebInspector.PropertyRevealHighlighter = function(ssp, cssProperty) |
-{ |
+WebInspector.PropertyRevealHighlighter = class { |
+ /** |
+ * @param {!WebInspector.StylesSidebarPane} ssp |
+ * @param {!WebInspector.CSSProperty} cssProperty |
+ */ |
+ constructor(ssp, cssProperty) { |
this._styleSidebarPane = ssp; |
this._cssProperty = cssProperty; |
-}; |
+ } |
-WebInspector.PropertyRevealHighlighter.prototype = { |
- perform: function() |
- { |
- // Expand all shorthands. |
- for (var section of this._styleSidebarPane.allSections()) { |
- for (var treeElement = section.propertiesTreeOutline.firstChild(); treeElement; treeElement = treeElement.nextSibling) |
- treeElement.onpopulate(); |
- } |
- var highlightTreeElement = null; |
- for (var section of this._styleSidebarPane.allSections()) { |
- var treeElement = section.propertiesTreeOutline.firstChild(); |
- while (treeElement && !highlightTreeElement) { |
- if (treeElement.property === this._cssProperty) { |
- highlightTreeElement = treeElement; |
- break; |
- } |
- treeElement = treeElement.traverseNextTreeElement(false, null, true); |
- } |
- if (highlightTreeElement) |
- break; |
+ perform() { |
+ // Expand all shorthands. |
+ for (var section of this._styleSidebarPane.allSections()) { |
+ for (var treeElement = section.propertiesTreeOutline.firstChild(); treeElement; |
+ treeElement = treeElement.nextSibling) |
+ treeElement.onpopulate(); |
+ } |
+ var highlightTreeElement = null; |
+ for (var section of this._styleSidebarPane.allSections()) { |
+ var treeElement = section.propertiesTreeOutline.firstChild(); |
+ while (treeElement && !highlightTreeElement) { |
+ if (treeElement.property === this._cssProperty) { |
+ highlightTreeElement = treeElement; |
+ break; |
} |
+ treeElement = treeElement.traverseNextTreeElement(false, null, true); |
+ } |
+ if (highlightTreeElement) |
+ break; |
+ } |
- if (!highlightTreeElement) |
- return; |
+ if (!highlightTreeElement) |
+ return; |
- highlightTreeElement.parent.expand(); |
- highlightTreeElement.listItemElement.scrollIntoViewIfNeeded(); |
- highlightTreeElement.listItemElement.animate([ |
- { offset: 0, backgroundColor: "rgba(255, 255, 0, 0.2)"}, |
- { offset: 0.1, backgroundColor: "rgba(255, 255, 0, 0.7)"}, |
- { offset: 1, backgroundColor: "transparent"} |
- ], { duration : 2000, easing: "cubic-bezier(0, 0, 0.2, 1)" }); |
- }, |
+ highlightTreeElement.parent.expand(); |
+ highlightTreeElement.listItemElement.scrollIntoViewIfNeeded(); |
+ highlightTreeElement.listItemElement.animate( |
+ [ |
+ {offset: 0, backgroundColor: 'rgba(255, 255, 0, 0.2)'}, |
+ {offset: 0.1, backgroundColor: 'rgba(255, 255, 0, 0.7)'}, {offset: 1, backgroundColor: 'transparent'} |
+ ], |
+ {duration: 2000, easing: 'cubic-bezier(0, 0, 0.2, 1)'}); |
+ } |
}; |