| 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)'});
|
| + }
|
| };
|
|
|