Bug 1420112 - Better ordering and icons for EventBubble;r= draft
authorNicolas Chevobbe <nchevobbe@mozilla.com>
Wed, 29 Nov 2017 12:35:39 +0100
changeset 705049 35c929fe73eb7b266c3b6baea8a8995b60739481
parent 705036 3f6b9aaed8cd57954e0c960cde06d25228196456
child 742246 f572e347daddefd91f4c6f9e1088e866eda47cfd
push id91343
push userbmo:nchevobbe@mozilla.com
push dateWed, 29 Nov 2017 11:36:50 +0000
bugs1420112
milestone59.0a1
Bug 1420112 - Better ordering and icons for EventBubble;r= Quick hack, does not work in dark mode. MozReview-Commit-ID: 3hwAjswRIxm
devtools/client/jar.mn
devtools/client/shared/widgets/tooltip/EventTooltipHelper.js
devtools/client/themes/images/jump-definition.svg
devtools/client/themes/tooltips.css
--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@@ -178,16 +178,17 @@ devtools.jar:
     skin/images/geometry-editor.svg (themes/images/geometry-editor.svg)
     skin/images/pause.svg (themes/images/pause.svg)
     skin/images/play.svg (themes/images/play.svg)
     skin/images/rewind.svg (themes/images/rewind.svg)
     skin/images/debugger-step-in.svg (themes/images/debugger-step-in.svg)
     skin/images/debugger-step-out.svg (themes/images/debugger-step-out.svg)
     skin/images/debugger-step-over.svg (themes/images/debugger-step-over.svg)
     skin/images/debugger-toggleBreakpoints.svg (themes/images/debugger-toggleBreakpoints.svg)
+    skin/images/jump-definition.svg (themes/images/jump-definition.svg)
     skin/images/tracer-icon.png (themes/images/tracer-icon.png)
     skin/images/tracer-icon@2x.png (themes/images/tracer-icon@2x.png)
     skin/images/toggle-tools.png (themes/images/toggle-tools.png)
     skin/images/toggle-tools@2x.png (themes/images/toggle-tools@2x.png)
     skin/images/dock-bottom.svg (themes/images/dock-bottom.svg)
     skin/images/dock-side.svg (themes/images/dock-side.svg)
     skin/images/dock-undock.svg (themes/images/dock-undock.svg)
     skin/floating-scrollbars-dark-theme.css (themes/floating-scrollbars-dark-theme.css)
--- a/devtools/client/shared/widgets/tooltip/EventTooltipHelper.js
+++ b/devtools/client/shared/widgets/tooltip/EventTooltipHelper.js
@@ -74,30 +74,16 @@ EventTooltip.prototype = {
       // 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";
       this.container.appendChild(header);
 
-      if (!listener.hide.debugger) {
-        let debuggerIcon = doc.createElementNS(XHTML_NS, "img");
-        debuggerIcon.className = "event-tooltip-debugger-icon";
-        debuggerIcon.setAttribute("src",
-          "chrome://devtools/skin/images/tool-debugger.svg");
-        let openInDebugger = L10N.getStr("eventsTooltip.openInDebugger");
-        debuggerIcon.setAttribute("title", openInDebugger);
-        header.appendChild(debuggerIcon);
-      } else {
-        let debuggerDiv = doc.createElementNS(XHTML_NS, "div");
-        debuggerDiv.className = "event-tooltip-debugger-spacer";
-        header.appendChild(debuggerDiv);
-      }
-
       if (!listener.hide.type) {
         let eventTypeLabel = doc.createElementNS(XHTML_NS, "span");
         eventTypeLabel.className = "event-tooltip-event-type";
         eventTypeLabel.textContent = listener.type;
         eventTypeLabel.setAttribute("title", listener.type);
         header.appendChild(eventTypeLabel);
       }
 
@@ -138,16 +124,26 @@ EventTooltip.prototype = {
           });
         }
       }
 
       filename.textContent = text;
       filename.setAttribute("title", title);
       header.appendChild(filename);
 
+      if (!listener.hide.debugger) {
+        let debuggerIcon = doc.createElementNS(XHTML_NS, "img");
+        debuggerIcon.className = "event-tooltip-debugger-icon";
+        debuggerIcon.setAttribute("src",
+          "chrome://devtools/skin/images/jump-definition.svg");
+        let openInDebugger = L10N.getStr("eventsTooltip.openInDebugger");
+        debuggerIcon.setAttribute("title", openInDebugger);
+        header.appendChild(debuggerIcon);
+      }
+
       let attributesContainer = doc.createElementNS(XHTML_NS, "div");
       attributesContainer.className = "event-tooltip-attributes-container";
       header.appendChild(attributesContainer);
 
       if (!listener.hide.capturing) {
         let attributesBox = doc.createElementNS(XHTML_NS, "div");
         attributesBox.className = "event-tooltip-attributes-box";
         attributesContainer.appendChild(attributesBox);
@@ -214,16 +210,17 @@ EventTooltip.prototype = {
       this._debugClicked(event);
       event.stopPropagation();
       return;
     }
 
     let doc = this._tooltip.doc;
     let header = event.currentTarget;
     let content = header.nextElementSibling;
+    header.classList.toggle("content-expanded");
 
     if (content.hasAttribute("open")) {
       content.removeAttribute("open");
     } else {
       let contentNodes = doc.querySelectorAll(".event-tooltip-content-box");
 
       for (let node of contentNodes) {
         if (node !== content) {
new file mode 100644
--- /dev/null
+++ b/devtools/client/themes/images/jump-definition.svg
@@ -0,0 +1,17 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" stroke="context-stroke #0b0b0b">
+    <g stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="arrow" transform="translate(1.000000, 3.000000)">
+            <path d="M4.5,0.5 L6.5,2.5"></path>
+            <path d="M4.5,2.5 L6.5,4.5" transform="translate(5.500000, 3.500000) scale(1, -1) translate(-5.500000, -3.500000) "></path>
+            <path d="M6.00090144,2.5 C4.67806937,2.5 3.67938478,2.5 3.00484766,2.5 C1.99304199,2.5 1.01049805,3.5168457 0.993840144,4.52403846 C0.988750751,4.54723808 0.988750751,5.87097168 0.993840144,8.49523926" id="Path-2" stroke-linejoin="round"></path>
+        </g>
+        <g id="content-lines" transform="translate(9.000000, 2.000000)">
+            <path d="M1.5,3.5 L5.5,3.5"></path>
+            <path d="M0.5,1.5 L5.5,1.5"></path>
+            <path d="M0.5,5.5 L5.5,5.5"></path>
+        </g>
+    </g>
+</svg>
--- a/devtools/client/themes/tooltips.css
+++ b/devtools/client/themes/tooltips.css
@@ -256,16 +256,24 @@
 
 .event-header {
   display: flex;
   align-items: center;
   cursor: pointer;
   overflow: hidden;
 }
 
+.event-header:before {
+  content: "▶︎";
+}
+
+.event-header.content-expanded:before {
+  content: "▼";
+}
+
 .event-header:first-child {
   border-width: 0;
 }
 
 .event-header:not(:first-child) {
   border-width: 1px 0 0 0;
 }