Added individual screen functions

frontend/src/components/main.js

@@ -43,10 +43,10 @@ const getUserAgent = () => ({
 });
 
 const getLanguage = () => ({
-  key: 'userAgent',
+  key: 'language',
-  title: 'User agent',
+  title: 'Language',
-  value: navigator.userAgent,
+  value: navigator.language,
-  issues: checkNavigatorProperties('userAgent'),
+  issues: checkNavigatorProperties('language'),
 });
 
 const getLanguages = () => ({
@@ -92,10 +92,10 @@ const getVendor = () => ({
 });
 
 const getAppVersion = () => ({
-  key: 'vendor',
+  key: 'appVersion',
-  title: 'Vendor',
+  title: 'App Version',
-  value: navigator.vendor,
+  value: navigator.appVersion,
-  issues: checkNavigatorProperties('vendor'),
+  issues: checkNavigatorProperties('appVersion'),
 });
 
 const getProductSub = () => ({
@@ -105,6 +105,62 @@ const getProductSub = () => ({
   issues: checkNavigatorProperties('productSub'),
 });
 
+const getWidth = () => ({
+  key: 'width',
+  title: 'Width',
+  value: window.screen.width,
+  issues: checkScreenProperties('width'),
+});
+
+const getOuterWidth = () => ({
+  key: 'outerWidth',
+  title: 'Outer width',
+  value: window.outerWidth,
+  issues: '',
+});
+
+const getAvailWidth = () => ({
+  key: 'availWidth',
+  title: 'Avail width',
+  value: window.screen.availWidth,
+  issues: checkScreenProperties('availWidth'),
+});
+
+const getHeight = () => ({
+  key: 'height',
+  title: 'Height',
+  value: window.screen.height,
+  issues: checkScreenProperties('height'),
+});
+
+const getOuterHeight = () => ({
+  key: 'outerHeight',
+  title: 'Outer height',
+  value: window.outerHeight,
+  issues: '',
+});
+
+const getAvailHeight = () => ({
+  key: 'availHeight',
+  title: 'Avail height',
+  value: window.screen.availHeight,
+  issues: checkScreenProperties('availHeight'),
+});
+
+const getPixelDepth = () => ({
+  key: 'pixelDepth',
+  title: 'Pixel depth',
+  value: window.screen.pixelDepth,
+  issues: checkScreenProperties('pixelDepth'),
+});
+
+const getColorDepth = () => ({
+  key: 'colorDepth',
+  title: 'Color depth',
+  value: window.screen.colorDepth,
+  issues: checkScreenProperties('colorDepth'),
+});
+
 const getNavigator = () => [
   getDeviceMemory(),
   getHardwareConcurrency(),
@@ -122,6 +178,17 @@ const getNavigator = () => [
   getProductSub(),
 ];
 
+const getScreen = () => [
+  getWidth(),
+  getAvailWidth(),
+  getOuterWidth(),
+  getHeight(),
+  getAvailHeight(),
+  getOuterHeight(),
+  getPixelDepth(),
+  getColorDepth(),
+];
+
 // sorts plugins object into comma separated list
 const sortPlugins = (data) => {
   const { length } = data;
@@ -156,58 +223,6 @@ const checkNavigatorProperties = (key) => {
   return list.toString().split(',').join('<br />');
 };
 
-const getScreen = () => {
-  const data = [
-    {
-      key: 'width',
-      title: 'Width',
-      value: window.screen.width,
-      issues: checkScreenProperties('width'),
-    },
-    // {
-    //   key: 'outerWidth',
-    //   title: 'Outer width',
-    //   value: window.outerWidth,
-    // },
-    {
-      key: 'availWidth',
-      title: 'Avail width',
-      value: window.screen.availWidth,
-      issues: checkScreenProperties('availWidth'),
-    },
-    {
-      key: 'height',
-      title: 'Height',
-      value: window.screen.height,
-      issues: checkScreenProperties('height'),
-    },
-    // {
-    //   key: 'outerHeight',
-    //   title: 'Outer height',
-    //   value: window.outerHeight,
-    // },
-    {
-      key: 'availHeight',
-      title: 'Avail height',
-      value: window.screen.availHeight,
-      issues: checkScreenProperties('availHeight'),
-    },
-    {
-      key: 'pixelDepth',
-      title: 'Pixel depth',
-      value: window.screen.pixelDepth,
-      issues: checkScreenProperties('pixelDepth'),
-    },
-    {
-      key: 'colorDepth',
-      title: 'Color depth',
-      value: window.screen.colorDepth,
-      issues: checkScreenProperties('colorDepth'),
-    },
-  ];
-  return data;
-};
-
 const checkScreenProperties = (key) => {
   const list = [];
   if (Object.getOwnPropertyDescriptor(window.screen, key) !== undefined) {