From 336d28c44dbd14f11a9f3f1a23827b5430aac64c Mon Sep 17 00:00:00 2001
From: Arkadiusz Wieczorek <kontakt@arkadiusz-wieczorek.pl>
Date: Wed, 6 Jul 2022 19:32:09 +0200
Subject: [PATCH] Move clear functions to options, simplify UI

---
 assets/icons/laptop.svg        | 41 +++++++++++++++++++++++++++++++
 assets/icons/report.svg        | 41 +++++++++++++++++++++++++++++++
 components/sidebar/sidebar.tsx | 40 ++++++++++++++++---------------
 options.scss                   | 44 ++++++++++++++++++++++++++++++++++
 options.tsx                    | 19 +++++++++++++++
 5 files changed, 166 insertions(+), 19 deletions(-)
 create mode 100644 assets/icons/laptop.svg
 create mode 100644 assets/icons/report.svg

diff --git a/assets/icons/laptop.svg b/assets/icons/laptop.svg
new file mode 100644
index 0000000..25092e6
--- /dev/null
+++ b/assets/icons/laptop.svg
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="24"
+   height="24"
+   viewBox="0 0 24 24"
+   fill="none"
+   version="1.1"
+   id="svg135"
+   sodipodi:docname="laptop.svg"
+   inkscape:version="1.2 (dc2aedaf03, 2022-05-15)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs139" />
+  <sodipodi:namedview
+     id="namedview137"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="26.634355"
+     inkscape:cx="11.958239"
+     inkscape:cy="12.990741"
+     inkscape:window-width="1920"
+     inkscape:window-height="1024"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg135" />
+  <path
+     d="M21 19H3C1.89543 19 1 18.1046 1 17V16H3V7C3 5.89543 3.89543 5 5 5H19C20.1046 5 21 5.89543 21 7V16H23V17C23 18.1046 22.1046 19 21 19ZM5 7V16H19V7H5Z"
+     fill="#2E3A59"
+     id="path133"
+     style="fill:#000000" />
+</svg>
diff --git a/assets/icons/report.svg b/assets/icons/report.svg
new file mode 100644
index 0000000..af619f4
--- /dev/null
+++ b/assets/icons/report.svg
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="24"
+   height="24"
+   viewBox="0 0 24 24"
+   fill="none"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="report.svg"
+   inkscape:version="1.2 (dc2aedaf03, 2022-05-15)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     id="namedview6"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="37.666667"
+     inkscape:cx="12.013274"
+     inkscape:cy="12"
+     inkscape:window-width="1920"
+     inkscape:window-height="1024"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4" />
+  <path
+     d="M13.66 4.3C13.5649 3.83433 13.1553 3.5 12.68 3.5H5.5C4.94772 3.5 4.5 3.94772 4.5 4.5V19.5C4.5 20.0523 4.94772 20.5 5.5 20.5C6.05228 20.5 6.5 20.0523 6.5 19.5V13.5H12.1L12.34 14.7C12.4307 15.1683 12.8431 15.5048 13.32 15.5H18.5C19.0523 15.5 19.5 15.0523 19.5 14.5V6.5C19.5 5.94772 19.0523 5.5 18.5 5.5H13.9L13.66 4.3Z"
+     fill="#2E3A59"
+     id="path2"
+     style="fill:#000000" />
+</svg>
diff --git a/components/sidebar/sidebar.tsx b/components/sidebar/sidebar.tsx
index f23ee8e..f3155cc 100644
--- a/components/sidebar/sidebar.tsx
+++ b/components/sidebar/sidebar.tsx
@@ -91,29 +91,16 @@ const Sidebar = () => {
 
             {stolenDataView ? (
                 <nav>
-                    <button onClick={() => setStolenDataView(!stolenDataView)}>
-                        <img src="/assets/icons/settings.svg" width="20" height="20" />
-                        <span>Ustawienia</span>
-                    </button>
                     <button
                         onClick={() => {
-                            getMemory().removeRequestsFor(origin);
-                            getMemory().emit('change', origin);
-                            setMarksOccurrence(false);
+                            window.open(
+                                `/components/report-window/report-window.html?origin=${origin}`,
+                                'new_tab'
+                            );
                         }}
                     >
-                        <img src="/assets/icons/trash_full.svg" width="20" height="20" />
-                        <span>Wyczyść historię wtyczki</span>
-                    </button>
-                    <button
-                        onClick={() => {
-                            getMemory().removeCookiesFor(origin);
-                            getMemory().emit('change', origin);
-                            setMarksOccurrence(false);
-                        }}
-                    >
-                        <img src="/assets/icons/cookie.svg" width="20" height="20" />
-                        <span>Wyczyść ciasteczka</span>
+                        <img src="/assets/icons/report.svg" width="20" height="20" />
+                        <span>Generuj raport</span>
                     </button>
                     <button
                         onClick={() => {
@@ -134,6 +121,11 @@ const Sidebar = () => {
                             {detailsVisibility ? 'Ukryj szczegóły' : 'Wyświetlaj szczegóły'}
                         </span>
                     </button>
+                    <button onClick={() => setStolenDataView(!stolenDataView)}>
+                        <img src="/assets/icons/settings.svg" width="20" height="20" />
+                        <span>Ustawienia</span>
+                    </button>
+
                     {localStorage.getItem('blottingBrowser') ===
                     'nikttakniesplamitwojejprzeglądarkijakspidersweb' ? (
                         <button
@@ -231,6 +223,16 @@ const Sidebar = () => {
                         detailsVisibility={detailsVisibility}
                         setDetailsVisibility={setDetailsVisibility}
                         setStolenDataView={setStolenDataView}
+                        removeCookies={() => {
+                            getMemory().removeCookiesFor(origin);
+                            getMemory().emit('change', origin);
+                            setMarksOccurrence(false);
+                        }}
+                        removeRequests={() => {
+                            getMemory().removeRequestsFor(origin);
+                            getMemory().emit('change', origin);
+                            setMarksOccurrence(false);
+                        }}
                     />
                 )}
             </section>
diff --git a/options.scss b/options.scss
index 8d4d1ce..179fca8 100644
--- a/options.scss
+++ b/options.scss
@@ -31,4 +31,48 @@
             width: 3rem;
         }
     }
+
+    .buttons {
+        display: flex;
+        flex-flow: column;
+        padding: 0.5rem 0 1rem;
+
+        .button-container {
+            padding: 0.25rem 0;
+        }
+
+        button {
+            border: none;
+            cursor: pointer;
+            color: $ultra-black-color;
+            padding: 0;
+            display: flex;
+            flex-wrap: nowrap;
+            line-height: 1.25rem;
+            background: #fff;
+            width: 100%;
+
+            &:hover {
+                color: #000;
+                text-decoration: underline;
+                svg path {
+                    fill: #000;
+                }
+            }
+
+            &:disabled {
+                cursor: not-allowed;
+                color: $disabled-grey;
+                svg path {
+                    fill: $disabled-grey;
+                }
+            }
+
+            span {
+                padding-left: 0.5rem;
+                font-size: 0.875rem;
+                font-weight: 500;
+            }
+        }
+    }
 }
diff --git a/options.tsx b/options.tsx
index deb465d..d37dfe5 100644
--- a/options.tsx
+++ b/options.tsx
@@ -13,6 +13,8 @@ export default function Options({
     detailsVisibility,
     setDetailsVisibility,
     setStolenDataView,
+    removeCookies,
+    removeRequests,
 }: {
     minValueLength: number;
     setMinValueLength: (n: number) => void;
@@ -25,6 +27,8 @@ export default function Options({
     detailsVisibility: boolean;
     setDetailsVisibility: (b: boolean) => void;
     setStolenDataView: (b: boolean) => void;
+    removeCookies: () => void;
+    removeRequests: () => void;
 }) {
     return (
         <Fragment>
@@ -112,6 +116,21 @@ export default function Options({
                         </label>
                     </div>
                 </fieldset>
+                <span>Narzędzia deweloperskie</span>
+                <div className="buttons">
+                    <div className="button-container">
+                        <button onClick={() => removeRequests()}>
+                            <img src="/assets/icons/trash_full.svg" width="20" height="20" />
+                            <span>Wyczyść historię wtyczki</span>
+                        </button>
+                    </div>
+                    <div className="button-container">
+                        <button onClick={() => removeCookies()}>
+                            <img src="/assets/icons/cookie.svg" width="20" height="20" />
+                            <span>Wyczyść ciasteczka</span>
+                        </button>
+                    </div>
+                </div>
             </div>
         </Fragment>
     );