bug 986471 - rotate long labels in box model; r=pbrosset
authorMr Speaker <mrspeaker@gmail.com>
Thu, 24 Apr 2014 13:52:30 +0200
changeset 180422 07aed296db2a0224847dbd1dd1c3bf8de2ba06b3
parent 180421 27a7bd55597e1e746365578c38c4dae3fd53283b
child 180423 882b5ddfc023fd9518c87f33e8ea19bfce5f85f9
push id272
push userpvanderbeken@mozilla.com
push dateMon, 05 May 2014 16:31:18 +0000
reviewerspbrosset
bugs986471
milestone31.0a1
bug 986471 - rotate long labels in box model; r=pbrosset
browser/devtools/layoutview/test/browser_layoutview.js
browser/devtools/layoutview/view.css
browser/devtools/layoutview/view.js
--- a/browser/devtools/layoutview/test/browser_layoutview.js
+++ b/browser/devtools/layoutview/test/browser_layoutview.js
@@ -92,8 +92,24 @@ function*() {
 
   yield waitForUpdate();
 
   for (let i = 0; i < res2.length; i++) {
     let elt = viewdoc.querySelector(res2[i].selector);
     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.");
+  }
+});
--- a/browser/devtools/layoutview/view.css
+++ b/browser/devtools/layoutview/view.css
@@ -169,16 +169,24 @@ body {
 .margin.right {
   right: 0;
 }
 
 .margin.left {
   left: 0;
 }
 
+.rotate.left:not(.editing) {
+  transform: rotate(-90deg);
+}
+
+.rotate.right:not(.editing) {
+  transform: rotate(90deg);
+}
+
 .tooltip {
   position: absolute;
   bottom: 0;
   right: 2px;
   pointer-events: none;
 }
 
 body.dim > #header > #element-position,
--- a/browser/devtools/layoutview/view.js
+++ b/browser/devtools/layoutview/view.js
@@ -15,16 +15,17 @@ Cu.import("resource://gre/modules/Task.j
 Cu.import("resource://gre/modules/devtools/Loader.jsm");
 Cu.import("resource://gre/modules/devtools/Console.jsm");
 
 const {Promise: promise} = Cu.import("resource://gre/modules/Promise.jsm", {});
 const {InplaceEditor, editableItem} = devtools.require("devtools/shared/inplace-editor");
 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
  * modification of box model values. All of these changes can be reverted by
  * calling revert.
  *
  * @param doc    A DOM document that can be used to test style rules.
  * @param rules  An array of the style rules defined for the node being edited.
@@ -218,20 +219,24 @@ LayoutView.prototype = {
    */
   initEditor: function LV_initEditor(element, event, dimension) {
     let { property, realProperty } = dimension;
     if (!realProperty)
       realProperty = property;
     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";
         let properties = [
           { name: property, value: value }
         ]
 
         if (property.substring(0, 7) == "border-") {
@@ -240,16 +245,17 @@ LayoutView.prototype = {
           if (!style || style == "none" || style == "hidden")
             properties.push({ name: bprop, value: "solid" });
         }
 
         session.setProperties(properties);
       },
 
       done: (value, commit) => {
+        editor.elt.parentNode.classList.remove("editing");
         if (!commit)
           session.revert();
       }
     }, event);
   },
 
   /**
    * Is the layoutview visible in the sidebar?
@@ -382,16 +388,17 @@ LayoutView.prototype = {
       for (let i in this.map) {
         let selector = this.map[i].selector;
         let span = this.doc.querySelector(selector);
         if (span.textContent.length > 0 &&
             span.textContent == this.map[i].value) {
           continue;
         }
         span.textContent = this.map[i].value;
+        this.manageOverflowingText(span);
       }
 
       width -= this.map.borderLeft.value + this.map.borderRight.value +
                this.map.paddingLeft.value + this.map.paddingRight.value;
 
       height -= this.map.borderTop.value + this.map.borderBottom.value +
                 this.map.paddingTop.value + this.map.paddingBottom.value;
 
@@ -415,16 +422,25 @@ LayoutView.prototype = {
     toolbox.highlighterUtils.highlightNodeFront(nodeFront, options);
   },
 
   hideBoxModel: function() {
     let toolbox = this.inspector.toolbox;
 
     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;
 let tooltip;
 
 let onmouseover = function(e) {
   let region = e.target.getAttribute("data-box");