[Devtools] Fix two style issues caused by rearranging the Color Picker

Bug: 791906,791902
Change-Id: I4a4ccb4afd70b4888a14455f56eea3ba739add77
Reviewed-on: https://chromium-review.googlesource.com/809810Reviewed-by: Pavel Feldman <pfeldman@chromium.org>
Commit-Queue: Alice Boxhall <aboxhall@chromium.org>
Cr-Commit-Position: refs/heads/master@{#521927}

third_party/WebKit/Source/devtools/front_end/color_picker/Contrast.js

@@ -568,6 +568,13 @@ ColorPicker.ContrastDetails = class {
     return this._visible;
   }
 
+  /**
+   * @return {!Element}
+   */
+  element() {
+    return this._element;
+  }
+
   /**
    * @param {!Common.Event} event
    */

third_party/WebKit/Source/devtools/front_end/color_picker/Spectrum.js

@@ -318,7 +318,11 @@ ColorPicker.Spectrum = class extends UI.VBox {
     this._shadesContainer.animate(
         [{transform: 'scaleY(0)', opacity: '0'}, {transform: 'scaleY(1)', opacity: '1'}],
         {duration: 200, easing: 'cubic-bezier(0.4, 0, 0.2, 1)'});
-    this._shadesContainer.style.top = colorElement.offsetTop + colorElement.parentElement.offsetTop + 'px';
+    var shadesTop =
+        this._paletteColorsContainer.offsetTop + colorElement.offsetTop + colorElement.parentElement.offsetTop;
+    if (this._contrastDetails && this._contrastDetails.visible())
+      shadesTop += this._contrastDetails.element().offsetHeight;
+    this._shadesContainer.style.top = shadesTop + 'px';
     this._shadesContainer.style.left = colorElement.offsetLeft + 'px';
     colorElement.classList.add('spectrum-shades-shown');
 

third_party/WebKit/Source/devtools/front_end/color_picker/spectrum.css

@@ -394,7 +394,7 @@
 .spectrum-palette-colors {
     display: flex;
     flex-wrap: wrap;
-    width: 193px;;
+    width: 198px;
 }
 
 .spectrum-palette-color {
@@ -407,6 +407,7 @@
     position: relative;
     border: 1px solid rgba(0, 0, 0, 0.1);
     background-position: -1px !important;
+    z-index: 14;
 }
 
 .spectrum-palette-color:hover:not(.spectrum-shades-shown) > .spectrum-palette-color-shadow {
@@ -436,11 +437,11 @@
     z-index: 14;
     border-radius: 2px;
     transform-origin: 0px 228px;
-    margin-top: -208px;
+    margin-top: 16px;
     margin-left: -8px;
 }
 
-.spectrum-palette > .spectrum-palette-color.spectrum-shades-shown {
+.spectrum-palette-colors > .spectrum-palette-color.spectrum-shades-shown {
     z-index: 15;
 }