[Fixes #319] It is not possible to copy text to clipboard from error message on development page.

src/Microsoft.AspNetCore.Diagnostics/DeveloperExceptionPage/Views/ErrorPage.cshtml

@@ -86,16 +86,28 @@
 
         <div id="stackpage" class="page">
             <ul>
-                @{ int tabIndex = 6; }
+                @{
+                    var exceptionCount = 0;
+                    var stackFrameCount = 0;
+                    var exceptionDetailId = "";
+                    var frameId = "";
+                }
                 @foreach (var errorDetail in Model.ErrorDetails)
                 {
+                    @{
+                        exceptionCount++;
+                        exceptionDetailId = "exceptionDetail" + exceptionCount;
+                    }
                     <li>
                         <h2 class="stackerror">@errorDetail.Error.GetType().Name: @errorDetail.Error.Message</h2>
                         <ul>
                         @foreach (var frame in errorDetail.StackFrames)
                         {
-                            <li class="frame" tabindex="@tabIndex">
-                                @{ tabIndex++; }
+                            @{
+                                stackFrameCount++;
+                                frameId = "frame" + stackFrameCount;
+                            }
+                            <li class="frame" id="@frameId">
                                 @if (string.IsNullOrEmpty(frame.File))
                                 {
                                     <h3>@frame.Function</h3>
@@ -107,6 +119,7 @@
 
                                 @if (frame.Line != 0 && frame.ContextCode.Any())
                                 {
+                                    <button class="expandCollapseButton" data-frameId="@frameId">+</button>
                                     <div class="source">
                                         @if (frame.PreContextCode.Any())
                                         {
@@ -143,11 +156,11 @@
                     <li>
                         <br/>
                         <div class="rawExceptionBlock">
-                            <div>
-                                <a href="#" id="rawExceptionButton">Show raw exception details</a>
+                            <div class="showRawExceptionContainer">
+                                <button class="showRawException" data-exceptionDetailId="@exceptionDetailId">Show raw exception details</button>
                             </div>
-                            <div id="rawException" style="display:none">
-                                <pre>@errorDetail.Error.ToString()</pre>
+                            <div id="@exceptionDetailId" class="rawExceptionDetails">
+                                <pre class="rawExceptionStackTrace">@errorDetail.Error.ToString()</pre>
                             </div>
                         </div>
                     </li>

src/Microsoft.AspNetCore.Diagnostics/DeveloperExceptionPage/Views/ErrorPage.css

@@ -54,15 +54,10 @@ body .location {
         cursor: pointer;
     }
 
-        #header li:hover {
-            background: #a9e4f9;
-            color: #fff;
-        }
-
-        #header .selected {
-            background: #44c5f2;
-            color: #fff;
-        }
+    #header .selected {
+        background: #44c5f2;
+        color: #fff;
+    }
 
 #stackpage ul {
     list-style: none;
@@ -82,39 +77,29 @@ body .location {
     border-bottom: 1px #ddd solid;
 }
 
-    #stackpage .stackerror:hover {
-        background-color: #f0f0f0;
-    }
-
-#stackpage .frame:hover {
-    background-color: #f0f0f0;
-    text-decoration: none;
-}
 
 #stackpage .frame {
-    padding: 2px;
+    padding: 0;
     margin: 0 0 0 30px;
-    border-bottom: 1px #ddd solid;
-    cursor: pointer;
 }
 
     #stackpage .frame h3 {
-        padding: 5px;
+        padding: 2px;
         margin: 0;
     }
 
 #stackpage .source {
-    padding: 0;
+    padding: 0 0 0 30px;
 }
 
     #stackpage .source ol li {
         font-family: Consolas, "Courier New", courier, monospace;
         white-space: pre;
+        background-color: #fbfbfb;
     }
 
-#stackpage .frame:hover .source .highlight li span {
-    color: #fff;
-    background: #b20000;
+#stackpage .frame .source .highlight li span {
+    color: #FF0000;
 }
 
 #stackpage .source ol.collapsible li {
@@ -155,9 +140,9 @@ body .location {
         border-right: 1px transparent solid;
     }
 
-    .page .length {
-        text-align: right;
-    }
+.page .length {
+    text-align: right;
+}
 
 a {
     color: #1ba1e2;
@@ -168,3 +153,45 @@ a {
         color: #13709e;
         text-decoration: underline;
     }
+
+.showRawException {
+    cursor: pointer;
+    color: #44c5f2;
+    background-color: transparent;
+    font-size: 1.2em;
+    text-align: left;
+    text-decoration: none;
+    display: inline-block;
+    border: 0;
+    padding: 0;
+    outline: none;
+}
+
+.rawExceptionStackTrace {
+    font-size: 1.2em;
+}
+
+.rawExceptionBlock {
+    border-top: 1px #ddd solid;
+    border-bottom: 1px #ddd solid;
+}
+
+.showRawExceptionContainer {
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
+.expandCollapseButton {
+    cursor: pointer;
+    float: left;
+    height: 16px;
+    width: 16px;
+    font-size: 10px;
+    position: absolute;
+    left: 10px;
+    outline: none;
+    background-color: #eee;
+    padding: 0;
+    border: 0;
+    margin: 0;
+}

src/Microsoft.AspNetCore.Diagnostics/DeveloperExceptionPage/Views/ErrorPage.js

@@ -140,6 +140,17 @@
         ns(".source .collapsible", el).toggle();
     }
 
+    function expandCollapseButton(el) {
+        var frameId = el.getAttribute("data-frameId");
+        frame(document.getElementById(frameId));
+        if (el.innerText === "+") {
+            el.innerText = "-";
+        }
+        else {
+            el.innerText = "+";
+        }
+    }
+
     function tab(el) {
         var unselected = ns("#header .selected").removeClass("selected").attr("id");
         var selected = ns("#" + el.id).addClass("selected").attr("id");
@@ -148,27 +159,18 @@
         ns("#" + selected + "page").show();
     }
 
+    ns(".rawExceptionDetails").hide();
     ns(".collapsible").hide();
     ns(".page").hide();
     ns("#stackpage").show();
 
-    ns("#rawExceptionButton").click(function (event) {
-        var div = document.getElementById('rawException');
-        div.style.display = 'inline-block';
-        div.scrollIntoView(true);
-        event.preventDefault();
-        event.stopPropagation();
-
-        return false;
-    });
-
-    ns(".frame")
+    ns(".expandCollapseButton")
         .click(function () {
-            frame(this);
+            expandCollapseButton(this);
         })
         .keypress(function (e) {
             if (e.which === 13) {
-                frame(this);
+                expandCollapseButton(this);
             }
         });
 
@@ -181,4 +183,10 @@
                 tab(this);
             }
         });
+
+    ns(".showRawException")
+        .click(function () {
+            var exceptionDetailId = this.getAttribute("data-exceptionDetailId");
+            ns("#" + exceptionDetailId).toggle();
+        });
 })(window);