Bug 1288358 - restore padding around spectrum widget in colorpicker tooltip;r=pbro
authorJulian Descottes <jdescottes@mozilla.com>
Thu, 21 Jul 2016 11:22:36 +0200
changeset 346335 e5ebff5eb655ffefbc777d1ca424b56dc8ce0283
parent 346334 129c925e216d801c622922a669e720dc1d5fb5a5
child 346336 04533ff743455eb7ecdf1aa5fcf4f9935bf54d12
push id6389
push userraliiev@mozilla.com
push dateMon, 19 Sep 2016 13:38:22 +0000
treeherdermozilla-beta@01d67bfe6c81 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro
bugs1288358
milestone50.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1288358 - restore padding around spectrum widget in colorpicker tooltip;r=pbro MozReview-Commit-ID: BFZA3tDkoR0
devtools/client/shared/widgets/Tooltip.js
devtools/client/shared/widgets/cubic-bezier.css
devtools/client/shared/widgets/filter-widget.css
devtools/client/shared/widgets/spectrum.css
--- a/devtools/client/shared/widgets/Tooltip.js
+++ b/devtools/client/shared/widgets/Tooltip.js
@@ -775,17 +775,17 @@ Heritage.extend(SwatchBasedEditorTooltip
     let spectrumNode = doc.createElementNS(XHTML_NS, "div");
     spectrumNode.id = "spectrum";
     container.appendChild(spectrumNode);
     let eyedropper = doc.createElementNS(XHTML_NS, "button");
     eyedropper.id = "eyedropper-button";
     eyedropper.className = "devtools-button";
     container.appendChild(eyedropper);
 
-    this.tooltip.setContent(container, { width: 210, height: 216 });
+    this.tooltip.setContent(container, { width: 218, height: 224 });
 
     let spectrum = new Spectrum(spectrumNode, color);
 
     // Wait for the tooltip to be shown before calling spectrum.show
     // as it expect to be visible in order to compute DOM element sizes.
     this.tooltip.once("shown", () => {
       spectrum.show();
     });
--- a/devtools/client/shared/widgets/cubic-bezier.css
+++ b/devtools/client/shared/widgets/cubic-bezier.css
@@ -2,21 +2,22 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /* Based on Lea Verou www.cubic-bezier.com
    See https://github.com/LeaVerou/cubic-bezier */
 
 .cubic-bezier-container {
   display: flex;
-  width: 500px;
+  width: 510px;
   height: 370px;
   flex-direction: row-reverse;
   overflow: hidden;
   padding: 5px;
+  box-sizing: border-box;
 }
 
 .display-wrap {
   width: 50%;
   height: 100%;
   text-align: center;
   overflow: hidden;
 }
--- a/devtools/client/shared/widgets/filter-widget.css
+++ b/devtools/client/shared/widgets/filter-widget.css
@@ -1,19 +1,21 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /* Main container: Displays the filters and presets in 2 columns */
 
 #filter-container {
-  height: 100%;
+  width: 510px;
+  height: 200px;
   display: flex;
   position: relative;
   padding: 5px;
+  box-sizing: border-box;
   /* when opened in a xul:panel, a gray color is applied to text */
   color: var(--theme-body-color);
 }
 
 #filter-container.dragging {
   -moz-user-select: none;
 }
 
--- a/devtools/client/shared/widgets/spectrum.css
+++ b/devtools/client/shared/widgets/spectrum.css
@@ -32,16 +32,20 @@
 .spectrum-box {
   border: 1px solid rgba(0,0,0,0.2);
   border-radius: 2px;
   background-clip: content-box;
 }
 
 /* Elements */
 
+#spectrum-tooltip {
+  padding: 4px;
+}
+
 .spectrum-container {
   position: relative;
   display: none;
   top: 0;
   left: 0;
   border-radius: 0;
   width: 200px;
   padding: 5px;