DevTools: [CSSP] put -webkit properties to the end of the list.

The patch puts -webkit-prefixed properties to the end of the list of
computed properties list.

R=pfeldman

Review URL: https://codereview.chromium.org/1315723004

git-svn-id: svn://svn.chromium.org/blink/trunk@201449 bbb929c8-8fbe-4397-9dbb-9b2b20218538

third_party/WebKit/LayoutTests/inspector/elements/elements-panel-styles-expected.txt

 Tests that elements panel shows proper styles in the sidebar panel.
 
 Foo
--webkit-font-smoothing: subpixel-antialiased
-    subpixel-antialiased - element.style
 border-bottom-left-radius: 5px
     5px - .foo elements-panel-styles.css:21 -> elements-panel-styles.css:21:1
 border-bottom-right-radius: 5px
@@ -52,6 +50,8 @@ text-indent: 0px
     OVERLOADED 10px - body .foo elements-panel-styles.css:6 -> elements-panel-styles.css:6:1
     0 !important - .foo elements-panel-styles.css:21 -> elements-panel-styles.css:21:1
     OVERLOADED 20px !important - body elements-panel-styles.css:1 -> elements-panel-styles.css:1:1
+-webkit-font-smoothing: subpixel-antialiased
+    subpixel-antialiased - element.style
 [expanded] 
 element.style  { ()
 /-- overloaded --/     display: none;

third_party/WebKit/LayoutTests/inspector/elements/styles-2/inherited-mixed-case-properties-expected.txt

 Tests that non-standard mixed-cased properties are displayed in the Styles pane.
 
--webkit-font-smoothing: antialiased
 color: rgb(0, 0, 0)
 display: block
     block - div user agent stylesheet
+-webkit-font-smoothing: antialiased
 [expanded] 
 element.style  { ()
 

third_party/WebKit/LayoutTests/inspector/elements/styles-2/inject-stylesheet-expected.txt

@@ -15,12 +15,12 @@ background-origin: padding-box
     initial - #main inject-stylesheet.html:5 -> inject-stylesheet.html:5:3
 background-size: auto
     initial - #main inject-stylesheet.html:5 -> inject-stylesheet.html:5:3
--webkit-border-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAiElEQ…Ms+LS30CAhBN5nNxeT5hbJ1zwmji2k+aF6NENIPf/hs54f0sZFUVAMigAAAABJRU5ErkJggg==) 100% / 1 / 0px stretch
-    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAiElEQ…Ms+LS30CAhBN5nNxeT5hbJ1zwmji2k+aF6NENIPf/hs54f0sZFUVAMigAAAABJRU5ErkJggg==) - #main injected stylesheet
 color: rgb(255, 0, 0)
     red - #main injected stylesheet
 display: block
     block - div user agent stylesheet
+-webkit-border-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAiElEQ…Ms+LS30CAhBN5nNxeT5hbJ1zwmji2k+aF6NENIPf/hs54f0sZFUVAMigAAAABJRU5ErkJggg==) 100% / 1 / 0px stretch
+    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAiElEQ…Ms+LS30CAhBN5nNxeT5hbJ1zwmji2k+aF6NENIPf/hs54f0sZFUVAMigAAAABJRU5ErkJggg==) - #main injected stylesheet
 [expanded] 
 element.style  { ()
 

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

@@ -188,9 +188,12 @@ WebInspector.ComputedStyleWidget.prototype = {
         /**
          * @param {string} a
          * @param {string} b
+         * @return {number}
          */
         function propertySorter(a, b)
         {
+            if (a.startsWith("-webkit") ^ b.startsWith("-webkit"))
+                return a.startsWith("-webkit") ? 1 : -1;
             var canonicalName = WebInspector.CSSMetadata.canonicalPropertyName;
             return canonicalName(a).compareTo(canonicalName(b));
         }