base.html: Drop dependency on modernizr.js library

- The library performs a large number of tests to determine if various features
are available in the browser. In Debian most tests seem to be present unlike
other methods of distribution where users select which tests they want and build
a customized library for their app. This leads to increased page load time.

- The only functionality we use from Modernizr library are the .js and .no-js
classes we use in our CSS styling. Modernizr is not needed by Bootstrap library.
We don't use 'Modernizr.' properties in Javascript.

- A bug in the test to determine if an <input> element with type="number" allows
localization or not causes the page to scroll down to the end. This behavior
appeared in version 3.x of modernizr and despite the bug report and the fix, it
is not gone. Dropping modernizr fixes this issue.

Tests:

- The logout link in the header bar is visible only when Javascript is disabled.

- The dropdown icons next to header menus only appear when Javascript is
enabled.

- For each feature detection provided by Modernizr library, search if our
project is using that in CSS styling.

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
This commit is contained in:
Sunil Mohan Adapa 2024-08-05 13:55:07 -07:00 committed by Veiko Aasa
parent 9af026c47c
commit 7ba559a8a9
No known key found for this signature in database
GPG Key ID: 478539CAE680674E
4 changed files with 12 additions and 11 deletions

1
debian/control vendored
View File

@ -101,7 +101,6 @@ Depends:
libglib2.0-bin,
libjs-bootstrap4,
libjs-jquery,
libjs-modernizr,
lsof,
netcat-openbsd,
network-manager,

View File

@ -7,7 +7,7 @@
{% endcomment %}
<!doctype html>
<html class="no-js" lang="en">
<!-- the "no-js" class is for Modernizr -->
<!-- the "no-js" class will be removed if Javascript is turned on -->
<head>
<meta charset="utf-8" />
@ -54,8 +54,6 @@
<link rel="stylesheet" href="{% static '/javascript/bootstrap4/css/bootstrap.min.css' %}"/>
<link rel="stylesheet" href="{% static '/javascript/fork-awesome/css/fork-awesome.css' %}"/>
<link rel="stylesheet" href="{% static 'theme/css/main.css' %}"/>
<!-- Local link to system Modernizr (includes HTML5 Shiv) -->
<script type="text/javascript" src="{% static '/javascript/modernizr/modernizr.min.js' %}" defer></script>
<!-- Local link to system jQuery -->
<!-- TODO Deferring jQuery is causing scripts to be loaded before jQuery is available -->
<script type="text/javascript" src="{% static '/javascript/jquery/jquery.min.js' %}"></script>

View File

@ -25,13 +25,6 @@
<td><a href="https://salsa.debian.org/js-team/twitter-bootstrap3.git">
twitter-bootstap3</a></td>
</tr>
<tr>
<td><a href="/javascript/modernizr/modernizr.min.js">
modernizr.min.js</a></td>
<td><a href="http://www.jclark.com/xml/copying.txt">Expat</a></td>
<td><a href="https://salsa.debian.org/js-team/modernizr.git">
modernizr</a></td>
</tr>
<tr>
<td><a href="/plinth/static/jsxc/jsxc-plinth.js">jsxc-plinth.js</a></td>
<td>

View File

@ -22,6 +22,17 @@
for the JavaScript code in this page.
*/
/*
* Remove the 'no-js' class from the <body> element. CSS utilizing this can
* create different rules when Javascript is available and when it is not. This
* functionality was provided by the Modernizr library earlier.
*/
document.addEventListener('DOMContentLoaded', function(event) {
const html = document.querySelector('html');
html.classList.remove('no-js');
html.classList.add('js');
});
/*
* Refresh page if marked for refresh.
*/