Bug 1552195 - Support the escape button for closing all modals (#5060)

content-src/asrouter/components/ModalOverlay/ModalOverlay.jsx

@@ -24,9 +24,13 @@ export class ModalOverlayWrapper extends React.PureComponent {
 
   render() {
     const {props} = this;
+    let className = props.unstyled ? "" : "modalOverlayInner active";
+    if (props.innerClassName) {
+      className += ` ${props.innerClassName}`;
+    }
     return (<React.Fragment>
-      <div className="modalOverlayOuter active" onClick={props.onClose} role="presentation" />
-      <div className={`modalOverlayInner active ${props.innerClassName || ""}`}
+      <div className="modalOverlayOuter active" onClick={props.onClose} onKeyDown={this.onKeyDown} role="presentation" />
+      <div className={className}
         aria-labelledby={props.headerId}
         id={props.id}
         role="dialog">

content-src/asrouter/components/ModalOverlay/_ModalOverlay.scss

@@ -9,6 +9,7 @@
   height: 100%;
   position: fixed;
   top: 0;
+  left: 0;
   width: 100%;
   display: none;
   z-index: 1100;
@@ -20,10 +21,10 @@
 
 .modalOverlayInner {
   width: 960px;
-  height: 570px;
   position: fixed;
-  top: calc(50% - 285px); // halfway down minus half the height of the modal
+  top: 20%;
   left: calc(50% - 480px); // halfway across minus half the width of the modal
+  max-height: calc(100% - 100px);
   background: $white;
   box-shadow: 0 1px 15px 0 $black-30;
   border-radius: 4px;
@@ -75,6 +76,7 @@
 
   .footer {
     border-top: 1px solid $grey-30;
+    border-radius: 4px;
     height: 70px;
     width: 100%;
     position: absolute;

content-src/asrouter/templates/OnboardingMessage/OnboardingMessage.jsx

@@ -59,7 +59,7 @@ export class OnboardingMessage extends React.PureComponent {
     const {props} = this;
     const {button_label, header} = props.extraTemplateStrings;
     return (
-      <ModalOverlay {...props} button_label={button_label} title={header}>
+      <ModalOverlay {...props} button_label={button_label} title={header} >
         <div className="onboardingMessageContainer">
           {props.bundle.map(message => (
             <OnboardingCard key={message.id}

content-src/asrouter/templates/OnboardingMessage/_OnboardingMessage.scss

@@ -4,6 +4,7 @@
   grid-template-columns: auto auto auto;
   padding-left: 30px;
   padding-right: 30px;
+  min-height: 500px;
 
   // at 850px, the cards go from vertical layout to horizontal layout
   @media(max-width: 850px) {

content-src/components/ASRouterAdmin/ASRouterAdmin.jsx

@@ -539,7 +539,7 @@ export class ASRouterAdminInner extends React.PureComponent {
     }
     const errors = this.refs.targetingParamsEval && this.refs.targetingParamsEval.innerText.length;
     return (
-      <ModalOverlay title="New targeting parameters" button_label={errors ? "Cancel" : "Done"} onDoneButton={this.onPasteTargetingParams}>
+      <ModalOverlay innerStyle="pasteModal" title="New targeting parameters" button_label={errors ? "Cancel" : "Done"} onDismissBundle={this.onPasteTargetingParams}>
         <div className="onboardingMessage">
           <p>
             <textarea onChange={this.onNewTargetingParams} value={this.state.newStringTargetingParameters} rows="20" cols="60" />

content-src/components/ASRouterAdmin/ASRouterAdmin.scss

@@ -219,4 +219,8 @@
   .ds-component {
     margin-bottom: 20px;
   }
+
+  .modalOverlayInner {
+    height: 80%;
+  }
 }

content-src/components/ContextMenu/ContextMenu.jsx

@@ -37,7 +37,9 @@ export class ContextMenu extends React.PureComponent {
   }
 
   render() {
-    return (<span role="menu" className="context-menu" onClick={this.onClick} onKeyDown={this.onClick} tabIndex="0" >
+    // Disabling focus on the menu span allows the first tab to focus on the first menu item instead of the wrapper.
+    // eslint-disable-next-line jsx-a11y/interactive-supports-focus
+    return (<span role="menu" className="context-menu" onClick={this.onClick} onKeyDown={this.onClick} >
       <ul className="context-menu-list">
         {this.props.options.map((option, i) => (option.type === "separator" ?
           (<li key={i} className="separator" />) :

content-src/components/TopSites/TopSites.jsx

@@ -4,6 +4,7 @@ import {CollapsibleSection} from "content-src/components/CollapsibleSection/Coll
 import {ComponentPerfTimer} from "content-src/components/ComponentPerfTimer/ComponentPerfTimer";
 import {connect} from "react-redux";
 import {injectIntl} from "react-intl";
+import {ModalOverlayWrapper} from "../../asrouter/components/ModalOverlay/ModalOverlay";
 import React from "react";
 import {SearchShortcutsForm} from "./SearchShortcutsForm";
 import {TOP_SITES_MAX_SITES_PER_ROW} from "common/Reducers.jsm";
@@ -139,26 +140,24 @@ export class _TopSites extends React.PureComponent {
         <div className="edit-topsites-wrapper">
           {editForm &&
             <div className="edit-topsites">
-              <div className="modal-overlay" onClick={this.onEditFormClose} role="presentation" />
-              <div className="modal">
+              <ModalOverlayWrapper unstyled={true} onClose={this.onEditFormClose} innerClassName="modal" >
                 <TopSiteForm
                   site={props.TopSites.rows[editForm.index]}
                   onClose={this.onEditFormClose}
                   dispatch={this.props.dispatch}
                   intl={this.props.intl}
                   {...editForm} />
-              </div>
+              </ModalOverlayWrapper>
             </div>
           }
           {showSearchShortcutsForm &&
             <div className="edit-search-shortcuts">
-              <div className="modal-overlay" onClick={this.onSearchShortcutsFormClose} role="presentation" />
-              <div className="modal">
+              <ModalOverlayWrapper unstyled={true} onClose={this.onSearchShortcutsFormClose} innerClassName="modal" >
                 <SearchShortcutsForm
                   TopSites={props.TopSites}
                   onClose={this.onSearchShortcutsFormClose}
                   dispatch={this.props.dispatch} />
-              </div>
+              </ModalOverlayWrapper>
             </div>
           }
         </div>

test/browser/browser_topsites_section.js

@@ -15,7 +15,7 @@ test_newtab(
     let found = content.document.querySelector(".topsite-form");
     ok(found && !found.hidden, "Should find a visible topsite form");
 
-    found = content.document.querySelector(".modal-overlay");
+    found = content.document.querySelector(".modalOverlayOuter");
     ok(found && !found.hidden, "Should find a visible overlay");
   }
 );
@@ -78,7 +78,7 @@ test_newtab({
     const topsitesAddBtn = content.document.querySelector(".top-sites .context-menu-item button");
     topsitesAddBtn.click();
 
-    let found = content.document.querySelector(".modal-overlay");
+    let found = content.document.querySelector(".modalOverlayOuter");
     ok(found && !found.hidden, "Should find a visible overlay");
 
     // Write field title