Feature/show hidden headers

content_scripts/headingsMap.js

@@ -23,6 +23,7 @@
         activeStatusClass = 'active',
         classPrefix = 'biohead',
         headErrorClass = 'head_error',
+        headVisibleClassPrefix = 'visible-';
         noHeadClass = 'no-headed',
         untitledDocumentText = 'Untitled document',
         noHeadingsText = 'No headings',
@@ -332,7 +333,7 @@
     }
 
     function headingsMap(documentWindow, documentIndex) {
-        var mainList, headersList, item, header, headerId, headerText, level, noHeadingsTextNode, noHeadingsSpanNode,
+        var mainList, headersList, item, header, headerId, headerText, level, noHeadingsTextNode, noHeadingsSpanNode, headingsSpanNode,
             parentList, linkElement, descendantListElement, headerTextNode, precedingHeadLevel, parentListClass,
             classValue,
             headLevelsSpanElement, headLevelsSpanTextNode,
@@ -341,7 +342,24 @@
             currentLevel = 0,
             headingsMapSection = generateSectionForMap(documentWindow, documentIndex),
             documentToCheck = documentWindow.document,
-            headingElements = documentToCheck.querySelectorAll('h1, h2, h3, h4, h5, h6');
+            headingElements = documentToCheck.querySelectorAll('h1, h2, h3, h4, h5, h6'),
+            isVisible = function(element){
+                while (element && element.parentNode) {
+                    if (isItemHidden(element)){
+                        return false;
+                    }
+                    element = element.parentNode;
+                }
+                return true;
+            },
+            isItemHidden = function(el){
+                try {
+                    var style = window.getComputedStyle(el);
+                    return (style.display === 'none' || style.visibility === 'hidden');
+                } catch (e) {
+                    return false;
+                }
+            };
 
         mainList = createElement('ul', {class: listClassPrefix + currentLevel});
         headersList = mainList;
@@ -435,13 +453,16 @@
             }
 
             headerTextNode = createTextNode(headerText);
-            linkElement.appendChild(headerTextNode);
+            headingsSpanNode = createElement("span");
+            headingsSpanNode.appendChild(headerTextNode);
+            linkElement.appendChild(headingsSpanNode);
             mainList.appendChild(linkElement);
             mainList.setAttribute('class', classPrefix + level);
+            linkElement.classList.add(headVisibleClassPrefix + isVisible(header));
 
             if (currentLevel > previous + 1) {
                 if ((i === 0 && showHeadErrorH1 === true && showHeadError === true) || (i > 0 && showHeadError === true)) {
-                    linkElement.setAttribute('class', headErrorClass);
+                    linkElement.classList.add(headErrorClass);
                 }
             }
             previous = currentLevel;
@@ -452,7 +473,7 @@
 
     function scrollToHeader(event) {
         // This only considers the current document
-        var headerElement = document.getElementById(event.target.getAttribute('data-header-id'));
+        var headerElement = getEl(event.target);
 
         if (headerElement) {
             document.documentElement.scrollTop = getTopPosition(headerElement);
@@ -476,6 +497,16 @@
 
             return topPosition;
         }
+
+        function getEl(el) {
+            // el might be a or span tag
+            var id;
+            while (!id && el && el.parentNode){
+                id = el.getAttribute('data-header-id');
+                el = el.parentNode;
+            }
+            return document.getElementById(id);
+        }
     }
 
     function getWidget() {
@@ -672,7 +703,7 @@
             baseURL = chrome.extension.getURL('html/'),
             iframeCSS,
             iframeHead,
-            iframeWidget = createElement('iframe', {'id': headingsMapIframeWrapperId}),
+            iframeWidget = createElement('iframe', {'id': headingsMapIframeWrapperId, 'frameborder':'0'}),
             iframeWidgetContentWindow;
 
         bodyParent.insertBefore(iframeWidget, body);

html/style.css

@@ -1,5 +1,5 @@
 html, body {
-    padding: 0;
+    padding: 4px 8px;
     margin: 0;
 }
 #headingsMapWrapper {
@@ -18,7 +18,7 @@ html, body {
 
 #headingsMapWrapper h2 {
     font-size: 1em;
-    margin: 10px 5px;
+    margin: 8px;
 }
 
 #headingsMapWrapper section {
@@ -76,7 +76,7 @@ html, body {
     font-size: 1em;
     color: #444;
     margin: 1px 0;
-    padding: 0 5px 0 25px;
+    padding: 0 0 0 25px;
     background: url(icons/tree_b.gif) 3px top no-repeat;
     line-height: 1.4;
 }
@@ -95,7 +95,7 @@ html, body {
 
 #headingsMapWrapper p,
 #headingsMapWrapper a,
-#headingsMapWrapper .no-headed{
+#headingsMapWrapper .no-headed {
     font-weight: normal;
     text-decoration: none;
     color: #333;
@@ -107,6 +107,10 @@ html, body {
     margin-left: -2px;
 }
 
+#headingsMapWrapper a#headingsTab {
+    margin-left: 0;
+}
+
 #headingsMapWrapper a span {
     font-weight: normal;
     font-size: 1em;
@@ -185,10 +189,34 @@ html, body {
 }
 
 #headingsMapWrapper .no-headed,
+#headingsMapWrapper .visible-false,
 #headingsMapWrapper .head_error {
     font-weight: normal;
     font-size: 1em;
-    background-color: #FF7575
+    overflow: visible;
+    position: relative;
+}
+#headingsMapWrapper [data-header-id] > * {
+    position: relative;
+    z-index: 2;
+}
+#headingsMapWrapper .no-headed:after,
+#headingsMapWrapper .visible-false:after,
+#headingsMapWrapper .head_error:after {
+    content: "";
+    background-color: #FF7575;
+    border-radius: 3px;
+    position: absolute;
+    top: -2px;
+    left: -3px;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+}
+
+body #headingsMapWrapper .visible-false:after {
+    opacity: .5;
+    background-color: #dbdbdb;
 }
 
 .collapser {
@@ -206,6 +234,6 @@ html, body {
 .collapser:before{
     content:"\025be";
 }
-.collapser.collapsed:before{
+.collapser.collapsed:before {
     content:"\025b8";
 }