webdevotion/inspector.html

## inspector.html
<html>

  <head>
    <style>
      body{
        font-family: "Verdana";
      }

      div.row{
        height:400px;
        clear:both;
        padding:1em;
      }

      div.column{
        float:left;
        height: 100%;
        width:400px;
        background-color:#efefef;
      }

      div.column:nth-of-type(1)
      {
        padding:1em;
      }

      #output{
        box-shadow: inset 0 0 1px #999;
        background-color: rgba(253, 172, 33, 0.16);
        color:#444;
        overflow-x:hidden;
        overflow-y: scroll;
        width:600px;
      }

      #output,ul,li,pre,code{margin:0;padding:0;}

      li{
        list-style-type: none;
        height:20px;
      }

      #output li{
        border-bottom: 1px solid rgba(0,0,0,.2);
      }

      #output li:hover{
        background-color: white;
        cursor:pointer;
      }

      .lineNumber{
        background-color: rgba(255,255,255,.4);
        display: inline-block;
        padding:2px;
        margin-right:10px;
        width: 30px;
        text-align: right;
        color:rgba(17, 13, 7, .4);
        font-weight: bold;
      }

      li.even{
        background-color: rgba(255,255,255,.5);
      }

      li.odd{
        background-color: rgba(255,255,255,0);
      }

      #output{
        border: 1px solid #ccc;
      }

      div:not(#output){
        margin:0 1em 0 0;
      }

      div#output{
        margin:1em;
      }


    </style>
  </head>

  <body>

    <div class="row">
      <div id="container" class="column">
        <h1>Layout + Design</h1>

        <ul id="list">
          <li>Item one</li>
          <li>Second item</li>
          <li>And another one</li>
        </ul>

      </div>
      <div id="output" class="column">
        <ul>

        </ul>
      </div>
    </div>

    <script>
      function getHTMLElementById( idOfHTMLTag )
      {
        return document.getElementById( idOfHTMLTag );
      }

      function getAllCSSPropertiesOf( htmlElement )
      {
        var pseudoElement = null;
        return window.getComputedStyle(htmlElement,pseudoElement);
      }

      function createListItemElement()
      {
        return document.createElement("li");
      }

      function getCSSProperty(css,property)
      {
        var value     = css.getPropertyValue(property);

        if( !(property && value) ) return null;

        return {property:property, value:value};
      }

      function getClassNameForRow( row )
      {
        return row%2 == 0 ? 'even' : 'odd';
      }

      function getContainer ()
      {
        return getHTMLElementById( containerId );
      }
      function getInspector()
      {
        return document.getElementById( inspectorId ).getElementsByTagName("ul")[0];
      }

      function addListItemToInspector( row, text )
      {
        var li          = createListItemElement();
        li.className    = getClassNameForRow( row );
        li.innerHTML    = text;
        return getInspector().appendChild(li);
      }

      function formatted(lineNumber, css )
      {
        var spanForLineNumber     = "<span class='lineNumber'>" + lineNumber + "</span>";
        var cssStyleProperty      = css.property;
        var cssStyleValue         = css.value;
        var codeTagForCSSProperty = "<code>" + cssProperty + ": " +  cssStyleValue + ";</code>";

        return "<pre>" + spanForLineNumber + codeTagForCSSProperty + "</pre>";
      }

      var containerId       = "container";
      var inspectorId       = "output";
      var row               = 0;
      var container         = getContainer();
      var allCSSProperties  = getAllCSSPropertiesOf( container );


      for( var cssProperty in allCSSProperties )
      {
        var textForListItem;
        var style = getCSSProperty( allCSSProperties, cssProperty );

        if( style )
        {
          textForListItem = formatted(row, style);
          var li = addListItemToInspector( row, textForListItem );
          row++;
        }
      }
    </script>
  </body>
</html>
	<html>

	<head>
	<style>
	body{
	font-family: "Verdana";
	}

	div.row{
	height:400px;
	clear:both;
	padding:1em;
	}

	div.column{
	float:left;
	height: 100%;
	width:400px;
	background-color:#efefef;
	}

	div.column:nth-of-type(1)
	{
	padding:1em;
	}

	#output{
	box-shadow: inset 0 0 1px #999;
	background-color: rgba(253, 172, 33, 0.16);
	color:#444;
	overflow-x:hidden;
	overflow-y: scroll;
	width:600px;
	}

	#output,ul,li,pre,code{margin:0;padding:0;}

	li{
	list-style-type: none;
	height:20px;
	}

	#output li{
	border-bottom: 1px solid rgba(0,0,0,.2);
	}

	#output li:hover{
	background-color: white;
	cursor:pointer;
	}

	.lineNumber{
	background-color: rgba(255,255,255,.4);
	display: inline-block;
	padding:2px;
	margin-right:10px;
	width: 30px;
	text-align: right;
	color:rgba(17, 13, 7, .4);
	font-weight: bold;
	}

	li.even{
	background-color: rgba(255,255,255,.5);
	}

	li.odd{
	background-color: rgba(255,255,255,0);
	}

	#output{
	border: 1px solid #ccc;
	}

	div:not(#output){
	margin:0 1em 0 0;
	}

	div#output{
	margin:1em;
	}


	</style>
	</head>

	<body>

	<div class="row">
	<div id="container" class="column">
	<h1>Layout + Design</h1>

	<ul id="list">
	<li>Item one</li>
	<li>Second item</li>
	<li>And another one</li>
	</ul>

	</div>
	<div id="output" class="column">
	<ul>

	</ul>
	</div>
	</div>

	<script>
	function getHTMLElementById( idOfHTMLTag )
	{
	return document.getElementById( idOfHTMLTag );
	}

	function getAllCSSPropertiesOf( htmlElement )
	{
	var pseudoElement = null;
	return window.getComputedStyle(htmlElement,pseudoElement);
	}

	function createListItemElement()
	{
	return document.createElement("li");
	}

	function getCSSProperty(css,property)
	{
	var value = css.getPropertyValue(property);

	if( !(property && value) ) return null;

	return {property:property, value:value};
	}

	function getClassNameForRow( row )
	{
	return row%2 == 0 ? 'even' : 'odd';
	}

	function getContainer ()
	{
	return getHTMLElementById( containerId );
	}
	function getInspector()
	{
	return document.getElementById( inspectorId ).getElementsByTagName("ul")[0];
	}

	function addListItemToInspector( row, text )
	{
	var li = createListItemElement();
	li.className = getClassNameForRow( row );
	li.innerHTML = text;
	return getInspector().appendChild(li);
	}

	function formatted(lineNumber, css )
	{
	var spanForLineNumber = "<span class='lineNumber'>" + lineNumber + "</span>";
	var cssStyleProperty = css.property;
	var cssStyleValue = css.value;
	var codeTagForCSSProperty = "<code>" + cssProperty + ": " + cssStyleValue + ";</code>";

	return "<pre>" + spanForLineNumber + codeTagForCSSProperty + "</pre>";
	}

	var containerId = "container";
	var inspectorId = "output";
	var row = 0;
	var container = getContainer();
	var allCSSProperties = getAllCSSPropertiesOf( container );


	for( var cssProperty in allCSSProperties )
	{
	var textForListItem;
	var style = getCSSProperty( allCSSProperties, cssProperty );

	if( style )
	{
	textForListItem = formatted(row, style);
	var li = addListItemToInspector( row, textForListItem );
	row++;
	}
	}
	</script>
	</body>
	</html>