panel.html 9.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
  1. <html ng-app="SAMLChrome" ng-csp="">
  2. <head>
  3. <link rel="stylesheet" type="text/css" href="vendor/assets/stylesheets/jquery.resizableColumns.css">
  4. <link rel="stylesheet" type="text/css" href="vendor/assets/stylesheets/style.css">
  5. <link rel="stylesheet" type="text/css" href="vendor/assets/stylesheets/codemirror.min.css">
  6. <link rel="stylesheet" type="text/css" href="vendor/assets/stylesheets/codemirror-dialog.min.css">
  7. <link rel="stylesheet" type="text/css" href="vendor/assets/stylesheets/codemirror-matchesonscrollbar.min.css">
  8. <link rel="stylesheet" type="text/css" href="assets/stylesheets/panel.css">
  9. <script src="vendor/assets/javascripts/jquery-2.2.4.min.js"></script>
  10. <script src="vendor/assets/javascripts/jquery-ui-1.10.3.custom.min.js"></script>
  11. <script src="vendor/assets/javascripts/keymaster.min.js"></script>
  12. <script src="vendor/assets/javascripts/angular.min.js"></script>
  13. <script src="vendor/assets/javascripts/jquery.resizableColumns.min.js"></script>
  14. <script src="vendor/assets/javascripts/XmlBeautify-1.2.1.min.js"></script>
  15. <script src="vendor/assets/javascripts/rawinflate.js"></script>
  16. <script src="vendor/assets/javascripts/codemirror.min.js"></script>
  17. <script src="vendor/assets/javascripts/codemirror-xml.min.js"></script>
  18. <script src="vendor/assets/javascripts/codemirror-dialog.min.js"></script>
  19. <script src="vendor/assets/javascripts/codemirror-search.min.js"></script>
  20. <script src="vendor/assets/javascripts/codemirror-searchcursor.min.js"></script>
  21. <script src="vendor/assets/javascripts/codemirror-annotatescrollbar.min.js"></script>
  22. <script src="vendor/assets/javascripts/codemirror-matchesonscrollbar.min.js"></script>
  23. <script src="vendor/assets/javascripts/FileSaver.min.js"></script>
  24. <script src="assets/javascripts/app.js"></script>
  25. <script src="assets/javascripts/panel.js"></script>
  26. <script src="assets/javascripts/toolbar.js"></script>
  27. </head>
  28. <body>
  29. <div class="split-view" ng-controller='PanelController' ng-init="init('chrome-extension')">
  30. <div class="split-view-contents split-view-contents-requests">
  31. <div class="data-grid data-grid-requests">
  32. <table class="header" id="requests-header" resizable-columns data-resizable-columns-sync="#requests">
  33. <thead>
  34. <tr>
  35. <th class='request'>
  36. Path
  37. </th>
  38. <th class='method'>
  39. Method
  40. </th>
  41. <th class='status'>
  42. Status
  43. </th>
  44. </tr>
  45. </thead>
  46. </table>
  47. <div class="data-container">
  48. <table id="requests" resizable-columns data-resizable-columns-sync="#requests-header">
  49. <tr class="sizing">
  50. <td class='request'></td>
  51. <td class='method'></td>
  52. <td class='status'></td>
  53. </tr>
  54. <tr class="data" ng-repeat="request in showSamlRequests | orderBy:'id'" ng-click="setActive(request.id)" ng-class="getClass(request.id)" scroll-to-new>
  55. <td class='request {{getTrafficStyle(request)}}' ng-class="{ saml: isSaml(request.id) != saml }" title="{{request.request_url}}">{{request.request_url}}</td>
  56. <td class='method' ng-class="{ saml: isSaml(request.id) != saml }" title="{{request.request_method}}">{{request.request_method}}</td>
  57. <td class='status' ng-class="{ saml: isSaml(request.id) != saml }" title="{{request.response_status}}">{{request.response_status}}</td>
  58. </tr>
  59. <tr class="filler">
  60. <td class='request'></td>
  61. <td class='method'></td>
  62. <td class='status'></td>
  63. </tr>
  64. </table>
  65. </div>
  66. </div>
  67. </div>
  68. <div class="split-view-contents split-view-contents-details">
  69. <div id="tabs" class="tabbed-pane">
  70. <div class="tabbed-pane-header">
  71. <div class="tabbed-pane-header-contents">
  72. <ul class="tabbed-pane-header-tabs">
  73. <li class="tabbed-pane-header-tab" ng-show="activeSaml.length">
  74. <a href="#tab-saml" class="tabbed-pane-header-tab-title" ng-click="selectDetailTab('tab-saml')">SAML</a>
  75. </li>
  76. <li class="tabbed-pane-header-tab">
  77. <a href="#tab-request" class="tabbed-pane-header-tab-title" ng-click="selectDetailTab('tab-request')">Request</a>
  78. </li>
  79. <li class="tabbed-pane-header-tab">
  80. <a href="#tab-response" class="tabbed-pane-header-tab-title" ng-click="selectDetailTab('tab-response')">Response</a>
  81. </li>
  82. </ul>
  83. </div>
  84. <div class="toolbar"></div>
  85. </div>
  86. <div class="tabbed-pane-content data-grid data-grid-details">
  87. <div id="tab-saml">
  88. <div id="tab-saml-codemirror">
  89. </div>
  90. </div>
  91. <div id="tab-request">
  92. <table id="request-data" ng-show="activeRequest.length">
  93. <thead>
  94. <tr>
  95. <th colspan="2">Request Data</th>
  96. </tr>
  97. </thead>
  98. <tbody>
  99. <tr ng-repeat="param in activeRequest">
  100. <td class="key">{{param.name}}</td>
  101. <td class="value"><pretty-print data="param.value"/></td>
  102. </tr>
  103. </tbody>
  104. </table>
  105. <table id="headers" ng-show="activeHeaders.length">
  106. <thead>
  107. <tr>
  108. <th colspan="2">Request Headers</th>
  109. </tr>
  110. </thead>
  111. <tbody>
  112. <tr ng-repeat="param in activeHeaders">
  113. <td class="key">{{param.name}}</td>
  114. <td class="value"><pretty-print data="param.value"/></td>
  115. </tr>
  116. </tbody>
  117. </table>
  118. <table id="postData" ng-show="activePostData.length">
  119. <thead>
  120. <tr>
  121. <th colspan="2">Request POST Data</th>
  122. </tr>
  123. </thead>
  124. <tbody>
  125. <tr ng-repeat="param in activePostData">
  126. <td class="key">{{param.name}}</td>
  127. <td><pretty-print data="param.value"/></td>
  128. </tr>
  129. </tbody>
  130. </table>
  131. <table id="request-cookies" ng-show="activeResponseCookies.length">
  132. <thead>
  133. <tr>
  134. <th colspan="2">Request Cookies</th>
  135. </tr>
  136. </thead>
  137. <tbody>
  138. <tr ng-repeat="param in activeCookies">
  139. <td class="key">{{param.name}}</td>
  140. <td><pretty-print data="param.value"/></td>
  141. </tr>
  142. </tbody>
  143. </table>
  144. </div>
  145. <div id="tab-response">
  146. <table id="response-data" ng-show="activeResponseData.length">
  147. <thead>
  148. <tr>
  149. <th colspan="2">Response Data</th>
  150. </tr>
  151. </thead>
  152. <tbody>
  153. <tr ng-repeat="param in activeResponseData">
  154. <td class="key">{{param.name}}</td>
  155. <td class="value"><pretty-print data="param.value"/></td>
  156. </tr>
  157. </tbody>
  158. </table>
  159. <table id="response-headers" ng-show="activeResponseHeaders.length">
  160. <thead>
  161. <tr>
  162. <th colspan="2">Response Headers</th>
  163. </tr>
  164. </thead>
  165. <tbody>
  166. <tr ng-repeat="param in activeResponseHeaders">
  167. <td class="key">{{param.name}}</td>
  168. <td class="value"><pretty-print data="param.value"/></td>
  169. </tr>
  170. </tbody>
  171. </table>
  172. <table id="response-cookies" ng-show="activeResponseCookies.length">
  173. <thead>
  174. <tr>
  175. <th colspan="2">Response Cookies</th>
  176. </tr>
  177. </thead>
  178. <tbody>
  179. <tr ng-repeat="param in activeResponseCookies">
  180. <td class="key">{{param.name}}</td>
  181. <td><pretty-print data="param.value"/></td>
  182. </tr>
  183. </tbody>
  184. </table>
  185. </div>
  186. </div>
  187. </div>
  188. </div>
  189. </div>
  190. </body>
  191. </html>