Update the app for unframed

README.md

@@ -6,7 +6,7 @@ A demo showing off [Isolated Web Apps](https://github.com/WICG/isolated-web-apps
 
 - [Direct Sockets](https://github.com/WICG/direct-sockets)
 - [Controlled Frame](https://github.com/WICG/controlled-frame)
-- [Borderless display mode](https://github.com/WICG/manifest-incubations/blob/gh-pages/borderless-explainer.md)
+- [Unframed display mode](https://github.com/WICG/manifest-incubations/blob/gh-pages/unframed-explainer.md)
 - [Multiscreen capture with auto-permission](https://github.com/screen-share/capture-all-screens)
 
 ### Unrestricted [Protocol Handlers](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Manifest/Reference/protocol_handlers) & [Launch Handler](https://developer.mozilla.org/en-US/docs/Web/API/Launch_Handler_API)

public/.well-known/manifest.webmanifest

@@ -14,7 +14,7 @@
   ],
   "start_url": "/",
   "display": "standalone",
-  "display_override": ["borderless"],
+  "display_override": ["unframed"],
   "scope": "/",
   "isolated_storage": true,
   "permissions_policy": {

src/components/nav.html

@@ -14,8 +14,8 @@
  limitations under the License.
 -->
 
-<!-- Load the borderless button -->
-<load src="src/components/borderless.html" />
+<!-- Load the unframed button -->
+<load src="src/components/unframed.html" />
 
 <header class="container--header">
   <div class="nav">

src/components/scripts/borderless.ts → src/components/scripts/unframed.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-document.getElementById('borderless').addEventListener('click', async (e) => {
+document.getElementById('unframed').addEventListener('click', async (e) => {
   e.preventDefault();
   const screenDetails = await window.getScreenDetails();
   console.log(screenDetails);

src/components/borderless.html → src/components/unframed.html

@@ -14,24 +14,25 @@
  limitations under the License.
 -->
 
-<script type="module" src="/src/components/scripts/borderless.ts"></script>
+<script type="module" src="/src/components/scripts/unframed.ts"></script>
 
 <div id="border">
   <p>This is a custom top border! Drag me!</p>
 </div>
 
-<button id="borderless">
+<button id="unframed">
   <svg
     xmlns="http://www.w3.org/2000/svg"
     height="24"
     viewBox="0 -960 960 960"
     width="24"
-    aria-label="Go Borderless!"
+    aria-hidden="true"
   >
     <path
       d="M120-120v-80h80v80h-80Zm0-160v-80h80v80h-80Zm0-160v-80h80v80h-80Zm0-160v-80h80v80h-80Zm0-160v-80h80v80h-80Zm160 640v-80h80v80h-80Zm0-320v-80h80v80h-80Zm0-320v-80h80v80h-80Zm160 640v-80h80v80h-80Zm0-160v-80h80v80h-80Zm0-160v-80h80v80h-80Zm0-160v-80h80v80h-80Zm0-160v-80h80v80h-80Zm160 640v-80h80v80h-80Zm0-320v-80h80v80h-80Zm0-320v-80h80v80h-80Zm160 640v-80h80v80h-80Zm0-160v-80h80v80h-80Zm0-160v-80h80v80h-80Zm0-160v-80h80v80h-80Zm0-160v-80h80v80h-80Z"
     />
   </svg>
+  <span>Go unframed</span>
 </button>
 
 <style>
@@ -63,26 +64,29 @@
     }
   }
 
-  #borderless {
+  #unframed {
     display: flex;
     justify-content: center;
     align-items: center;
-    padding: 0.5rem;
-    border-radius: 50%;
+    gap: 0.5rem;
+    padding: 0.5rem 1rem;
+    border-radius: 2rem;
     border: 0;
     position: absolute;
     right: 1rem;
     bottom: 1rem;
     background-color: #ea4335;
     box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
+    color: white;
+    font-weight: bold;
 
     svg {
       fill: white;
     }
   }
 
-  @media (display-mode: borderless) {
-    #borderless {
+  @media (display-mode: unframed) {
+    #unframed {
       display: none;
     }
 

src/style.css

@@ -34,7 +34,7 @@ body {
   padding-inline: 1rem;
   min-height: calc(100vh - 1rem);
 
-  @media (display-mode: borderless) {
+  @media (display-mode: unframed) {
     margin-top: 2rem;
     min-height: calc(100vh - 3rem);
   }