UserAgent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.8 Safari/537.36

Steps to reproduce the problem:
1. Load a site/application with many (more than 100) custom CSS variables set on `html` or `body`, as well as a fairly complex DOM. (Example site: https://www.chromestatus.com/features/6401356696911872)
2. Open devtools by inspecting the heading of the "CSS Custom Properties (CSS Variables)" section of the site, thus revealing the heading element the DOM tree in the "Elements" pane such that interaction with the site/application will cause devtools to visibly render some change animations (such as class/attribute addition/deletion).
3. Interact with the site/application (expand and collapse sections in the Chrome Platform Status site) triggering above mentioned animations and observe poor devtools performance, specifically the attribute change animations in the "Elements" pane.

What is the expected behavior?

What went wrong?
The many CSS variables set to either `html` or `body`, for good reasons (global styling/theming), are applicable to any element under `html` or `body`, thus showing up in the "Styles" and "Computed" tabs for the devtools right hand pane for any selected element.

When interacting with a site/application, changes to the DOM trigger changes to the CSS of a particular element anywhere in the DOM within `html` or `body`. This causes devtools to perform badly, which could be due to the many CSS variables showing up or having to be re-evaluated in the "Styles" and "Computed" tabs. Bad performance includes delayed and stuttering aforementioned animations (very low FPS) as well as high CPU usage.

Note that this does not affect the performance of the actual site/application in the browser (save for less available CPU as stolen by devtools).

Did this work before? N/A 

Chrome version: 57.0.2987.8  Channel: dev
OS Version: 
Flash Version: