Control Panel

control_panel_example.js

(function() {

  var controlPanel = (<r><![CDATA[

    <div id='controlpanel'>
      <h1>First</h1>
      <ul>
        <li>HappyPath</li>
      </ul>
      <h1>Second</h1>
      <ul>
        <li>HappyPath</li>
      </ul>
      <h1>Third</h1>
      <ul>
        <li>HappyPath</li>
      </ul>
    </div>

  ]]></r>).toString();

  var css = (<r><![CDATA[

    <style type='text/css' media='screen'>
        div#controlpanel {  border: 2px solid black; background-color: #ddd; position: fixed; top: 40px; left: 40px; width: 200px; padding: 1em; }      
        div#controlpanel * { font: 1.2em Arial, sans-serif; color: #555;}
        div#controlpanel h1,h2,h3 { font: bold 1.2em Arial, sans-serif; color: black; }
        div#controlpanel ul { padding-left: 1em; }
        div#controlpanel li { cursor: pointer; }
        div#controlpanel li:hover { color:grey; }
    </style>

  ]]></r>).toString();

  $('head').append(css);
  $('body').append(controlPanel);
  $('div.control_panel_loading').remove();

})();

control_panel_gadget.js

javascript:(function(){var%20s=document.createElement('div');s.innerHTML='Loading...';s.style.color='black';s.style.padding='20px';s.style.position='fixed';s.style.zIndex='9999';s.style.fontSize='3em';s.style.border='2px%20solid%20black';s.style.left='40px';s.style.top='40px';s.setAttribute('class','control_panel_loading');s.style.background='white';document.body.appendChild(s);s=document.createElement('script');s.setAttribute('type','text/javascript');s.setAttribute('src','/Scripts/ev.frontEnd/control_panel.js');document.body.appendChild(s);})();