Show bundle loading progress on Android

Summary:
This implements a loading banner like on iOS that shows the progress of the packager.

![](https://media.giphy.com/media/l4FGoepExkpOeXtTO/giphy.gif)

**Test plan**
- Tested that it displays similar messages as it does on iOS and also that is show the right message when waiting for the remote debugger.
- Tested that errors are still shown properly.
- Tested that it works with packagers that don't support multipart response (add && false in https://github.com/facebook/react-native/blob/master/packager/src/Server/MultipartResponse.js#L81).
- Run new unit tests.
- Tested that backgrounding / foregrounding the app hides / show the banner properly.
Closes facebook#12674

Differential Revision: D4673638

Pulled By: mkonicek

fbshipit-source-id: b2a1163de3d0792cf481d7111231a065f80a9594

Author: janicduplessis

ReactAndroid/src/main/java/com/facebook/react/devsupport/DevLoadingViewController.java

@@ -0,0 +1,151 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+package com.facebook.react.devsupport;
+
+import android.content.Context;
+import android.graphics.Color;
+import android.graphics.PixelFormat;
+import android.view.Gravity;
+import android.view.LayoutInflater;
+import android.view.WindowManager;
+import android.widget.TextView;
+
+import com.facebook.common.logging.FLog;
+import com.facebook.react.R;
+import com.facebook.react.bridge.UiThreadUtil;
+import com.facebook.react.common.ReactConstants;
+
+import java.net.MalformedURLException;
+import java.net.URL;
+import java.util.Locale;
+
+import javax.annotation.Nullable;
+
+/**
+ * Controller to display loading messages on top of the screen. All methods are thread safe.
+ */
+public class DevLoadingViewController {
+  private static final int COLOR_DARK_GREEN = Color.parseColor("#035900");
+
+  private static boolean sEnabled = true;
+  private final Context mContext;
+  private final WindowManager mWindowManager;
+  private TextView mDevLoadingView;
+  private boolean mIsVisible = false;
+
+  public static void setDevLoadingEnabled(boolean enabled) {
+    sEnabled = enabled;
+  }
+
+  public DevLoadingViewController(Context context) {
+    mContext = context;
+    mWindowManager = (WindowManager) mContext.getSystemService(Context.WINDOW_SERVICE);
+    LayoutInflater inflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
+    mDevLoadingView = (TextView) inflater.inflate(R.layout.dev_loading_view, null);
+  }
+
+  public void showMessage(final String message, final int color, final int backgroundColor) {
+    if (!sEnabled) {
+      return;
+    }
+
+    UiThreadUtil.runOnUiThread(new Runnable() {
+      @Override
+      public void run() {
+        mDevLoadingView.setBackgroundColor(backgroundColor);
+        mDevLoadingView.setText(message);
+        mDevLoadingView.setTextColor(color);
+
+        setVisible(true);
+      }
+    });
+  }
+
+  public void showForUrl(String url) {
+    URL parsedURL;
+    try {
+      parsedURL = new URL(url);
+    } catch (MalformedURLException e) {
+      FLog.e(ReactConstants.TAG, "Bundle url format is invalid. \n\n" + e.toString());
+      return;
+    }
+
+    showMessage(
+      mContext.getString(R.string.catalyst_loading_from_url, parsedURL.getHost() + ":" + parsedURL.getPort()),
+      Color.WHITE,
+      COLOR_DARK_GREEN);
+  }
+
+  public void showForRemoteJSEnabled() {
+    showMessage(mContext.getString(R.string.catalyst_remotedbg_message), Color.WHITE, COLOR_DARK_GREEN);
+  }
+
+  public void updateProgress(final @Nullable String status, final @Nullable Integer done, final @Nullable Integer total) {
+    if (!sEnabled) {
+      return;
+    }
+
+    UiThreadUtil.runOnUiThread(new Runnable() {
+      @Override
+      public void run() {
+        StringBuilder message = new StringBuilder();
+        message.append(status != null ? status : "Loading");
+        if (done != null && total != null && total > 0) {
+          message.append(String.format(Locale.getDefault(), " %.1f%% (%d/%d)", (float) done / total * 100, done, total));
+        }
+        message.append("\u2026"); // `...` character
+
+        mDevLoadingView.setText(message);
+      }
+    });
+  }
+
+  public void show() {
+    if (!sEnabled) {
+      return;
+    }
+
+    UiThreadUtil.runOnUiThread(new Runnable() {
+      @Override
+      public void run() {
+        setVisible(true);
+      }
+    });
+  }
+
+  public void hide() {
+    if (!sEnabled) {
+      return;
+    }
+
+    UiThreadUtil.runOnUiThread(new Runnable() {
+      @Override
+      public void run() {
+        setVisible(false);
+      }
+    });
+  }
+
+  private void setVisible(boolean visible) {
+    if (visible && !mIsVisible) {
+      WindowManager.LayoutParams params = new WindowManager.LayoutParams(
+        WindowManager.LayoutParams.MATCH_PARENT,
+        WindowManager.LayoutParams.WRAP_CONTENT,
+        WindowManager.LayoutParams.TYPE_SYSTEM_OVERLAY,
+        WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE,
+        PixelFormat.TRANSLUCENT);
+      params.gravity = Gravity.TOP;
+      mWindowManager.addView(mDevLoadingView, params);
+    } else if (!visible && mIsVisible) {
+      mWindowManager.removeView(mDevLoadingView);
+    }
+    mIsVisible = visible;
+  }
+}

ReactAndroid/src/main/java/com/facebook/react/devsupport/DevServerHelper.java

@@ -17,6 +17,8 @@
 import java.util.Locale;
 import java.util.Map;
 import java.util.concurrent.TimeUnit;
+import java.util.regex.Matcher;
+import java.util.regex.Pattern;
 
 import android.content.Context;
 import android.os.AsyncTask;
@@ -32,13 +34,18 @@
 import com.facebook.react.modules.systeminfo.AndroidInfoHelpers;
 import com.facebook.react.packagerconnection.JSPackagerClient;
 
+import org.json.JSONException;
+import org.json.JSONObject;
+
 import okhttp3.Call;
 import okhttp3.Callback;
 import okhttp3.ConnectionPool;
 import okhttp3.OkHttpClient;
 import okhttp3.Request;
 import okhttp3.Response;
 import okhttp3.ResponseBody;
+import okio.Buffer;
+import okio.BufferedSource;
 import okio.Okio;
 import okio.Sink;
 
@@ -78,6 +85,7 @@ public class DevServerHelper {
 
   public interface BundleDownloadCallback {
     void onSuccess();
+    void onProgress(@Nullable String status, @Nullable Integer done, @Nullable Integer total);
     void onFailure(Exception cause);
   }
 
@@ -297,6 +305,7 @@ public void downloadBundleFromURL(
       final String bundleURL) {
     final Request request = new Request.Builder()
         .url(bundleURL)
+        .addHeader("Accept", "multipart/mixed")
         .build();
     mDownloadBundleFromURLCall = Assertions.assertNotNull(mClient.newCall(request));
     mDownloadBundleFromURLCall.enqueue(new Callback() {
@@ -316,45 +325,109 @@ public void onFailure(Call call, IOException e) {
       }
 
       @Override
-      public void onResponse(Call call, Response response) throws IOException {
+      public void onResponse(Call call, final Response response) throws IOException {
         // ignore callback if call was cancelled
         if (mDownloadBundleFromURLCall == null || mDownloadBundleFromURLCall.isCanceled()) {
           mDownloadBundleFromURLCall = null;
           return;
         }
         mDownloadBundleFromURLCall = null;
 
-        // Check for server errors. If the server error has the expected form, fail with more info.
-        if (!response.isSuccessful()) {
-          String body = response.body().string();
-          DebugServerException debugServerException = DebugServerException.parse(body);
-          if (debugServerException != null) {
-            callback.onFailure(debugServerException);
-          } else {
-            StringBuilder sb = new StringBuilder();
-            sb.append("The development server returned response error code: ").append(response.code()).append("\n\n")
-              .append("URL: ").append(call.request().url().toString()).append("\n\n")
-              .append("Body:\n")
-              .append(body);
-            callback.onFailure(new DebugServerException(sb.toString()));
-          }
-          return;
-        }
+        final String url = response.request().url().toString();
 
-        Sink output = null;
-        try {
-          output = Okio.sink(outputFile);
-          Okio.buffer(response.body().source()).readAll(output);
-          callback.onSuccess();
-        } finally {
-          if (output != null) {
-            output.close();
+        // Make sure the result is a multipart response and parse the boundary.
+        String contentType = response.header("content-type");
+        Pattern regex = Pattern.compile("multipart/mixed;.*boundary=\"([^\"]+)\"");
+        Matcher match = regex.matcher(contentType);
+        if (match.find()) {
+          String boundary = match.group(1);
+          MultipartStreamReader bodyReader = new MultipartStreamReader(response.body().source(), boundary);
+          boolean completed = bodyReader.readAllParts(new MultipartStreamReader.ChunkCallback() {
+            @Override
+            public void execute(Map<String, String> headers, Buffer body, boolean finished) throws IOException {
+              // This will get executed for every chunk of the multipart response. The last chunk
+              // (finished = true) will be the JS bundle, the other ones will be progress events
+              // encoded as JSON.
+              if (finished) {
+                // The http status code for each separate chunk is in the X-Http-Status header.
+                int status = response.code();
+                if (headers.containsKey("X-Http-Status")) {
+                  status = Integer.parseInt(headers.get("X-Http-Status"));
+                }
+                processBundleResult(url, status, body, outputFile, callback);
+              } else {
+                if (!headers.containsKey("Content-Type") || !headers.get("Content-Type").equals("application/json")) {
+                  return;
+                }
+                try {
+                  JSONObject progress = new JSONObject(body.readUtf8());
+                  String status = null;
+                  if (progress.has("status")) {
+                    status = progress.getString("status");
+                  }
+                  Integer done = null;
+                  if (progress.has("done")) {
+                    done = progress.getInt("done");
+                  }
+                  Integer total = null;
+                  if (progress.has("total")) {
+                    total = progress.getInt("total");
+                  }
+                  callback.onProgress(status, done, total);
+                } catch (JSONException e) {
+                  FLog.e(ReactConstants.TAG, "Error parsing progress JSON. " + e.toString());
+                }
+              }
+            }
+          });
+          if (!completed) {
+            callback.onFailure(new DebugServerException(
+                "Error while reading multipart response.\n\nResponse code: " + response.code() + "\n\n" +
+                "URL: " + call.request().url().toString() + "\n\n"));
           }
+        } else {
+          // In case the server doesn't support multipart/mixed responses, fallback to normal download.
+          processBundleResult(url, response.code(), Okio.buffer(response.body().source()), outputFile, callback);
         }
       }
     });
   }
 
+  private void processBundleResult(
+      String url,
+      int statusCode,
+      BufferedSource body,
+      File outputFile,
+      BundleDownloadCallback callback) throws IOException {
+    // Check for server errors. If the server error has the expected form, fail with more info.
+    if (statusCode != 200) {
+      String bodyString = body.readUtf8();
+      DebugServerException debugServerException = DebugServerException.parse(bodyString);
+      if (debugServerException != null) {
+        callback.onFailure(debugServerException);
+      } else {
+        StringBuilder sb = new StringBuilder();
+        sb.append("The development server returned response error code: ").append(statusCode).append("\n\n")
+          .append("URL: ").append(url).append("\n\n")
+          .append("Body:\n")
+          .append(bodyString);
+        callback.onFailure(new DebugServerException(sb.toString()));
+      }
+      return;
+    }
+
+    Sink output = null;
+    try {
+      output = Okio.sink(outputFile);
+      body.readAll(output);
+      callback.onSuccess();
+    } finally {
+      if (output != null) {
+        output.close();
+      }
+    }
+  }
+
   public void cancelDownloadBundleFromURL() {
     if (mDownloadBundleFromURLCall != null) {
       mDownloadBundleFromURLCall.cancel();