From c0440170a97ed6ba3aae8eb100c3b82c7aa86cc8 Mon Sep 17 00:00:00 2001
From: Bill Pond <william.e.pond@gmail.com>
Date: Tue, 15 Sep 2015 11:52:45 -0400
Subject: [PATCH] Add surrounding code for each error in the information pane -
 Fixes #18

---
 less/base.less                             |  2 +-
 plugins/shared/info-panel/error.handlebars |  7 ++++++-
 plugins/shared/info-panel/index.js         | 14 +++++++++++++-
 plugins/shared/info-panel/style.less       | 10 ++++++++++
 4 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/less/base.less b/less/base.less
index 674189ff..0f3ad762 100644
--- a/less/base.less
+++ b/less/base.less
@@ -45,7 +45,7 @@
     }
 
     pre {
-        padding: 10px;
+        padding: 5px 10px;
         margin: 0 0 10px;
         overflow-x: scroll;
     }
diff --git a/plugins/shared/info-panel/error.handlebars b/plugins/shared/info-panel/error.handlebars
index 20767e2b..329aebea 100644
--- 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-container">
+            <em>Relevant code:</em>
+            <code></code>
+        </div>
+    </div>
 </li>
diff --git a/plugins/shared/info-panel/index.js b/plugins/shared/info-panel/index.js
index 7c851189..a6ea39da 100644
--- 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,18 @@ class InfoPanel {
                 // highlight when scrolling to the element with the button.
                 annotate.toggleHighlight(error.$el, $trigger);
                 annotate.toggleHighlight(error.$el, $scroll);
+
+                // Add code from error.$el to the information panel
+                let errorHTML = error.$el[0].outerHTML;
+
+                // Trim the code block if it is over 300 characters
+                if (errorHTML.length > 300) {
+                    errorHTML = errorHTML.substring(0, 300) + "...";
+                }
+
+                let $relevantCode = $error.find(
+                    ".tota11y-info-error-description-code-container code");
+                $relevantCode.text(errorHTML);
             });
 
             $errorsTab = $activeTab = this._addTab("Errors", $errors);
diff --git a/plugins/shared/info-panel/style.less b/plugins/shared/info-panel/style.less
index b4fdef77..6516a0f6 100644
--- a/plugins/shared/info-panel/style.less
+++ b/plugins/shared/info-panel/style.less
@@ -183,6 +183,16 @@
             padding: 10px 0 0;
             user-select: text;
 
+            &-code-container {
+                margin-top: @panelPadding;
+
+                code {
+                    display: block;
+                    margin-top: 10px;
+                    padding: 5px @panelPadding;
+                    word-wrap: break-word;
+                }
+            }
             &.tota11y-collapsed {
                 display: none
             }