openvibers/openvibe.live Commits

broadcast.css loads with the broadcast desk and the dashboard, not on every page (#683)

OP OpenVibers committed 6 days ago · 51bb1e601f · 3 files, +29 −5

It styles the go-live desk (bc-*) and the dashboard's settings rows; every other page fetched its 11 KB for
nothing. features.json → broadcast and → dashboard list it, so those routes get it in their first response and on
an in-place move; index.html drops it (11-07: 'make things faster and more optimized').

Changes

ddiff --git a/public/features.json b/public/features.json
iindex da5c2adc..49ec0f69 100644
---- a/public/features.json
++++ b/public/features.json
@@@ -235,7 +235,8 @@
      "broadcast": {
        "fragment": "broadcast",
        "css": [
--        "/css/features/broadcast.css"
++        "/css/features/broadcast.css",
++        "/css/broadcast.css"
        ],
        "deps": [
          "money",
@@@ -292,7 +293,8 @@
      "dashboard": {
        "fragment": "dashboard",
        "css": [
--        "/css/features/dashboard.css"
++        "/css/features/dashboard.css",
++        "/css/broadcast.css"
        ],
        "deps": [
          "money",
ddiff --git a/public/index.html b/public/index.html
iindex 8ea43be1..9546f000 100644
---- a/public/index.html
++++ b/public/index.html
@@@ -107,7 +107,7 @@
  
      <!-- Stylesheets.
           Blocking set = what the home page paints with. Everything else belongs to another route
--         (the broadcast desk, the messenger, the cosmetics modal, after-show reports, the guide
++         (the messenger, the cosmetics modal, after-show reports, the guide
           overlay) and is fetched without blocking the first paint: media="print" makes the browser
           treat it as non-critical, and the onload flips it back to all once it has arrived. -->
      <link rel="stylesheet" href="/css/style.css">
@@@ -119,12 +119,10 @@
      <link rel="stylesheet" href="/css/i18n-star.css">
      <!-- chat-shared.css belongs to the chat (features.json → chatUI): the pages that have chat ask
           for it there, and a page without chat does not download it. -->
--    <link rel="stylesheet" href="/css/broadcast.css" media="print" onload="this.media='all';this.onload=null">
      <link rel="stylesheet" href="/css/cosmetics.css" media="print" onload="this.media='all';this.onload=null">
      <noscript>
          <!-- Without JavaScript the chat never fills, but the pages that have one still show it. -->
          <link rel="stylesheet" href="/css/chat-shared.css">
--        <link rel="stylesheet" href="/css/broadcast.css">
          <link rel="stylesheet" href="/css/cosmetics.css">
      </noscript>
      
ddiff --git a/test/broadcast-css-on-demand.test.js b/test/broadcast-css-on-demand.test.js
nnew file mode 100644
iindex 00000000..735259bc
---- /dev/null
++++ b/test/broadcast-css-on-demand.test.js
@@@ -0,0 +1,24 @@
++'use strict';
++/**
++ * /css/broadcast.css (the broadcast desk's styles, 11 KB) is not on every page (11-07, the owner: "make things faster
++ * and more optimized"): the broadcast desk and the dashboard (its settings rows) bring it through features.json.
++ *   node test/broadcast-css-on-demand.test.js
++ */
++const assert = require('assert');
++const fs = require('fs');
++const path = require('path');
++
++const pub = (p) => fs.readFileSync(path.join(__dirname, '..', 'public', p), 'utf8');
++const html = pub('index.html');
++const reg = JSON.parse(pub('features.json')).features;
++
++assert.ok(!/<link[^>]+href="\/css\/broadcast\.css"/.test(html), 'broadcast.css is not on every page');
++assert.ok(reg.broadcast.css.includes('/css/broadcast.css'), 'the broadcast desk brings it');
++assert.ok(reg.dashboard.css.includes('/css/broadcast.css'), 'the dashboard brings it (its settings rows)');
++// What it styles outside the desk: the dashboard's settings rows, and nothing else in the shared shell.
++assert.ok(pub('fragments/dashboard.html').includes('settings-row-content'), 'the dashboard still uses its settings rows');
++for (const cls of ['bc-camera-sheet', 'settings-row-content']) {
++    assert.ok(!html.includes(cls), `${cls} is not in the shared shell`);
++}
++
++console.log('broadcast css on demand: only the broadcast desk and the dashboard load broadcast.css');