Merge branch 'master' into leftie

package.json

@@ -1,7 +1,7 @@
 {
   "name": "pinafore",
   "description": "Alternative web client for Mastodon",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "scripts": {
     "lint": "standard && standard --plugin html 'src/routes/**/*.html'",
     "lint-fix": "standard --fix && standard --fix --plugin html 'src/routes/**/*.html'",
@@ -43,10 +43,10 @@
     "build-now-json": "node -r esm ./bin/build-now-json.js"
   },
   "dependencies": {
-    "@babel/core": "^7.4.4",
+    "@babel/core": "^7.4.5",
     "@gamestdio/websocket": "^0.3.2",
     "@webcomponents/custom-elements": "^1.2.4",
-    "babel-loader": "^8.0.5",
+    "babel-loader": "^8.0.6",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "cheerio": "^1.0.0-rc.2",
     "child-process-promise": "^2.2.1",
@@ -63,7 +63,7 @@
     "escape-html": "^1.0.3",
     "esm": "^3.2.25",
     "events-light": "^1.0.5",
-    "express": "^4.16.4",
+    "express": "^4.17.1",
     "file-api": "^0.10.4",
     "file-drop-element": "0.2.0",
     "form-data": "^2.3.3",
@@ -74,7 +74,7 @@
     "lodash-es": "^4.17.11",
     "lodash-webpack-plugin": "^0.11.5",
     "mkdirp": "^0.5.1",
-    "node-fetch": "^2.5.0",
+    "node-fetch": "^2.6.0",
     "node-sass": "^4.12.0",
     "npm-run-all": "^4.1.5",
     "p-any": "^2.1.0",
@@ -86,28 +86,28 @@
     "quick-lru": "^4.0.0",
     "remount": "^0.11.0",
     "requestidlecallback": "^0.3.0",
-    "rollup": "^1.11.3",
+    "rollup": "^1.12.4",
     "rollup-plugin-replace": "^2.2.0",
     "rollup-plugin-terser": "^5.0.0",
     "sapper": "nolanlawson/sapper#for-pinafore-14",
     "stringz": "^2.0.0",
     "svelte": "^2.16.1",
     "svelte-extras": "^2.0.2",
-    "svelte-loader": "^2.13.3",
+    "svelte-loader": "^2.13.4",
     "svelte-transitions": "^1.2.0",
     "svgo": "^1.2.2",
-    "terser-webpack-plugin": "^1.2.3",
+    "terser-webpack-plugin": "^1.3.0",
     "text-encoding": "^0.7.0",
     "tiny-queue": "^0.2.1",
-    "webpack": "^4.31.0",
+    "webpack": "^4.32.2",
     "webpack-bundle-analyzer": "^3.3.2"
   },
   "devDependencies": {
     "assert": "^2.0.0",
-    "eslint-plugin-html": "^5.0.3",
+    "eslint-plugin-html": "^5.0.5",
     "fake-indexeddb": "^2.1.0",
     "mocha": "^6.1.4",
-    "now": "^15.2.0",
+    "now": "^15.3.0",
     "standard": "^12.0.1",
     "testcafe": "^1.1.4"
   },

src/routes/_components/compose/ComposeLengthIndicator.html

@@ -6,7 +6,7 @@
   .compose-box-length {
     grid-area: length;
     justify-self: right;
-    color: var(--main-theme-color);
+    color: var(--length-indicator-color);
     font-size: 1.3em;
     align-self: center;
   }

src/routes/_components/status/Status.html

@@ -305,7 +305,7 @@
         timelineType !== 'search' && 'status-in-timeline',
         isStatusInOwnThread && 'status-in-own-thread',
         $underlineLinks && 'underline-links',
-        !$disableTapOnStatus && 'tap-on-status'
+        !$disableTapOnStatus && !isStatusInOwnThread && 'tap-on-status'
       )),
       content: ({ originalStatus }) => originalStatus.content || '',
       showContent: ({ spoilerText, spoilerShown }) => !spoilerText || spoilerShown,

src/scss/themes/_base.scss

@@ -116,4 +116,6 @@
   --floating-button-bg: #{rgba($main-bg-color, 0.8)};
   --floating-button-bg-hover: #{darken(rgba($main-bg-color, 0.9), 5%)};
   --floating-button-bg-active: #{darken(rgba($main-bg-color, 0.9), 10%)};
+
+  --length-indicator-color: #{$main-theme-color};
 }

src/scss/themes/_dark.scss

@@ -46,4 +46,6 @@
   --tab-bg-hover-non-selected: #{darken($main-bg-color, 1%)};
 
   --toast-anchor-color: #{$anchor-color};
+
+  --length-indicator-color: var(--action-button-fill-color);
 }

src/scss/themes/cobalt.scss

@@ -18,6 +18,10 @@ $compose-background: lighten($main-theme-color, 32%);
   --settings-list-item-text: #{$main-text-color};
   --settings-list-item-text-hover: #{$main-text-color};
 
+  --action-button-fill-color: #{lighten($main-theme-color, 30%)};
+  --action-button-fill-color-hover: #{lighten($main-theme-color, 35%)};
+  --action-button-fill-color-active: #{lighten($main-theme-color, 40%)};
+
   --action-button-fill-color-pressed: #{$anchor-color};
   --action-button-fill-color-pressed-hover: #{darken($anchor-color, 2%)};
   --action-button-fill-color-pressed-active: #{darken($anchor-color, 15%)};

src/scss/themes/pitchblack.scss

@@ -29,9 +29,9 @@ $compose-background: darken($main-theme-color, 12%);
   --form-border: #{darken($border-color, 10%)};
 
 
-  --action-button-fill-color: #{$main-theme-color};
-  --action-button-fill-color-hover: #{lighten($main-theme-color, 4%)};
-  --action-button-fill-color-active: #{darken($main-theme-color, 13%)};
+  --action-button-fill-color: #{lighten($main-theme-color, 5%)};
+  --action-button-fill-color-hover: #{lighten($main-theme-color, 12%)};
+  --action-button-fill-color-active: #{darken($main-theme-color, 15%)};
   --action-button-fill-color-pressed: #{lighten($main-theme-color, 20%)};
   --action-button-fill-color-pressed-hover: #{lighten($main-theme-color, 24%)};
   --action-button-fill-color-pressed-active: #{lighten($main-theme-color, 7%)};

src/service-worker.js

@@ -134,10 +134,12 @@ async function showRichNotification (data, notification) {
   const { icon, body } = data
   const tag = notification.id
   const { origin } = self.location
+  const badge = '/icon-push-badge.png'
 
   switch (notification.type) {
     case 'follow': {
       await self.registration.showNotification(data.title, {
+        badge,
         icon,
         body,
         tag,
@@ -151,6 +153,7 @@ async function showRichNotification (data, notification) {
     case 'favourite':
     case 'poll':
       await self.registration.showNotification(data.title, {
+        badge,
         icon,
         body,
         tag,
@@ -162,17 +165,20 @@ async function showRichNotification (data, notification) {
     case 'mention':
       const isPublic = ['public', 'unlisted'].includes(notification.status.visibility)
       const actions = [
-        {
-          action: 'favourite',
-          title: 'Favorite'
-        },
         isPublic && {
           action: 'reblog',
+          icon: '/icon-push-fa-retweet.png', // generated manually from font-awesome-svg
           title: 'Boost'
+        },
+        {
+          action: 'favourite',
+          icon: '/icon-push-fa-star.png', // generated manually from font-awesome-svg
+          title: 'Favorite'
         }
       ].filter(Boolean)
 
       await self.registration.showNotification(data.title, {
+        badge,
         icon,
         body,
         tag,
@@ -191,11 +197,13 @@ async function showRichNotification (data, notification) {
 const cloneNotification = notification => {
   const clone = {}
 
-  // Object.assign() does not work with notifications
   for (let k in notification) {
-    // intentionally not doing a hasOwnProperty check
+    // deliberately not doing a hasOwnProperty check, but skipping
+    // functions and null props like onclick and onshow and showTrigger
+    if (typeof notification[k] !== 'function' && notification[k] !== null) {
       clone[k] = notification[k]
     }
+  }
 
   return clone
 }