DevTools: improve the color picker palette sorting algorithm.

Source/devtools/front_end/elements/spectrum.css

 /* https://github.com/bgrins/spectrum */
 :host {
     width: 232px;
     height: 240px;
     -webkit-user-select: none;
 }
 
 :host(.palettes-enabled) {
     height: 271px;
 }
@@ skipping 184 matching lines @@
     flex-wrap: wrap;
 }
 
 .spectrum-palette-color {
     height: 12px;
     flex: 0 0 12px;
     display: inline-block;
     border-radius: 2px;
     margin-left: 12px;
     margin-top: 12px;
+    cursor: pointer;

[dgozman, 2015/08/19 20:27:45]

Please make sure you don't add inconsistency between color cursor and add button
cursor.

[pfeldman, 2015/08/19 20:29:03]

which add button?

 }
 
 .spectrum-palette-color.empty-color {
     border: 1px solid #dadada;
 }
 
 .spectrum-palette > .spectrum-palette-color {
     transition: transform 100ms cubic-bezier(0, 0, 0.2, 1);
 }
 
@@ skipping 46 matching lines @@
 
 .palette-panel > div.palette-title {
     font-size: 14px;
     line-height: 16px;
     color: #333;
     flex-basis: 40px;
 }
 
 div.palette-preview {
     display: flex;
+    cursor: pointer;
 }
 
 .palette-preview-title {
     flex: 0 0 84px;
 }
 
 .palette-preview > .spectrum-palette-color {
     margin-top: 1px;
-    cursor: default;
 }
 
 .palette-preview:hover {
     background-color: #eee;
 }
 
 .spectrum-overlay {
     z-index: 13;
     visibility: hidden;
     background-color: hsla(0, 0%, 0%, 0.5);
@@ skipping 11 matching lines @@
     width: 100%;
     height: 100%;
 }
 
 .spectrum-contrast-line {
     fill: none;
     stroke: white;
     opacity: 0.7;
     stroke-width: 1.5px;
 }