Fossil SCM

Made all tab elements hidden on /fileedit to lessen the impact of FOUC before JS assembles the tabbed interface.

stephan 2020-07-31 18:49 ajax-wiki-editor
Commit 99f288d2a59457d55f7162aea124d3827b1d6b67f141a8f8d49b51276ddad081
Parent 8c9ea224194389c…
1 file changed +15 -6
~ src/fileedit.c
M src/fileedit.c
+15 -6
--- src/fileedit.c
+++ src/fileedit.c
@@ -1650,15 +1650,19 @@
16501650
 /* will be moved into the tab container via JS */);
16511651
16521652
 /* Main tab container... */
16531653
 CX("<div id='fileedit-tabs' class='tab-container'></div>");
16541654
1655
+ /* The .hidden class on the following tab elements is to help lessen
1656
+ the FOUC effect of the tabs before JS re-assembles them. */
1657
+
16551658
 /***** File/version info tab *****/
16561659
 {
16571660
 CX("<div id='fileedit-tab-fileselect' "
16581661
 "data-tab-parent='fileedit-tabs' "
1659
- "data-tab-label='File Info &amp; Selection'"
1662
+ "data-tab-label='File Info &amp; Selection' "
1663
+ "class='hidden'"
16601664
 ">");
16611665
 CX("<fieldset id='file-version-details'>"
16621666
 "<legend>File/Version</legend>"
16631667
 "<div>No file loaded.</div>"
16641668
 "</fieldset>");
@@ -1669,11 +1673,12 @@
16691673
16701674
 /******* Content tab *******/
16711675
 {
16721676
 CX("<div id='fileedit-tab-content' "
16731677
 "data-tab-parent='fileedit-tabs' "
1674
- "data-tab-label='File Content'"
1678
+ "data-tab-label='File Content' "
1679
+ "class='hidden'"
16751680
 ">");
16761681
 CX("<div class='flex-container flex-row child-gap-small'>");
16771682
 CX("<button class='fileedit-content-reload confirmer' "
16781683
 "title='Reload the file from the server, discarding "
16791684
 "any local edits. To help avoid accidental loss of "
@@ -1699,11 +1704,12 @@
16991704
17001705
 /****** Preview tab ******/
17011706
 {
17021707
 CX("<div id='fileedit-tab-preview' "
17031708
 "data-tab-parent='fileedit-tabs' "
1704
- "data-tab-label='Preview'"
1709
+ "data-tab-label='Preview' "
1710
+ "class='hidden'"
17051711
 ">");
17061712
 CX("<div class='fileedit-options flex-container flex-row'>");
17071713
 CX("<button id='btn-preview-refresh' "
17081714
 "data-f-preview-from='fileContent' "
17091715
 /* ^^^ fossil.page[methodName]() OR text source elem ID,
@@ -1761,11 +1767,12 @@
17611767
17621768
 /****** Diff tab ******/
17631769
 {
17641770
 CX("<div id='fileedit-tab-diff' "
17651771
 "data-tab-parent='fileedit-tabs' "
1766
- "data-tab-label='Diff'"
1772
+ "data-tab-label='Diff' "
1773
+ "class='hidden'"
17671774
 ">");
17681775
17691776
 CX("<div class='fileedit-options flex-container flex-row' "
17701777
 "id='fileedit-tab-diff-buttons'>");
17711778
 CX("<button class='sbs'>Side-by-side</button>"
@@ -1793,11 +1800,12 @@
17931800
 }
17941801
17951802
 /****** Commit ******/
17961803
 CX("<div id='fileedit-tab-commit' "
17971804
 "data-tab-parent='fileedit-tabs' "
1798
- "data-tab-label='Commit'"
1805
+ "data-tab-label='Commit' "
1806
+ "class='hidden'"
17991807
 ">");
18001808
 {
18011809
 /******* Commit flags/options *******/
18021810
 CX("<div class='fileedit-options flex-container flex-row'>");
18031811
 style_labeled_checkbox("cb-dry-run",
@@ -1914,11 +1922,12 @@
19141922
 CX("</div>"/*#fileedit-tab-commit*/);
19151923
19161924
 /****** Help/Tips ******/
19171925
 CX("<div id='fileedit-tab-help' "
19181926
 "data-tab-parent='fileedit-tabs' "
1919
- "data-tab-label='Help'"
1927
+ "data-tab-label='Help' "
1928
+ "class='hidden'"
19201929
 ">");
19211930
 {
19221931
 CX("<h1>Help &amp; Tips</h1>");
19231932
 CX("<ul>");
19241933
 CX("<li><strong>Only files matching the <code>fileedit-glob</code> "
19251934
--- src/fileedit.c
+++ src/fileedit.c
@@ -1650,15 +1650,19 @@
1650 /* will be moved into the tab container via JS */);
1651
1652 /* Main tab container... */
1653 CX("<div id='fileedit-tabs' class='tab-container'></div>");
1654
 
 
 
1655 /***** File/version info tab *****/
1656 {
1657 CX("<div id='fileedit-tab-fileselect' "
1658 "data-tab-parent='fileedit-tabs' "
1659 "data-tab-label='File Info &amp; Selection'"
 
1660 ">");
1661 CX("<fieldset id='file-version-details'>"
1662 "<legend>File/Version</legend>"
1663 "<div>No file loaded.</div>"
1664 "</fieldset>");
@@ -1669,11 +1673,12 @@
1669
1670 /******* Content tab *******/
1671 {
1672 CX("<div id='fileedit-tab-content' "
1673 "data-tab-parent='fileedit-tabs' "
1674 "data-tab-label='File Content'"
 
1675 ">");
1676 CX("<div class='flex-container flex-row child-gap-small'>");
1677 CX("<button class='fileedit-content-reload confirmer' "
1678 "title='Reload the file from the server, discarding "
1679 "any local edits. To help avoid accidental loss of "
@@ -1699,11 +1704,12 @@
1699
1700 /****** Preview tab ******/
1701 {
1702 CX("<div id='fileedit-tab-preview' "
1703 "data-tab-parent='fileedit-tabs' "
1704 "data-tab-label='Preview'"
 
1705 ">");
1706 CX("<div class='fileedit-options flex-container flex-row'>");
1707 CX("<button id='btn-preview-refresh' "
1708 "data-f-preview-from='fileContent' "
1709 /* ^^^ fossil.page[methodName]() OR text source elem ID,
@@ -1761,11 +1767,12 @@
1761
1762 /****** Diff tab ******/
1763 {
1764 CX("<div id='fileedit-tab-diff' "
1765 "data-tab-parent='fileedit-tabs' "
1766 "data-tab-label='Diff'"
 
1767 ">");
1768
1769 CX("<div class='fileedit-options flex-container flex-row' "
1770 "id='fileedit-tab-diff-buttons'>");
1771 CX("<button class='sbs'>Side-by-side</button>"
@@ -1793,11 +1800,12 @@
1793 }
1794
1795 /****** Commit ******/
1796 CX("<div id='fileedit-tab-commit' "
1797 "data-tab-parent='fileedit-tabs' "
1798 "data-tab-label='Commit'"
 
1799 ">");
1800 {
1801 /******* Commit flags/options *******/
1802 CX("<div class='fileedit-options flex-container flex-row'>");
1803 style_labeled_checkbox("cb-dry-run",
@@ -1914,11 +1922,12 @@
1914 CX("</div>"/*#fileedit-tab-commit*/);
1915
1916 /****** Help/Tips ******/
1917 CX("<div id='fileedit-tab-help' "
1918 "data-tab-parent='fileedit-tabs' "
1919 "data-tab-label='Help'"
 
1920 ">");
1921 {
1922 CX("<h1>Help &amp; Tips</h1>");
1923 CX("<ul>");
1924 CX("<li><strong>Only files matching the <code>fileedit-glob</code> "
1925
--- src/fileedit.c
+++ src/fileedit.c
@@ -1650,15 +1650,19 @@
1650 /* will be moved into the tab container via JS */);
1651
1652 /* Main tab container... */
1653 CX("<div id='fileedit-tabs' class='tab-container'></div>");
1654
1655 /* The .hidden class on the following tab elements is to help lessen
1656 the FOUC effect of the tabs before JS re-assembles them. */
1657
1658 /***** File/version info tab *****/
1659 {
1660 CX("<div id='fileedit-tab-fileselect' "
1661 "data-tab-parent='fileedit-tabs' "
1662 "data-tab-label='File Info &amp; Selection' "
1663 "class='hidden'"
1664 ">");
1665 CX("<fieldset id='file-version-details'>"
1666 "<legend>File/Version</legend>"
1667 "<div>No file loaded.</div>"
1668 "</fieldset>");
@@ -1669,11 +1673,12 @@
1673
1674 /******* Content tab *******/
1675 {
1676 CX("<div id='fileedit-tab-content' "
1677 "data-tab-parent='fileedit-tabs' "
1678 "data-tab-label='File Content' "
1679 "class='hidden'"
1680 ">");
1681 CX("<div class='flex-container flex-row child-gap-small'>");
1682 CX("<button class='fileedit-content-reload confirmer' "
1683 "title='Reload the file from the server, discarding "
1684 "any local edits. To help avoid accidental loss of "
@@ -1699,11 +1704,12 @@
1704
1705 /****** Preview tab ******/
1706 {
1707 CX("<div id='fileedit-tab-preview' "
1708 "data-tab-parent='fileedit-tabs' "
1709 "data-tab-label='Preview' "
1710 "class='hidden'"
1711 ">");
1712 CX("<div class='fileedit-options flex-container flex-row'>");
1713 CX("<button id='btn-preview-refresh' "
1714 "data-f-preview-from='fileContent' "
1715 /* ^^^ fossil.page[methodName]() OR text source elem ID,
@@ -1761,11 +1767,12 @@
1767
1768 /****** Diff tab ******/
1769 {
1770 CX("<div id='fileedit-tab-diff' "
1771 "data-tab-parent='fileedit-tabs' "
1772 "data-tab-label='Diff' "
1773 "class='hidden'"
1774 ">");
1775
1776 CX("<div class='fileedit-options flex-container flex-row' "
1777 "id='fileedit-tab-diff-buttons'>");
1778 CX("<button class='sbs'>Side-by-side</button>"
@@ -1793,11 +1800,12 @@
1800 }
1801
1802 /****** Commit ******/
1803 CX("<div id='fileedit-tab-commit' "
1804 "data-tab-parent='fileedit-tabs' "
1805 "data-tab-label='Commit' "
1806 "class='hidden'"
1807 ">");
1808 {
1809 /******* Commit flags/options *******/
1810 CX("<div class='fileedit-options flex-container flex-row'>");
1811 style_labeled_checkbox("cb-dry-run",
@@ -1914,11 +1922,12 @@
1922 CX("</div>"/*#fileedit-tab-commit*/);
1923
1924 /****** Help/Tips ******/
1925 CX("<div id='fileedit-tab-help' "
1926 "data-tab-parent='fileedit-tabs' "
1927 "data-tab-label='Help' "
1928 "class='hidden'"
1929 ">");
1930 {
1931 CX("<h1>Help &amp; Tips</h1>");
1932 CX("<ul>");
1933 CX("<li><strong>Only files matching the <code>fileedit-glob</code> "
1934

Keyboard Shortcuts

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