feedback about document web page

[Liang Cui]

It is not easy to distinguish the beginning and end of each topic.

1) code block is too wide and has less indent than topic title.
2) 3) content spacing is larger than spacing between topics.

4)  topic title isn't clear enough.

[Mythical 5th]

I don't find scrolling through the documentation to be a pleasant experience, mostly because the first 3 levels of headings don't split the page horizontally, and also because the 4th *does*. I mostly resort to the right-hand navigation menu. But for things like storage, where 'onChanged' and 'get' are listed as properties of a storage area, there is no navigation item, leaving us to scroll and identify the sections within this:

The 'get' section title is the same size font as the 'returns' keyword, and has less vertical space around it.

MDN for comparison. There's less information per page, so it requires more clicking and doesn't allow Ctrl+F across a whole API. But it's easy to find what you're looking for, and with the method descriptions being on their own page, there is more room for examples and discussion.

[woxxom]

The documentation's design is a disaster. Here's my fix that can be applied with an extension like Stylus:

@-moz-document url-prefix("https://developer.chrome.com/docs/extensions/reference/api/") {
:root {
  --wx-code-font: bold 17px/1 var(--devsite-code-font-family);
  --wx-event: #7100a1;
  --wx-method: #007474;
  --wx-prop: currentColor;
  --wx-ret: #d0a20038;
  --wx-type: #00b461;
}
body[layout=docs] .devsite-main-content[has-book-nav][has-sidebar] {
  grid-template-columns: minmax(269px,max-content) minmax(752px,auto) minmax(250px,max-content);
}
.devsite-sidebar[fixed] .devsite-sidebar-content,
body[layout=docs] devsite-content {
  max-width: none;
}
.devsite-nav-title {
  padding: .1em
}
p:empty {
  margin: 0;
  height: .5em;
}
p {
  color: var(--chrome-text-text-2);
}
.dcc-reference {
  > h2 {
    margin: 1em -40px 0;
    padding: 20px;
    background-color: #d03e0020;
    color: var(--color-red-darkest);
  }
  > :not(h2) {
    padding-left: 20px;
  }
  .notranslate:first-child {
    display: inline-block;
    &::before {
      content: "";
      border-top: var(--devsite-page-border);
      border-width: 4px;
      position: absolute;
      left: 0;
      right: 0;
      margin-top: 8px;
    }
    h2 + div > :first-child > &::before {
      content: none;
    }
    + div {
      &:has(.dcc-tag-pill) {
        display: inline-block;
        margin: var(--devsite-h3-margin);
        margin-left: -1em;
        margin-bottom: -1em;
        position: absolute;
        .dcc-tag-pill--green {
          vertical-align: bottom;
        }
      }
    }
    + p,
    + div + p {
      margin-top: 0;
    }
  }
  h3 {
    margin-left: -40px;
    color: var(--color-red-medium);
  }
  h4 {
    margin-top: .5em;
  }
}
.devsite-heading-link.material-icons {
  margin: -8px 0 -4px 0;
}
.dcc-code-sections__value {
  color: var(--color-yellow-darkest);
  font: var(--wx-code-font);
}
.dcc-code-sections__label[id^=property] {
  font: var(--wx-code-font);
}
.dcc-code-sections__label[id^=type] {
  color: var(--wx-type);
  font: var(--wx-code-font);
}
.dcc-code-sections__label[id^=event-] {
  color: var(--wx-event);
  font: var(--wx-code-font);
}
.dcc-code-sections__label[id^=method-] {
  color: var(--wx-method);
  font: var(--wx-code-font);
}
.dcc-type--label[id^=returns] {
  font-weight: bold;
  background: linear-gradient(to right, var(--wx-ret), transparent 10em);
  margin: 0 0 0 -1em;
  padding: .25em 0 .25em 1em;
  > span::after {
    content: ':';
  }
  + ul {
    margin-top: -1em;
  }
}
.dcc-code-sections__icon--stringdcc-code-sections__enum {
  > .dcc-type--xsmall {
    margin: -.5em 0 0 2.25rem;
    display: block;
  }
}
.dcc-code-sections__label:is([id^=property], [id^=type], [id^=event], [id$=callback], [id^=method-]) + .dcc-type--xsmall {
  margin-top: -.5em;
  margin-left: 1em;
}
.dcc-type--xsmall > p  {
  margin-bottom: 0;
}
.dcc-code-sections li {
  > :nth-child(2) {
    margin-top: 0;
  }
  > :nth-child(n + 2) {
    margin-left: 2em;
  }
}
h4.dcc-type--label[id^=value] {
  display: none;
  + .dcc-code-sections__label {
    padding: 0;
    margin: 0;
    line-height: 1;
    border-top: none;
    > p {
      margin: -1em 0 0 -1em;
    }
  }
}
devsite-code {
  margin: 0 0 -.5em;
  max-width: max-content;
  > pre {
    padding: .75em 6em .75em 1em;
    box-sizing: content-box;
    max-width: max-content;
  }
  &:not([dark-code]) > pre:not(:hover) {
    background: #8080800a;
  }
}
.dcc-code-sections .dcc-code-sections {
  margin: .5em 0 0 1em;
  padding-top: 0;
  padding-bottom: 0;
  border: none;
  border-left: 1px solid #8883;
  > ul {
    margin-top: -.5em;
  }
}
.dcc-code-sections li {
  border-top: none;
}
}

[Liang Cui]

Looks great!