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/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,7 @@ html {
 
 .title{
   grid-column: 1/6;
-  grid-row: 7;
+  grid-row: 5;
   text-align: center;
   color: var(--text-color); 
   display: flex;
@@ -96,59 +96,6 @@ html {
   font-weight: bold;
 }
 
-/*  CHECKBOX  */
-.window-close { 
-  grid-column: 1 / 3;
-  grid-row: 4 / 6;
-  display: grid;
-  grid-template-columns: repeat(2, 6rem);
-  grid-gap: 1rem;
-  justify-content: space-between;
-  input { display: none; }
-
-  &__1 {
-    width: 6rem;
-    display: flex;
-    margin-left: 1rem;
-    justify-content: center;
-    label {
-    box-shadow: $shadow;
-        cursor: pointer;
-    position: relative;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-        border-radius: .5rem;
-        width: 2.8rem;
-        height: 2.8rem;
-  }
-
-  & input:checked {
-    & ~ label {
-      box-shadow: $inner-shadow;
-    }
-  }
-}
-}
-
-.done{
-  &.invisible {
-    opacity: 0;
-  }
-}
-
-
-.window-handle-label{
-  font-size: 1.5rem;
-  grid-column: 2 / 10;
-  height: 4rem;
-  font-size: 1.8rem;
-  background: none;
-  font-family: inherit;
-  line-height: 2.8rem;
-  color: var(--text-color);
-}
-
 /*  PLAY BUTTON  */
 .record {
   grid-column: 1 / 6;
@@ -233,10 +180,11 @@ html {
 /*  FORM  */
 .form {
   grid-column: 1 / 6;
-  grid-row: 6 / 7 ;
+  grid-row: 4 / 5 ;
   align-self: center;
   display: flex;
   justify-content:space-between;
+  color: var(--text-color);
 
   &__input {
     width: 20.4rem;
@@ -248,7 +196,6 @@ html {
     box-shadow: $inner-shadow;
     background: none;
     font-family: inherit;
-    color: var(--greyDark);
 
     &::placeholder { color: var(--greyLight-3); }
     &:focus { outline: none; box-shadow: $shadow; }
@@ -257,7 +204,6 @@ html {
       box-shadow: $shadow;
     }
   }
-
 }
 
 /*  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

@@ -26,6 +26,10 @@ <h1>ZAP Browser Extension</h1>
         <td><label>Enable</label></td>
         <td><input type="checkbox" id="zapenable"/></td>
       </tr>
+      <tr>
+        <td><label>Automatically close the browser in the recorded scripts</label></td>
+        <td><input type="checkbox" id="window-close-input"/></td>
+      </tr>
       <tr>
         <td></td>
         <td><button type="submit" id="save">Save</button></td>
@@ -35,4 +39,4 @@ <h1>ZAP Browser Extension</h1>
     <script src="../../option.js"></script>
     For more info see <a href="https://github.com/zaproxy/browser-extension/">https://github.com/zaproxy/browser-extension/</a>
   </body>
-</html>
+</html>