From b8d2d5aa5c5aab7f97165250af8410db7697491d Mon Sep 17 00:00:00 2001 From: Gabriel Luong Date: Mon, 23 Apr 2018 12:35:15 -0400 Subject: [PATCH] Bug 1455163 - Style the inspector markup and font editor toggle badges. r=pbro --- .../test/browser_markup_display_node_01.js | 8 +-- .../test/browser_markup_display_node_02.js | 2 +- .../test/browser_markup_events-overflow.js | 2 +- .../browser_markup_events-windowed-host.js | 2 +- .../browser_markup_events_click_to_close.js | 4 +- .../markup/test/helper_events_test_runner.js | 2 +- .../inspector/markup/views/element-editor.js | 6 +- .../inspector/rules/views/rule-editor.js | 3 +- devtools/client/jar.mn | 1 - devtools/client/themes/images/font-swatch.svg | 6 -- devtools/client/themes/markup.css | 33 +++++++--- devtools/client/themes/rules.css | 65 ++++++++++++------- 12 files changed, 80 insertions(+), 54 deletions(-) delete mode 100644 devtools/client/themes/images/font-swatch.svg diff --git a/devtools/client/inspector/markup/test/browser_markup_display_node_01.js b/devtools/client/inspector/markup/test/browser_markup_display_node_01.js index a119d27ed019..3266e20474a5 100644 --- a/devtools/client/inspector/markup/test/browser_markup_display_node_01.js +++ b/devtools/client/inspector/markup/test/browser_markup_display_node_01.js @@ -31,28 +31,28 @@ add_task(async function() { info("Check the display node is shown and the value of #grid."); await selectNode("#grid", inspector); let gridContainer = await getContainerForSelector("#grid", inspector); - let gridDisplayNode = gridContainer.elt.querySelector(".markupview-display"); + let gridDisplayNode = gridContainer.elt.querySelector(".markupview-display-badge"); is(gridDisplayNode.textContent, "grid", "Got the correct display type for #grid."); is(gridDisplayNode.style.display, "inline-block", "#grid display node is shown."); info("Check the display node is shown and the value of #flex."); await selectNode("#flex", inspector); let flexContainer = await getContainerForSelector("#flex", inspector); - let flexDisplayNode = flexContainer.elt.querySelector(".markupview-display"); + let flexDisplayNode = flexContainer.elt.querySelector(".markupview-display-badge"); is(flexDisplayNode.textContent, "flex", "Got the correct display type for #flex"); is(flexDisplayNode.style.display, "inline-block", "#flex display node is shown."); info("Check the display node is shown and the value of #block."); await selectNode("#block", inspector); let blockContainer = await getContainerForSelector("#block", inspector); - let blockDisplayNode = blockContainer.elt.querySelector(".markupview-display"); + let blockDisplayNode = blockContainer.elt.querySelector(".markupview-display-badge"); is(blockDisplayNode.textContent, "block", "Got the correct display type for #block"); is(blockDisplayNode.style.display, "none", "#block display node is hidden."); info("Check the display node is shown and the value of span."); await selectNode("span", inspector); let spanContainer = await getContainerForSelector("span", inspector); - let spanDisplayNode = spanContainer.elt.querySelector(".markupview-display"); + let spanDisplayNode = spanContainer.elt.querySelector(".markupview-display-badge"); is(spanDisplayNode.textContent, "inline", "Got the correct display type for #span"); is(spanDisplayNode.style.display, "none", "span display node is hidden."); }); diff --git a/devtools/client/inspector/markup/test/browser_markup_display_node_02.js b/devtools/client/inspector/markup/test/browser_markup_display_node_02.js index 87778aece553..ec3680f7fc9c 100644 --- a/devtools/client/inspector/markup/test/browser_markup_display_node_02.js +++ b/devtools/client/inspector/markup/test/browser_markup_display_node_02.js @@ -97,7 +97,7 @@ async function runTestData(inspector, testActor, {selector, before, changeStyle, after}) { await selectNode(selector, inspector); let container = await getContainerForSelector(selector, inspector); - let displayNode = container.elt.querySelector(".markupview-display"); + let displayNode = container.elt.querySelector(".markupview-display-badge"); is(displayNode.textContent, before.textContent, `Got the correct before display type for ${selector}: ${displayNode.textContent}`); diff --git a/devtools/client/inspector/markup/test/browser_markup_events-overflow.js b/devtools/client/inspector/markup/test/browser_markup_events-overflow.js index f0687c26a5c9..82e1f52d0c20 100644 --- a/devtools/client/inspector/markup/test/browser_markup_events-overflow.js +++ b/devtools/client/inspector/markup/test/browser_markup_events-overflow.js @@ -34,7 +34,7 @@ add_task(async function() { let { inspector } = await openInspectorForURL(TEST_URL); let markupContainer = await getContainerForSelector("#events", inspector); - let evHolder = markupContainer.elt.querySelector(".markupview-events"); + let evHolder = markupContainer.elt.querySelector(".markupview-event-badge"); let tooltip = inspector.markup.eventDetailsTooltip; info("Clicking to open event tooltip."); diff --git a/devtools/client/inspector/markup/test/browser_markup_events-windowed-host.js b/devtools/client/inspector/markup/test/browser_markup_events-windowed-host.js index bdf55c13c677..8cc57cf17751 100644 --- a/devtools/client/inspector/markup/test/browser_markup_events-windowed-host.js +++ b/devtools/client/inspector/markup/test/browser_markup_events-windowed-host.js @@ -30,7 +30,7 @@ add_task(async function() { async function runTests(inspector) { let markupContainer = await getContainerForSelector("#events", inspector); - let evHolder = markupContainer.elt.querySelector(".markupview-events"); + let evHolder = markupContainer.elt.querySelector(".markupview-event-badge"); let tooltip = inspector.markup.eventDetailsTooltip; info("Clicking to open event tooltip."); diff --git a/devtools/client/inspector/markup/test/browser_markup_events_click_to_close.js b/devtools/client/inspector/markup/test/browser_markup_events_click_to_close.js index 42043084fa23..e82a6807727d 100644 --- a/devtools/client/inspector/markup/test/browser_markup_events_click_to_close.js +++ b/devtools/client/inspector/markup/test/browser_markup_events_click_to_close.js @@ -27,10 +27,10 @@ add_task(async function() { await inspector.markup.expandAll(); let container1 = await getContainerForSelector("#d1", inspector); - let evHolder1 = container1.elt.querySelector(".markupview-events"); + let evHolder1 = container1.elt.querySelector(".markupview-event-badge"); let container2 = await getContainerForSelector("#d2", inspector); - let evHolder2 = container2.elt.querySelector(".markupview-events"); + let evHolder2 = container2.elt.querySelector(".markupview-event-badge"); let tooltip = inspector.markup.eventDetailsTooltip; diff --git a/devtools/client/inspector/markup/test/helper_events_test_runner.js b/devtools/client/inspector/markup/test/helper_events_test_runner.js index 101babb4a7ec..3cfe7cd76cc8 100644 --- a/devtools/client/inspector/markup/test/helper_events_test_runner.js +++ b/devtools/client/inspector/markup/test/helper_events_test_runner.js @@ -55,7 +55,7 @@ async function checkEventsForNode(test, inspector, testActor) { await beforeTest(inspector, testActor); } - let evHolder = container.elt.querySelector(".markupview-events"); + let evHolder = container.elt.querySelector(".markupview-event-badge"); if (expected.length === 0) { // if no event is expected, simply check that the event bubble is hidden diff --git a/devtools/client/inspector/markup/views/element-editor.js b/devtools/client/inspector/markup/views/element-editor.js index 28494ad3476f..073770ca53e0 100644 --- a/devtools/client/inspector/markup/views/element-editor.js +++ b/devtools/client/inspector/markup/views/element-editor.js @@ -171,14 +171,14 @@ ElementEditor.prototype = { close.appendChild(this.doc.createTextNode(">")); this.eventNode = this.doc.createElement("div"); - this.eventNode.classList.add("markupview-events"); + this.eventNode.classList.add("markupview-event-badge"); this.eventNode.dataset.event = "true"; - this.eventNode.textContent = "ev"; + this.eventNode.textContent = "event"; this.eventNode.title = INSPECTOR_L10N.getStr("markupView.event.tooltiptext"); this.elt.appendChild(this.eventNode); this.displayNode = this.doc.createElement("div"); - this.displayNode.classList.add("markupview-display"); + this.displayNode.classList.add("markupview-display-badge"); this.elt.appendChild(this.displayNode); }, diff --git a/devtools/client/inspector/rules/views/rule-editor.js b/devtools/client/inspector/rules/views/rule-editor.js index e056d3155591..0770a1565952 100644 --- a/devtools/client/inspector/rules/views/rule-editor.js +++ b/devtools/client/inspector/rules/views/rule-editor.js @@ -246,8 +246,9 @@ RuleEditor.prototype = { // Create the font editor toggle icon visible on hover. if (this.ruleView.showFontEditor) { this.fontSwatch = createChild(this.element, "div", { - class: "ruleview-fontswatch" + class: "ruleview-font-editor-toggle" }); + this.fontSwatch.textContent = "Aa"; this.fontSwatch.addEventListener("click", this._onFontSwatchClick); } diff --git a/devtools/client/jar.mn b/devtools/client/jar.mn index 345485796d56..19f223f3587c 100644 --- a/devtools/client/jar.mn +++ b/devtools/client/jar.mn @@ -117,7 +117,6 @@ devtools.jar: skin/images/breadcrumbs-divider.svg (themes/images/breadcrumbs-divider.svg) skin/images/filters.svg (themes/images/filters.svg) skin/images/filter-swatch.svg (themes/images/filter-swatch.svg) - skin/images/font-swatch.svg (themes/images/font-swatch.svg) skin/images/grid.svg (themes/images/grid.svg) skin/images/angle-swatch.svg (themes/images/angle-swatch.svg) skin/images/pseudo-class.svg (themes/images/pseudo-class.svg) diff --git a/devtools/client/themes/images/font-swatch.svg b/devtools/client/themes/images/font-swatch.svg deleted file mode 100644 index 954ce8e28fcf..000000000000 --- a/devtools/client/themes/images/font-swatch.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - diff --git a/devtools/client/themes/markup.css b/devtools/client/themes/markup.css index f0ea197b2562..d8eb7786e235 100644 --- a/devtools/client/themes/markup.css +++ b/devtools/client/themes/markup.css @@ -3,6 +3,10 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ :root { + --markup-badge-background-color: var(--grey-20); + --markup-badge-border-color: #CACAD1; + --markup-badge-color: var(--grey-90); + --markup-badge-hover-background-color: #DFDFE8; --markup-hidden-attr-name-color: #BA89B8; --markup-hidden-attr-value-color: #5C6D87; --markup-hidden-punctuation-color: #909090; @@ -11,6 +15,10 @@ } .theme-dark:root { + --markup-badge-background-color: var(--grey-70); + --markup-badge-border-color: var(--grey-50); + --markup-badge-color: var(--grey-30); + --markup-badge-hover-background-color: var(--grey-80); --markup-hidden-attr-name-color: #B07EB3; --markup-hidden-attr-value-color: #9893A3; --markup-hidden-punctuation-color: #909090; @@ -386,21 +394,28 @@ ul.children + .tag-line::before { font-style: italic; } -/* Display and Events Bubble */ -.markupview-display, -.markupview-events { +/* Display and Event Badges */ +.markupview-display-badge, +.markupview-event-badge { display: none; - font-size: 8px; - font-weight: bold; - line-height: 10px; + font-size: 9px; + font-weight: normal; + line-height: 11px; + vertical-align: 1px; + border: 1px solid var(--markup-badge-border-color); border-radius: 3px; padding: 0px 2px; margin-inline-start: 5px; -moz-user-select: none; - background-color: var(--theme-body-color-alt); - color: var(--theme-body-background); + background-color: var(--markup-badge-background-color); + color: var(--markup-badge-color); } -.markupview-events { +.markupview-event-badge { cursor: pointer; } + +.markupview-event-badge:focus, +.markupview-event-badge:hover { + background-color: var(--markup-badge-hover-background-color); +} diff --git a/devtools/client/themes/rules.css b/devtools/client/themes/rules.css index 6f08cc6eb839..c1901313adba 100644 --- a/devtools/client/themes/rules.css +++ b/devtools/client/themes/rules.css @@ -4,6 +4,11 @@ /* CSS Variables specific to this panel that aren't defined by the themes */ :root { + --rule-badge-active-background-color: var(--blue-50); + --rule-badge-background-color: var(--grey-20); + --rule-badge-border-color: #CACAD1; + --rule-badge-color: var(--grey-90); + --rule-badge-hover-background-color: #DFDFE8; --rule-highlight-background-color: var(--theme-highlight-yellow); --rule-overridden-item-border-color: var(--theme-content-color3); --rule-header-background-color: var(--theme-toolbar-background); @@ -12,6 +17,11 @@ } :root.theme-dark { + --rule-badge-active-background-color: var(--blue-60); + --rule-badge-background-color: var(--grey-70); + --rule-badge-border-color: var(--grey-50); + --rule-badge-color: var(--grey-30); + --rule-badge-hover-background-color: var(--grey-80); --rule-highlight-background-color: #521C76; --rule-overridden-item-border-color: var(--theme-content-color1); --rule-header-background-color: #222225; @@ -453,30 +463,6 @@ background-size: 1em; } -.ruleview-rule:not(:hover) .ruleview-fontswatch:not(.active) { - visibility: hidden; -} - -.ruleview-fontswatch { - position: absolute; - width: 1.45em; - height: 1em; - right: 1.5em; - bottom: 0.5em; - font-size: 1em; - - background: url("chrome://devtools/skin/images/font-swatch.svg"); - -moz-context-properties: fill; - fill: var(--grey-40); - background-size: contain; - cursor: pointer; - -moz-user-select: none; -} - -.ruleview-fontswatch.active { - fill: var(--blue-50); -} - .ruleview-shapeswatch { background: url("chrome://devtools/skin/images/tool-shadereditor.svg"); -moz-context-properties: fill; @@ -612,3 +598,34 @@ .ruleview-overridden-rule-filter:hover { opacity: 1; } + +.ruleview-rule:not(:hover) .ruleview-font-editor-toggle:not(.active) { + visibility: hidden; +} + +.ruleview-font-editor-toggle { + position: absolute; + right: 1.5em; + bottom: 0.5em; + font-size: 11px; + font-weight: normal; + line-height: 11px; + border: 1px solid var(--rule-badge-border-color); + border-radius: 3px; + padding: 0px 4px; + -moz-user-select: none; + cursor: pointer; + background-color: var(--rule-badge-background-color); + color: var(--rule-badge-color); +} + +.ruleview-font-editor-toggle:focus, +.ruleview-font-editor-toggle:hover { + background-color: var(--rule-badge-hover-background-color); +} + +.ruleview-font-editor-toggle.active { + background-color: var(--rule-badge-active-background-color); + border-color: var(--rule-badge-active-background-color); + color: var(--theme-selection-color); +}