Bug 1473061 - Provide an option to show flex basis in the flexbox highlighter. r=pbro
authorGabriel Luong <gabriel.luong@gmail.com>
Wed, 04 Jul 2018 07:20:16 -0400
changeset 425024 a5cf5667c147c4c55fb41caef2255faebfe28ff7
parent 425023 17718af0d6a867b484c30ac979fbfda1b8a722c7
child 425025 b1fcf4dda09949b96a82474f0606fac85ab45974
push id34232
push userrgurzau@mozilla.com
push dateWed, 04 Jul 2018 16:30:38 +0000
treeherdermozilla-central@6c0fa9a675c9 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro
bugs1473061
milestone63.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 1473061 - Provide an option to show flex basis in the flexbox highlighter. r=pbro
devtools/server/actors/highlighters/flexbox.js
--- a/devtools/server/actors/highlighters/flexbox.js
+++ b/devtools/server/actors/highlighters/flexbox.js
@@ -58,16 +58,19 @@ const JUSTIFY_CONTENT = "justify-content
 /**
  * The FlexboxHighlighter is the class that overlays a visual canvas on top of
  * display: [inline-]flex elements.
  *
  * Available Options:
  * - showAlignment(isShown)
  *   @param  {Boolean} isShown
  *   Shows the alignment in the flexbox highlighter.
+ * - showFlexBasis(isShown)
+ *   @param  {Boolean} isShown
+ *   Shows the flex basis in the flexbox highlighter.
  */
 class FlexboxHighlighter extends AutoRefreshHighlighter {
   constructor(highlighterEnv) {
     super(highlighterEnv);
 
     this.ID_CLASS_PREFIX = "flexbox-";
 
     this.markup = new CanvasFrameAnonymousContentHelper(this.highlighterEnv,
@@ -531,17 +534,17 @@ class FlexboxHighlighter extends AutoRef
     this.ctx.stroke();
     this.ctx.restore();
   }
 
   /**
    * Renders the flex basis for a given flex item.
    */
   renderFlexItemBasis(flexItem, left, top, right, bottom, boundsWidth) {
-    if (!this.computedStyle) {
+    if (!this.options.showFlexBasis || !this.computedStyle) {
       return;
     }
 
     let basis = this.flexBasis;
 
     if (basis.endsWith("px")) {
       right = Math.round(left + parseFloat(basis));
     } else if (basis.endsWith("%")) {