Fossil SCM

Added style_emit_noscript_for_js_page() to emit a NOSCRIPT tag and an error message if JS is not available, and call it from the pages which *required* JS in order to work. Added a note about potential browser-induced SVG blurring when using the pikchrshow dark mode option.

stephan 2020-09-12 06:13 trunk
Commit 070716d835efaeb54be98f95a00451f0dc7845535693833712bef41796a31c44
Parent c92ff2daef6fdbe…
6 files changed +6 +1 +6 -2 +3 -3 +12 +1
~ src/default.css ~ src/fileedit.c ~ src/fossil.page.pikchrshow.js ~ src/pikchrshow.c ~ src/style.c ~ src/wiki.c
M src/default.css
+6
--- src/default.css
+++ src/default.css
@@ -1378,5 +1378,11 @@
13781378
 .fossil-tooltip.help-buttonlet-content {
13791379
 cursor: default;
13801380
 text-align: left;
13811381
 border-style: outset;
13821382
 }
1383
+
1384
+noscript > .error {
1385
+ /* Part of the style_emit_noscript_for_js_page() interface. */
1386
+ padding: 1em;
1387
+ font-size: 150%;
1388
+}
13831389
--- src/default.css
+++ src/default.css
@@ -1378,5 +1378,11 @@
1378 .fossil-tooltip.help-buttonlet-content {
1379 cursor: default;
1380 text-align: left;
1381 border-style: outset;
1382 }
 
 
 
 
 
 
1383
--- src/default.css
+++ src/default.css
@@ -1378,5 +1378,11 @@
1378 .fossil-tooltip.help-buttonlet-content {
1379 cursor: default;
1380 text-align: left;
1381 border-style: outset;
1382 }
1383
1384 noscript > .error {
1385 /* Part of the style_emit_noscript_for_js_page() interface. */
1386 padding: 1em;
1387 font-size: 150%;
1388 }
1389
M src/fileedit.c
+1
--- src/fileedit.c
+++ src/fileedit.c
@@ -1633,10 +1633,11 @@
16331633
 }
16341634
16351635
 db_begin_transaction();
16361636
 CheckinMiniInfo_init(&cimi);
16371637
 style_header("File Editor");
1638
+ style_emit_noscript_for_js_page();
16381639
 /* As of this point, don't use return or fossil_fatal(). Write any
16391640
 ** error in (&err) and goto end_footer instead so that we can be
16401641
 ** sure to emit the error message, do any cleanup, and end the
16411642
 ** transaction cleanly.
16421643
 */
16431644
--- src/fileedit.c
+++ src/fileedit.c
@@ -1633,10 +1633,11 @@
1633 }
1634
1635 db_begin_transaction();
1636 CheckinMiniInfo_init(&cimi);
1637 style_header("File Editor");
 
1638 /* As of this point, don't use return or fossil_fatal(). Write any
1639 ** error in (&err) and goto end_footer instead so that we can be
1640 ** sure to emit the error message, do any cleanup, and end the
1641 ** transaction cleanly.
1642 */
1643
--- src/fileedit.c
+++ src/fileedit.c
@@ -1633,10 +1633,11 @@
1633 }
1634
1635 db_begin_transaction();
1636 CheckinMiniInfo_init(&cimi);
1637 style_header("File Editor");
1638 style_emit_noscript_for_js_page();
1639 /* As of this point, don't use return or fossil_fatal(). Write any
1640 ** error in (&err) and goto end_footer instead so that we can be
1641 ** sure to emit the error message, do any cleanup, and end the
1642 ** transaction cleanly.
1643 */
1644
M src/fossil.page.pikchrshow.js
+6 -2
--- src/fossil.page.pikchrshow.js
+++ src/fossil.page.pikchrshow.js
@@ -138,15 +138,19 @@
138138
 D.append(
139139
 P.e.uiControls,
140140
 D.append(
141141
 P.e.cbDarkMode.parentNode/*the .input-with-label element*/,
142142
 F.helpButtonlets.create(
143
- D.span(),
143
+ D.div(),
144144
 'Dark mode changes the colors of rendered SVG to ',
145145
 'make them more visible in dark-themed skins. ',
146146
 'This only changes (using CSS) how they are rendered, ',
147
- 'not any actual colors written in the script.'
147
+ 'not any actual colors written in the script.',
148
+ D.br(), D.br(),
149
+ 'In some color combinations, certain browsers might ',
150
+ 'cause the SVG image to blur considerably with this ',
151
+ 'setting enabled!'
148152
 )
149153
 )
150154
 );
151155
152156
 ////////////////////////////////////////////////////////////
153157
--- src/fossil.page.pikchrshow.js
+++ src/fossil.page.pikchrshow.js
@@ -138,15 +138,19 @@
138 D.append(
139 P.e.uiControls,
140 D.append(
141 P.e.cbDarkMode.parentNode/*the .input-with-label element*/,
142 F.helpButtonlets.create(
143 D.span(),
144 'Dark mode changes the colors of rendered SVG to ',
145 'make them more visible in dark-themed skins. ',
146 'This only changes (using CSS) how they are rendered, ',
147 'not any actual colors written in the script.'
 
 
 
 
148 )
149 )
150 );
151
152 ////////////////////////////////////////////////////////////
153
--- src/fossil.page.pikchrshow.js
+++ src/fossil.page.pikchrshow.js
@@ -138,15 +138,19 @@
138 D.append(
139 P.e.uiControls,
140 D.append(
141 P.e.cbDarkMode.parentNode/*the .input-with-label element*/,
142 F.helpButtonlets.create(
143 D.div(),
144 'Dark mode changes the colors of rendered SVG to ',
145 'make them more visible in dark-themed skins. ',
146 'This only changes (using CSS) how they are rendered, ',
147 'not any actual colors written in the script.',
148 D.br(), D.br(),
149 'In some color combinations, certain browsers might ',
150 'cause the SVG image to blur considerably with this ',
151 'setting enabled!'
152 )
153 )
154 );
155
156 ////////////////////////////////////////////////////////////
157
M src/pikchrshow.c
+3 -3
--- src/pikchrshow.c
+++ src/pikchrshow.c
@@ -30,11 +30,11 @@
3030
 ** with pikchr code or prototype it for use in copy/pasting into forum
3131
 ** posts, wiki pages, or embedded docs.
3232
 */
3333
 void pikchrshow_page(void){
3434
 const char *zContent = 0;
35
- int isDark, flipColors;
35
+ int isDark; /* true if the current skin is "dark" */
3636
3737
 login_check_credentials();
3838
 if( !g.perm.RdWiki && !g.perm.Read && !g.perm.RdForum ){
3939
 cgi_redirectf("%s/login?g=%s/pikchrshow", g.zTop, g.zTop);
4040
 }
@@ -57,12 +57,12 @@
5757
 }else{
5858
 CX("<pre>No content! Nothing to render</pre>");
5959
 }
6060
 return;
6161
 }
62
+ style_emit_noscript_for_js_page();
6263
 isDark = skin_detail_boolean("white-foreground");
63
- flipColors = zContent ? P("flipcolors")!=0 : isDark;
6464
 if(!zContent){
6565
 zContent = "arrow right 200% \"Markdown\" \"Source\"\n"
6666
 "box rad 10px \"Markdown\" \"Formatter\" \"(markdown.c)\" fit\n"
6767
 "arrow right 200% \"HTML+SVG\" \"Output\"\n"
6868
 "arrow <-> down from last box.s\n"
@@ -128,11 +128,11 @@
128128
 zContent/*safe-for-%s*/);
129129
 CX("<div id='pikchrshow-controls'>");
130130
 CX("<button id='pikchr-submit-preview'>Preview</button>");
131131
 style_labeled_checkbox("flipcolors-wrapper", "flipcolors",
132132
 "Dark mode?",
133
- "1", flipColors, 0);
133
+ "1", isDark, 0);
134134
 CX("</div>"/*#pikchrshow-controls*/);
135135
 CX("</div>"/*#pikchrshow-form*/);
136136
 CX("<fieldset id='pikchrshow-output-wrapper'>");
137137
 CX("<legend></legend>"
138138
 /* Reminder: Firefox does not properly flexbox a LEGEND element,
139139
--- src/pikchrshow.c
+++ src/pikchrshow.c
@@ -30,11 +30,11 @@
30 ** with pikchr code or prototype it for use in copy/pasting into forum
31 ** posts, wiki pages, or embedded docs.
32 */
33 void pikchrshow_page(void){
34 const char *zContent = 0;
35 int isDark, flipColors;
36
37 login_check_credentials();
38 if( !g.perm.RdWiki && !g.perm.Read && !g.perm.RdForum ){
39 cgi_redirectf("%s/login?g=%s/pikchrshow", g.zTop, g.zTop);
40 }
@@ -57,12 +57,12 @@
57 }else{
58 CX("<pre>No content! Nothing to render</pre>");
59 }
60 return;
61 }
 
62 isDark = skin_detail_boolean("white-foreground");
63 flipColors = zContent ? P("flipcolors")!=0 : isDark;
64 if(!zContent){
65 zContent = "arrow right 200% \"Markdown\" \"Source\"\n"
66 "box rad 10px \"Markdown\" \"Formatter\" \"(markdown.c)\" fit\n"
67 "arrow right 200% \"HTML+SVG\" \"Output\"\n"
68 "arrow <-> down from last box.s\n"
@@ -128,11 +128,11 @@
128 zContent/*safe-for-%s*/);
129 CX("<div id='pikchrshow-controls'>");
130 CX("<button id='pikchr-submit-preview'>Preview</button>");
131 style_labeled_checkbox("flipcolors-wrapper", "flipcolors",
132 "Dark mode?",
133 "1", flipColors, 0);
134 CX("</div>"/*#pikchrshow-controls*/);
135 CX("</div>"/*#pikchrshow-form*/);
136 CX("<fieldset id='pikchrshow-output-wrapper'>");
137 CX("<legend></legend>"
138 /* Reminder: Firefox does not properly flexbox a LEGEND element,
139
--- src/pikchrshow.c
+++ src/pikchrshow.c
@@ -30,11 +30,11 @@
30 ** with pikchr code or prototype it for use in copy/pasting into forum
31 ** posts, wiki pages, or embedded docs.
32 */
33 void pikchrshow_page(void){
34 const char *zContent = 0;
35 int isDark; /* true if the current skin is "dark" */
36
37 login_check_credentials();
38 if( !g.perm.RdWiki && !g.perm.Read && !g.perm.RdForum ){
39 cgi_redirectf("%s/login?g=%s/pikchrshow", g.zTop, g.zTop);
40 }
@@ -57,12 +57,12 @@
57 }else{
58 CX("<pre>No content! Nothing to render</pre>");
59 }
60 return;
61 }
62 style_emit_noscript_for_js_page();
63 isDark = skin_detail_boolean("white-foreground");
 
64 if(!zContent){
65 zContent = "arrow right 200% \"Markdown\" \"Source\"\n"
66 "box rad 10px \"Markdown\" \"Formatter\" \"(markdown.c)\" fit\n"
67 "arrow right 200% \"HTML+SVG\" \"Output\"\n"
68 "arrow <-> down from last box.s\n"
@@ -128,11 +128,11 @@
128 zContent/*safe-for-%s*/);
129 CX("<div id='pikchrshow-controls'>");
130 CX("<button id='pikchr-submit-preview'>Preview</button>");
131 style_labeled_checkbox("flipcolors-wrapper", "flipcolors",
132 "Dark mode?",
133 "1", isDark, 0);
134 CX("</div>"/*#pikchrshow-controls*/);
135 CX("</div>"/*#pikchrshow-form*/);
136 CX("<fieldset id='pikchrshow-output-wrapper'>");
137 CX("<legend></legend>"
138 /* Reminder: Firefox does not properly flexbox a LEGEND element,
139
M src/style.c
+12
--- src/style.c
+++ src/style.c
@@ -1456,5 +1456,17 @@
14561456
 }
14571457
 }else{
14581458
 CX("</script>\n");
14591459
 }
14601460
 }
1461
+
1462
+/*
1463
+** Emits a NOSCRIPT tag with an error message stating that JS is
1464
+** required for the current page. This "should" be called near the top
1465
+** of pages which *require* JS. The inner DIV has the CSS class
1466
+** 'error' and can be styled via a (noscript > .error) CSS selector.
1467
+*/
1468
+void style_emit_noscript_for_js_page(void){
1469
+ CX("<noscript><div class='error'>"
1470
+ "This page requires JavaScript (ES2015, a.k.a. ES6, or newer)."
1471
+ "</div></noscript>");
1472
+}
14611473
--- src/style.c
+++ src/style.c
@@ -1456,5 +1456,17 @@
1456 }
1457 }else{
1458 CX("</script>\n");
1459 }
1460 }
 
 
 
 
 
 
 
 
 
 
 
 
1461
--- src/style.c
+++ src/style.c
@@ -1456,5 +1456,17 @@
1456 }
1457 }else{
1458 CX("</script>\n");
1459 }
1460 }
1461
1462 /*
1463 ** Emits a NOSCRIPT tag with an error message stating that JS is
1464 ** required for the current page. This "should" be called near the top
1465 ** of pages which *require* JS. The inner DIV has the CSS class
1466 ** 'error' and can be styled via a (noscript > .error) CSS selector.
1467 */
1468 void style_emit_noscript_for_js_page(void){
1469 CX("<noscript><div class='error'>"
1470 "This page requires JavaScript (ES2015, a.k.a. ES6, or newer)."
1471 "</div></noscript>");
1472 }
1473
M src/wiki.c
+1
--- src/wiki.c
+++ src/wiki.c
@@ -1126,10 +1126,11 @@
11261126
 login_needed(rid ? g.anon.WrWiki : g.anon.NewWiki);
11271127
 return;
11281128
 }
11291129
 }
11301130
 style_header("Wiki Editor");
1131
+ style_emit_noscript_for_js_page();
11311132
11321133
 /* Status bar */
11331134
 CX("<div id='fossil-status-bar' "
11341135
 "title='Status message area. Double-click to clear them.'>"
11351136
 "Status messages will go here.</div>\n"
11361137
--- src/wiki.c
+++ src/wiki.c
@@ -1126,10 +1126,11 @@
1126 login_needed(rid ? g.anon.WrWiki : g.anon.NewWiki);
1127 return;
1128 }
1129 }
1130 style_header("Wiki Editor");
 
1131
1132 /* Status bar */
1133 CX("<div id='fossil-status-bar' "
1134 "title='Status message area. Double-click to clear them.'>"
1135 "Status messages will go here.</div>\n"
1136
--- src/wiki.c
+++ src/wiki.c
@@ -1126,10 +1126,11 @@
1126 login_needed(rid ? g.anon.WrWiki : g.anon.NewWiki);
1127 return;
1128 }
1129 }
1130 style_header("Wiki Editor");
1131 style_emit_noscript_for_js_page();
1132
1133 /* Status bar */
1134 CX("<div id='fossil-status-bar' "
1135 "title='Status message area. Double-click to clear them.'>"
1136 "Status messages will go here.</div>\n"
1137

Keyboard Shortcuts

Open search /
Next entry (timeline) j
Previous entry (timeline) k
Open focused entry Enter
Show this help ?
Toggle theme Top nav button