Commit 4f94de34 authored by Henry Wilkes's avatar Henry Wilkes
Browse files

fixup! TB 7494: Create local home page for TBB. 

TB 44032: Implement the 2025 YEC banner.

This adds the 2025 year end campaign banner. We want to keep this beyond
the end of the campaign since next year's campaign is likely going to be
similar.

Assets specific to 2025 are in a separate commit.
parent 7ed8428c

browser/components/DesktopActorRegistry.sys.mjs

+1 −0
Changes for browser/components/DesktopActorRegistry.sys.mjs: 1 added line, 0 removed lines.
Original line number Diff line number Diff line
@@ -202,6 +202,7 @@ let JSWINDOWACTORS = { 
        L10nMutationsFinished: {},

        SubmitSearchOnionize: { wantUntrusted: true },

        SurveyDismissed: { wantUntrusted: true },

        UserDismissedYEC: { wantUntrusted: true },

      },

    },

browser/components/abouttor/AboutTorChild.sys.mjs

+17 −0
Changes for browser/components/abouttor/AboutTorChild.sys.mjs: 17 added lines, 0 removed lines.
Original line number Diff line number Diff line
@@ -26,6 +26,23 @@ export class AboutTorChild extends JSWindowActorChild { 
          new this.contentWindow.CustomEvent("L10nMutationsFinished")

        );

        break;

      case "UserDismissedYEC":

        // YEC banner was closed. Persist this for the rest of this session.

        // See tor-browser#42188.

        this.sendAsyncMessage("AboutTor:UserDismissedYEC");

        break;

    }

  }



  receiveMessage(message) {

    switch (message.name) {

      case "AboutTor:DismissYEC": {

        this.contentWindow.dispatchEvent(

          new this.contentWindow.CustomEvent("DismissYEC")

        );

        break;

      }

    }

    return undefined;

  }

}

browser/components/abouttor/AboutTorParent.sys.mjs

+42 −2
Changes for browser/components/abouttor/AboutTorParent.sys.mjs: 42 added lines, 2 removed lines.
Original line number Diff line number Diff line
@@ -7,16 +7,37 @@ ChromeUtils.defineESModuleGetters(lazy, { 
  TorConnect: "resource://gre/modules/TorConnect.sys.mjs",

});



const initializedActors = new Set();



/**

 * Actor parent class for the about:tor page.

 */

export class AboutTorParent extends JSWindowActorParent {

  /*

   * Whether the user has dismissed the Year End Campaign (YEC) banner this

   * session.

   *

   * @type {boolean}

   */

  static #dismissYEC = false;



  didDestroy() {

    initializedActors.delete(this);

  }



  receiveMessage(message) {

    const onionizePref = "torbrowser.homepage.search.onionize";

    const surveyDismissVersionPref =

      "torbrowser.homepage.survey.dismiss_version";

    switch (message.name) {

      case "AboutTor:GetInitialData":

      case "AboutTor:GetInitialData": {

        // Track this actor to send future updates.

        initializedActors.add(this);



        let appLocale = Services.locale.appLocaleAsBCP47;

        if (appLocale === "ja-JP-macos") {

          appLocale = "ja";

        }

        return Promise.resolve({

          torConnectEnabled: lazy.TorConnect.enabled,

          messageData: lazy.AboutTorMessage.getNext(),
@@ -26,8 +47,10 @@ export class AboutTorParent extends JSWindowActorParent { 
            surveyDismissVersionPref,

            0

          ),

          appLocale: Services.locale.appLocaleAsBCP47,

          appLocale,

          dismissYEC: AboutTorParent.#dismissYEC,

        });

      }

      case "AboutTor:SetSearchOnionize":

        Services.prefs.setBoolPref(onionizePref, message.data);

        break;
@@ -43,6 +66,23 @@ export class AboutTorParent extends JSWindowActorParent { 
        // the version value to decrease.

        Services.prefs.setIntPref(surveyDismissVersionPref, message.data);

        break;

      case "AboutTor:UserDismissedYEC":

        AboutTorParent.#dismissYEC = true;

        for (const actor of initializedActors) {

          if (actor === this) {

            // Don't send to ourselves.

            continue;

          }

          // Tell all existing instances to also close the banner, if they still

          // exist.

          // NOTE: If the user's new tab page is `about:tor`, this may include

          // some preloaded pages that have not been made visible yet (see

          // NewTabPagePreloading).

          try {

            actor.sendAsyncMessage("AboutTor:DismissYEC");

          } catch {}

        }

        break;

    }

    return undefined;

  }

browser/components/abouttor/content/aboutTor.css

+199 −0
Changes for browser/components/abouttor/content/aboutTor.css: 199 added lines, 0 removed lines.
Original line number Diff line number Diff line
@@ -326,3 +326,202 @@ body:not(.show-survey) #survey { 
    --in-content-primary-button-background-active: var(--tor-button-background-color-active-dark);

  }

}



/* Year End Campaign (YEC). */

body:not(.show-yec) #yec-banner {

  display: none;

}



body.show-yec h1 {

  /* Text of heading is still available to screen readers, but it does not

   * contribute visually to the page or the body grid layout. */

  position: absolute;

  clip-path: inset(50%);

}



#yec-banner {

  grid-area: heading;

  border-radius: 8px;

  border: 1px solid var(--in-content-box-border-color);

  display: grid;

  grid-template:

    "yec-heading yec-image" auto

    "yec-body yec-image" auto

    "yec-matching yec-image" auto

    "yec-donate yec-image" min-content

    / 1fr min-content;

  --yec-image-background: #1f0333;

  /* Remove 1px from padding for border. */

  padding-block: 55px 55px;

  padding-inline: 47px 47px;

  box-sizing: border-box;

  max-width: 850px;

  margin-block-end: 40px;

  /* Position for the close button. */

  position: relative;

  gap: 0 24px;

}



#yec-image {

  grid-area: yec-image;

  align-self: center;

  /* Center horizontally for small width layout. */

  justify-self: center;

  /* background color, padding and border radius only stands out when using a

   * contrast or forced color theme. */

  background-color: var(--yec-image-background);

  border-radius: 8px;

  padding: 4px;

  height: 196px;

  border: 1px solid transparent;

  /* Remove border and padding from the layout size. These parts are only

   * visible in contrast or forced color themes. */

  margin: -5px;

  /* Do not let forced colors ignore the background-color, which is needed to

   * see the drawing. */

  forced-color-adjust: none;

}



#yec-image:dir(rtl) {

  transform: scaleX(-1);

}



#yec-heading {

  grid-area: yec-heading;

  margin-block: 0 16px;

  font-size: 64px;

  font-weight: 400;

}



#yec-body {

  grid-area: yec-body;

  margin-block: 0 12px;

}



#yec-body-highlight {

  font-weight: 600;

}



#yec-matching {

  grid-area: yec-matching;

  margin-block: 0 32px;

}



#yec-donate-link {

  grid-area: yec-donate;

  justify-self: start;

  /* Style like a button. */

  font-weight: var(--button-font-weight);

  color: var(--in-content-button-text-color);

  border: 1px solid var(--in-content-button-border-color);

  border-radius: 4px;

  background-color: var(--in-content-button-background);

  padding: var(--button-padding);

  box-sizing: border-box;

  min-height: var(--button-min-height);

  text-decoration: none;

  display: flex;

  align-items: center;

  gap: 8px;

  white-space: nowrap;

}



#yec-donate-link > * {

  flex: 0 0 auto;

}



#yec-donate-link:hover {

  background-color: var(--in-content-button-background-hover);

  color: var(--in-content-button-text-color-hover);

  border-color: var(--in-content-button-border-color-hover);

}



#yec-donate-link:hover:active {

  background-color: var(--in-content-button-background-active);

  color: var(--in-content-button-text-color-active);

  border-color: var(--in-content-button-border-color-active);

}



#yec-donate-icon {

  -moz-context-properties: fill;

  fill: currentColor;

}



#yec-close {

  position: absolute;

  inset-block-start: 16px;

  inset-inline-end: 16px;

}



@media (max-width: 768px) {

  /* Small width layout. */

  #yec-banner {

    grid-template:

      "yec-image" min-content

      "yec-heading" auto

      "yec-body" auto

      "yec-matching" auto

      "yec-donate" min-content

      / 1fr;

    padding-block: 31px 39px;

    padding-inline: 15px;

    /* Match max-width of the form. */

    max-width: var(--form-max-width);

    margin-block-end: 32px;

  }



  #yec-image {

    height: 156px;

  }



  #yec-heading {

    margin-block-start: 16px;

    text-align: center;

    text-wrap-style: balance;

  }



  #yec-heading {

    font-size: 3.5rem;

  }



  #yec-matching {

    margin-block-end: 16px;

  }



  #yec-donate-link {

    justify-self: center;

  }

}



@media ((prefers-contrast) or (forced-colors)) and (prefers-color-scheme: dark) {

  #yec-image {

    /* Give the dark image a light border to separate from background. */

    border-color: var(--in-content-box-border-color);

  }

}



@media not ((prefers-contrast) or (forced-colors)) {

  #yec-banner {

    border-color: transparent;

    background-color: var(--yec-image-background);

    --yec-text: #ffffff;

    --yec-button-background: #b6e368;

    --yec-button-background-hover: #d2f2a1;

    --yec-button-background-active: #ecfcd8;

    --yec-button-text: #15141A;

    color: var(--yec-text);

  }



  #yec-body-highlight {

    color: var(--yec-button-background);

  }



  #yec-donate-link {

    --in-content-button-text-color: var(--yec-button-text);

    --in-content-button-text-color-hover: var(--yec-button-text);

    --in-content-button-text-color-active: var(--yec-button-text);

    --in-content-button-background: var(--yec-button-background);

    --in-content-button-background-hover: var(--yec-button-background-hover);

    --in-content-button-background-active: var(--yec-button-background-active);

  }

}

browser/components/abouttor/content/aboutTor.html

+25 −0
Changes for browser/components/abouttor/content/aboutTor.html: 25 added lines, 0 removed lines.
Original line number Diff line number Diff line
@@ -33,6 +33,31 @@ 
    <script src="chrome://browser/content/abouttor/aboutTor.js"></script>

  </head>

  <body class="onion-pattern-background">

    <!-- Year End Campaign (YEC). -->

    <article id="yec-banner" aria-labelledby="yec-heading">

      <img id="yec-image" alt="" />

      <h2 id="yec-heading"></h2>

      <p id="yec-body">

        <b id="yec-body-highlight" data-l10n-name="highlight"></b>

      </p>

      <p id="yec-matching"></p>

      <a id="yec-donate-link">

        <span data-l10n-id="yec-donate-button"></span>

        <img

          id="yec-donate-icon"

          alt=""

          src="chrome://browser/content/abouttor/yec-heart.svg"

        />

      </a>

      <moz-button

        id="yec-close"

        type="icon ghost"

        class="close"

        size="16"

        iconSrc="chrome://global/skin/icons/close.svg"

        data-l10n-id="yec-close-button"

      ></moz-button>

    </article>

    <h1>

      <img

        id="tor-browser-logo"