Page MenuHomePhabricator

Codex feasibility study for Cat-a-lot
Open, Needs TriagePublic

Description

Cat-a-lot currently utilizes jQuery UI, which is deprecated. The future UI library to adopt is Codex (built with Vue.js). We need to assess the feasibility of migrating Cat-a-lot to Codex or determine if we should continue temporarily using jQuery UI integrated with Codex CSS styles.

Objective
Evaluate the possibility and approach for replacing jQuery UI in Cat-a-lot with Codex.

Create a minimal "Hello World" userscript integrating Codex UI elements, including:

  • Text input field
  • Button
  • Text
  • Image
  • dialog (similar to JavaScript alert())

Test thoroughly and document findings clearly as ticket comments

Technical Questions
We need clarity on the following:

  • How do userscripts using Codex UI function within official skins (Vector2022, Vector, Minerva)?
  • How do Codex-based userscripts behave on older skins (Monobook, Timeless)?
  • What's the performance and compatibility of userscripts employing only Codex CSS elements?
  • How do Codex or Codex CSS-only userscripts perform on mobile?

Links
*Codex Compnents documentation

Example scripts

Scripts in different wikis

Note: Codex in gadgets lacks documentation. Thus, in this task, our primary goal is to gather practical information on how Codex is used within gadgets. I.e. Hello world example script itself is valuable information.

Event Timeline

FYI. I tried to get hello world user script example to working and I was not able to do it. I expect that has been working as multiple people have been tested it, but I do not have idea how it should be executed.

Hi @Zache ,

I saw this task in passing and tried to run the hello world user script and successfully got it working! Here are the exact steps I followed:

  1. Enable Script Installation Feature
    • Go to: Wikipedia Preferences > gadgets tab
    • Under "Advanced options", enable: "Install scripts without having to manually edit JavaScript files"
  2. Install the User script:
    • Visit your personal script page and paste the entire Codex example script and publish your changes
    • Then on the same script page you'll see the option to install the user script.
    • Install it and look in the left sidebar for a new "Codex Widgets" section
    • Click "Example Dialog Widget" → The Codex dialog should appear!

As a note, T340460: Allow .vue files to be used in Gadgets is in the works, maybe it’d be easier to wait for it. I don’t know if waiting for it conflicts with the Outreachy timeline, though.

Hey! I'd like to explore the feasibility of using Codex in cat-a-lot. Even if Codex in gadgets isn’t fully ready yet, it’s valuable to understand its current status, how it should be used, and whether it supports legacy skins like Timeless and Monobook. Since Cat-a-lot needs to support legacy skins, this will be a key factor in determining if Codex is a viable option. I'll document my findings on a user page as I go. Thanks!

Link to the page - Codex Feasibility Study for Gadget-Cat-a-lot

Hi @Zache, I wanted to share the current progress on the Codex feasibility study for Cat-a-lot. Here’s the link to the document. While it’s still a work in progress and quite scattered, I’ve covered key aspects such as integrating Codex UI elements, testing compatibility across skins, and identifying initial challenges. I've Also come up with a basic userscript that I utilized for testing across various skins.

I’m now working on the jQuery UI portion to assess whether switching to Codex is feasible for Cat-a-lot. This includes evaluating the differences in functionality, potential limitations, and any required modifications.

Let me know if you have any feedback or suggestions!

Hi @Zache , I’ve compiled the Codex feasibility study for Cat-a-lot, ensuring that it aligns with the task prompt. The study is quite detailed and explores:

Key aspects covered:

  • Codex UI Integration: Implemented a Hello World userscript with both Vue-based Codex components and CSS-only Codex elements.
  • Skin-Specific Testing: Verified functionality across Vector2022, Vector (Legacy), Minerva, Monobook, and Timeless for both the user scripts and the gadget cat-a-lot.
  • Performance & Compatibility: Assessed page load times, UI conflicts, and mobile responsiveness.
  • Comparison with jQuery UI: Analyzed Cat-a-lot’s reliance on jQuery UI and the feasibility of a full migration.

Key Findings:

  • Codex works well across all skins and does not introduce major UI issues.
  • Vue-based Codex components require dynamic loading, which may introduce minor performance overhead.
  • Codex CSS-only components can be used as an interim solution, maintaining visual consistency while avoiding Vue.js complexity.
  • A full migration is feasible but requires refactoring of Cat-a-lot’s JavaScript structure.

Since the study provides a comprehensive overview of the migration feasibility, it could serve as a reference document for future discussions on transitioning Cat-a-lot’s UI to Codex. Let me know if there are any areas you'd like me to refine or expand upon!

Link to the Full Feasibility Study

Codex does not provide draggable/resizable UI elements.

Actually, it does: it’s called Lookup.

Hey, thanks for taking the time to go through the document! I just wanted to clarify—I think you meant that Lookup can be used as an autocomplete component, rather than as a draggable/resizable UI elements?

Yeah, of course, I just copy/pasted the wrong line. :) Dragging/resizing is indeed something that hasn’t been supported by any UI framework in use in MediaWiki since jQuery UI. By the way, the other thing I really miss is modeless dialogs – which you didn’t mention in your study, but affects Cat-a-lot as well, as the main UI (the little yellow window) is modeless, and making it modal would make file selection impossible.

You're absolutely right—thank you so much for pointing that out. I did notice during testing that the Codex dialog completely covers the page content, but I somehow missed connecting that behavior with how it would hinder Cat-a-lot’s file selection workflow.

You're spot on: the modeless nature of Cat-a-lot’s UI is essential, and switching to a modal dialog would make the tool practically unusable. That’s definitely an important limitation that should be highlighted in the feasibility study.

I’ll make sure to update the document accordingly. I really appreciate your attention to detail—this insight is incredibly helpful in understanding the broader implications of the UI transition. Thanks again!