Improvements for comparing elements from different tabs.

'Compare' button added. Styling improved - using default DevTools styles. README modified accordingly.
kdzwinel · Feb 3, 2014 · 21a9544 · 21a9544
1 parent 5ab385f
commit 21a9544
Show file tree

Hide file tree

Showing 8 changed files with 299 additions and 125 deletions.
diff --git a/README.md b/README.md
@@ -25,6 +25,13 @@ https://github.com/kdzwinel/CSS-Diff/issues
 Changelog
 ---------
 
+### 0.30 ###
+
+New features:
++ ability to compare elements from different tabs
++ more control over what is being compared through the 'Compare' button
++ improved look
+
 ### 0.20 ###
 
 New features:

diff --git a/css/sidebar.css b/css/sidebar.css
@@ -1,98 +1,174 @@
 * {
-    font-family: dejavu sans mono, monospace;
-    font-size: 11px;
     -webkit-box-sizing: border-box;
+    box-sizing: border-box;
 }
 
 body {
+    cursor: default;
     margin: 0;
     padding: 0;
+    font-family: 'Lucida Grande', sans-serif;
+    font-size: 12px;
+    tab-size: 4;
+    -webkit-user-select: none;
+    color: #222;
 }
 
-div.block {
-    padding: 2px;
+body.platform-linux {
+    color: rgb(48, 57, 66);
+    font-family: Ubuntu, Arial, sans-serif;
 }
 
-table {
-    width: 100%;
+body.platform-linux .monospace {
+    font-size: 11px;
+    font-family: dejavu sans mono, monospace;
 }
 
-td, th {
-    height: 15px;
+body.platform-mac {
+    color: rgb(48, 57, 66);
+    font-family: 'Lucida Grande', sans-serif;
 }
 
-    th {
-        width: 90px;
-        padding-right: 3px;
-        color: #C80000;
-        font-weight: normal;
-        text-align: left;
+body.platform-mac .monospace {
+    font-size: 11px;
+    font-family: Menlo, monospace;
+}
 
-        border-right: solid 1px #555;
-        border-bottom: solid 1px #555;
-    }
+body.platform-windows {
+    font-family: 'Segoe UI', Tahoma, sans-serif;
+}
 
-.description {
-    margin-top: 0;
-    margin-bottom: 10px;
+body.platform-windows .monospace {
+    font-size: 12px;
+    font-family: Consolas, Lucida Console, monospace;
 }
 
-.element0 {
+#wrapper.showMessage #result {
+    display: none;
+}
 
+#wrapper.showResult #message {
+    display: none;
 }
 
-.element1 {
-    background-color: #F0F0F0;
+button {
+    font-size: 13px;
+    margin: 0;
+    padding: 2px 20px;
+    height: 24px;
+    border: 1px solid rgb(165, 165, 165);
+    border-radius: 12px;
+    -webkit-appearance: none;
+    color: rgb(6, 6, 6);
+    background-color: rgb(237, 237, 237);
+    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(252, 252, 252)), to(rgb(223, 223, 223)));
 }
 
-.suffix {
-    display: none;
+button:focus {
+    outline: none;
 }
 
-    .suffix th {
-        padding-left: 20px;
-    }
+p {
+    padding: 0 4px 0 4px;
+}
 
-tr.lower td {
-    border-bottom: solid #555 1px;
+#selected {
+    border-bottom: solid 1px rgb(191, 191, 191);
 }
 
-th.suffix-parent {
-    cursor: pointer;
+#selected button {
+    display: inline-block;
 }
 
-    th.suffix-parent::before {
-        content: url(../img/treeRightTriangleBlack.png);
-        opacity: 0.75;
-        float: left;
-        width: 8px;
-        height: 8px;
-        margin-top: 2px;
-        padding-right: 3px;
-        -webkit-user-select: none;
-    }
+#thirdPartyCookiesWarning {
+    color: darkred;
+    display: none;
+}
 
-    th.suffix-parent.open::before {
-        content: url(../img/treeDownTriangleBlack.png);
-    }
+#thirdPartyCookiesWarning.visible {
+    display: block;
+}
 
 .sidebar-separator {
-    background-image: -webkit-gradient(linear, left top, left bottom, from(#F3F3F3), color-stop(0.05, #F3F3F3), color-stop(0.05, #E6E6E6), to(#D1D1D1));
+    background-color: rgb(230, 230, 230);
     padding: 0 5px;
-    border-top: 1px solid #BDBDBD;
-    border-bottom: 1px solid #BDBDBD;
-    color: #6E6E6E;
-    text-shadow: white 0 1px 0;
+    color: rgb(50, 50, 50);
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
-    font-size: 11px;
+    line-height: 16px;
 }
 
-.info {
+#message p {
     text-align: center;
     font-style: italic;
     font-size: 10px;
     padding: 6px;
     color: black;
+}
+
+table {
+    width: 100%;
+    border-bottom: solid rgb(191, 191, 191) 1px;
+    border-top: solid rgb(191, 191, 191) 1px;
+    border-collapse: collapse;
+}
+
+td, th {
+    height: 15px;
+}
+
+th {
+    width: 90px;
+    padding-right: 3px;
+    padding-left: 4px;
+    color: #C80000;
+    font-weight: normal;
+    text-align: left;
+
+    border-right: solid 1px rgb(191, 191, 191);
+    border-bottom: solid 1px rgb(191, 191, 191);
+}
+
+td {
+    padding-left: 4px;
+}
+
+.element0 {
+}
+
+.element1 {
+    background-color: #F0F0F0;
+}
+
+tr.lower td {
+    border-bottom: solid rgb(191, 191, 191) 1px;
+}
+
+th.suffix-parent {
+    cursor: pointer;
+}
+
+th.suffix-parent::before {
+    content: ' ';
+    opacity: 0.55;
+    float: left;
+    width: 8px;
+    height: 11px;
+    padding-right: 3px;
+    -webkit-user-select: none;
+    background: url(../img/treeRightTriangleBlack.png) left center no-repeat;
+    background-size: 8px 8px;
+}
+
+th.suffix-parent.open::before {
+    background-image: url(../img/treeDownTriangleBlack.png);
+}
+
+.suffix {
+    display: none;
+}
+
+.suffix th {
+    padding-left: 20px;
 }
diff --git a/img/screenshot.png b/img/screenshot.png
diff --git a/img/treeDownTriangleBlack.png b/img/treeDownTriangleBlack.png
diff --git a/img/treeRightTriangleBlack.png b/img/treeRightTriangleBlack.png
diff --git a/js/DiffRenderer.class.js b/js/DiffRenderer.class.js
@@ -1,25 +1,14 @@
 function DiffRenderer(container) {
-    var suffixes = ["background", "margin", "padding", "border", "outline", "font", "listStyle", "overflow"];
-
-    //Generates reasonable name for element from its tag name, classes and id
-    var elementName = function(element) {
-        var name = element.tag;
-
-        if(element.id !== null) {
-            name += '#' + element.id;
-        } else if(element.class !== null) {
-            name += '.' + element.class.replace(/ /g,'.');
-        }
+    "use strict";
 
-        return name;
-    };
+    var suffixes = ["background", "margin", "padding", "border", "outline", "font", "listStyle", "overflow"];
 
     //Checks if attribute has a (known) suffix and returns it
-    var getSuffix = function(attrName) {
-        for(var i=0, l=suffixes.length; i<l; i++) {
+    var getSuffix = function (attrName) {
+        for (var i = 0, l = suffixes.length; i < l; i++) {
             var suffix = suffixes[i];
 
-            if( attrName.length > suffix.length && attrName.substr(0, suffix.length) === suffix ) {
+            if (attrName.length > suffix.length && attrName.substr(0, suffix.length) === suffix) {
                 return suffix;
             }
         }
@@ -28,80 +17,82 @@ function DiffRenderer(container) {
     };
 
     //Checks if given attribute name is used as a suffix for other attributes
-    var isSuffix = function(attrName) {
+    var isSuffix = function (attrName) {
         return ( suffixes.indexOf(attrName) !== -1 );
     };
 
+    //Generates reasonable name for element from its tag name, classes and id
+    this.nameElement = function (element) {
+        var name = element.tag;
+
+        if (element.id !== null) {
+            name += '#' + element.id;
+        } else if (element.class !== null) {
+            name += '.' + element.class.replace(/ /g, '.');
+        }
+
+        return name;
+    };
+
     //Renders a table with attribute differences
-    //TODO Clean it up! Rethink the HTML structure.
-    this.render = function(element0, element1, diff) {
+    this.render = function (element0, element1, diff) {
         var buffer = "";
         var webkitBuffer = "";
 
-        buffer += '<div class="block">';
-        buffer += '<p class="description">Comparing <strong class="element0">' + elementName(element0) + '</strong> ';
+        buffer += '<p class="description">Comparing <strong class="element0">' + this.nameElement(element0) + '</strong> ';
         buffer += (element0.differentTab) ? '(from different tab) ' : '';
-        buffer += 'with <strong class="element1">' + elementName(element1) + '</strong>';
+        buffer += 'with <strong class="element1">' + this.nameElement(element1) + '</strong>';
         buffer += (element1.differentTab) ? '(from different tab)' : '';
         buffer += '.</p>';
 
-        buffer += '<table>';
-        for(var name in diff) {
-            if(!diff.hasOwnProperty(name)) {
-                continue;
-            }
-            var value = diff[name];
+        container.querySelector('#comparing').innerHTML = buffer;
+        buffer = '';
+
+        for (var i = 0, il = diff.length; i < il; i++) {
+            var property = diff[i];
 
-            var suffix = getSuffix(name);
+            var suffix = getSuffix(property.name);
             var suffixClass = "";
             var suffixParentAttributes = "";
             var row = "";
 
-            if(suffix !== null) {
+            if (suffix !== null) {
                 suffixClass = " suffix " + suffix;
             }
 
-            if(isSuffix(name)) {
-                suffixParentAttributes = "class='suffix-parent' data-suffix='" + name + "'";
+            if (isSuffix(property.name)) {
+                suffixParentAttributes = "class='suffix-parent' data-suffix='" + property.name + "'";
             }
 
             row += "<tr class='upper" + suffixClass + "'>";
-                row += "<th rowspan='2' " + suffixParentAttributes + ">" + name + "</th>";
-                row += "<td class='element0'>" + value[0] + "</td>";
+            row += "<th rowspan='2' " + suffixParentAttributes + ">" + property.name + "</th>";
+            row += "<td class='element0'>" + property.value1 + "</td>";
             row += "</tr>";
             row += "<tr class='lower" + suffixClass + "'>";
-                row += "<td class='element1'>" + value[1] + "</td>";
+            row += "<td class='element1'>" + property.value2 + "</td>";
             row += "</tr>";
 
             //webkit attributes will be put to a different table
-            if(name.substr(0, 8) === "-webkit-") {
+            if (property.name.substr(0, 8) === "-webkit-") {
                 webkitBuffer += row;
             } else {
                 buffer += row;
             }
         }
-        buffer += '</table></div>';
-
-        if(webkitBuffer.length > 0) {
-            buffer += "<div class='sidebar-separator'>WebKit attributes</div>";
-            buffer += "<div class='block'><table>";
-            buffer += webkitBuffer;
-            buffer += "</table></div>";
-        }
-
-        container.innerHTML = buffer;
+        container.querySelectorAll('#result table')[0].innerHTML = buffer;
+        container.querySelectorAll('#result table')[1].innerHTML = webkitBuffer;
 
         //react to "onclick" events on attributes that have children
         var suffixParents = container.getElementsByClassName('suffix-parent');
-        for (var i = 0, il = suffixParents.length; i < il ; i++) {
+        for (i = 0, il = suffixParents.length; i < il; i++) {
             var suffixParent = suffixParents[i];
 
-            suffixParent.onclick = function() {
+            suffixParent.onclick = function () {
                 this.classList.contains("open") ? this.classList.remove("open") : this.classList.add("open");
 
                 var children = container.getElementsByClassName(this.dataset.suffix);
 
-                for (var j = 0, jl = children.length; j < jl ; j++) {
+                for (var j = 0, jl = children.length; j < jl; j++) {
                     children[j].style.display = (children[j].style.display !== "table-row") ? "table-row" : "none";
                 }
             };