# HG changeset patch # User Pradeep # Date 1516826564 -19800 # Node ID da500b8a4368fc17eba9fa630597bc06bce1c681 # Parent 5b661d12706102ece0a2fddf5164095568b10ffb Bug 1420112 - Refresh event bubble design; r=nchevobbe. Change the order of the icons so it makes more sense. Use te same 'jump to debugger' icon as in the console. Add expanded/collapsed icon on event listener definition. MozReview-Commit-ID: 33tt7VX32NH diff --git a/devtools/client/inspector/markup/test/helper_events_test_runner.js b/devtools/client/inspector/markup/test/helper_events_test_runner.js --- a/devtools/client/inspector/markup/test/helper_events_test_runner.js +++ b/devtools/client/inspector/markup/test/helper_events_test_runner.js @@ -108,22 +108,28 @@ function* checkEventsForNode(test, inspe is(attributes.length, expected[i].attributes.length, "we have the correct number of attributes"); for (let j = 0; j < expected[i].attributes.length; j++) { is(attributes[j].textContent, expected[i].attributes[j], "attribute[" + j + "] matches for " + cssSelector); } + is(header.classList.contains("content-expanded"), false, + "We are not in expanded state"); + // Make sure the header is not hidden by scrollbars before clicking. header.scrollIntoView(); EventUtils.synthesizeMouseAtCenter(header, {}, type.ownerGlobal); yield tooltip.once("event-tooltip-ready"); + is(header.classList.contains("content-expanded"), true, + "We are in expanded state and icon changed"); + let editor = tooltip.eventTooltip._eventEditors.get(contentBox).editor; testDiff(editor.getText(), expected[i].handler, "handler matches for " + cssSelector, ok); } tooltip.hide(); } diff --git a/devtools/client/jar.mn b/devtools/client/jar.mn --- a/devtools/client/jar.mn +++ b/devtools/client/jar.mn @@ -181,16 +181,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) diff --git a/devtools/client/shared/widgets/tooltip/EventTooltipHelper.js b/devtools/client/shared/widgets/tooltip/EventTooltipHelper.js --- 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) { diff --git a/devtools/client/themes/images/jump-definition.svg b/devtools/client/themes/images/jump-definition.svg new file mode 100644 --- /dev/null +++ b/devtools/client/themes/images/jump-definition.svg @@ -0,0 +1,8 @@ + + + + + + \ No newline at end of file diff --git a/devtools/client/themes/tooltips.css b/devtools/client/themes/tooltips.css --- 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 {