CSS cleanup: dynamic rules tab (My rules)

For comparison, before: http://chrisly.me/image/1g01441z0F2c

and after: http://chrisly.me/image/1v160U0P2i07

Also:

* give good class names to some element in dyna-rules.html
* select the ul more generically in dyna-rules.js (since a container was added)

src/css/dyna-rules.css

@@ -15,8 +15,9 @@ code {
     margin: 0;
     padding: 0.5em 0 0 0;
     white-space: nowrap;
+    font-size: 0; /* otherwise spaces between inline-blocks will be rendered */
 }
-#diff > .pane {
+#diff .pane {
     border: 0;
     box-sizing: border-box;
     display: inline-block;
@@ -25,15 +26,16 @@ code {
     padding: 0;
     position: relative;
     white-space: normal;
-    width: calc(50% - 2px);
+    width: 50%;
     }
-#diff > .pane > div {
+#diff .pane .rulesContainer {
+    position: relative;
+    min-height: 150px; /* too short is confusing */
+    }
+#diff .ruleActions {
     padding: 0 0 1em 0;
     text-align: center;
     }
-#diff > .pane > div > span {
-    float: left;
-    }
 body[dir="ltr"] #revertButton:after {
     content: '\2009\f061';
     font-family: FontAwesome;
@@ -105,19 +107,20 @@ body[dir="rtl"] #commitButton:before {
     visibility: hidden;
     }
 #diff .left {
-    padding: 0 0 0 0;
+    border-right: 1px solid #eee;
     }
 #diff .right > ul {
     color: #888;
     }
 #diff li {
-    background-color: white;
+    background-color: #ddd;
     direction: ltr;
     padding: 0;
     text-align: left;
     white-space: nowrap;
+    padding-left: 3px; /* a bit of padding; must also be in textarea */
     }
-#diff li:nth-of-type(2n+0) {
+#diff li:nth-child(even) {
     background-color: #eee;
     }
 #diff .right li {
@@ -137,17 +140,20 @@ body[dir="rtl"] #commitButton:before {
 #diff textarea {
     background-color: #f8f8ff;
     border: 0;
+    margin: 0;
     border-top: 1px solid #eee;
     direction: ltr;
     font: 12px monospace;
-    height: 100%;
-    left: 0;
     line-height: 1.8;
-    margin: 0;
     overflow: hidden;
     overflow-y: auto;
-    padding: 1em 0 0 0;
+    padding: 1em 0 0 3px; /* same left and top padding as ul/li */
     position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
     resize: none;
     visibility: hidden;
     white-space: pre; /* this imples nowrap; break only on \n and <br>.
@@ -155,7 +161,6 @@ body[dir="rtl"] #commitButton:before {
                         respect \n's (example: Safari) per the CSS spec:
                         http://www.w3.org/wiki/CSS/Properties/white-space */
     word-wrap: normal;
-    width: 100%;
     }
 #diff.edit textarea {
     visibility: visible;

src/dyna-rules.html

@@ -14,22 +14,25 @@
 <p data-i18n="rulesFormatHint"></p>
 <div id="diff">
     <div class="pane left">
-        <div>
+        <div class="ruleActions">
             <h2 data-i18n="rulesPermanentHeader"></h2>
             <button type="button" id="exportButton" data-i18n="rulesExport"></button>
             <button type="button" id="revertButton" data-i18n="rulesRevert"></button>
-            </div>
+        </div>
+        <div class="rulesContainer">
         <ul></ul>
         </div>
+        </div>
     <div class="pane right">
-        <div>
+        <div class="ruleActions">
             <h2 data-i18n="rulesTemporaryHeader"></h2>
             <button type="button" id="commitButton" data-i18n="rulesCommit"></button>
             <button type="button" id="editEnterButton" data-i18n="rulesEdit"></button>
             <button type="button" id="editStopButton" data-i18n="rulesEditSave"></button>
             <button type="button" id="editCancelButton" data-i18n="rulesEditDiscard"></button>
             <button type="button" id="importButton" data-i18n="rulesImport"></button>
-            </div>
+        </div>
+        <div class="rulesContainer">
         <textarea spellcheck="false"></textarea>
         <ul></ul>
         </div>

src/js/dyna-rules.js

@@ -81,10 +81,10 @@ var renderRules = function(details) {
         }
     }
 
-    uDom('#diff > .left > ul > li').remove();
-    uDom('#diff > .left > ul').html(permanentList.join(''));
-    uDom('#diff > .right > ul > li').remove();
-    uDom('#diff > .right > ul').html(sessionList.join(''));
+    uDom('#diff > .left ul > li').remove();
+    uDom('#diff > .left ul').html(permanentList.join(''));
+    uDom('#diff > .right ul > li').remove();
+    uDom('#diff > .right ul').html(sessionList.join(''));
     uDom('#diff').toggleClass('dirty', details.sessionRules !== details.permanentRules);
 };