Merge branch 'master' into 2022.2

# Conflicts:
#	Assets/WebGLTemplates/Release/pretty-console.js.meta

Author: JohannesDeml

Assets/Plugins/WebGL/WebGLTools/WebGlBridge.Commands.cs

@@ -123,15 +123,27 @@ public void ToggleInfoPanel()
 		}
 
 		/// <summary>
-		/// Log example messages to see if they are rendered and colored correctly
+		/// Log the user agent of the browser and if this agent is classified as mobile
+		/// Browser Usage: <code>unityGame.SendMessage("WebGL", "LogUserAgent");</code>
+		/// </summary>
+		[WebGlCommand(Description = "Log User Agent and isMobileDevice")]
+		public void LogUserAgent()
+		{
+			string userAgent = WebGlPlugins.GetUserAgent();
+			bool isMobileDevice = WebGlPlugins.IsMobileDevice();
+			Debug.Log($"<color=#4D65A4>User Agent:</color> '{userAgent}', <color=#4D65A4>IsMobileDevice:</color> '{isMobileDevice}'");
+		}
+
+		/// <summary>
+		/// Log example messages to show off unity rich text parsing to html & console styling
 		/// </summary>
 		[WebGlCommand(Description = "Log example messages for Log, warning and error")]
 		[ContextMenu(nameof(LogExampleMessages))]
 		public void LogExampleMessages()
 		{
-			Debug.Log("This is an example <color=#2596be>log</color> message, showing off <color=#ff00ff>rich text support with <color=#ff0000>[nesting (I should be red - not supported yet)]</color></color>!");
-			Debug.LogWarning("This is an example <color=#e28743>warning</color> message!");
-			Debug.LogError("This is an example <color=#d36a33>error</color> message!");
+			Debug.Log("Example unity rich text example with <color=red>red and <color=blue>nested blue</color> color tags</color> and <b>bold</b> + <i>italic</i> tags, and <size=20>custom size with <b><i>bold italic nesting</i></b></size> tag.");
+			Debug.LogWarning("This is an <b>example <color=#e28743>warning</color></b> message!");
+			Debug.LogError("This is an <b>example <color=#b50808>error</color></b> message!");
 		}
 
 		/// <summary>

Assets/Plugins/WebGL/WebGLTools/WebGlPlugins.cs

@@ -29,6 +29,8 @@ public static class WebGlPlugins
 		[DllImport("__Internal")]
 		private static extern void _HideInfoPanel();
 		[DllImport("__Internal")]
+		private static extern string _GetUserAgent();
+		[DllImport("__Internal")]
 		private static extern uint _GetTotalMemorySize();
 		[DllImport("__Internal")]
 		private static extern uint _GetStaticMemorySize();
@@ -51,7 +53,7 @@ public static void SetVariable(string variableName, string value)
 			#endif
 			Debug.Log($"<color=#00CCCC>{nameof(WebGlPlugins)}.{nameof(SetVariable)} set {variableName}: {value}</color>");
 		}
-		
+
 		/// <summary>
 		/// Adds a time marker at the call time to the javascript map "unityTimeTrackers"
 		/// The mapped value is performance.now() at the time of the call
@@ -65,7 +67,7 @@ public static void AddTimeTrackingEvent(string eventName)
 			Debug.Log($"{nameof(WebGlPlugins)}.{nameof(AddTimeTrackingEvent)} called with {eventName}");
 			#endif
 		}
-		
+
 		/// <summary>
 		/// Show the info panel in the top right corner
 		/// By default triggered by <see cref="WebGlTimeTracker"/> in Awake
@@ -80,7 +82,7 @@ public static void ShowInfoPanel()
 			Debug.Log($"{nameof(WebGlPlugins)}.{nameof(ShowInfoPanel)} called");
 			#endif
 		}
-		
+
 		/// <summary>
 		/// Hide the info panel in the top right corner
 		/// By default triggered by <see cref="WebGlTimeTracker"/> in Awake
@@ -111,6 +113,33 @@ public static void ToggleInfoPanel()
 			}
 		}
 
+		/// <summary>
+		/// Get navigator.userAgent from the browser
+		/// </summary>
+		/// <returns>navigator.userAgent</returns>
+		public static string GetUserAgent()
+		{
+			#if UNITY_WEBGL && !UNITY_EDITOR
+			return _GetUserAgent();
+			#else
+			Debug.Log($"{nameof(WebGlPlugins)}.{nameof(GetUserAgent)} called");
+			return "undefined";
+			#endif
+		}
+
+		/// <summary>
+		/// Check user agent to determine if the game runs on a mobile device
+		/// </summary>
+		/// <returns>true if on phone or tablet</returns>
+		public static bool IsMobileDevice()
+		{
+			string userAgent = GetUserAgent();
+			return userAgent.Contains("iPhone") ||
+				userAgent.Contains("iPad") ||
+				userAgent.Contains("iPod") ||
+				userAgent.Contains("Android");
+		}
+
 		/// <summary>
 		/// Get the total memory size used by the application in MB
 		/// </summary>
@@ -194,7 +223,7 @@ public static float GetManagedMemorySize()
 			var bytes = (uint) GC.GetTotalMemory(false);
 			return GetMegaBytes(bytes);
 		}
-		
+
 		/// <summary>
 		/// Converts bytes (B) to mega bytes (MB)
 		/// </summary>

Assets/Plugins/WebGL/WebGLTools/WebGlPlugins.jslib

@@ -60,7 +60,26 @@ var WebGlPlugins =
             setInfoPanelVisible(false);
         }
     },
-    
+
+    _GetUserAgent: function () {
+        var userAgent = navigator.userAgent;
+
+        //Get size of the string
+        var bufferSize = lengthBytesUTF8(userAgent) + 1;
+        //Allocate memory space
+        var buffer = _malloc(bufferSize);
+
+        //Copy old data to the new one then return it
+        if(typeof stringToUTF8 !== 'undefined') {
+            stringToUTF8(userAgent, buffer, bufferSize);
+        }
+        else if(typeof writeStringToMemory !== 'undefined') {
+            writeStringToMemory(userAgent, buffer);
+        }
+
+        return buffer;
+    },
+
     _GetTotalMemorySize: function()
     {
         if(typeof TOTAL_MEMORY !== 'undefined') {

Assets/WebGLTemplates/Develop/debug-console.js

@@ -270,15 +270,33 @@ function setupConsoleLogPipe() {
   let defaultConsoleError = console.error;
 
   // Overwrite log functions to parse and pipe to debug html console
-  console.log = (message) => { parseMessageAndLog(message, 'log', defaultConsoleLog); };
-  console.info = (message) => { parseMessageAndLog(message, 'info', defaultConsoleInfo); };
-  console.debug = (message) => { parseMessageAndLog(message, 'debug', defaultConsoleDebug); };
-  console.warn = (message) => { parseMessageAndLog(message, 'warn', defaultConsoleWarn); };
-  console.error = (message) => { parseMessageAndLog(message, 'error', defaultConsoleError); errorReceived(); };
+  console.log = (message) => { handleLog(message, 'log', defaultConsoleLog); };
+  console.info = (message) => { handleLog(message, 'info', defaultConsoleInfo); };
+  console.debug = (message) => { handleLog(message, 'debug', defaultConsoleDebug); };
+  console.warn = (message) => { handleLog(message, 'warn', defaultConsoleWarn); };
+  console.error = (message) => { handleLog(message, 'error', defaultConsoleError); errorReceived(); };
 
 
-  parseMessageAndLog = (message, logLevel, consoleLogFunction) => {
+  handleLog = (message, logLevel, consoleLogFunction) => {
     updateLogCounter(logLevel);
+    if (typeof message === 'string') {
+      // Only parse messages that are actual strings
+      parseMessageAndLog(message, logLevel, consoleLogFunction);
+    }
+    else {
+      consoleLogFunction(message);
+      // Try to also log the object to the html console (does not always work in a meaningful manner)
+      var htmlMessage;
+      try {
+        htmlMessage = JSON.stringify(message);
+      } catch (error) {
+        htmlMessage = `Can't convert message to JSON: ${error}`;
+      }
+      htmlLog(htmlMessage, logLevel);
+    }
+  };
+
+  parseMessageAndLog = (message, logLevel, consoleLogFunction) => {
     let styledTextParts = parseUnityRichText(message);
 
     let consoleText = '';
@@ -301,16 +319,17 @@ class StyledTextPart {
   }
 
   toHTML() {
-    if(this.styles.length > 0) {
+    if (this.styles.length > 0) {
       return `<span style="${this.styles.join(';')}">${this.text}</span>`;
     }
     return this.text;
   }
 
   toConsoleStyleString() {
-    if(this.styles.length > 0) {
+    if (this.styles.length > 0) {
       return this.styles.join(';');
     }
+    // Return some styling that does not change anything to support unstyled text
     return 'color:inherit';
   }
 
@@ -321,11 +340,12 @@ class StyledTextPart {
 
 function parseUnityRichText(message) {
   // Mapping for unity tags to css style tags
+  // Unity rich text tags, see https://docs.unity3d.com/Packages/com.unity.ugui@1.0/manual/StyledText.html
   const tagMap = {
-    'color': {startTag: '<color=', closeTag: '</color>', styleTag: 'color:', postfix: '', hasParameter: true},
-    'size':  {startTag: '<size=', closeTag: '</size>', styleTag: 'font-size:', postfix: 'px', hasParameter: true},
-    'bold': {startTag: '<b', closeTag: '</b>', styleTag: 'font-weight:', styleValue: 'bold', hasParameter: false},
-    'italic': {startTag: '<i', closeTag: '</i>', styleTag: 'font-style:', styleValue: 'italic', hasParameter: false}
+    'color': { startTag: '<color=', closeTag: '</color>', styleTag: 'color:', postfix: '', hasParameter: true },
+    'size': { startTag: '<size=', closeTag: '</size>', styleTag: 'font-size:', postfix: 'px', hasParameter: true },
+    'bold': { startTag: '<b', closeTag: '</b>', styleTag: 'font-weight:', styleValue: 'bold', hasParameter: false },
+    'italic': { startTag: '<i', closeTag: '</i>', styleTag: 'font-style:', styleValue: 'italic', hasParameter: false }
   };
 
   let index = 0;
@@ -338,7 +358,7 @@ function parseUnityRichText(message) {
   // next end index for each tag
   let nextEndIndex = [];
   Object.keys(tagMap).forEach(key => {
-    nextStartIndex[key] =  message.indexOf(tagMap[key].startTag, index);
+    nextStartIndex[key] = message.indexOf(tagMap[key].startTag, index);
     nextEndIndex[key] = message.indexOf(tagMap[key].closeTag, index);
   });
 
@@ -350,14 +370,14 @@ function parseUnityRichText(message) {
 
     // find the next tag start or end
     Object.keys(tagMap).forEach(key => {
-      if(nextStartIndex[key] >= 0 && nextStartIndex[key] < nextIndex) {
+      if (nextStartIndex[key] >= 0 && nextStartIndex[key] < nextIndex) {
         nextIndex = nextStartIndex[key];
         nextKey = key;
         fromArray = nextStartIndex;
         nextTagFound = true;
       }
 
-      if(nextEndIndex[key] >= 0 && nextEndIndex[key] < nextIndex) {
+      if (nextEndIndex[key] >= 0 && nextEndIndex[key] < nextIndex) {
         nextIndex = nextEndIndex[key];
         nextKey = key;
         fromArray = nextEndIndex;
@@ -366,39 +386,44 @@ function parseUnityRichText(message) {
     });
 
     // write the text in before the next tag to our style text part array
-    if(nextIndex > index) {
+    if (nextIndex > index) {
       let messageToNextTag = message.substring(index, nextIndex);
       let styles = [...styleStack];
       styledTextParts.push(new StyledTextPart(messageToNextTag, styles));
     }
 
     // end if no more tags exist
-    if(nextTagFound === false) {
+    if (nextTagFound === false) {
       index = message.length;
       break;
     }
 
+    let closeTagIndex = message.indexOf('>', nextIndex + 1);
+
     // Process start tag
-    if(fromArray === nextStartIndex) {
-      nextStartIndex[nextKey] = message.indexOf(tagMap[nextKey].startTag, nextIndex+1);
-      let closeTagIndex = message.indexOf('>', nextIndex+1);
+    if (fromArray === nextStartIndex) {
       let styleValue;
-      if(tagMap[nextKey].hasParameter) {
+      if (tagMap[nextKey].hasParameter) {
         styleValue = message.substring(nextIndex + tagMap[nextKey].startTag.length, closeTagIndex);
-        styleValue+=tagMap[nextKey].postfix;
+        styleValue += tagMap[nextKey].postfix;
       } else {
         styleValue = tagMap[nextKey].styleValue;
       }
       styleStack.push(`${tagMap[nextKey].styleTag}${styleValue}`);
-      index = closeTagIndex+1;
+
+      // Update list entry to next unprocessed start tag of type nextKey
+      nextStartIndex[nextKey] = message.indexOf(tagMap[nextKey].startTag, nextIndex + 1);
     }
     // process end tag
-    else if(fromArray === nextEndIndex) {
-      nextEndIndex[nextKey] = message.indexOf(tagMap[nextKey].closeTag, nextIndex+1);
-      let closeTagIndex = message.indexOf('>', nextIndex+1);
+    else if (fromArray === nextEndIndex) {
       styleStack.pop();
-      index = closeTagIndex+1;
+
+      // Update list entry to next unprocessed end tag of type nextKey
+      nextEndIndex[nextKey] = message.indexOf(tagMap[nextKey].closeTag, nextIndex + 1);
     }
+
+    // Update index to position after the tag closes
+    index = closeTagIndex + 1;
   }
   return styledTextParts;
 }