Add website-targeted JavaScript Skin Designer integration

.github/workflows/skin-designer-devices-update.yml

@@ -0,0 +1,91 @@
+name: Skin Designer Device DB Update
+
+# Runs only on master so it doesn't fire on every PR that touches the script.
+# Each run pulls a small batch of the latest GSMArena entries and merges them
+# into the bundled devices.json. Slow-and-steady avoids the 30+ minute scrapes
+# that risk IP bans and CI cancellation.
+on:
+  schedule:
+    # Every 6 hours. Each run only scrapes the "latest mobiles" page, so we
+    # accumulate fresh devices without ever doing a multi-thousand-page crawl.
+    - cron: '0 */6 * * *'
+  workflow_dispatch:
+    inputs:
+      mode:
+        description: "trickle (~50 latest) or full (all curated brands)"
+        required: false
+        default: "trickle"
+        type: choice
+        options: [trickle, full]
+
+permissions:
+  actions: write
+  contents: write
+  pull-requests: write
+
+jobs:
+  update-device-db:
+    # Only run on the canonical repo's master, never on forks or feature branches.
+    if: github.repository == 'codenameone/CodenameOne' && github.ref == 'refs/heads/master'
+    runs-on: ubuntu-latest
+    timeout-minutes: 25
+
+    steps:
+      - name: Check out repository
+        uses: actions/checkout@v4
+
+      - name: Set up Python
+        uses: actions/setup-python@v5
+        with:
+          python-version: '3.x'
+
+      - name: Restore HTML scrape cache
+        uses: actions/cache@v4
+        with:
+          path: scripts/skindesigner/tools/devicedb/cache
+          key: skin-designer-devicedb-cache-${{ github.run_id }}
+          restore-keys: |
+            skin-designer-devicedb-cache-
+
+      - name: Trickle scrape (~50 latest)
+        if: github.event_name == 'schedule' || github.event.inputs.mode == 'trickle' || github.event.inputs.mode == ''
+        run: |
+          python3 scripts/skindesigner/tools/devicedb/build_devices_json.py \
+            --mode latest --limit 50 --delay 2.0 --max-pages 1
+
+      - name: Full scrape (all curated brands)
+        if: github.event_name == 'workflow_dispatch' && github.event.inputs.mode == 'full'
+        run: |
+          python3 scripts/skindesigner/tools/devicedb/build_devices_json.py \
+            --mode brands --delay 2.0 --max-pages 12
+
+      - name: Bail out if nothing changed
+        id: diff
+        run: |
+          if git diff --quiet -- scripts/skindesigner/common/src/main/resources/devices.json; then
+            echo "changed=false" >> "$GITHUB_OUTPUT"
+            echo "Device DB unchanged; nothing to commit."
+          else
+            echo "changed=true" >> "$GITHUB_OUTPUT"
+            git --no-pager diff --stat -- scripts/skindesigner/common/src/main/resources/devices.json
+          fi
+
+      - name: Create pull request
+        if: steps.diff.outputs.changed == 'true'
+        uses: peter-evans/create-pull-request@v7
+        with:
+          commit-message: "Refresh Skin Designer device database"
+          title: "Refresh Skin Designer device database"
+          body: |
+            ## Summary
+            - Regenerates `scripts/skindesigner/common/src/main/resources/devices.json`
+              by scraping a small batch of the latest devices from GSMArena and
+              merging into the existing catalog.
+
+            Created automatically by the Skin Designer device DB workflow.
+          base: master
+          branch: automation/skin-designer-device-db
+          delete-branch: true
+          labels: |
+            dependencies
+            automation

.github/workflows/website-docs.yml

@@ -5,17 +5,21 @@ on:
     types: [opened, synchronize, reopened, ready_for_review]
     paths:
       - 'docs/website/**'
+      - 'docs/developer-guide/**'
       - 'scripts/cn1playground/**'
       - 'scripts/initializr/**'
       - 'scripts/website/**'
+      - 'scripts/skindesigner/**'
       - '.github/workflows/website-docs.yml'
   push:
     branches: [main, master]
     paths:
       - 'docs/website/**'
+      - 'docs/developer-guide/**'
       - 'scripts/cn1playground/**'
       - 'scripts/initializr/**'
       - 'scripts/website/**'
+      - 'scripts/skindesigner/**'
       - '.github/workflows/website-docs.yml'
   workflow_dispatch:
 
@@ -76,6 +80,28 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ github.token }}
 
+      - name: Set up Java 17 for Skin Designer screenshots
+        uses: actions/setup-java@v4
+        with:
+          distribution: temurin
+          java-version: '17'
+
+      - name: Set up xvfb for headless simulator
+        run: |
+          set -euo pipefail
+          sudo apt-get update
+          sudo apt-get install -y --no-install-recommends xvfb
+
+      - name: Bootstrap Codename One tooling for screenshots
+        run: |
+          set -euo pipefail
+          mkdir -p "$HOME/.codenameone"
+          cp maven/CodeNameOneBuildClient.jar "$HOME/.codenameone/CodeNameOneBuildClient.jar"
+          touch "$HOME/.codenameone/guibuilder.jar"
+
+      - name: Generate Skin Designer screenshots
+        run: ./scripts/skindesigner/screenshots/take-screenshots.sh
+
       - name: Set up Java 25 for website build
         uses: actions/setup-java@v4
         with:

Ports/JavaSE/src/com/codename1/impl/javase/JavaSEPort.java

@@ -2735,7 +2735,17 @@ private void loadSkinFile(InputStream skin, final JFrame frm) {
 
             landscapeSkinHotspots = new HashMap<Point, Integer>();
             landscapeScreenCoordinates = new Rectangle();
-            if(props.getProperty("roundScreen", "false").equalsIgnoreCase("true")) {
+            boolean roundScreen = props.getProperty("roundScreen", "false").equalsIgnoreCase("true");
+            boolean hasSafeAreaProps =
+                    props.getProperty("safePortraitX") != null ||
+                    props.getProperty("safePortraitY") != null ||
+                    props.getProperty("safePortraitWidth") != null ||
+                    props.getProperty("safePortraitHeight") != null ||
+                    props.getProperty("safeLandscapeX") != null ||
+                    props.getProperty("safeLandscapeY") != null ||
+                    props.getProperty("safeLandscapeWidth") != null ||
+                    props.getProperty("safeLandscapeHeight") != null;
+            if(roundScreen) {
                 safeAreaLandscape = new Rectangle();
                 safeAreaPortrait = new Rectangle();
 
@@ -2764,6 +2774,22 @@ private void loadSkinFile(InputStream skin, final JFrame frm) {
             } else {
                 initializeCoordinates(map, props, portraitSkinHotspots, portraitScreenCoordinates);
                 initializeCoordinates(landscapeMap, props, landscapeSkinHotspots, landscapeScreenCoordinates);
+                if (hasSafeAreaProps) {
+                    safeAreaPortrait = new Rectangle();
+                    safeAreaLandscape = new Rectangle();
+                    safeAreaPortrait.setBounds(
+                            Integer.parseInt(props.getProperty("safePortraitX", "" + portraitScreenCoordinates.x)),
+                            Integer.parseInt(props.getProperty("safePortraitY", "" + portraitScreenCoordinates.y)),
+                            Integer.parseInt(props.getProperty("safePortraitWidth", "" + portraitScreenCoordinates.width)),
+                            Integer.parseInt(props.getProperty("safePortraitHeight", "" + portraitScreenCoordinates.height))
+                    );
+                    safeAreaLandscape.setBounds(
+                            Integer.parseInt(props.getProperty("safeLandscapeX", "" + landscapeScreenCoordinates.x)),
+                            Integer.parseInt(props.getProperty("safeLandscapeY", "" + landscapeScreenCoordinates.y)),
+                            Integer.parseInt(props.getProperty("safeLandscapeWidth", "" + landscapeScreenCoordinates.width)),
+                            Integer.parseInt(props.getProperty("safeLandscapeHeight", "" + landscapeScreenCoordinates.height))
+                    );
+                }
             }
 
 
@@ -4832,6 +4858,74 @@ private JMenu createSkinsMenu(final JFrame frm, final JMenu menu) throws Malform
             m.removeAll();
         }
         final JMenu skinMenu = m;
+
+        // Top-level: file picker for a user-supplied .skin
+        JMenuItem addSkin = new JMenuItem("Add Skin");
+        addSkin.addActionListener(new ActionListener() {
+            public void actionPerformed(ActionEvent ae) {
+                FileDialog picker = new FileDialog(frm, "Add Skin");
+                picker.setMode(FileDialog.LOAD);
+                picker.setFilenameFilter(new FilenameFilter() {
+                    public boolean accept(File file, String string) {
+                        return string.endsWith(".skin");
+                    }
+                });
+                picker.setModal(true);
+                picker.setVisible(true);
+                String file = picker.getFile();
+                if (file != null) {
+                    if (netMonitor != null) {
+                        netMonitor.dispose();
+                        netMonitor = null;
+                    }
+                    if (perfMonitor != null) {
+                        perfMonitor.dispose();
+                        perfMonitor = null;
+                    }
+                    String mainClass = System.getProperty("MainClass");
+                    if (mainClass != null) {
+                        Preferences p = Preferences.userNodeForPackage(JavaSEPort.class);
+                        p.put("skin", picker.getDirectory() + File.separator + file);
+                        deinitializeSync();
+                        frm.dispose();
+                        System.setProperty("reload.simulator", "true");
+                    } else {
+                        loadSkinFile(picker.getDirectory() + File.separator + file, frm);
+                        refreshSkin(frm);
+                    }
+                }
+            }
+        });
+        skinMenu.add(addSkin);
+
+        // Top-level: hand off to the hosted Skin Designer for building
+        // a new skin from scratch. Replaces the bundled gallery; the
+        // pre-built skins all live behind the "Legacy Skins" submenu.
+        JMenuItem designerItem = new JMenuItem("Skin Designer");
+        designerItem.addActionListener(new ActionListener() {
+            public void actionPerformed(ActionEvent ae) {
+                try {
+                    Desktop.getDesktop().browse(new URI("https://www.codenameone.com/skindesigner/"));
+                } catch (Exception err) {
+                    Logger.getLogger(JavaSEPort.class.getName()).log(Level.WARNING,
+                            "Could not open Skin Designer in browser", err);
+                }
+            }
+        });
+        skinMenu.add(designerItem);
+
+        skinMenu.addSeparator();
+
+        final JMenu legacyMenu = new JMenu("Legacy Skins");
+        legacyMenu.setDoubleBuffered(true);
+        skinMenu.add(legacyMenu);
+        populateLegacySkinsMenu(frm, legacyMenu);
+        return skinMenu;
+    }
+
+    private void populateLegacySkinsMenu(final JFrame frm, final JMenu legacyMenu) throws MalformedURLException {
+        legacyMenu.removeAll();
+        final JMenu skinMenu = legacyMenu;
         Preferences pref = Preferences.userNodeForPackage(JavaSEPort.class);
         String skinNames = pref.get("skins", DEFAULT_SKINS);
         if (skinNames != null) {
@@ -5147,7 +5241,7 @@ public void run() {
                                             downloadMessage.setVisible(false);
                                             d.setVisible(false);
                                             try {
-                                                createSkinsMenu(frm, skinMenu);
+                                                populateLegacySkinsMenu(frm, skinMenu);
                                             } catch (MalformedURLException ex) {
                                                 Logger.getLogger(JavaSEPort.class.getName()).log(Level.SEVERE, null, ex);
                                             }
@@ -5174,47 +5268,6 @@ public void run() {
             }
         });
 
-        skinMenu.addSeparator();
-        JMenuItem addSkin = new JMenuItem("Add New...");
-        skinMenu.add(addSkin);
-        addSkin.addActionListener(new ActionListener() {
-
-            public void actionPerformed(ActionEvent ae) {
-                FileDialog picker = new FileDialog(frm, "Add Skin");
-                picker.setMode(FileDialog.LOAD);
-                picker.setFilenameFilter(new FilenameFilter() {
-
-                    public boolean accept(File file, String string) {
-                        return string.endsWith(".skin");
-                    }
-                });
-                picker.setModal(true);
-                picker.setVisible(true);
-                String file = picker.getFile();
-                if (file != null) {
-                    if (netMonitor != null) {
-                        netMonitor.dispose();
-                        netMonitor = null;
-                    }
-                    if (perfMonitor != null) {
-                        perfMonitor.dispose();
-                        perfMonitor = null;
-                    }
-                    String mainClass = System.getProperty("MainClass");
-                    if (mainClass != null) {
-                        Preferences pref = Preferences.userNodeForPackage(JavaSEPort.class);
-                        pref.put("skin", picker.getDirectory() + File.separator + file);
-                        deinitializeSync();
-                        frm.dispose();
-                        System.setProperty("reload.simulator", "true");
-                    } else {
-                        loadSkinFile(picker.getDirectory() + File.separator + file, frm);
-                        refreshSkin(frm);
-                    }
-                }
-            }
-        });
-
         skinMenu.addSeparator();
         JMenuItem reset = new JMenuItem("Reset Skins");
         skinMenu.add(reset);
@@ -5259,10 +5312,9 @@ public void actionPerformed(ActionEvent ae) {
                         }
 
                     }
-                
+
             }
         });
-        return skinMenu;
     }
 
     InputStream openSkinsURL() throws IOException {