1313 />
1414
1515
16- < link rel ="stylesheet " href ="https://ferretlang.org/sass/main.min.b6274c8e064afdffeb87759f850eed1ac07728186d952c9a8ab65442c58f8e9e .css " />
16+ < link rel ="stylesheet " href ="https://ferretlang.org/sass/main.min.c6df3663e03c0f922f353580f31b35a551d999dfcb6ed296d6159d1bcc9af8fb .css " />
1717
1818 < link rel ="icon " type ="image/png " href ="/favicon/favicon-96x96.png " sizes ="96x96 " />
1919 < link rel ="icon " type ="image/svg+xml " href ="/favicon/favicon.svg " />
@@ -197,30 +197,36 @@ <h2 id="assertion-library">Assertion library</h2>
197197 </ div >
198198 </ div >
199199
200- < div id ="code-editor-1-grid " class ="code-editor-grid " style ="grid-template-columns: 1fr; ">
201- < div id ="code-editor-1-source-pane " class ="code-editor-pane code-editor-pane-source ">
202- < div class ="code-editor-pane-header ">
203- < span > query.fql</ span >
204- < span > FQL</ span >
205- </ div >
206- < div id ="code-editor-1-text " class ="code-editor-text " style ="height: 190px; "> LET doc = DOCUMENT('https://github.com/', { driver: "cdp" })
200+ < div class ="code-editor-stage ">
201+ < div id ="code-editor-1-grid " class ="code-editor-grid " style ="grid-template-columns: 1fr; ">
202+ < div id ="code-editor-1-source-pane " class ="code-editor-pane code-editor-pane-source ">
203+ < div class ="code-editor-pane-header ">
204+ < span > query.fql</ span >
205+ < span > FQL</ span >
206+ </ div >
207+ < div id ="code-editor-1-text " class ="code-editor-text " style ="height: 190px; "> LET doc = DOCUMENT('https://github.com/', { driver: "cdp" })
207208
208209T::TRUE(ELEMENT_EXISTS(doc, "#user[login]"))
209210T::TRUE(ELEMENT_EXISTS(doc, "#user[email]"))
210211T::TRUE(ELEMENT_EXISTS(doc, "#user[password]"))
211212
212213RETURN NONE</ div >
213- </ div >
214+ </ div >
214215
215- < div id ="code-editor-1-result-pane " class ="code-editor-pane code-editor-pane-result " hidden >
216- < div class ="code-editor-pane-header ">
217- < span > result.json</ span >
218- < div class ="code-editor-pane-header-actions ">
219- < span > output</ span >
220- < button id ="code-editor-1-result-close-button " class ="code-editor-pane-button " type ="button " aria-controls ="code-editor-1-result-pane "> Close</ button >
216+ < div id ="code-editor-1-result-pane " class ="code-editor-pane code-editor-pane-result " hidden >
217+ < div class ="code-editor-pane-header ">
218+ < span > result.json</ span >
219+ < div class ="code-editor-pane-header-actions ">
220+ < span > output</ span >
221+ < button id ="code-editor-1-result-close-button " class ="code-editor-pane-button " type ="button " aria-controls ="code-editor-1-result-pane "> Close</ button >
222+ </ div >
221223 </ div >
224+ < div id ="code-editor-1-result " class ="code-editor-result " style ="height: 190px; "> </ div >
222225 </ div >
223- < div id ="code-editor-1-result " class ="code-editor-result " style ="height: 190px; "> </ div >
226+ </ div >
227+ < div id ="code-editor-1-loader " class ="code-editor-loader " role ="status " aria-live ="polite " aria-atomic ="true " hidden >
228+ < span class ="code-editor-loader-spinner " aria-hidden ="true "> </ span >
229+ < span > Running</ span >
224230 </ div >
225231 </ div >
226232 </ div >
@@ -246,6 +252,7 @@ <h2 id="assertion-library">Assertion library</h2>
246252 resultEditor . setReadOnly ( true ) ;
247253 const resultExpandBtn = null ;
248254 const editorGrid = document . querySelector ( '#code-editor-1-grid' ) ;
255+ const runLoader = document . querySelector ( '#code-editor-1-loader' ) ;
249256 const resultPane = document . querySelector ( '#code-editor-1-result-pane' ) ;
250257 const resultToggleBtn = document . querySelector ( '#code-editor-1-result-toggle-button' ) ;
251258 const resultCloseBtn = document . querySelector ( '#code-editor-1-result-close-button' ) ;
@@ -308,13 +315,19 @@ <h2 id="assertion-library">Assertion library</h2>
308315 function onStart ( ) {
309316 isRunning = true ;
310317 textEditor . setReadOnly ( true ) ;
318+ runLoader . hidden = false ;
319+ editorGrid . setAttribute ( 'aria-busy' , 'true' ) ;
311320 btn . classList . add ( 'is-loading' ) ;
321+ btn . setAttribute ( 'aria-busy' , 'true' ) ;
312322 }
313323
314324 function onEnd ( result ) {
315325 isRunning = false ;
316326 textEditor . setReadOnly ( false ) ;
327+ runLoader . hidden = true ;
328+ editorGrid . setAttribute ( 'aria-busy' , 'false' ) ;
317329 btn . classList . remove ( 'is-loading' ) ;
330+ btn . setAttribute ( 'aria-busy' , 'false' ) ;
318331
319332 setContent ( resultEditor , result ) ;
320333 setResultVisible ( true ) ;
@@ -409,30 +422,36 @@ <h2 id="new-frames-function">New FRAMES function</h2>
409422 </ div >
410423 </ div >
411424
412- < div id ="code-editor-2-grid " class ="code-editor-grid " style ="grid-template-columns: 1fr; ">
413- < div id ="code-editor-2-source-pane " class ="code-editor-pane code-editor-pane-source ">
414- < div class ="code-editor-pane-header ">
415- < span > query.fql</ span >
416- < span > FQL</ span >
417- </ div >
418- < div id ="code-editor-2-text " class ="code-editor-text " style ="height: 190px; "> LET page = DOCUMENT('https://mockery.ferretlang.org/scenarios/iframes/', {
425+ < div class ="code-editor-stage ">
426+ < div id ="code-editor-2-grid " class ="code-editor-grid " style ="grid-template-columns: 1fr; ">
427+ < div id ="code-editor-2-source-pane " class ="code-editor-pane code-editor-pane-source ">
428+ < div class ="code-editor-pane-header ">
429+ < span > query.fql</ span >
430+ < span > FQL</ span >
431+ </ div >
432+ < div id ="code-editor-2-text " class ="code-editor-text " style ="height: 190px; "> LET page = DOCUMENT('https://mockery.ferretlang.org/scenarios/iframes/', {
419433 driver: 'cdp'
420434})
421435
422436LET frame = FRAMES(page, "url", "https://mockery.ferretlang.org/")
423437
424438RETURN FIRST(frame).url</ div >
425- </ div >
439+ </ div >
426440
427- < div id ="code-editor-2-result-pane " class ="code-editor-pane code-editor-pane-result " hidden >
428- < div class ="code-editor-pane-header ">
429- < span > result.json</ span >
430- < div class ="code-editor-pane-header-actions ">
431- < span > output</ span >
432- < button id ="code-editor-2-result-close-button " class ="code-editor-pane-button " type ="button " aria-controls ="code-editor-2-result-pane "> Close</ button >
441+ < div id ="code-editor-2-result-pane " class ="code-editor-pane code-editor-pane-result " hidden >
442+ < div class ="code-editor-pane-header ">
443+ < span > result.json</ span >
444+ < div class ="code-editor-pane-header-actions ">
445+ < span > output</ span >
446+ < button id ="code-editor-2-result-close-button " class ="code-editor-pane-button " type ="button " aria-controls ="code-editor-2-result-pane "> Close</ button >
447+ </ div >
433448 </ div >
449+ < div id ="code-editor-2-result " class ="code-editor-result " style ="height: 190px; "> </ div >
434450 </ div >
435- < div id ="code-editor-2-result " class ="code-editor-result " style ="height: 190px; "> </ div >
451+ </ div >
452+ < div id ="code-editor-2-loader " class ="code-editor-loader " role ="status " aria-live ="polite " aria-atomic ="true " hidden >
453+ < span class ="code-editor-loader-spinner " aria-hidden ="true "> </ span >
454+ < span > Running</ span >
436455 </ div >
437456 </ div >
438457 </ div >
@@ -458,6 +477,7 @@ <h2 id="new-frames-function">New FRAMES function</h2>
458477 resultEditor . setReadOnly ( true ) ;
459478 const resultExpandBtn = null ;
460479 const editorGrid = document . querySelector ( '#code-editor-2-grid' ) ;
480+ const runLoader = document . querySelector ( '#code-editor-2-loader' ) ;
461481 const resultPane = document . querySelector ( '#code-editor-2-result-pane' ) ;
462482 const resultToggleBtn = document . querySelector ( '#code-editor-2-result-toggle-button' ) ;
463483 const resultCloseBtn = document . querySelector ( '#code-editor-2-result-close-button' ) ;
@@ -520,13 +540,19 @@ <h2 id="new-frames-function">New FRAMES function</h2>
520540 function onStart ( ) {
521541 isRunning = true ;
522542 textEditor . setReadOnly ( true ) ;
543+ runLoader . hidden = false ;
544+ editorGrid . setAttribute ( 'aria-busy' , 'true' ) ;
523545 btn . classList . add ( 'is-loading' ) ;
546+ btn . setAttribute ( 'aria-busy' , 'true' ) ;
524547 }
525548
526549 function onEnd ( result ) {
527550 isRunning = false ;
528551 textEditor . setReadOnly ( false ) ;
552+ runLoader . hidden = true ;
553+ editorGrid . setAttribute ( 'aria-busy' , 'false' ) ;
529554 btn . classList . remove ( 'is-loading' ) ;
555+ btn . setAttribute ( 'aria-busy' , 'false' ) ;
530556
531557 setContent ( resultEditor , result ) ;
532558 setResultVisible ( true ) ;
@@ -620,13 +646,14 @@ <h2 id="iframe-navigation-handling">iFrame navigation handling</h2>
620646 </ div >
621647 </ div >
622648
623- < div id ="code-editor-3-grid " class ="code-editor-grid " style ="grid-template-columns: 1fr; ">
624- < div id ="code-editor-3-source-pane " class ="code-editor-pane code-editor-pane-source ">
625- < div class ="code-editor-pane-header ">
626- < span > query.fql</ span >
627- < span > FQL</ span >
628- </ div >
629- < div id ="code-editor-3-text " class ="code-editor-text " style ="height: 580px; "> LET page = DOCUMENT('https://mockery.ferretlang.org/scenarios/iframes/', {
649+ < div class ="code-editor-stage ">
650+ < div id ="code-editor-3-grid " class ="code-editor-grid " style ="grid-template-columns: 1fr; ">
651+ < div id ="code-editor-3-source-pane " class ="code-editor-pane code-editor-pane-source ">
652+ < div class ="code-editor-pane-header ">
653+ < span > query.fql</ span >
654+ < span > FQL</ span >
655+ </ div >
656+ < div id ="code-editor-3-text " class ="code-editor-text " style ="height: 580px; "> LET page = DOCUMENT('https://mockery.ferretlang.org/scenarios/iframes/', {
630657 driver: 'cdp'
631658})
632659
@@ -660,17 +687,22 @@ <h2 id="iframe-navigation-handling">iFrame navigation handling</h2>
660687LET innerPage3 = FIRST(FRAMES(page, "url", targetURL))
661688
662689RETURN INNER_TEXT(innerPage3, ".content")</ div >
663- </ div >
690+ </ div >
664691
665- < div id ="code-editor-3-result-pane " class ="code-editor-pane code-editor-pane-result " hidden >
666- < div class ="code-editor-pane-header ">
667- < span > result.json</ span >
668- < div class ="code-editor-pane-header-actions ">
669- < span > output</ span >
670- < button id ="code-editor-3-result-close-button " class ="code-editor-pane-button " type ="button " aria-controls ="code-editor-3-result-pane "> Close</ button >
692+ < div id ="code-editor-3-result-pane " class ="code-editor-pane code-editor-pane-result " hidden >
693+ < div class ="code-editor-pane-header ">
694+ < span > result.json</ span >
695+ < div class ="code-editor-pane-header-actions ">
696+ < span > output</ span >
697+ < button id ="code-editor-3-result-close-button " class ="code-editor-pane-button " type ="button " aria-controls ="code-editor-3-result-pane "> Close</ button >
698+ </ div >
671699 </ div >
700+ < div id ="code-editor-3-result " class ="code-editor-result " style ="height: 580px; "> </ div >
672701 </ div >
673- < div id ="code-editor-3-result " class ="code-editor-result " style ="height: 580px; "> </ div >
702+ </ div >
703+ < div id ="code-editor-3-loader " class ="code-editor-loader " role ="status " aria-live ="polite " aria-atomic ="true " hidden >
704+ < span class ="code-editor-loader-spinner " aria-hidden ="true "> </ span >
705+ < span > Running</ span >
674706 </ div >
675707 </ div >
676708 </ div >
@@ -696,6 +728,7 @@ <h2 id="iframe-navigation-handling">iFrame navigation handling</h2>
696728 resultEditor . setReadOnly ( true ) ;
697729 const resultExpandBtn = null ;
698730 const editorGrid = document . querySelector ( '#code-editor-3-grid' ) ;
731+ const runLoader = document . querySelector ( '#code-editor-3-loader' ) ;
699732 const resultPane = document . querySelector ( '#code-editor-3-result-pane' ) ;
700733 const resultToggleBtn = document . querySelector ( '#code-editor-3-result-toggle-button' ) ;
701734 const resultCloseBtn = document . querySelector ( '#code-editor-3-result-close-button' ) ;
@@ -758,13 +791,19 @@ <h2 id="iframe-navigation-handling">iFrame navigation handling</h2>
758791 function onStart ( ) {
759792 isRunning = true ;
760793 textEditor . setReadOnly ( true ) ;
794+ runLoader . hidden = false ;
795+ editorGrid . setAttribute ( 'aria-busy' , 'true' ) ;
761796 btn . classList . add ( 'is-loading' ) ;
797+ btn . setAttribute ( 'aria-busy' , 'true' ) ;
762798 }
763799
764800 function onEnd ( result ) {
765801 isRunning = false ;
766802 textEditor . setReadOnly ( false ) ;
803+ runLoader . hidden = true ;
804+ editorGrid . setAttribute ( 'aria-busy' , 'false' ) ;
767805 btn . classList . remove ( 'is-loading' ) ;
806+ btn . setAttribute ( 'aria-busy' , 'false' ) ;
768807
769808 setContent ( resultEditor , result ) ;
770809 setResultVisible ( true ) ;
0 commit comments