Increase font-size in chrome

RedHatter · RedHatter · commit 21957ec73f1b · 2021-01-01T23:55:08.000-08:00
diff --git a/src/App.svelte b/src/App.svelte
@@ -23,7 +23,7 @@
   ul {
     overflow: auto;
     flex-grow: 1;
-    padding-top: 0.6667rem; /* 8px */
+    padding-top: 0.583rem; /* 8px */
   }
 
   .root div {
diff --git a/src/Breadcrumbs.svelte b/src/Breadcrumbs.svelte
@@ -33,14 +33,14 @@
   ul {
     display: flex;
     align-items: center;
-    height: 1.833rem; /* 22px */
+    height: 1.667rem; /* 22px */
     border-top: 1px solid rgb(224, 224, 226);
   }
 
   li {
     display: flex;
     align-items: center;
-    padding-left: 0.8333rem; /* 10px */
+    padding-left: 0.75rem; /* 10px */
     cursor: pointer;
   }
 
@@ -53,7 +53,7 @@
   }
 
   li:last-child {
-    padding-right: 0.8333rem; /* 10px */
+    padding-right: 0.75rem; /* 10px */
   }
 
   li:last-child div {
@@ -62,24 +62,24 @@
 
   div {
     position: relative;
-    margin-left: 0.8333rem; /* 10px */
+    margin-left: 0.75rem; /* 10px */
     width: 0;
     height: 0;
     border-top: 0.25rem solid transparent; /* 3.5px */
     border-bottom: 0.25rem solid transparent; /* 3.5px */
-    border-left: 0.4167rem solid #8e8eb2; /* 5px */
+    border-left: 0.417rem solid #8e8eb2; /* 5px */
   }
 
   div::after {
     position: absolute;
     top: -0.25rem; /* -3.5px */
-    left: -0.4167rem; /* -5px */
+    left: -0.417rem; /* -5px */
     display: block;
     width: 0;
     height: 0;
     border-top: 0.25rem solid transparent; /* 3.5px */
     border-bottom: 0.25rem solid transparent; /* 3.5px */
-    border-left: 0.1667rem solid #ffffff; /* 2px */
+    border-left: 0.167rem solid #ffffff; /* 2px */
     content: '';
   }
 
diff --git a/src/ConnectMessage.svelte b/src/ConnectMessage.svelte
@@ -20,18 +20,18 @@
   }
 
   h1 {
-    margin-top: 2.727rem /* 30px */;
-    margin-bottom: 0.727rem /* 8px */;
+    margin-top: 2.5rem /* 30px */;
+    margin-bottom: 0.667rem /* 8px */;
     font-size: 1.4em;
   }
 
   ul {
-    padding-left: 1.818rem /* 20px */;
+    padding-left: 1.667rem /* 20px */;
     list-style-type: disc;
   }
 
   li {
-    margin-bottom: 0.727rem /* 8px */;
+    margin-bottom: 0.667rem /* 8px */;
   }
 
   :global(.dark) .button {
diff --git a/src/base.css b/src/base.css
@@ -1,13 +1,16 @@
 html {
   height: 100%;
-  font-size: 11px;
+  font-size: 12px;
 }
 
 body {
   display: flex;
   margin: 0;
   height: 100%;
   color: rgb(74, 74, 79);
+  /* #if process.env.TARGET === 'firefox'
+  font-size: 11px;
+  /* #endif */
   font-family: monospace;
 }
 
@@ -47,12 +50,12 @@ ul {
 
 [data-tooltip]::after {
   position: absolute;
-  bottom: -0.182rem /* -2px */;
+  bottom: -0.167rem /* -2px */;
   left: 0;
   z-index: 1;
   display: block;
-  padding: 0.545rem /* 6px */ 1.455rem /* 16px */;
-  border-radius: 0.455rem /* 5px */;
+  padding: 0.5rem /* 6px */ 1.333rem /* 16px */;
+  border-radius: 0.417rem /* 5px */;
   background-color: rgb(48, 64, 81);
   color: white;
   content: attr(data-tooltip);
@@ -65,14 +68,14 @@ ul {
 
 [data-tooltip]::before {
   position: absolute;
-  bottom: -0.182rem /* -2px */;
-  left: 2.727rem /* 30px */;
+  bottom: -0.167rem /* -2px */;
+  left: 2.5rem /* 30px */;
   display: block;
   width: 0;
   height: 0;
-  border-right: 0.455rem /* 5px */ solid transparent;
-  border-bottom: 0.455rem /* 5px */ solid rgb(48, 64, 81);
-  border-left: 0.455rem /* 5px */ solid transparent;
+  border-right: 0.417rem /* 5px */ solid transparent;
+  border-bottom: 0.417rem /* 5px */ solid rgb(48, 64, 81);
+  border-left: 0.417rem /* 5px */ solid transparent;
   content: '';
   opacity: 0;
   transition: opacity 0.2s;
diff --git a/src/nodes/Block.svelte b/src/nodes/Block.svelte
@@ -12,8 +12,8 @@
 
 <style>
   div {
-    height: 1.455rem /* 16px */;
-    line-height: 1.455rem /* 16px */;
+    height: 1.333rem /* 16px */;
+    line-height: 1.333rem /* 16px */;
   }
 
   div {
diff --git a/src/nodes/Collapse.svelte b/src/nodes/Collapse.svelte
@@ -10,30 +10,30 @@
     position: relative;
     display: inline-block;
     align-self: stretch;
-    width: 1.364rem /* 15px */;
+    width: 1.25rem /* 15px */;
     vertical-align: bottom;
     cursor: pointer;
   }
 
   span::after {
     position: absolute;
-    bottom: 0.364rem /* 4px */;
-    left: 0.364rem /* 4px */;
+    bottom: 0.333rem /* 4px */;
+    left: 0.333rem /* 4px */;
     width: 0;
     height: 0;
-    border-top: 0.455rem /* 5px */ solid rgba(135, 135, 137, 0.9);
-    border-right: 0.364rem /* 4px */ solid transparent;
-    border-left: 0.364rem /* 4px */ solid transparent;
+    border-top: 0.417rem /* 5px */ solid rgba(135, 135, 137, 0.9);
+    border-right: 0.333rem /* 4px */ solid transparent;
+    border-left: 0.333rem /* 4px */ solid transparent;
     content: '';
     transition: transform 0.3s;
     transform: rotate(0deg);
   }
 
   :global(.node-tree) span::after {
     /* #if process.env.TARGET === 'chrome'
-    bottom: 0.545rem /* 6px */
+    bottom: 0.5rem /* 6px */
     /* #else */
-    bottom: 0.455rem /* 5px */;
+    bottom: 0.417rem /* 5px */;
     /* #endif */
   }
 
diff --git a/src/nodes/Element.svelte b/src/nodes/Element.svelte
@@ -51,7 +51,7 @@
 
 <style>
   div {
-    line-height: 1.455rem /* 16px */;
+    line-height: 1.333rem /* 16px */;
   }
 
   .tag-name {
diff --git a/src/nodes/ElementAttributes.svelte b/src/nodes/ElementAttributes.svelte
@@ -14,7 +14,7 @@
   .attr-value {
     display: inline-block;
     overflow: hidden;
-    max-width: 18.182rem /* 200px */;
+    max-width: 16.667rem /* 200px */;
     color: rgb(0, 62, 170);
     vertical-align: bottom;
     text-overflow: ellipsis;
diff --git a/src/nodes/Iteration.svelte b/src/nodes/Iteration.svelte
@@ -6,8 +6,8 @@
 
 <style>
   div {
-    height: 1.455rem /* 16px */;
-    line-height: 1.455rem /* 16px */;
+    height: 1.333rem /* 16px */;
+    line-height: 1.333rem /* 16px */;
   }
 
   div {
diff --git a/src/nodes/Node.svelte b/src/nodes/Node.svelte
@@ -45,10 +45,10 @@
 
   span {
     position: absolute;
-    top: 1.6em;
-    bottom: 1.6em;
+    top: 1.6rem;
+    bottom: 1.6rem;
     z-index: 1;
-    width: 0.182rem /* 2px */;
+    width: 0.167rem /* 2px */;
     background-color: #e0e0e2;
   }
 
diff --git a/src/nodes/Slot.svelte b/src/nodes/Slot.svelte
@@ -11,8 +11,8 @@
 
 <style>
   div {
-    height: 1.455rem /* 16px */;
-    line-height: 1.455rem /* 16px */;
+    height: 1.333rem /* 16px */;
+    line-height: 1.333rem /* 16px */;
   }
 
   div {
diff --git a/src/panel/CollapsableValue.svelte b/src/panel/CollapsableValue.svelte
@@ -37,16 +37,16 @@
 
 <style>
   ul {
-    margin-left: 0.727rem /* 8px */;
-    width: calc(100% - 0.727rem /* 8px */);
+    margin-left: 0.667rem /* 8px */;
+    width: calc(100% - 0.667rem /* 8px */);
   }
 
   li {
     position: relative;
     display: flex;
     align-items: end;
     flex-wrap: wrap;
-    padding: 0.364rem /* 4px */ 0 0.364rem /* 4px */ 1.364rem /* 15px */;
+    padding: 0.333rem /* 4px */ 0 0.333rem /* 4px */ 1.25rem /* 15px */;
   }
 
   .function,
@@ -68,14 +68,14 @@
   }
 
   li :global(.collapse) {
-    margin-left: -1.364rem /* -15px */;
+    margin-left: -1.25rem /* -15px */;
   }
 
   .error {
     position: absolute;
     top: 0;
     right: 0;
-    font-size: 1rem;
+    font-size: 0.917rem;
   }
 
   :global(.dark) .function,
diff --git a/src/panel/Editable.svelte b/src/panel/Editable.svelte
@@ -26,7 +26,7 @@
 
   input {
     flex-grow: 1;
-    margin-right: 0.909rem /* 10px */;
+    margin-right: 0.833rem /* 10px */;
     outline: none;
     border: none;
     box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1);
diff --git a/src/panel/Panel.svelte b/src/panel/Panel.svelte
@@ -15,8 +15,8 @@
     top: 0;
     bottom: 0;
     left: 0;
-    width: 0.455rem /* 5px */;
-    border-left: 0.091rem /* 1px */ solid rgb(224, 224, 226);
+    width: 0.417rem /* 5px */;
+    border-left: 0.083rem /* 1px */ solid rgb(224, 224, 226);
     cursor: ew-resize;
   }
 
@@ -25,8 +25,8 @@
     top: 0;
     right: 0;
     left: 0;
-    height: 0.455rem /* 5px */;
-    border-top: 0.091rem /* 1px */ solid rgb(224, 224, 226);
+    height: 0.417rem /* 5px */;
+    border-top: 0.083rem /* 1px */ solid rgb(224, 224, 226);
     cursor: ns-resize;
   }
 
diff --git a/src/panel/PropertyList.svelte b/src/panel/PropertyList.svelte
@@ -22,24 +22,24 @@
 
 <style>
   .empty {
-    margin: 0.727rem /* 8px */ 0 0 1.091rem /* 12px */;
+    margin: 0.667rem /* 8px */ 0 0 1rem /* 12px */;
     color: rgb(118, 118, 118);
   }
 
   h1 {
-    margin: 0.727rem /* 8px */ 0 0 0.727rem /* 8px */;
+    margin: 0.667rem /* 8px */ 0 0 0.667rem /* 8px */;
     color: rgb(118, 118, 118);
     font-weight: bold;
-    font-size: 1rem;
+    font-size: 0.917rem;
   }
 
   ul {
-    margin: 0.455rem /* 5px */;
+    margin: 0.417rem /* 5px */;
   }
 
   ul,
   div {
-    margin-bottom: 1.818rem /* 20px */;
+    margin-bottom: 1.667rem /* 20px */;
   }
 </style>
 
diff --git a/src/profiler/Frame.svelte b/src/profiler/Frame.svelte
@@ -12,7 +12,7 @@
 
   li {
     flex: 0 1 auto;
-    min-width: 0.455rem /* 5px */;
+    min-width: 0.417rem /* 5px */;
   }
 </style>
 
diff --git a/src/profiler/Operation.svelte b/src/profiler/Operation.svelte
@@ -11,10 +11,10 @@
     overflow: hidden;
     flex-wrap: wrap;
     justify-content: center;
-    margin: 0.091rem /* 1px */ 0 0 0.091rem /* 1px */;
-    height: 2em;
+    margin: 0.083rem /* 1px */ 0 0 0.083rem /* 1px */;
+    height: 2rem;
     color: white;
-    line-height: 2em;
+    line-height: 2rem;
     cursor: pointer;
   }
 
diff --git a/src/profiler/Profiler.svelte b/src/profiler/Profiler.svelte
@@ -37,16 +37,16 @@
   .panel {
     display: flex;
     flex-wrap: wrap;
-    padding: 1em;
+    padding: 1rem;
   }
 
   .panel div {
-    margin: 0.455rem /* 5px */ 0;
+    margin: 0.417rem /* 5px */ 0;
     width: calc(100% / 3);
   }
 
   .panel span {
-    margin-right: 0.455rem /* 5px */;
+    margin-right: 0.417rem /* 5px */;
     font-weight: bold;
   }
 </style>
diff --git a/src/toolbar/Button.svelte b/src/toolbar/Button.svelte
diff --git a/src/toolbar/Search.svelte b/src/toolbar/Search.svelte
diff --git a/src/toolbar/Toolbar.svelte b/src/toolbar/Toolbar.svelte
diff --git a/src/toolbar/VisibilityButton.svelte b/src/toolbar/VisibilityButton.svelte
diff --git a/test/src/App.svelte b/test/src/App.svelte

Original file line number	Diff line number	Diff line change
`@@ -23,7 +23,7 @@`
`23`	`23`	`ul {`
`24`	`24`	`overflow: auto;`
`25`	`25`	`flex-grow: 1;`
`26`		`- padding-top: 0.6667rem; /* 8px */`
	`26`	`+ padding-top: 0.583rem; /* 8px */`
`27`	`27`	`}`
`28`	`28`
`29`	`29`	`.root div {`
Original file line number	Diff line number	Diff line change
`@@ -20,18 +20,18 @@`
`20`	`20`	`}`
`21`	`21`
`22`	`22`	`h1 {`
`23`		`- margin-top: 2.727rem /* 30px */;`
`24`		`- margin-bottom: 0.727rem /* 8px */;`
	`23`	`+ margin-top: 2.5rem /* 30px */;`
	`24`	`+ margin-bottom: 0.667rem /* 8px */;`
`25`	`25`	`font-size: 1.4em;`
`26`	`26`	`}`
`27`	`27`
`28`	`28`	`ul {`
`29`		`- padding-left: 1.818rem /* 20px */;`
	`29`	`+ padding-left: 1.667rem /* 20px */;`
`30`	`30`	`list-style-type: disc;`
`31`	`31`	`}`
`32`	`32`
`33`	`33`	`li {`
`34`		`- margin-bottom: 0.727rem /* 8px */;`
	`34`	`+ margin-bottom: 0.667rem /* 8px */;`
`35`	`35`	`}`
`36`	`36`
`37`	`37`	`:global(.dark) .button {`
Original file line number	Diff line number	Diff line change
`@@ -12,8 +12,8 @@`
`12`	`12`
`13`	`13`	`<style>`
`14`	`14`	`div {`
`15`		`- height: 1.455rem /* 16px */;`
`16`		`- line-height: 1.455rem /* 16px */;`
	`15`	`+ height: 1.333rem /* 16px */;`
	`16`	`+ line-height: 1.333rem /* 16px */;`
`17`	`17`	`}`
`18`	`18`
`19`	`19`	`div {`
Original file line number	Diff line number	Diff line change
`@@ -51,7 +51,7 @@`
`51`	`51`
`52`	`52`	`<style>`
`53`	`53`	`div {`
`54`		`- line-height: 1.455rem /* 16px */;`
	`54`	`+ line-height: 1.333rem /* 16px */;`
`55`	`55`	`}`
`56`	`56`
`57`	`57`	`.tag-name {`
Original file line number	Diff line number	Diff line change
`@@ -6,8 +6,8 @@`
`6`	`6`
`7`	`7`	`<style>`
`8`	`8`	`div {`
`9`		`- height: 1.455rem /* 16px */;`
`10`		`- line-height: 1.455rem /* 16px */;`
	`9`	`+ height: 1.333rem /* 16px */;`
	`10`	`+ line-height: 1.333rem /* 16px */;`
`11`	`11`	`}`
`12`	`12`
`13`	`13`	`div {`