| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <title>fidlviz</title> |
| <link rel="shortcut icon" href="favicon.ico"> |
| <link rel="stylesheet" href="style.css"> |
| </head> |
| <body> |
| <div class="controls-container"> |
| <button id="HelpButton" type="button" class="controls-button">Help</button> |
| <button id="DebugButton" type="button" class="controls-button">Debug</button> |
| <button id="ResetButton" type="button" class="controls-button">Reset</button> |
| <button id="LayoutButton" type="button" class="controls-button">Layout</button> |
| </div> |
| <div id="HelpModal" class="modal-container" hidden> |
| <div id="HelpModalContent" class="modal-box"> |
| <h2>Help</h2> |
| <p>Welcome to <b>fidlviz</b>, a web app for visualizing the FIDL wire format.</p> |
| <p>Here are some tips to help you get started:</p> |
| <ul> |
| <li>The <b>input</b> editor is on the left. Enter your FIDL data structures there. If you forget the syntax, click the <b>Reset</b> button to get back the example.</li> |
| <li>The <b>output</b> view is on the right. Initially, this shows bytes. By dragging the slider in the top-right, or using <kbd>Ctrl</kbd><kbd>[</kbd> and <kbd>Ctrl</kbd><kbd>]</kbd>, you can instead view intermediate stages where the input gets <b>lowered</b> to progressively simpler elements.</li> |
| <li>To <b>highlight</b> something, just click on it. Highlighting input will cause the corresponding output to be highlighted too, and vice versa. Click inside curly braces to highlight all contained fields in different colors.</li> |
| <li>Hover over underlined regions of the output to reveal explanatory <b>tooltips</b>. When viewing bytes, there are no underlines because everything has a tooltip.</li> |
| <li>Click the <b>Layout</b> button to switch between the left/right editor layout and the top/bottom one (useful for long lines and narrow windows).</li> |
| <li>The app <b>autosaves</b> everything to your browser’s local storage. You can always start fresh by clicking the <b>Reset</b> button.</li> |
| <li>To <b>close</b> this help window, press <kbd>Esc</kbd> or <kbd>Enter</kbd>.</li> |
| </ul> |
| <p>Enjoy! If you find a bug, please report it to mkember@google.com.</p> |
| <hr> |
| <p><i>If you like <b>fidlviz</b>, you might also like <a href="https://fidlbolt-6jq5tlqt6q-uc.a.run.app/"><b>fidlbolt</b></a></i>.</p> |
| </div> |
| </div> |
| <div class="wrapper"> |
| <div class="heading"> |
| <h1><span class="heading-fidl">fidl</span><span class="heading-viz">viz</span></h1> |
| </div> |
| <div id="Container" class="container" hidden> |
| <div id="SplitContainer" class="split-container split-container--vertical"> |
| <div id="InputPart" class="split-item split-item--first"> |
| <div id="InputEditor" class="editor"></div> |
| </div> |
| <div id="Splitter" class="split-splitter split-splitter--vertical"></div> |
| <div id="OutputPart" class="split-item split-item--second"> |
| <div class="part-header"> |
| <h2 id="OutputTitle" class="part-title"> </h2> |
| <input id="OutputSlider" class="slider" |
| type="range" min="1" max="8" |
| value="8" list="Tickmarks"> |
| </div> |
| <div id="OutputEditor" class="editor"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div id="OutputTooltip" class="tooltip" hidden></div> |
| <datalist id="Tickmarks"> |
| <option value="1"></option> |
| <option value="2"></option> |
| <option value="3"></option> |
| <option value="4"></option> |
| <option value="5"></option> |
| <option value="6"></option> |
| <option value="7"></option> |
| <option value="8"></option> |
| </datalist> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.8/ace.js"></script> |
| <script src="script.js"></script> |
| </body> |
| </html> |
