@browserless.io/browserless 2.30.1 → 2.31.1-beta-1

package/extensions/ublocklite/_locales/vi/messages.json

@@ -19,6 +19,10 @@
     "message": "Cài đặt",
     "description": "appears as tab name in dashboard"
   },
+  "developPageName": {
+    "message": "Develop",
+    "description": "appears as tab name in dashboard. Inspired from 'Develop' menu in Safari, see https://developer.apple.com/documentation/safari-developer-tools/develop-menu"
+  },
   "aboutPageName": {
     "message": "Giới thiệu",
     "description": "appears as tab name in dashboard"
@@ -233,8 +237,16 @@
   },
   "enableStrictBlockLegend": {
     "message": "Việc điều hướng đến các trang web có khả năng không mong muốn sẽ bị chặn và bạn sẽ được cung cấp tùy chọn để tiếp tục.",
+    "description": "Short description for a checkbox in the options page"
+  },
+  "developerModeLabel": {
+    "message": "Developer mode",
     "description": "Label for a checkbox in the options page"
   },
+  "developerModeLegend": {
+    "message": "Enables access to features suitable for technical users.",
+    "description": "Short description for a checkbox in the options page"
+  },
   "findListsPlaceholder": {
     "message": "Tìm danh sách",
     "description": "Placeholder for the input field used to find lists"
@@ -282,5 +294,29 @@
   "zapperTipQuit": {
     "message": "Thoát khỏi chế độ chặn phần tử tạm thời",
     "description": "Tooltip for the button used to exit zapper mode"
+  },
+  "saveButton": {
+    "message": "Save",
+    "description": "Text for buttons used to save changes"
+  },
+  "revertButton": {
+    "message": "Revert",
+    "description": "Text for buttons used to revert changes"
+  },
+  "importAndAppendButton": {
+    "message": "Import and append…",
+    "description": "Text for buttons used to import and append content"
+  },
+  "exportButton": {
+    "message": "Export…",
+    "description": "Text for buttons used to export content"
+  },
+  "dnrRulesSummary": {
+    "message": "Enter your own DNR rules below. <b>Do not add content from untrusted sources.</b>",
+    "description": "Short description of the DNR rules editor pane"
+  },
+  "dnrRulesCountInfo": {
+    "message": "Number of registered rules: {count}",
+    "description": "Short sentence to report the number of currently registered DNR rules"
   }
 }

package/extensions/ublocklite/_locales/zh_CN/messages.json

@@ -19,6 +19,10 @@
     "message": "设置",
     "description": "appears as tab name in dashboard"
   },
+  "developPageName": {
+    "message": "Develop",
+    "description": "appears as tab name in dashboard. Inspired from 'Develop' menu in Safari, see https://developer.apple.com/documentation/safari-developer-tools/develop-menu"
+  },
   "aboutPageName": {
     "message": "关于",
     "description": "appears as tab name in dashboard"
@@ -233,8 +237,16 @@
   },
   "enableStrictBlockLegend": {
     "message": "导航至潜在不良网站的操作将被拦截，并且您将可以选择继续前往。",
+    "description": "Short description for a checkbox in the options page"
+  },
+  "developerModeLabel": {
+    "message": "Developer mode",
     "description": "Label for a checkbox in the options page"
   },
+  "developerModeLegend": {
+    "message": "Enables access to features suitable for technical users.",
+    "description": "Short description for a checkbox in the options page"
+  },
   "findListsPlaceholder": {
     "message": "查找列表",
     "description": "Placeholder for the input field used to find lists"
@@ -282,5 +294,29 @@
   "zapperTipQuit": {
     "message": "退出临时元素移除模式",
     "description": "Tooltip for the button used to exit zapper mode"
+  },
+  "saveButton": {
+    "message": "Save",
+    "description": "Text for buttons used to save changes"
+  },
+  "revertButton": {
+    "message": "Revert",
+    "description": "Text for buttons used to revert changes"
+  },
+  "importAndAppendButton": {
+    "message": "Import and append…",
+    "description": "Text for buttons used to import and append content"
+  },
+  "exportButton": {
+    "message": "Export…",
+    "description": "Text for buttons used to export content"
+  },
+  "dnrRulesSummary": {
+    "message": "在下面输入您自己的DNR规则<b> 不要添加来自不可信来源的内容。</b>",
+    "description": "Short description of the DNR rules editor pane"
+  },
+  "dnrRulesCountInfo": {
+    "message": "已注册规则的数量：",
+    "description": "Short sentence to report the number of currently registered DNR rules"
   }
 }

package/extensions/ublocklite/_locales/zh_TW/messages.json

@@ -19,6 +19,10 @@
     "message": "設定",
     "description": "appears as tab name in dashboard"
   },
+  "developPageName": {
+    "message": "開發",
+    "description": "appears as tab name in dashboard. Inspired from 'Develop' menu in Safari, see https://developer.apple.com/documentation/safari-developer-tools/develop-menu"
+  },
   "aboutPageName": {
     "message": "關於",
     "description": "appears as tab name in dashboard"
@@ -233,8 +237,16 @@
   },
   "enableStrictBlockLegend": {
     "message": "前往潛在不良網站的導航將被阻止，您可以選擇是否繼續前往。",
+    "description": "Short description for a checkbox in the options page"
+  },
+  "developerModeLabel": {
+    "message": "開發人員模式",
     "description": "Label for a checkbox in the options page"
   },
+  "developerModeLegend": {
+    "message": "啟用適合技術使用者使用的功能。",
+    "description": "Short description for a checkbox in the options page"
+  },
   "findListsPlaceholder": {
     "message": "尋找清單",
     "description": "Placeholder for the input field used to find lists"
@@ -282,5 +294,29 @@
   "zapperTipQuit": {
     "message": "離開元素臨時移除模式",
     "description": "Tooltip for the button used to exit zapper mode"
+  },
+  "saveButton": {
+    "message": "儲存",
+    "description": "Text for buttons used to save changes"
+  },
+  "revertButton": {
+    "message": "還原",
+    "description": "Text for buttons used to revert changes"
+  },
+  "importAndAppendButton": {
+    "message": "匯入並加入…",
+    "description": "Text for buttons used to import and append content"
+  },
+  "exportButton": {
+    "message": "匯出…",
+    "description": "Text for buttons used to export content"
+  },
+  "dnrRulesSummary": {
+    "message": "請在下方輸入您的 DNR 規則。<b>請勿新增來自不受信任來源的內容。</b>",
+    "description": "Short description of the DNR rules editor pane"
+  },
+  "dnrRulesCountInfo": {
+    "message": "已登錄規則數：{count}",
+    "description": "Short sentence to report the number of currently registered DNR rules"
   }
 }

package/extensions/ublocklite/css/common.css

@@ -37,6 +37,7 @@
     --default-gap-small: 12px;
     --default-gap-xsmall: 8px;
     --default-gap-xxsmall: 4px;
+    --button-font-size: max(calc(var(--font-size) * 0.875), 14px);
     }
 
 /* Common uBO styles */
@@ -85,7 +86,7 @@ button {
     color: var(--button-ink);
     display: inline-flex;
     fill: var(--button-ink);
-    font-size: max(calc(var(--font-size) * 0.875), 14px);
+    font-size: var(--button-font-size);
     justify-content: center;
     min-height: 36px;
     padding: 0 var(--font-size);

package/extensions/ublocklite/css/dashboard-common.css

@@ -3,7 +3,6 @@ body {
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
-    max-height: 100vh;
     padding: 0 var(--default-gap-xxsmall);
     }
 body > * {
@@ -40,9 +39,15 @@ a {
     color: var(--info3-ink);
         fill: var(--info3-ink);
     }
+
 input[type="number"] {
     width: 5em;
     }
+
+input[type="file"] {
+    display: none;
+    }
+
 @media (max-height: 640px), (max-height: 800px) and (max-width: 480px) {
     .body > p,
     .body > ul {

package/extensions/ublocklite/css/dashboard.css

@@ -1,4 +1,4 @@
-#dashboard-nav {
+nav {
     background-color: var(--surface-1);
     border: 0;
     border-bottom: 1px solid var(--border-1);
@@ -7,8 +7,11 @@
     flex-wrap: wrap;
     overflow-x: hidden;
     padding: 0;
+    position: sticky;
+    top: 0;
+    z-index: 100;
     }
-.tabButton {
+nav > .tabButton {
     background-color: transparent;
     border: 0;
     border-bottom: 3px solid transparent;
@@ -21,30 +24,34 @@
     text-decoration: none;
     white-space: nowrap;
     }
-.tabButton:focus {
+nav > .tabButton:focus {
     outline: 0;
     }
-.tabButton:hover {
+nav > .tabButton:hover {
     background-color: var(--dashboard-tab-hover-surface);
     border-bottom-color: var(--dashboard-tab-hover-border);
     }
 
 body[data-pane="settings"] #dashboard-nav .tabButton[data-pane="settings"],
 body[data-pane="rulesets"] #dashboard-nav .tabButton[data-pane="rulesets"],
+body[data-pane="develop"] #dashboard-nav .tabButton[data-pane="develop"],
 body[data-pane="about"] #dashboard-nav .tabButton[data-pane="about"] {
     background-color: var(--dashboard-tab-active-surface);
     border-bottom: 3px solid var(--dashboard-tab-active-ink);
     color: var(--dashboard-tab-active-ink);
         fill: var(--dashboard-tab-active-ink);
     }
+body:not([data-develop="true"]) #dashboard-nav .tabButton[data-pane="develop"] {
+    display: none;
+    }
 
 body > section {
     display: none;
-    overflow: auto;
-    padding-bottom: 8rem;
+    padding-bottom: 2rem;
     }
 body[data-pane="settings"] > section[data-pane="settings"],
 body[data-pane="rulesets"] > section[data-pane="rulesets"],
+body[data-pane="develop"] > section[data-pane="develop"],
 body[data-pane="about"] > section[data-pane="about"] {
     display: block;
     }
@@ -57,10 +64,10 @@ body[data-pane="about"] > section[data-pane="about"] {
     }
 
 /* touch-screen devices */
-:root.mobile #dashboard-nav {
+:root.mobile nav {
     flex-wrap: nowrap;
     overflow-x: auto;
     }
-:root.mobile #dashboard-nav .logo {
+:root.mobile nav .logo {
     display: none;
     }

package/extensions/ublocklite/css/default.css

@@ -382,7 +382,7 @@
 }
 
 :root.dark {
-    color-scheme: dark;
+    color-scheme: dark light;
 }
 
 /*

package/extensions/ublocklite/css/develop.css

@@ -0,0 +1,112 @@
+body[data-pane="develop"] {
+    height: 100vh;
+    }
+
+section[data-pane="develop"] {
+    display: none;
+    flex-grow: 1;
+    overflow: hidden;
+    }
+
+section[data-pane="develop"] > div {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    }
+
+section[data-pane="develop"] > div > * {
+    margin-bottom: 0;
+    margin-top: 1em;
+    }
+
+#cm-dnrRules {
+    flex-grow: 1;
+    font-size: var(--monospace-size);
+    overflow: hidden;
+    }
+
+/* https://discuss.codemirror.net/t/how-to-set-max-height-of-the-editor/2882/2 */
+#cm-dnrRules .cm-editor {
+    background-color: var(--surface-0);
+    height: 100%;
+    }
+
+#cm-dnrRules .cm-editor .cm-line {
+    border-bottom: 1px dotted transparent;
+    border-top: 1px dotted transparent;
+    }
+
+#cm-dnrRules .cm-editor .cm-line:has(.ͼc) {
+    border-bottom: 1px dotted var(--border-1);
+    border-top: 1px dotted var(--border-1);
+    }
+
+#cm-dnrRules .cm-editor .cm-line.badline:not(.cm-activeLine) {
+    background-color: color-mix(in srgb, var(--info3-ink) 15%, transparent 85%);
+    }
+
+#cm-dnrRules .cm-editor .cm-line .badmark {
+    text-decoration: underline var(--cm-negative) wavy;
+    text-decoration-skip-ink: none;
+    }
+
+#cm-dnrRules .cm-editor .cm-panel.cm-search {
+    display: flex;
+    flex-wrap: wrap;
+    font-family: sans-serif;
+    font-size: var(--font-size);
+    gap: 0.5em 1em;
+    padding: 0.5em 1.5em 0.5em 0.5em;
+    }
+
+#cm-dnrRules .cm-editor .cm-panel.cm-search > * {
+    margin: 0;
+    }
+
+#cm-dnrRules .cm-editor .cm-panel.cm-search .cm-textfield,
+#cm-dnrRules .cm-editor .cm-panel.cm-search .cm-button,
+#cm-dnrRules .cm-editor .cm-panel.cm-search label {
+    background-image: inherit;
+    border: inherit;
+    flex-grow: 0;
+    font-size: var(--button-font-size);
+    min-height: calc(var(--button-font-size) * 1.8);
+    }
+
+#cm-dnrRules .cm-editor .cm-panel.info-panel {
+    display: flex;
+    flex-wrap: nowrap;
+    font-size: var(--font-size);
+    padding: var(--default-gap-xxsmall) var(--default-gap-xsmall);
+    }
+#cm-dnrRules .cm-editor .cm-panel.info-panel .info {
+    flex-grow: 1;
+    overflow: auto;
+    }
+#cm-dnrRules .cm-editor .cm-panel.info-panel .close {
+    cursor: default;
+    flex-shrink: 0;
+    padding-inline-start: 1em;
+    }
+#cm-dnrRules .cm-editor .cm-panel.info-panel .close::after {
+    content: '\2715';
+    }
+#cm-dnrRules .cm-editor .cm-panel.summary-panel {
+    background-color: color-mix(in srgb, var(--info1-ink) 15%, transparent 85%);
+    }
+
+#cm-dnrRules .cm-editor .cm-panel.feedback-panel {
+    background-color: color-mix(in srgb, var(--info3-ink) 15%, transparent 85%);
+    white-space: pre;
+    max-height: 10cqh;
+    }
+
+#cm-dnrRules .cm-editor .cm-gutterElement {
+    cursor: default;
+    user-select: none;
+    }
+
+#cm-dnrRules .cm-editor .cm-tooltip .badmark-tooltip {
+    background-color: color-mix(in srgb, var(--info3-ink) 15%, transparent 85%);
+    padding: var(--default-gap-xxsmall) var(--default-gap-xsmall);
+    }

package/extensions/ublocklite/css/filtering-mode.css

@@ -1,20 +1,24 @@
+:root {
+    --filtering-mode-button-size: 60px; /* should be multiple of 4 */
+    --filtering-mode-slider-width: calc(4 * var(--filtering-mode-button-size) + 3px);
+    }
+
 .filteringModeSlider {
     align-items: center;
     container-type: size;
     display: flex;
-    height: 60px;
+    height: var(--filtering-mode-button-size);
     justify-content: center;
     position: relative;
-    width: 240px;
+    width: var(--filtering-mode-slider-width);
     }
 
 .filteringModeButton {
     background-color: var(--surface-1);
-    box-sizing: border-box;
-    border-radius: 30% 15% / 15% 30%;
-    height: calc(25cqw + 2px);
+    border-radius: 20%;
+    height: var(--filtering-mode-button-size);
     position: absolute;
-    width: calc(25cqw + 2px);
+    width: var(--filtering-mode-button-size);
     z-index: 10;
     }
 
@@ -23,9 +27,8 @@
     border: 4px solid var(--accent-surface-1);
     border-radius: inherit;
     box-sizing: border-box;
-    height: calc(100% - 2px);
-    margin: 1px;
-    width: calc(100% - 2px);
+    height: 100%;
+    width: 100%;
     }
 
 .filteringModeSlider.moving .filteringModeButton > div,
@@ -40,14 +43,12 @@
 
 .filteringModeSlider span[data-level] {
     background-color: var(--accent-surface-1);
-    border: 1px solid var(--accent-surface-1);
-    box-sizing: border-box;
     display: inline-flex;
+    flex-shrink: 0;
     height: 30%;
     margin-left: 1px;
-    width: 25%;
+    width: var(--filtering-mode-button-size);
     }
-
 .filteringModeSlider span[data-level]:first-of-type {
     margin-left: 0;
     }
@@ -60,25 +61,33 @@
     left: 0;
     }
 .filteringModeSlider[data-level="1"] .filteringModeButton {
-    left: calc(25% - 1px);
+    left: calc(var(--filtering-mode-button-size) + 1px);
     }
 .filteringModeSlider[data-level="2"] .filteringModeButton {
-    left: calc(50% - 1px);
+    left: calc(var(--filtering-mode-button-size) * 2 + 2px);
     }
 .filteringModeSlider[data-level="3"] .filteringModeButton {
-    left: calc(75% - 1px);
+    left: calc(var(--filtering-mode-button-size) * 3 + 3px);
+    }
+
+[dir="rtl"] .filteringModeSlider span[data-level] {
+    margin-left: 0;
+    margin-right: 1px;
+    }
+[dir="rtl"] .filteringModeSlider span[data-level]:first-of-type {
+    margin-right: 0;
     }
 [dir="rtl"] .filteringModeSlider[data-level="0"] .filteringModeButton {
-    left: 75%;
+    right: 0;
     }
 [dir="rtl"] .filteringModeSlider[data-level="1"] .filteringModeButton {
-    left: 50%;
+    right: calc(var(--filtering-mode-button-size) + 1px);
     }
 [dir="rtl"] .filteringModeSlider[data-level="2"] .filteringModeButton {
-    left: 25%;
+    right: calc(var(--filtering-mode-button-size) * 2 + 2px);
     }
 [dir="rtl"] .filteringModeSlider[data-level="3"] .filteringModeButton {
-    left: 0;
+    right: calc(var(--filtering-mode-button-size) * 3 + 3px);
     }
 
 

package/extensions/ublocklite/css/popup.css

@@ -4,18 +4,21 @@
     top: -20%;
     }
 
+:root {
+    --popup-min-width: calc(
+        var(--filtering-mode-slider-width) +
+        var(--filtering-mode-button-size) / 2
+    );
+}
+
 :root body,
 :root.mobile body {
-    --font-size: 14px;
+    --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));
-    --popup-main-min-width: 18em;
-    --popup-firewall-min-width: 30em;
-    --popup-rule-cell-width: 5em;
     font-size: var(--font-size);
-    line-height: 20px;
-    min-width: 100%;
+    min-width: var(--popup-min-width);
     }
 :root body.loading {
     opacity: 0;
@@ -34,7 +37,6 @@ a {
     display: flex;
     flex-direction: column;
     max-width: 340px;
-    min-width: 100%;
     }
 :root.portrait #main {
     align-self: inherit;
@@ -66,13 +68,9 @@ hr {
 body[data-forbid~="filteringMode"] .filteringModeSlider {
     pointer-events: none;
     }
-body[data-forbid~="dashboard"] #gotoDashboard {
-    display: none;
-    }
-
-.lrspacer {
-    padding-left: var(--default-gap-small);
-    padding-right: var(--default-gap-small);
+body[data-forbid~="dashboard"] #gotoDashboard,
+body[data-forbid~="zapper"] #gotoZapper {
+    visibility: hidden;
     }
 
 #filteringModeText {
@@ -102,7 +100,6 @@ body[data-forbid~="dashboard"] #gotoDashboard {
     align-self: center;
     margin-bottom: var(--popup-gap);
     margin-top: var(--popup-gap);
-    width: calc(var(--popup-main-min-width) - 1em);
     }
 
 .rulesetTools {
@@ -177,7 +174,7 @@ body.needReload #refresh {
     font-size: 1.4em;
     min-width: 32px;
     padding: var(--popup-gap)
-             var(--popup-gap-thin);
+             var(--popup-gap-extra-thin);
     unicode-bidi: embed;
     visibility: hidden;
     }
@@ -189,6 +186,7 @@ body.needReload #refresh {
     visibility: visible;
     }
 .toolRibbon .tool .caption {
+    color: var(--ink-2);
     font: 10px/12px sans-serif;
     margin-top: 6px;
     text-align: center;

package/extensions/ublocklite/css/report.css

@@ -0,0 +1,11 @@
+:root .safari {
+    display: none;
+}
+
+:root.safari .safari {
+    display: initial;
+}
+
+.warning {
+    color: var(--info2-ink);
+}

package/extensions/ublocklite/css/settings.css

@@ -1,3 +1,7 @@
+:root {
+    --filtering-mode-button-size: 32px;
+    }
+
 body.loading {
     visibility: hidden;
     }
@@ -21,6 +25,9 @@ body[data-forbid~="filteringMode"] section[data-pane="settings"] > div:has(> h3[
 body[data-forbid~="filteringMode"] section[data-pane="settings"] > div:has(> h3[data-i18n="filteringMode0Name"]) {
     display: none;
     }
+body[data-forbid~="develop"] #developerMode {
+    display: none;
+    }
 
 label:has(input[type="checkbox"][disabled]),
 label:has(input[type="checkbox"][disabled]) + legend {
@@ -67,19 +74,17 @@ label:has(input[type="checkbox"][disabled]) + legend {
     white-space: pre-line;
     }
 .filteringModeSlider {
-    height: calc(60px / 2);
     pointer-events: none;
-    width: calc(240px / 2);
     }
 
 h3[data-i18n="filteringMode0Name"]::first-letter {
     text-transform: capitalize;
     }
 #trustedSites  {
-    box-sizing: border-box;
-    height: 6rem;
-    resize: vertical;
-    width: 100%;
+    background-color: var(--surface-0);
+    border: 1px solid var(--surface-3);
+    font-size: var(--monospace-size);
+    min-height: 8rem;
     }
 
 section[data-pane="rulesets"] > div:first-of-type {

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

@@ -16,11 +16,11 @@ html#ubol-zapper,
     outline: none;
 }
 #ubol-zapper aside {
-    background-color: var(--surface-1);
     box-sizing: border-box;
     cursor: default;
     display: flex;
     flex-direction: column;
+    gap: 2px;
     position: fixed;
     right: 2px;
     top: 50%;
@@ -31,14 +31,6 @@ html#ubol-zapper,
     left: 2px;
     right: unset;
 }
-#ubol-zapper aside > #quit {
-    border: 1px solid rgba(0,0,0,0.5);
-    fill: none;
-    stroke: var(--ink-1);
-    stroke-width: 3px;
-    width: var(--quit-button-size);
-    height: var(--quit-button-size);
-}
 #ubol-zapper svg#sea {
     cursor: crosshair;
     box-sizing: border-box;
@@ -57,6 +49,19 @@ html#ubol-zapper,
     stroke-width: 0.5px;
     fill: rgba(255,255,63,0.20);
 }
-#ubol-zapper #quit:hover {
+#ubol-zapper aside > div {
+    background-color: var(--surface-1);
+    border: 1px solid rgba(0,0,0,0.5);
+    box-sizing: border-box;
+    fill: none;
+    stroke: var(--ink-1);
+    stroke-width: 2px;
+    width: var(--quit-button-size);
+    height: var(--quit-button-size);
+}
+#ubol-zapper aside > div:hover {
     background-color: var(--surface-2)
 }
+:root:not(.mobile) #pick {
+    display: none;
+}