ntp: update notification + context menu fixes (#1178)

* ntp: update notification

* linting

* linting

* adding support for context menu

* docs structure

* add visibilityMenuItems to contextMenu

* make 'updateNotification' nullable on `initialSetup`

* styling

* lint

* text update

* Allow the component to be pulled up

---------

Co-authored-by: Shane Osbourne <[email protected]>

Author: shakyShane

.stylelintrc.json

@@ -32,9 +32,10 @@
         "keyframes-name-pattern": null,
         "block-no-empty": null,
         "selector-id-pattern": null,
+        "selector-pseudo-class-no-unknown": null,
         "declaration-block-no-shorthand-property-overrides": null,
         "font-family-no-missing-generic-family-keyword": null,
         "font-family-name-quotes": null,
         "value-no-vendor-prefix": null
     }
-}
+}

special-pages/messages/new-tab/contextMenu.notify.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "type": "object",
+  "required": ["visibilityMenuItems"],
+  "properties": {
+    "visibilityMenuItems": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "title": "Visibility Menu Item",
+        "required": ["id", "title"],
+        "properties": {
+          "id": {
+            "type": "string"
+          },
+          "title": {
+            "description": "Translated name of the section",
+            "type": "string"
+          }
+        }
+      }
+    }
+  }
+}

special-pages/messages/new-tab/examples/widgets.js

@@ -34,16 +34,19 @@ const widgetConfig = {
  */
 const initialSetupResponse = {
     widgets: [
-        { "id": "weatherWidget" },
-        { "id": "newsWidget" }
+        { "id": "updateNotification" },
+        { "id": "rmf" },
+        { "id": "favorites" },
+        { "id": "privacyStats" }
     ],
     widgetConfigs: [
-        { "id": "weatherWidget", "visibility": "visible" },
-        { "id": "newsWidget", "visibility": "visible" }
+        { "id": "favorites", "visibility": "visible" },
+        { "id": "privacyStats", "visibility": "visible" }
     ],
     env: 'production',
     locale: 'en',
-    platform: {name: 'windows'}
+    platform: { name: 'windows' },
+    updateNotification: { content: null }
 }
 
 export {}

special-pages/messages/new-tab/initialSetup.response.json

@@ -1,7 +1,7 @@
 {
   "$schema": "http://json-schema.org/draft-07/schema#",
   "type": "object",
-  "required": ["widgets", "widgetConfigs", "locale", "env", "platform"],
+  "required": ["widgets", "widgetConfigs", "locale", "env", "platform", "updateNotification"],
   "properties": {
     "widgets": {
       "$ref": "./types/widget-list.json"
@@ -25,6 +25,16 @@
           "enum": ["macos", "windows", "android", "ios", "integration"]
         }
       }
+    },
+    "updateNotification": {
+      "oneOf": [
+        {
+          "type": "null"
+        },
+        {
+          "$ref": "types/update-notification.json"
+        }
+      ]
     }
   }
 }

special-pages/messages/new-tab/types/update-notification.json

@@ -0,0 +1,30 @@
+{
+    "$schema": "http://json-schema.org/draft-07/schema#",
+    "type": "object",
+    "title": "Update Notification Data",
+    "required": ["content"],
+    "properties": {
+        "content": {
+            "oneOf": [
+                {
+                    "type": "null"
+                },
+                {
+                    "title": "Update Notification",
+                    "required": ["version", "notes"],
+                    "properties": {
+                        "version": {
+                            "type": "string"
+                        },
+                        "notes": {
+                            "type": "array",
+                            "items": {
+                                "type": "string"
+                            }
+                        }
+                    }
+                }
+            ]
+        }
+    }
+}

special-pages/messages/new-tab/updateNotification_dismiss.notify.json

@@ -0,0 +1,3 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#"
+}

special-pages/messages/new-tab/updateNotification_onDataUpdate.subscribe.json

@@ -0,0 +1,8 @@
+{
+    "$schema": "http://json-schema.org/draft-07/schema#",
+    "allOf": [
+        {
+            "$ref": "types/update-notification.json"
+        }
+    ]
+}

special-pages/pages/new-tab/app/components/App.module.css

@@ -8,15 +8,16 @@ body {
     font-size: var(--body-font-size);
     font-weight: var(--body-font-weight);
     line-height: var(--body-line-height);
-    padding-left: var(--sp-6);
-    padding-right: var(--sp-6);
 }
 
 .layout {
     padding-top: var(--sp-16);
     padding-bottom: var(--sp-16);
-    max-width: calc(504 * var(--px-in-rem));
     margin-left: auto;
     margin-right: auto;
 }
 
+:global(.layout-centered) {
+    margin-inline: auto;
+    max-width: calc(504 * var(--px-in-rem));
+}

special-pages/pages/new-tab/app/components/Icons.js

@@ -49,3 +49,13 @@ export function Shield () {
         </svg>
     )
 }
+
+export function Cross () {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+            <path
+                d="M11.4419 5.44194C11.686 5.19786 11.686 4.80214 11.4419 4.55806C11.1979 4.31398 10.8021 4.31398 10.5581 4.55806L8 7.11612L5.44194 4.55806C5.19786 4.31398 4.80214 4.31398 4.55806 4.55806C4.31398 4.80214 4.31398 5.19786 4.55806 5.44194L7.11612 8L4.55806 10.5581C4.31398 10.8021 4.31398 11.1979 4.55806 11.4419C4.80214 11.686 5.19786 11.686 5.44194 11.4419L8 8.88388L10.5581 11.4419C10.8021 11.686 11.1979 11.686 11.4419 11.4419C11.686 11.1979 11.686 10.8021 11.4419 10.5581L8.88388 8L11.4419 5.44194Z"
+                fill="currentColor"/>
+        </svg>
+    )
+}

special-pages/pages/new-tab/app/customizer/Customizer.js

@@ -4,9 +4,10 @@ import styles from './Customizer.module.css'
 import { VisibilityMenu } from './VisibilityMenu.js'
 import { CustomizeIcon } from '../components/Icons.js'
 import cn from 'classnames'
+import { useMessaging } from '../types.js'
 
 /**
- * @import { Widgets, WidgetConfigItem, WidgetVisibility } from '../../../../types/new-tab.js'
+ * @import { Widgets, WidgetConfigItem, WidgetVisibility, VisibilityMenuItem } from '../../../../types/new-tab.js'
  */
 
 /**
@@ -16,6 +17,8 @@ export function Customizer () {
     const { setIsOpen, buttonRef, dropdownRef, isOpen } = useDropdown()
     const [rowData, setRowData] = useState(/** @type {VisibilityRowData[]} */([]))
 
+    useContextMenu()
+
     /**
      * Dispatch an event every time the customizer is opened - this
      * allows widgets to register themselves and provide titles/icons etc.
@@ -63,7 +66,7 @@ export function Customizer () {
 Customizer.OPEN_EVENT = 'ntp-customizer-open'
 Customizer.UPDATE_EVENT = 'ntp-customizer-update'
 
-function getItems () {
+export function getItems () {
     /** @type {VisibilityRowData[]} */
     const next = []
     const detail = {
@@ -77,6 +80,32 @@ function getItems () {
     return next
 }
 
+/**
+ * Forward the contextmenu event
+ */
+export function useContextMenu () {
+    const messaging = useMessaging()
+    useEffect(() => {
+        function handler (e) {
+            e.preventDefault()
+            e.stopImmediatePropagation()
+            const items = getItems()
+            /** @type {VisibilityMenuItem[]} */
+            const simplified = items.map(item => {
+                return {
+                    id: item.id,
+                    title: item.title
+                }
+            })
+            messaging.contextMenu({ visibilityMenuItems: simplified })
+        }
+        document.body.addEventListener('contextmenu', handler)
+        return () => {
+            document.body.removeEventListener('contextmenu', handler)
+        }
+    }, [messaging])
+}
+
 /**
  * @param {object} props
  * @param {string} [props.menuId]