Display a driver warning on macOS connection failure (#4)

* Only lint ant format the `src` subdirectory

* Display a message for macOS users using CP210x chips

* Bump version to 0.9.4

* Use `<strong>` instead of `<code>`

* Remove margin around warning

index.html

@@ -68,7 +68,7 @@ <h1>
         // In development we import locally.
         window.location.hostname === 'localhost'
           ? '/dist/web/nabucasa-zigbee-flasher.js'
-          : 'https://unpkg.com/@nabucasa/sl-web-tools@0.9.3/dist/web/nabucasa-zigbee-flasher.js?module'
+          : 'https://unpkg.com/@nabucasa/sl-web-tools@0.9.4/dist/web/nabucasa-zigbee-flasher.js?module'
       );
     </script>
   </body>

package.json

@@ -3,10 +3,10 @@
   "description": "WebSerial firmware flasher for Silicon Labs Zigbee radios",
   "license": "MIT",
   "author": "puddly",
-  "version": "0.9.3",
+  "version": "0.9.4",
   "scripts": {
-    "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
-    "format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
+    "lint": "eslint --ext .ts,.html src --ignore-path .gitignore && prettier \"src/**/*.ts\" --check --ignore-path .gitignore",
+    "format": "eslint --ext .ts,.html src --fix --ignore-path .gitignore && prettier \"src/**/*.ts\" --write --ignore-path .gitignore",
     "build": "script/build",
     "prepublishOnly": "npm run build",
     "analyze": "cem analyze --litelement"

src/flashing-dialog.ts

@@ -10,7 +10,7 @@ import '@material/mwc-formfield';
 import '@material/mwc-radio';
 import '@material/mwc-dialog';
 
-import { mdiChip, mdiShimmer, mdiAutorenew, mdiClose } from '@mdi/js';
+import { mdiChip, mdiShimmer, mdiAutorenew, mdiClose, mdiAlert } from '@mdi/js';
 import './usf-icon';
 import './usf-icon-button';
 import './usf-file-upload';
@@ -114,6 +114,28 @@ export class FlashingDialog extends LitElement {
     td usf-icon {
       vertical-align: bottom;
     }
+
+    section.warning {
+      background-color: hsl(38, 96%, 90%);
+
+      font-size: 0.9em;
+
+      margin-left: -24px;
+      margin-right: -24px;
+
+      padding-left: 24px;
+      padding-right: 24px;
+      padding-top: 12px;
+      padding-bottom: 12px;
+    }
+
+    section.warning h2 usf-icon {
+      vertical-align: text-bottom;
+    }
+
+    section.warning code {
+      font-weight: bold;
+    }
   `;
 
   @state()
@@ -389,8 +411,34 @@ export class FlashingDialog extends LitElement {
         </p>
       </p>`;
     } else if (this.flashingStep === FlashingStep.PROBING_FAILED) {
+      const isMacOS = navigator.userAgent.includes('Mac OS');
+      const isUsingCP210x = this.manifest.usb_filters.find(
+        filter => filter.vid == 4292 && filter.pid == 60000
+      );
+
       headingText = 'Connection failed';
-      content = html`<p>The running firmware could not be detected.</p>
+      content = html`${isMacOS && isUsingCP210x
+          ? html`<section class="warning">
+              <h2><usf-icon .icon=${mdiAlert}></usf-icon> macOS Driver Bug</h2>
+
+              <p>
+                The built-in drivers on macOS do not work properly with the
+                ${this.manifest.product_name}. Install the updated
+                <a
+                  href="https://www.silabs.com/developers/usb-to-uart-bridge-vcp-drivers?tab=downloads"
+                  target="_blank"
+                  rel="noreferrer noopener"
+                  >Silicon Labs CP2102 driver</a
+                >
+                and re-connect to the serial port titled
+                <strong
+                  >CP210x USB to UART Bridge Controller
+                  (cu.SLAB_USBtoUART)</strong
+                >.
+              </p>
+            </section>`
+          : ''}
+        <p>The running firmware could not be detected.</p>
 
         <p>
           Make sure the USB port works and if you are using a USB extension