DevTools: Fix timeline overview flickering

third_party/WebKit/Source/devtools/front_end/ui/GlassPane.js

 // Copyright 2017 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.
 
 UI.GlassPane = class {
   constructor() {
     this._widget = new UI.Widget(true);
     this._widget.markAsRoot();
     this.element = this._widget.element;
     this.contentElement = this._widget.contentElement;
     this._arrowElement = UI.Icon.create('', 'arrow hidden');
     this.element.shadowRoot.appendChild(this._arrowElement);
 
     this.registerRequiredCSS('ui/glassPane.css');
-    this.element.classList.add('no-pointer-events');
+    this.setPointerEventsBehavior(UI.GlassPane.PointerEventsBehavior.BlockedByGlassPane);
+
     this._onMouseDownBound = this._onMouseDown.bind(this);
     /** @type {?function(!Event)} */
     this._onClickOutsideCallback = null;
     /** @type {?UI.Size} */
     this._maxSize = null;
     /** @type {?number} */
     this._positionX = null;
     /** @type {?number} */
     this._positionY = null;
     /** @type {?AnchorBox} */
@@ skipping 18 matching lines @@
   }
 
   /**
    * @param {boolean} dimmed
    */
   setDimmed(dimmed) {
     this.element.classList.toggle('dimmed-pane', dimmed);
   }
 
   /**
-   * @param {boolean} blockPointerEvents
+   * @param {!UI.GlassPane.PointerEventsBehavior} pointerEventsBehavior
    */
-  setBlockPointerEvents(blockPointerEvents) {
-    this.element.classList.toggle('no-pointer-events', !blockPointerEvents);
+  setPointerEventsBehavior(pointerEventsBehavior) {
+    this.element.classList.toggle(
+        'no-pointer-events', pointerEventsBehavior !== UI.GlassPane.PointerEventsBehavior.BlockedByGlassPane);
+    this.contentElement.style.setProperty(

[dgozman, 2017/04/25 23:54:14]

I believe this can be class as well, since contentElement is inside of shadow
root.

[alph, 2017/04/26 00:13:48]

Done.

+        'pointer-events',
+        pointerEventsBehavior === UI.GlassPane.PointerEventsBehavior.PierceContents ? 'none' : 'auto');
   }
 
   /**
    * @param {?function(!Event)} callback
    */
   setSetOutsideClickCallback(callback) {
     this._onClickOutsideCallback = callback;
   }
 
   /**
@@ skipping 289 matching lines @@
    * @param {!Element} element
    */
   static containerMoved(element) {
     for (var pane of UI.GlassPane._panes) {
       if (pane.isShowing() && pane.element.ownerDocument === element.ownerDocument)
         pane._positionContent();
     }
   }
 };
 
-/**
- * @enum {symbol}
- */
+/** @enum {symbol} */
+UI.GlassPane.PointerEventsBehavior = {
+  BlockedByGlassPane: Symbol('BlockedByGlassPane'),
+  PierceGlassPane: Symbol('PierceGlassPane'),
+  PierceContents: Symbol('PierceContents')
+};
+
+/** @enum {symbol} */
 UI.GlassPane.AnchorBehavior = {
   PreferTop: Symbol('PreferTop'),
   PreferBottom: Symbol('PreferBottom'),
   PreferLeft: Symbol('PreferLeft'),
   PreferRight: Symbol('PreferRight'),
 };
 
-/**
- * @enum {symbol}
- */
+/** @enum {symbol} */
 UI.GlassPane.SizeBehavior = {
   SetExactSize: Symbol('SetExactSize'),
   SetExactWidthMaxHeight: Symbol('SetExactWidthMaxHeight'),
   MeasureContent: Symbol('MeasureContent')
 };
 
-/**
- * @enum {symbol}
- */
+/** @enum {symbol} */
 UI.GlassPane.MarginBehavior = {
   Arrow: Symbol('Arrow'),
   DefaultMargin: Symbol('DefaultMargin'),
   NoMargin: Symbol('NoMargin')
 };
 
 /** @type {!Map<!Document, !Element>} */
 UI.GlassPane._containers = new Map();
 /** @type {!Set<!UI.GlassPane>} */
 UI.GlassPane._panes = new Set();