Bug 1148081 - Cubic Bezier tooltip styling updates to prevent unnecessary overflow. r=bgrins, a=lmandel
authorJohn Giannakos <j@jtgi.me>
Mon, 13 Apr 2015 09:48:00 +0200
changeset 265689 a4373b504af74f356ad352e20fbfe95bfea46e34
parent 265688 cf63504c26f5bdc18d4e2b0b4a3f287bfcbb8dc9
child 265690 fe48f12288a97e88170cb9c1d6e2b003f52d443d
push id4718
push userraliiev@mozilla.com
push dateMon, 11 May 2015 18:39:53 +0000
treeherdermozilla-beta@c20c4ef55f08 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbgrins, lmandel
bugs1148081
milestone39.0a2
Bug 1148081 - Cubic Bezier tooltip styling updates to prevent unnecessary overflow. r=bgrins, a=lmandel
browser/devtools/shared/widgets/CubicBezierWidget.js
browser/devtools/shared/widgets/cubic-bezier.css
--- a/browser/devtools/shared/widgets/CubicBezierWidget.js
+++ b/browser/devtools/shared/widgets/CubicBezierWidget.js
@@ -578,30 +578,26 @@ CubicBezierPresetWidget.prototype = {
 
   _createPreset: function(categoryLabel, presetLabel) {
     let doc = this.parent.ownerDocument;
 
     let preset = doc.createElement("div");
     preset.classList.add("preset");
     preset.id = presetLabel;
     preset.coordinates = PRESETS[categoryLabel][presetLabel];
-
     // Create preset preview
     let curve = doc.createElement("canvas");
     let bezier = new CubicBezier(preset.coordinates);
-
-    curve.setAttribute("height", 55);
-    curve.setAttribute("width", 55);
-
+    curve.setAttribute("height", 50);
+    curve.setAttribute("width", 50);
     preset.bezierCanvas = new BezierCanvas(curve, bezier, [0.15, 0]);
     preset.bezierCanvas.plot({
       drawHandles: false,
       bezierThickness: 0.025
     });
-
     preset.appendChild(curve);
 
     // Create preset label
     let presetLabelElem = doc.createElement("p");
     let presetDisplayLabel = this._normalizePresetLabel(categoryLabel, presetLabel);
     presetLabelElem.textContent = presetDisplayLabel;
     preset.appendChild(presetLabelElem);
 
--- a/browser/devtools/shared/widgets/cubic-bezier.css
+++ b/browser/devtools/shared/widgets/cubic-bezier.css
@@ -131,38 +131,37 @@ canvas#curve {
   100% {
     left: -7px;
   }
 }
 
 /* Preset Widget */
 
 .preset-pane {
-  width:50%;
+  width: 50%;
   height: 100%;
   border-right: 1px solid var(--theme-splitter-color);
+  padding-right: 4px; /* Visual balance for the panel-arrowcontent border on the left */
 }
 
 #preset-categories {
   display: flex;
-  width: 94%;
+  width: 95%;
   border: 1px solid var(--theme-splitter-color);
   border-radius: 2px;
   background-color: var(--theme-toolbar-background);
-  margin-left: 4px;
-  margin-top: 3px;
+  margin: 3px auto 0 auto;
 }
 
 #preset-categories .category:last-child {
   border-right: none;
 }
 
 .category {
-  flex: 1 1 auto;
-  padding: 5px;
+  padding: 5px 0px;
   width: 33.33%;
   text-align: center;
   text-transform: capitalize;
   border-right: 1px solid var(--theme-splitter-color);
   cursor: default;
   color: var(--theme-body-color);
 }
 
@@ -178,56 +177,54 @@ canvas#curve {
 .active-category:hover {
   background-color: var(--theme-selection-background);
 }
 
 #preset-container {
   padding: 0px;
   width: 100%;
   height: 331px;
-  overflow-y: scroll;
+  overflow-y: auto;
 }
 
 .preset-list {
   display: none;
+  padding-top: 6px;
 }
 
 .active-preset-list {
   display: flex;
   flex-wrap: wrap;
-  justify-content: left;
-  padding-left: 4px;
-  padding-top: 3px;
+  justify-content: flex-start;
 }
 
 .preset {
   cursor: pointer;
-  width: 55px;
-  margin: 5px 11px 0px 0px;
-  text-transform: capitalize;
+  width: 33.33%;
+  margin: 5px 0px;
   text-align: center;
 }
 
 .preset canvas {
   display: block;
   border: 1px solid #ccc;
   border-radius: 3px;
   background-color: var(--theme-body-background);
+  margin: 0 auto;
 }
 
 .theme-dark .preset canvas {
   border-color: #444e58;
 }
 
 .preset p {
-  text-align: center;
   font-size: 0.9em;
-  line-height: 0px;
-  margin: 2px 0px 0px 0p;
+  margin: 2px auto 0px auto;
   color: var(--theme-body-color-alt);
+  text-transform: capitalize;
 }
 
 .active-preset p, .active-preset:hover p {
   color: var(--theme-body-color);
 }
 
 .preset:hover canvas {
   border-color: var(--theme-selection-background);