Migrate to MUI v5

README.md

@@ -35,9 +35,20 @@ $ yarn
 
 ## Build
 ```shell
-$ yarn build   // Packages will be built in the "build" directory.
+$ yarn build    # Packages will be built in the "build" directory.
 ```
 
+## Run
+Using the `web-ext` library, you can launch a browser window with the extension installed using the following:
+```shell
+$ yarn load        # runs in Firefox
+```
+or
+```shell
+$ yarn load:msedge # runs in MS Edge
+```
+The extension will be automatically reloaded when you re-run `yarn build`.
+
 ## Import domains JSON structure
 ```json
 [

package.json

@@ -4,23 +4,23 @@
   "private": true,
   "sideEffects": false,
   "dependencies": {
-    "@material-ui/core": "^4.0.1",
-    "@material-ui/icons": "^4.0.1",
+    "@emotion/react": "^11.13.0",
+    "@emotion/styled": "^11.13.0",
+    "@mui/icons-material": "^5.16.6",
+    "@mui/material": "^5.16.6",
     "archiver": "^5.0.2",
     "chrome-storage-promise": "^0.1.0",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
     "react-redux": "7.2.0",
     "redux-observable": "^1.0.0",
     "redux-promise-middleware": "6.1.2",
-    "web-ext-types": "^3.2.1"
+    "tss-react": "^4.9.11"
   },
   "scripts": {
     "build": "webpack --stats-children",
-    "load": "web-ext run"
-  },
-  "webExt": {
-    "sourceDir": "build/firefox/"
+    "load": "web-ext run --no-config-discovery --verbose --source-dir build/firefox/",
+    "load:msedge": "web-ext run --no-config-discovery --verbose --source-dir build/chrome/ --target chromium --chromium-binary \"%ProgramFiles(x86)%/Microsoft/Edge/Application/msedge.exe\""
   },
   "devDependencies": {
     "@babel/core": "^7.10.2",
@@ -46,8 +46,10 @@
     "style-loader": "^2.0.0",
     "ts-loader": "^9.4.2",
     "tslint": "^6.1.2",
-    "typescript": "^3.7.5",
+    "typescript": "^5.5.4",
     "url-loader": "4.1.0",
+    "web-ext": "^8.2.0",
+    "web-ext-types": "^3.2.1",
     "webpack": "^5.76.0",
     "webpack-cli": "^4.2.0",
     "webpack-dev-server": "^4.7.2",

src/components/App/App.tsx

@@ -1,7 +1,7 @@
 import { Domain, DisplayStyle, Color } from '../../types';
 import * as React from 'react';
 // import AddDomain from '../AddDomain/AddDomain';
-import CssBaseline from '@material-ui/core/CssBaseline';
+import CssBaseline from '@mui/material/CssBaseline';
 
 import TopBar from '../TopBar/TopBar';
 import BottomBar from '../BottomBar/BottomBar';

src/components/App/SnackBar.tsx

@@ -1,8 +1,8 @@
 import * as React from "react";
-import Snackbar from '@material-ui/core/Snackbar';
-import Button from '@material-ui/core/Button';
-import IconButton from '@material-ui/core/IconButton';
-import CloseIcon from '@material-ui/icons/Close';
+import Snackbar from '@mui/material/Snackbar';
+import Button from '@mui/material/Button';
+import IconButton from '@mui/material/IconButton';
+import CloseIcon from '@mui/icons-material/Close';
 
 interface Props {
   options: any;
@@ -58,7 +58,7 @@ class SnackBar extends React.Component<Props, State> {
               aria-label="Close"
               color="inherit"
               onClick={this.handleClose}
-            >
+              size="large">
               <CloseIcon />
             </IconButton>,
           ]}

src/components/BottomBar/BottomBar.tsx

@@ -1,37 +1,22 @@
 import * as React from 'react';
-import Toolbar from '@material-ui/core/Toolbar';
-import AppBar from '@material-ui/core/AppBar';
-import { withStyles } from '@material-ui/core/styles';
-import Grid from '@material-ui/core/Grid';
-import FormControl from '@material-ui/core/FormControl';
-import TextField from '@material-ui/core/TextField';
-import InputLabel from '@material-ui/core/InputLabel';
-import Select from '@material-ui/core/Select';
-import MenuItem from '@material-ui/core/MenuItem';
-import Button from '@material-ui/core/Button';
-import InputAdornment from '@material-ui/core/InputAdornment';
-import ColorIcon from '@material-ui/icons/InvertColors';
-import NoColorIcon from '@material-ui/icons/InvertColorsOff';
-import AddIcon from '@material-ui/icons/Add';
-import AddLocationIcon from '@material-ui/icons/AddLocation';
+import Toolbar from '@mui/material/Toolbar';
+import AppBar from '@mui/material/AppBar';
+import { withStyles } from 'tss-react/mui';
+import Grid from '@mui/material/Grid';
+import FormControl from '@mui/material/FormControl';
+import TextField from '@mui/material/TextField';
+import InputLabel from '@mui/material/InputLabel';
+import Select from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import Button from '@mui/material/Button';
+import InputAdornment from '@mui/material/InputAdornment';
+import ColorIcon from '@mui/icons-material/InvertColors';
+import NoColorIcon from '@mui/icons-material/InvertColorsOff';
+import AddIcon from '@mui/icons-material/Add';
+import AddLocationIcon from '@mui/icons-material/AddLocation';
 import { DisplayStyle, Color } from '../../types';
 import { HIGHLIGHT, FULL_HIDE, PARTIAL_HIDE, COLOR_1 } from '../..//constants';
 
-interface Props {
-  classes: any;
-  addDomain: (domainName: string, display: DisplayStyle, color?: Color) => void;
-  currentTabUrl: string | null;
-  options: any;
-}
-
-interface State {
-  domainName: string;
-  color: number;
-  display: number;
-  disableColors: boolean;
-  emptyDomain: boolean;
-}
-
 const styles = {
   root: {
     flexGrow: 1,
@@ -49,9 +34,24 @@ const styles = {
   }
 };
 
+interface Props {
+  classes?: Partial<Record<keyof typeof styles, string>>;
+  addDomain: (domainName: string, display: DisplayStyle, color?: Color) => void;
+  currentTabUrl: string | null;
+  options: any;
+}
+
+interface State {
+  domainName: string;
+  color: number;
+  display: number;
+  disableColors: boolean;
+  emptyDomain: boolean;
+}
+
 class BottomBar extends React.Component<Props, State> {
 
-  domainNameTextInputRef = React.createRef() as React.RefObject<HTMLElement>;
+  domainNameTextInputRef = React.createRef() as React.RefObject<HTMLInputElement>;
 
   constructor (props: any) {
     super(props);
@@ -75,7 +75,7 @@ class BottomBar extends React.Component<Props, State> {
     addEventListener("keyup", (e: KeyboardEvent) => {
       const input = this.domainNameTextInputRef &&
                     this.domainNameTextInputRef.current &&
-                    this.domainNameTextInputRef.current.firstChild as HTMLElement;
+                    this.domainNameTextInputRef.current.firstChild as HTMLInputElement;
       const activeElementTagName = document.activeElement && document.activeElement.tagName;
       if (input && activeElementTagName === 'BODY' && ["1", "2", "3", "4", "5"].includes(e.key)) {
         this.handleGetCurrentUrl();
@@ -169,50 +169,49 @@ class BottomBar extends React.Component<Props, State> {
   }
 
   render () {
-    const classes = this.props.classes;
+    const classes = withStyles.getClasses(this.props);
     return (
       <AppBar position="fixed" color="default" className={classes.appBar}>
         <Toolbar style={{paddingBottom: '10px'}}>
           <form className={classes.root} autoComplete="off" onSubmit={this.handleSubmit}>
             <Grid container spacing={1}>
               <Grid item xs={7}>
-                <FormControl fullWidth>
+                <FormControl variant="standard" fullWidth>
                   <TextField
+                    variant="standard"
                     error={this.state.emptyDomain}
                     label="Domain name"
-                    className={classes.textField}
                     value={this.state.domainName}
                     onChange={this.handleDomainNameChange}
                     InputProps={{
                       ref: this.domainNameTextInputRef,
                       endAdornment: <InputAdornment position="end">
                         <AddLocationIcon color="primary" onClick={this.handleGetCurrentUrl} style={{cursor: "pointer"}} />
                       </InputAdornment>,
-                    }}
-                  />
+                    }} />
                 </FormControl>
               </Grid>
               <Grid item xs={3} sm={2}>
-                <FormControl fullWidth className={classes.formControl}>
+                <FormControl variant="standard" fullWidth>
                   <InputLabel htmlFor="age-simple">Style</InputLabel>
                   <Select
+                    variant="standard"
                     value={this.state.display}
-                    onChange={this.handleDisplayChange}
-                  >
+                    onChange={this.handleDisplayChange}>
                     <MenuItem value="1" selected>Highlight</MenuItem>
                     <MenuItem value="2">Transparent</MenuItem>
                     <MenuItem value="3">Hide</MenuItem>
                   </Select>
                 </FormControl>
               </Grid>
               <Grid item xs={2} sm={1}>
-                <FormControl fullWidth className={classes.formControl}>
+                <FormControl variant="standard" fullWidth>
                   <InputLabel htmlFor="age-simple">Color</InputLabel>
                   <Select
+                    variant="standard"
                     value={this.state.color}
                     onChange={this.handleColorChange}
-                    disabled={this.state.disableColors}
-                  >
+                    disabled={this.state.disableColors}>
                     <MenuItem value="0" disabled><NoColorIcon className={classes.colorIcon} style={{color: '#607D8B'}} /></MenuItem>
                     <MenuItem value="1"><ColorIcon className={classes.colorIcon} style={{color: '#f50057'}} /></MenuItem>
                     <MenuItem value="2"><ColorIcon className={classes.colorIcon} style={{color: '#8BC34A'}} /></MenuItem>
@@ -224,8 +223,11 @@ class BottomBar extends React.Component<Props, State> {
                 </FormControl>
               </Grid>
               <Grid item xs={12} sm={2}>
-                <FormControl margin="dense" fullWidth className={classes.formControl}>
-                  <Button type="submit" variant="contained" size="small" color="secondary" className={classes.button}>
+                <FormControl
+                  variant="standard"
+                  margin="dense"
+                  fullWidth>
+                  <Button type="submit" variant="contained" size="small" color="secondary">
                     Add <AddIcon />
                   </Button>
                 </FormControl>
@@ -240,4 +242,4 @@ class BottomBar extends React.Component<Props, State> {
   }
 }
 
-export default withStyles(styles)(BottomBar);
+export default withStyles(BottomBar, styles);

src/components/Content/ResultManagement.tsx

@@ -1,14 +1,16 @@
 import * as React from "react";
-import Arrow from '@material-ui/icons/KeyboardArrowDown';
-import FavoriteBorderIcon from '@material-ui/icons/Favorite';
-import OffIcon from '@material-ui/icons/VisibilityOff';
-import BlockIcon from '@material-ui/icons/Opacity';
-import DeleteIcon from '@material-ui/icons/RemoveCircle';
-import IconButton from '@material-ui/core/IconButton';
+import Arrow from '@mui/icons-material/KeyboardArrowDown';
+import FavoriteBorderIcon from '@mui/icons-material/Favorite';
+import OffIcon from '@mui/icons-material/VisibilityOff';
+import BlockIcon from '@mui/icons-material/Opacity';
+import DeleteIcon from '@mui/icons-material/RemoveCircle';
+import IconButton from '@mui/material/IconButton';
 import { FULL_HIDE, PARTIAL_HIDE, HIGHLIGHT, COLOR_1, COLOR_2, COLOR_3, REMOVE_DOMAIN } from '../../constants';
 
 interface Props {
   url: string;
+  showDeleteButton: boolean;
+  handleClick: (e: React.MouseEvent<HTMLButtonElement>, action: string, color: string | null, domain: string) => void;
 }
 
 export const getShortUrl = (u: string): string | null => {
@@ -25,33 +27,56 @@ export const getShortUrl = (u: string): string | null => {
 };
 
 export const ResultManagement = (props: Props): JSX.Element => {
-
   const domainName: string | null = getShortUrl(props.url);
+  const handleClick = props.handleClick;
 
   return (
     <div>
       <Arrow />
       <div className="hohser_actions">
         <p className="hohser_actions_domain">
           {domainName}
-          <IconButton data-domain={domainName} data-action={REMOVE_DOMAIN}>
+          {props.showDeleteButton && <IconButton
+            size="large"
+            onClick={(e) => handleClick(e, REMOVE_DOMAIN, null, domainName)}
+            >
             <DeleteIcon />
-          </IconButton>
+          </IconButton>}
         </p>
         <div className="hohser_actions_btns">
-          <IconButton title="Hide" data-domain={domainName} data-action={FULL_HIDE}>
+          <IconButton
+            title="Hide"
+            size="large"
+            onClick={(e) => handleClick(e, FULL_HIDE, null, domainName)}
+            >
             <OffIcon fontSize="small" />
           </IconButton>
-          <IconButton title="Transparent" data-domain={domainName} data-action={PARTIAL_HIDE}>
+          <IconButton
+            title="Transparent"
+            size="large"
+            onClick={(e) => handleClick(e, PARTIAL_HIDE, null, domainName)}
+            >
             <BlockIcon fontSize="small" />
           </IconButton>
-          <IconButton title="Highlight (red)" data-domain={domainName} data-action={HIGHLIGHT} data-color={COLOR_1}>
+          <IconButton
+            title="Highlight (red)"
+            size="large"
+            onClick={(e) => handleClick(e, HIGHLIGHT, COLOR_1, domainName)}
+            >
             <FavoriteBorderIcon style={{color: "#f50057"}} fontSize="small" />
           </IconButton>
-          <IconButton title="Highlight (green)" data-domain={domainName} data-action={HIGHLIGHT} data-color={COLOR_2}>
+          <IconButton
+            title="Highlight (green)"
+            size="large"
+            onClick={(e) => handleClick(e, HIGHLIGHT, COLOR_2, domainName)}
+            >
             <FavoriteBorderIcon style={{color: "#8BC34A"}} fontSize="small" />
           </IconButton>
-          <IconButton title="Highlight (blue)" data-domain={domainName} data-action={HIGHLIGHT} data-color={COLOR_3}>
+          <IconButton
+            title="Highlight (blue)"
+            size="large"
+            onClick={(e) => handleClick(e, HIGHLIGHT, COLOR_3, domainName)}
+            >
             <FavoriteBorderIcon style={{color: "#03A9F4"}} fontSize="small" />
           </IconButton>
         </div>