react-native-devtools-frontend/front_end/elements/StylePropertyHighlighter.js

// 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.

/**
 * @unrestricted
 */
Elements.StylePropertyHighlighter = class {
  /**
   * @param {!Elements.StylesSidebarPane} ssp
   * @param {!SDK.CSSProperty} cssProperty
   */
  constructor(ssp, cssProperty) {
    this._styleSidebarPane = ssp;
    this._cssProperty = cssProperty;
  }

  perform() {
    // Expand all shorthands.
    for (const section of this._styleSidebarPane.allSections()) {
      for (let treeElement = section.propertiesTreeOutline.firstChild(); treeElement;
           treeElement = treeElement.nextSibling)
        treeElement.onpopulate();
    }
    let highlightTreeElement = null;
    for (const section of this._styleSidebarPane.allSections()) {
      let 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;

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