--- a/devtools/client/inspector/markup/views/element-editor.js
+++ b/devtools/client/inspector/markup/views/element-editor.js
@@ -54,44 +54,48 @@ const DISPLAY_TYPES = {
  * @param  {Element} node
  *         The node being edited.
  */
 function ElementEditor(container, node) {
   this.container = container;
   this.node = node;
   this.markup = this.container.markup;
   this.highlighters = this.markup.highlighters;
+  this.inspector = this.markup.inspector;
   this.doc = this.markup.doc;
   this._cssProperties = getCssProperties(this.markup.toolbox);
 
   this.attrElements = new Map();
   this.animationTimers = {};
 
   this.elt = null;
   this.tag = null;
   this.closeTag = null;
   this.attrList = null;
   this.newAttr = null;
   this.closeElt = null;
 
+  this.onDisplayBadgeClick = this.onDisplayBadgeClick.bind(this);
+  this.onTagEditor = this.onTagEdit.bind(this);
+
   // Create the main editor
   this.buildMarkup();
 
   // Make the tag name editable (unless this is a remote node or
   // a document element)
   if (!node.isDocumentElement) {
     // Make the tag optionally tabbable but not by default.
     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),
+      done: this.onTagEdit,
       cssProperties: this._cssProperties
     });
   }
 
   // Make the new attribute space editable.
   this.newAttr.editMode = editableField({
     element: this.newAttr,
     multiline: true,
@@ -175,16 +179,17 @@ ElementEditor.prototype = {
     this.eventBadge.classList.add("markup-badge");
     this.eventBadge.dataset.event = "true";
     this.eventBadge.textContent = "event";
     this.eventBadge.title = INSPECTOR_L10N.getStr("markupView.event.tooltiptext");
     this.elt.appendChild(this.eventBadge);
 
     this.displayBadge = this.doc.createElement("div");
     this.displayBadge.classList.add("markup-badge");
+    this.displayBadge.addEventListener("click", this.onDisplayBadgeClick);
     this.elt.appendChild(this.displayBadge);
   },
 
   set selected(value) {
     if (this.textEditor) {
       this.textEditor.selected = value;
     }
   },
@@ -269,34 +274,39 @@ ElementEditor.prototype = {
           this.flashAttribute(attr.name);
         }
       }
     }
 
     // Update the event markup badge
     this.eventBadge.style.display = this.node.hasEventListeners ? "inline-block" : "none";
 
-    // Update the display markup badge
-    let showDisplayBadge = this.node.displayType in DISPLAY_TYPES;
+    this.updateDisplayBadge();
+    this.updateTextEditor();
+  },
+
+  /**
+   * Update the markup display badge.
+   */
+  updateDisplayBadge: function() {
+    const showDisplayBadge = this.node.displayType in DISPLAY_TYPES;
     this.displayBadge.textContent = this.node.displayType;
     this.displayBadge.dataset.display = this.node.displayType;
     this.displayBadge.style.display = showDisplayBadge ? "inline-block" : "none";
     this.displayBadge.title = showDisplayBadge ?
       DISPLAY_TYPES[this.node.displayType] : "";
 
     if (this.highlighters.gridHighlighterShown === this.node) {
       this.displayBadge.classList.add("active");
 
       // Store the MarkupElementContainer of the highlighted grid.
       this.markup.highlightedGridContainer = this.container;
     } else {
       this.displayBadge.classList.remove("active");
     }
-
-    this.updateTextEditor();
   },
 
   /**
    * Update the inline text editor in case of a single text child node.
    */
   updateTextEditor: function() {
     let node = this.node.inlineTextChild;
 
@@ -631,16 +641,28 @@ ElementEditor.prototype = {
       this.markup.emit("refocusedonedit");
     };
 
     // Start listening for mutations until we find an attributes change
     // that modifies this attribute.
     this.markup.inspector.once("markupmutation", onMutations);
   },
 
+  onDisplayBadgeClick: function(event) {
+    event.stopPropagation();
+
+    const target = event.target;
+
+    if (target.dataset.display !== "grid") {
+      return;
+    }
+
+    this.highlighters.toggleGridHighlighter(this.inspector.selection.nodeFront, "markup");
+  },
+
   /**
    * Called when the tag name editor has is done editing.
    */
   onTagEdit: function(newTagName, isCommit) {
     if (!isCommit ||
         newTagName.toLowerCase() === this.node.tagName.toLowerCase() ||
         !("editTagName" in this.markup.walker)) {
       return;
@@ -655,12 +677,14 @@ ElementEditor.prototype = {
     });
   },
 
   destroy: function() {
     for (let key in this.animationTimers) {
       clearTimeout(this.animationTimers[key]);
     }
     this.animationTimers = null;
+
+    this.displayBadge.removeEventListener("click", this.onDisplayBadgeClick);
   }
 };
 
 module.exports = ElementEditor;