leviolson
/
better-network-chrome-panel
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
Extends the Chrome Developer Tools, adding a new Network Panel in the Developer Tools window with better searching and response previews. https://leviolson.com/posts/chrome-ext-better-network-panel
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2 Commits
1 Branch
3.4 MiB
Tree: 94864e52c0
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '94864e52c0'
${ noResults }
better-network-chrome-panel/unpacked/panel/panel.html

248 lines
12 KiB
Raw Normal View History

Initial Commit
4 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
 
  1. <html ng-app="BNPChrome" 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. 

  6.     <link rel="stylesheet" type="text/css" href="vendor/assets/codemirror/lib/codemirror.css">
  7. 

  8.     <link rel="stylesheet" type="text/css" href="vendor/assets/codemirror/theme/3024-day.css">
  9.     <link rel="stylesheet" type="text/css" href="vendor/assets/codemirror/theme/base16-light.css">
  10.     <link rel="stylesheet" type="text/css" href="vendor/assets/codemirror/theme/elegant.css">
  11.     <link rel="stylesheet" type="text/css" href="vendor/assets/codemirror/theme/neat.css">
  12.     <link rel="stylesheet" type="text/css" href="vendor/assets/codemirror/theme/material.css">
  13.     <link rel="stylesheet" type="text/css" href="vendor/assets/codemirror/theme/material-ocean.css">
  14.     
  15.     <link rel="stylesheet" type="text/css" href="vendor/assets/codemirror/addon/dialog/dialog.css">
  16.     <link rel="stylesheet" type="text/css" href="vendor/assets/codemirror/addon/search/matchesonscrollbar.css">
  17.     <link rel="stylesheet" type="text/css" href="vendor/assets/codemirror/addon/fold/foldgutter.css">
  18. 

  19.     <link rel="stylesheet" type="text/css" href="assets/stylesheets/panel.css">
  20.     <script src="vendor/assets/javascripts/jquery-2.2.4.min.js"></script>
  21.     <script src="vendor/assets/javascripts/jquery-ui-1.10.3.custom.min.js"></script>
  22.     <script src="vendor/assets/javascripts/keymaster.min.js"></script>
  23.     <script src="vendor/assets/javascripts/angular.min.js"></script>
  24.     <script src="vendor/assets/javascripts/jquery.resizableColumns.min.js"></script>
  25.     <script src="vendor/assets/javascripts/prettydiff.min.js"></script>
  26.     <script src="vendor/assets/javascripts/rawinflate.js"></script>
  27. 

  28.     <script src="vendor/assets/codemirror/lib/codemirror.js"></script>
  29. 

  30.     <script src="vendor/assets/codemirror/mode/javascript/javascript.js"></script>
  31. 

  32.     <script src="vendor/assets/codemirror/addon/dialog/dialog.js"></script>
  33. 

  34.     <script src="vendor/assets/codemirror/addon/search/search.js"></script>
  35.     <script src="vendor/assets/codemirror/addon/search/jump-to-line.js"></script>
  36.     <script src="vendor/assets/codemirror/addon/search/searchcursor.js"></script>
  37.     <script src="vendor/assets/codemirror/addon/scroll/annotatescrollbar.js"></script>
  38.     <script src="vendor/assets/codemirror/addon/search/matchesonscrollbar.js"></script>
  39. 

  40.     <script src="vendor/assets/codemirror/addon/fold/foldcode.js"></script>
  41.     <script src="vendor/assets/codemirror/addon/fold/foldgutter.js"></script>
  42.     <script src="vendor/assets/codemirror/addon/fold/brace-fold.js"></script>
  43.     <script src="vendor/assets/codemirror/addon/fold/indent-fold.js"></script>
  44. 

  45.     <script src="vendor/assets/javascripts/FileSaver.min.js"></script>
  46.     <script src="assets/javascripts/app.js"></script>
  47.     <script src="assets/javascripts/panel.js"></script>
  48.     <script src="assets/javascripts/toolbar.js"></script>
  49. </head>
  50. <body>
  51. <div class="split-view" ng-controller='PanelController' ng-init="init('chrome-extension')">
  52.     <div class="split-view-contents split-view-contents-requests">
  53.         <div class="data-grid data-grid-requests">
  54.             <table class="header" id="requests-header" resizable-columns data-resizable-columns-sync="#requests">
  55.                 <thead>
  56.                 <tr>
  57.                     <th class='request'>
  58.                         Path
  59.                         <input class="request-filter" ng-model="filter" placeholder="Filter" ng-change="filterRequests()" />
  60.                         <button ng-click="filter = 'apexremote'; filterRequests()">Apex</button>
  61.                         <button ng-click="filter = 'carts'; filterRequests()">CartsAPI</button>
  62.                     </th>
  63.                     <th class='apextype'>
  64.                         Apex Type
  65.                     </th>
  66.                     <th class='apexmethod'>
  67.                         Apex Method
  68.                     </th>
  69.                     <th class='method'>
  70.                         Method
  71.                     </th>
  72.                     <th class='status'>
  73.                         Status
  74.                     </th>
  75.                     <th class='time'>
  76.                         Time
  77.                     </th>
  78.                 </tr>
  79.                 </thead>
  80.             </table>
  81.             <div class="data-container">
  82.                 <table id="requests" resizable-columns data-resizable-columns-sync="#requests-header">
  83.                     <tr class="sizing">
  84.                         <td class='request'></td>
  85.                         <td class='apextype'></td>
  86.                         <td class='apexmethod'></td>
  87.                         <td class='method'></td>
  88.                         <td class='status'></td>
  89.                         <td class='time'></td>
  90.                     </tr>
  91.                     <tr class="data clickable" ng-repeat="request in filteredRequests | orderBy:'id'" ng-click="setActive(request.id)" ng-class="getClass(request.id)">
  92.                         <!-- scroll-to-new -->
  93.                         <td class='request {{getTrafficStyle(request)}}' title="{{request.request_url}}">{{request.request_url}}</td>
  94.                         <td class='apextype' title="{{request.request_apex_type}}">{{request.request_apex_type}}</td>
  95.                         <td class='apexmethod' title="{{request.request_apex_method}}">{{request.request_apex_method}}</td>
  96.                         <td class='method' title="{{request.request_method}}">{{request.request_method}}</td>
  97.                         <td class='status' title="{{request.response_status}}">{{request.response_status}}</td>
  98.                         <td class='time' title="{{request.time}}">{{ request.time / 1000 | number : 2 }} s</td>
  99.                     </tr>
  100.                     <tr class="filler">
  101.                         <td class='request'></td>
  102.                         <td class='apextype'></td>
  103.                         <td class='apexmethod'></td>
  104.                         <td class='method'></td>
  105.                         <td class='status'></td>
  106.                         <td class='time'></td>
  107.                     </tr>
  108.                 </table>
  109.             </div>
  110.         </div>
  111.     </div>
  112. 

  113.     <div class="split-view-contents split-view-contents-details">
  114.         <div id="tabs" class="tabbed-pane">
  115.             <div class="tabbed-pane-header">
  116.                 <div class="tabbed-pane-header-contents">
  117.                     <ul class="tabbed-pane-header-tabs">
  118.                         <li class="tabbed-pane-header-tab">
  119.                             <a href="#tab-code" class="tabbed-pane-header-tab-title" ng-click="selectDetailTab('tab-code')">Preview</a>
  120.                         </li>
  121.                         <li class="tabbed-pane-header-tab">
  122.                             <a href="#tab-request" class="tabbed-pane-header-tab-title" ng-click="selectDetailTab('tab-request')">Request</a>
  123.                         </li>
  124.                         <li class="tabbed-pane-header-tab">
  125.                             <a href="#tab-response" class="tabbed-pane-header-tab-title" ng-click="selectDetailTab('tab-response')">Response</a>
  126.                         </li>
  127.                     </ul>
  128.                 </div>
  129. 

  130.                 <div class="toolbar"></div>
  131. 

  132.             </div>
  133. 

  134.             <div class="tabbed-pane-content data-grid data-grid-details">
  135. 

  136.                 <div id="tab-request">
  137.                     <table id="postData" ng-show="activePostData.length">
  138.                         <thead>
  139.                         <tr>
  140.                             <th colspan="2">Request POST Data</th>
  141.                         </tr>
  142.                         </thead>
  143.                         <tbody>
  144.                         <tr ng-repeat="param in activePostData">
  145.                             <td class="key">{{param.name}}</td>
  146.                             <td><pretty-print data="param.value"/></td>
  147.                         </tr>
  148.                         </tbody>
  149.                     </table>
  150. 

  151.                     <table id="request-data" ng-show="activeRequest.length">
  152.                         <thead>
  153.                         <tr>
  154.                             <th colspan="2">Request Data</th>
  155.                         </tr>
  156.                         </thead>
  157.                         <tbody>
  158.                         <tr ng-repeat="param in activeRequest">
  159.                             <td class="key">{{param.name}}</td>
  160.                             <td class="value"><pretty-print data="param.value"/></td>
  161.                         </tr>
  162.                         </tbody>
  163.                     </table>
  164. 

  165.                     <table id="headers" ng-show="activeHeaders.length">
  166.                         <thead>
  167.                         <tr>
  168.                             <th colspan="2">Request Headers</th>
  169.                         </tr>
  170.                         </thead>
  171.                         <tbody>
  172.                         <tr ng-repeat="param in activeHeaders">
  173.                             <td class="key">{{param.name}}</td>
  174.                             <td class="value"><pretty-print data="param.value"/></td>
  175.                         </tr>
  176.                         </tbody>
  177.                     </table>
  178. 

  179.                     <table id="request-cookies" ng-show="activeResponseCookies.length">
  180.                         <thead>
  181.                         <tr>
  182.                             <th colspan="2">Request Cookies</th>
  183.                         </tr>
  184.                         </thead>
  185.                         <tbody>
  186.                         <tr ng-repeat="param in activeCookies">
  187.                             <td class="key">{{param.name}}</td>
  188.                             <td><pretty-print data="param.value"/></td>
  189.                         </tr>
  190.                         </tbody>
  191.                     </table>
  192.                 </div>
  193. 

  194.                 <div id="tab-response">
  195.                     <table id="response-data" ng-show="activeResponseData.length">
  196.                         <thead>
  197.                         <tr>
  198.                             <th colspan="2">Response Data</th>
  199.                         </tr>
  200.                         </thead>
  201.                         <tbody>
  202.                         <tr ng-repeat="param in activeResponseData">
  203.                             <td class="key">{{param.name}}</td>
  204.                             <td class="value"><pretty-print data="param.value"/></td>
  205.                         </tr>
  206.                         </tbody>
  207.                     </table>
  208. 

  209.                     <table id="response-headers" ng-show="activeResponseHeaders.length">
  210.                         <thead>
  211.                         <tr>
  212.                             <th colspan="2">Response Headers</th>
  213.                         </tr>
  214.                         </thead>
  215.                         <tbody>
  216.                         <tr ng-repeat="param in activeResponseHeaders">
  217.                             <td class="key">{{param.name}}</td>
  218.                             <td class="value"><pretty-print data="param.value"/></td>
  219.                         </tr>
  220.                         </tbody>
  221.                     </table>
  222.                     <table id="response-cookies" ng-show="activeResponseCookies.length">
  223.                         <thead>
  224.                         <tr>
  225.                             <th colspan="2">Response Cookies</th>
  226.                         </tr>
  227.                         </thead>
  228.                         <tbody>
  229.                         <tr ng-repeat="param in activeResponseCookies">
  230.                             <td class="key">{{param.name}}</td>
  231.                             <td><pretty-print data="param.value"/></td>
  232.                         </tr>
  233.                         </tbody>
  234.                     </table>
  235.                 </div>
  236. 

  237. 

  238.                 <div id="tab-code">
  239.                     <div id="tab-code-codemirror">
  240.                     </div>
  241.                 </div>
  242. 

  243.             </div>
  244.         </div>
  245.     </div>
  246. </div>
  247. </body>
  248. </html>