MOBILE-3935 core: Allow changing IAB toolbar colors

package-lock.json

@@ -44,7 +44,7 @@
         "@ionic-native/zip": "^5.33.0",
         "@ionic/angular": "^5.6.6",
         "@moodlehq/cordova-plugin-file-transfer": "1.7.1-moodle.2",
-        "@moodlehq/cordova-plugin-inappbrowser": "5.0.0-moodle.2",
+        "@moodlehq/cordova-plugin-inappbrowser": "5.0.0-moodle.3",
         "@moodlehq/cordova-plugin-ionic-webview": "5.0.0-moodle.1",
         "@moodlehq/cordova-plugin-local-notification": "0.9.0-moodle.3",
         "@moodlehq/cordova-plugin-qrscanner": "3.0.1-moodle.2",
@@ -5126,9 +5126,10 @@
       }
     },
     "node_modules/@moodlehq/cordova-plugin-inappbrowser": {
-      "version": "5.0.0-moodle.2",
+      "version": "5.0.0-moodle.3",
-      "resolved": "https://registry.npmjs.org/@moodlehq/cordova-plugin-inappbrowser/-/cordova-plugin-inappbrowser-5.0.0-moodle.2.tgz",
+      "resolved": "https://registry.npmjs.org/@moodlehq/cordova-plugin-inappbrowser/-/cordova-plugin-inappbrowser-5.0.0-moodle.3.tgz",
-      "integrity": "sha512-0JOLHUFEJC3fv4OQuyr2kwNyrb7oeyjmfFLQ+LcKO41e6UOnNy/du0hU7Yz9Rh8B2zGcebvSwMrN+cRSCqlipQ==",
+      "integrity": "sha512-BDW53W8BzHIJY6lqV3IyYIO9Rh3qi/nA3qkwZjvJiw7iohlQMeR67LV+bXjM4I8N1PTGoBSXiS5BmaS9NFi/1A==",
+      "dev": true,
       "engines": {
         "cordovaDependencies": {
           "0.2.3": {
@@ -35196,9 +35197,10 @@
       "integrity": "sha512-nvddQelAwPXmvjv0YJJwuf2xFNi78ZmTa47BgtHGebOvdKpmcbphkOQAVN7KMheL4J3KNE9DbMBHwEHkGGkH4g=="
     },
     "@moodlehq/cordova-plugin-inappbrowser": {
-      "version": "5.0.0-moodle.2",
+      "version": "5.0.0-moodle.3",
-      "resolved": "https://registry.npmjs.org/@moodlehq/cordova-plugin-inappbrowser/-/cordova-plugin-inappbrowser-5.0.0-moodle.2.tgz",
+      "resolved": "https://registry.npmjs.org/@moodlehq/cordova-plugin-inappbrowser/-/cordova-plugin-inappbrowser-5.0.0-moodle.3.tgz",
-      "integrity": "sha512-0JOLHUFEJC3fv4OQuyr2kwNyrb7oeyjmfFLQ+LcKO41e6UOnNy/du0hU7Yz9Rh8B2zGcebvSwMrN+cRSCqlipQ=="
+      "integrity": "sha512-BDW53W8BzHIJY6lqV3IyYIO9Rh3qi/nA3qkwZjvJiw7iohlQMeR67LV+bXjM4I8N1PTGoBSXiS5BmaS9NFi/1A==",
+      "dev": true
     },
     "@moodlehq/cordova-plugin-ionic-webview": {
       "version": "5.0.0-moodle.1",

package.json

@@ -73,7 +73,7 @@
     "@ionic-native/zip": "^5.33.0",
     "@ionic/angular": "^5.6.6",
     "@moodlehq/cordova-plugin-file-transfer": "1.7.1-moodle.2",
-    "@moodlehq/cordova-plugin-inappbrowser": "5.0.0-moodle.2",
+    "@moodlehq/cordova-plugin-inappbrowser": "5.0.0-moodle.3",
     "@moodlehq/cordova-plugin-ionic-webview": "5.0.0-moodle.1",
     "@moodlehq/cordova-plugin-local-notification": "0.9.0-moodle.3",
     "@moodlehq/cordova-plugin-qrscanner": "3.0.1-moodle.2",

src/core/services/app.ts

@@ -638,15 +638,7 @@ export class CoreAppProvider {
 
         if (!color) {
             // Get the default color to change it.
-            const element = document.querySelector('ion-header ion-toolbar');
+            color = CoreColors.getToolbarBackgroundColor();
-            if (element) {
-                color = getComputedStyle(element).getPropertyValue('--background').trim();
-            } else {
-                // Fallback, it won't always work.
-                color = getComputedStyle(document.body).getPropertyValue('--core-header-toolbar-background').trim();
-            }
-
-            color = CoreColors.getColorHex(color);
         }
 
         // Make darker on Android, except white.

src/core/services/utils/utils.ts

@@ -33,6 +33,7 @@ import { CoreCanceledError } from '@classes/errors/cancelederror';
 import { CoreFileEntry } from '@services/file-helper';
 import { CoreConstants } from '@/core/constants';
 import { CoreWindow } from '@singletons/window';
+import { CoreColors } from '@singletons/colors';
 
 type TreeNode<T> = T & { children: TreeNode<T>[] };
 
@@ -981,14 +982,8 @@ export class CoreUtilsProvider {
 
         options = options || {};
         options.usewkwebview = 'yes'; // Force WKWebView in iOS.
-
+        options.enableViewPortScale = options.enableViewPortScale ?? 'yes'; // Enable zoom on iOS by default.
-        if (!options.enableViewPortScale) {
+        options.allowInlineMediaPlayback = options.allowInlineMediaPlayback ?? 'yes'; // Allow playing inline videos in iOS.
-            options.enableViewPortScale = 'yes'; // Enable zoom on iOS.
-        }
-
-        if (!options.allowInlineMediaPlayback) {
-            options.allowInlineMediaPlayback = 'yes'; // Allow playing inline videos in iOS.
-        }
 
         if (!options.location && CoreApp.isIOS() && url.indexOf('file://') === 0) {
             // The URL uses file protocol, don't show it on iOS.
@@ -996,6 +991,8 @@ export class CoreUtilsProvider {
             options.location = 'no';
         }
 
+        this.setInAppBrowserToolbarColors(options);
+
         this.iabInstance = InAppBrowser.create(url, '_blank', options);
 
         if (CoreApp.isMobile()) {
@@ -1043,6 +1040,49 @@ export class CoreUtilsProvider {
         return this.iabInstance;
     }
 
+    /**
+     * Given some IAB options, set the toolbar colors properties to the right values.
+     *
+     * @param options Options to change.
+     * @return Changed options.
+     */
+    protected setInAppBrowserToolbarColors(options: InAppBrowserOptions): InAppBrowserOptions {
+        if (options.toolbarcolor) {
+            // Color already set.
+            return options;
+        }
+
+        // Color not set. Check if it needs to be changed automatically.
+        let bgColor: string | undefined;
+        let textColor: string | undefined;
+
+        if (CoreConstants.CONFIG.iabToolbarColors === 'auto') {
+            bgColor = CoreColors.getToolbarBackgroundColor();
+        } else if (CoreConstants.CONFIG.iabToolbarColors && typeof CoreConstants.CONFIG.iabToolbarColors === 'object') {
+            bgColor = CoreConstants.CONFIG.iabToolbarColors.background;
+            textColor = CoreConstants.CONFIG.iabToolbarColors.text;
+        }
+
+        if (!bgColor) {
+            // Use default color. In iOS, use black background color since the default is transparent and doesn't look good.
+            options.locationcolor = '#000000';
+
+            return options;
+        }
+
+        if (!textColor) {
+            textColor = CoreColors.isWhiteContrastingBetter(bgColor) ? '#ffffff' : '#000000';
+        }
+
+        options.toolbarcolor = bgColor;
+        options.closebuttoncolor = textColor;
+        options.navigationbuttoncolor = textColor;
+        options.locationcolor = bgColor;
+        options.locationtextcolor = textColor;
+
+        return options;
+    }
+
     /**
      * Open a URL using a browser.
      * Do not use for files, refer to {@link openFile}.

src/core/singletons/colors.ts

@@ -140,4 +140,23 @@ export class CoreColors {
         return ('0' + c.toString(16)).slice(-2);
     }
 
+    /**
+     * Get the toolbar's current background color.
+     *
+     * @return Color in hex format.
+     */
+    static getToolbarBackgroundColor(): string {
+        const element = document.querySelector('ion-header ion-toolbar');
+        let color: string;
+
+        if (element) {
+            color = getComputedStyle(element).getPropertyValue('--background').trim();
+        } else {
+            // Fallback, it won't always work.
+            color = getComputedStyle(document.body).getPropertyValue('--core-header-toolbar-background').trim();
+        }
+
+        return CoreColors.getColorHex(color);
+    }
+
 }

src/types/config.d.ts

@@ -57,4 +57,5 @@ export interface EnvironmentConfig {
     customMainMenuItems?: CoreMainMenuLocalizedCustomItem[];
     feedbackFormUrl?: string | false;
     a11yStatement?: string | false;
+    iabToolbarColors?: 'auto' | { background: string; text?: string } | null;
 }