Bug 1225063 - add option (devtools.markup.collapseAttributes) to enable/disable attribute collapsing from settings panel;r=bgrins

devtools/client/framework/toolbox-options.xul

@@ -47,6 +47,9 @@
           <checkbox label="&options.showUserAgentStyles.label;"
                     tooltiptext="&options.showUserAgentStyles.tooltip;"
                     data-pref="devtools.inspector.showUserAgentStyles"/>
+          <checkbox label="&options.collapseAttrs.label;"
+                    tooltiptext="&options.collapseAttrs.tooltip;"
+                    data-pref="devtools.markup.collapseAttributes"/>
           <description>
             <label control="defaultColorUnitMenuList"
                    accesskey="&options.defaultColorUnit.accesskey;"

devtools/client/inspector/markup/markup.js

@@ -20,6 +20,8 @@ const DRAG_DROP_MIN_AUTOSCROLL_SPEED = 5;
 const DRAG_DROP_MAX_AUTOSCROLL_SPEED = 15;
 const DRAG_DROP_MIN_INITIAL_DISTANCE = 10;
 const AUTOCOMPLETE_POPUP_PANEL_ID = "markupview_autoCompletePopup";
+const ATTR_COLLAPSE_ENABLED_PREF = "devtools.markup.collapseAttributes";
+const ATTR_COLLAPSE_LENGTH_PREF = "devtools.markup.collapseAttributeLength";
 
 const {UndoStack} = require("devtools/client/shared/undo");
 const {editableField, InplaceEditor} =
@@ -37,6 +39,7 @@ const ELLIPSIS = Services.prefs.getComplexValue("intl.ellipsis",
       Ci.nsIPrefLocalizedString).data;
 const {Task} = require("resource://gre/modules/Task.jsm");
 const {scrollIntoViewIfNeeded} = require("devtools/shared/layout/utils");
+const {PrefObserver} = require("devtools/client/styleeditor/utils");
 
 Cu.import("resource://devtools/shared/gcli/Templater.jsm");
 Cu.import("resource://gre/modules/Services.jsm");
@@ -87,8 +90,10 @@ function MarkupView(inspector, frame, controllerWindow) {
     this.maxChildren = DEFAULT_MAX_CHILDREN;
   }
 
+  this.collapseAttributes =
+    Services.prefs.getBoolPref(ATTR_COLLAPSE_ENABLED_PREF);
   this.collapseAttributeLength =
-    Services.prefs.getIntPref("devtools.markup.collapseAttributeLength");
+    Services.prefs.getIntPref(ATTR_COLLAPSE_LENGTH_PREF);
 
   // Creating the popup to be used to show CSS suggestions.
   let options = {
@@ -118,6 +123,8 @@ function MarkupView(inspector, frame, controllerWindow) {
   this._onMouseMove = this._onMouseMove.bind(this);
   this._onMouseLeave = this._onMouseLeave.bind(this);
   this._onToolboxPickerHover = this._onToolboxPickerHover.bind(this);
+  this._onCollapseAttributesPrefChange =
+    this._onCollapseAttributesPrefChange.bind(this);
 
   // Listening to various events.
   this._elt.addEventListener("click", this._onMouseClick, false);
@@ -135,6 +142,12 @@ function MarkupView(inspector, frame, controllerWindow) {
   this._onNewSelection();
   this._initTooltips();
 
+  this._prefObserver = new PrefObserver("devtools.markup");
+  this._prefObserver.on(ATTR_COLLAPSE_ENABLED_PREF,
+                        this._onCollapseAttributesPrefChange);
+  this._prefObserver.on(ATTR_COLLAPSE_LENGTH_PREF,
+                        this._onCollapseAttributesPrefChange);
+
   EventEmitter.decorate(this);
 }
 
@@ -267,6 +280,14 @@ MarkupView.prototype = {
     }
   },
 
+  _onCollapseAttributesPrefChange: function() {
+    this.collapseAttributes =
+      Services.prefs.getBoolPref(ATTR_COLLAPSE_ENABLED_PREF);
+    this.collapseAttributeLength =
+      Services.prefs.getIntPref(ATTR_COLLAPSE_LENGTH_PREF);
+    this.update();
+  },
+
   cancelDragging: function() {
     if (!this.isDragging) {
       return;
@@ -1592,6 +1613,12 @@ MarkupView.prototype = {
     this._inspector.toolbox.off("picker-node-hovered",
                                 this._onToolboxPickerHover);
 
+    this._prefObserver.off(ATTR_COLLAPSE_ENABLED_PREF,
+                           this._onCollapseAttributesPrefChange);
+    this._prefObserver.off(ATTR_COLLAPSE_LENGTH_PREF,
+                           this._onCollapseAttributesPrefChange);
+    this._prefObserver.destroy();
+
     this._elt = null;
 
     for (let [, container] of this._containers) {
@@ -2687,7 +2714,7 @@ ElementEditor.prototype = {
     for (let attr of nodeAttributes) {
       let el = this.attrElements.get(attr.name);
       let valueChanged = el &&
-        el.querySelector(".attr-value").textContent !== attr.value;
+        el.dataset.value !== attr.value;
       let isEditing = el && el.querySelector(".editable").inplaceEditor;
       let canSimplyShowEditor = el && (!valueChanged || isEditing);
 
@@ -2873,9 +2900,9 @@ ElementEditor.prototype = {
       if (value && value.match(COLLAPSE_DATA_URL_REGEX)) {
         return truncateString(value, COLLAPSE_DATA_URL_LENGTH);
       }
-      return this.markup.collapseAttributeLength < 0
-        ? value :
-        truncateString(value, this.markup.collapseAttributeLength);
+      return this.markup.collapseAttributes
+        ? truncateString(value, this.markup.collapseAttributeLength)
+        : value;
     };
 
     val.innerHTML = "";

devtools/client/inspector/markup/markup.xhtml

@@ -74,6 +74,7 @@
     <span id="template-attribute"
           save="${attr}"
           data-attr="${attrName}"
+          data-value="${attrValue}"
           class="attreditor"
           style="display:none"> <!--
    --><span class="editable" save="${inner}" tabindex="0"><!--

devtools/client/inspector/markup/test/browser_markup_tag_edit_07.js

@@ -73,14 +73,14 @@ var TEST_DATA = [{
     is (visibleAttrText, DATA_URL_ATTRIBUTE_COLLAPSED);
   }
 }, {
-  desc: "Try to add long attribute with collapseAttributeLength == -1" +
+  desc: "Try to add long attribute with collapseAttributes == false" +
   "to make sure it isn't collapsed in attribute editor.",
   text: 'data-long="' + LONG_ATTRIBUTE + '"',
   expectedAttributes: {
     "data-long": LONG_ATTRIBUTE
   },
   setUp: function(inspector) {
-    inspector.markup.collapseAttributeLength = -1;
+    Services.prefs.setBoolPref("devtools.markup.collapseAttributes", false);
   },
   validate: (element, container, inspector) => {
     let editor = container.editor;
@@ -91,7 +91,30 @@ var TEST_DATA = [{
     is(visibleAttrText, LONG_ATTRIBUTE);
   },
   tearDown: function(inspector) {
-    inspector.markup.collapseAttributeLength = 120;
+    Services.prefs.clearUserPref("devtools.markup.collapseAttributes");
+  }
+}, {
+  desc: "Try to collapse attributes with collapseAttributeLength == 5",
+  text: 'data-long="' + LONG_ATTRIBUTE + '"',
+  expectedAttributes: {
+    "data-long": LONG_ATTRIBUTE
+  },
+  setUp: function(inspector) {
+    Services.prefs.setIntPref("devtools.markup.collapseAttributeLength", 2);
+  },
+  validate: (element, container, inspector) => {
+    let firstChar = LONG_ATTRIBUTE[0];
+    let lastChar = LONG_ATTRIBUTE[LONG_ATTRIBUTE.length - 1];
+    let collapsed = firstChar + "\u2026" + lastChar;
+    let editor = container.editor;
+    let visibleAttrText = editor.attrElements
+      .get("data-long")
+      .querySelector(".attr-value")
+      .textContent;
+    is(visibleAttrText, collapsed);
+  },
+  tearDown: function(inspector) {
+    Services.prefs.clearUserPref("devtools.markup.collapseAttributeLength");
   }
 }];
 

devtools/client/locales/en-US/toolbox.dtd

@@ -59,6 +59,12 @@ values from browser.dtd.  -->
 <!ENTITY options.showUserAgentStyles.label "Show Browser Styles">
 <!ENTITY options.showUserAgentStyles.tooltip "Turning this on will show default styles that are loaded by the browser.">
 
+<!-- LOCALIZATION NOTE (options.collapseAttrs.label): This is the label
+  -  for the checkbox option to enable collapse attributes in the Inspector
+  -  panel. -->
+<!ENTITY options.collapseAttrs.label "Truncate DOM attributes">
+<!ENTITY options.collapseAttrs.tooltip "Truncate long attributes in the inspector">
+
 <!-- LOCALIZATION NOTE (options.defaultColorUnit.label): This is the label for a
   -  dropdown list that controls the default color unit used in the inspector.
   -  This label is visible in the options panel. -->

devtools/client/preferences/devtools.js

@@ -66,8 +66,10 @@ pref("devtools.inspector.showAllAnonymousContent", false);
 // Enable the MDN docs tooltip
 pref("devtools.inspector.mdnDocsTooltip.enabled", true);
 
-// Collapse attributes that are too long.
-// Use -1 to not collapse attributes at all.
+// Enable to collapse attributes that are too long.
+pref("devtools.markup.collapseAttributes", true);
+
+// Length to collapse attributes
 pref("devtools.markup.collapseAttributeLength", 120);
 
 // DevTools default color unit