Improve options page styling

ext/src/_locales/en/messages.json

@@ -25,7 +25,7 @@
         "message": "HTML5 video/audio media casting."
     }
   , "optionsMediaEnabled": {
-        "message": "Enabled"
+        "message": "Media casting enabled"
     }
 
   , "optionsLocalMediaCategoryName": {
@@ -35,7 +35,7 @@
         "message": "HTTP server started by the bridge app to stream local media files to the cast receiver."
     }
   , "optionsLocalMediaEnabled": {
-        "message": "Enabled"
+        "message": "Local media casting enabled"
     }
   , "optionsLocalMediaServerPort": {
         "message": "HTTP server port"
@@ -48,7 +48,7 @@
         "message": "Sites for which to replace the user agent with a Chrome version for compatibility. Must be valid match patterns."
     }
   , "optionsUserAgentWhitelistEnabled": {
-        "message": "Enabled"
+        "message": "Site whitelist enabled"
     }
   , "optionsUserAgentWhitelistContent": {
         "message": "Match patterns (newline-separated)"
@@ -82,14 +82,14 @@
         "message": "Screen/Tab mirroring to a Chromecast receiver app."
     }
   , "optionsMirroringEnabled": {
-        "message": "Enabled"
+        "message": "Screen mirroring enabled"
     }
   , "optionsMirroringAppId": {
         "message": "Receiver app ID"
     }
 
   , "optionsReset": {
-        "message": "Reset to defaults"
+        "message": "Restore Defaults"
     }
   , "optionsSubmit": {
         "message": "Submit"

ext/src/options/EditableList.jsx

@@ -123,17 +123,19 @@ export default class EditableList extends Component {
 
         return (
             <div className="editable-list">
-                <button className="editable-list__view-button"
-                        onClick={ this.handleSwitchView }>
-                    { this.state.rawView
-                        ? _("optionsUserAgentWhitelistBasicView")
-                        : _("optionsUserAgentWhitelistRawView") }
-                </button>
-                { this.state.rawView &&
-                    <button className="editable-list__save-raw-button"
-                            onClick={ this.handleSaveRaw }>
-                        { _("optionsUserAgentWhitelistSaveRaw") }
-                    </button> }
+                <div className="editable-list__view-actions">
+                    { this.state.rawView &&
+                        <button className="editable-list__save-raw-button"
+                                onClick={ this.handleSaveRaw }>
+                            { _("optionsUserAgentWhitelistSaveRaw") }
+                        </button> }
+                    <button className="editable-list__view-button"
+                            onClick={ this.handleSwitchView }>
+                        { this.state.rawView
+                            ? _("optionsUserAgentWhitelistBasicView")
+                            : _("optionsUserAgentWhitelistRawView") }
+                    </button>
+                </div>
                 <hr />
                 { do {
                     if (this.state.rawView) {
@@ -172,4 +174,4 @@ export default class EditableList extends Component {
             </div>
         );
     }
-}
+}

ext/src/options/index.css

@@ -1,87 +0,0 @@
-*:invalid {
-    box-shadow: 0 0 1.5px 1px red;
-}
-
-#form {
-    display: flex;
-    flex-direction: column;
-}
-
-#buttons {
-    align-self: flex-end;
-    margin-block-start: 5px;
-}
-
-#buttons > :not(:last-child) {
-    margin-inline-end: 5px;
-}
-
-
-.category {
-    display: grid;
-    grid-template-columns: 150px 1fr;
-    grid-column-gap: 20px;
-    grid-row-gap: 5px;
-}
-
-.category__name {}
-
-.category__description {
-    color: graytext;
-}
-
-.category__description,
-.category .category {
-    grid-column: span 2;
-}
-
-
-.option {
-    display: contents;
-}
-
-.option__label {
-    text-align: right;
-    display: inline-block;
-}
-
-.option > input {
-    align-self: center;
-    justify-self: flex-start;
-}
-
-
-.editable-list {
-    justify-content: end;
-}
-
-.editable-list__items {
-    display: flex;
-    flex-direction: column;
-    padding: initial;
-}
-
-.editable-list__item {
-    align-items: center;
-    display: flex;
-    height: 2em;
-}
-
-.editable-list__title {
-    flex: 1;
-}
-
-.editable-list__edit-field {
-    width: -moz-available;
-    margin-inline-end: 1em;
-}
-
-.editable-list__raw-view {
-    max-height: 300px;
-    resize: vertical;
-    width: 100%;
-}
-
-.editable-list__add-button {
-    align-self: end;
-}

ext/src/options/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
     <head>
         <meta charset="utf-8">
-        <link rel="stylesheet" href="index.css">
+        <link rel="stylesheet" href="styles/index.css">
         <script src="bundle.js" defer></script>
     </head>
     <body>

ext/src/options/index.jsx

@@ -9,6 +9,17 @@ import EditableList from "./EditableList";
 
 const _ = browser.i18n.getMessage;
 
+// macOS styles
+browser.runtime.getPlatformInfo()
+    .then(platformInfo => {
+        if (platformInfo.os === "mac") {
+            const link = document.createElement("link");
+            link.rel = "stylesheet";
+            link.href = "styles/mac.css";
+            document.head.appendChild(link);
+        }
+    });
+
 
 const MATCH_PATTERN_REGEX = /^(?:(?:(\*|https?|ftp):\/\/((?:\*\.|[^\/\*])+)|(file):\/\/\/?(?:\*\.|[^\/\*])+)(\/.*)|<all_urls>)$/;
 
@@ -128,17 +139,18 @@ class App extends Component {
                         { _("optionsMediaCategoryDescription") }
                     </p>
 
-                    <label className="option">
-                        <div className="option__label">
-                            { _("optionsMediaEnabled") }
-                        </div>
+                    <label className="option option--inline">
                         <input name="mediaEnabled"
                                type="checkbox"
                                checked={ this.state.options.mediaEnabled }
                                onChange={ this.handleInputChange } />
+                        <div className="option__label">
+                            { _("optionsMediaEnabled") }
+                        </div>
                     </label>
 
-                    <fieldset className="category">
+                    <fieldset className="category"
+                              disabled={ !this.state.options.mediaEnabled }>
                         <legend className="category__name">
                             { _("optionsLocalMediaCategoryName") }
                         </legend>
@@ -146,14 +158,14 @@ class App extends Component {
                             { _("optionsLocalMediaCategoryDescription") }
                         </p>
 
-                        <label className="option">
-                            <div className="option__label">
-                                { _("optionsLocalMediaEnabled") }
-                            </div>
+                        <label className="option option--inline">
                             <input name="localMediaEnabled"
                                    type="checkbox"
                                    checked={ this.state.options.localMediaEnabled }
                                    onChange={ this.handleInputChange } />
+                            <div className="option__label">
+                                { _("optionsLocalMediaEnabled") }
+                            </div>
                         </label>
 
                         <label className="option">
@@ -179,14 +191,14 @@ class App extends Component {
                         { _("optionsMirroringCategoryDescription") }
                     </p>
 
-                    <label className="option">
-                        <div className="option__label">
-                            { _("optionsMirroringEnabled") }
-                        </div>
+                    <label className="option option--inline">
                         <input name="mirroringEnabled"
                                type="checkbox"
                                checked={ this.state.options.mirroringEnabled }
                                onChange={ this.handleInputChange } />
+                        <div className="option__label">
+                            { _("optionsMirroringEnabled") }
+                        </div>
                     </label>
 
                     <label className="option">
@@ -209,14 +221,14 @@ class App extends Component {
                         { _("optionsUserAgentWhitelistCategoryDescription") }
                     </p>
 
-                    <label className="option">
-                        <div className="option__label">
-                            { _("optionsUserAgentWhitelistEnabled") }
-                        </div>
+                    <label className="option option--inline">
                         <input name="userAgentWhitelistEnabled"
                                type="checkbox"
                                checked={ this.state.options.userAgentWhitelistEnabled }
                                onChange={ this.handleInputChange } />
+                        <div className="option__label">
+                            { _("optionsUserAgentWhitelistEnabled") }
+                        </div>
                     </label>
 
                     <div className="option">
@@ -235,6 +247,7 @@ class App extends Component {
                         { _("optionsReset") }
                     </button>
                     <button type="submit"
+                            default
                             disabled={ !this.state.isFormValid }>
                         { _("optionsSubmit") }
                     </button>

ext/src/options/styles/index.css

@@ -0,0 +1,150 @@
+*:invalid {
+    box-shadow: 0 0 1.5px 1px red;
+}
+
+#form {
+    display: flex;
+    flex-direction: column;
+}
+
+#buttons {
+    align-self: flex-end;
+    margin-block-start: 5px;
+}
+
+#buttons > :not(:last-child) {
+    margin-inline-end: 5px;
+}
+
+
+.category {
+    border: initial;
+    display: grid;
+    grid-template-columns: 150px 1fr;
+    grid-column-gap: 20px;
+    grid-row-gap: 5px;
+    margin: initial;
+    padding: 15px 0;
+}
+
+.category:disabled {
+    color: graytext;
+}
+
+.category:not(:first-of-type) {
+    border-top: 1px solid rgb(225, 225, 225);
+}
+
+.category > .category {
+    background: rgba(235, 235, 235);
+    border-radius: 3px;
+    padding: 10px 0;
+    box-shadow: inset 6px 0 0 0 rgba(0, 0, 0, 0.1);
+}
+
+.category > .category:disabled {
+    background: rgba(245, 245, 245);
+}
+
+.category > .category > .category__name,
+.category > .category > .category__description {
+    margin-inline-start: 16px;
+}
+
+.category__name {
+    float: left;
+}
+
+.category__description {
+    color: graytext;
+    margin-top: initial;
+}
+
+.category__description,
+.category .category {
+    grid-column: span 2;
+}
+
+
+.option {
+    display: contents;
+}
+
+.option--inline {
+    display: block;
+    grid-column-start: 2;
+}
+
+.option__label {
+    text-align: right;
+    display: inline-block;
+}
+
+.option > input {
+    align-self: center;
+    justify-self: flex-start;
+    margin-inline-start: initial;
+}
+
+
+.editable-list {
+    border: 1px solid rgb(225, 225, 225);
+    justify-content: end;
+    padding: 5px;
+}
+
+.editable-list__view-actions {
+    display: flex;
+    justify-content: end;
+}
+
+.editable-list__view-button,
+.editable-list__save-raw-button {
+
+}
+
+.editable-list hr {
+    border: initial;
+    border-top: 1px solid rgb(225, 225, 225);
+    margin: 5px 0;
+}
+
+.editable-list__items {
+    display: flex;
+    flex-direction: column;
+    margin: initial;
+    margin-inline-start: -5px;
+    padding: initial;
+    width: calc(100% + 10px);
+}
+
+.editable-list__item {
+    align-items: center;
+    display: flex;
+    height: 2em;
+    padding: 0 5px;
+}
+
+.editable-list__item:nth-of-type(even) {
+    background-color: rgb(245, 245, 245);
+}
+
+.editable-list__title {
+    flex: 1;
+}
+
+.editable-list__edit-field {
+    width: -moz-available;
+    margin-inline-end: 1em;
+}
+
+.editable-list__raw-view {
+    max-height: 300px;
+    resize: vertical;
+    width: 100%;
+}
+
+.editable-list__add-button {
+    align-self: end;
+    margin-top: 5px;
+}

ext/src/options/styles/mac.css

@@ -0,0 +1,23 @@
+body {
+    font: menu;
+}
+
+button,
+select,
+input {
+    font: inherit;
+}
+
+button:not([disabled]):hover:active {
+  color: -moz-mac-buttonactivetext;
+}
+button[default]:not([disabled]):not(:-moz-window-inactive) {
+  color: -moz-mac-defaultbuttontext;
+}
+button[default]:not(:hover):active {
+  color: ButtonText;
+}
+
+button {
+    height: 22px;
+}