element highlighter notes

element-highlighter-notes.html

<!-- ======================================================= -->
<h2>section colors</h2>

<table>
<tr><td>margin:  <td><tt>#??????</tt>
<tr><td>border:  <td><tt>#??????</tt>
<tr><td>padding: <td><tt>#??????</tt>
<tr><td>content: <td><tt>#??????</tt>
</table>

<p>from WebKit/Source/WebCore/Inspector/front-end/Color.js:
<pre>
ContentOutline: "rgba(  9,  83, 148, 1.00)"

Content:        "rgba(111, 168, 220, 0.66)"
Padding:        "rgba(147, 196, 125, 0.55)"
Border:         "rgba(255, 229, 153, 0.66)"
Margin:         "rgba(246, 178, 107, 0.66)"

ContentLight:   "rgba(111, 168, 220, 0.50)"
PaddingLight:   "rgba(147, 196, 125, 0.40)"
BorderLight:    "rgba(255, 229, 153, 0.50)"
MarginLight:    "rgba(246, 178, 107, 0.50)"    
</pre>


<!-- ======================================================= -->
<h2>metric names</h2>

<table>
<tr><td>margin left:    <td><tt>ml</tt>
<tr><td>margin right:   <td><tt>mr</tt>
<tr><td>margin top:     <td><tt>mt</tt>
<tr><td>margin bottom:  <td><tt>mb</tt>
<tr><td>border left:    <td><tt>bl</tt>
<tr><td>border right:   <td><tt>br</tt>
<tr><td>border top:     <td><tt>bt</tt>
<tr><td>border bottom:  <td><tt>bb</tt>
<tr><td>padding left:   <td><tt>pl</tt>
<tr><td>padding right:  <td><tt>pr</tt>
<tr><td>padding top:    <td><tt>pt</tt>
<tr><td>padding bottom: <td><tt>pb</tt>
<tr><td>content width:  <td><tt>cw</tt>
<tr><td>content height: <td><tt>ch</tt>
</table>

<!-- ======================================================= -->
<h2>pane names</h2>

<style>
#cell-names {
    border-collapse: collapse
}
#cell-names td {
    padding: 0.0em;
    margin: 0.0em;
    border: thin none;
}
#cell-names td.bordered {
    border: thin solid black;
}
.pmar { background-color: rgba(246, 178, 107, 0.66);}
.pbor { background-color: rgba(255, 229, 153, 0.66);}
.ppad { background-color: rgba(147, 196, 125, 0.55);}
.pcon { background-color: rgba(111, 168, 220, 0.66);}

</style>

<table id="cell-names" cellpadding=0 cellspacing=0 border=0>
<tbody align=center valign=middle>
<tr> <td class="bordered pmar">&nbsp;&nbsp;mte&nbsp;&nbsp;
<tr> <td>
    <table cellpadding=0 cellspacing=0 width="100%" border=0>
    <tbody align=center valign=middle>
        <tr>
           <td class="bordered pmar">&nbsp;&nbsp;mle&nbsp;&nbsp;
           <td>
                <table cellpadding=0 cellspacing=0 width="100%" border=0>
                <tbody align=center valign=middle>
                    <tr> <td class="bordered pbor">bte
                    
                    <tr> <td>
                    <table cellpadding=0 cellspacing=0 width="100%" border=0>
                    <tbody align=center valign=middle>
                        <tr>
                           <td class="bordered pbor">&nbsp;&nbsp;ble&nbsp;&nbsp;
                           <td>
                                <table cellpadding=0 cellspacing=0 width="100%" border=0>
                                <tbody align=center valign=middle>
                                    <tr> <td class="bordered ppad">pte
                                    <tr> <td>
                                        <table cellpadding=0 cellspacing=0 width="100%" border=0>
                                        <tbody align=center valign=middle>
                                        <tr>
                                            <td class="bordered ppad">&nbsp;&nbsp;ple&nbsp;&nbsp;
                                            <td class="pcon">&nbsp;&nbsp;con&nbsp;&nbsp;
                                            <td class="bordered ppad">&nbsp;&nbsp;pre&nbsp;&nbsp;
                                        </table>
                                    <tr> <td class="bordered ppad">pbe
                                </table>
                           <td class="bordered pbor">&nbsp;&nbsp;bre&nbsp;&nbsp;
                    </table>
                    <tr> <td class="bordered pbor">bbe
           </table>
           <td class="bordered pmar">&nbsp;&nbsp;mre&nbsp;&nbsp;
    </table>
<tr> <td class="bordered pmar">&nbsp;&nbsp;mbe&nbsp;&nbsp;
</table>

<style>
#example {
    margin:  4em;
    border:  4em solid white;
    padding: 4em;
    margin-top: -1em;
}
</style>
<div id="example">inspect me!</div>

<!-- ======================================================= -->
<h2>implementation as table</h2>

<p>close, but won't handle negative widths/heights
<p>actually, negative values only allowed for margins; does that help?

<table id="impl" cellpadding=0 cellspacing=0 border=0>
<tbody align=center valign=middle>
<tr> <td id="impl-mte" class="pmar">
<tr> <td>
    <table cellpadding=0 cellspacing=0 width="100%" border=0>
    <tbody align=center valign=middle>
        <tr>
           <td id="impl-mle" class="pmar">
           <td>
                <table cellpadding=0 cellspacing=0 width="100%" border=0>
                <tbody align=center valign=middle>
                    <tr> <td id="impl-bte" class="pbor">
                    <tr> <td> 
                        <table cellpadding=0 cellspacing=0 width="100%" border=0>
                            <tbody align=center valign=middle>
                                <tr>
                                    <td id="impl-ble" class="pbor">
                                    <td>
                                        <table cellpadding=0 cellspacing=0 width="100%" border=0>
                                        <tbody align=center valign=middle>
                                            <tr> <td id="impl-pte" class="ppad">
                                            <tr> <td>
                                                <table cellpadding=0 cellspacing=0 width="100%" border=0>
                                                <tbody align=center valign=middle>
                                                    <tr>
                                                        <td id="impl-ple" class="ppad">
                                                        <td id="impl-con" class="pcon">
                                                        <td id="impl-pre" class="ppad">
                                                </table>
                                            <tr> <td id="impl-pbe" class="ppad">
                                        </table>
                                    <td id="impl-bre" class="pbor">
                            </table>
                    <tr> <td id="impl-bbe" class="pbor">
           </table>
           <td id="impl-mre" class="pmar">
    </table>
<tr> <td id="impl-mbe" class="pmar">
</table>

<script>
window.addEventListener("load", onLoad)

var mle, mre, mte, mbe
var ble, bre, bte, bbe
var ple, pre, pte, pbe
var con

function onLoad() {
    mle = element("impl-mle")
    mre = element("impl-mre")
    mte = element("impl-mte")
    mbe = element("impl-mbe")
                 
    ble = element("impl-ble")
    bre = element("impl-bre")
    bte = element("impl-bte")
    bbe = element("impl-bbe")
                 
    ple = element("impl-ple")
    pre = element("impl-pre")
    pte = element("impl-pte")
    pbe = element("impl-pbe")
                 
    con = element("impl-con")
    
    mte.height = 10
    mbe.height = 10
    mle.width  = 10
    mre.width  = 10
    
    bte.height = -10
    bbe.height = 10
    ble.width  = 10
    bre.width  = 10
    
    pte.height = 0
    pbe.height = 10
    ple.width  = 10
    pre.width  = 10
    
    con.width  = 100
    con.height = 100
}

function element(id) {
    var element = document.getElementById(id)
    if (!element) alert("element " + id + " not found")
    return element
}
</script>