From fc048a5fbef87deac4f36c63e71f969bc6301bee Mon Sep 17 00:00:00 2001
From: Kristóf Marussy <kristof@marussy.com>
Date: Fri, 4 Mar 2022 02:01:20 +0100
Subject: refactor(renderer): Location bar security label
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Since electron doesn't have an API to extract the current certificate,
except in the case of certificate errors, there's no point in making the
security warning / padlock icon clickable.

We instead display a plain icon and a warning message.
We will later display the certificate details in case of a validation
error (when we have access to the certificate) as part of an error
message.

Also makes the security labels more visible to people with protanopia
who use the dark mode of the UI.

Signed-off-by: Kristóf Marussy <kristof@marussy.com>
---
 .../src/components/locationBar/ButtonAdornment.tsx |  69 --------------
 .../src/components/locationBar/GoAdornment.tsx     |  43 ---------
 .../src/components/locationBar/GoButton.tsx        |  51 +++++++++++
 .../src/components/locationBar/IconAdornment.tsx   |  41 ---------
 .../locationBar/LocationInputAdornment.tsx         |  41 +++++++++
 .../components/locationBar/LocationTextField.tsx   |  14 ++-
 .../src/components/locationBar/SecurityLabel.tsx   | 102 +++++++++++++++++++++
 .../src/components/locationBar/UrlAdornment.tsx    |  91 ------------------
 .../src/components/locationBar/UrlOverlay.tsx      |   3 +-
 .../src/components/locationBar/getAlertColor.ts    |  28 ++++++
 10 files changed, 234 insertions(+), 249 deletions(-)
 delete mode 100644 packages/renderer/src/components/locationBar/ButtonAdornment.tsx
 delete mode 100644 packages/renderer/src/components/locationBar/GoAdornment.tsx
 create mode 100644 packages/renderer/src/components/locationBar/GoButton.tsx
 delete mode 100644 packages/renderer/src/components/locationBar/IconAdornment.tsx
 create mode 100644 packages/renderer/src/components/locationBar/LocationInputAdornment.tsx
 create mode 100644 packages/renderer/src/components/locationBar/SecurityLabel.tsx
 delete mode 100644 packages/renderer/src/components/locationBar/UrlAdornment.tsx
 create mode 100644 packages/renderer/src/components/locationBar/getAlertColor.ts

(limited to 'packages/renderer/src')

diff --git a/packages/renderer/src/components/locationBar/ButtonAdornment.tsx b/packages/renderer/src/components/locationBar/ButtonAdornment.tsx
deleted file mode 100644
index 2cf230b..0000000
--- a/packages/renderer/src/components/locationBar/ButtonAdornment.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-/*
- * Copyright (C)  2022 Kristóf Marussy <kristof@marussy.com>
- *
- * This file is part of Sophie.
- *
- * Sophie is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, version 3.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <https://www.gnu.org/licenses/>.
- *
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-
-import InputAdornment from '@mui/material/InputAdornment';
-import { styled } from '@mui/material/styles';
-
-export const NO_LABEL_BUTTON_CLASS_NAME = 'ButtonAdornment-NoLabel';
-
-const ButtonAdornment = styled(InputAdornment, {
-  name: 'ButtonAdornment',
-})(({ theme, position }) => {
-  const { direction } = theme;
-  const left = direction === 'ltr' ? 'start' : 'end';
-  return {
-    ...(position === left
-      ? {
-          marginRight: 2,
-          marginLeft: -8,
-        }
-      : {
-          marginLeft: 2,
-          marginRight: -8,
-        }),
-    '.MuiButton-root': {
-      minWidth: 32,
-      height: 32,
-      paddingLeft: 6,
-      paddingRight: 6,
-      borderRadius: 16,
-    },
-    ...(direction === 'ltr'
-      ? {
-          '.MuiButton-startIcon': {
-            marginLeft: 0,
-          },
-          [`.${NO_LABEL_BUTTON_CLASS_NAME} .MuiButton-startIcon`]: {
-            marginRight: 0,
-          },
-        }
-      : {
-          '.MuiButton-startIcon': {
-            marginRight: 0,
-            marginLeft: theme.spacing(1),
-          },
-          [`.${NO_LABEL_BUTTON_CLASS_NAME} .MuiButton-startIcon`]: {
-            marginLeft: 0,
-          },
-        }),
-  };
-});
-
-export default ButtonAdornment;
diff --git a/packages/renderer/src/components/locationBar/GoAdornment.tsx b/packages/renderer/src/components/locationBar/GoAdornment.tsx
deleted file mode 100644
index f049b8e..0000000
--- a/packages/renderer/src/components/locationBar/GoAdornment.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-/*
- * Copyright (C)  2022 Kristóf Marussy <kristof@marussy.com>
- *
- * This file is part of Sophie.
- *
- * Sophie is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, version 3.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <https://www.gnu.org/licenses/>.
- *
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-
-import IconGo from '@mui/icons-material/Send';
-import Button from '@mui/material/Button';
-import React, { MouseEventHandler } from 'react';
-
-import ButtonAdornment, { NO_LABEL_BUTTON_CLASS_NAME } from './ButtonAdornment';
-
-export default function GoAdornment({
-  onClick,
-}: {
-  onClick: MouseEventHandler<HTMLButtonElement>;
-}): JSX.Element {
-  return (
-    <ButtonAdornment position="end">
-      <Button
-        aria-label="Go"
-        color="inherit"
-        startIcon={<IconGo />}
-        className={NO_LABEL_BUTTON_CLASS_NAME}
-        onClick={onClick}
-      />
-    </ButtonAdornment>
-  );
-}
diff --git a/packages/renderer/src/components/locationBar/GoButton.tsx b/packages/renderer/src/components/locationBar/GoButton.tsx
new file mode 100644
index 0000000..32f715e
--- /dev/null
+++ b/packages/renderer/src/components/locationBar/GoButton.tsx
@@ -0,0 +1,51 @@
+/*
+ * Copyright (C)  2022 Kristóf Marussy <kristof@marussy.com>
+ *
+ * This file is part of Sophie.
+ *
+ * Sophie is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import IconGo from '@mui/icons-material/Send';
+import IconButton from '@mui/material/IconButton';
+import React, { MouseEventHandler } from 'react';
+
+import LocationInputAdornment from './LocationInputAdornment';
+
+export default function GoButton({
+  onClick,
+  position,
+}: {
+  onClick: MouseEventHandler<HTMLButtonElement>;
+  position: 'start' | 'end';
+}): JSX.Element {
+  return (
+    <LocationInputAdornment position={position}>
+      <IconButton
+        aria-label="Go"
+        color="inherit"
+        onClick={onClick}
+        sx={{
+          minWidth: '32px',
+          height: '32px',
+          paddingX: '6px',
+          borderRadius: '16px',
+        }}
+      >
+        <IconGo fontSize="small" />
+      </IconButton>
+    </LocationInputAdornment>
+  );
+}
diff --git a/packages/renderer/src/components/locationBar/IconAdornment.tsx b/packages/renderer/src/components/locationBar/IconAdornment.tsx
deleted file mode 100644
index 1a2fa83..0000000
--- a/packages/renderer/src/components/locationBar/IconAdornment.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-/*
- * Copyright (C)  2022 Kristóf Marussy <kristof@marussy.com>
- *
- * This file is part of Sophie.
- *
- * Sophie is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, version 3.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <https://www.gnu.org/licenses/>.
- *
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-
-import InputAdornment from '@mui/material/InputAdornment';
-import { styled } from '@mui/material/styles';
-
-const IconAdornment = styled(InputAdornment, {
-  name: 'IconAdornment',
-})(({ theme: { direction }, position }) => {
-  const left = direction === 'ltr' ? 'start' : 'end';
-  return {
-    ...(position === left
-      ? {
-          marginLeft: -2,
-          marginRight: 8,
-        }
-      : {
-          marginLeft: 8,
-          marginRight: -2,
-        }),
-  };
-});
-
-export default IconAdornment;
diff --git a/packages/renderer/src/components/locationBar/LocationInputAdornment.tsx b/packages/renderer/src/components/locationBar/LocationInputAdornment.tsx
new file mode 100644
index 0000000..a3cd2c5
--- /dev/null
+++ b/packages/renderer/src/components/locationBar/LocationInputAdornment.tsx
@@ -0,0 +1,41 @@
+/*
+ * Copyright (C)  2022 Kristóf Marussy <kristof@marussy.com>
+ *
+ * This file is part of Sophie.
+ *
+ * Sophie is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import InputAdornment from '@mui/material/InputAdornment';
+import { styled } from '@mui/material/styles';
+
+const LocationInputAdornment = styled(InputAdornment, {
+  name: 'LocationInputAdornment',
+})(({ theme: { direction }, position }) => {
+  const left = direction === 'ltr' ? 'start' : 'end';
+  const marginStart = -8;
+  const marginEnd = 2;
+  return position === left
+    ? {
+        marginLeft: marginStart,
+        marginRight: marginEnd,
+      }
+    : {
+        marginLeft: marginEnd,
+        marginRight: marginStart,
+      };
+});
+
+export default LocationInputAdornment;
diff --git a/packages/renderer/src/components/locationBar/LocationTextField.tsx b/packages/renderer/src/components/locationBar/LocationTextField.tsx
index e711abc..3a4f7f5 100644
--- a/packages/renderer/src/components/locationBar/LocationTextField.tsx
+++ b/packages/renderer/src/components/locationBar/LocationTextField.tsx
@@ -26,9 +26,9 @@ import React, { useCallback, useEffect, useState } from 'react';
 
 import Service from '../../stores/Service';
 
-import GoAdornment from './GoAdornment';
+import GoButton from './GoButton';
 import LocationOverlayInput from './LocationOverlayInput';
-import UrlAdornment from './UrlAdornment';
+import SecurityLabel from './SecurityLabel';
 import UrlOverlay from './UrlOverlay';
 import splitUrl from './splitUrl';
 
@@ -113,10 +113,16 @@ function LocationTextField({
       hiddenLabel
       disableUnderline
       startAdornment={
-        <UrlAdornment changed={changed} splitResult={splitResult} />
+        <SecurityLabel
+          changed={changed}
+          splitResult={splitResult}
+          position="start"
+        />
       }
       endAdornment={
-        changed ? <GoAdornment onClick={() => service?.go(value)} /> : undefined
+        changed ? (
+          <GoButton onClick={() => service?.go(value)} position="end" />
+        ) : undefined
       }
       value={value}
     />
diff --git a/packages/renderer/src/components/locationBar/SecurityLabel.tsx b/packages/renderer/src/components/locationBar/SecurityLabel.tsx
new file mode 100644
index 0000000..6e27e6b
--- /dev/null
+++ b/packages/renderer/src/components/locationBar/SecurityLabel.tsx
@@ -0,0 +1,102 @@
+/*
+ * Copyright (C)  2022 Kristóf Marussy <kristof@marussy.com>
+ *
+ * This file is part of Sophie.
+ *
+ * Sophie is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import IconHttps from '@mui/icons-material/HttpsOutlined';
+import IconHttp from '@mui/icons-material/NoEncryption';
+import IconGlobe from '@mui/icons-material/Public';
+import IconWarning from '@mui/icons-material/Warning';
+import { styled } from '@mui/material/styles';
+import React from 'react';
+
+import LocationInputAdornment from './LocationInputAdornment';
+import getAlertColor from './getAlertColor';
+import type { SplitResult } from './splitUrl';
+
+const SecurityLabelRoot = styled(LocationInputAdornment, {
+  name: 'SecurityLabel',
+  slot: 'Root',
+  shouldForwardProp: (prop) => prop !== 'alert',
+})<{ alert: boolean }>(({ theme, alert }) => ({
+  padding: 6,
+  color: getAlertColor(theme, alert),
+  // Clicking on the security label should focus the text field instead.
+  pointerEvents: 'none',
+}));
+
+const SecurityLabelText = styled('span', {
+  name: 'SecurityLabel',
+  slot: 'Text',
+})(({ theme }) => ({
+  marginInlineStart: theme.spacing(1),
+  // Keep the same baseline as the input box text.
+  paddingBottom: 1,
+  fontWeight: theme.typography.fontWeightMedium,
+  userSelect: 'none',
+}));
+
+export default function SecurityLabel({
+  splitResult,
+  changed,
+  position,
+}: {
+  splitResult: SplitResult;
+  changed: boolean;
+  position: 'start' | 'end';
+}): JSX.Element {
+  const { type } = splitResult;
+  if (changed || type === 'empty') {
+    return (
+      <SecurityLabelRoot alert={false} position={position} aria-hidden>
+        <IconGlobe fontSize="small" />
+      </SecurityLabelRoot>
+    );
+  }
+  switch (type) {
+    case 'valid': {
+      const { secure } = splitResult;
+      return secure ? (
+        <SecurityLabelRoot
+          alert={false}
+          position={position}
+          aria-label="Secure connection"
+        >
+          <IconHttps fontSize="small" />
+        </SecurityLabelRoot>
+      ) : (
+        <SecurityLabelRoot alert position={position}>
+          <IconHttp fontSize="small" />
+          <SecurityLabelText>Not secure</SecurityLabelText>
+        </SecurityLabelRoot>
+      );
+    }
+    case 'invalid':
+      return (
+        <SecurityLabelRoot alert position={position}>
+          <IconWarning fontSize="small" />
+          <SecurityLabelText>Unknown site</SecurityLabelText>
+        </SecurityLabelRoot>
+      );
+    default:
+      /* eslint-disable-next-line @typescript-eslint/restrict-template-expressions --
+        Error handling for impossible case.
+      */
+      throw new Error(`Unexpected SplitResult: ${type}`);
+  }
+}
diff --git a/packages/renderer/src/components/locationBar/UrlAdornment.tsx b/packages/renderer/src/components/locationBar/UrlAdornment.tsx
deleted file mode 100644
index 6ede378..0000000
--- a/packages/renderer/src/components/locationBar/UrlAdornment.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-/*
- * Copyright (C)  2022 Kristóf Marussy <kristof@marussy.com>
- *
- * This file is part of Sophie.
- *
- * Sophie is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, version 3.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <https://www.gnu.org/licenses/>.
- *
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-
-import IconHttps from '@mui/icons-material/HttpsOutlined';
-import IconGlobe from '@mui/icons-material/Public';
-import IconWarning from '@mui/icons-material/Warning';
-import { styled } from '@mui/material';
-import Button from '@mui/material/Button';
-import React from 'react';
-
-import ButtonAdornment, { NO_LABEL_BUTTON_CLASS_NAME } from './ButtonAdornment';
-import IconAdornment from './IconAdornment';
-import type { SplitResult } from './splitUrl';
-
-const FastColorChangingButton = styled(Button)(({ theme }) => ({
-  transition: theme.transitions.create(
-    ['background-color', 'box-shadow', 'border-color'],
-    {
-      duration: theme.transitions.duration.short,
-      easing: theme.transitions.easing.easeInOut,
-    },
-  ),
-}));
-
-export default function UrlAdornment({
-  splitResult,
-  changed,
-}: {
-  splitResult: SplitResult;
-  changed: boolean;
-}): JSX.Element {
-  const { type } = splitResult;
-  if (changed || type === 'empty') {
-    return (
-      <IconAdornment position="start">
-        <IconGlobe fontSize="small" />
-      </IconAdornment>
-    );
-  }
-  switch (type) {
-    case 'valid': {
-      const { secure } = splitResult;
-      return secure ? (
-        <ButtonAdornment position="start">
-          <FastColorChangingButton
-            aria-label="Show certificate"
-            color="inherit"
-            className={NO_LABEL_BUTTON_CLASS_NAME}
-            startIcon={<IconHttps />}
-          />
-        </ButtonAdornment>
-      ) : (
-        <ButtonAdornment position="start">
-          <FastColorChangingButton color="error" startIcon={<IconWarning />}>
-            Not secure
-          </FastColorChangingButton>
-        </ButtonAdornment>
-      );
-    }
-    case 'invalid':
-      return (
-        <ButtonAdornment position="start">
-          <FastColorChangingButton color="error" startIcon={<IconWarning />}>
-            Unknown site
-          </FastColorChangingButton>
-        </ButtonAdornment>
-      );
-    default:
-      /* eslint-disable-next-line @typescript-eslint/restrict-template-expressions --
-        Error handling for impossible case.
-      */
-      throw new Error(`Unexpected SplitResult: ${type}`);
-  }
-}
diff --git a/packages/renderer/src/components/locationBar/UrlOverlay.tsx b/packages/renderer/src/components/locationBar/UrlOverlay.tsx
index f7a3c4c..d590709 100644
--- a/packages/renderer/src/components/locationBar/UrlOverlay.tsx
+++ b/packages/renderer/src/components/locationBar/UrlOverlay.tsx
@@ -21,6 +21,7 @@
 import { styled } from '@mui/material/styles';
 import React from 'react';
 
+import getAlertColor from './getAlertColor';
 import type { SplitResult } from './splitUrl';
 
 const PrimaryFragment = styled('span', {
@@ -28,7 +29,7 @@ const PrimaryFragment = styled('span', {
   slot: 'PrimaryFragment',
   shouldForwardProp: (prop) => prop !== 'alert',
 })<{ alert: boolean }>(({ theme, alert }) => ({
-  color: alert ? theme.palette.error.main : theme.palette.text.primary,
+  color: getAlertColor(theme, alert),
 }));
 
 const SecondaryFragment = styled('span', {
diff --git a/packages/renderer/src/components/locationBar/getAlertColor.ts b/packages/renderer/src/components/locationBar/getAlertColor.ts
new file mode 100644
index 0000000..82b5f55
--- /dev/null
+++ b/packages/renderer/src/components/locationBar/getAlertColor.ts
@@ -0,0 +1,28 @@
+/*
+ * Copyright (C)  2022 Kristóf Marussy <kristof@marussy.com>
+ *
+ * This file is part of Sophie.
+ *
+ * Sophie is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { Theme } from '@mui/material/styles';
+
+export default function getAlertColor({ palette }: Theme, alert: boolean) {
+  if (alert) {
+    return palette.mode === 'dark' ? palette.error.light : palette.error.main;
+  }
+  return palette.text.primary;
+}
-- 
cgit v1.2.3-54-g00ecf