Move clear functions to options, simplify UI

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>

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>

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);
+                            window.open(
-                            getMemory().emit('change', origin);
+                                `/components/report-window/report-window.html?origin=${origin}`,
-                            setMarksOccurrence(false);
+                                'new_tab'
+                            );
                         }}
                     >
-                        <img src="/assets/icons/trash_full.svg" width="20" height="20" />
+                        <img src="/assets/icons/report.svg" width="20" height="20" />
-                        <span>Wyczyść historię wtyczki</span>
+                        <span>Generuj raport</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>
                     </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>

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;
+            }
+        }
+    }
 }

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>
     );