Before this, the item name and the stability, source link, and "collapse
all docs" would compete for room on a single line, resulting in awkward
wrapping behavior on mobile. This gives a separate line for that
out-of-band information. It also removes the "copy path" icon on mobile
to make a little more room.
Also, switch to flex-wrap: wrap, so anytime there's not enough room for
`source`, it gets bumped to the next line.
This switches to just use size, weight, and spacing to distinguish
headings in the sidebar. We no longer use boxes, horizontal bars, or
centering to distinguish headings. This makes it much easier to
understand the hierarchy of headings, and reduces visual noise.
I also refactored how the mobile topbar works. Previously, we tried to
shift around elements from the sidebar to make the topbar. Now, the
topbar gets its own elements, which can be styled on their own. This
makes styling and reasoning about those elements simpler.
Because the heading font sizes are bigger, increase the sidebar width
slightly.
As a very minor change, removed version from the "All types" page. It's
now only on the crate page.
Rustdoc style cleanups
- Make "since" version numbers grey again (regressed in #92602).
- Remove unneeded selectors for when crate filter dropdown is a
sibling of search-input.
- Crate filter dropdown doesn't need to be 100% width on mobile.
- Only build crate filter dropdown when there is more than one crate.
- Remove unused addCrateDropdown
Demo: https://rustdoc.crud.net/jsha/style-cleanups/std/string/struct.String.html
r? `@GuillaumeGomez`
Pick themes on settings page, not every page
This hides the paintbrush icon on most pages by default, in preference for the settings on the settings page. When loading from a local file, and not in mobile view, continue to show the theme picker. That's because some browsers limit access to localStorage from file:/// URLs, so choosing a theme from settings.html doesn't take effect.
Fixes#84539
Part of #59840
r? `@GuillaumeGomez`
Demo: https://rustdoc.crud.net/jsha/theme-picker-local-only-2/std/io/trait.Read.html
- Make "since" version numbers grey again (regressed in #92602).
- Remove unneeded selectors for when crate filter dropdown is a
sibling of search-input.
- Crate filter dropdown doesn't need to be 100% width on mobile.
- Only build crate filter dropdown when there is more than one crate.
- Remove unused addCrateDropdown.
This hides the paintbrush icon on most pages by default, in preference
for the settings on the settings page. When loading from a local file,
and not in mobile view, continue to show the theme picker. That's
because some browsers limit access to localStorage from file:/// URLs,
so choosing a theme from settings.html doesn't take effect.
Faced with a very long word, browsers will let it overflow its
box horizontally rather than break it in the middle. We essentially
never want that behavior. We would rather break the word and keep it
inside its horizontal limits. So we apply a default overflow-wrap:
break-word/anywhere to the document as a while.
In some contexts we would rather add a horizontal scrollbar (code
blocks), or elide the excess text with an ellipsis (sidebar). Those
still work as expected.
According to MDN
(https://developer.mozilla.org/en-US/docs/Web/CSS/font-size),
> To maximize accessibility, it is generally best to use values that
> are relative to the user's default font size.
> Defining font sizes in px is not accessible, because the user cannot
> change the font size in some browsers.
Note that changing font size (in browser or OS settings) is distinct
from the zoom functionality triggered with Ctrl/Cmd-+. Zoom
functionality increases the size of everything on the page, effectively
applying a multiplier to all pixel sizes. Font size changes apply to
just text.
For relative font sizes, we could use `em`, as we do in several places
already. However that has a problem of "compounding" (see MDN article
for details). The compounding problem is nicely solved by `rem`, which
make font sizes relative to the root element, not the parent element.
Since we were using a hodge-podge of pixel sizes, em, rem, and
percentage sizes before, this change switching everything to rem, while
keeping the same size relative to our old default of 16px.
16px is still the default on most browsers, for users that haven't set a
larger or smaller font size.
rustdoc: Consolidate static-file replacement mechanism
There were a few places in rustdoc where we would take static JS or CSS and rewrite it at doc generation time to insert values. This consolidates all the CSS instances into one CSS file and replaces the JS examples with data- attributes on the rustdoc-vars div.
Demo https://rustdoc.crud.net/jsha/static-file-replace/test_docs/
r? ``@GuillaumeGomez``
Set color for <a> in a more straightforward way.
Previously, we set the default color for <a> tags to black, and then had an override with a bunch of not() clauses to set anchors in
docblocks to blue.
Instead, we should set the default color for <a> to blue (or equivalent in other themes), and override it for places like the sidebar or search results, where we don't want them to be styled as links.
Demo at https://rustdoc.crud.net/jsha/theme-anchor/std/string/struct.String.html. This should result in no visible changes.
r? `@GuillaumeGomez`
Previously, we set the default color for <a> tags to black, and then
had an override with a bunch of not() clauses to set anchors in
docblocks to blue.
Instead, we should set the default color for <a> to blue (or equivalent
in other themes), and override it for places like the sidebar or search
results, where we don't want them to be styled as links.
Make scrollbar in the sidebar always visible for visual consistency
Fixes#90943.
I had to add a background in `dark` and `ayu` themes, otherwise it was looking strange (like an invisible margin). So it looks like this:
Sadly, I wasn't able to add a GUI test to ensure that the scrollbar was always displayed because it seems not possible in puppeteer for whatever reason... I used this method: on small pages (like `lib2/sub_mod/index.html`), comparing `.navbar`'s `clientWidth` with `offsetWidth` (the first doesn't include the sidebar in the computed amount). When checking in the browser, it works fine but in puppeteer it almost never works...
In case anyone want to try to solve the bug, here is the puppeteer code:
<details>
More information about this: I tried another approach which was to get the element in `evaluate` directly (by calling it from `page.evaluate(() => { .. });` directly instead of `parseAssertElemProp.evaluate(e => {...});`.
```js
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto("file:///path/rust/build/x86_64-unknown-linux-gnu/test/rustdoc-gui/doc/lib2/sub_mod/index.html");
await page.waitFor(".sidebar");
let parseAssertElemProp = await page.$(".sidebar");
if (parseAssertElemProp === null) { throw '".sidebar" not found'; }
await parseAssertElemProp.evaluate(e => {
const parseAssertElemPropDict = {"clientWidth": "192", "offsetWidth":"200"};
for (const [parseAssertElemPropKey, parseAssertElemPropValue] of Object.entries(parseAssertElemPropDict)) {
if (e[parseAssertElemPropKey] === undefined || String(e[parseAssertElemPropKey]) != parseAssertElemPropValue) {
throw 'expected `' + parseAssertElemPropValue + '` for property `' + parseAssertElemPropKey + '` for selector `.sidebar`, found `' + e[parseAssertElemPropKey] + '`';
}
}
}).catch(e => console.error(e));
await browser.close();
})();
```
</details>
r? ``@jsha``
- Remove border.
- Reduce size of emoji slightly.
- Remove details disclosure for unstable reason. This was inconsistent
with our other details disclosures, and the detail revealed was
usually better explained by clicking on the issue link.
Use h3 and h4 for the variant name and the "Fields" subheading.
Remove the "of T" part of the "Fields" subheading.
Remove border-bottom from "Fields" subheading.
Move docblock below "Fields" listing.
Jacob Hoffman-Andrews
