🐛 Improve inspect tab

frontend/resources/styles/common/refactor/mixins.scss

@@ -63,6 +63,13 @@
   line-height: 1.2;
 }
 
+@mixin codeTypography {
+  font-family: "robotomono", monospace;
+  font-size: $fs-12;
+  font-weight: $fw400;
+  line-height: 1.2;
+}
+
 @mixin textEllipsis {
   max-width: 99%;
   overflow: hidden;

frontend/resources/styles/common/refactor/themes/hljs-dark-theme.scss

@@ -1,98 +1,124 @@
-/**
+/*!
- * Panda Syntax Theme for Highlight.js
+  Theme: GitHub Dark Dimmed
- * Based on: https://github.com/tinkertrain/panda-syntax-vscode
+  Description: Dark dimmed theme as seen on github.com
- * Author: Annmarie Switzer <https://github.com/annmarie-switzer>
+  Author: github.com
- */
+  Maintainer: @Hirse
+  Updated: 2021-05-15
+
+  Colors taken from GitHub's CSS
+*/
 
 .hljs {
-  color: #e6e6e6;
+  color: #adbac7;
-  background: #2a2c2d;
+  background: #22272e;
+}
+
+.hljs-doctag,
+.hljs-keyword,
+.hljs-meta .hljs-keyword,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-type,
+.hljs-variable.language_ {
+  /* prettylights-syntax-keyword */
+  color: #f47067;
+}
+
+.hljs-title,
+.hljs-title.class_,
+.hljs-title.class_.inherited__,
+.hljs-title.function_ {
+  /* prettylights-syntax-entity */
+  color: #dcbdfb;
+}
+
+.hljs-attr,
+.hljs-attribute,
+.hljs-literal,
+.hljs-meta,
+.hljs-number,
+.hljs-operator,
+.hljs-variable,
+.hljs-selector-attr,
+.hljs-selector-class,
+.hljs-selector-id {
+  /* prettylights-syntax-constant */
+  color: #6cb6ff;
+}
+
+.hljs-regexp,
+.hljs-string,
+.hljs-meta .hljs-string {
+  /* prettylights-syntax-string */
+  color: #96d0ff;
+}
+
+.hljs-built_in,
+.hljs-symbol {
+  /* prettylights-syntax-variable */
+  color: #f69d50;
+}
+
+.hljs-comment,
+.hljs-code,
+.hljs-formula {
+  /* prettylights-syntax-comment */
+  color: #768390;
+}
+
+.hljs-name,
+.hljs-quote,
+.hljs-selector-tag,
+.hljs-selector-pseudo {
+  /* prettylights-syntax-entity-tag */
+  color: #8ddb8c;
+}
+
+.hljs-subst {
+  /* prettylights-syntax-storage-modifier-import */
+  color: #adbac7;
+}
+
+.hljs-section {
+  /* prettylights-syntax-markup-heading */
+  color: #316dca;
+  font-weight: bold;
+}
+
+.hljs-bullet {
+  /* prettylights-syntax-markup-list */
+  color: #eac55f;
 }
 
 .hljs-emphasis {
+  /* prettylights-syntax-markup-italic */
+  color: #adbac7;
   font-style: italic;
 }
 
 .hljs-strong {
+  /* prettylights-syntax-markup-bold */
+  color: #adbac7;
   font-weight: bold;
 }
 
-.hljs-link {
+.hljs-addition {
-  text-decoration: underline;
+  /* prettylights-syntax-markup-inserted */
+  color: #b4f1b4;
+  background-color: #1b4721;
 }
 
-.hljs-comment,
-.hljs-quote {
-  color: #bbbbbb;
-  font-style: italic;
-}
-
-.hljs-params {
-  color: #bbbbbb;
-}
-
-.hljs-punctuation,
-.hljs-attr {
-  color: #e6e6e6;
-}
-
-.hljs-selector-tag,
-.hljs-name,
-.hljs-meta {
-  color: #ff4b82;
-}
-
-.hljs-operator,
-.hljs-char.escape_ {
-  color: #b084eb;
-}
-
-.hljs-keyword,
 .hljs-deletion {
-  color: #ff75b5;
+  /* prettylights-syntax-markup-deleted */
+  color: #ffd8d3;
+  background-color: #78191b;
 }
 
-.hljs-regexp,
+.hljs-char.escape_,
-.hljs-selector-pseudo,
-.hljs-selector-attr,
-.hljs-variable.language_ {
-  color: #ff9ac1;
-}
-
-.hljs-subst,
-.hljs-property,
-.hljs-code,
-.hljs-formula,
-.hljs-section,
-.hljs-title.function_ {
-  color: #45a9f9;
-}
-
-.hljs-string,
-.hljs-symbol,
-.hljs-bullet,
-.hljs-addition,
-.hljs-selector-class,
-.hljs-title.class_,
-.hljs-title.class_.inherited__,
-.hljs-meta .hljs-string {
-  color: #19f9d8;
-}
-
-.hljs-variable,
-.hljs-template-variable,
-.hljs-number,
-.hljs-literal,
-.hljs-type,
 .hljs-link,
-.hljs-built_in,
+.hljs-params,
-.hljs-title,
+.hljs-property,
-.hljs-selector-id,
+.hljs-punctuation,
-.hljs-tag,
+.hljs-tag {
-.hljs-doctag,
+  /* purposely ignored */
-.hljs-attribute,
-.hljs-template-tag,
-.hljs-meta .hljs-keyword,
-.hljs-punctuation {
-  color: #ffb86c;
 }

frontend/resources/styles/common/refactor/themes/hljs-light-theme.scss

@@ -1,94 +1,126 @@
-/**
+/*!
- * Panda Syntax Theme for Highlight.js
+  Theme: GitHub
- * Based on: https://github.com/tinkertrain/panda-syntax-vscode
+  Description: Light theme as seen on github.com
- * Author: Annmarie Switzer <https://github.com/annmarie-switzer>
+  Author: github.com
- */
+  Maintainer: @Hirse
+  Updated: 2021-05-15
+
+  Outdated base version: https://github.com/primer/github-syntax-light
+  Current colors taken from GitHub's CSS
+*/
 
 .hljs {
-  color: #2a2c2d;
+  color: #24292e;
-  background: #e6e6e6;
+  background: #ffffff;
+}
+
+.hljs-doctag,
+.hljs-keyword,
+.hljs-meta .hljs-keyword,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-type,
+.hljs-variable.language_ {
+  /* prettylights-syntax-keyword */
+  color: #d73a49;
+}
+
+.hljs-title,
+.hljs-title.class_,
+.hljs-title.class_.inherited__,
+.hljs-title.function_ {
+  /* prettylights-syntax-entity */
+  color: #6f42c1;
+}
+
+.hljs-attr,
+.hljs-attribute,
+.hljs-literal,
+.hljs-meta,
+.hljs-number,
+.hljs-operator,
+.hljs-variable,
+.hljs-selector-attr,
+.hljs-selector-class,
+.hljs-selector-id {
+  /* prettylights-syntax-constant */
+  color: #005cc5;
+}
+
+.hljs-regexp,
+.hljs-string,
+.hljs-meta .hljs-string {
+  /* prettylights-syntax-string */
+  color: #032f62;
+}
+
+.hljs-built_in,
+.hljs-symbol {
+  /* prettylights-syntax-variable */
+  color: #e36209;
+}
+
+.hljs-comment,
+.hljs-code,
+.hljs-formula {
+  /* prettylights-syntax-comment */
+  color: #6a737d;
+}
+
+.hljs-name,
+.hljs-quote,
+.hljs-selector-tag,
+.hljs-selector-pseudo {
+  /* prettylights-syntax-entity-tag */
+  color: #22863a;
+}
+
+.hljs-subst {
+  /* prettylights-syntax-storage-modifier-import */
+  color: #24292e;
+}
+
+.hljs-section {
+  /* prettylights-syntax-markup-heading */
+  color: #005cc5;
+  font-weight: bold;
+}
+
+.hljs-bullet {
+  /* prettylights-syntax-markup-list */
+  color: #735c0f;
 }
 
 .hljs-emphasis {
+  /* prettylights-syntax-markup-italic */
+  color: #24292e;
   font-style: italic;
 }
 
 .hljs-strong {
+  /* prettylights-syntax-markup-bold */
+  color: #24292e;
   font-weight: bold;
 }
 
-.hljs-link {
+.hljs-addition {
-  text-decoration: underline;
+  /* prettylights-syntax-markup-inserted */
+  color: #22863a;
+  background-color: #f0fff4;
 }
 
-.hljs-comment,
-.hljs-quote {
-  color: #676b79;
-  font-style: italic;
-}
-
-.hljs-params {
-  color: #676b79;
-}
-
-.hljs-punctuation,
-.hljs-attr {
-  color: #2a2c2d;
-}
-
-.hljs-selector-tag,
-.hljs-name,
-.hljs-meta,
-.hljs-operator,
-.hljs-char.escape_ {
-  color: #c56200;
-}
-
-.hljs-keyword,
 .hljs-deletion {
-  color: #d92792;
+  /* prettylights-syntax-markup-deleted */
+  color: #b31d28;
+  background-color: #ffeef0;
 }
 
-.hljs-regexp,
+.hljs-char.escape_,
-.hljs-selector-pseudo,
-.hljs-selector-attr,
-.hljs-variable.language_ {
-  color: #cc5e91;
-}
-
-.hljs-subst,
-.hljs-property,
-.hljs-code,
-.hljs-formula,
-.hljs-section,
-.hljs-title.function_ {
-  color: #3787c7;
-}
-
-.hljs-string,
-.hljs-symbol,
-.hljs-bullet,
-.hljs-addition,
-.hljs-selector-class,
-.hljs-title.class_,
-.hljs-title.class_.inherited__,
-.hljs-meta .hljs-string {
-  color: #0d7d6c;
-}
-
-.hljs-variable,
-.hljs-template-variable,
-.hljs-number,
-.hljs-literal,
-.hljs-type,
 .hljs-link,
-.hljs-built_in,
+.hljs-params,
-.hljs-title,
+.hljs-property,
-.hljs-selector-id,
+.hljs-punctuation,
-.hljs-tag,
+.hljs-tag {
-.hljs-doctag,
+  /* purposely ignored */
-.hljs-attribute,
+  color: #6a737d;
-.hljs-template-tag,
-.hljs-meta .hljs-keyword {
-  color: #7641bb;
 }

frontend/src/app/main/ui/viewer/inspect/code.scss

@@ -7,6 +7,12 @@
 @import "refactor/common-refactor.scss";
 
 .element-options {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+  padding-bottom: $s-16;
+
   .attributes-block {
     .download-button {
       @extend .button-secondary;
@@ -17,16 +23,28 @@
     }
   }
   .code-block {
-    font-size: $fs-14;
+    @include codeTypography;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    height: 100%;
+    min-height: 0;
+    overflow: hidden;
     padding: 0 $s-4 $s-8 0;
 
     pre {
       border-radius: $br-8;
-      border: $s-1 solid $db-secondary;
       padding: $s-16;
-    }
+      max-height: var(--code-height);
+      overflow: auto;
+      height: 100%;
     }
 
+    // Overrides background setted in the theme
+    :global(.hljs) {
+      background: $db-tertiary;
+    }
+  }
   .code-row-lang {
     display: flex;
     justify-content: space-between;
@@ -61,7 +79,10 @@
     color: var(--menu-foreground-color-disabled);
   }
   .code-row-display {
-    margin-bottom: $s-8;
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+    padding-bottom: $s-8;
   }
 }
 

frontend/src/app/main/ui/workspace.scss

@@ -12,7 +12,7 @@
 @include font-face("worksans", "WorkSans-Bold", bold);
 
 // Space mono
-@include font-face("spacemono", "SpaceMono-Regular", normal);
+@include font-face("robotomono", "RobotoMono-Regular", normal);
 
 :global(:root) {
   --s-4: 0.25rem;