Bug 1148081 - Cubic Bezier tooltip styling updates to prevent unnecessary overflow. r=bgrins
authorJohn Giannakos <j@jtgi.me>
Mon, 13 Apr 2015 09:48:00 +0200
changeset 239308 3054afc750a14ab63e72f8e78320337e292f1512
parent 239307 0ceb71fdbe2fd730b613370ca36cd57840ec4602
child 239309 58c91976be4680ab7fe1f15865c1ac0dc9a8ee48
push id28589
push userryanvm@gmail.com
push dateWed, 15 Apr 2015 19:13:10 +0000
treeherdermozilla-central@24ccca4707eb [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbgrins
bugs1148081
milestone40.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 1148081 - Cubic Bezier tooltip styling updates to prevent unnecessary overflow. r=bgrins
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);