Preventing out-of-memory conditions for browser applications

Abstract

A networked computer system can monitor browser memory usage of a browser application during a UI design session in which a user interacts with a user interface (UI) design file via the browser application. The system can detect that the browser memory usage of the browser application exceeds a first memory threshold, and in response, the system can provide a menu of a plurality of UI pages of the UI design file on a display of the computing device, where each UI page of the plurality of UI pages presented in the menu includes a memory usage indicator.

Description

[0001] Cross-references to related applications This application claims priority to the following: (i) U.S. Patent Application No. 18 / 955,597, filed November 21, 2024; (ii) U.S. Patent Application No. 18 / 955,386, filed November 21, 2024; (iii) U.S. Provisional Patent Application No. 63 / 607,765, filed December 8, 2023; (iv) U.S. Provisional Patent Application No. 63 / 602,190, filed November 22, 2023; and (v) U.S. Provisional Patent Application No. 63 / 601,976, filed November 22, 2023; the aforementioned priority applications are incorporated herein by reference in their entirety. Technical Field

[0002] The examples described in this article involve mitigation methods for offline user experience and insufficient storage for collaborative web services. Background Technology

[0003] Software design tools come in many forms and applications. For example, in the field of application user interfaces, software design tools enable designers to combine the functional aspects of a program with aesthetics, thereby producing a set of pages that form the user interface of the application. Attached Figure Description

[0004] Figure 1A It is a block diagram illustrating a user computing device communicating with a networked computer system, based on one or more examples.

[0005] Figure 1B The illustration shows a network computer system implementing a collaborative web service based on one or more examples.

[0006] Figure 2A The illustration shows a sample collaborative interface for creating a user interface (UI) design document based on one or more examples.

[0007] Figure 2B The illustration shows a sample collaboration interface during a collaboration session based on one or more examples of a multi-user collaborative UI design.

[0008] Figure 2C The illustration shows a sample collaborative interface for editing a UI design, which includes UI design pages and multiple UI frames, based on one or more examples.

[0009] Figure 2D The illustration shows an example memory threshold intervention based on one or more examples, which enables users to reduce browser memory usage.

[0010] Figure 2EThe illustration shows a sample user interface that has been started in recovery mode, based on one or more examples.

[0011] Figure 2F The illustration shows a sample user interface for a design session based on one or more examples.

[0012] Figure 3A The illustration shows example processes for providing archiving and recovery functionality for memory shortages on a user's computing device, based on one or more examples.

[0013] Figure 3B The illustration shows an example process, based on one or more examples, for enabling a browser application on a user's computing device to provide archiving and recovery functionality in cases of insufficient memory.

[0014] Figure 4 It is a block diagram illustrating a computer system on which one or more embodiments can be implemented.

[0015] Figure 5 This is a block diagram illustrating a user computing device used in conjunction with one or more examples described herein. Detailed Implementation

[0016] The examples described herein relate to providing collaborative web services where users can collaborate with other remote users to design user interfaces and overall user experiences (e.g., for applications). In various examples, users may execute browser applications on computing devices to interact with current user interface (UI) design files. Each user's UI design file may be stored in a backend computing system and may include designs in progress for a specific UI or graphical user interface (GUI). As provided herein, each UI design in progress may include a set of UI pages that the user can edit to configure the user experience. As provided herein, "design in progress" and "design in action" are used interchangeably and may refer to a current UI design that can be configured and edited by the user and / or a group of remote user collaborators. According to the embodiments described herein, a user and one or more remote users may each provide input to edit and configure the set of UI pages with interactive features such as selectable buttons or icons, text boxes, search boxes, embedded links, links to other pages in the set of UI pages, dropdown menus, etc.

[0017] Among various implementations, network computer systems can implement a set of user experience improvements to mitigate memory shortages in browser applications. It is conceivable that browser applications reliant on browser memory may experience memory shortages due to limited browser memory availability, potentially restricting user access to the application. Under conventional methods, users must call or otherwise contact support technicians associated with the collaborative web service to manually restore their accounts or current sessions.

[0018] Based on the examples provided herein, a set of memory-out interventions can be implemented to prevent users from being restricted from accessing collaborative web services. This set of memory-out interventions may include a first intervention corresponding to a first memory threshold (e.g., 65% of browser memory allocation). During a UI design session in which a user interacts with a user interface (UI) design file through a browser application, the network computer system or browser application can monitor browser memory usage. The network computer system or browser application can then detect that the browser application's browser memory usage exceeds the first memory threshold. In response to detecting that browser memory exceeds the first memory threshold, the user's computing device can display a menu of multiple UI pages from the UI design file on the computing device's display, wherein each of the multiple UI pages displayed in the menu includes a memory usage indicator.

[0019] In various implementations, the user's computing device may also present a prompt to archive one or more pages to reduce browser memory usage below a first memory threshold. According to some examples, each of multiple UI pages in a menu may include a set of interactive features configured by the user and / or one or more remote collaborators during a design session, where the UI page is configured for functionality specific to a particular UI design. These interactive features may include any functionality related to the UI and user experience (e.g., for a specific application or website). When the user selects a specific page to archive, the computer system may disable the editing capabilities of that UI page and deactivate the set of interactive features for that specific UI page.

[0020] In this way, the archived pages can include preview pages of the functional UI pages (e.g., screenshots) that consume significantly less memory than the functional UI pages themselves. In various examples, the computing system can update the memory usage indicator belonging to each UI page in the menu and can also indicate to the user whether they have successfully reduced memory usage below a first memory threshold.

[0021] In a further example, a user can unsave a previously saved UI page. Based on the user's input to unsave a saved UI page, the computer system can re-enable editing functionality and reactivate that set of interactive features on that specific UI page. For example, in response to determining that browser memory usage will remain below a first memory threshold, the computer system can re-enable editing functionality and reactivate that set of interactive features on that specific UI page.

[0022] In some scenarios, users may ignore memory usage warnings and / or refuse to archive active UI pages to reduce memory usage. Based on monitoring browser memory usage, a computer system can detect when a browser application's memory usage exceeds a critical memory threshold. Under existing methods, this critical memory threshold would prevent the user from engaging with and interacting with any UI pages in the UI design file. For example, before allowing a user to reactivate their UI design file, the user would need to call an administrator or technician to manually adjust the file to operate at or below the critical memory threshold.

[0023] According to the embodiments provided herein, when a user exceeds a critical memory threshold for browser memory, the computer system can initiate a recovery mode on the browser application. In some examples, recovery mode disables editing functions on the UI design file and enables the user to restore browser memory usage below the critical memory threshold. Additionally or alternatively, recovery may further instruct the user to restore browser memory usage below a first memory threshold that triggered the initial intervention. As provided herein, the user can restore browser memory usage by archiving or deleting UI pages from the UI design file, or by copying the UI pages to a different UI design file.

[0024] In some implementations, a temporary increase in memory allocation exceeding a critical memory threshold allows the user to perform one or more actions to reduce browser memory usage below the critical memory threshold. For example, a network computer system can enforce a critical browser memory threshold below the browser's own maximum browser memory allocation. This allows the network computer system to provide a temporary increase in browser memory allocation to restore the user's account and / or UI design files.

[0025] The one or more embodiments described herein provide methods, techniques, and actions performed by a computing device in a programmatic manner, or as a computer-implemented method. As used herein, programmatic means using code or computer-executable instructions. These instructions may be stored in one or more memory resources of the computing device. The steps performed in a programmatic manner may or may not be automatic.

[0026] One or more embodiments described herein may be implemented using a programming module, engine, or component. A programming module, engine, or component may include a program, subroutine, part of a program, or a software or hardware component capable of performing one or more of the described tasks or functions. As used herein, a module or component may exist independently of other modules or components on a hardware component. Alternatively, a module or component may be a shared element or process of other modules, programs, or machines.

[0027] Some of the embodiments described herein typically require the use of computing devices, including processing and memory resources. For example, one or more embodiments described herein may be implemented wholly or partially on computing devices such as servers, desktop computers, cellular or smartphones, tablet computers, wearable electronic devices, laptop computers, printers, digital photo frames, network devices (e.g., routers), and tablet devices. Memory, processing, and network resources can all be used in conjunction with the creation, use, or execution of any of the embodiments described herein (including the execution of any method or the implementation of any system).

[0028] Furthermore, one or more embodiments described herein can be implemented using instructions executable by one or more processors. These instructions may be carried on a computer-readable medium. The machines shown or described in the following figures provide examples of processing resources and computer-readable media on which instructions for implementing embodiments of the invention may be carried and / or executed. In particular, various machines illustrated using embodiments of the invention include processors and various forms of memory for storing data and instructions. Examples of computer-readable media include permanent storage devices, such as hard disk drives on personal computers or servers. Other examples of computer storage media include portable storage units, such as CD or DVD units, flash memory (such as that carried on smartphones, multifunction devices, and / or tablet computers), and magnetic storage. Computers, terminals, and network-enabled devices (e.g., mobile devices, such as mobile phones) are examples of machines and devices utilizing processors, memory, and instructions stored on computer-readable media. Additionally, embodiments may be implemented in the form of a computer program or a computer-usable carrier medium capable of carrying such a program.

[0029] System Description Figure 1AThis is a block diagram illustrating a user computing device 100 communicating with a networked computer system according to one or more examples. In various implementations, the user computing device 100 may include a communication interface 105 communicating with a networked computer system 155 via a network 150 (e.g., Wi-Fi, cellular, satellite, etc.). As provided herein, the networked computer system 155 may implement collaborative web services that enable remote users to collaborate on user interface (UI) designs, which are then combined to provide a user experience (UX) for users of an application.

[0030] In various examples, user computing device 100 may include any personal computer, such as a tablet computer, desktop computer, laptop device, smartphone device, augmented reality (AR) or virtual reality (VR) headset device, etc. User computing device 100 may include input interface 120, which may include a keyboard and mouse, a touch interface such as a trackpad or touch-sensitive display, interactive virtual display, etc. User computing device 100 may also include display device 140, such as a computer screen or touch-sensitive display.

[0031] In various examples, user computing device 100 can operate browser application 110, which can launch to provide access to collaborative services implemented by network computer system 155. Browser application 110 can be executed to establish a network connection with network computer system 155, enabling multiple remote users to collaborate on one or more designs corresponding to specific UI design files. For example, a user can include an account and / or profile of network computer system 155, which includes a set of UI design files that the user can edit and configure until finalization.

[0032] In various implementations, when browser application 110 is launched, it can automatically load a set of user UI design files into browser storage 115 to mitigate offline triggering, such as when the user's network connection or the network connection of the network computer system fails. This failure may occur due to network or power outages at the front end or back end (e.g., due to storms, natural disasters, network infrastructure maintenance and upgrades, etc.). Such interruptions may last for hours or even days, potentially causing delays in meeting user deadlines or specific UI design files.

[0033] In previous methods, when an offline trigger occurs, even if the user wishes to access and input multiple UI design files, they can only interact with the currently loaded UI design file. The example described herein provides the option to preload multiple UI design files into browser storage 115, allowing the user to still access and interact with any preloaded UI design file during an offline trigger. For example, the user's UI design files may be stored in a backend network computer system 155 and accessible by executing browser application 110. During a normal session, the user can open a specific UI design file, which may contain any number of interactive UI pages under editing.

[0034] As a background operation, browser application 110 can preload the user's additional UI design files into browser storage 115 (e.g., based on recency or machine learning predictions). When the user interacts with a specific UI design file, input data is received via input interface 120, which may include keyboard / mouse input, stylus input, touch input, etc. Based on user input, the UI design in progress corresponding to the UI design file can be rendered, edited, and configured by the user on collaborative canvas 145 for display components 140. The user's edits to the UI design file can then be propagated during the collaborative session to collaborative canvases presented on the computing devices of any number of other users.

[0035] Following this approach, contributions from other users to the UI design under editing can be propagated as collaborative data from the network computer system 155 to the design being edited and presented on the canvas 145. Therefore, users and remote users can participate in real-time during a collaborative session to provide input and edits to the design. For example, input data from users can be processed by the rendering engine 135 of the browser application 110, which can generate content data to be displayed along with the canvas 145, and this content data is transmitted via network 150 to the network computer system 155 for propagation to the computing devices of other users in the collaborative session. As described, the browser application 110 will also propagate input provided by other participants to the collaborative canvas 145 presented for the display component 140. In some examples, the browser application 110 can execute scripts, code, and / or other logic (“programming components”) to implement the functionality of the rendering engine 135 described herein.

[0036] In some examples, browser application 110 may be implemented as web code, which may include (but is not limited to) Hypertext Markup Language (HTML), JavaScript, Cascading Style Sheets (CSS), other scripts, and / or other embedded code received by browser application 110 from a website. For example, browser application 110 may execute web code embedded in a web page. Web code may also enable browser application 110 to execute and / or retrieve other scripts and programming resources (e.g., libraries) from a website and / or other local or remote locations. For instance, browser application 110 may include JavaScript embedded in HTML resources executed by browser application 110 (e.g., web pages constructed according to HTML 5.0 or other versions provided by standards published by the W3C or WHATWG consortium). In some examples, the browser application's content rendering engine 135 may utilize graphics processing unit (GPU) acceleration logic, such as WebGL (Web Graphics Library) programs that execute Graphics Library Shader Language (GLSL) programs on the GPU.

[0037] In some implementations, rendering engine 135 may use programming resources (e.g., an HTML 5.0 canvas) associated with a browser application to generate a collaborative canvas 145. As an additional or variant, rendering engine 135 may use programming resources and datasets (e.g., canvas parameters) retrieved from local (e.g., memory) or remote sources (e.g., from a network computer system 155) to trigger or otherwise cause the generation of the collaborative canvas 145.

[0038] The browser application 110 can also retrieve programming resources that include an application framework for use with the collaborative canvas 145. The application framework may include a dataset defining or configuring a set of interactive graphical tools integrated with the collaborative canvas 145. For example, interactive graphical tools can enable users to provide input for creating and / or editing design interfaces.

[0039] Furthermore, the rendering engine 135 can interpret user input actions based on the location of detected input (e.g., whether the location of the input indicates a selection of a tool, an object rendered on the collaborative canvas 145, or an area of ​​the canvas 145), the frequency of input detected within a given time period (e.g., tap and hold), and / or the start and end positions of the input or a series of inputs (e.g., the start and end positions of a drag input), as well as various other input types that the user may specify through one or more input devices (e.g., pinch, zoom, scroll, etc.). In this way, the rendering engine 135 can interpret, for example, a series of inputs as a selection of design tools (e.g., a shape selection based on the location of the input), and inputs that define the attributes of the selected shape (e.g., dimensions).

[0040] In various examples, rendering engine 135 operates to generate a user interface presented on display component 140, which may include the design in progress. The user interface may include graphical elements and their respective properties to enable a user to edit the design using input interface 120. Alternatively or additionally, rendering engine 135 may generate a blank page for collaborative canvas 145, and the user may interact with various display tools to initiate the design in progress. As rendered, the design in progress may include graphical elements such as a background and / or a set of objects (e.g., shapes, text, images, programming elements), and properties of the individual graphical elements.

[0041] Each attribute of a graphic element can include an attribute type and an attribute value. For objects, attribute types include shape, dimension (or size), layer, type, color, line weight, font color, font family, font size, font style, and / or other visual characteristics. Depending on the implementation details, attributes reflect the properties of a two-dimensional or three-dimensional design. In this way, the attribute values ​​of individual objects can define visual characteristics such as size, color, positioning, layering, and content for elements rendered as part of an ongoing design.

[0042] Individual design elements can also be defined based on desired runtime behavior. For example, some objects can be defined to have static or dynamic runtime behavior. The properties of dynamic objects can change in response to predefined runtime events generated by the underlying application used in conjunction with the design in progress. Additionally, some objects can be associated with logic that defines that object as a trigger for rendering or changing other objects, such as through the implementation of sequences or workflows. Furthermore, other objects can be associated with logic that conditioned design elements on when they are rendered and / or their appearance when configured or rendered. Furthermore, objects can also be defined as interactive, where one or more properties of an object can change based on user input during application runtime.

[0043] Rendering engine 135 can process input data corresponding to provided user input, wherein the input data indicates: (i) the type of input action (e.g., shape selection, object selection, resizing input, color selection), (ii) one or more objects affected by the input action (e.g., objects being resized), (iii) the desired attributes that will be changed by the input action, and / or (iv) the desired values ​​of the attributes being changed. Rendering engine 135 can implement changes indicated by the input data to update the active workspace data locally. Rendering engine 135 can update the collaborative canvas 145 to reflect changes to the affected objects in the design being edited.

[0044] In various implementations, browser application 110 may include a mode triggering module 130, which can detect memory triggers (e.g., initial memory triggers and critical memory triggers) and offline triggers indicating that user computing device 100 or network computer system 155 has lost network connectivity. When an offline trigger is detected, the collaboration session is terminated, and contributions from the user and remote users in the collaboration session are no longer propagated in real time.

[0045] According to the embodiments described herein, when the mode triggering module 130 detects an offline trigger, the browser application 110 can initiate an offline mode in which the user can still participate in opening and displaying the current UI design file on the canvas 145, as well as the set of UI design files automatically preloaded by the browser application 110 upon startup. For example, the design in editing a particular UI design file may include a set of functions that allow the user to edit and configure the individual UI pages retained in the offline mode. Furthermore, the user can open one of the UI design files preloaded into the browser storage 115 and edit and configure the individual UI pages of that UI design file accordingly. Change data corresponding to the user's edits and configurations can be automatically saved in the browser storage 115 by the browser application 110.

[0046] In one embodiment, offline mode triggering can also cause rendering engine 135 to stop transmitting content data to network computer system 155, and instead store the changed data corresponding to user input on the UI design being edited in browser memory 115. According to an example, when the network connection is restored, mode triggering module 130 can detect online triggering and cause browser application 110 to operate in normal online mode and / or resume the collaboration session. The changed data corresponding to user input during offline mode can be propagated to the corresponding UI design(s) stored at network computer system 155, and thus to the UI designs(s) being edited and presented on the remote user's computing device in the collaboration session.

[0047] In a further implementation, browser application 110 can assist users in creating new UI design files in offline mode. For example, browser application 110 may include local functionality for creating, editing, and configuring new UI design files with any number of UI pages featuring functionality designed by the user. The new UI design may include an initial template rendered on canvas 145, or a pre-saved template including any shape, interactive features (e.g., optional buttons, text boxes, search boxes, icons, etc.). Users can make changes and functional edits to each UI feature of the new design, and browser application 110 can cache or save these changes and functional edits in browser storage 115 (e.g., automatically or in response to user input) as a new UI design file.

[0048] When the mode triggering module 130 detects a network connection, the browser application 110 can automatically upload the new UI design file to the network computer system 155 and allow any remote collaborators associated with the new UI design file to access it (e.g., a list of collaborators entered by the user, or a pre-selected list based on contracts or employment). In online mode, synchronization of change data provided by user collaborators on the design under editing presented on the public canvas 145 can occur in real time. For any user operating in offline mode, change data provided by that user can be synchronized via the network computer system 155 with the design under editing presented on other collaborators' devices.

[0049] In some examples, to prevent conflicting changes in an edited design, the network computer system 155 can implement a "last write wins" rule for each UI design file. For instance, a collaborative session among five users might involve each of the five users providing input and editing to the design in the UI design file. One of the collaborators might lose connection, enter offline mode, and, as described herein, continue to provide change data to the design in the edit. In offline mode, this change data is not propagated to the other collaborators in the current collaborative session. When the offline user is reconnected, the change data provided by the user in offline mode can be automatically propagated and / or synchronized to the design in the edit presented on the canvases of the other collaborators, which could result in the rewriting of some changes made by those collaborators.

[0050] In a variant, when an offline user reconnects, the changes made by the offline user do not overwrite any changes made by the online collaborators. In such an example, the network computer system 155 can provide each online collaborator with a preview of the changes made by the offline user, which can be accepted in full, partially accepted, or rejected by other collaborators. In a further variant, the changes made by the offline user can be presented in a newly created UI page automatically generated by the network computer system 155, which can be added to a UI design file for consideration by a group of collaborators.

[0051] In various implementations, the auto-save function can be implemented in offline mode, where the browser application 110 automatically caches the changed data to the browser storage 115. When the network connection between the user computing device 100 and the network computer system 155 is restored, the changed data is automatically synchronized with and / or propagated to the UI design file at the network computer system 155 and displayed on the canvas of other user collaborators for editing.

[0052] As described herein, a network computer system 155 implementing collaborative services can select a UI design file for each user to be automatically preloaded into browser storage 115. In one example, the network computer system 155 selects the UI design file based on its recent usage. Specifically, if browser storage 115 has the capacity to store three UI design files, the network computer system 155 can select the three most recent UI design files with which the user has interacted.

[0053] Other methods for selecting UI design files for preloading can be considered, such as machine learning approaches that take into account individual behavior, preferences, and / or routines. In one example, a user could create a preferred set of UI design files for preloading. In this example, the user provides input (e.g., in a preferences menu) that can rank or select UI design files according to their importance to the user. These could be preloaded when the user launches the browser application 110.

[0054] In a further example, network computer system 155 can perform machine learning techniques to predict which UI design files a user might need in any given collaborative session. Factors such as learned routines (e.g., a user routinely accessing UI design files at a specific time of day and / or on a specific day of the week), whether a user is tagged or checked in a particular UI design file, when a user's name is included in the comments of a particular UI design file, etc., can be used. In other aspects, network computer system 155 can access information from other applications and data on the user's computing device 100, which can indicate which UI design files the user might access. This information may include calendar data indicating collaborative sessions and / or meetings the user will attend that require access to specific UI design files. As provided herein, network computer system 155 can perform machine learning predictions based on individual characteristics or information associated with the user to select UI design files to preload into browser storage 115 when browser application 110 is launched.

[0055] According to the embodiments described herein, the execution of browser application 110 provides the user with a threshold amount of available browser memory 115 (e.g., a browser limit or a limit enforced by network computer system 155, such as a maximum of 3 GB). Network computer system 155 may enforce a browser memory limit lower than the actual available memory limit of the user's browser (e.g., for the purpose of low memory warnings and events).

[0056] The embodiments described herein recognize that saving and / or preloading a single UI design file or multiple UI design files to browser memory 115 can be memory-intensive. For example, as users and / or collaborators add and configure UI design files to include several UI pages with various functionalities, the UI design files increasingly consume browser memory 115. When a critical memory threshold (e.g., browser limit) is exceeded, the user is typically locked out of the browser, whether participating in browser application 110 or performing any other browser functions.

[0057] According to the examples provided herein, browser application 110 and / or network computer system 155 may operate to monitor memory data from a user's browser memory 115, wherein the memory data indicates current browser memory usage. When browser memory usage reaches a first memory threshold (e.g., a forced browser memory limit of 65%), network computer system 155 may perform a first intervention to attempt to induce the user to use less browser memory 115. According to the examples provided herein, the first intervention may involve a menu covering the user interface (e.g., a pop-up menu or sidebar menu).

[0058] In various examples, the menu may include a warning about memory usage for the user, as well as a list of UI elements (e.g., UI pages of the current UI design file), with a memory usage indicator associated with each element. In some examples, the user is prevented from continuing until one or more pages are deleted, copied to a different file, or archived. In variations, the user may choose to ignore the warning and continue working on the current UI design file. According to the embodiments provided herein, users can reduce browser memory usage by interacting with menus of UI elements, deleting one or more elements, or archiving one or more elements.

[0059] Therefore, in response to a first memory trigger, the mode trigger module 130 can send a mode trigger to the rendering engine 135 to present the menu and temporarily suspend user interaction with the design being edited. The user can archive one or more UI pages by selecting each UI page and choosing the "Archive" feature. In doing so, the network computer system 155 can store data corresponding to the functionality and editability of a particular UI page and associate that data with a preview or screenshot of the UI page, which can be generated for the display component 140. Thus, memory-intensive data associated with UI pages is transferred from browser memory 115 to the network computer system 155, and browser memory usage for archived pages is significantly reduced.

[0060] The browser storage usage indicator on the menu can reflect user actions such as saving, deleting, and / or copying UI pages, and can be updated in real time. In such an example, when a user successfully saves one or more UI pages, the UI pages remain accessible and can be de-saved based on the user's judgment. This removes the first intervention and menu until the first storage threshold is exceeded again.

[0061] In some implementations, the user can ignore the initial intervention and continue interacting with the design in the editor corresponding to a specific UI design file. If browser memory usage exceeds a critical memory threshold (e.g., forcing the browser to use 100% of its storage limit), the mode triggering module 130 can trigger a recovery mode on the browser application 110. Recovery mode prevents the user from engaging with the browser application 110 and any UI design file; the only available functionality is the ability to archive, delete, or copy UI pages or elements to reduce memory usage.

[0062] Based on these examples, when recovery mode is triggered, network computer system 155 may temporarily increase the permissible browser memory 115 (e.g., increase it to 105% of the forced memory) to restore browser memory usage to limited functionality below a critical memory threshold. In some embodiments, recovery mode may prompt the user to archive, delete, and / or copy UI pages or elements of UI design files until browser memory usage falls below a first memory threshold. In either case, the user is locked out of the UI design and collaboration features of browser application 110 until the corresponding threshold is met.

[0063] For archived pages, users can still view a preview of the archived page on the collaborative canvas 145 or on the user interface generated for the display component 140. According to the examples provided herein, users can unarchive or repair an archived page by selecting a preview or a menu associated with the preview. Selecting a preview or the menu can trigger a "unarchive" feature, which, when selected, causes the browser application 110 to retrieve functional data stored at the network computer system 155 and restore the UI page to its functionality configured before archiving.

[0064] The examples described in this article provide mitigation for network errors and outages, as well as low memory events. Any combination of the methods described in this article can be used for such mitigation, which may include offline mode features (e.g., when a critical memory threshold is exceeded and recovery mode is initiated), memory usage warnings and interventions, UI page archiving features, UI page repair features, and automated incremental loading of UI pages. These methods represent technological improvements in the general UI design field and are not limited to remote collaboration with other users.

[0065] Collaborative Network Platform Figure 1B A network computer system implementing collaborative web services is illustrated based on one or more examples. Figure 1BIn the example, the collaborative network platform is implemented by a network computer system 50, which communicates with multiple user computing devices 11-12 via one or more networks (e.g., the World Wide Web) to present a shared collaborative design interface on the user computing devices 11-12. Although Figure 1B An example of two users utilizing a collaborative network platform is shown, but the described example allows network computer system 50 to collaborate on a design interface among users with a large number of user computing devices. Among other advantages, the collaborative network platform allows users to access the design interface more concurrently and to conveniently manipulate objects while network computer system 50 manages synchronization and access issues.

[0066] refer to Figure 1B User computing devices 11-12 can be operated by users associated with a public account or with an account associated with a specific design 25 in progress. Each user computing device 11-12 presents the design 25 in progress on a collaborative canvas 71-72 presented on each device during its respective session. In this way, each of the user computing devices 11-12 can simultaneously access a set of active workspace data 90 using its respective program interface 41-42 on each of the user computing devices 11-12.

[0067] In the example, service interface 60 can load active workspace data 90 corresponding to the design in progress 25 from workspace data repository 64 and transmit a copy of the active workspace data 90 to each user computing device 11-12, so that the corresponding rendering engines 31-32 simultaneously render the design in progress 25 corresponding to the active workspace data 90, such as during an overlapped session.

[0068] In some examples, the network computing system 50 can continuously synchronize the active workspace data 90 corresponding to the design 25 in progress presented on user computing devices 11-12. Therefore, changes made by a user to the design 25 in progress on one user computing device 11 can be reflected in real time on the design 25 rendered on another user computing device 12. For example, when a change is made to the design 25 in progress at one user computing device 11, the corresponding rendering engine 31 locally updates the corresponding canvas 71 and transmits the change data 94 corresponding to that change to the service interface 60 of the network computing system 50 (e.g., via the web content rendering engine 135).

[0069] Service interface 60 processes change data 94 from user computing device 11 and uses change data 94 to make corresponding changes to active workspace data 90. Service interface 60 can also transmit remotely generated change data 95 (in the provided example, corresponding to or reflecting change data 94 received from user computing device 11) to another user computing device 12 that has loaded the same ongoing design 25, thereby causing the corresponding rendering engine 32 to generate changes to the ongoing design 25 accordingly, such as by causing program interface 42 and rendering engine 32 to update the corresponding collaborative canvas 72. In this way, active workspace data 90 can be synchronized between any number of user computing devices 11-12 using the corresponding workspace data 90.

[0070] In some examples, to facilitate the synchronization of active workspace data 90 at user computing devices 11-12 and network computer system 50, network computer system 50 may implement a flow connector to merge data streams between network computer system 50 and user computing devices 11-12 that have already loaded the same ongoing design 25. For example, the flow connector can merge a first data stream between user computing device 11 and network computer system 50 with a second data stream between user computing device 12 and network computer system 50. In some implementations, the flow connector may be implemented to enable each computing device 11-12 to make changes to the server-side active workspace data 90 without additional data replication, which would otherwise require data replication to process the streams from each user computing device 11-12 separately.

[0071] In some implementations, the network computer system 50 may include a UI file selector 68, which can determine which UI design files to preload onto the user computing devices of individual users of the collaborative service. As provided herein, the UI file selector 68 may refer to user profiles or other historical user data to determine which UI design files a particular user has recently accessed and / or edited. As further provided herein, the UI file selector 68 may implement other selection criteria and / or machine learning techniques to predict which specific UI design files a user is likely to open.

[0072] When determining or predicting which UI design files a user might open, the UI file selector 68 can preload those UI design files 91-92 into the browser memory of the browser running on the user's computing device 11-12. For example, when the user's computing device 11 launches a browser application for presenting and editing an ongoing design 25 on a collaborative canvas 71, the UI file selector 68 can predict which UI design files 91-92 the user is most likely to want to access and preload those UI design files into the browser memory on the user's computing device 11. Subsequently, if an offline situation occurs in the foreground (e.g., the user's network connection) or the backend (e.g., an interruption in the network computer system 50), the user will still be able to access and edit the currently open UI design files and each preloaded design file in the browser memory.

[0073] In such an example, the changed data 94 is stored or cached locally until the network link between the user computing device 11 and the network computer system 50 is restored. When the network link is restored, the user computing device can transmit synchronization data 97 to the network computer system 50 based on the changed input provided by the user during the offline period, so that the active workspace data 90 is updated accordingly to each UI design file with which the user has interacted.

[0074] According to the examples provided herein, a browser application running on each user computing device 11-12 may include a memory monitor 93 that monitors and indicates the memory data used by the browser application's browser memory. As described above, the memory monitor 93 may provide intervention to the user computing device when a first memory threshold is met, and / or may initiate a recovery mode on the browser application running on the user computing device when a critical memory threshold is exceeded.

[0075] Specifically, when a first memory threshold is exceeded on the browser of the user's computing device 11, the browser application can provide an intervention menu that lists the UI pages of the currently open UI design file and provides a memory indicator (e.g., a percentage of browser memory that is being forced to limit the browser memory) indicating how much browser memory each UI page is consuming. The user can interact with the menu to select and archive individual UI pages, delete UI pages or UI frames of UI pages, and / or copy UI pages to different UI design files stored in the network computer system 50. For example, the network computer system 50 may include a page archiver 66 that archives UI pages in the manner described herein when the user selects a specific UI page to archive. When the critical memory threshold is exceeded, the memory monitor 93 can trigger a recovery mode on the user's computing device 11, which can provide a temporary increase in browser memory to allow the user to reduce browser memory usage below the critical memory threshold or the first memory threshold.

[0076] Example User Interface Figure 2A The illustration shows a sample collaborative interface for creating a user interface (UI) design file based on one or more examples. In various implementations, the user interface 200 can be presented on the user computing device 100, such as in combination with... Figure 1A Shown and described, or presented on any number of collaborators' user computing devices 11-12 participating in a collaborative session, as in combination Figure 1B As shown and described.

[0077] In some examples, user interface 200 may present a collaborative canvas 205 that provides initial templates for creating UI designs. Users can open a browser application corresponding to the collaborative web service, which allows the collaborative canvas 205 to be presented, along with authoring toolbars 210 and editing toolbars 215 that provide users with authoring and editing tools for designing the user interface. As provided herein, users can initiate or join collaborative sessions with any number of collaborators to comment on, react to, or provide emojis to the contributions of other collaborators. Figure 2A As shown, the user interface 200 includes a welcome message 220 and may also provide "how-to" features or tutorials to begin creating a UI design.

[0078] In various examples, users can interact with the authoring toolbar features and editing toolbar features to create UI designs, which can then be saved as UI design files. This allows users to create a variety of interface panels, including custom shapes and functionalities configured by the user and any collaborators who join the user in a collaborative session. As presented herein, UI design files can include any number of UI pages, each of which can include a UI framework and design that can be edited by the user and their collaborators to create a specific user experience.

[0079] Figure 2B The illustration shows a sample collaboration interface 240 during a collaboration session based on one or more examples of a multi-user collaborative UI design. (Example:) Figure 2B As shown, a cursor indicator 230 can be provided to each user collaborator, which enables the user collaborator to provide creative input, make edits and configurations, and provide comments based on the currently presented UI design 225 in progress.

[0080] like Figure 2B As further illustrated, the UI design in progress may include UI page 225 (e.g., for an application under design), which may include any number of configurable features (e.g., dropdown menu features, icons, browsing features, product or service lists, checkout and purchase features, etc.). In some examples, users are able to provide comments and messages to other collaborating users in a comment panel 235 covering the collaborative canvas 205. Figure 2B In the example shown, collaborators can complete the design for a specific user interface and provide comments to initiate the prototyping of the UI design.

[0081] Figure 2C The illustration depicts a sample collaborative interface 250 of a UI design in editing, based on one or more examples, comprising multiple UI frames 260 of a UI design page 255. In various examples, the UI design page 255 may be labeled (e.g., "Updated Checkout Process") to indicate the functionality of the UI frames 260 within the UI design page 255. Each UI frame may correspond to a user interface screen to be presented when a user interacts with the application and / or website. In some examples, the user may interact with authoring and editing tools to update the design and / or reconfigure certain functionalities of a particular UI frame 260.

[0082] Figure 2D Example memory threshold intervention 265, based on one or more examples, is shown, which enables users to reduce browser memory usage. Figure 2DIn the example shown, the memory threshold intervention 265 may include a UI page menu that lists the currently active UI design page 275 in the presented editable design, and a set of corresponding browser memory usage indicators 270 that show the amount or percentage of browser memory usage for each UI design page 275. Figure 2D In the example shown, the UI page titled "Explore" has the highest browser memory usage. In this example, each UI page in memory threshold intervention 265 can be expanded or otherwise shown in sublist 277 to indicate each feature of the UI page and its individual memory consumption.

[0083] As provided in this document, a memory threshold intervention may include an initial warning after browser memory usage has exceeded a first threshold (e.g., forcing a browser memory limit of 65%). Regarding the initial memory usage warning, in some respects, the user can ignore or “turn off” intervention 265, and / or may choose to delete or archive certain UI pages 275 within intervention 265. Figure 2D As shown, the user has archived the "Messaging" UI page. This removes the functionality of the UI page from the browser's storage and leaves a preview or screenshot of the UI page in the UI design file loaded into the user's browser storage, thus significantly reducing the storage usage of the "Messaging" UI page.

[0084] Figure 2E The illustrations depict example user interfaces based on one or more examples, where recovery mode has been initiated. In various examples, critical memory intervention 280 can be presented to override the current user interface and can include a final intervention when a critical memory threshold is exceeded (e.g., forcing the browser to use 100% of its memory). Critical memory intervention 280 can be presented in conjunction with a recovery mode that locks the user from interacting with the UI design file.

[0085] As described in this article, recovery mode can temporarily increase browser memory limits through a networked computer system, allowing users to restore browser memory usage to below a critical memory threshold or a first memory threshold (e.g., by archiving one or more UI pages). Figure 2E As shown, the user can interact with critical memory intervention 280 to select from a list of UI pages and choose archiving feature 295, which archives the selected UI page in the manner described herein. When the user meets the requirements to exit recovery mode, they can exit critical memory intervention 280 and continue interacting with the UI design file.

[0086] Figure 2FThe illustration shows a sample user interface for a design session based on one or more examples. Figure 2F In the example shown, the user has already archived the UI page titled "Explore," which is no longer consuming browser memory. Furthermore, because browser memory usage has decreased below the critical memory threshold and / or the first memory threshold, a session resumption message 290 can be presented in critical memory intervention 280, informing the user that the current session has been resumed. In some ways, the user can clear or exit critical memory intervention 280, or critical memory intervention 280 can be automatically cleared from the display. The user can then continue designing the session.

[0087] Methodology Figure 3A and Figure 3B The illustrations depict example processes for implementing memory shortage intervention, based on one or more examples. Figure 3A and Figure 3B In the following description, for the purpose of describing the functionality used to perform the described steps or sub-steps, please refer to... Figures 1A to 2F Reference characters shown and described to represent various features. Figure 3A The operations performed can be executed by the example user computing device 100 that executes the browser application 110, as shown in the reference. Figure 1A Shown and described. References Figure 3B The described operation can be performed by a network computer system 155 ( Figure 1A ), 50 ( Figure 1B To execute. Furthermore, although... Figure 3A and Figure 3B The processes shown are presented in a specific order, but any step of the described process can be... Figure 3A and Figure 3B Before any other step in the corresponding processes 300 and 350, and with Figure 3A and Figure 3B Any other step in the corresponding processes 300, 350 combined or Figure 3A and Figure 3B It is executed after any other step in the corresponding processes 300 and 350.

[0088] refer to Figure 3AIn process 300, at box 302, browser application 110 executes instructions (e.g., from network computer systems 155, 50) to monitor or otherwise detect browser memory usage on user computing device 100 during design and / or collaboration sessions. At box 304, browser application 110 may detect that browser memory usage exceeds a first memory threshold. At box 306, based on exceeding the first memory threshold, browser application 110 may provide intervention, including menus and / or lists on UI pages and memory usage indicators for each UI page.

[0089] In some examples, at box 308, browser application 110 may receive input from the user to archive, delete, and / or copy one or more UI pages listed in the intervention. Alternatively, the user may wish to continue interacting with the current UI design file and may ignore the initial intervention. In some embodiments, at box 310, browser application 110 may remove the intervention and resume the design and / or collaboration session on the user's computing device 100. For example, browser application 110 may resume the current session for the user regardless of whether the user ignored the initial intervention or whether the user restored browser memory usage below a first memory threshold.

[0090] In box 312, browser application 110 may detect that browser memory usage on user computing device 100 exceeds a critical memory threshold. In response to exceeding the critical memory threshold, in box 314, browser application 110 may initiate recovery mode on browser application 110 to temporarily increase the browser memory limit (e.g., increase it to 105% of the enforced limit) and enable the user to reduce memory usage below the critical threshold and / or a first memory threshold.

[0091] In box 316, browser application 110 may receive input from the user to archive, delete, and / or copy one or more UI design pages. As provided herein, archiving a UI design page may include functionality to remove the UI design page and leave a preview or screenshot in the UI design file loaded in the browser storage 115 of the user's computing device 100. In box 318, when browser storage usage falls below a critical storage threshold and / or a first storage threshold, browser application 110 may accordingly resume the design and / or collaboration session.

[0092] As described herein, browser application 110 can further facilitate reduced browser memory usage and / or mitigate or prevent memory shortages on user computing device 100 by incrementally loading specific UI design files into browser memory 115. For example, browser application 110 can sequentially load each of a plurality of UI pages from a UI design file into computing device 100 based on selective input from the user selecting each corresponding UI page.

[0093] In some examples, a set of unloaded UI pages among multiple UI pages may include one or more dependencies on another UI page that has been incrementally loaded onto the user's computing device. In such an example, browser application 110 may receive change data from the user's computing device 100, where the change data corresponds to one or more edits made by the user to the UI pages. Based on this change data, network computer system 155 may propagate the changes to the set of unloaded UI pages before loading the set of unloaded UI pages onto the user's computing device 100.

[0094] refer to Figure 3B In process 350, in various examples, at box 352, the network computer system 155 can operate to provide instructions to the user computing device 110. In the example, the user computing device 100 executes the browser application 110 to receive instructions provided by the network computer system 155. The instructions enable the user computing device 100 to perform a set of operations, such as Figure 3A As described. In the example, the provided instructions may include instructions (e.g., scripts, etc.) that are transmitted to the browser application 110 of the user computing device 100 while the browser application 110 is running. As an addition or variation, the provided instructions may include instructions embedded in, for example, web resources that are accessed by the user computing device 100 and executed by their respective browser applications 110.

[0095] In box 354, the provided instructions are executed by the user computing device in conjunction with the collaborative services provided by the network computer system 155. Once executed by the user computing device 100, these instructions cause the computing device to perform operations according to, for example, process 300.

[0096] Network computer system Figure 4 A computer system on which one or more embodiments can be implemented is illustrated. Computer system 400 can be implemented, for example, on a server or a combination of servers. For example, computer system 400 can be implemented as... Figure 1A and Figure 1B Network computer systems 155 and 50.

[0097] In one implementation, computer system 400 includes processing resources 410, memory resources 420 (e.g., read-only memory (ROM) or random access memory (RAM)), one or more instruction memory resources 440, and a communication interface 450. Computer system 400 includes at least one processor 410 for processing information stored in memory resource 420, such as information provided by random access memory (RAM) or other dynamic storage devices, for storing information and instructions executable by processor 410. Memory resource 420 can also be used to store temporary variables or other intermediate information during the execution of instructions to be executed by processor 410.

[0098] Communication interface 450 enables computer system 400 to communicate with one or more user computing devices over one or more networks (e.g., cellular networks) via network link 480 (wireless or wired). Using network link 480, computer system 400 can communicate with one or more computing devices, dedicated devices and modules, and / or one or more servers.

[0099] In the example, memory resource 420 can store multiple instruction sets, including browser instruction set 422 and server instruction set 424. Processor 410 can execute the server instruction set 424 stored with memory resource 420 to enable the network computing system to implement a collaborative platform, and in situations such as... Figure 1A and Figure 1B The described example operates as network computer systems 155 and 50. Computer system 400 may also include additional memory resources (“instruction memory 440”) for storing executable instruction sets (“browser instructions 422”), such as those that can be embedded in a webpage or transmitted to browser application 110 to enable user computing devices to implement, for example, the functionality described throughout this disclosure. Browser instructions 422 can be transmitted to the computing devices of users on a collaborative platform to enable each computing device to implement example methods such as those described in Figure 3.

[0100] Thus, the examples described herein relate to the use of a computer system 400 for implementing the techniques described herein. According to one aspect, the techniques are implemented by the computer system 400 in response to processor 410 executing one or more sequences of instructions contained in memory resource 420. Such instructions may be read into memory 420 from another machine-readable medium. Execution of the sequence of instructions contained in memory resource 420 causes processor 410 to perform the process steps described herein. In alternative implementations, hardwired circuitry may be used in place of or in combination with software instructions to implement the examples described herein. Therefore, the described examples are not limited to any particular combination of hardware circuitry and software.

[0101] User computing devices Figure 5 A user computing device is illustrated in combination with one or more examples as described. In the examples, user computing device 500 may be used with, for example, reference... Figure 1A Corresponding to the user computing device 100 shown and described, it may include a smartphone, tablet computer, AR or VR headset, or other touchscreen-based personal computer with graphics processing capabilities suitable for rendering design interfaces and graphic design work.

[0102] In the example, computing device 500 includes a central or main processor 510, a graphics processing unit (GPU) 512, memory resources 520, and one or more communication ports 530. Computing device 500 can use the main processor 510 and memory resources 520 to store and launch collaborative applications. In some examples, a user can use communication port 530 to operate the application to access a web site of the collaborative platform, where one or more web pages or other web resources 505 of the collaborative platform can be downloaded. In some examples, web resources 505 may be stored in active memory 524 (cache).

[0103] As described in the various examples, processor 510 can detect and execute scripts and other logic embedded in web resource 505 to enable a collaborative canvas. In some examples, some scripts 515 embedded in web resource 505 may include GPU-accelerated logic executed directly by GPU 512.

[0104] The main processor 510 and GPU can be combined to render the design in progress on the display component 540 (e.g., a touch-sensitive display device). The rendered design interface may include web content from the web aspects of the hybrid application, as well as design interface content and functional elements generated by scripts and other logic embedded in web resources 505.

[0105] in conclusion Although examples have been described in detail herein with reference to the accompanying drawings, it should be understood that these concepts are not limited to those precise examples. Therefore, the scope of the concepts is intended to be defined by the following claims and their equivalents. Furthermore, it is conceivable that a particular feature described separately or as part of an example may be combined with other separately described features or as part of another example, even if the other features and examples do not mention that particular feature. Therefore, the lack of a description of a combination should not exclude rights to such combinations.

Claims

1. A computing device for implementing collaborative web services, the computing device comprising: One or more processors; as well as A memory storing browser application instructions that, when executed by the one or more processors, cause the computing device to perform the following operations: During a UI design session in which the user interacts with a user interface (UI) design file via a browser application, the browser application's browser memory usage is monitored; The browser application's browser memory usage exceeded a first memory threshold; and In response to detecting that the browser memory exceeds the first memory threshold, a menu of multiple UI pages of the UI design file is provided to the display component of the computing device, wherein each of the multiple UI pages presented in the menu includes a memory usage indicator.

2. The computing device of claim 1, wherein providing the menu includes presenting a prompt to archive one or more pages to reduce the browser memory usage below the first memory threshold.

3. The computing device of claim 2, wherein each of the plurality of UI pages in the menu includes a set of interactive functions, and wherein the operation further includes: Detect user selection of a specific UI page in the menu to archive that specific UI page; as well as Based on the user's choice, the specific UI page is archived by disabling the editing function of the specific UI page and deactivating the set of interactive functions of the specific UI page.

4. The computing device of claim 3, wherein the operation further comprises: Receive the user's input to cancel saving on the specific UI page; as well as Based on the user's input, the editing function is re-enabled and the group of interactive functions is reactivated on the specific UI page.

5. The computing device of claim 4, wherein the operation further comprises: In response to determining that the browser memory usage will remain below the first memory threshold, the editing function is re-enabled and the group of interactive functions is reactivated on the specific UI page.

6. The computing device of claim 1, wherein the operation further comprises: Based on monitoring the browser memory usage, it was detected that the browser application's browser memory usage exceeded a critical memory threshold; as well as If the browser memory usage of the browser application exceeds a critical memory threshold, a recovery mode is initiated on the browser application, which disables editing functions on the UI design file.

7. The computing device of claim 6, wherein the recovery mode enables the user to recover the UI design file to restore the browser memory to below the critical memory threshold.

8. The computing device of claim 6, wherein the recovery mode includes temporarily increasing memory allocation above the critical memory threshold to enable the user to perform one or more actions to reduce browser memory usage below the critical memory threshold.

9. The computing device of claim 8, wherein the one or more actions include archiving one or more UI design pages, deleting one or more UI design pages, or copying one or more UI design pages of the UI design file.

10. A non-transitory computer-readable medium storing instructions that, when executed by one or more processors of a computing device, cause the one or more processors to perform the following operations: During a UI design session in which a user interacts with a user interface (UI) design file via a browser application, the browser application's browser memory usage is monitored. The browser application's browser memory usage exceeded a first memory threshold. as well as In response to detecting that the browser memory exceeds the first memory threshold, a menu of multiple UI pages of the UI design file is provided to the display component of the computing device, wherein each of the multiple UI pages presented in the menu includes a memory usage indicator.

11. The non-transitory computer-readable medium of claim 10, wherein providing the menu includes presenting a prompt to archive one or more pages to reduce the browser memory usage below the first memory threshold.

12. The non-transitory computer-readable medium of claim 11, wherein each of the plurality of UI pages in the menu includes a set of interactive functions, and wherein the operation further includes: Detect user selection of a specific UI page in the menu to archive that specific UI page; as well as Based on the user's choice, the specific UI page is archived by disabling the editing function of the specific UI page and deactivating the set of interactive functions of the specific UI page.

13. The non-transitory computer-readable medium of claim 12, wherein the operation further comprises: Receive the user's input to cancel saving on the specific UI page; as well as Based on the user's input, the editing function is re-enabled and the group of interactive functions is reactivated on the specific UI page.

14. The non-transitory computer-readable medium of claim 13, wherein the operation further comprises: In response to determining that the browser memory usage will remain below the first memory threshold, the editing function is re-enabled and the group of interactive functions is reactivated on the specific UI page.

15. The non-transitory computer-readable medium of claim 10, wherein the operation further comprises: Based on monitoring the browser memory usage, it was detected that the browser application's browser memory usage exceeded a critical memory threshold; as well as If the browser memory usage of the browser application exceeds a critical memory threshold, a recovery mode is initiated on the browser application, which disables editing functions on the UI design file.

16. The non-transitory computer-readable medium of claim 15, wherein the recovery mode enables the user to recover the UI design file to restore the browser memory to below the critical memory threshold.

17. A computer-implemented method for preventing memory shortage, the method being performed by one or more processors of a computing device, and comprising: During a UI design session in which a user interacts with a user interface (UI) design file via a browser application, the browser application's browser memory usage is monitored. The browser application's browser memory usage exceeded a first memory threshold. as well as In response to detecting that the browser memory exceeds the first memory threshold, a menu of multiple UI pages of the UI design file is provided to the display component of the computing device, wherein each of the multiple UI pages presented in the menu includes a memory usage indicator.

18. The method of claim 17, wherein providing the menu includes presenting a prompt to archive one or more pages to reduce the browser memory usage below the first memory threshold.

19. The method of claim 18, wherein each of the plurality of UI pages in the menu includes a set of interactive functions, the method further comprising: Detect user selection of a specific UI page in the menu to archive that specific UI page; as well as Based on the user's choice, the specific UI page is archived by disabling the editing function of the specific UI page and deactivating the set of interactive functions of the specific UI page.

20. The method of claim 19, further comprising: Receive the user's input to cancel saving on the specific UI page; as well as Based on the user's input, the editing function is re-enabled and the group of interactive functions is reactivated on the specific UI page.

21. A networked computer system, comprising: One or more processors; The memory is used to store the first set of instructions and a set of instructions; The one or more processors execute the first set of instructions to provide the second set of instructions to the user's computing device, the second set of instructions causing the user's computing device to perform the following operations: During a UI design session in which a user interacts with a user interface (UI) design file via a browser application, the browser application's browser memory usage is monitored. The browser application's browser memory usage exceeded a first memory threshold; and In response to detecting that the browser memory exceeds the first memory threshold, a menu of multiple UI pages of the UI design file is provided to the display component of the computing device, wherein each of the multiple UI pages presented in the menu includes a memory usage indicator.

22. The network computer system of claim 21, wherein providing the menu includes presenting a prompt to archive one or more pages to reduce the browser memory usage below the first memory threshold.

23. The network computer system of claim 21, wherein each of the plurality of UI pages in the menu includes a set of interactive functions, and wherein the operation further includes: Detect user selection of a specific UI page in the menu to archive that specific UI page; as well as Based on the user's choice, the specific UI page is archived by disabling the editing function of the specific UI page and deactivating the set of interactive functions of the specific UI page.

24. The network computer system of claim 23, wherein the operation further comprises: Receive the user's input to cancel saving on the specific UI page; as well as Based on the user's input, the editing function is re-enabled and the group of interactive functions is reactivated on the specific UI page.

Images