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
MisterPhilip · Mar 30, 2019 · ea51c44 · ea51c44
1 parent 974f1ce
commit ea51c44
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 10 deletions.
diff --git 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
@@ -149,9 +149,9 @@
                         for a pattern; if a match occurs, the URL is displayed and decoded to show the details of the request.</p>
                     <p>Find a bug, feature suggestion, or just have some feedback about Omnibug? <a href="##OMNIBUG_FEEDBACK_URL##" target="_blank">Drop us a note!</a></p>
                     <p>Need help? Check out our <a href="https://omnibug.io/help?utm_source=extension&utm_medium=##BROWSER##&utm_campaign=devtools-help" target="_blank">help section</a> for guides &amp; how to reach out to us!</p>
-                    <p>&copy; 2019 <a href="https://misterphilip.com/?utm_source=omnibug&utm_medium=##BROWSER##&utm_campaign=footer" target="_blank">Philip Lawrence</a>
+                    <p>&copy; 2019 <a href="https://misterphilip.com/?utm_source=omnibug&utm_medium=##BROWSER##&utm_campaign=devtools-help" target="_blank">Philip Lawrence</a>
                         &amp; <a href="https://github.com/MisterPhilip/omnibug/graphs/contributors" target="_blank">Contributors</a>
-                        &mdash; <a href="https://omnibug.io/help/changelog?utm_source=extension&utm_medium=##BROWSER##&utm_campaign=devtools-footer" target="_blank">v##OMNIBUG_VERSION##</a></p></p>
+                        &mdash; <a href="https://omnibug.io/help/changelog?utm_source=extension&utm_medium=##BROWSER##&utm_campaign=devtools-help" target="_blank">v##OMNIBUG_VERSION##</a></p>
                 </div>
             </div>
         </div>

diff --git 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
@@ -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;