bug 986471 - rotate long labels in box model; r=pbrosset

browser/devtools/layoutview/test/browser_layoutview.js

@@ -97,3 +97,19 @@ function*() {
     is(elt.textContent, res2[i].value, res2[i].selector + " has the right value after style update.");
   }
 });
+
+addTest("Test that long labels on left/right are rotated 90 degrees",
+function*() {
+  let viewdoc = view.document;
+  const LONG_TEXT_ROTATE_LIMIT = 3;
+
+  for (let i = 0; i < res1.length; i++) {
+    let elt = viewdoc.querySelector(res1[i].selector);
+    let isLong = elt.textContent.length > LONG_TEXT_ROTATE_LIMIT;
+    let classList = elt.parentNode.classList
+    let canBeRotated = classList.contains("left") || classList.contains("right");
+    let isRotated = classList.contains("rotate");
+
+    is(canBeRotated && isLong, isRotated, res1[i].selector + " correctly rotated.");
+  }
+});

browser/devtools/layoutview/view.css

@@ -174,6 +174,14 @@ body {
   left: 0;
 }
 
+.rotate.left:not(.editing) {
+  transform: rotate(-90deg);
+}
+
+.rotate.right:not(.editing) {
+  transform: rotate(90deg);
+}
+
 .tooltip {
   position: absolute;
   bottom: 0;

browser/devtools/layoutview/view.js

@@ -20,6 +20,7 @@ const {InplaceEditor, editableItem} = devtools.require("devtools/shared/inplace-
 const {parseDeclarations} = devtools.require("devtools/styleinspector/css-parsing-utils");
 
 const NUMERIC = /^-?[\d\.]+$/;
+const LONG_TEXT_ROTATE_LIMIT = 3;
 
 /**
  * An instance of EditingSession tracks changes that have been made during the
@@ -223,10 +224,14 @@ LayoutView.prototype = {
     let session = new EditingSession(document, this.elementRules);
     let initialValue = session.getProperty(realProperty);
 
-    new InplaceEditor({
+    let editor = new InplaceEditor({
       element: element,
       initial: initialValue,
 
+      start: (editor) => {
+        editor.elt.parentNode.classList.add("editing");
+      },
+
       change: (value) => {
         if (NUMERIC.test(value))
           value += "px";
@@ -245,6 +250,7 @@ LayoutView.prototype = {
       },
 
       done: (value, commit) => {
+        editor.elt.parentNode.classList.remove("editing");
         if (!commit)
           session.revert();
       }
@@ -387,6 +393,7 @@ LayoutView.prototype = {
           continue;
         }
         span.textContent = this.map[i].value;
+        this.manageOverflowingText(span);
       }
 
       width -= this.map.borderLeft.value + this.map.borderRight.value +
@@ -420,6 +427,15 @@ LayoutView.prototype = {
 
     toolbox.highlighterUtils.unhighlight();
   },
+
+  manageOverflowingText: function(span) {
+    let classList = span.parentNode.classList;
+
+    if (classList.contains("left") || classList.contains("right")) {
+      let force = span.textContent.length > LONG_TEXT_ROTATE_LIMIT;
+      classList.toggle("rotate", force);
+    }
+  }
 };
 
 let elts;