(refactor) FrameData.ts added, inspector altered to have array of fra…

…mes there

config/webpack.dev.config.js

@@ -14,7 +14,7 @@ var srcDir = path.join(appDir, 'src');
 
 var options = {
   entry: {
-    background: path.join(srcDir, 'background.js'),
+    background: path.join(srcDir, 'background.ts'),
     inspector: path.join(srcDir, 'inspector.tsx'),
   },
   output: {

config/webpack.prod.config.js

@@ -14,7 +14,7 @@ var srcDir = path.join(appDir, "src");
 
 var options = {
   entry: {
-    background: path.join(srcDir, "background.js"),
+    background: path.join(srcDir, "background.ts"),
     inspector: path.join(srcDir, "inspector.tsx"),
   },
   output: {

src/FrameData.ts

@@ -0,0 +1,133 @@
+import { FrameEntryType, WebSocketFrame } from './viewer/types';
+import { checkViable, newGetName, stringToBuffer } from './viewer/Helpers/Helper';
+type INC = 'incoming';
+type OUT = 'outgoing';
+export type frameSendingType = INC | OUT;
+type JSON_TYPE = 'json';
+type BINARY_TYPE = 'binary';
+type TEXT_TYPE = 'text';
+const JSON_TYPE: JSON_TYPE = 'json',
+  BINARY_TYPE: BINARY_TYPE = 'binary',
+  TEXT_TYPE: TEXT_TYPE = 'text';
+type contentType = JSON_TYPE | BINARY_TYPE | TEXT_TYPE;
+
+interface FrameAddingProps {
+  id: string;
+  sendingType: frameSendingType;
+  contentType: contentType;
+  time: Date;
+  length: number;
+  text: string;
+  content?: string | Uint8Array | object;
+}
+// TODO to simplify by using _public_ in constructor
+export class FrameEntry {
+  id: string;
+  sendingType: frameSendingType;
+  contentType: contentType;
+  time: Date;
+  length: number;
+  text: string;
+  content?: string | Uint8Array | object;
+  constructor(args: FrameAddingProps) {
+    this.id = args.id;
+    this.sendingType = args.sendingType;
+    this.contentType = args.contentType;
+    this.time = args.time;
+    this.length = args.length;
+    this.text = args.text;
+    this.content = args.content;
+    // Here can be added keys of JSON object or other data
+  }
+}
+// Uses parameters from Network.WebSocket method to add FrameEntry to array
+export const getFrame = (
+  sendingType: frameSendingType,
+  requestId: string,
+  timestamp: number,
+  response: WebSocketFrame
+) => {
+  // Checks ContentType and assigns Content
+  const isDataTextOrObject = response.opcode === 1;
+  const isDataBinary = response.opcode === 2;
+  if (isDataTextOrObject || isDataBinary) {
+    let assignedContentType: contentType, assignedContent: string | Uint8Array | object; // TODO Default value?
+
+    if (isDataBinary) {
+      assignedContent = stringToBuffer(response.payloadData);
+      assignedContentType = BINARY_TYPE;
+    }
+    if (isDataTextOrObject) {
+      try {
+        assignedContent = JSON.parse(response.payloadData);
+        assignedContentType = JSON_TYPE;
+      } catch {
+        assignedContent = response.payloadData;
+        assignedContentType = TEXT_TYPE;
+      }
+    }
+    // Creates a new Frame Entry
+    const FrameAddingProps: FrameAddingProps = {
+      id: Date.now().toString(),
+      sendingType: sendingType,
+      contentType: assignedContentType,
+      time: timestamp, // FIXME Dependency from App
+      length: response.payloadData.length,
+      text: response.payloadData,
+      content: assignedContent,
+    };
+    const frameEntry = new FrameEntry(FrameAddingProps);
+    return frameEntry; // TODO change to FrameAddingProps?
+  }
+};
+// FrameDataArray is an array that has all registered and processed(altered) frames
+export default class FrameDataArray {
+  constructor() {
+    this.frames = [];
+  }
+
+  frames: FrameEntry[] = [];
+  // TODO Method shouldn't rely on extensional parameters
+  addFrameEntry(
+    sendingType: frameSendingType,
+    requestId: string,
+    timestamp: number,
+    response: WebSocketFrame
+  ): void {
+    const newFrame = getFrame(sendingType, requestId, timestamp, response);
+    this.frames.push(newFrame);
+  }
+
+  deleteAllFrameEntries(): void {
+    this.frames = [];
+  }
+  // FrameViewArray represents all frames that had been filtered and grepped
+  getFrameViewArray(): FrameEntry[] {
+    // TODO make connection with control panel
+    const MAX_STRING_LENGTH = 275;
+    const regName = '',
+      filter = '',
+      isFilterInverse = false;
+    const frameViewArray = [];
+    this.frames.map((frameEntry: FrameEntry) => {
+      // TODO refactor checkViable() newGetName to comply with new types
+      if (!checkViable(frameEntry as FrameEntryType, { regName, filter, isFilterInverse })) {
+        const greppedText = newGetName(frameEntry, { regName, filter, isFilterInverse });
+        const processedFrameEntry = Object.assign({}, frameEntry); //copy = JSON.parse(JSON.stringify(original));
+        processedFrameEntry.text = greppedText.slice(0, MAX_STRING_LENGTH);
+        processedFrameEntry.content = undefined;
+        frameViewArray.push(processedFrameEntry);
+      }
+    });
+    return frameViewArray;
+  }
+}
+
+
+/*
+FrameDataObject = {
+  frames: {id as string: FrameEntry object};
+  ids: array of id as string
+}
+
+ */

src/background.js → src/background.ts

@@ -1,7 +1,14 @@
 import './img/icon-128.png';
+import Window from 'chrome';
 
-const inspectors = [];
-
+type inspectorMask = {
+  id: number;
+  popup: Window; // https://developer.chrome.com/extensions/windows#type-Window
+  active: boolean;
+};
+// a list of created inspector windows
+const inspectors: inspectorMask[] = [];
+// Deletes removed inspectors mask from array
 chrome.windows.onRemoved.addListener((id) => {
   const pos = inspectors.findIndex(({ popup }) => popup.id === id);
   if (pos >= 0) {
@@ -11,32 +18,42 @@ chrome.windows.onRemoved.addListener((id) => {
     inspectors.splice(pos, 1);
   }
 });
+// Listens to possible Detachment of existing inspector windows
 chrome.debugger.onDetach.addListener(({ tabId }) => {
   const inspector = inspectors.find(({ id }) => id === tabId);
   if (inspector) {
     inspector.active = false;
   }
 });
 
+// Listens to clicks on extension icon
 chrome.browserAction.onClicked.addListener((tab) => {
+  // Checks if there is an existing inspector window
   const inspector = inspectors.find(({ id }) => id === tab.id);
+  // if true it gets focus
   if (inspector && inspector.active) {
     chrome.windows.update(inspector.popup.id, { focused: true });
   } else {
+    // else attaches debugger to the given target
     chrome.debugger.attach({ tabId: tab.id }, '1.0', () => {
+      // All module of callback executes after attachment attempt
+      // signalize if attachment attempt failed
       if (chrome.runtime.lastError) {
         alert(chrome.runtime.lastError.message);
         return;
       }
 
+      // inspector Local and inspector should be identical  TODO delete inspectorLocal?
       const inspectorLocal = inspectors.find(({ id }) => id === tab.id);
+      // if inspector window exists it get reattached and focused
       if (inspectorLocal) {
         inspectorLocal.active = true;
         chrome.runtime.sendMessage({
           message: 'reattach',
           tabId: tab.id,
         });
         chrome.windows.update(inspectorLocal.popup.id, { focused: true });
+        // else inspector windows created and new object pushed to inspectors array
       } else {
         chrome.windows.create(
           {

src/inspector.tsx

@@ -3,47 +3,74 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './reset.css';
 import App from './viewer/App';
+import { NetworkWebSocketParams } from './viewer/types';
+import FrameDataArray from './FrameData';
 
+// gets tabId of inspected window from URL
 const tabId = parseInt(window.location.search.substr(1), 10);
 // TODO create
 const handlers: any = {};
+const frameDataArray = new FrameDataArray();
 
 function startDebugging() {
+  // Command Debugger to use Network inspector module
   chrome.debugger.sendCommand({ tabId }, 'Network.enable', undefined, () => {
     if (chrome.runtime.lastError) {
       console.error(chrome.runtime.lastError.message);
     } else {
       console.log('Network enabled');
     }
   });
-
+  // Creates title for inspector page
   chrome.tabs.get(tabId, (tab) => {
     if (tab.title) {
-      document.title = `WebSocket Inspector - ${tab.title}`;
+      document.title = `(tab.id = ${tabId}) WebSocket Inspector - ${tab.title} `;
     } else {
       document.title = 'WebSocket Inspector';
     }
   });
 }
-
+// Restarts Network debugging on command
 chrome.runtime.onMessage.addListener((message) => {
   if (message.message === 'reattach' && message.tabId === tabId) {
     startDebugging();
   }
 });
-
+// Starts Network debugging on load
+window.addEventListener('load', () => {
+  startDebugging();
+});
+// Old function to listen Network events TODO refactor to core
 chrome.debugger.onEvent.addListener((debuggee, message, params) => {
   if (debuggee.tabId !== tabId) {
     return;
   }
 
+  // What does this do?
   if (handlers[message]) {
     handlers[message](params);
   }
 });
-
-window.addEventListener('load', () => {
-  startDebugging();
+// New function to listen Network events
+chrome.debugger.onEvent.addListener((source, method, params) => {
+  const METHOD_FRAME_IN = 'Network.webSocketFrameReceived',
+    METHOD_FRAME_OUT = 'Network.webSocketFrameSent';
+  if (source.tabId !== tabId) {
+    return;
+  }
+  if (method === METHOD_FRAME_IN || method === METHOD_FRAME_OUT) {
+    // Get Frame
+    const sendingType = method === METHOD_FRAME_IN ? 'incoming' : 'outgoing';
+    const { requestId, timestamp, response } = params as NetworkWebSocketParams;
+    frameDataArray.addFrameEntry(sendingType, requestId, timestamp, response);
+    console.log({ frameDataArray });
+    let abs = frameDataArray.getFrameViewArray();
+    console.log({ abs });
+  }
 });
 
-ReactDOM.render(<App handlers={handlers} />, document.getElementById('root'));
+const frameViewArray = frameDataArray.getFrameViewArray();
+ReactDOM.render(
+  <App handlers={handlers} frameViewArray={frameViewArray} />,
+  document.getElementById('root')
+);