Add surrounding code for each error in the information pane - Fixes #18

jdan · Sep 17, 2015 · c044017 · c044017
1 parent 5051bc1
commit c044017
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
             }