Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-23 02:05:42 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1573504 - Make inline variable preview UX better, r=Harald

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D42018

--HG--
extra : moz-landing-system : lando
This commit is contained in:
Dhyey Thakore 2019-08-15 17:56:07 +00:00
parent ea12a48529
commit baf31562ec
3 changed files with 17 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
devtools/client/debugger/src/components/Editor/InlinePreview.css
View File

@ -8,25 +8,20 @@
}
.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;
}

2
devtools/client/debugger/src/components/Editor/InlinePreview.js
View File

@ -31,7 +31,7 @@ class InlinePreview extends PureComponent<Props> {
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>

8
devtools/client/debugger/src/components/variables.css
View File

@ -17,10 +17,18 @@
: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;
}