Bug 1633517 - Added impression param to forceShowMessage, refactored/cleaned up 'Modify', filtered messages on content.body r=andreio
authoremcminn <emcminn@mozilla.com>
Fri, 05 Jun 2020 16:42:25 +0000
changeset 534173 33f0b54b388df3365c7a52738b79b4e1c4263f2c
parent 534172 020c2356f7c919f8ccc090e0a3c672ebce9a7de8
child 534174 0925727e395c1424bc3d8fdfab79b1053b9cdad5
push id37483
push userapavel@mozilla.com
push dateFri, 05 Jun 2020 21:40:11 +0000
treeherdermozilla-central@dadc7312128e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersandreio
bugs1633517
milestone79.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1633517 - Added impression param to forceShowMessage, refactored/cleaned up 'Modify', filtered messages on content.body r=andreio Differential Revision: https://phabricator.services.mozilla.com/D75101
browser/components/newtab/content-src/components/ASRouterAdmin/ASRouterAdmin.jsx
browser/components/newtab/content-src/components/ASRouterAdmin/ASRouterAdmin.scss
browser/components/newtab/css/activity-stream-linux.css
browser/components/newtab/css/activity-stream-mac.css
browser/components/newtab/css/activity-stream-windows.css
browser/components/newtab/data/content/activity-stream.bundle.js
--- a/browser/components/newtab/content-src/components/ASRouterAdmin/ASRouterAdmin.jsx
+++ b/browser/components/newtab/content-src/components/ASRouterAdmin/ASRouterAdmin.jsx
@@ -496,17 +496,17 @@ export class ASRouterAdminInner extends 
       this
     );
     this.setAttribution = this.setAttribution.bind(this);
     this.onCopyTargetingParams = this.onCopyTargetingParams.bind(this);
     this.onPasteTargetingParams = this.onPasteTargetingParams.bind(this);
     this.onNewTargetingParams = this.onNewTargetingParams.bind(this);
     this.handleUpdateWNMessages = this.handleUpdateWNMessages.bind(this);
     this.handleForceWNP = this.handleForceWNP.bind(this);
-    this.pushWNMessage = this.pushWNMessage.bind(this);
+    this.restoreWNMessageState = this.restoreWNMessageState.bind(this);
     this.toggleJSON = this.toggleJSON.bind(this);
     this.toggleAllMessages = this.toggleAllMessages.bind(this);
     this.state = {
       messageFilter: "all",
       WNMessages: [],
       collapsedMessages: [],
       evaluationStatus: {},
       trailhead: {},
@@ -579,22 +579,23 @@ export class ASRouterAdminInner extends 
     }
     return () => ASRouterUtils.unblockById(msg.id);
   }
 
   handleOverride(id) {
     return () => ASRouterUtils.overrideMessage(id);
   }
 
-  handleUpdateWNMessages() {
+  async handleUpdateWNMessages() {
+    await this.restoreWNMessageState();
     let messages = this.state.WNMessages;
-    ASRouterUtils.sendMessage({
-      type: "RENDER_WHATSNEW_MESSAGES",
-      data: messages,
-    });
+
+    for (const msg of messages) {
+      ASRouterUtils.modifyMessageJson(JSON.parse(msg));
+    }
   }
 
   handleForceWNP() {
     ASRouterUtils.sendMessage({ type: "FORCE_WHATSNEW_PANEL" });
   }
 
   expireCache() {
     ASRouterUtils.sendMessage({ type: "EXPIRE_QUERY_CACHE" });
@@ -854,37 +855,33 @@ export class ASRouterAdminInner extends 
               {JSON.stringify(msg, null, 2)}
             </pre>
           </tr>
         </td>
       </tr>
     );
   }
 
-  pushWNMessage(event, msg) {
-    let ele = event.target;
-    if (ele.checked) {
-      this.setState(prevState => ({
-        WNMessages: prevState.WNMessages.concat(msg),
-      }));
-    } else if (!ele.checked && this.state.WNMessages.length === 1) {
-      this.setState({ WNMessages: [] });
-    } else {
-      this.setState(prevState => ({
-        WNMessages: prevState.WNMessages.splice(
-          prevState.WNMessages.indexOf(msg),
-          1
-        ),
-      }));
+  restoreWNMessageState() {
+    // check the page for checked boxes, and reset the state of WNMessages based on that.
+    let tempState = [];
+    let messageCheckboxes = document.querySelectorAll('input[type="checkbox"]');
+    // put the JSON of all the checked checkboxes in the array
+    for (const checkbox of messageCheckboxes) {
+      let trimmedId = checkbox.id.replace(" checkbox", "");
+      let msg = document.getElementById(`${trimmedId}-textarea`).value;
+
+      if (checkbox.checked) {
+        tempState.push(msg);
+      }
     }
-  }
 
-  modifyJson(content) {
-    let newContent = JSON.parse(content);
-    ASRouterUtils.modifyMessageJson(newContent);
+    this.setState({
+      WNMessages: tempState,
+    });
   }
 
   renderWNMessageItem(msg) {
     const isBlocked =
       this.state.messageBlockList.includes(msg.id) ||
       this.state.messageBlockList.includes(msg.campaign);
     const impressions = this.state.messageImpressions[msg.id]
       ? this.state.messageImpressions[msg.id].length
@@ -912,34 +909,20 @@ export class ASRouterAdminInner extends 
             isCollapsed={isCollapsed}
           />
         </td>
         <td>
           <input
             type="checkbox"
             id={`${msg.id} checkbox`}
             name={`${msg.id} checkbox`}
-            // eslint-disable-next-line react/jsx-no-bind
-            onClick={e => this.pushWNMessage(e, msg.id)}
           />
         </td>
         <td className={`message-summary`}>
           <pre className={isCollapsed ? "collapsed" : "expanded"}>
-            <button
-              className="button json-button"
-              name={msg.id}
-              // eslint-disable-next-line react/jsx-no-bind
-              onClick={e =>
-                this.modifyJson(
-                  document.getElementById(`${msg.id}-textarea`).value
-                )
-              }
-            >
-              Modify Template
-            </button>
             <textarea
               id={`${msg.id}-textarea`}
               className="wnp-textarea"
               name={msg.id}
             >
               {JSON.stringify(msg, null, 2)}
             </textarea>
           </pre>
@@ -991,17 +974,17 @@ export class ASRouterAdminInner extends 
     );
   }
 
   renderWNMessages() {
     if (!this.state.messages) {
       return null;
     }
     const messagesToShow = this.state.messages.filter(
-      message => message.provider === "whats-new-panel"
+      message => message.provider === "whats-new-panel" && message.content.body
     );
     return (
       <table>
         <tbody>
           {messagesToShow.map(msg => this.renderWNMessageItem(msg))}
         </tbody>
       </table>
     );
@@ -1549,20 +1532,22 @@ export class ASRouterAdminInner extends 
     return (
       <div>
         <p className="helpLink">
           <span className="icon icon-small-spacer icon-info" />{" "}
           <span>
             To correctly render selected messages, please check "Disable Popup
             Auto-Hide" in the browser toolbox, or set{" "}
             <i>ui.popup.disable_autohide</i> to <b>true</b> in{" "}
-            <i>about:config</i>. <br />
-            To modify a message, render it first using 'Render Selected
-            Messages'. Then, modify the JSON and click 'Modify Template' to see
-            your changes.
+            <i>about:config</i>. Then, click 'Open What's New Panel', select the
+            messages you want to see, and click 'Render Selected Messages'.
+            <br />
+            <br />
+            To modify a message, select it, modify the JSON and click 'Render
+            Selected Messages' again to see your changes.
           </span>
         </p>
         <div>
           <button
             className="ASRouterButton primary button"
             onClick={this.handleForceWNP}
           >
             Open What's New Panel
--- a/browser/components/newtab/content-src/components/ASRouterAdmin/ASRouterAdmin.scss
+++ b/browser/components/newtab/content-src/components/ASRouterAdmin/ASRouterAdmin.scss
@@ -245,13 +245,14 @@
     }
   }
 
   .collapsed {
     display: none;
   }
 
   .icon {
+    display: inline-table;
     cursor: pointer;
     width: 18px;
     height: 18px;
   }
 }
--- a/browser/components/newtab/css/activity-stream-linux.css
+++ b/browser/components/newtab/css/activity-stream-linux.css
@@ -1821,16 +1821,17 @@ main {
     padding: 4px;
     border-radius: 4px;
     display: flex; }
     .asrouter-admin .clearButton:hover {
       background: var(--newtab-element-hover-color); }
   .asrouter-admin .collapsed {
     display: none; }
   .asrouter-admin .icon {
+    display: inline-table;
     cursor: pointer;
     width: 18px;
     height: 18px; }
 
 .pocket-logged-in-cta {
   font-size: 13px;
   margin-inline-end: 20px;
   display: flex;
--- a/browser/components/newtab/css/activity-stream-mac.css
+++ b/browser/components/newtab/css/activity-stream-mac.css
@@ -1824,16 +1824,17 @@ main {
     padding: 4px;
     border-radius: 4px;
     display: flex; }
     .asrouter-admin .clearButton:hover {
       background: var(--newtab-element-hover-color); }
   .asrouter-admin .collapsed {
     display: none; }
   .asrouter-admin .icon {
+    display: inline-table;
     cursor: pointer;
     width: 18px;
     height: 18px; }
 
 .pocket-logged-in-cta {
   font-size: 13px;
   margin-inline-end: 20px;
   display: flex;
--- a/browser/components/newtab/css/activity-stream-windows.css
+++ b/browser/components/newtab/css/activity-stream-windows.css
@@ -1821,16 +1821,17 @@ main {
     padding: 4px;
     border-radius: 4px;
     display: flex; }
     .asrouter-admin .clearButton:hover {
       background: var(--newtab-element-hover-color); }
   .asrouter-admin .collapsed {
     display: none; }
   .asrouter-admin .icon {
+    display: inline-table;
     cursor: pointer;
     width: 18px;
     height: 18px; }
 
 .pocket-logged-in-cta {
   font-size: 13px;
   margin-inline-end: 20px;
   display: flex;
--- a/browser/components/newtab/data/content/activity-stream.bundle.js
+++ b/browser/components/newtab/data/content/activity-stream.bundle.js
@@ -1177,17 +1177,17 @@ class ASRouterAdminInner extends react__
     this.onChangeTargetingParameters = this.onChangeTargetingParameters.bind(this);
     this.onChangeAttributionParameters = this.onChangeAttributionParameters.bind(this);
     this.setAttribution = this.setAttribution.bind(this);
     this.onCopyTargetingParams = this.onCopyTargetingParams.bind(this);
     this.onPasteTargetingParams = this.onPasteTargetingParams.bind(this);
     this.onNewTargetingParams = this.onNewTargetingParams.bind(this);
     this.handleUpdateWNMessages = this.handleUpdateWNMessages.bind(this);
     this.handleForceWNP = this.handleForceWNP.bind(this);
-    this.pushWNMessage = this.pushWNMessage.bind(this);
+    this.restoreWNMessageState = this.restoreWNMessageState.bind(this);
     this.toggleJSON = this.toggleJSON.bind(this);
     this.toggleAllMessages = this.toggleAllMessages.bind(this);
     this.state = {
       messageFilter: "all",
       WNMessages: [],
       collapsedMessages: [],
       evaluationStatus: {},
       trailhead: {},
@@ -1265,22 +1265,23 @@ class ASRouterAdminInner extends react__
 
     return () => _asrouter_asrouter_content__WEBPACK_IMPORTED_MODULE_1__["ASRouterUtils"].unblockById(msg.id);
   }
 
   handleOverride(id) {
     return () => _asrouter_asrouter_content__WEBPACK_IMPORTED_MODULE_1__["ASRouterUtils"].overrideMessage(id);
   }
 
-  handleUpdateWNMessages() {
+  async handleUpdateWNMessages() {
+    await this.restoreWNMessageState();
     let messages = this.state.WNMessages;
-    _asrouter_asrouter_content__WEBPACK_IMPORTED_MODULE_1__["ASRouterUtils"].sendMessage({
-      type: "RENDER_WHATSNEW_MESSAGES",
-      data: messages
-    });
+
+    for (const msg of messages) {
+      _asrouter_asrouter_content__WEBPACK_IMPORTED_MODULE_1__["ASRouterUtils"].modifyMessageJson(JSON.parse(msg));
+    }
   }
 
   handleForceWNP() {
     _asrouter_asrouter_content__WEBPACK_IMPORTED_MODULE_1__["ASRouterUtils"].sendMessage({
       type: "FORCE_WHATSNEW_PANEL"
     });
   }
 
@@ -1542,37 +1543,33 @@ class ASRouterAdminInner extends react__
       onClick: this.handleOverride(msg.id)
     }, "Show"), react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("br", null), "(", impressions, " impressions)"), react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("td", {
       className: "message-summary"
     }, isBlocked && react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("tr", null, "Block reason:", isBlockedByGroup && " Blocked by group", isProviderExcluded && " Excluded by provider", isMessageBlocked && " Message blocked"), react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("tr", null, react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("pre", {
       className: isCollapsed ? "collapsed" : "expanded"
     }, JSON.stringify(msg, null, 2)))));
   }
 
-  pushWNMessage(event, msg) {
-    let ele = event.target;
-
-    if (ele.checked) {
-      this.setState(prevState => ({
-        WNMessages: prevState.WNMessages.concat(msg)
-      }));
-    } else if (!ele.checked && this.state.WNMessages.length === 1) {
-      this.setState({
-        WNMessages: []
-      });
-    } else {
-      this.setState(prevState => ({
-        WNMessages: prevState.WNMessages.splice(prevState.WNMessages.indexOf(msg), 1)
-      }));
-    }
-  }
-
-  modifyJson(content) {
-    let newContent = JSON.parse(content);
-    _asrouter_asrouter_content__WEBPACK_IMPORTED_MODULE_1__["ASRouterUtils"].modifyMessageJson(newContent);
+  restoreWNMessageState() {
+    // check the page for checked boxes, and reset the state of WNMessages based on that.
+    let tempState = [];
+    let messageCheckboxes = document.querySelectorAll('input[type="checkbox"]'); // put the JSON of all the checked checkboxes in the array
+
+    for (const checkbox of messageCheckboxes) {
+      let trimmedId = checkbox.id.replace(" checkbox", "");
+      let msg = document.getElementById(`${trimmedId}-textarea`).value;
+
+      if (checkbox.checked) {
+        tempState.push(msg);
+      }
+    }
+
+    this.setState({
+      WNMessages: tempState
+    });
   }
 
   renderWNMessageItem(msg) {
     const isBlocked = this.state.messageBlockList.includes(msg.id) || this.state.messageBlockList.includes(msg.campaign);
     const impressions = this.state.messageImpressions[msg.id] ? this.state.messageImpressions[msg.id].length : 0;
     const isCollapsed = this.state.collapsedMessages.includes(msg.id);
     let itemClassName = "message-item";
 
@@ -1587,29 +1584,22 @@ class ASRouterAdminInner extends react__
       className: "message-id"
     }, react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("span", null, msg.id, " ", react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("br", null), react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("br", null), "(", impressions, " impressions)")), react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("td", null, react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement(ToggleMessageJSON, {
       msgId: `${msg.id}`,
       toggleJSON: this.toggleJSON,
       isCollapsed: isCollapsed
     })), react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("td", null, react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("input", {
       type: "checkbox",
       id: `${msg.id} checkbox`,
-      name: `${msg.id} checkbox` // eslint-disable-next-line react/jsx-no-bind
-      ,
-      onClick: e => this.pushWNMessage(e, msg.id)
+      name: `${msg.id} checkbox`
     })), react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("td", {
       className: `message-summary`
     }, react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("pre", {
       className: isCollapsed ? "collapsed" : "expanded"
-    }, react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("button", {
-      className: "button json-button",
-      name: msg.id // eslint-disable-next-line react/jsx-no-bind
-      ,
-      onClick: e => this.modifyJson(document.getElementById(`${msg.id}-textarea`).value)
-    }, "Modify Template"), react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("textarea", {
+    }, react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("textarea", {
       id: `${msg.id}-textarea`,
       className: "wnp-textarea",
       name: msg.id
     }, JSON.stringify(msg, null, 2)))));
   }
 
   toggleAllMessages(messagesToShow) {
     if (this.state.collapsedMessages.length) {
@@ -1638,17 +1628,17 @@ class ASRouterAdminInner extends react__
     }, "Collapse/Expand All"), react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("table", null, react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("tbody", null, messagesToShow.map(msg => this.renderMessageItem(msg)))));
   }
 
   renderWNMessages() {
     if (!this.state.messages) {
       return null;
     }
 
-    const messagesToShow = this.state.messages.filter(message => message.provider === "whats-new-panel");
+    const messagesToShow = this.state.messages.filter(message => message.provider === "whats-new-panel" && message.content.body);
     return react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("table", null, react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("tbody", null, messagesToShow.map(msg => this.renderWNMessageItem(msg))));
   }
 
   renderMessageFilter() {
     if (!this.state.providers) {
       return null;
     }
 
@@ -1953,17 +1943,17 @@ class ASRouterAdminInner extends react__
       return null;
     }
 
     let messagesToShow = this.state.messages.filter(message => message.provider === "whats-new-panel");
     return react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("div", null, react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("p", {
       className: "helpLink"
     }, react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("span", {
       className: "icon icon-small-spacer icon-info"
-    }), " ", react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("span", null, "To correctly render selected messages, please check \"Disable Popup Auto-Hide\" in the browser toolbox, or set", " ", react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("i", null, "ui.popup.disable_autohide"), " to ", react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("b", null, "true"), " in", " ", react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("i", null, "about:config"), ". ", react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("br", null), "To modify a message, render it first using 'Render Selected Messages'. Then, modify the JSON and click 'Modify Template' to see your changes.")), react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("div", null, react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("button", {
+    }), " ", react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("span", null, "To correctly render selected messages, please check \"Disable Popup Auto-Hide\" in the browser toolbox, or set", " ", react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("i", null, "ui.popup.disable_autohide"), " to ", react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("b", null, "true"), " in", " ", react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("i", null, "about:config"), ". Then, click 'Open What's New Panel', select the messages you want to see, and click 'Render Selected Messages'.", react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("br", null), react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("br", null), "To modify a message, select it, modify the JSON and click 'Render Selected Messages' again to see your changes.")), react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("div", null, react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("button", {
       className: "ASRouterButton primary button",
       onClick: this.handleForceWNP
     }, "Open What's New Panel"), react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("button", {
       className: "ASRouterButton secondary button",
       onClick: this.handleUpdateWNMessages
     }, "Render Selected Messages"), react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("h2", null, "Messages"), react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("button", {
       className: "ASRouterButton slim button" // eslint-disable-next-line react/jsx-no-bind
       ,