Skip to content

Fix website history interactions #16060

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Nov 13, 2025
+233 −377
Merged

Fix website history interactions #16060

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 54 additions & 22 deletions util/gh-pages/index_template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
<script src="script.js" defer></script> {# #}
</head> {# #}
<body> {# #}
<div id="settings-dropdown"> {# #}
<div id="settings-dropdown" class="dropdown"> {# #}
<button class="settings-icon" tabindex="-1"></button> {# #}
<div class="settings-menu" tabindex="-1"> {# #}
<div class="setting-radio-name">Theme</div> {# #}
Expand Down Expand Up @@ -59,72 +59,104 @@ <h1 class="page-header">Clippy Lints <span class="badge">Total number: {{+ count
<div id="menu-filters"> {# #}
<div class="panel-body row"> {# #}
<div id="upper-filters"> {# #}
<div id="lint-levels" tabindex="-1"> {# #}
<div class="dropdown" data-filter="levels" tabindex="-1"> {# #}
<button type="button" class="btn-default dropdown-toggle"> {# #}
Lint levels <span class="badge">4</span> <span class="caret"></span> {# #}
Lint levels <span id="levels-count" class="badge">4</span> <span class="caret"></span> {# #}
</button> {# #}
<ul class="dropdown-menu" id="lint-levels-selector"> {# #}
<ul class="dropdown-menu"> {# #}
<li class="checkbox"> {# #}
<button onclick="toggleElements('levels_filter', true)">All</button> {# #}
<button class="reset-all">All</button> {# #}
</li> {# #}
<li class="checkbox"> {# #}
<button onclick="toggleElements('levels_filter', false)">None</button> {# #}
<button class="reset-none">None</button> {# #}
</li> {# #}
<li role="separator" class="divider"></li> {# #}
{% for level in ["allow", "warn", "deny", "none"] %}
Copy link
Member

@GuillaumeGomez GuillaumeGomez Nov 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same here.

<li class="checkbox"> {# #}
<label> {# #}
<input type="checkbox" name="{{ level }}" checked />
{{ level | capitalize }}
</label> {# #}
</li> {# #}
{% endfor %}
</ul> {# #}
</div> {# #}
<div id="lint-groups" tabindex="-1"> {# #}
<div class="dropdown" data-filter="groups" tabindex="-1"> {# #}
<button type="button" class="btn-default dropdown-toggle"> {# #}
Lint groups <span class="badge">9</span> <span class="caret"></span> {# #}
Lint groups <span id="groups-count" class="badge">9</span> <span class="caret"></span> {# #}
</button> {# #}
<ul class="dropdown-menu" id="lint-groups-selector"> {# #}
<ul class="dropdown-menu"> {# #}
<li class="checkbox"> {# #}
<button onclick="toggleElements('groups_filter', true)">All</button> {# #}
<button class="reset-all">All</button> {# #}
</li> {# #}
<li class="checkbox"> {# #}
<button onclick="resetGroupsToDefault()">Default</button> {# #}
<button class="reset-default">Default</button> {# #}
</li> {# #}
<li class="checkbox"> {# #}
<button onclick="toggleElements('groups_filter', false)">None</button> {# #}
<button class="reset-none">None</button> {# #}
</li> {# #}
<li role="separator" class="divider"></li> {# #}
{% for group in ["cargo", "complexity", "correctness", "nursery", "pedantic", "perf", "restriction", "style", "suspicious", "deprecated"] %}
Copy link
Member

@GuillaumeGomez GuillaumeGomez Nov 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I moved this code on purpose in JS to reduce the page size and also to make it empty in case user's JS is disabled.

Copy link
Member Author

@Alexendoo Alexendoo Nov 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah yeah this change wasn't functionally required I just got annoyed at the HTML being split across files when locating class names etc

There's no difference to the page with JS disabled though since you can't expand the dropdowns without JS

It does add some size to the HTML, but they're mostly the same so they compress plenty well. Overall size wise (gzipped) this PR is +246 bytes for the HTML and -1255 bytes for the JS

Up to you @samueltardieu

Copy link
Member

@GuillaumeGomez GuillaumeGomez Nov 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's no difference to the page with JS disabled though since you can't expand the dropdowns without JS

That's part of the things I'd like to change. So better avoid doing back and forth for the same thing. ^^'

It's not really a blocker though. Just more diff in the future when I'm back to this.

Copy link
Member

@samueltardieu samueltardieu Nov 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Up to you @samueltardieu

If this is easy not to include this non-required change, then I would indeed prefer not to step on @GuillaumeGomez's ongoing cleanup effort.

Copy link
Member Author

@Alexendoo Alexendoo Nov 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's some manual effort but yeah revertible, I'll take one more crack at persuasion first to try and avoid it though 😄

If we hide the filter section it's not a problem if they become expandable without JS, it was meant to be hidden in the JS-less page but isn't because of a typo, with that fixed it would no longer matter

Copy link
Member

@GuillaumeGomez GuillaumeGomez Nov 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's a lot of effort to fix a typo 😆

<li class="checkbox"> {# #}
<label> {# #}
<input type="checkbox" name="{{ group }}" {% if *group != "deprecated" +%} checked {% endif %} />
{{ group | capitalize }}
</label> {# #}
</li> {# #}
{% endfor %}
</ul> {# #}
</div> {# #}
<div id="version-filter" tabindex="-1"> {# #}
<div id="version-filter" class="dropdown" tabindex="-1"> {# #}
<button type="button" class="btn-default dropdown-toggle"> {# #}
Version {#+ #}
<span id="version-filter-count" class="badge">0</span> {#+ #}
<span id="versions-count" class="badge">0</span> {#+ #}
<span class="caret"></span> {# #}
</button> {# #}
<ul id="version-filter-selector" class="dropdown-menu"> {# #}
<ul class="dropdown-menu"> {# #}
<li class="checkbox"> {# #}
<button onclick="clearVersionFilters()">Clear filters</button> {# #}
<button id="reset-versions">Clear filters</button> {# #}
</li> {# #}
<li role="separator" class="divider"></li> {# #}
{% for (sym, name) in [("≥", "gte"), ("≤", "lte"), ("=", "eq")] %}
<li class="checkbox"> {# #}
<label>{{ sym }}</label> {#+ #}
<span>1.</span> {# #}
<input type="number" name="{{ name }}" min="29" maxlength="2" class="version-filter-input form-control filter-input" /> {# #}
<span>.0</span> {# #}
</li> {# #}
{% endfor %}
</ul> {# #}
</div> {# #}
<div id="lint-applicabilities" tabindex="-1"> {# #}
<div class="dropdown" data-filter="applicabilities" tabindex="-1"> {# #}
<button type="button" class="btn-default dropdown-toggle"> {# #}
Applicability {#+ #}
<span class="badge">4</span> {#+ #}
<span id="applicabilities-count" class="badge">4</span> {#+ #}
<span class="caret"></span> {# #}
</button> {# #}
<ul class="dropdown-menu" id="lint-applicabilities-selector"> {# #}
<ul class="dropdown-menu"> {# #}
<li class="checkbox"> {# #}
<button onclick="toggleElements('applicabilities_filter', true)">All</button> {# #}
<button class="reset-all">All</button> {# #}
</li> {# #}
<li class="checkbox"> {# #}
<button onclick="toggleElements('applicabilities_filter', false)">None</button> {# #}
<button class="reset-none">None</button> {# #}
</li> {# #}
<li role="separator" class="divider"></li> {# #}
{% for applicability in ["Unspecified", "MachineApplicable", "MaybeIncorrect", "HasPlaceholders"] %}
<li class="checkbox"> {# #}
<label> {# #}
<input type="checkbox" name="{{ applicability }}" checked />
{{ applicability }}
</label> {# #}
</li> {# #}
{% endfor %}
</ul> {# #}
</div> {# #}
</div> {# #}
<div class="search-control"> {# #}
<div class="input-group"> {# #}
<label class="input-group-addon" id="filter-label" for="search-input">Filter:</label> {# #}
<input type="text" class="form-control filter-input" placeholder="Keywords or search string (`S` or `/` to focus)" id="search-input" /> {# #}
<button class="filter-clear" type="button" onclick="searchState.clearInput(event)"> {# #}
<button id="filter-clear" type="button"> {# #}
Clear {# #}
</button> {# #}
</div> {# #}
Expand Down
Loading