gears - Google Code

Source Path: svn/ trunk/ gears/ inspector/ console.html

r2500

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<!--
Copyright 2008, Google Inc.

Redistribution and use in source and binary forms, with or without 
modification, are permitted provided that the following conditions are met:

 1. Redistributions of source code must retain the above copyright notice, 
    this list of conditions and the following disclaimer.
 2. Redistributions in binary form must reproduce the above copyright notice,
    this list of conditions and the following disclaimer in the documentation
    and/or other materials provided with the distribution.
 3. Neither the name of Google Inc. nor the names of its contributors may be
    used to endorse or promote products derived from this software without
    specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE AUTHOR ``AS IS'' AND ANY EXPRESS OR IMPLIED
WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF 
MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO
EVENT SHALL THE AUTHOR BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, 
SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS;
OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY,
WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR 
OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF 
ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
-->

<html>
  <head>
    <title>Console - Gears Inspector</title>
    <link rel="stylesheet" type="text/css" href="common/styles.css" />
    <!--[if lte IE 6]>
      <link rel="stylesheet" type="text/css" href="common/ie6hacks.css" />
    <![endif]-->
    <style type="text/css">
      #log-window {
        padding-top: 75px;
      }

      .log {
        padding: 9px 65px;
        border-bottom: 1px solid;
        border-bottom-color: #999999;
        background-position: 15px 5px;
        background-image: url(common/question-35.png);
        background-repeat: no-repeat;
        background-color: #DDEEDD;
      }

      .log .type {
        font-weight: bold;
        color: #006633;
      }

      .debug {
        background-image: none;
        background-color: #FFFFFF;
        padding-left: 15px;
      }

      .info {
        background-image: url(common/lightbulb-35.png);
        background-color: #E7F9FE;
      }

      .info .type {
        color: #0000CC;
      }

      .warn {
        background-image: url(common/alert-35.png);
        background-color: #FFF5DE;
      }

      .warn .type {
        color: #FF9900; 
      }

      .error {
        background-image: url(common/error-35.png);
        background-color: #FFD2D0;
      }

      .error .type {
        color: #FF0000;
      }
    </style>
    <script type="text/javascript" src="common/gears_init.js"></script>
    <script type="text/javascript" src="common/sample.js"></script>
  </head>
  <body>

    <script type="text/javascript" src="common/inspector_links.js"></script>

    <div id="heading">
      <div class="controls">
        <button onclick="clearLog();" style="font-weight: bold;">Clear</button>
      </div>
      <h1 class="heading-text">Console</h1>
    </div>

    <div id="log-window"></div>

    <script type="text/javascript">
      var console;

      init();

      function init() {
        if (!window.google || !google.gears) {
          addStatus('Google Gears is not installed.');
          return;
        }

        console = google.gears.factory.create('beta.console');
        console.onlog = onlogHandler;
        addStatus('Ready.');
        
        return;
      }

      function onlogHandler(log_event) {
        var msg = log_event.message;
        var type = log_event.type;
        if (msg == '') msg = '(no message)';
        if (log_event.type == 'error') type = 'Error';
        if (log_event.type == 'warn') type = 'Warning';
        if (log_event.type == 'info') type = 'Info';

        // Create the log element
        var log = document.createElement('div');
        log.className = 'log ' + log_event.type;

        // Left div to hold type heading and message
        var left_div = document.createElement('div');
        left_div.style.styleFloat = 'left';  // IE way of accessing float
        left_div.style.cssFloat = 'left';    // W3C way of accessing float
                                             // Set them both just to be safe

        // Type heading
        if (log_event.type != 'debug') {
          var type_span = document.createElement('span');
          type_span.className = 'type';
          setTextContent(type_span, type + ':');
          left_div.appendChild(type_span);
          left_div.appendChild(document.createElement('br'));
        }

        // Message
        left_div.appendChild(document.createTextNode(msg));

        // Right div to hold source/time info
        var right_div = document.createElement('div');
        right_div.style.styleFloat = 'right';
        right_div.style.cssFloat = 'right';
        right_div.style.color = '#444444';

        // Source heading
        var source_span = document.createElement('span');
        source_span.style.color = '#000099';
        setTextContent(source_span, 'Source');
        right_div.appendChild(source_span);
        
        // Source text
        right_div.appendChild(document.createTextNode(': ' +
              log_event.sourceUrl));
        right_div.appendChild(document.createElement('br'));

        // Date heading
        var date_span = document.createElement('span');
        date_span.style.color = '#000099';
        setTextContent(date_span, 'Date');
        right_div.appendChild(date_span);

        // Date text
        // TODO(aa): Change this when log_event.date actually returns a date
        // object.
        right_div.appendChild(document.createTextNode(': ' +
              Date(log_event.date)));

        // Put it all together
        log.appendChild(left_div);
        log.appendChild(right_div);

        var clear_div = document.createElement('div');
        clear_div.style.clear = 'both';
        log.appendChild(clear_div);

        document.getElementById('log-window').insertBefore(log,
            document.getElementById('log-window').firstChild);
      }

      function addStatus(message) {
        var node = document.createElement('div');
        node.className = 'log debug';
        setTextContent(node, message);
        document.getElementById('log-window').insertBefore(node,
            document.getElementById('log-window').firstChild);
      }


      function clearLog() {
        document.getElementById('log-window').innerHTML = '';
      }
    </script>
  </body>
</html>

Show details Hide details

Change log

r988 by gears.daemon on Feb 19, 2008 Diff

[Author: oshlack]

Initial checkin of developer tools
including log viewer tool, common
UI framework and support scripts. Also
moved database and localserver
tools to gears/inspector/ and integrated
into framework. Note that
these tools lack polish.

PRESUBMIT=passed
R=aa
...

Go to:

Project members, sign in to write a code review

Older revisions

All revisions of this file

File info

Size: 6792 bytes, 209 lines

View raw file