xulapp/highlight_selector.html

## highlight_selector.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Highlight Selector</title>
  <style id="style">
    body > p {
      background-color: #DDD;
      padding: 0.5em;
    }
    .cssSheet {
      background-color: #333;
      font-family: monospace;
      color: white;
      padding: 0.5em;
    }
    .cssSelector {
      color: magenta;
      font-weight: bold;
      cursor: pointer;
    }
    .cssPunctuator {
      color: silver;
    }
    .cssProperty {
      color: lime;
    }
    .cssValue {
      color: yellow;
    }
    .cssIndent {
      margin-left: 1em;
    }
  </style>
  <style>
    @-moz-keyframes highlight {
      100% {
        outline-color: #ff0000;
      }
    }
    @-webkit-keyframes highlight {
      100% {
        outline-color: #ff0000;
      }
    }
    .highlight {
      outline: 2px solid rgba(255, 0, 0, 0);
      -moz-animation: highlight 0.2s 10 alternate;
      -webkit-animation: highlight 0.2s 10 alternate;
      animation: highlight 0.2s 10 alternate;
    }
  </style>
</head>
<body>
<h1>Highlight Selector</h1>
<p>テキトウに作った。下のCSSソースのセレクタ部分をクリックしてみよう。対象セレクタがハイライトされるよ。</p>
<script>
(function(){
  setOutPutSource(document.body);

  function onClick (aEvent) {
    var target = aEvent.target;
    if (target.classList.contains("cssSelector")) {
      aEvent.stopPropagation();
      var elms = document.querySelectorAll(target.textContent);
      for (var i = 0, len = elms.length; i < len; ++i) {
        highlight(elms[i]);
      }
    }
  }
  function highlight (aElement) {
    function onAnimationEnd(event) {
      if (event.animationName !== "highlight") {
        return;
      }
      aElement.removeEventListener("webkitAnimationEnd", onAnimationEnd, false);
      aElement.removeEventListener("animationend", onAnimationEnd, false);
      aElement.classList.remove("highlight");
    }
    aElement.addEventListener("webkitAnimationEnd", onAnimationEnd, false);
    aElement.addEventListener("animationend", onAnimationEnd, false);
    aElement.classList.add("highlight");
  }
  function getStyles (aStyle) {
    var styleText = [];
    for (var i = 0, len = aStyle.length; i < len; ++i) {
      var property = aStyle[i];
      styleText.push(
        '<span class="cssProperty">' + property + '</span>' +
        '<span class="cssPunctuator">:</span>' + ' ' +
        '<span class="cssValue">' + aStyle.getPropertyValue(property) + '</span>' +
        '<span class="cssPunctuator">;</span>'
      );
    }
    return styleText.join("<br/>");
  }
  function setOutPutSource (aParentNode) {
    var root = document.createElement("div");
    root.setAttribute("class", "cssSource");

    var sheet = document.getElementById('style').sheet,
        rules = sheet.cssRules,
        sheetElm = document.createElement("div");

    root.insertAdjacentHTML("BeforeEnd", "<h2>" + (sheet.href||"Inline") + "</h2>");
    sheetElm.setAttribute("class", "cssSheet");

    for (var j = 0, ruleLength = rules.length; j < ruleLength; ++j) {
      var rule = rules[j],
          div = document.createElement("div");
      div.setAttribute("class", "cssRule");
      div.innerHTML = [
        '<span class="cssSelector">' + rule.selectorText + '</span> <span class="cssPunctuator">{</span>',
        '<div class="cssIndent">' + getStyles(rule.style) + '</div>',
        '<span class="cssPunctuator">}</span>'
      ].join("");
      sheetElm.appendChild(div);
    }
    root.appendChild(sheetElm);
    aParentNode.appendChild(root);

    root.addEventListener("click", onClick ,false);
  }
}());
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Highlight Selector</title>
	<style id="style">
	body > p {
	background-color: #DDD;
	padding: 0.5em;
	}
	.cssSheet {
	background-color: #333;
	font-family: monospace;
	color: white;
	padding: 0.5em;
	}
	.cssSelector {
	color: magenta;
	font-weight: bold;
	cursor: pointer;
	}
	.cssPunctuator {
	color: silver;
	}
	.cssProperty {
	color: lime;
	}
	.cssValue {
	color: yellow;
	}
	.cssIndent {
	margin-left: 1em;
	}
	</style>
	<style>
	@-moz-keyframes highlight {
	100% {
	outline-color: #ff0000;
	}
	}
	@-webkit-keyframes highlight {
	100% {
	outline-color: #ff0000;
	}
	}
	.highlight {
	outline: 2px solid rgba(255, 0, 0, 0);
	-moz-animation: highlight 0.2s 10 alternate;
	-webkit-animation: highlight 0.2s 10 alternate;
	animation: highlight 0.2s 10 alternate;
	}
	</style>
	</head>
	<body>
	<h1>Highlight Selector</h1>
	<p>テキトウに作った。下のCSSソースのセレクタ部分をクリックしてみよう。対象セレクタがハイライトされるよ。</p>
	<script>
	(function(){
	setOutPutSource(document.body);

	function onClick (aEvent) {
	var target = aEvent.target;
	if (target.classList.contains("cssSelector")) {
	aEvent.stopPropagation();
	var elms = document.querySelectorAll(target.textContent);
	for (var i = 0, len = elms.length; i < len; ++i) {
	highlight(elms[i]);
	}
	}
	}
	function highlight (aElement) {
	function onAnimationEnd(event) {
	if (event.animationName !== "highlight") {
	return;
	}
	aElement.removeEventListener("webkitAnimationEnd", onAnimationEnd, false);
	aElement.removeEventListener("animationend", onAnimationEnd, false);
	aElement.classList.remove("highlight");
	}
	aElement.addEventListener("webkitAnimationEnd", onAnimationEnd, false);
	aElement.addEventListener("animationend", onAnimationEnd, false);
	aElement.classList.add("highlight");
	}
	function getStyles (aStyle) {
	var styleText = [];
	for (var i = 0, len = aStyle.length; i < len; ++i) {
	var property = aStyle[i];
	styleText.push(
	'<span class="cssProperty">' + property + '</span>' +
	'<span class="cssPunctuator">:</span>' + ' ' +
	'<span class="cssValue">' + aStyle.getPropertyValue(property) + '</span>' +
	'<span class="cssPunctuator">;</span>'
	);
	}
	return styleText.join("<br/>");
	}
	function setOutPutSource (aParentNode) {
	var root = document.createElement("div");
	root.setAttribute("class", "cssSource");

	var sheet = document.getElementById('style').sheet,
	rules = sheet.cssRules,
	sheetElm = document.createElement("div");

	root.insertAdjacentHTML("BeforeEnd", "<h2>" + (sheet.href\|\|"Inline") + "</h2>");
	sheetElm.setAttribute("class", "cssSheet");

	for (var j = 0, ruleLength = rules.length; j < ruleLength; ++j) {
	var rule = rules[j],
	div = document.createElement("div");
	div.setAttribute("class", "cssRule");
	div.innerHTML = [
	'<span class="cssSelector">' + rule.selectorText + '</span> <span class="cssPunctuator">{</span>',
	'<div class="cssIndent">' + getStyles(rule.style) + '</div>',
	'<span class="cssPunctuator">}</span>'
	].join("");
	sheetElm.appendChild(div);
	}
	root.appendChild(sheetElm);
	aParentNode.appendChild(root);

	root.addEventListener("click", onClick ,false);
	}
	}());
	</script>
	</body>
	</html>