Merge pull request #7739 from cwillisf/scratch-link-2.0-prep

Scratch link 2.0 prep

src/components/extension-landing/extension-landing.scss

@@ -7,6 +7,11 @@
     padding: 0;
 }
 
+html {
+    // Adjust target position to compensate for the floating top content
+    scroll-padding-top: calc(50px + 5rem); // nav bar + OS chooser
+}
+
 .extension-landing {
     &>div {
         padding: 4rem 0;

src/components/extension-landing/extension-troubleshooting.jsx

@@ -13,7 +13,7 @@ const ExtensionTroubleshooting = props => {
     };
     return (
         <ExtensionSection className="faq">
-            <h2><FormattedMessage
+            <h2 id="troubleshooting"><FormattedMessage
                 id="extensions.troubleshootingTitle"
                 values={sharedValues}
             /></h2>
@@ -22,7 +22,7 @@ const ExtensionTroubleshooting = props => {
                 values={sharedValues}
             /></h3>
             <p><FormattedMessage
-                id="extensions.browserCompatibilityText"
+                id="extensions.browserCompatibilityText2"
                 values={sharedValues}
             /></p>
             {props.children}

src/components/extension-landing/install-scratch-link.jsx

@@ -11,13 +11,13 @@ require('./extension-landing.scss');
 
 // Assumes this will only be called with an OS that needs Scratch Link
 const InstallScratchLink = ({
-    currentOS
+    currentOS,
+    hideScratchLink
 }) => (
     <div className="blue install-scratch-link">
         <FlexRow className="inner column">
             <h2><FormattedMessage id="installScratchLink.installHeaderTitle" /></h2>
             <Steps>
-                <div className="step">
                 <Step
                     compact
                     number={1}
@@ -55,16 +55,18 @@ const InstallScratchLink = ({
                         </a>
                     </div>
                 </Step>
-
-                </div>
                 <Step
                     compact
                     number={2}
                 >
                     <span className="step-description">
-                        <FormattedMessage id="installScratchLink.startScratchLink" />
+                        <FormattedMessage
+                            id={`installScratchLink.startScratchLink.${
+                                currentOS === OS_ENUM.WINDOWS ? 'Windows' : 'macOS'
+                            }`}
+                        />
                     </span>
-                    <div className="step-image">
+                    <span className="step-image">
                         <img
                             alt=""
                             className="screenshot"
@@ -72,7 +74,45 @@ const InstallScratchLink = ({
                                 currentOS === OS_ENUM.WINDOWS ? 'windows' : 'mac'
                             }-toolbar.png`}
                         />
-                    </div>
+                    </span>
+                    <p className="step-description"><FormattedMessage
+                        id={`installScratchLink.startScratchLink2.${
+                            currentOS === OS_ENUM.WINDOWS ? 'Windows' : 'macOS'
+                        }`}
+                    /></p>
+                </Step>
+                <Step
+                    compact
+                    number={3}
+                >
+                    {!hideScratchLink && <span className="step-description">
+                        <FormattedMessage
+                            id="installScratchLink.learnMore.bodyText"
+                            values={{
+                                linkText: (
+                                    <a
+                                        href="/download/scratch-link"
+                                        rel="noopener noreferrer"
+                                        target="_blank"
+                                    >
+                                        <FormattedMessage id="installScratchLink.learnMore.linkText" />
+                                    </a>
+                                )
+                            }}
+                        />
+                    </span>}
+                    <span className="step-description">
+                        <FormattedMessage
+                            id="installScratchLink.ifYouHaveTrouble.bodyText"
+                            values={{
+                                linkText: (
+                                    <a
+                                        href="#troubleshooting"
+                                    ><FormattedMessage id="installScratchLink.ifYouHaveTrouble.linkText" /></a>
+                                )
+                            }}
+                        />
+                    </span>
                 </Step>
             </Steps>
         </FlexRow>
@@ -80,7 +120,8 @@ const InstallScratchLink = ({
 );
 
 InstallScratchLink.propTypes = {
-    currentOS: PropTypes.string
+    currentOS: PropTypes.string.isRequired,
+    hideScratchLink: PropTypes.bool
 };
 
 module.exports = InstallScratchLink;

src/components/steps/steps.scss

@@ -48,11 +48,12 @@
         box-sizing: border-box;
 
         .step-image {
-            height: 10rem;
+            max-height: 10rem;
 
             img {
-                width: auto;
+                max-height: 10rem;
-                height: 100%;
+                width: 100%;
+                height: auto;
             }
         }
     }

src/l10n.json

@@ -167,7 +167,14 @@
 
     "installScratchLink.installHeaderTitle": "Install Scratch Link",
     "installScratchLink.downloadAndInstall": "Download and install Scratch Link.",
-    "installScratchLink.startScratchLink": "Start Scratch Link and make sure it is running. It should appear in your toolbar.",
+    "installScratchLink.startScratchLink.macOS": "Start Scratch Link and make sure it is running. It should appear in your menu bar.",
+    "installScratchLink.startScratchLink.Windows": "Start Scratch Link and make sure it is running. It should appear in your notification area (system tray).",
+    "installScratchLink.startScratchLink2.macOS": "If it does not appear, run Scratch Link from your Applications folder.",
+    "installScratchLink.startScratchLink2.Windows": "If it does not appear, run Scratch Link from your Start menu.",
+    "installScratchLink.learnMore.bodyText": "To learn more about Scratch Link, click {linkText}.",
+    "installScratchLink.learnMore.linkText": "here",
+    "installScratchLink.ifYouHaveTrouble.bodyText": "If you have trouble, see the {linkText} for tips.",
+    "installScratchLink.ifYouHaveTrouble.linkText": "Troubleshooting section",
 
     "parents.FaqAgeRangeA": "While Scratch is primarily designed for 8 to 16 year olds, it is also used by people of all ages, including younger children with their parents.",
     "parents.FaqAgeRangeQ": "What is the age range for Scratch?",
@@ -440,7 +447,7 @@
 
     "extensions.troubleshootingTitle": "Troubleshooting",
     "extensions.browserCompatibilityTitle": "Make sure your browser is compatible with Scratch Link",
-    "extensions.browserCompatibilityText": "Scratch Link 1.4 is not compatible with Safari. If you use macOS, please use another supported browser, such as Chrome or Firefox.",
+    "extensions.browserCompatibilityText2": "Scratch Link 1.4 is not compatible with Safari. If you use Safari, please upgrade to Scratch Link 2.0.",
     "extensions.checkOSVersionTitle": "Make sure your operating system is compatible with Scratch Link",
     "extensions.checkOSVersionText": "The minimum operating system versions are listed at the top of this page. See instructions for checking your version of {winOSVersionLink} or {macOSVersionLink}.",
     "extensions.checkOsVersionText2": "If you are using macOS 12, please update to macOS 12.3 or newer. Earlier versions of macOS 12 do not work correctly with Scratch Link.",

src/lib/os-enum.js

@@ -1,3 +1,6 @@
+/**
+ * @enum {string}
+ */
 const OS_ENUM = {
     WINDOWS: 'Windows',
     MACOS: 'macOS',

src/views/download/scratch-link/download.jsx

@@ -57,6 +57,7 @@ const ScratchLink = ({intl}) => {
             />
             {(isDownloaded(os)) && (
                 <InstallScratchLink
+                    hideScratchLink
                     currentOS={os}
                 />
             )}

src/views/ev3/ev3.jsx

@@ -73,6 +73,7 @@ class EV3 extends ExtensionLanding {
                 />
                 {(isDownloaded(this.state.OS)) && (
                     <InstallScratchLink
+                        showEv3
                         currentOS={this.state.OS}
                     />
                 )}
@@ -314,6 +315,12 @@ class EV3 extends ExtensionLanding {
                                 />
                             </p>
                             <p><FormattedMessage id="extensions.checkOsVersionText2" /></p>
+                            <h3 className="faq-title"><FormattedMessage id="ev3.tryScratchLink1.4" /></h3>
+                            <p><a
+                                href={`https://downloads.scratch.mit.edu/link/scratch-link-${
+                                    this.state.OS === OS_ENUM.WINDOWS ? 'windows' : 'mac'
+                                }-1.4.3.zip`}
+                            ><FormattedMessage id="ev3.downloadScratchLink1.4" /></a></p>
                         </React.Fragment>
                     )}
                     <h3 className="faq-title"><FormattedMessage id="ev3.makeSurePairedTitle" /></h3>

src/views/ev3/l10n.json

@@ -28,6 +28,8 @@
     "ev3.troubleshootingTitle": "Troubleshooting",
     "ev3.checkOSVersionTitle": "Make sure your operating system is compatible with Scratch Link",
     "ev3.checkOSVersionText": "The minimum operating system versions are listed at the top of this page. See instructions for checking your version of {winOSVersionLink} or {macOSVersionLink}.",
+    "ev3.tryScratchLink1.4": "If you have issues connecting EV3 with Scratch Link 2.0, please try Scratch Link 1.4",
+    "ev3.downloadScratchLink1.4": "Download Scratch Link 1.4",
     "ev3.winOSVersionLinkText": "Windows",
     "ev3.macOSVersionLinkText": "macOS",
     "ev3.makeSurePairedTitle": "Make sure your computer is paired with your EV3",