DevTools: Show CSS variables in the inherited properties cascade

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

 /*
  * Copyright (C) 2007 Apple Inc.  All rights reserved.
  * Copyright (C) 2009 Joseph Pecoraro
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
  *     notice, this list of conditions and the following disclaimer.
@@ skipping 196 matching lines @@
     }
 
     this._updateFilter(this._filterRegex);
 
     /**
      * @param {string} a
      * @param {string} b
      * @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);
       var canonical2 = SDK.cssMetadata().canonicalPropertyName(b);
       return canonical1.compareTo(canonical2);
     }
 
     /**
      * @param {!UI.TreeElement} treeElement
      * @param {!Event} event
@@ skipping 109 matching lines @@
       var property = child[Elements.ComputedStyleWidget._propertySymbol];
       var matched = !regex || regex.test(property.name) || regex.test(property.value);
       child.hidden = !matched;
     }
   }
 };
 
 Elements.ComputedStyleWidget._maxLinkLength = 30;
 
 Elements.ComputedStyleWidget._propertySymbol = Symbol('property');