@browserless.io/browserless 2.32.1-beta-1 → 2.33.0

package/extensions/ublocklite/css/popup.css

@@ -2,7 +2,7 @@
 .fa-icon.fa-icon-badged > .fa-icon-badge {
     bottom: auto;
     top: -20%;
-    }
+}
 
 :root {
     --popup-min-width: calc(
@@ -13,40 +13,34 @@
 
 :root body,
 :root.mobile body {
-    --font-size: 15px;
     --popup-gap: var(--font-size);
     --popup-gap-thin: calc(0.5 * var(--popup-gap));
     --popup-gap-extra-thin: calc(0.25 * var(--popup-gap));
-    font-size: var(--font-size);
     min-width: var(--popup-min-width);
-    }
+}
 :root body.loading {
-    opacity: 0;
-    }
+    visibility: hidden;
+}
 a {
     color: var(--ink-1);
         fill: var(--ink-1);
     text-decoration: none;
-    }
+}
 :focus {
     outline: 0;
-    }
+}
 
 #main {
     align-self: flex-start;
     display: flex;
     flex-direction: column;
-    max-width: 340px;
-    }
+}
 :root.portrait #main {
     align-self: inherit;
-    }
+}
 hr {
-    border: 0;
-    border-top: 1px solid var(--hr-ink);
-    margin: 0;
-    padding: 0;
-    }
+    margin: 0.5em 0;
+}
 
 #hostname {
     align-items: center;
@@ -57,231 +51,147 @@ hr {
     padding: 0 var(--popup-gap-extra-thin);
     text-align: center;
     word-break: break-all;
-    }
+}
 #hostname > span {
     word-break: break-all;
-    }
+}
 #hostname > span + span {
     font-weight: 600;
-    }
+}
 
 body[data-forbid~="filteringMode"] .filteringModeSlider {
     pointer-events: none;
-    }
-body[data-forbid~="dashboard"] #gotoDashboard,
-body[data-forbid~="zapper"] #gotoZapper {
-    visibility: hidden;
-    }
+}
+body[data-forbid~="zapper"] #gotoZapper,
+body[data-forbid~="picker"] #gotoPicker,
+body[data-forbid~="picker"] #gotoUnpicker,
+body[data-forbid~="report"] #gotoReport,
+body[data-forbid~="zapper"][data-forbid~="picker"][data-forbid~="report"] .localTools {
+    display: none;
+}
+body[data-forbid~="dashboard"] .globalTools {
+    display: none;
+}
 
 #filteringModeText {
     color: var(--ink-3);
-    margin-bottom: var(--default-gap-small);
-    margin-top: 0;
+    margin-bottom: var(--popup-gap-thin);
     text-align: center;
     text-transform: lowercase;
-    }
+}
 #filteringModeText > span {
     color: var(--accent-surface-1);
-    }
+}
 #filteringModeText > span:nth-of-type(2) {
     display: none;
-    }
+}
 #filteringModeText > span:nth-of-type(2):not(:empty) {
     display: inline;
-    }
+}
 #filteringModeText > span:nth-of-type(2):not(:empty)::before {
     content: '\2002\2192\2002';
-    }
+}
 [dir="rtl"] #filteringModeText > span:nth-of-type(2):not(:empty)::before {
     content: '\2002\2190\2002';
-    }
+}
 
 .filteringModeSlider {
     align-self: center;
-    margin-bottom: var(--popup-gap);
-    margin-top: var(--popup-gap);
-    }
+    margin: var(--popup-gap) 0;
+}
 
-.rulesetTools {
-    background-color: transparent;
-    border: 0;
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-evenly;
-    width: 25%;
-    }
-.rulesetTools [id] {
-    background-color: var(--popup-ruleset-tool-surface);
-    border-radius: 4px;
-    cursor: pointer;
-    fill: var(--popup-ruleset-tool-ink);
-    flex-grow: 1;
-    font-size: 2.2em;
-    padding: 0;
-    visibility: hidden;
-    }
-.rulesetTools [id]:not(:first-of-type) {
-    margin-block-start: 1px;
-    }
-.rulesetTools [id] > svg {
-    fill: var(--ink-4);
-    }
 body.needReload #refresh {
     visibility: visible;
-    }
+}
 
-#rulesetStats {
-    padding: 0 var(--popup-gap-thin);
-    }
-#rulesetStats .rulesetDetails h1 {
-    font-size: 1em;
-    font-weight: normal;
-    margin: 0.5em 0 0.25em 0;
-    }
-#rulesetStats .rulesetDetails p {
+.toolMenu {
+    border-top: 1px solid var(--surface-2);
+    display: flex;
+    flex-direction: column;
+    margin: 0.5em 0;
+    padding-top: 0.5em;
+}
+:root:not(.isHTTP) .needHTTP {
+    display: none;
+}
+.toolMenu > label {
+    font-size: 90%;
     color: var(--ink-2);
-    font-size: var(--font-size-smaller);
-    margin: 0.25em 0 0.5em 0.5em;
-    }
-
-.itemRibbon {
-    column-gap: var(--popup-gap);
-    display: grid;
-    grid-auto-columns: 1fr;
-    grid-auto-flow: column;
-    grid-template: auto / 1fr 1fr;
-    margin: var(--popup-gap);
-    }
-.itemRibbon > span + span {
-    text-align: end;
-    }
+    line-height: calc(var(--font-size) * 1.8);
+    margin-inline-start: 0.5em;
+}
+.toolMenu > .tool {
+    cursor: pointer;
+    display: flex;
+    padding: 0.5em 0.5em 0.5em 0;
+    unicode-bidi: embed;
+}
+.toolMenu > .tool:hover {
+    color: var(--ink-1);
+      fill: var(--ink-1);
+}
+.toolMenu > .tool:not(.enabled) {
+    display: none;
+}
+.toolMenu > .tool .fa-icon {
+    font-size: 1.4em;
+    min-width: 1.4em;
+}
+.toolMenu > .tool [data-i18n] {
+    flex-grow: 1;
+}
 
 .toolRibbon {
-    align-items: start;
     background-color: var(--popup-toolbar-surface);
-    display: grid;
-    grid-auto-columns: 1fr;
-    grid-auto-flow: column;
-    grid-template: auto / repeat(4, 1fr);
-    justify-items: stretch;
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    margin: 0;
     white-space: normal;
-    }
+}
 .toolRibbon .tool {
     cursor: pointer;
     display: flex;
     flex-direction: column;
-    font-size: 1.4em;
     min-width: 32px;
-    padding: var(--popup-gap)
-             var(--popup-gap-extra-thin);
+    padding: var(--default-gap-small);
     unicode-bidi: embed;
     visibility: hidden;
-    }
+}
 .toolRibbon .tool:hover {
     color: var(--ink-1);
         fill: var(--ink-1);
-    }
+}
 .toolRibbon .tool.enabled {
     visibility: visible;
-    }
+}
+.toolRibbon .tool.fa-icon {
+    font-size: 1.4em;
+}
+:root.mobile .toolRibbon .tool.fa-icon {
+    font-size: 1.6em;
+}
 .toolRibbon .tool .caption {
-    color: var(--ink-2);
     font: 10px/12px sans-serif;
     margin-top: 6px;
     text-align: center;
-    }
-body.mobile.no-tooltips .toolRibbon .tool {
-    font-size: 1.6em;
-    }
-.toolRibbon.genericTools {
-    margin-bottom: 0;
-    }
-
-#moreOrLess {
-    column-gap: 0;
-    display: grid;
-    grid-template: auto / 1fr 1fr;
-    justify-items: stretch;
-    margin: 1px 0 0 0;
-    }
-#moreOrLess > span {
-    cursor: pointer;
-    margin: 0;
-    padding: var(--popup-gap-thin) var(--popup-gap);
-    user-select: none;
-    white-space: nowrap;
-    }
-#moreButton .fa-icon {
-    transform: rotate(180deg);
-    }
-#lessButton {
-    border-inline-start: 1px solid var(--surface-1);
-    text-align: end;
-    }
-body[data-section="a b"] #moreButton {
-    pointer-events: none;
-    visibility: hidden;
-    }
-body[data-section=""] #lessButton {
-    pointer-events: none;
-    visibility: hidden;
-    }
-body:not([data-section~="a"]) [data-section="a"] {
-    display: none;
-    }
-body:not([data-section~="b"]) [data-section="b"] {
-    display: none;
-    }
-
-/* configurable UI elements */
-:root:not(.mobile) .toolRibbon .caption,
-:root.mobile body.no-tooltips .toolRibbon .caption,
-:root.mobile body[data-ui~="-captions"] .toolRibbon .caption {
+}
+:root:not(.mobile) .toolRibbon .caption {
     display: none;
-    }
-:root.mobile .toolRibbon .caption,
-:root:not(.mobile) body[data-ui~="+captions"] .toolRibbon .caption {
-    display: inherit;
-    }
-:root:not(.mobile) .toolRibbon .tool,
-:root.mobile body.no-tooltips .toolRibbon .tool,
-:root.mobile body[data-ui~="-captions"] .toolRibbon .tool {
-    padding: var(--popup-gap) var(--popup-gap-thin);
-    }
-:root.mobile #moreOrLess > span {
-    padding: var(--popup-gap);
-    }
+}
 
 /* horizontally-constrained viewport */
 :root.portrait body {
     overflow-y: auto;
     width: 100%;
-    }
+}
 :root.portrait #main {
     max-width: unset;
-    }
+}
 /* mouse-driven devices */
 :root.desktop {
     display: flex;
-    }
-:root.desktop body {
-    --popup-gap: calc(var(--font-size) * 0.875);
-    }
-:root.desktop .rulesetTools [id]:hover {
-    background-color: var(--popup-ruleset-tool-surface-hover);
-    }
-:root.desktop .rulesetTools [id]:hover > svg {
-    fill: var(--ink-2);
-    }
+}
 :root.desktop .tool:hover {
     background-color: var(--popup-toolbar-surface-hover);
-    }
-:root.desktop #moreOrLess > span:hover {
-    background-color: var(--surface-2);
-    /* background-color: var(--popup-toolbar-surface-hover); */
-    }
-
-#templates {
-    display: none;
-    }
+}

package/extensions/ublocklite/css/tool-overlay-ui.css

@@ -0,0 +1,99 @@
+:root {
+    --ubol-overlay-fill: rgba(255,255,255,0.2);
+    --ubol-overlay-border: #FFF;
+    --ubol-overlay-canvas: rgba(128,128,128,0.3);
+}
+:root.dark aside {
+    color-scheme: dark;
+}
+
+:root,
+:root > body {
+    background: transparent;
+    height: 100vh;
+        height: 100svh;
+    margin: 0;
+    overflow: hidden;
+    width: 100vw;
+}
+:root > body.loading {
+    visibility: hidden;
+}
+
+:root :focus {
+    outline: none;
+}
+
+svg#overlay {
+    cursor: crosshair;
+    box-sizing: border-box;
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+}
+svg#overlay > path:first-child {
+    fill: var(--ubol-overlay-canvas);
+    fill-rule: evenodd;
+}
+svg#overlay > path + path {
+    stroke: var(--ubol-overlay-border);
+    stroke-width: 1.5px;
+    fill: var(--ubol-overlay-fill);
+}
+
+:root aside {
+    box-sizing: border-box;
+    cursor: default;
+    display: flex;
+    flex-direction: column;
+    position: fixed;
+    z-index: 100;
+}
+:root body[dir="rtl"] aside {
+    left: 2px;
+    right: unset;
+}
+
+:root.minimized aside > section:not(#windowbar) {
+    display: none !important;
+}
+:root.minimized aside {
+    min-width: min(12em, 100vw - 4px);
+    width: min(12em, 100vw - 4px);
+}
+
+:root aside #windowbar {
+    border-bottom: 1px solid var(--border-1);
+    display: flex;
+}
+:root aside #windowbar > div {
+    fill: none;
+    height: 2em;
+    stroke: var(--ink-1);
+    stroke-width: 2px;
+    width: 2em;
+}
+:root.minimized aside #windowbar > div {
+    height: 3em;
+    width: 3em;
+}
+:root.minimized aside #windowbar > #minimize svg > path,
+#windowbar #minimize svg > rect {
+    display: none;
+}
+:root.minimized aside #windowbar > #minimize svg > rect {
+    display: initial;
+}
+:root #windowbar > #move {
+    align-items: center;
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAYAAACtBE5DAAAAFElEQVQI12NgwAfKy8v/M5ANYLoBshgEyQo6H9UAAAAASUVORK5CYII=');
+    cursor: grab;
+    display: flex;
+    justify-content: center;
+    flex-grow: 1;
+}
+:root #windowbar > div:hover {
+    background-color: var(--surface-2)
+}

package/extensions/ublocklite/css/unpicker-ui.css

@@ -0,0 +1,62 @@
+:root#ubol-unpicker {
+    --ubol-overlay-fill: rgba(64,255,64,0.10);
+    --ubol-overlay-border: #0F0;
+}
+
+#ubol-unpicker svg#overlay {
+    cursor: not-allowed;
+}
+
+:root aside {
+    background-color: var(--surface-1);
+    border: 1px solid var(--border-2);
+    max-height: 40vh;
+    max-width: min(32rem, 100vw - 4px);
+    min-width: min(24rem, 100vw - 4px);
+    width: min(32rem, 100vw - 4px);
+}
+
+#ubol-unpicker aside > section:not(#windowbar) {
+    margin: 1em 1em 0 1em;
+}
+#ubol-unpicker aside > section:not(#windowbar):last-of-type {
+    margin-bottom: 1em;
+}
+#ubol-unpicker aside > section [data-i18n="unpickerUsage"] {
+    color: var(--ink-2);
+    font-size: small;
+}
+
+#ubol-unpicker #customFilters {
+    font-family: monospace;
+}
+#ubol-unpicker .customFilter {
+    display: flex;
+}
+#ubol-unpicker .customFilter:nth-of-type(2n+1) {
+    background-color: var(--surface-2);
+}
+#ubol-unpicker .customFilter > span.selector {
+    flex-grow: 1;
+    font-size: small;
+    padding: 0.5em;
+}
+#ubol-unpicker .customFilter.on > span.selector {
+    background-color: var(--accent-surface-1);
+    color: var(--accent-ink-1);
+}
+#ubol-unpicker .customFilter.removed > span.remove {
+    display: none;
+}
+#ubol-unpicker .customFilter.removed > span.selector {
+    pointer-events: none;
+    text-decoration-line: line-through;
+}
+#ubol-unpicker .customFilter > span.fa-icon {
+    flex-shrink: 0;
+    font-size: 1.25em;
+    padding: 0 0.5em;
+}
+#ubol-unpicker .customFilter:not(.removed) >  span.undo {
+    display: none;
+}

package/extensions/ublocklite/css/zapper-ui.css

@@ -1,54 +1,16 @@
-:root {
+:root#ubol-zapper {
     --quit-button-size: max(4em, min(6em, calc(100vw / 8), calc(100vh / 8)));
+    --ubol-overlay-fill: rgba(255,255,63,0.10);
+    --ubol-overlay-border: #FF0;
 }
 
-html#ubol-zapper,
-#ubol-zapper body {
-    background: transparent;
-    cursor: not-allowed;
-    height: 100vh;
-        height: 100svh;
-    margin: 0;
-    overflow: hidden;
-    width: 100vw;
-}
-#ubol-zapper :focus {
-    outline: none;
-}
 #ubol-zapper aside {
-    box-sizing: border-box;
-    cursor: default;
-    display: flex;
-    flex-direction: column;
     gap: 2px;
-    position: fixed;
     right: 2px;
     top: 50%;
     transform: translateY(-50%);
-    z-index: 100;
-}
-#ubol-zapper body[dir="rtl"] aside {
-    left: 2px;
-    right: unset;
-}
-#ubol-zapper svg#sea {
-    cursor: crosshair;
-    box-sizing: border-box;
-    height: 100%;
-    left: 0;
-    position: absolute;
-    top: 0;
-    width: 100%;
-}
-#ubol-zapper svg#sea > path:first-child {
-    fill: rgba(0,0,0,0.5);
-    fill-rule: evenodd;
-}
-#ubol-zapper svg#sea > path + path {
-    stroke: #FF0;
-    stroke-width: 0.5px;
-    fill: rgba(255,255,63,0.20);
 }
+
 #ubol-zapper aside > div {
     background-color: var(--surface-1);
     border: 1px solid rgba(0,0,0,0.5);

package/extensions/ublocklite/dashboard.html

@@ -133,13 +133,16 @@
             </div>
             <div class="li"><span data-i18n="aboutDependencies"></span></div>
             <div class="liul">
-                <div class="li"><span><a href="https://github.com/chrismsimpson/Metropolis" target="_blank">Metropolis font family</a> by <a href="https://github.com/chrismsimpson">Chris Simpson</a></span></div>
                 <div class="li"><span><a href="https://github.com/rsms/inter" target="_blank">Inter font family</a> by <a href="https://github.com/rsms">Rasmus Andersson</a></span></div>
                 <div class="li"><span><a href="https://fontawesome.com/" target="_blank">FontAwesome font family</a> by <a href="https://github.com/davegandy">Dave Gandy</a></span></div>
                 <div class="li"><span><a href="https://github.com/mathiasbynens/punycode.js" target="_blank">Punycode.js</a> by <a href="https://github.com/mathiasbynens">Mathias Bynens</a></span></div>
                 <div class="li"><span><a href="https://flagpedia.net/" target="_blank">Flags of the World</a> by <a href="https://www.davidkrmela.com/">David Krmela</a></span></div>
                 <div class="li"><span><a href="https://codemirror.net/" target="_blank">CodeMirror 6</a> by <a href="https://github.com/marijnh">Marijn Haverbeke</a></span></div>
             </div>
+            <hr>
+            <details><summary data-i18n="supportS5H"></summary>
+            <pre style="user-select: all; -webkit-user-select: all;"></pre>
+            </details>
         </div>
     </section>
     <!-- -------- -->