ugui-devtools.htm

<!--
  In case the user doesn't want to use the supplied style.css,
  the developer toolbar will still render properly
-->
<link rel="stylesheet" href="_style/ugui-devtools.css">

<div id="uguiDevTools" class="slideHide">



  <nav>
    <span data-nav="uguiAbout">About</span>
    <span data-nav="uguiSwapper">Style Swapper</span>
    <span data-nav="uguiShortcuts">Shortcuts</span>
    <span data-nav="uguiCommand">CMD Output</span>
    <span data-nav="uguiExecutable">Executable Info</span>
  </nav>



  <section class="uguiAbout">
    <a href="http://ugui.io/tutorials/getting-started.htm" class="external-link"><img src="_img/ugui.png" alt="UGUI Logo" title="Watch the Getting Started video."></a>
    <h3>UGUI Developer Tools</h3>
    <p>Watch <a href="http://ugui.io/tutorials/getting-started.htm" class="external-link">the UGUI Introduction video</a> in fullscreen.</p>
    <p>To hide the UGUI Developer Tools change the <code>&lt;body role="document" class="dev"&gt;</code> to <code>&lt;body role="document" class="prod"&gt;</code>.</p>
    <p>You are using version <span class="versionUGUI">1.2.0</span> of UGUI.</p>
  </section>



  <section class="uguiCommand">
    <span>Select an executable to preview its output.</span>
    <select class="executableName"></select>
    <pre id="commandLine"></pre>
  </section>



  <section class="uguiShortcuts">
    <p>Active key bindings while in developer mode:</p>
    <ul>
      <li><strong>F5</strong> Soft Refresh</li>
      <li><strong>Shift+F5</strong> or <strong>CMD+Shift+R</strong> Refresh ignoring cache</li>
      <li><strong>CTRL+F5</strong> or <strong>CTRL+R</strong> or <strong>CMD+R</strong> Hard Refresh</li>
      <li><strong>F12</strong> or <strong>CTRL+Shift+I</strong> Open Webkit's Developer Tools</li>
    </ul>
  </section>



  <section class="uguiSwapper">
    <p>Test out different looks for your application. Click 'Keep' to use the currently display style</p>
    <select id="swatchSwapper"></select>
    <button id="setNewSwatch">Keep</button>
    <span class="newSwatchSaved">Saved</span>
  </section>



  <section class="uguiExecutable">
    <div class="helpIntro">Get information from your executable.
      <select class="executableName"></select>
      <select class="helpDropdown">
        <option></option>
        <option value="/?">/?</option>
        <option value="-?">-?</option>
        <option value="--?">--?</option>
        <option value="/help">/help</option>
        <option value="-help">-help</option>
        <option value="--help">--help</option>
        <option value="/about">/about</option>
        <option value="-about">-about</option>
        <option value="--about">--about</option>
        <option value="/h">/h</option>
        <option value="-h">-h</option>
        <option value="--h">--h</option>
      </select>
    </div>
    <pre class="executableHelp"></pre>
  </section>



</div>