anchor.diff:              <% end %>
           </table>
       </header>
  +    <nav>
  +        <a href="#" id="application_frames">Application Frames</a>
  +        <a href="#" id="all_frames">All Frames</a>
  +    </nav>
       <section class="backtrace">
           <ul class="frames">
               <% backtrace_frames.each_with_index do |frame, index| %>
  
positive.code:     }
      header table th, header table td {
          padding:4px 6px;
      }
      .frames {
          width:50%;
  
negative.code:     }
      
      document.querySelector(".frames li:first-child").click();
      
      var applicationFrames = document.getElementById("application_frames");
      var allFrames = document.getElementById("all_frames");
      
      applicationFrames.onclick = function() {
          allFrames.className = "";
          applicationFrames.className = "selected";
          for(var i = 0; i < frames.length; i++) {
              if(frames[i].attributes["data-context"].value == "application") {
                  frames[i].style.display = "block";
              } else {
                  frames[i].style.display = "none";
              }
          }
          return false;
      };
      
      allFrames.onclick = function() {
          applicationFrames.className = "";
          allFrames.className = "selected";
          for(var i = 0; i < frames.length; i++) {
              frames[i].style.display = "block";
          }
          return false;
      };
      
      applicationFrames.click();
  })();
  </script>
  </html>
  