copy tweaks

integration-tests/DashboardPage.js

@@ -402,7 +402,7 @@ export class DashboardPage {
     }
 
     async helpIsShown() {
-        await this.page.getByText('Turning protections OFF might help.').waitFor({ timeout: 1000 })
+        await this.page.getByText('Turning protections OFF may fix the site.').waitFor({ timeout: 1000 })
     }
 
     async clicksReportBroken() {

shared/js/ui/base/localize.js

@@ -49,5 +49,5 @@ function report(key, options) {
 
 export const ns = {
     site,
-    report
+    report,
 }

shared/js/ui/templates/breakage-form.js

@@ -2,6 +2,7 @@ import html from 'nanohtml'
 import { i18n, ns } from '../base/localize.js'
 import { largeHeroIcon } from './shared/hero.js'
 import { topNav } from './shared/top-nav'
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { render, h } from 'preact'
 import { ProtectionHeader } from './protection-header'
 
@@ -35,9 +36,7 @@ export default function () {
         <div class="breakage-form">
             ${topNav({ view: 'secondary' })}
             <div class="padding-x-double js-breakage-form-element" data-state="idle">
-                <div class="padding-y">
-                    ${wrap(this.mainModel, this)}    
-                </div>
+                <div class="padding-y">${wrap(this.mainModel, this)}</div>
                 <div class="key-insight">
                     ${icon}
                     <div class="breakage-form__advise">
@@ -86,7 +85,7 @@ function wrap(model, view) {
         isBroken: model.isBroken,
         toggleAllowlist: model.toggleAllowlist.bind(model),
     }
-    view.roots.set(root, true);
-    render(<ProtectionHeader model={migrationModel} initialState={'site-not-working'}/>, root)
-    return root;
+    view.roots.set(root, true)
+    render(<ProtectionHeader model={migrationModel} initialState={'site-not-working'} />, root)
+    return root
 }

shared/js/ui/templates/protection-header.js

@@ -32,9 +32,12 @@ export function protectionHeader(model) {
         isBroken: model.isBroken,
         toggleAllowlist: model.toggleAllowlist.bind(model),
     }
-    render(<ProtectionHeader model={migrationModel}>
-        <ProtectionHeaderText />
-    </ProtectionHeader>, root)
+    render(
+        <ProtectionHeader model={migrationModel}>
+            <ProtectionHeaderText />
+        </ProtectionHeader>,
+        root
+    )
     return root
 }
 
@@ -62,9 +65,7 @@ export function protectionDefault(model) {
  * @typedef {{text: string; label: string; active: boolean; disabled: boolean; toggled: boolean}} ToggleState
  */
 
-const ProtectionContext = createContext(
-    /** @type {{state: UIState, setState: (st: UIState) => void; model: MigrationModel}} */({})
-);
+const ProtectionContext = createContext(/** @type {{state: UIState, setState: (st: UIState) => void; model: MigrationModel}} */ ({}))
 
 /**
  * @param {object} props
@@ -74,7 +75,7 @@ const ProtectionContext = createContext(
  */
 export function ProtectionHeader(props) {
     /** @type {UIState} */
-    let initial;
+    let initial
     if (props.initialState) {
         initial = props.initialState
     } else {
@@ -92,18 +93,21 @@ export function ProtectionHeader(props) {
                 {props.model.isBroken && <HeaderDisabled model={props.model} state={state} />}
                 {!props.model.isBroken && <HeaderDefault model={props.model} state={state} />}
             </div>
-            <ProtectionContext.Provider value={{
-                state, setState, model: props.model
-            }}>
+            <ProtectionContext.Provider
+                value={{
+                    state,
+                    setState,
+                    model: props.model,
+                }}
+            >
                 {props.children}
             </ProtectionContext.Provider>
         </>
     )
 }
 
 export function ProtectionHeaderText() {
-
-    const { state, setState, model } = useContext(ProtectionContext);
+    const { state, setState, model } = useContext(ProtectionContext)
 
     // prettier-ignore
     let buttonText = state === 'help-trigger'
@@ -150,9 +154,7 @@ function HeaderDefault(props) {
             <div className="protection-header__toggle">
                 <ProtectionToggle model={props.model} />
             </div>
-            {props.state === 'site-not-working' &&
-                <div className="protection-header__note protection-header__note--alt">{text}</div>
-            }
+            {props.state === 'site-not-working' && <div className="protection-header__note protection-header__note--alt">{text}</div>}
         </>
     )
 }

shared/js/ui/views/site.js

@@ -128,7 +128,7 @@ Site.prototype = $.extend({}, Parent.prototype, {
         this.views.slidingSubview = new BreakageFormView({
             template: breakageFormTemplate,
             model: new BreakageFormModel(),
-            mainModel: this.model
+            mainModel: this.model,
         })
     },
 

shared/js/ui/views/sliding-subview.js

@@ -87,14 +87,14 @@ SlidingSubview.prototype = $.extend({}, Parent.prototype, {
         }
     },
 
-    _destroyProxy: function() {
+    _destroyProxy: function () {
         if (this.roots) {
             for (const [key] of this.roots) {
                 render('', key)
             }
-            this.roots.clear();
+            this.roots.clear()
         }
-        this.destroy();
+        this.destroy()
     },
 
     _done: function () {

shared/locales/en/report.json

@@ -68,15 +68,15 @@
         "note": "User is reporting this page because of some other reason than the ones we listed"
     },
     "tellUsMoreDesc": {
-        "title": "Tell us more (optional):{bullet}What happened?{bullet}What should have happened?{bullet}Did disabling protections help?",
+        "title": "Share more details (optional):{bullet}What happened?{bullet}What should have happened?{bullet}Did turning protections off help?",
         "note": "A hint for a text box that lets user enter free text to describe their problem. There are 3 questions as a guide, and each 'bullet' is replaced with a bullet point - such as '• What happened?'"
     },
     "sendReport": {
         "title": "Send Report",
         "note": "Button for submitting report"
     },
     "reportsAreAnonymousDesc": {
-        "title": "Reports sent to DuckDuckGo only include information required to help us address your feedback.",
+        "title": "Reports sent to DuckDuckGo only include info required to help us address your feedback.",
         "note": "A small disclaimer at the bottom of the view describing what is included in the report"
     },
     "thankYou": {

shared/locales/en/site.json

@@ -76,8 +76,8 @@
         "note": "button label text for a trigger that shows our feedback form"
     },
     "websiteNotWorkingAdvice": {
-      "title": "Turning protections OFF might help.",
-        "note": "help text for "
+        "title": "Turning protections OFF may fix the site.",
+        "note": "help text"
     },
     "websiteNotWorkingPromptFollowUp": {
         "title": "Site still not working?",

shared/scss/views/_protection-header.scss

@@ -1,29 +1,29 @@
 .protection-header__toggle {
-  padding-left: 16px;
-  padding-right: 16px;
-  padding-top: 12px;
-  padding-bottom: 12px;
+    padding-left: 16px;
+    padding-right: 16px;
+    padding-top: 12px;
+    padding-bottom: 12px;
 
-  .environment--browser & {
-    padding-top: 8px;
-    padding-bottom: 8px;
-  }
+    .environment--browser & {
+        padding-top: 8px;
+        padding-bottom: 8px;
+    }
 }
 .protection-header__note {
-  padding-left: 16px;
-  padding-right: 16px;
-  padding-top: 12px;
-  padding-bottom: 12px;
+    padding-left: 16px;
+    padding-right: 16px;
+    padding-top: 12px;
+    padding-bottom: 12px;
 
-  .environment--browser & {
-    padding-top: 8px;
-    padding-bottom: 8px;
-  }
+    .environment--browser & {
+        padding-top: 8px;
+        padding-bottom: 8px;
+    }
 }
 
 .protection-header__note--alt {
-  background: $color-note-blue;
-  .body--theme-dark & {
-    background: rgba($color-note-blue--dark, 18%);
-  }
+    background: $color-note-blue;
+    .body--theme-dark & {
+        background: rgba($color-note-blue--dark, 18%);
+    }
 }