Commit e4a163b5 authored by Kathleen Brade's avatar Kathleen Brade
Browse files

Bug 29768: Introduce new features to users 

Add an "update" tour for the Tor Browser 8.5 release that contains two
panels: Toolbar and Security (with appropriate description text and
images).

Display an attention-grabbing dot on the onboarding text bubble when
the update tour is active. The animation lasts for 14 seconds.
parent 6e730d51

browser/app/profile/000-tor-browser.js

+2 −1
Original line number Diff line number Diff line
@@ -327,8 +327,9 @@ pref("browser.download.panel.shown", true); 
pref("dom.securecontext.whitelist_onions", true);



// Onboarding.

pref("browser.onboarding.tourset-version", 3);

pref("browser.onboarding.newtour", "welcome,privacy,tor-network,circuit-display,security,expect-differences,onion-services");

pref("browser.onboarding.updatetour", "welcome,privacy,tor-network,circuit-display,security,expect-differences,onion-services");

pref("browser.onboarding.updatetour", "toolbar-update-8.5,security-update-8.5");

pref("browser.onboarding.skip-tour-button.hide", true);



// prefs to disable jump-list entries in the taskbar on Windows (see bug #12885)

browser/extensions/onboarding/bootstrap.js

+2 −0
Original line number Diff line number Diff line
@@ -38,6 +38,8 @@ const PREF_WHITELIST = [ 
  "onboarding-tour-tor-security",

  "onboarding-tour-tor-expect-differences",

  "onboarding-tour-tor-onion-services",

  "onboarding-tour-tor-toolbar-update-8-5",

  "onboarding-tour-tor-security-update-8-5",

#if 0

// Firefox tours. To reduce conflicts when rebasing against newer Firefox

// code, we use the preprocessor to omit this code block.

browser/extensions/onboarding/content/img/figure_tor-security-level.png

0 → 100644
+11.9 KiB
Loading image diff...

browser/extensions/onboarding/content/img/figure_tor-toolbar-layout.png

0 → 100644
+5.7 KiB
Loading image diff...

browser/extensions/onboarding/content/onboarding.css

+50 −4
Original line number Diff line number Diff line
@@ -23,11 +23,44 @@ 
  display: block;

}



#onboarding-overlay-button {

  padding: 10px 0 0 0;

#onboarding-overlay-button-container {

  padding: 16px 0 0 0;

  position: fixed;

  cursor: pointer;

  top: 4px;

}



/*

 * Define an animated attention-grabbing dot which is shown on the

 * speech bubble when we are displaying the "updated" tour.

*/

#onboarding-overlay-button-container.onboarding-overlay-attention-dot::after {

  display: inline-block;

  position: relative;

  content: " ";

  width: 20px;

  height: 20px;

  top: -8px;

  offset-inline-start: -16px;

  background-color: #00E2B1;

  border-radius: 50%;

  animation: pulsate 2.0s ease-out;

  animation-iteration-count: 7;

}



@keyframes pulsate {

  0% {

    opacity: 1.0;

  }

  50% {

    opacity: 0.5;

  }

  100% {

    opacity: 1.0;

  }

}



#onboarding-overlay-button {

  cursor: pointer;

  offset-inline-start: 12px;

  border: none;

  /* Set to none so no grey contrast background in the high-contrast mode */
@@ -78,7 +111,7 @@ 
  font-weight: 400;

  content: attr(aria-label);

  border: 1px solid transparent;

  border-radius: 58px;

  border-radius: 12px;

  padding: 10px 16px;

  width: auto;

  height: auto;
@@ -308,6 +341,19 @@ 
  grid-template-columns: [tour-page-start] 368px [tour-content-start] 1fr [tour-page-end];

}



.onboarding-tour-description-prefix {

  display: inline-block;

  margin-bottom: -8px; /* reduce vertical space below */

  padding: 2px 10px;

  vertical-align: center;

  background-color: #F1F1F3;

  border-radius: 4px;

  min-height: 25px;

  font-size: 10px;

  font-weight: 600;

  text-transform: uppercase;

}



.onboarding-tour-description {

  grid-row: tour-page-start / tour-page-end;

  grid-column: tour-page-start / tour-content-start;