Commit c4281e50 authored by henry's avatar henry Committed by clairehurst
Browse files

fixup! MB 39: Add home page about:mullvad-browser 

MB 312: Update the home page for different release channels.

We use about-wordmark.svg instead of firefox-wordmark.svg.

We use the colors from the mullvad-branding.css sheet to colour the
background, link text and outline colors.

We now properly support contrast themes, where we do not apply the
branding colors.

We tweak the sizing and spacing.

We switch from XHTML to HTML.

We consistently use kebab case for the DOM IDs, rather than camel case.

We drop the Open Sans font.
parent ed70935d

browser/components/about/AboutRedirector.cpp

+1 −1
Original line number Diff line number Diff line
@@ -157,7 +157,7 @@ static const RedirEntry kRedirMap[] = { 
         nsIAboutModule::URI_CAN_LOAD_IN_PRIVILEGEDABOUT_PROCESS |

         nsIAboutModule::HIDE_FROM_ABOUTABOUT},

    {"mullvad-browser",

     "chrome://browser/content/mullvad-browser/aboutMullvadBrowser.xhtml",

     "chrome://browser/content/mullvad-browser/aboutMullvadBrowser.html",

     nsIAboutModule::URI_MUST_LOAD_IN_CHILD |

         nsIAboutModule::URI_SAFE_FOR_UNTRUSTED_CONTENT |

         nsIAboutModule::IS_SECURE_CHROME_UI},

browser/components/mullvad-browser/content/aboutMullvadBrowser.css

+66 −38
Original line number Diff line number Diff line 
@import url("chrome://browser/content/mullvad-browser/mullvadBrowserFont.css");

@import url("chrome://branding/content/mullvad-branding.css");



body {

  margin: 0;

  display: grid;

  height: 100vh;

  min-height: 100vh;

  grid-template-columns: auto;

  grid-template-rows: 1fr auto;

  text-align: center;

  color: #FBFBFE;

  background: radial-gradient(117% 58% at 50% 48%, #205C9D 0%, #1B4D83 26%, #05101B 100%);

  font-family: 'Open Sans', sans-serif;

}



a {

  color: #FFBD4F;

  text-decoration: none;

}



a:hover {

  color: #FFD567;

  text-decoration: underline solid;

}



a:active {

  color: #FFEA80;

  text-decoration: none;

}



p {

  margin-inline: 8px;

  margin-block: 0.5em;

}



#headingImg {

  -moz-context-properties: fill;

  fill: currentColor;

}



.screen-reader-only {
@@ -47,10 +19,16 @@ p { 
  grid-template: "heading" auto "text" auto / auto;

  justify-items: center;

  align-content: center;

  gap: 1.5em;

  gap: 32px;

  padding-block: 40px;

  padding-inline: 16px;

}



#headingContainer {

#header p {

  margin: 0;

}



#heading-container {

  grid-area: heading;

  display: inline flex;

  flex-direction: row;
@@ -59,6 +37,21 @@ p { 
  gap: 16px;

}



#heading-logo {

  flex: 0 0 auto;

  width: 56px;

  height: 56px;

}



#heading-wordmark {

  flex: 0 0 auto;

  height: 22.4px;

  /* When using a contrast theme we want to replace the wordmark's default

   * colors with the text color instead. */

  -moz-context-properties: fill;

  fill: currentColor;

}



#mullvad-browser-update,

#mullvad-browser-intro {

  grid-area: text;
@@ -80,12 +73,47 @@ body:not(.no-update) #mullvad-browser-intro { 
  margin-inline-end: 0.3em;

}



#mullvad-browser-update a {

  /* Increase gap between the link and the rest of the text. */

  margin-inline: 0.4em;

#footer {

  padding-block: 40px;

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

  background-color: var(--in-content-box-info-background);

}



#footer p {

  margin-inline: 8px;

  margin-block: 0.5em;

}



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

  :root {

    /* Dark background. */

    background: linear-gradient(

      to bottom,

      var(--branding-gradient-start) 0%,

      var(--branding-gradient-middle) 55%,

      var(--branding-gradient-end) 100%

    );

    /* Same as --in-content-page-color when "prefers-color-scheme: dark" */

    color: var(--color-gray-05);



    --link-color: var(--branding-link-color);

    --link-color-hover: var(--branding-link-color-hover);

    --link-color-active: var(--branding-link-color-active);



    --focus-outline-color: var(--branding-focus-outline-color);

    --focus-outline: var(--focus-outline-width) solid var(--focus-outline-color);

    --in-content-focus-outline-color: var(--focus-outline-color);

    --in-content-focus-outline: var(--focus-outline);

  }



  #heading-wordmark {

    /* Have a dark background, so can use about-wordmark.svg's default colors

     * instead. */

    -moz-context-properties: none;

  }



  #footer {

  padding-block: 40px;

  background: rgba(0, 0, 0, 0.2);

    border-block-start-color: transparent;

    background-color: rgba(0, 0, 0, 0.2);

  }

}

browser/components/mullvad-browser/content/aboutMullvadBrowser.xhtml→browser/components/mullvad-browser/content/aboutMullvadBrowser.html

+21 −15
Original line number Diff line number Diff line 
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<html>

  <head>

    <meta

      http-equiv="Content-Security-Policy"
@@ -11,11 +11,13 @@ 
      type="image/png"

      href="chrome://branding/content/icon32.png"

    />

    <link rel="stylesheet" href="chrome://global/skin/in-content/common.css" />

    <link

      rel="stylesheet"

      href="chrome://browser/content/mullvad-browser/aboutMullvadBrowser.css"

    />

    <link rel="localization" href="branding/brand.ftl" />

    <link rel="localization" href="branding/mullvad-about-wordmark-en.ftl" />

    <link rel="localization" href="browser/newtab/newtab.ftl" />

    <link rel="localization" href="toolkit/global/mullvad-browser.ftl" />
@@ -23,36 +25,38 @@ 
  </head>

  <body>

    <div id="header">

      <div id="headingContainer">

      <div id="heading-container">

        <img

          id="heading-logo"

          srcset="

            chrome://branding/content/icon64.png  1x,

            chrome://branding/content/icon128.png 2x

          "

          width="64"

          height="64"

          alt=""

        />

        <!-- img element is a visual stand-in for the heading, but we include a

           - h1 element as semantic structure for screen readers. -->

        <img

          id="headingImg"

          src="chrome://branding/content/firefox-wordmark.svg"

          width="324"

          height="26"

          id="heading-wordmark"

          src="chrome://branding/content/about-wordmark.svg"

          alt=""

        />

        <!-- The wordmark is only in English, so we keep the heading unlocalised

           - as well and mark it as lang="en". -->

        <h1

          class="screen-reader-only"

          data-l10n-id="about-mullvad-browser-heading"

          lang="en"

          data-l10n-id="mullvad-about-wordmark-en"

        ></h1>

      </div>

      <p

        id="mullvad-browser-intro"

        data-l10n-id="about-mullvad-browser-developed-by"

      >

        <a data-l10n-name="tor-project-link" href="https://www.torproject.org">

        </a>

        <a

          data-l10n-name="tor-project-link"

          href="https://www.torproject.org"

        ></a>

        <a data-l10n-name="mullvad-vpn-link" href="https://mullvad.net"></a>

      </p>

      <p id="mullvad-browser-update">
@@ -69,8 +73,10 @@ 
        <a data-l10n-name="with-vpn-link" href="https://mullvad.net"></a>

      </p>

      <p data-l10n-id="about-mullvad-browser-learn-more">

        <a data-l10n-name="learn-more-link" href="https://mullvad.net/browser">

        </a>

        <a

          data-l10n-name="learn-more-link"

          href="https://mullvad.net/browser"

        ></a>

      </p>

    </div>

  </body>

browser/components/mullvad-browser/content/mullvadBrowserFont.css

deleted100644 → 0
+0 −105

File deleted.

Preview size limit exceeded, changes collapsed.

browser/components/mullvad-browser/jar.mn

+1 −2
Original line number Diff line number Diff line 
browser.jar:

  content/browser/mullvad-browser/aboutMullvadBrowser.js      (content/aboutMullvadBrowser.js)

  content/browser/mullvad-browser/aboutMullvadBrowser.xhtml   (content/aboutMullvadBrowser.xhtml)

  content/browser/mullvad-browser/aboutMullvadBrowser.html    (content/aboutMullvadBrowser.html)

  content/browser/mullvad-browser/aboutMullvadBrowser.css     (content/aboutMullvadBrowser.css)

  content/browser/mullvad-browser/mullvadBrowserFont.css      (content/mullvadBrowserFont.css)

  content/browser/mullvad-browser/2728-sparkles.svg           (content/2728-sparkles.svg)