Add surrounding code for each error in the information pane - Fixes j…

…dan#18
dudeOFprosper · Sep 15, 2015 · 45f7d4a · 45f7d4a
1 parent 5051bc1
commit 45f7d4a
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 2 deletions.
diff --git a/plugins/shared/info-panel/error.handlebars b/plugins/shared/info-panel/error.handlebars
@@ -11,5 +11,10 @@
             {{{title}}}
         </div>
     </a>
-    <div class="tota11y-info-error-description tota11y-collapsed"></div>
+    <div class="tota11y-info-error-description tota11y-collapsed">
+        <div class="tota11y-info-error-description-code"> 
+            Surrounding code:
+            <code></code> 
+        </div>
+    </div>
 </li>
diff --git a/plugins/shared/info-panel/index.js b/plugins/shared/info-panel/index.js
@@ -218,7 +218,7 @@ class InfoPanel {
                 // so that functionality can be inserted.
                 $error
                     .find(".tota11y-info-error-description")
-                    .append(error.$description);
+                    .prepend(error.$description);
 
                 $errors.append($error);
 
@@ -279,6 +279,13 @@ class InfoPanel {
                 // highlight when scrolling to the element with the button.
                 annotate.toggleHighlight(error.$el, $trigger);
                 annotate.toggleHighlight(error.$el, $scroll);
+
+                // Add surrounding code from error.$el to the information panel
+                // The code will appear in the error description inside 
+                // tota11y-info-error-description-code
+
+                let surroundingCode = $(error.$el).parent().html().trim();
+                $error.find('.tota11y-info-error-description-code code').text(surroundingCode);
             });
 
             $errorsTab = $activeTab = this._addTab("Errors", $errors);

diff --git a/plugins/shared/info-panel/style.less b/plugins/shared/info-panel/style.less
@@ -183,6 +183,19 @@
             padding: 10px 0 0;
             user-select: text;
 
+            &-code {
+                margin-top: 10px;
+
+                code {
+                    display: -webkit-box;
+                    margin-top: 10px; 
+                    overflow: hidden; 
+                    padding: 3px;
+                    word-wrap: break-word;
+                    -webkit-line-clamp: 25;
+                    -webkit-box-orient: vertical;
+                }
+            }
             &.tota11y-collapsed {
                 display: none
             }