From 5db98837eb357f248c9f22892d21a85285748983 Mon Sep 17 00:00:00 2001 From: Marko Savic Date: Wed, 14 Oct 2020 12:21:06 -0400 Subject: [PATCH] [RN Mobile] UBE - Inject css on both page visible and page started (#26071) --- .../GutenbergWebViewActivity.java | 84 ++++++++++++++----- 1 file changed, 64 insertions(+), 20 deletions(-) diff --git a/packages/react-native-bridge/android/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/GutenbergWebViewActivity.java b/packages/react-native-bridge/android/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/GutenbergWebViewActivity.java index f8e00e60211b0..78b4882666fc6 100644 --- a/packages/react-native-bridge/android/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/GutenbergWebViewActivity.java +++ b/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 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