Bug 1573504 - Make inline variable preview UX better, r=Harald
authorDhyey Thakore <dhyey35@gmail.com>
Thu, 22 Aug 2019 21:22:58 +0000
changeset 489496 a852387dee55e3ec356d83c44af9eef2626a4218
parent 489495 bafc328333083bac2f2efe0f9b829e6daa43ba00
child 489497 812195e863136ca41420643e2a145ba059dc1344
push id36475
push userncsoregi@mozilla.com
push dateFri, 23 Aug 2019 09:45:38 +0000
treeherdermozilla-central@5df00af5913e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersHarald
bugs1573504
milestone70.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1573504 - Make inline variable preview UX better, r=Harald Differential Revision: https://phabricator.services.mozilla.com/D42018
devtools/client/debugger/src/components/Editor/InlinePreview.css
devtools/client/debugger/src/components/Editor/InlinePreview.js
devtools/client/debugger/src/components/variables.css
devtools/client/debugger/test/mochitest/browser_dbg-inline-preview.js
--- a/devtools/client/debugger/src/components/Editor/InlinePreview.css
+++ b/devtools/client/debugger/src/components/Editor/InlinePreview.css
@@ -3,30 +3,25 @@
  * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
 
 .inline-preview {
   position: relative;
   margin-top: calc(var(--theme-code-line-height) * -11px);
 }
 
 .inline-preview-outer {
-  padding: 2px;
-  border: 1px solid HSL(56.1, 87%, 65%);
-  opacity: 0.8;
-  background-color: HSL(56.1, 100%, 92.1%);
-  border-radius: 2px;
-  font-size: 9px;
-  color: HSL(56.1, 87%, 23%);
+  padding: 1px 0;
+  background-color: var(--theme-inline-preview-background);
+  border: 1px solid var(--theme-inline-preview-border-color);
+  border-radius: 3px;
+  font-size: 10px;
   margin-right: 5px;
 }
 
 .inline-preview-label {
-  padding: 2px;
-  border-right: 1px solid HSL(56.1, 87%, 70%);
-  background-color: #fffab3;
-  border-radius: 2px 0 0 2px;
+  padding: 1px 2px 1px 4px;
+  color: var(--theme-inline-preview-label-color);
+  background-color: var(--theme-inline-preview-label-background);
 }
 
 .inline-preview-value {
-  background-color: HSL(56.1, 100%, 96.1%);
   padding: 2px 6px;
-  border-radius: 0 2px 2px 0;
 }
--- a/devtools/client/debugger/src/components/Editor/InlinePreview.js
+++ b/devtools/client/debugger/src/components/Editor/InlinePreview.js
@@ -26,17 +26,17 @@ class InlinePreview extends PureComponen
 
   render() {
     const { value, variable } = this.props;
     return (
       <span
         className="inline-preview-outer"
         onClick={() => this.showInScopes(variable)}
       >
-        <span className="inline-preview-label">{variable}</span>
+        <span className="inline-preview-label">{variable}:</span>
         <span className="inline-preview-value">
           <Rep object={value} mode={MODE.SHORT} noGrip={true} />
         </span>
       </span>
     );
   }
 }
 
--- a/devtools/client/debugger/src/components/variables.css
+++ b/devtools/client/debugger/src/components/variables.css
@@ -16,15 +16,23 @@
   --skip-pausing-opacity: 0.6;
   --skip-pausing-color: var(--theme-body-color);
 }
 
 :root.theme-light,
 :root .theme-light {
   --search-overlays-semitransparent: rgba(221, 225, 228, 0.66);
   --popup-shadow-color: #d0d0d0;
+  --theme-inline-preview-background: rgba(192, 105, 255, 0.05);
+  --theme-inline-preview-border-color: #ebd1ff;
+  --theme-inline-preview-label-color: #6300a6;
+  --theme-inline-preview-label-background: rgb(244, 230, 255);
 }
 
 :root.theme-dark,
 :root .theme-dark {
   --search-overlays-semitransparent: rgba(42, 46, 56, 0.66);
   --popup-shadow-color: #5c667b;
+  --theme-inline-preview-background: rgba(192, 105, 255, 0.05);
+  --theme-inline-preview-border-color: #47326c;
+  --theme-inline-preview-label-color: #dfccff;
+  --theme-inline-preview-label-background: #3f2e5f;
 }
--- a/devtools/client/debugger/test/mochitest/browser_dbg-inline-preview.js
+++ b/devtools/client/debugger/test/mochitest/browser_dbg-inline-preview.js
@@ -33,27 +33,27 @@ add_task(async function() {
 
   const dbg = await initDebugger(
     "doc-inline-preview.html",
     "inline-preview.js"
   );
   await selectSource(dbg, "inline-preview.js");
 
   await checkInlinePreview(dbg, "checkValues", [
-    { identifier: "a", value: '""' },
-    { identifier: "b", value: "false" },
-    { identifier: "c", value: "undefined" },
-    { identifier: "d", value: "null" },
-    { identifier: "e", value: "[]" },
-    { identifier: "f", value: "Object { }" },
-    { identifier: "obj", value: "Object { foo: 1 }" },
+    { identifier: "a:", value: '""' },
+    { identifier: "b:", value: "false" },
+    { identifier: "c:", value: "undefined" },
+    { identifier: "d:", value: "null" },
+    { identifier: "e:", value: "[]" },
+    { identifier: "f:", value: "Object { }" },
+    { identifier: "obj:", value: "Object { foo: 1 }" },
     {
-      identifier: "bs",
+      identifier: "bs:",
       value: "[ {…}, {…}, {…}, … ]",
     },
   ]);
 
   await checkInlinePreview(dbg, "columnWise", [
-    { identifier: "c", value: '"c"' },
-    { identifier: "a", value: '"a"' },
-    { identifier: "b", value: '"b"' },
+    { identifier: "c:", value: '"c"' },
+    { identifier: "a:", value: '"a"' },
+    { identifier: "b:", value: '"b"' },
   ]);
 });