Add mock preview support for extensions

appinventor/appengine/build.xml

@@ -190,6 +190,10 @@
         <include name="closure-library/closure/goog/css/dialog.css"/>
         <include name="closure-library/closure/goog/css/hsvapalette.css"/>
         <include name="closure-library/closure/goog/deps.js"/>
+        <!-- include the DOMPurify lib used for sanitizing HTML of extension mocks -->
+        <include name="dompurify/purify.min.js" />
+        <!-- include the linkedom lib used for supporting DOM manipulation of mocks -->
+        <include name="linkedom/linkedom.min.js" />
       </fileset>
       <fileset dir="${docs.dir}/html/static">
         <include name="js/*"/>
@@ -633,6 +637,7 @@
       <arg value="-extra"/>
       <arg value="${build.extra.dir}"/>
       <arg line="${client.flags} ${client.module}"/>
+      <arg line="-generateJsInteropExports"/>
     </java>
     <copy todir="${build.war.dir}/ode"
           file="${appinventor.dir}/appengine/extra/cdnok.js" />

appinventor/appengine/src/com/google/appinventor/client/editor/simple/ComponentDatabase.java

@@ -324,6 +324,15 @@ public String getTypeDescription(String componentName) {
     return component.getTypeDescription();
   }
 
+  @Override
+  public MockInfo getMockInfo(String componentName) {
+    final ComponentDefinition component = components.get(componentName);
+    if (component == null) {
+      throw new ComponentNotFoundException(componentName);
+    }
+    return component.getMockInfo();
+  }
+
   public String getComponentsJSONString() {
     return componentsJSONString;
   }
@@ -339,6 +348,17 @@ private boolean initComponent(JSONObject componentNode) {
       // This must be a component upgrade! We remove existing entry
       components.remove(name);
     }
+    final MockInfo mockInfo;
+    if (properties.get("mock") != null) {
+      final JSONObject obj = properties.get("mock").asObject();
+      final JSONValue css = obj.get("css");
+      mockInfo =
+          new MockInfo(
+              obj.get("script").asString().getString(),
+              css != null ? css.asString().getString() : null);
+    } else {
+      mockInfo = null;
+    }
     ComponentDefinition component = new ComponentDefinition(name,
         Integer.parseInt(properties.get("version").asString().getString()),
         optString(properties.get("versionName"), ""),
@@ -352,7 +372,9 @@ private boolean initComponent(JSONObject componentNode) {
         Boolean.valueOf(properties.get("nonVisible").asString().getString()),
         properties.get("iconName").asString().getString(),
         properties.containsKey("licenseName") ? properties.get("licenseName").asString().getString() : "",
-        componentNode.toJson());
+        componentNode.toJson(),
+        mockInfo
+    );
     findComponentProperties(component, properties.get("properties").asArray(),
         properties.get("blockProperties").asArray());
     findComponentBlockProperties(component, properties.get("blockProperties").asArray());

appinventor/appengine/src/com/google/appinventor/client/editor/simple/components/MockButtonBase.java

@@ -233,7 +233,7 @@ private void setFontTypefaceProperty(String text) {
    */
   private void setImageProperty(String text) {
     imagePropValue = text;
-    String url = convertImagePropertyValueToUrl(text);
+    String url = MockComponentsUtil.convertAssetValueToUrl(editor, text);
     if (url == null) {
       hasImage = false;
       url = "";

appinventor/appengine/src/com/google/appinventor/client/editor/simple/components/MockCanvas.java

@@ -85,7 +85,7 @@ private void setBackgroundColorProperty(String text) {
    * Sets the canvas's BackgroundImage property to a new value.
    */
   private void setBackgroundImageProperty(String text) {
-    String url = convertImagePropertyValueToUrl(text);
+    String url = MockComponentsUtil.convertAssetValueToUrl(editor, text);
 
     // We tell the layout (which is a MockCanvasLayout) that there is (or is not) a background
     // image so it can adjust the "layout width/height". The "layout width/height" is used when the

appinventor/appengine/src/com/google/appinventor/client/editor/simple/components/MockComponent.java

@@ -17,7 +17,6 @@
 import com.google.appinventor.client.editor.youngandroid.YaBlocksEditor;
 import com.google.appinventor.client.editor.youngandroid.YaFormEditor;
 import com.google.appinventor.client.explorer.SourceStructureExplorerItem;
-import com.google.appinventor.client.explorer.project.Project;
 import com.google.appinventor.client.widgets.ClonedWidget;
 import com.google.appinventor.client.widgets.LabeledTextBox;
 import com.google.appinventor.client.widgets.dnd.DragSource;
@@ -30,11 +29,6 @@
 import com.google.appinventor.client.widgets.properties.StringPropertyEditor;
 import com.google.appinventor.client.widgets.properties.TextPropertyEditor;
 import com.google.appinventor.client.youngandroid.TextValidators;
-import com.google.appinventor.shared.rpc.project.HasAssetsFolder;
-import com.google.appinventor.shared.rpc.project.ProjectNode;
-import com.google.appinventor.shared.rpc.project.youngandroid.YoungAndroidAssetsFolder;
-import com.google.appinventor.shared.rpc.project.youngandroid.YoungAndroidProjectNode;
-import com.google.appinventor.shared.storage.StorageUtil;
 import com.google.gwt.dom.client.NativeEvent;
 import com.google.gwt.event.dom.client.ClickEvent;
 import com.google.gwt.event.dom.client.ClickHandler;
@@ -855,41 +849,6 @@ public final SourceStructureExplorerItem getSourceStructureExplorerItem() {
     return sourceStructureExplorerItem;
   }
 
-  /**
-   * Returns the asset node with the given name.
-   *
-   * @param name  asset name
-   * @return  asset node found or {@code null}
-   */
-  protected ProjectNode getAssetNode(String name) {
-    Project project = Ode.getInstance().getProjectManager().getProject(editor.getProjectId());
-    if (project != null) {
-      HasAssetsFolder<YoungAndroidAssetsFolder> hasAssetsFolder =
-          (YoungAndroidProjectNode) project.getRootNode();
-      for (ProjectNode asset : hasAssetsFolder.getAssetsFolder().getChildren()) {
-        if (asset.getName().equals(name)) {
-          return asset;
-        }
-      }
-    }
-    return null;
-  }
-
-  /**
-   * Converts the given image property value to an image url.
-   * Returns null if the image property value is blank or not recognized as an
-   * asset.
-   */
-  protected String convertImagePropertyValueToUrl(String text) {
-    if (text.length() > 0) {
-      ProjectNode asset = getAssetNode(text);
-      if (asset != null) {
-        return StorageUtil.getFileUrl(asset.getProjectId(), asset.getFileId());
-      }
-    }
-    return null;
-  }
-
   // For debugging purposes only
   private String describeElement(com.google.gwt.dom.client.Element element) {
     if (element == null) {

appinventor/appengine/src/com/google/appinventor/client/editor/simple/components/MockComponentsUtil.java

@@ -198,17 +198,18 @@ static ProjectNode getAssetNode(SimpleEditor editor, String name) {
     }
     return null;
   }
-  
+
   /**
-   * Converts the given font typeface property value to font resource URL
+   * Converts the given asset name to a file URL. Returns null if the name is
+   * blank or not recognized as an asset.
    *
    * @param editor the editor
-   * @param text   asset name
+   * @param name   asset name
    * @return the string value of font resource URL
    */
-  static String convertFontPropertyValueToUrl(SimpleEditor editor, String text) {
-    if (text.length() > 0) {
-      ProjectNode asset = getAssetNode(editor, text);
+  static String convertAssetValueToUrl(SimpleEditor editor, String name) {
+    if (!name.isEmpty()) {
+      ProjectNode asset = getAssetNode(editor, name);
       if (asset != null) {
         return StorageUtil.getFileUrl(asset.getProjectId(), asset.getFileId());
       }
@@ -254,7 +255,7 @@ static void setWidgetFontTypeface(SimpleEditor editor, Widget widget, String typ
     } else {
       fontFamily = typeface.substring(0, typeface.lastIndexOf("."));
       String resourceID = typeface.toLowerCase().substring(0, typeface.lastIndexOf("."));
-      String resourceURL = convertFontPropertyValueToUrl(editor, typeface);
+      String resourceURL = convertAssetValueToUrl(editor, typeface);
       if (Document.get().getElementById(resourceID) == null)  {
         createFontResource(fontFamily, resourceURL, resourceID);
       }

appinventor/appengine/src/com/google/appinventor/client/editor/simple/components/MockForm.java

@@ -806,7 +806,7 @@ private void setBackgroundColorProperty(String text) {
    * Sets the form's BackgroundImage property to a new value.
    */
   private void setBackgroundImageProperty(String text) {
-    String url = convertImagePropertyValueToUrl(text);
+    String url = MockComponentsUtil.convertAssetValueToUrl(editor, text);
     if (url == null) {
       // text was not recognized as an asset.
       url = "";

appinventor/appengine/src/com/google/appinventor/client/editor/simple/components/MockHVArrangement.java

@@ -167,7 +167,7 @@ private void adjustAlignmentDropdowns() {
    */
   private void setImageProperty(String text) {
     imagePropValue = text;
-    String url = convertImagePropertyValueToUrl(text);
+    String url = MockComponentsUtil.convertAssetValueToUrl(editor, text);
     if (url == null) {
       hasImage = false;
       url = "";

appinventor/appengine/src/com/google/appinventor/client/editor/simple/components/MockImageBase.java

@@ -70,7 +70,7 @@ public void onLoad(LoadEvent event) {
    */
   private void setPictureProperty(String text) {
     picturePropValue = text;
-    String url = convertImagePropertyValueToUrl(text);
+    String url = MockComponentsUtil.convertAssetValueToUrl(editor, text);
     if (url == null) {
       // text was not recognized as an asset. Just display the icon for this type of component.
       image.setUrl(getIconImage().getUrl());

appinventor/appengine/src/com/google/appinventor/client/editor/simple/components/MockListView.java

@@ -305,7 +305,7 @@ private void createLabelItem(List<JSONObject> arrayList) {
    */
   private Image createImage(String imageName, String widthValue, String heightValue) {
     Image image = new Image();
-    String url = convertImagePropertyValueToUrl(imageName);
+    String url = MockComponentsUtil.convertAssetValueToUrl(editor, imageName);
     if (url == null) {
       // text was not recognized as an asset. Just display the icon for this type of component.
       image.setUrl(getIconImage().getUrl());

appinventor/appengine/src/com/google/appinventor/client/editor/simple/components/MockMarker.java

@@ -234,7 +234,7 @@ public void onSuccess(List<FileDescriptorWithContent> arg0) {
       });
     } else {
       svgContent = null;
-      String url = convertImagePropertyValueToUrl(assetPath);
+      String url = MockComponentsUtil.convertAssetValueToUrl(editor, assetPath);
       if (url != null) {
         setMarkerAssetUrl(url);
       } else {

appinventor/appengine/src/com/google/appinventor/client/editor/simple/components/MockVisibleComponent.java

@@ -92,6 +92,10 @@ public abstract class MockVisibleComponent extends MockComponent {
     super(editor, type, new Image(icon));
   }
 
+  MockVisibleComponent(SimpleEditor editor, String type, Image icon) {
+    super(editor, type, icon);
+  }
+
   @Override
   public final void initComponent(Widget widget) {
     super.initComponent(widget);