3 files changed, 80 insertions, 11 deletions

diff --git a/javascript/localization.js b/javascript/localization.js
index 0c9032f9..8f00c186 100644
--- a/javascript/localization.js
+++ b/javascript/localization.js
@@ -107,12 +107,41 @@ function processNode(node) {
     });
 }
 
+function localizeWholePage() {
+    processNode(gradioApp());
+
+    function elem(comp) {
+        var elem_id = comp.props.elem_id ? comp.props.elem_id : "component-" + comp.id;
+        return gradioApp().getElementById(elem_id);
+    }
+
+    for (var comp of window.gradio_config.components) {
+        if (comp.props.webui_tooltip) {
+            let e = elem(comp);
+
+            let tl = e ? getTranslation(e.title) : undefined;
+            if (tl !== undefined) {
+                e.title = tl;
+            }
+        }
+        if (comp.props.placeholder) {
+            let e = elem(comp);
+            let textbox = e ? e.querySelector('[placeholder]') : null;
+
+            let tl = textbox ? getTranslation(textbox.placeholder) : undefined;
+            if (tl !== undefined) {
+                textbox.placeholder = tl;
+            }
+        }
+    }
+}
+
 function dumpTranslations() {
     if (!hasLocalization()) {
         // If we don't have any localization,
         // we will not have traversed the app to find
         // original_lines, so do that now.
-        processNode(gradioApp());
+        localizeWholePage();
     }
     var dumped = {};
     if (localization.rtl) {
@@ -154,7 +183,7 @@ document.addEventListener("DOMContentLoaded", function() {
         });
     });
 
-    processNode(gradioApp());
+    localizeWholePage();
 
     if (localization.rtl) { // if the language is from right to left,
         (new MutationObserver((mutations, observer) => { // wait for the style to load
diff --git a/javascript/progressbar.js b/javascript/progressbar.js
index a7c69937..531ac831 100644
--- a/javascript/progressbar.js
+++ b/javascript/progressbar.js
@@ -79,17 +79,17 @@ function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgre
     divProgress.appendChild(divInner);
     parentProgressbar.insertBefore(divProgress, progressbarContainer);
 
-    if (gallery) {
-        var livePreview = document.createElement('div');
-        livePreview.className = 'livePreview';
-        gallery.insertBefore(livePreview, gallery.firstElementChild);
-    }
+    var livePreview = null;
 
     var removeProgressBar = function() {
+        if (!divProgress) return;
+
         setTitle("");
         parentProgressbar.removeChild(divProgress);
-        if (gallery) gallery.removeChild(livePreview);
+        if (gallery && livePreview) gallery.removeChild(livePreview);
         atEnd();
+
+        divProgress = null;
     };
 
     var funProgress = function(id_task) {
@@ -149,8 +149,16 @@ function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgre
     var funLivePreview = function(id_task, id_live_preview) {
         request("./internal/progress", {id_task: id_task, id_live_preview: id_live_preview}, function(res) {
             if (res.live_preview && gallery) {
+
+
                 var img = new Image();
                 img.onload = function() {
+                    if (!livePreview) {
+                        livePreview = document.createElement('div');
+                        livePreview.className = 'livePreview';
+                        gallery.insertBefore(livePreview, gallery.firstElementChild);
+                    }
+
                     livePreview.appendChild(img);
                     if (livePreview.childElementCount > 2) {
                         livePreview.removeChild(livePreview.firstElementChild);
@@ -168,5 +176,9 @@ function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgre
     };
 
     funProgress(id_task, 0);
-    funLivePreview(id_task, 0);
+
+    if (gallery) {
+        funLivePreview(id_task, 0);
+    }
+
 }
diff --git a/javascript/resizeHandle.js b/javascript/resizeHandle.js
index 5edecfcc..2fd3c4d2 100644
--- a/javascript/resizeHandle.js
+++ b/javascript/resizeHandle.js
@@ -66,6 +66,13 @@
         parent.insertBefore(resizeHandle, rightCol);
 
         resizeHandle.addEventListener('mousedown', (evt) => {
+            if (evt.button !== 0) return;
+
+            evt.preventDefault();
+            evt.stopPropagation();
+
+            document.body.classList.add('resizing');
+
             R.tracking = true;
             R.parent = parent;
             R.parentWidth = parent.offsetWidth;
@@ -75,20 +82,41 @@
             R.screenX = evt.screenX;
         });
 
-        resizeHandle.addEventListener('dblclick', () => parent.style.gridTemplateColumns = GRID_TEMPLATE_COLUMNS);
+        resizeHandle.addEventListener('dblclick', (evt) => {
+            evt.preventDefault();
+            evt.stopPropagation();
+
+            parent.style.gridTemplateColumns = GRID_TEMPLATE_COLUMNS;
+        });
 
         afterResize(parent);
     }
 
     window.addEventListener('mousemove', (evt) => {
+        if (evt.button !== 0) return;
+
         if (R.tracking) {
+            evt.preventDefault();
+            evt.stopPropagation();
+
             const delta = R.screenX - evt.screenX;
             const leftColWidth = Math.max(Math.min(R.leftColStartWidth - delta, R.parent.offsetWidth - GRADIO_MIN_WIDTH - PAD), GRADIO_MIN_WIDTH);
             setLeftColGridTemplate(R.parent, leftColWidth);
         }
     });
 
-    window.addEventListener('mouseup', () => R.tracking = false);
+    window.addEventListener('mouseup', (evt) => {
+        if (evt.button !== 0) return;
+
+        if (R.tracking) {
+            evt.preventDefault();
+            evt.stopPropagation();
+
+            R.tracking = false;
+
+            document.body.classList.remove('resizing');
+        }
+    });
 
 
     window.addEventListener('resize', () => {