fixed conflicts

Signed-off-by: aryangupta701 <[email protected]>

package.json

@@ -37,7 +37,6 @@
     "emoji-log": "^1.0.2",
     "i18next": "^23.2.6",
     "i18next-browser-languagedetector": "^7.1.0",
-    "i18next-xhr-backend": "^3.2.2",
     "lodash": "^4.17.21",
     "webext-base-css": "^1.3.1",
     "webextension-polyfill": "0.10.0"

source/ContentScript/index.ts

@@ -24,7 +24,7 @@ import {
   ReportedStorage,
   ReportedEvent,
 } from '../types/ReportedModel';
-import Recorder from './Recorder';
+import Recorder from './recorder';
 
 const reportedObjects = new Set<string>();
 

source/ContentScript/Recorder.ts → source/ContentScript/recorder.ts

@@ -24,7 +24,6 @@ import {
   ZestStatementElementClick,
   ZestStatementElementSendKeys,
   ZestStatementLaunchBrowser,
-  ZestStatementSwichToFrame,
 } from '../types/zestScript/ZestStatement';
 import {getPath} from './util';
 
@@ -46,23 +45,38 @@ class Recorder {
     });
   }
 
-  handleFrameSwitches(level: number, frameIndex: number): void {
-    if (this.curLevel === level && this.curFrame === frameIndex) {
-      return;
-    }
-    if (this.curLevel > level) {
+  handleFrameSwitches(level: number, frame: number): void {
+    if (this.curLevel === level && this.curFrame === frame) {
+      // do nothing
+    } else if (this.curLevel > level) {
       while (this.curLevel > level) {
-        this.sendZestScriptToZAP(new ZestStatementSwichToFrame(-1));
         this.curLevel -= 1;
+        console.log(
+          'Switched to level: ',
+          this.curLevel,
+          'Frame:',
+          this.curFrame
+        );
+        // switch to parent frame
       }
-      this.curFrame = frameIndex;
+      this.curFrame = frame;
+      console.log(
+        'Switched to level: ',
+        this.curLevel,
+        'Frame:',
+        this.curFrame
+      );
+      // switch to frame
     } else {
       this.curLevel += 1;
-      this.curFrame = frameIndex;
-      this.sendZestScriptToZAP(new ZestStatementSwichToFrame(frameIndex));
-    }
-    if (this.curLevel !== level) {
-      console.log('Error in switching frames');
+      this.curFrame = frame;
+      console.log(
+        'Switched to level: ',
+        this.curLevel,
+        'Frame:',
+        this.curFrame
+      );
+      // switch to frame number 'frame'
     }
   }
 

source/Options/index.tsx

@@ -32,10 +32,14 @@ function saveOptions(): void {
   const zapkey = (document.getElementById(ZAP_KEY) as HTMLInputElement).value;
   const zapenable = (document.getElementById(ZAP_ENABLE) as HTMLInputElement)
     .checked;
+  const zapclosewindowhandle = (
+    document.getElementById('window-close-input') as HTMLInputElement
+  ).checked;
   Browser.storage.sync.set({
     zapurl,
     zapkey,
     zapenable,
+    zapclosewindowhandle,
   });
 }
 
@@ -49,6 +53,7 @@ function restoreOptions(): void {
       zapkey: 'not set',
       zapenable: true,
       zaprecordingactive: false,
+      zapclosewindowhandle: true,
     })
     .then((items) => {
       (document.getElementById(ZAP_URL) as HTMLInputElement).value =
@@ -57,6 +62,9 @@ function restoreOptions(): void {
         items.zapkey;
       (document.getElementById(ZAP_ENABLE) as HTMLInputElement).checked =
         items.zapenable;
+      (
+        document.getElementById('window-close-input') as HTMLInputElement
+      ).checked = items.zapclosewindowhandle;
     });
 }
 document.addEventListener('DOMContentLoaded', restoreOptions);

source/Popup/i18n.tsx

@@ -1,19 +1,42 @@
+/*
+ * Zed Attack Proxy (ZAP) and its related source files.
+ *
+ * ZAP is an HTTP/HTTPS proxy for assessing web application security.
+ *
+ * Copyright 2023 The ZAP Development Team
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
 import i18n from 'i18next';
 import LanguageDetector from 'i18next-browser-languagedetector';
-import XHRBackend from 'i18next-xhr-backend';
 
-i18n
-  .use(XHRBackend)
-  .use(LanguageDetector)
-  .init({
-    backend: {
-      loadPath: '../assets/locales/{{lng}}/{{ns}}.json',
+i18n.use(LanguageDetector).init({
+  resources: {
+    en: {
+      translation: {
+        start: 'Start Recording',
+        stop: 'Stop Recording',
+        download: 'Download Script',
+        options: 'Options',
+      },
     },
-    fallbackLng: 'en',
-    debug: false,
-    interpolation: {
-      escapeValue: false,
-    },
-  });
+  },
+  defaultNS: 'translation',
+  fallbackLng: 'en',
+  debug: false,
+  interpolation: {
+    escapeValue: false,
+  },
+});
 
 export default i18n;

source/Popup/index.tsx

@@ -19,22 +19,27 @@
  */
 import Browser from 'webextension-polyfill';
 import './styles.scss';
+import i18n from './i18n';
+
+const STOP = i18n.t('stop');
+const START = i18n.t('start');
+const OPTIONS = i18n.t('options');
+const DOWNLOAD = i18n.t('download');
 
 const play = document.querySelector('.play');
 const pause = document.querySelector('.pause');
 const wave1 = document.querySelector('.record__back-1');
 const wave2 = document.querySelector('.record__back-2');
 const done = document.querySelector('.done');
+const optionsIcon = document.querySelector('.settings') as HTMLImageElement;
+const downloadIcon = document.querySelector('.download') as HTMLImageElement;
 
 const recordButton = document.getElementById('record-btn');
 const configureButton = document.getElementById('configure-btn');
 const saveScript = document.getElementById('save-script');
 const scriptNameInput = document.getElementById(
   'script-name-input'
 ) as HTMLInputElement;
-const windowHandleCloseInput = document.getElementById(
-  'window-close-input'
-) as HTMLInputElement;
 const saveScriptButton = document.getElementById(
   'save-script'
 ) as HTMLButtonElement;
@@ -54,6 +59,7 @@ function stoppedAnimation(): void {
   recordButton?.classList.add('shadow');
   wave1?.classList.add('paused');
   wave2?.classList.add('paused');
+  (play as HTMLImageElement).title = START;
 }
 
 function startedAnimation(): void {
@@ -62,16 +68,18 @@ function startedAnimation(): void {
   recordButton?.classList.remove('shadow');
   wave1?.classList.remove('paused');
   wave2?.classList.remove('paused');
+  (play as HTMLImageElement).title = STOP;
 }
 
 async function restoreState(): Promise<void> {
   console.log('Restore state');
   await Browser.runtime.sendMessage({type: 'setSaveScriptEnable'});
+  optionsIcon.title = OPTIONS;
+  downloadIcon.title = DOWNLOAD;
   Browser.storage.sync
     .get({
       zaprecordingactive: false,
       zapscriptname: '',
-      zapclosewindowhandle: false,
       zapenablesavescript: false,
     })
     .then((items) => {
@@ -81,7 +89,6 @@ async function restoreState(): Promise<void> {
         stoppedAnimation();
       }
       scriptNameInput.value = items.zapscriptname;
-      windowHandleCloseInput.checked = items.zapclosewindowhandle;
       if (items.zapclosewindowhandle) {
         done?.classList.remove('invisible');
       } else {
@@ -150,7 +157,7 @@ function downloadZestScript(zestScriptJSON: string, title: string): void {
 
   const link = document.createElement('a');
   link.href = url;
-  link.download = `${title}.zst`;
+  link.download = title + (title.slice(-4) === '.zst' ? '' : '.zst');
   link.style.display = 'none';
 
   document.body.appendChild(link);
@@ -159,6 +166,9 @@ function downloadZestScript(zestScriptJSON: string, title: string): void {
 
   URL.revokeObjectURL(url);
   Browser.runtime.sendMessage({type: 'resetZestScript'});
+  Browser.storage.sync.set({
+    zaprecordingactive: false,
+  });
   closePopup();
 }
 
@@ -176,23 +186,10 @@ function handleScriptNameChange(e: Event): void {
   sendMessageToContentScript('updateTitle', value);
 }
 
-function handleWindowHandleClose(e: Event): void {
-  const {checked} = e.target as HTMLInputElement;
-  if (checked) {
-    done?.classList.remove('invisible');
-  } else {
-    done?.classList.add('invisible');
-  }
-  Browser.storage.sync.set({
-    zapclosewindowhandle: checked,
-  });
-}
-
 document.addEventListener('DOMContentLoaded', restoreState);
 document.addEventListener('load', restoreState);
 
 recordButton?.addEventListener('click', toggleRecording);
 configureButton?.addEventListener('click', openOptionsPage);
 saveScript?.addEventListener('click', handleSaveScript);
 scriptNameInput?.addEventListener('input', handleScriptNameChange);
-windowHandleCloseInput?.addEventListener('click', handleWindowHandleClose);

source/Popup/styles.scss

@@ -77,7 +77,11 @@ html {
 
 .title{
   grid-column: 1/6;
+<<<<<<< HEAD
   grid-row: 7;
+=======
+  grid-row: 5;
+>>>>>>> b436806eb3ab56fe86b2c8fbbfcee9c50ea43ee0
   text-align: center;
   color: var(--text-color); 
   display: flex;
@@ -96,6 +100,7 @@ html {
   font-weight: bold;
 }
 
+<<<<<<< HEAD
 /*  CHECKBOX  */
 .window-close { 
   grid-column: 1 / 3;
@@ -149,6 +154,8 @@ html {
   color: var(--text-color);
 }
 
+=======
+>>>>>>> b436806eb3ab56fe86b2c8fbbfcee9c50ea43ee0
 /*  PLAY BUTTON  */
 .record {
   grid-column: 1 / 6;
@@ -233,10 +240,18 @@ html {
 /*  FORM  */
 .form {
   grid-column: 1 / 6;
+<<<<<<< HEAD
   grid-row: 6 / 7 ;
   align-self: center;
   display: flex;
   justify-content:space-between;
+=======
+  grid-row: 4 / 5 ;
+  align-self: center;
+  display: flex;
+  justify-content:space-between;
+  color: var(--text-color);
+>>>>>>> b436806eb3ab56fe86b2c8fbbfcee9c50ea43ee0
 
   &__input {
     width: 20.4rem;
@@ -248,7 +263,10 @@ html {
     box-shadow: $inner-shadow;
     background: none;
     font-family: inherit;
+<<<<<<< HEAD
     color: var(--greyDark);
+=======
+>>>>>>> b436806eb3ab56fe86b2c8fbbfcee9c50ea43ee0
 
     &::placeholder { color: var(--greyLight-3); }
     &:focus { outline: none; box-shadow: $shadow; }
@@ -257,7 +275,10 @@ html {
       box-shadow: $shadow;
     }
   }
+<<<<<<< HEAD
 
+=======
+>>>>>>> b436806eb3ab56fe86b2c8fbbfcee9c50ea43ee0
 }
 
 /*  ICONS  */

test/ContentScript/integrationTests.test.ts

@@ -176,8 +176,7 @@ function integrationTests(
       const context = await driver.getContext(_JSONPORT, true);
       await driver.setEnable(false);
       const page = await context.newPage();
-      await page.goto(await driver.getPopupURL());
-      await page.click('.done');
+      await page.goto(await driver.getOptionsURL());
       await page.goto(
         `http://localhost:${_HTTPPORT}/webpages/interactions.html`
       );

views/options.html

@@ -27,6 +27,13 @@ <h1>ZAP Browser Extension</h1>
         <td><input type="checkbox" id="zapenable"/></td>
       </tr>
       <tr>
+<<<<<<< HEAD
+=======
+        <td><label>Automatically close the browser in the recorded scripts</label></td>
+        <td><input type="checkbox" id="window-close-input"/></td>
+      </tr>
+      <tr>
+>>>>>>> b436806eb3ab56fe86b2c8fbbfcee9c50ea43ee0
         <td></td>
         <td><button type="submit" id="save">Save</button></td>
       </tr>