Make font size the same as the console

[davestewart]

The different font sizes make the panel look different to the rest of the dev tools:

You can use the zoom to make the text smaller, but that affects everything else too:

If the navigation and data panels used the same font size as the rest of the dev tools it would feel more native and would be a little easier to use / navigate

On a mac, devtools styles seems to be (at least):

* {
  box-sizing: border-box;
  min-width: 0;
  min-height: 0
}

:root {
  height: 100%;
  overflow: hidden;
  --legacy-accent-color: #1a73e8;
  --legacy-accent-fg-color: #1a73e8;
  --legacy-accent-color-hover: #3b86e8;
  --legacy-accent-fg-color-hover: #1567d3;
  --legacy-active-control-bg-color: #5a5a5a;
  --legacy-focus-bg-color: hsl(214deg 40% 92%);
  --legacy-focus-ring-inactive-shadow-color: #e0e0e0;
  --legacy-input-validation-error: #db1600;
  --legacy-toolbar-hover-bg-color: #eaeaea;
  --legacy-selection-fg-color: #fff;
  --legacy-selection-bg-color: var(--legacy-accent-color);
  --legacy-selection-inactive-fg-color: #5a5a5a;
  --legacy-selection-inactive-bg-color: #dadada;
  --legacy-tab-selected-fg-color: #333;
  --legacy-divider-border: 1px solid var(--color-details-hairline);
  --legacy-focus-ring-inactive-shadow: 0 0 0 1px var(--legacy-focus-ring-inactive-shadow-color);
  --legacy-focus-ring-active-shadow: 0 0 0 1px var(--legacy-accent-color);
  --legacy-item-selection-bg-color: #cfe8fc;
  --legacy-item-selection-inactive-bg-color: #e0e0e0;
  --item-hover-color: rgb(56 121 217 / 10%);
  --monospace-font-size: 10px;
  --monospace-font-family: monospace;
  --source-code-font-size: 11px;
  --source-code-font-family: monospace;
  --override-force-white-icons-background: #fafafa
}

.-theme-with-dark-background {
  color-scheme: dark;
  --legacy-accent-color: #0e639c;
  --legacy-accent-fg-color: #ccc;
  --legacy-accent-fg-color-hover: #fff;
  --legacy-accent-color-hover: rgb(17 119 187);
  --legacy-active-control-bg-color: #cdcdcd;
  --legacy-focus-bg-color: hsl(214deg 19% 27%);
  --legacy-focus-ring-inactive-shadow-color: #5a5a5a;
  --legacy-toolbar-hover-bg-color: #202020;
  --legacy-selection-fg-color: #cdcdcd;
  --legacy-selection-inactive-fg-color: #cdcdcd;
  --legacy-selection-inactive-bg-color: hsl(0deg 0% 28%);
  --legacy-tab-selected-fg-color: #eaeaea;
  --legacy-focus-ring-inactive-shadow: 0 0 0 1px var(--legacy-focus-ring-inactive-shadow-color);
  --legacy-item-selection-bg-color: hsl(207deg 88% 22%);
  --legacy-item-selection-inactive-bg-color: #454545
}

body {
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
  margin: 0;
  cursor: default;
  font-family: ".SFNSDisplay-Regular", "Helvetica Neue", "Lucida Grande", sans-serif;
  font-size: 12px;
  tab-size: 4;
  user-select: none;
  color: var(--color-text-primary);
  background: var(--color-background)
}

.platform-linux {
  font-family: Roboto, Ubuntu, Arial, sans-serif
}

.platform-mac {
  font-family: ".SFNSDisplay-Regular", "Helvetica Neue", "Lucida Grande", sans-serif
}

.platform-linux, .platform-mac {
  --override-text-color: rgb(48 57 66);
  color: var(--override-text-color)
}

.platform-windows {
  font-family: "Segoe UI", Tahoma, sans-serif
}

:focus {
  outline-width: 0
}

.platform-mac, :host-context(.platform-mac) {
  --monospace-font-size: 11px;
  --monospace-font-family: menlo, monospace;
  --source-code-font-size: 11px;
  --source-code-font-family: menlo, monospace
}

.platform-windows, :host-context(.platform-windows) {
  --monospace-font-size: 12px;
  --monospace-font-family: consolas, lucida console, courier new, monospace;
  --source-code-font-size: 12px;
  --source-code-font-family: consolas, lucida console, courier new, monospace
}

.platform-linux, :host-context(.platform-linux) {
  --monospace-font-size: 11px;
  --monospace-font-family: dejavu sans mono, monospace;
  --source-code-font-size: 11px;
  --source-code-font-family: dejavu sans mono, monospace
}

.-theme-with-dark-background .platform-linux, .-theme-with-dark-background .platform-mac, :host-context(.-theme-with-dark-background) .platform-linux, :host-context(.-theme-with-dark-background) .platform-mac {
  --override-text-color: rgb(189 198 207)
}

.monospace {
  font-family: var(--monospace-font-family);
  font-size: var(--monospace-font-size) !important
}

.source-code {
  font-family: var(--source-code-font-family);
  font-size: var(--source-code-font-size) !important;
  white-space: pre-wrap
}

img {
  -webkit-user-drag: none
}

a img, iframe {
  border: none
}

.fill {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0
}

iframe.fill {
  width: 100%;
  height: 100%
}

.widget {
  position: relative;
  flex: auto;
  contain: style
}

.hbox {
  display: flex;
  flex-direction: row !important;
  position: relative
}

.vbox {
  display: flex;
  flex-direction: column !important;
  position: relative
}

.view-container > .toolbar {
  border-bottom: 1px solid var(--color-details-hairline)
}

.flex-auto {
  flex: auto
}

.flex-none {
  flex: none
}

.flex-centered {
  display: flex;
  align-items: center;
  justify-content: center
}

.overflow-auto {
  overflow: auto;
  background-color: var(--color-background)
}

iframe.widget {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0
}

.hidden {
  display: none !important
}

.highlighted-search-result {
  --override-highlighted-search-result-background-color: rgb(255 255 0 / 80%);
  border-radius: 1px;
  background-color: var(--override-highlighted-search-result-background-color);
  outline: 1px solid var(--override-highlighted-search-result-background-color)
}

.-theme-with-dark-background .highlighted-search-result, :host-context(.-theme-with-dark-background) .highlighted-search-result {
  --override-highlighted-search-result-background-color: hsl(133deg 100% 30%);
  color: #333
}

.link {
  cursor: pointer;
  text-decoration: underline;
  color: var(--color-link);
  outline-offset: 2px
}

button, input, select {
  font-family: inherit;
  font-size: inherit
}

input, select optgroup, select option {
  background-color: var(--color-background)
}

input {
  color: inherit
}

input::placeholder {
  --override-input-placeholder-color: rgb(0 0 0 / 54%);
  color: var(--override-input-placeholder-color)
}

.-theme-with-dark-background input::placeholder, :host-context(.-theme-with-dark-background) input::placeholder {
  --override-input-placeholder-color: rgb(230 230 230 / 54%)
}

:host-context(.-theme-with-dark-background) input[type=checkbox]:not(.-theme-preserve) {
  accent-color: var(--color-checkbox-accent-color)
}

.harmony-input:not([type]), .harmony-input[type=number], .harmony-input[type=text] {
  padding: 3px 6px;
  height: 24px;
  border: none;
  box-shadow: var(--legacy-focus-ring-inactive-shadow)
}

.harmony-input:not([type]).error-input, .harmony-input:not([type]):invalid, .harmony-input[type=number].error-input, .harmony-input[type=number]:invalid, .harmony-input[type=text].error-input, .harmony-input[type=text]:invalid {
  box-shadow: 0 0 0 1px var(--color-red)
}

.harmony-input:not([type]):not(.error-input):not(:invalid):hover, .harmony-input[type=number]:not(.error-input):not(:invalid):hover, .harmony-input[type=text]:not(.error-input):not(:invalid):hover {
  box-shadow: var(--legacy-focus-ring-inactive-shadow)
}

.harmony-input:not([type]):not(.error-input):not(:invalid):focus, .harmony-input[type=number]:not(.error-input):not(:invalid):focus, .harmony-input[type=text]:not(.error-input):not(:invalid):focus {
  box-shadow: var(--legacy-focus-ring-active-shadow)
}

.highlighted-search-result.current-search-result {
  --override-current-search-result-background-color: rgb(255 127 0 / 80%);
  border-radius: 1px;
  padding: 1px;
  margin: -1px;
  background-color: var(--override-current-search-result-background-color)
}

.dimmed {
  opacity: 60%
}

.editing {
  box-shadow: var(--drop-shadow);
  background-color: var(--color-background);
  text-overflow: clip !important;
  padding-left: 2px;
  margin-left: -2px;
  padding-right: 2px;
  margin-right: -2px;
  margin-bottom: -1px;
  padding-bottom: 1px;
  opacity: 100% !important
}

.editing, .editing * {
  color: var(--color-text-primary) !important;
  text-decoration: none !important
}

.chrome-select {
  --override-chrome-select-border-color: rgb(0 0 0 / 20%);
  appearance: none;
  user-select: none;
  border: 1px solid var(--override-chrome-select-border-color);
  border-radius: 2px;
  color: var(--color-text-primary);
  font: inherit;
  margin: 0;
  outline: 0;
  padding-right: 20px;
  padding-left: 6px;
  background-image: var(--image-file-chromeSelect);
  background-color: var(--color-background-elevation-0);
  background-position: right center;
  background-repeat: no-repeat;
  min-height: 24px;
  min-width: 80px;
  background-size: 15px
}

.chrome-select:disabled {
  opacity: 38%
}

.-theme-with-dark-background .chrome-select, :host-context(.-theme-with-dark-background) .chrome-select {
  --override-chrome-select-border-color: rgb(230 230 230 / 20%);
  background-image: var(--image-file-chromeSelectDark)
}

.chrome-select:enabled:active, .chrome-select:enabled:focus, .chrome-select:enabled:hover {
  --override-select-box-shadow: 0 0 0 2px var(--color-button-outline-focus);
  background-color: var(--color-background-elevation-1);
  box-shadow: var(--override-select-box-shadow)
}

.chrome-select:enabled:active {
  background-color: var(--color-background-elevation-2)
}

.chrome-select:enabled:focus {
  border-color: transparent
}

@media (forced-colors: active) and (prefers-color-scheme: light) {
  .chrome-select {
    background-image: var(--image-file-chromeSelect)
  }

  .-theme-with-dark-background .chrome-select, :host-context(.-theme-with-dark-background) .chrome-select {
    background-image: var(--image-file-chromeSelect)
  }
}

@media (forced-colors: active) and (prefers-color-scheme: dark) {
  .chrome-select {
    background-image: var(--image-file-chromeSelectDark)
  }

  .-theme-with-dark-background .chrome-select, :host-context(.-theme-with-dark-background) .chrome-select {
    background-image: var(--image-file-chromeSelectDark)
  }
}

.-theme-with-dark-background .chrome-select:enabled:active, .-theme-with-dark-background .chrome-select:enabled:focus, .-theme-with-dark-background .chrome-select:enabled:hover, :host-context(.-theme-with-dark-background) .chrome-select:enabled:active, :host-context(.-theme-with-dark-background) .chrome-select:enabled:focus, :host-context(.-theme-with-dark-background) .chrome-select:enabled:hover {
  --override-select-box-shadow: 0 0 0 2px var(--color-button-outline-focus)
}

.chrome-select-label {
  margin: 0 22px;
  flex: none
}

.chrome-select-label p p {
  margin-top: 0;
  color: var(--color-text-secondary)
}

.settings-select {
  margin: 0
}

.chrome-select optgroup, .chrome-select option {
  background-color: var(--color-background-elevation-1);
  color: var(--color-text-primary)
}

.gray-info-message {
  text-align: center;
  font-style: italic;
  padding: 6px;
  color: var(--color-text-secondary);
  white-space: nowrap
}

span[is=dt-icon-label] {
  flex: none
}

.full-widget-dimmed-banner a {
  color: inherit
}

.full-widget-dimmed-banner {
  color: var(--color-text-secondary);
  background-color: var(--color-background);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  font-size: 13px;
  overflow: auto;
  z-index: 500
}

[is=ui-icon] {
  display: inline-block;
  flex-shrink: 0
}

.-theme-with-dark-background [is=…

Maybe there are other ways to find this, but I got it by:

• inpecting your panel
• inspecting the panel inspector with Opt+Cmd+I
• using that inspector to inspect the panel inspector!

[Deliaz]

Hi @davestewart , Thank you for the improvements ideas! I am not sure if I have time to implement these changes any time soon, however, PRs are welcomed and I can deploy the update for the extension.

[davestewart]

No problem!

I do quite a bit of extensions work myself so I'll look to do a pr and will let you know.

Thanks for the extension!