[RN Mobile] UBE - Inject css on both page visible and page started (#…

…26071)

packages/react-native-bridge/android/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/GutenbergWebViewActivity.java

@@ -10,22 +10,24 @@
 import android.view.View;
 import android.webkit.CookieManager;
 import android.webkit.JavascriptInterface;
+import android.webkit.WebChromeClient;
 import android.webkit.WebSettings;
 import android.webkit.WebView;
 import android.webkit.WebViewClient;
+import android.widget.ProgressBar;
 
 import androidx.annotation.Nullable;
 import androidx.appcompat.app.ActionBar;
 import androidx.appcompat.app.AppCompatActivity;
 import androidx.appcompat.widget.Toolbar;
 
-import org.wordpress.android.util.AppLog;
-import org.wordpress.android.util.helpers.WPWebChromeClient;
+import org.wordpress.android.util.AppLog;;
 import org.wordpress.mobile.FileUtils;
 
 import java.util.ArrayList;
 import java.util.List;
 import java.util.Locale;
+import java.util.concurrent.atomic.AtomicBoolean;
 
 public class GutenbergWebViewActivity extends AppCompatActivity {
 
@@ -42,6 +44,11 @@ public class GutenbergWebViewActivity extends AppCompatActivity {
     protected View mForegroundView;
     protected boolean mIsRedirected;
 
+    private ProgressBar mProgressBar;
+    private boolean mIsGutenbergReady;
+    private AtomicBoolean mIsWebPageLoaded = new AtomicBoolean(false);
+    private AtomicBoolean mIsBlockContentInserted = new AtomicBoolean(false);
+
     @SuppressLint("SetJavaScriptEnabled")
     protected void onCreate(@Nullable Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
@@ -51,6 +58,7 @@ protected void onCreate(@Nullable Bundle savedInstanceState) {
 
         mWebView = findViewById(R.id.gutenberg_web_view);
         mForegroundView = findViewById(R.id.foreground_view);
+        mProgressBar = findViewById(R.id.progress_bar);
 
         // Set settings
         WebSettings settings = mWebView.getSettings();
@@ -64,7 +72,31 @@ protected void onCreate(@Nullable Bundle savedInstanceState) {
 
         // Setup WebView client
         setupWebViewClient();
-        mWebView.setWebChromeClient(new WPWebChromeClient(null, findViewById(R.id.progress_bar)));
+
+        // Setup Web Chrome client
+        mWebView.setWebChromeClient(new WebChromeClient() {
+            @Override
+            public void onProgressChanged(WebView view, int progress) {
+                if (progress == 100 && !mIsWebPageLoaded.getAndSet(true)) {
+                    // We want to insert block content
+                    // only if gutenberg is ready
+                    if (mIsGutenbergReady) {
+                        mProgressBar.setVisibility(View.GONE);
+                        final Handler handler = new Handler();
+                        handler.postDelayed(() -> {
+                            // Insert block content
+                            insertBlockScript();
+                        }, 200);
+                    }
+                }
+                else {
+                    if (progress < 100) {
+                        mIsWebPageLoaded.compareAndSet(true, false);
+                    }
+                    mProgressBar.setProgress(progress);
+                }
+            }
+        });
 
         loadUrl();
     }
@@ -167,9 +199,6 @@ public boolean shouldOverrideUrlLoading(WebView view, String url) {
 
             @Override
             public void onPageCommitVisible(WebView view, String url) {
-                String injectCssScript = getFileContentFromAssets("gutenberg-web-single-block/inject-css.js");
-                evaluateJavaScript(injectCssScript);
-
                 long userId = getUserId();
                 if (userId != 0) {
                     String injectLocalStorageScript = getFileContentFromAssets("gutenberg-web-single-block/local-storage-overrides.json");
@@ -205,14 +234,6 @@ public void onPageFinished(WebView view, String url) {
                 String contentFunctions = getFileContentFromAssets("gutenberg-web-single-block/content-functions.js");
                 evaluateJavaScript(contentFunctions);
 
-                String editorStyle = getFileContentFromAssets("gutenberg-web-single-block/editor-style-overrides.css");
-                editorStyle = removeWhiteSpace(removeNewLines(editorStyle));
-                evaluateJavaScript(String.format(INJECT_CSS_SCRIPT_TEMPLATE, editorStyle));
-
-                String injectWPBarsCssScript = getFileContentFromAssets("gutenberg-web-single-block/wp-bar-override.css");
-                injectWPBarsCssScript = removeWhiteSpace(removeNewLines(injectWPBarsCssScript));
-                evaluateJavaScript(String.format(INJECT_CSS_SCRIPT_TEMPLATE, injectWPBarsCssScript));
-
                 String injectGutenbergObserver = getFileContentFromAssets("gutenberg-web-single-block/gutenberg-observer.js");
                 evaluateJavaScript(injectGutenbergObserver);
             }
@@ -226,19 +247,40 @@ private void evaluateJavaScript(String script) {
 
     private void onGutenbergReady() {
         preventAutoSavesScript();
+        // Inject css when Gutenberg is ready
+        injectCssScript();
         final Handler handler = new Handler();
         handler.postDelayed(() -> {
+            mIsGutenbergReady = true;
             // We want to make sure that page is loaded
             // with all elements before executing external JS
             injectOnGutenbergReadyExternalSources();
-            // Inject block content
-            insertBlockScript();
+            // If page is loaded try to insert block content
+            if (mIsWebPageLoaded.get()) {
+                // Insert block content
+                insertBlockScript();
+            }
             // We need some extra time to hide all unwanted html elements
             // like NUX (new user experience) modal is.
             mForegroundView.postDelayed(() -> mForegroundView.setVisibility(View.INVISIBLE), 1500);
         }, 2000);
     }
 
+    private void injectCssScript() {
+        String injectCssScript = getFileContentFromAssets("gutenberg-web-single-block/inject-css.js");
+        mWebView.evaluateJavascript(injectCssScript, message -> {
+            if (message != null) {
+                String editorStyle = getFileContentFromAssets("gutenberg-web-single-block/editor-style-overrides.css");
+                editorStyle = removeWhiteSpace(removeNewLines(editorStyle));
+                evaluateJavaScript(String.format(INJECT_CSS_SCRIPT_TEMPLATE, editorStyle));
+
+                String injectWPBarsCssScript = getFileContentFromAssets("gutenberg-web-single-block/wp-bar-override.css");
+                injectWPBarsCssScript = removeWhiteSpace(removeNewLines(injectWPBarsCssScript));
+                evaluateJavaScript(String.format(INJECT_CSS_SCRIPT_TEMPLATE, injectWPBarsCssScript));
+            }
+        });
+    }
+
     private void injectOnGutenbergReadyExternalSources() {
         List<String> list = getOnGutenbergReadyExternalSources();
         for (String file : list) {
@@ -267,10 +309,12 @@ private void preventAutoSavesScript() {
     }
 
     private void insertBlockScript() {
-        String insertBlock = getFileContentFromAssets("gutenberg-web-single-block/insert-block.js").replace("%@","%s");
-        String blockContent = getIntent().getExtras().getString(ARG_BLOCK_CONTENT);
-        insertBlock = String.format(insertBlock, blockContent);
-        evaluateJavaScript(removeNewLines(insertBlock.replace("\\n", "\\\\n")));
+        if (!mIsBlockContentInserted.getAndSet(true)) {
+            String insertBlock = getFileContentFromAssets("gutenberg-web-single-block/insert-block.js").replace("%@","%s");
+            String blockContent = getIntent().getExtras().getString(ARG_BLOCK_CONTENT);
+            insertBlock = String.format(insertBlock, blockContent);
+            evaluateJavaScript(removeNewLines(insertBlock.replace("\\n", "\\\\n")));
+        }
     }
 
     @Override