Bug 1290086 - use multiline inplace editor for markupview autocompletes;r=gl

MozReview-Commit-ID: AcWBWdq5q7Q

--HG--
extra : rebase_source : e7e872e8d56a285adcb86a9833e333af6abe11dd
extra : amend_source : db23e8b021f7fdb363bef6ada27d15465769d550

devtools/client/inspector/markup/markup.js

@@ -2904,11 +2904,7 @@ function TextEditor(container, node, templateId) {
     stopOnReturn: true,
     trigger: "dblclick",
     multiline: true,
-    maxWidth: () => {
-      let elementRect = this.value.getBoundingClientRect();
-      let containerRect = this.container.elt.getBoundingClientRect();
-      return containerRect.right - elementRect.left - 2;
-    },
+    maxWidth: () => getAutocompleteMaxWidth(this.value, this.container.elt),
     trimOutput: false,
     done: (val, commit) => {
       if (!commit) {
@@ -3003,6 +2999,8 @@ function ElementEditor(container, node) {
     this.tag.setAttribute("tabindex", "-1");
     editableField({
       element: this.tag,
+      multiline: true,
+      maxWidth: () => getAutocompleteMaxWidth(this.tag, this.container.elt),
       trigger: "dblclick",
       stopOnReturn: true,
       done: this.onTagEdit.bind(this),
@@ -3013,6 +3011,8 @@ function ElementEditor(container, node) {
   // Make the new attribute space editable.
   this.newAttr.editMode = editableField({
     element: this.newAttr,
+    multiline: true,
+    maxWidth: () => getAutocompleteMaxWidth(this.newAttr, this.container.elt),
     trigger: "dblclick",
     stopOnReturn: true,
     contentType: InplaceEditor.CONTENT_TYPES.CSS_MIXED,
@@ -3233,6 +3233,8 @@ ElementEditor.prototype = {
       stopOnReturn: true,
       selectAll: false,
       initial: initial,
+      multiline: true,
+      maxWidth: () => getAutocompleteMaxWidth(inner, this.container.elt),
       contentType: InplaceEditor.CONTENT_TYPES.CSS_MIXED,
       popup: this.markup.popup,
       start: (editor, event) => {
@@ -3605,6 +3607,17 @@ function map(value, oldMin, oldMax, newMin, newMax) {
   return newMin + (newMax - newMin) * ((value - oldMin) / ratio);
 }
 
+/**
+ * Retrieve the available width between a provided element left edge and a container right
+ * edge. This used can be used as a max-width for inplace-editor (autocomplete) widgets
+ * replacing Editor elements of the the markup-view;
+ */
+function getAutocompleteMaxWidth(element, container) {
+  let elementRect = element.getBoundingClientRect();
+  let containerRect = container.getBoundingClientRect();
+  return containerRect.right - elementRect.left - 2;
+}
+
 loader.lazyGetter(MarkupView.prototype, "strings", () => Services.strings.createBundle(
   "chrome://devtools/locale/inspector.properties"
 ));

devtools/client/inspector/markup/test/browser.ini

@@ -141,6 +141,7 @@ skip-if = e10s # Bug 1036409 - The last selected node isn't reselected
 [browser_markup_tag_edit_11.js]
 [browser_markup_tag_edit_12.js]
 [browser_markup_tag_edit_13-other.js]
+[browser_markup_tag_edit_long-classname.js]
 [browser_markup_textcontent_display.js]
 [browser_markup_textcontent_edit_01.js]
 [browser_markup_textcontent_edit_02.js]

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

@@ -69,7 +69,7 @@ function* testAttributeDeletion(inspector) {
   let focusedAttr = Services.focus.focusedElement;
   ok(focusedAttr.classList.contains("styleinspector-propertyeditor"),
      "in newattr");
-  is(focusedAttr.tagName, "input", "newattr is active");
+  is(focusedAttr.tagName, "textarea", "newattr is active");
 }
 
 function* editAttributeAndTab(newValue, inspector, goPrevious) {

devtools/client/inspector/markup/test/browser_markup_tag_edit_long-classname.js

@@ -0,0 +1,41 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that editing long classnames shows the whole class attribute without scrollbars.
+
+const classname = "this-long-class-attribute-should-be-displayed " +
+                  "without-overflow-when-switching-to-edit-mode " +
+                  "AAAAAAAAAAAA-BBBBBBBBBBBBB-CCCCCCCCCCCCC-DDDDDDDDDDDDDD-EEEEEEEEEEEEE";
+const TEST_URL = `data:text/html;charset=utf8, <div class="${classname}"></div>`;
+
+add_task(function* () {
+  let {inspector} = yield openInspectorForURL(TEST_URL);
+
+  yield selectNode("div", inspector);
+  yield clickContainer("div", inspector);
+
+  let container = yield focusNode("div", inspector);
+  ok(container && container.editor, "The markup-container was found");
+
+  info("Listening for the markupmutation event");
+  let nodeMutated = inspector.once("markupmutation");
+  let attr = container.editor.attrElements.get("class").querySelector(".editable");
+
+  attr.focus();
+  EventUtils.sendKey("return", inspector.panelWin);
+  let input = inplaceEditor(attr).input;
+  ok(input, "Found editable field for class attribute");
+
+  is(input.scrollHeight, input.clientHeight, "input should not have vertical scrollbars");
+  is(input.scrollWidth, input.clientWidth, "input should not have horizontal scrollbars");
+  input.value = "class=\"other value\"";
+
+  info("Commit the new class value");
+  EventUtils.sendKey("return", inspector.panelWin);
+
+  info("Wait for the markup-mutation event");
+  yield nodeMutated;
+});

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

@@ -389,13 +389,16 @@ function collapseSelectionAndShiftTab(inspector) {
  */
 function checkFocusedAttribute(attrName, editMode) {
   let focusedAttr = Services.focus.focusedElement;
-  is(focusedAttr ? focusedAttr.parentNode.dataset.attr : undefined,
-     attrName, attrName + " attribute editor is currently focused.");
-  is(focusedAttr ? focusedAttr.tagName : undefined,
-     editMode ? "input" : "span",
-     editMode
-     ? attrName + " is in edit mode"
-     : attrName + " is not in edit mode");
+  ok(focusedAttr, "Has a focused element");
+
+  let dataAttr = focusedAttr.parentNode.dataset.attr;
+  is(dataAttr, attrName, attrName + " attribute editor is currently focused.");
+  if (editMode) {
+    // Using a multiline editor for attributes, the focused element should be a textarea.
+    is(focusedAttr.tagName, "textarea", attrName + "is in edit mode");
+  } else {
+    is(focusedAttr.tagName, "span", attrName + "is not in edit mode");
+  }
 }
 
 /**