Fix SplashScreen issues & refactor BackgroundColor

* Set the background colour as an xcasset color set

* Fix SplashScreen images not rendering

Trying to take a snapshot of the view doesn't seem to result in the
image actually being present in the snapshot, but we can just render the
view itself from the storyboard file.

However, we do need to make sure that we don't allow the view to grow in
size, otherwise it will expand to the size of the image instead of
remaining the size of the screen bounds.

CordovaLib/Classes/Public/CDVViewController.h

@@ -62,7 +62,7 @@
 - (NSString*)appURLScheme;
 - (NSURL*)errorURL;
 
-- (UIColor*)colorFromColorString:(NSString*)colorString;
+- (UIColor*)colorFromColorString:(NSString*)colorString CDV_DEPRECATED(7.0.0, "Use BackgroundColor in xcassets");
 - (NSArray*)parseInterfaceOrientations:(NSArray*)orientations;
 - (BOOL)supportsOrientation:(UIInterfaceOrientation)orientation;
 

CordovaLib/Classes/Public/CDVViewController.m

@@ -333,8 +333,7 @@ - (void)viewDidLoad
     }
     // /////////////////
 
-    NSString* bgColorString = [self.settings cordovaSettingForKey:@"BackgroundColor"];
-    UIColor* bgColor = [self colorFromColorString:bgColorString];
+    UIColor* bgColor = [UIColor colorNamed:@"BackgroundColor"] ?: UIColor.whiteColor;
     [self.launchView setBackgroundColor:bgColor];
     [self.webView setBackgroundColor:bgColor];
 }
@@ -522,14 +521,13 @@ - (void)createLaunchView
     webViewBounds.origin = self.view.bounds.origin;
 
     UIView* view = [[UIView alloc] initWithFrame:webViewBounds];
-    view.autoresizingMask = (UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight);
 
     NSString* launchStoryboardName = [[NSBundle mainBundle] objectForInfoDictionaryKey:@"UILaunchStoryboardName"];
     if (launchStoryboardName != nil) {
         UIStoryboard* storyboard = [UIStoryboard storyboardWithName:launchStoryboardName bundle:[NSBundle mainBundle]];
         UIViewController* vc = [storyboard instantiateInitialViewController];
 
-        [view addSubview:[vc.view snapshotViewAfterScreenUpdates:true]];
+        [view addSubview:vc.view];
     }
 
     self.launchView = view;

bin/templates/project/__PROJECT_NAME__/CDVLaunchScreen.storyboard

@@ -22,6 +22,7 @@
     <dependencies>
         <deployment identifier="iOS"/>
         <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="15706"/>
+        <capability name="Named colors" minToolsVersion="9.0"/>
         <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
     </dependencies>
     <scenes>
@@ -41,7 +42,7 @@
                                 <rect key="frame" x="0.0" y="0.0" width="414" height="896"/>
                             </imageView>
                         </subviews>
-                        <color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+                        <color key="backgroundColor" name="BackgroundColor"/>
                         <constraints>
                             <constraint firstAttribute="trailing" secondItem="2ns-9I-Qjs" secondAttribute="trailing" id="FZL-3Z-NFz"/>
                             <constraint firstItem="2ns-9I-Qjs" firstAttribute="bottom" secondItem="Ze5-6b-2t3" secondAttribute="bottom" id="L9l-pw-wXj"/>
@@ -57,5 +58,8 @@
     </scenes>
     <resources>
         <image name="LaunchStoryboard" width="1366" height="1366"/>
+        <namedColor name="BackgroundColor">
+            <color white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+        </namedColor>
     </resources>
 </document>

bin/templates/project/__PROJECT_NAME__/Images.xcassets/BackgroundColor.colorset/Contents.json

@@ -0,0 +1,15 @@
+{
+  "colors" : [
+    {
+      "color" : {
+        "platform" : "ios",
+        "reference" : "systemBackgroundColor"
+      },
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

bin/templates/scripts/cordova/lib/prepare.js

@@ -51,6 +51,7 @@ module.exports.prepare = function (cordovaProject, options) {
         .then(() => {
             updateIcons(cordovaProject, this.locations);
             updateLaunchStoryboardImages(cordovaProject, this.locations);
+            updateBackgroundColor(cordovaProject, this.locations);
             updateFileResources(cordovaProject, this.locations);
         })
         .then(() => {
@@ -79,6 +80,7 @@ module.exports.clean = function (options) {
         cleanWww(projectRoot, this.locations);
         cleanIcons(projectRoot, projectConfig, this.locations);
         cleanLaunchStoryboardImages(projectRoot, projectConfig, this.locations);
+        cleanBackgroundColor(projectRoot, projectConfig, this.locations);
         cleanFileResources(projectRoot, projectConfig, this.locations);
     });
 };
@@ -398,6 +400,123 @@ function cleanIcons (projectRoot, projectConfig, locations) {
     }
 }
 
+/**
+ * Returns the directory for the BackgroundColor.colorset asset, or null if no
+ * xcassets exist.
+ *
+ * @param  {string} projectRoot        The project's root directory
+ * @param  {string} platformProjDir    The platform's project directory
+ */
+function getBackgroundColorDir (projectRoot, platformProjDir) {
+    if (folderExists(path.join(projectRoot, platformProjDir, 'Images.xcassets/'))) {
+        return path.join(platformProjDir, 'Images.xcassets', 'BackgroundColor.colorset');
+    } else {
+        return null;
+    }
+}
+
+function colorPreferenceToComponents (pref) {
+    if (!pref || !pref.match(/^(#[0-9A-F]{3}|(0x|#)([0-9A-F]{2})?[0-9A-F]{6})$/)) {
+        return {
+            platform: 'ios',
+            reference: 'systemBackgroundColor'
+        };
+    }
+
+    let red = 'FF';
+    let green = 'FF';
+    let blue = 'FF';
+    let alpha = 1.0;
+
+    if (pref[0] === '#' && pref.length === 4) {
+        red = pref[1] + pref[1];
+        green = pref[2] + pref[2];
+        blue = pref[3] + pref[3];
+    }
+
+    if (pref.length >= 7 && (pref[0] === '#' || pref.substring(0, 2) === '0x')) {
+        let offset = pref[0] === '#' ? 1 : 2;
+
+        if (pref.substring(offset).length === 8) {
+            alpha = parseInt(pref.substring(offset, offset + 2), 16) / 255.0;
+            offset += 2;
+        }
+
+        red = pref.substring(offset, offset + 2);
+        green = pref.substring(offset + 2, offset + 4);
+        blue = pref.substring(offset + 4, offset + 6);
+    }
+
+    return {
+        'color-space': 'srgb',
+        components: {
+            red: '0x' + red,
+            green: '0x' + green,
+            blue: '0x' + blue,
+            alpha: alpha.toFixed(3)
+        }
+    };
+}
+
+/**
+ * Update the background color Contents.json in xcassets.
+ *
+ * @param {Object} cordovaProject The cordova project
+ * @param {Object} locations A dictionary containing useful location paths
+ */
+function updateBackgroundColor (cordovaProject, locations) {
+    const pref = cordovaProject.projectConfig.getPreference('BackgroundColor', 'ios') || '';
+
+    const platformProjDir = path.relative(cordovaProject.root, locations.xcodeCordovaProj);
+    const backgroundColorDir = getBackgroundColorDir(cordovaProject.root, platformProjDir);
+
+    if (backgroundColorDir) {
+        const contentsJSON = {
+            colors: [{
+                idiom: 'universal',
+                color: colorPreferenceToComponents(pref)
+            }],
+            info: {
+                author: 'Xcode',
+                version: 1
+            }
+        };
+
+        events.emit('verbose', 'Updating Background Color color set Contents.json');
+        fs.writeFileSync(path.join(cordovaProject.root, backgroundColorDir, 'Contents.json'),
+            JSON.stringify(contentsJSON, null, 2));
+    }
+}
+
+/**
+ * Resets the background color Contents.json in xcassets to default.
+ *
+ * @param {string} projectRoot Path to the project root
+ * @param {Object} projectConfig The project's config.xml
+ * @param {Object} locations A dictionary containing useful location paths
+ */
+function cleanBackgroundColor (projectRoot, projectConfig, locations) {
+    const platformProjDir = path.relative(projectRoot, locations.xcodeCordovaProj);
+    const backgroundColorDir = getBackgroundColorDir(projectRoot, platformProjDir);
+
+    if (backgroundColorDir) {
+        const contentsJSON = {
+            colors: [{
+                idiom: 'universal',
+                color: colorPreferenceToComponents(null)
+            }],
+            info: {
+                author: 'Xcode',
+                version: 1
+            }
+        };
+
+        events.emit('verbose', 'Cleaning Background Color color set Contents.json');
+        fs.writeFileSync(path.join(projectRoot, backgroundColorDir, 'Contents.json'),
+            JSON.stringify(contentsJSON, null, 2));
+    }
+}
+
 function updateFileResources (cordovaProject, locations) {
     const platformDir = path.relative(cordovaProject.root, locations.root);
     const files = cordovaProject.projectConfig.getFileResources('ios');

tests/spec/unit/fixtures/ios-config-xml/SampleApp/Images.xcassets/BackgroundColor.colorset/Contents.json

@@ -0,0 +1,15 @@
+{
+  "colors" : [
+    {
+      "color" : {
+        "platform" : "ios",
+        "reference" : "systemBackgroundColor"
+      },
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

tests/spec/unit/fixtures/ios-config-xml/SampleApp/Images.xcassets/Contents.json

@@ -3,4 +3,4 @@
     "version" : 1,
     "author" : "xcode"
   }
-}
+}