From ea51c446b4dff11c88fd708301dfcc5dbba8d20f Mon Sep 17 00:00:00 2001 From: Philip Lawrence Date: Sat, 30 Mar 2019 15:46:59 -0700 Subject: [PATCH] Update context menu Better dark mode support Remove context menu on click anywhere else Prevent additional whitespace at the end of values Add feedback when trying to copy empty value --- src/assets/styles/base.scss | 5 +++++ src/devtools/panel.html | 4 ++-- src/devtools/panel.js | 19 +++++++++++------- src/devtools/panel.scss | 40 ++++++++++++++++++++++++++++++++++++- 4 files changed, 58 insertions(+), 10 deletions(-) diff --git a/src/assets/styles/base.scss b/src/assets/styles/base.scss index f9794f71..c8a7eba5 100644 --- a/src/assets/styles/base.scss +++ b/src/assets/styles/base.scss @@ -11,6 +11,7 @@ $dark-body-background-color: #242424; $dark-body-background-alt-color: #333; $dark-body-font-color: #999; + $font-size: 14px; $base-font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif; @@ -19,6 +20,10 @@ $fa-font-path: "../assets/fonts"; @import "../../../node_modules/spectre.css/src/spectre"; +$success-color-dark: darken($success-color, 20%); +$warning-color-dark: darken($warning-color, 20%); +$error-color-dark: darken($error-color, 20%); + @font-face { font-family: 'Source Sans Pro'; font-style: normal; diff --git a/src/devtools/panel.html b/src/devtools/panel.html index cad86244..f605dea6 100644 --- a/src/devtools/panel.html +++ b/src/devtools/panel.html @@ -149,9 +149,9 @@ for a pattern; if a match occurs, the URL is displayed and decoded to show the details of the request.

Find a bug, feature suggestion, or just have some feedback about Omnibug? Drop us a note!

Need help? Check out our help section for guides & how to reach out to us!

-

© 2019 Philip Lawrence +

© 2019 Philip Lawrence & Contributors - — v##OMNIBUG_VERSION##

+ — v##OMNIBUG_VERSION##

diff --git a/src/devtools/panel.js b/src/devtools/panel.js index 6beb723d..a6cc98d8 100644 --- a/src/devtools/panel.js +++ b/src/devtools/panel.js @@ -146,7 +146,9 @@ window.Omnibug = (() => { } else if(action === "watch") { // @TODO: do something with watch here } else if(action === "copy") { - if(copyTextToClipboard(item.getAttribute("data-value"))) { + if(item.getAttribute("data-value") === "") { + showToast("Value is empty, nothing to copy!", "warning", 5); + } else if(copyTextToClipboard(item.getAttribute("data-value"))) { showToast("Value copied to the clipboard.", "success", 5); tracker.track(["send", "event", "context menu", "copy", "success"]); } else { @@ -155,8 +157,8 @@ window.Omnibug = (() => { } } } - let contextMenu = e.target.closest(".context-menu"); - if(contextMenu) { + let contextMenu = d.querySelector(".context-menu"); + if (contextMenu) { contextMenu.remove(); } } @@ -654,9 +656,12 @@ window.Omnibug = (() => { "classes": ["parameter-field"], "text": row.field }), + valueSpan = createElement("span", { + "text": row.value + }), value = createElement("td", { "classes": ["parameter-value"], - "text": row.value + "children": [valueSpan] }), name = createElement("td", { "attributes": { @@ -784,8 +789,8 @@ window.Omnibug = (() => { // Wrap text or truncate with ellipsis if(!settings.wrapText) { - styleSheet.sheet.insertRule(`.parameter-value {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}`, styleSheet.sheet.cssRules.length); - styleSheet.sheet.insertRule(`.parameter-value:hover {white-space: normal; overflow: visible; height:auto;}`, styleSheet.sheet.cssRules.length); + styleSheet.sheet.insertRule(`.parameter-value > span {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}`, styleSheet.sheet.cssRules.length); + styleSheet.sheet.insertRule(`.parameter-value > span:hover {white-space: normal; overflow: visible; height:auto;}`, styleSheet.sheet.cssRules.length); } // Hide note field if disabled @@ -826,7 +831,7 @@ window.Omnibug = (() => { // Quotes if(settings.showQuotes) { - styleSheet.sheet.insertRule(`.parameter-value:before, .parameter-value:after { content: '"'; color: ${settings.color_quotes}; }`, styleSheet.sheet.cssRules.length); + styleSheet.sheet.insertRule(`.parameter-value > span:before, .parameter-value > span:after { content: '"'; color: ${settings.color_quotes}; }`, styleSheet.sheet.cssRules.length); } // Themes diff --git a/src/devtools/panel.scss b/src/devtools/panel.scss index af062385..d5069ec2 100644 --- a/src/devtools/panel.scss +++ b/src/devtools/panel.scss @@ -281,9 +281,12 @@ body.persist-disabled #persist-disable { td.parameter-value { position: relative; } -.context-menu { +.context-menu.menu { z-index: 9999; position: absolute; + .menu-item > a:focus, .menu-item > a:hover { + color: #fff; + } } /* Default colors, can be overridden in settings*/ @@ -397,6 +400,41 @@ body.dark { color: #2dd4c7; } + .context-menu.menu { + background-color: #111; + color: #999; + .divider { + border-color: #333; + } + .divider[data-content]::after, .divider-vert[data-content]::after { + background: #111; + color: #999; + } + .menu-item > a:focus, .menu-item > a:hover { + background: rgba(47, 132, 218, 0.75); + color: #ddd; + } + } + + .toast { + &.toast-primary { + @include toast-variant($primary-color-dark); + } + &.toast-success { + @include toast-variant($success-color-dark); + } + &.toast-warning { + @include toast-variant($warning-color-dark); + } + &.toast-error { + @include toast-variant($error-color-dark); + } + button.btn.btn-clear { + background: none; + } + color: #ddd; + } + ::-webkit-scrollbar { width: 15px; background-color: $dark-body-background-color;