Bug 1420112 - Better ordering and icons for EventBubble;r=
MozReview-Commit-ID: 3hwAjswRIxm
--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@@ -183,16 +183,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,8 @@
+<!-- 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" xmlns="http://www.w3.org/2000/svg" stroke="context-stroke" fill="none" stroke-linecap="round">
+ <path d="M5.5 3.5l2 2M5.5 7.5l2-2"/>
+ <path d="M7 5.5H4.006c-1.012 0-1.995 1.017-2.011 2.024-.005.023-.005 1.347 0 3.971" stroke-linejoin="round"/>
+ <path d="M10.5 5.5h4M9.5 3.5h5M9.5 7.5h5"/>
+</svg>
\ No newline at end of file
--- a/devtools/client/themes/tooltips.css
+++ b/devtools/client/themes/tooltips.css
@@ -263,24 +263,38 @@
.event-header {
display: flex;
align-items: center;
cursor: pointer;
overflow: hidden;
}
+.event-header:before {
+ content: "▶︎";
+ padding-inline-end: 5px;
+}
+
+.event-header.content-expanded:before {
+ content: "▼";
+}
+
.event-header:first-child {
border-width: 0;
}
.event-header:not(:first-child) {
border-width: 1px 0 0 0;
}
+.event-tooltip-debugger-icon {
+ -moz-context-properties: stroke;
+ stroke: currentColor;
+}
+
.devtools-tooltip-events-container {
height: 100%;
overflow-y: auto;
}
.event-tooltip-event-type,
.event-tooltip-filename,
.event-tooltip-attributes {