Bug 1336207 - Add tooltip to say what "ev" means in the Inspector. r=miker
authorAastha Gupta <aastha.gupta4104@gmail.com>
Sun, 10 Sep 2017 11:06:22 +0530
changeset 429578 336effc1fe448609533d7756e5ce95a8eb99c57f
parent 429577 84323938eaeb43ed6d4d4875157bbf5193f4d828
child 429579 8b224e79a2f34574c2df460e8f92e67054c71fc3
push id7761
push userjlund@mozilla.com
push dateFri, 15 Sep 2017 00:19:52 +0000
treeherdermozilla-beta@c38455951db4 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmiker
bugs1336207
milestone57.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1336207 - Add tooltip to say what "ev" means in the Inspector. r=miker 1. Added a tooltip to the ev button. 2. Removed the tooltips from the DOM0 and DOM2 tags. 3. Localized the tooltips for Capturing and Bubbling.
devtools/client/inspector/markup/views/element-editor.js
devtools/client/locales/en-US/inspector.properties
devtools/client/shared/widgets/tooltip/EventTooltipHelper.js
--- a/devtools/client/inspector/markup/views/element-editor.js
+++ b/devtools/client/inspector/markup/views/element-editor.js
@@ -24,16 +24,20 @@ const COLLAPSE_DATA_URL_REGEX = /^data.+
 const COLLAPSE_DATA_URL_LENGTH = 60;
 
 // Contains only void (without end tag) HTML elements
 const HTML_VOID_ELEMENTS = [
   "area", "base", "br", "col", "command", "embed",
   "hr", "img", "input", "keygen", "link", "meta", "param", "source",
   "track", "wbr" ];
 
+// Global tooltip inspector
+const {LocalizationHelper} = require("devtools/shared/l10n");
+const INSPECTOR_L10N = new LocalizationHelper("devtools/client/locales/inspector.properties");
+
 /**
  * Creates an editor for an Element node.
  *
  * @param  {MarkupContainer} container
  *         The container owning this editor.
  * @param  {Element} node
  *         The node being edited.
  */
@@ -150,16 +154,17 @@ ElementEditor.prototype = {
     close.appendChild(this.closeTag);
 
     close.appendChild(this.doc.createTextNode(">"));
 
     this.eventNode = this.doc.createElement("div");
     this.eventNode.classList.add("markupview-events");
     this.eventNode.dataset.event = "true";
     this.eventNode.textContent = "ev";
+    this.eventNode.title = INSPECTOR_L10N.getStr("markupView.event.tooltiptext");
     this.elt.appendChild(this.eventNode);
   },
 
   set selected(value) {
     if (this.textEditor) {
       this.textEditor.selected = value;
     }
   },
--- a/devtools/client/locales/en-US/inspector.properties
+++ b/devtools/client/locales/en-US/inspector.properties
@@ -33,32 +33,43 @@ markupView.more.showing=Some nodes were 
 # See: http://developer.mozilla.org/en/docs/Localization_and_Plurals
 markupView.more.showAll2=Show one more node;Show all #1 nodes
 
 # LOCALIZATION NOTE (markupView.whitespaceOnly)
 # Used in a tooltip that appears when the user hovers over whitespace-only text nodes in
 # the inspector.
 markupView.whitespaceOnly=Whitespace-only text node: %S
 
+# LOCALIZATION NOTE (markupView.event.tooltiptext)
+# Used in a tooltip that appears when the user hovers over 'ev' button in
+# the inspector.
+markupView.event.tooltiptext=Event listener
+
 #LOCALIZATION NOTE: Used in the image preview tooltip when the image could not be loaded
 previewTooltip.image.brokenImage=Could not load the image
 
 # LOCALIZATION NOTE: Used in color picker tooltip when the eyedropper is disabled for
 # non-HTML documents
 eyedropper.disabled.title=Unavailable in non-HTML documents
 
 #LOCALIZATION NOTE: Used in the event tooltip to allow the debugger to be opened
 eventsTooltip.openInDebugger=Open in Debugger
 
 #LOCALIZATION NOTE: Used in the event tooltip when a script's filename cannot be detected
 eventsTooltip.unknownLocation=Unknown location
 
 #LOCALIZATION NOTE: Used in the mouseover tooltip when hovering "Unknown location."
 eventsTooltip.unknownLocationExplanation=The original location of this listener cannot be detected. Maybe the code is transpiled by a utility such as Babel.
 
+#LOCALIZATION NOTE: Used in the tooltip for Bubbling
+eventsTooltip.Bubbling=Bubbling
+
+#LOCALIZATION NOTE: Used in the tooltip for Capturing
+eventsTooltip.Capturing=Capturing
+
 # LOCALIZATION NOTE (docsTooltip.visitMDN): Shown in the tooltip that displays
 # help from MDN. This is a link to the complete MDN documentation page.
 docsTooltip.visitMDN=Visit MDN page
 
 # LOCALIZATION NOTE (docsTooltip.visitMDN): Shown in the docs tooltip when the MDN page
 # could not be loaded (for example, because of a connectivity problem).
 docsTooltip.loadDocsError=Could not load docs page.
 
--- a/devtools/client/shared/widgets/tooltip/EventTooltipHelper.js
+++ b/devtools/client/shared/widgets/tooltip/EventTooltipHelper.js
@@ -60,18 +60,20 @@ EventTooltip.prototype = {
     };
 
     let doc = this._tooltip.doc;
     this.container = doc.createElementNS(XHTML_NS, "div");
     this.container.className = "devtools-tooltip-events-container";
 
     const sourceMapService = this._toolbox.sourceMapURLService;
 
+    const Bubbling = L10N.getStr("eventsTooltip.Bubbling");
+    const Capturing = L10N.getStr("eventsTooltip.Capturing");
     for (let listener of this._eventListenerInfos) {
-      let phase = listener.capturing ? "Capturing" : "Bubbling";
+      let phase = listener.capturing ? Capturing : Bubbling;
       let level = listener.DOM0 ? "DOM0" : "DOM2";
 
       // Create this early so we can refer to it from a closure, below.
       let content = doc.createElementNS(XHTML_NS, "div");
 
       // Header
       let header = doc.createElementNS(XHTML_NS, "div");
       header.className = "event-header devtools-toolbar";
@@ -174,17 +176,16 @@ EventTooltip.prototype = {
       if (!listener.hide.dom0) {
         let attributesBox = doc.createElementNS(XHTML_NS, "div");
         attributesBox.className = "event-tooltip-attributes-box";
         attributesContainer.appendChild(attributesBox);
 
         let dom0 = doc.createElementNS(XHTML_NS, "span");
         dom0.className = "event-tooltip-attributes";
         dom0.textContent = level;
-        dom0.setAttribute("title", level);
         attributesBox.appendChild(dom0);
       }
 
       // Content
       let editor = new Editor(config);
       this._eventEditors.set(content, {
         editor: editor,
         handler: listener.handler,