DevTools: Show CSS variables in the inherited properties cascade

third_party/WebKit/Source/devtools/front_end/elements/ComputedStyleWidget.js

Index: third_party/WebKit/Source/devtools/front_end/elements/ComputedStyleWidget.js
diff --git a/third_party/WebKit/Source/devtools/front_end/elements/ComputedStyleWidget.js b/third_party/WebKit/Source/devtools/front_end/elements/ComputedStyleWidget.js
index b969bd7ab66edec2662e428db1ee340620429200..380e726f82493e697f1520a550ea959c9a9bb59e 100644
--- a/third_party/WebKit/Source/devtools/front_end/elements/ComputedStyleWidget.js
+++ b/third_party/WebKit/Source/devtools/front_end/elements/ComputedStyleWidget.js
@@ -214,6 +214,8 @@ Elements.ComputedStyleWidget = class extends UI.ThrottledWidget {
      * @return {number}
      */
     function propertySorter(a, b) {
+      if (a.startsWith('--') ^ b.startsWith('--'))

[lushnikov, 2017/01/23 05:13:20]

fyi: "^" is a bit-xor, not a logical xor, so it might yield surprising results
in certain cases. I'd rather use:

a.startsWith('--') !== b.startsWith('--')

+        return a.startsWith('--') ? 1 : -1;
       if (a.startsWith('-webkit') ^ b.startsWith('-webkit'))
         return a.startsWith('-webkit') ? 1 : -1;
       var canonical1 = SDK.cssMetadata().canonicalPropertyName(a);