Add CustomSocket

Extra closeCodes handling for Firefox
see phoenixframework/phoenix#5735 (comment)

assets/js/app.js

@@ -18,12 +18,12 @@
 // Include phoenix_html to handle method=PUT/DELETE in forms and buttons.
 import "phoenix_html"
 // Establish Phoenix Socket and LiveView configuration.
-import { Socket } from "phoenix"
+import { CustomSocket } from "./custom_socket"
 import { LiveSocket } from "phoenix_live_view"
 import topbar from "../vendor/topbar"
 
 let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
-let liveSocket = new LiveSocket("/live", Socket, {
+let liveSocket = new LiveSocket("/live", CustomSocket, {
   longPollFallbackMs: 2500,
   params: { _csrf_token: csrfToken },
 })

assets/js/custom_socket.js

@@ -0,0 +1,20 @@
+import { Socket } from "phoenix"
+
+export class CustomSocket extends Socket {
+  // Adapted from https://github.com/phoenixframework/phoenix/tree/v1.7.14/assets/js/phoenix
+  onConnClose = function (event) {
+    let closeCode = event && event.code
+    if (this.hasLogger()) this.log("transport", "close", event)
+
+    // Extra closeCodes handling for Firefox
+    // see https://github.com/phoenixframework/phoenix/pull/5735#issuecomment-2167196419
+    if (closeCode == 1000 || closeCode == 1001) this.channels.forEach((c) => c.leave())
+
+    this.triggerChanError()
+    this.clearHeartbeats()
+    if (!this.closeWasClean && closeCode !== 1000) {
+      this.reconnectTimer.scheduleTimeout()
+    }
+    this.stateChangeCallbacks.close.forEach(([, callback]) => callback(event))
+  }
+}

assets/tailwind.config.js

@@ -7,11 +7,30 @@ const brandReducer = (map, color) => {
   return map
 }
 
+const brandColors = ["primary", "secondary"].reduce(brandReducer, {})
+
+const colorMix = (color, pc, base) => `color-mix(in oklab, ${color} ${pc}%, ${base})`
+
+const colors = (color) => {
+  list = {}
+  list[500] = color
+  list[50] = colorMix(color, 20, "white")
+
+  for (let i = 1; i < 5; i++) {
+    list[i * 100] = colorMix(color, 20 + i * 15, "white")
+    list[(i + 5) * 100] = colorMix(color, 100 - i * 15, "black")
+  }
+
+  return list
+}
+
+Object.assign(brandColors, { "brand-green": colors("oklch(52.59% 0.0929 222.19)") })
+
 module.exports = {
   content: ["./js/**/*.js", "../lib/playground_web.ex", "../lib/playground_web/**/*.*ex"],
   theme: {
     extend: {
-      colors: ["primary", "secondary"].reduce(brandReducer, {}),
+      colors: brandColors,
     },
   },
   plugins: [

lib/playground_web/components/core_components.ex

@@ -155,7 +155,7 @@ defmodule PlaygroundWeb.CoreComponents do
         id="client-error"
         kind={:error}
         title={gettext("We can't find the internet")}
-        phx-disconnected={delayed_show(".phx-client-error #client-error")}
+        phx-disconnected={show(".phx-client-error #client-error")}
         phx-connected={hide("#client-error")}
         hidden
       >
@@ -612,19 +612,6 @@ defmodule PlaygroundWeb.CoreComponents do
     )
   end
 
-  # Workaround for "We can't find the internet" flashes on Firefox
-  # https://github.com/phoenixframework/phoenix/issues/5102#issuecomment-1970738490
-  def delayed_show(js \\ %JS{}, selector) do
-    JS.show(js,
-      to: selector,
-      time: 1300,
-      transition:
-        {"delay-1000 transition-all transform ease-out duration-300",
-         "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
-         "opacity-100 translate-y-0 sm:scale-100"}
-    )
-  end
-
   def hide(js \\ %JS{}, selector) do
     JS.hide(js,
       to: selector,

lib/playground_web/components/templates/colors.html.heex

@@ -0,0 +1,12 @@
+<div class="my-4 grid gap-2 text-center text-white *:rounded-md *:p-2">
+  <p class="bg-brand-green-50">Green 50</p>
+  <p class="bg-brand-green-100">Green 100</p>
+  <p class="bg-brand-green-200">Green 200</p>
+  <p class="bg-brand-green-300">Green 300</p>
+  <p class="bg-brand-green-400">Green 400</p>
+  <p class="bg-brand-green-500">Green 500</p>
+  <p class="bg-brand-green-600">Green 600</p>
+  <p class="bg-brand-green-700">Green 700</p>
+  <p class="bg-brand-green-800">Green 800</p>
+  <p class="bg-brand-green-900">Green 900</p>
+</div>

lib/playground_web/live/page_live.ex

@@ -2,7 +2,7 @@ defmodule PlaygroundWeb.PageLive do
   @moduledoc false
   use PlaygroundWeb, :live_view
 
-  embed_templates "components/*"
+  embed_templates "../components/templates/*"
 
   @impl Phoenix.LiveView
   def mount(params, _session, socket) do

lib/playground_web/live/page_live.html.heex

@@ -3,3 +3,5 @@
 </h1>
 
 <%!-- <.buttons /> --%>
+
+<.colors />

test/support/conn_case.ex

@@ -20,6 +20,7 @@ defmodule PlaygroundWeb.ConnCase do
   using do
     quote do
       use PlaygroundWeb, :verified_routes
+
       import Phoenix.ConnTest
       import PlaygroundWeb.ConnCase
       import Plug.Conn