Apparatus, method and graphical user interface for window manipulation and management

Abstract

The invention relates to devices, methods and graphical user interfaces for window manipulation and management. An electronic device is disclosed that pairs a first edge of a first window to a second edge of a second window when a user input corresponds to a movement of the first edge away from the second edge by less than an angular threshold from a predefined axis. Alternatively, depending on the type of user input, the device either resizes the window or moves one or more edges of the window to a corresponding edge of the display area while maintaining a respective one or more opposite edges of the first window. Alternatively, when the first window is displayed in a full screen mode, the device adds the second window as a new tab within a tab bar associated with the first window, and when the first window is displayed in a windowed mode, the device adds the second window within the display area independently of the first window.

Description

[0001] This application is a divisional application of invention patent application 201780036375.5, filed on June 1, 2017, entitled "Apparatus, Method and Graphical User Interface for Window Manipulation and Management". Technical Field

[0002] The present invention generally relates to electronic devices having a display and an input device, including but not limited to electronic devices having a display capable of window manipulation and management using the input device. Background Technology

[0003] The use of touch-sensitive surfaces as input devices for computers and other electronic computing devices has grown significantly in recent years. Examples of touch-sensitive surfaces include touchpads and touchscreen displays. These surfaces are widely used to manipulate user interface objects on the display.

[0004] Example manipulations include adjusting the position and / or size of one or more user interface objects, activating a button or opening a file / application represented by a user interface object, associating metadata with one or more user interface objects, or otherwise manipulating the user interface. Example user interface objects include digital images, videos, text, icons, control elements (such as buttons), and other graphics. In some cases, users will need to perform such manipulations on user interface objects from the following categories: file management applications (e.g., Finder from Apple Inc., Cupertino, California); image management applications (e.g., Aperture, iPhoto, Photos from Apple Inc., California); digital content (e.g., video and music) management applications (e.g., iTunes from Apple Inc., California); drawing applications; presentation applications (e.g., Keynote from Apple Inc., California); word processing applications (e.g., Pages from Apple Inc., California); website creation applications (e.g., iWeb from Apple Inc., California); disc editing applications (e.g., iDVD from Apple Inc., California); or spreadsheet applications (e.g., Numbers from Apple Inc., California).

[0005] However, the methods used to perform these manipulations are cumbersome and inefficient. For example, using a sequence of mouse-based inputs to select one or more user interface objects and perform one or more actions on the selected objects is monotonous and places a significant cognitive burden on the user. Furthermore, these methods take longer than necessary, thus wasting energy. This latter consideration is particularly important in battery-powered devices. Summary of the Invention

[0006] Therefore, there is a need for faster and more efficient methods and interfaces for window manipulation and management in electronic devices. Such methods and interfaces can optionally supplement or replace conventional methods for window manipulation and management. These methods and interfaces reduce the cognitive burden on users and result in more efficient human-machine interfaces. For battery-powered devices, such methods and interfaces can save power and increase the time between battery charges.

[0007] The disclosed device can reduce or eliminate the aforementioned defects and other problems associated with the user interface of electronic devices having touch-sensitive surfaces. In some embodiments, the device is a desktop computer. In some embodiments, the device is portable (e.g., a laptop, tablet, or handheld device). In some embodiments, the device has a touchpad. In some embodiments, the device has a touch-sensitive display (also referred to as a "touchscreen" or "touchscreen display"). In some embodiments, the device has a graphical user interface (GUI), one or more processors, memory, and one or more modules, and a program or set of instructions stored in memory for performing multiple functions. In some embodiments, the user interacts with the GUI primarily through stylus and / or finger contact and gestures on the touch-sensitive surface. In some embodiments, these functions optionally include image editing, drawing, presentation, word processing, web page creation, disk editing, spreadsheet creation, playing games, making and receiving phone calls, video conferencing, sending and receiving emails, instant messaging, fitness support, digital photography, digital video recording, web browsing, digital music playback, and / or digital video playback. Executable instructions for performing these functions are optionally included in a nontransitory computer-readable storage medium or other computer program product configured for execution by one or more processors.

[0008] According to some embodiments, a method is performed on a device having one or more processors, non-transitory memory, a display, and an input device. The method includes: displaying a first window and a second window on the display within a display area, the first window having a first edge parallel to a second edge of the second window; and detecting, via the input device, a first user input that moves the first edge of the first window toward the second edge of the second window. In response to detecting the first user input, and based on determining that the first user input satisfies one or more pairing criteria, the method includes: pairing the first edge of the first window to the second edge of the second window such that the first window stops moving in response to the first user input before overlapping with the second window, wherein the one or more pairing criteria include a first pairing criterion satisfied when the first input corresponds to movement of the first edge toward the second edge less than an angle threshold from a predefined axis. In response to detecting the first user input, and based on determining that the first user input does not satisfy one or more pairing criteria, the method further includes: continuing movement of the first window based on the first user input such that the first window at least partially overlaps with the second window.

[0009] According to some embodiments, a method is performed on a device having one or more processors, non-transitory memory, a display, and an input device. The method includes: displaying a first window on the display in a display area; and detecting first user input associated with one or more edges of the first window via the input device. In response to detecting the first user input, and based on determining that the first user input corresponds to a first input type, the method further includes: resizing one or more scales of the first window corresponding to one or more edges of the first window based on a movement vector associated with the first user input. In response to detecting the first user input, and based on determining that the first user input corresponds to a second input type, the method further includes: moving one or more edges of the first window to one or more corresponding edges of the display area while maintaining corresponding one or more opposite edges of the first window.

[0010] According to some embodiments, a method is performed on a device having one or more processors, non-transitory memory, a display, and an input device. The method includes: displaying a first window associated with a first application on the display within a display area; and detecting first user input via the input device, the first user input corresponding to a request to add a second window associated with the first application. In response to detecting the first user input, and based on determining that the first window is displayed in the display area in full-screen mode, the method further includes: adding a second window as a new tab within a tab bar associated with the first window. In response to detecting the first user input, and based on determining that the first window is displayed in the display area in windowed mode, the method further includes: displaying a second window separate from the first window within the display area.

[0011] According to some embodiments, an electronic device includes a display unit configured to display a user interface; one or more input units configured to receive user input; and a processing unit coupled to the display unit and the one or more input units. The processing unit is configured to: enable the display of a first window and a second window on the display unit within a display area, the first window having a first edge parallel to a second edge of the second window; and detect a first user input via the one or more input units that moves the first edge of the first window toward the second edge of the second window. In response to detecting the first user input, and based on determining that the first user input satisfies one or more pairing criteria, the processing unit is further configured to: pair the first edge of the first window to the second edge of the second window, such that the first window stops moving in response to the first user input before overlapping with the second window, wherein the one or more pairing criteria include a first pairing criterion satisfied when the first input corresponds to movement of the first edge toward the second edge less than an angle threshold from a predefined axis. In response to detecting the first user input, and based on determining that the first user input does not satisfy one or more pairing criteria, the processing unit is further configured to: continue moving the first window based on the first user input, such that the first window at least partially overlaps with the second window.

[0012] According to some embodiments, an electronic device includes a display unit configured to display a user interface; one or more input units configured to receive user input; and a processing unit coupled to the display unit and the one or more input units. The processing unit is configured to: enable the display of a first window on the display unit within a display area; and detect first user input associated with one or more edges of the first window via the one or more input units. In response to detecting the first user input, and based on determining that the first user input corresponds to a first input type, the processing unit is further configured to: reset the size of one or more scales of the first window corresponding to one or more edges of the first window based on a movement vector associated with the first user input. In response to detecting the first user input, and based on determining that the first user input corresponds to a second input type, the processing unit is further configured to: move one or more edges of the first window to one or more corresponding edges of the display area, while maintaining the corresponding one or more opposite edges of the first window.

[0013] According to some embodiments, an electronic device includes a display unit configured to display a user interface; one or more input units configured to receive user input; and a processing unit coupled to the display unit and the one or more input units. The processing unit is configured to: enable the display of a first window associated with a first application on the display unit in a display area; and detect first user input via the one or more input units, the first user input corresponding to a request to add a second window associated with the first application. In response to detecting the first user input, and based on determining that the first window is displayed in the display area in full-screen mode, the processing unit is further configured to: add a second window as a new tab within a tab bar associated with the first window. In response to detecting the first user input, and based on determining that the first window is displayed in the display area in windowed mode, the processing unit is further configured to: display a second window separate from the first window in the display area.

[0014] According to some embodiments, an electronic device includes a display, an input device, one or more processors, non-transitory memory, and one or more programs; the one or more programs are stored in the non-transitory memory and configured to be executed by the one or more processors, and the one or more programs include instructions for performing or causing to perform any of the methods described herein. According to some embodiments, a non-transitory computer-readable storage medium stores instructions therein that, when executed by one or more processors of an electronic device having a display and an input device, cause the device to perform or cause to perform any of the methods described herein. According to some embodiments, a graphical user interface on an electronic device includes one or more elements displayed in any of the methods described above, wherein the electronic device has a display, an input device, memory, and one or more processors for performing one or more programs stored in non-transitory memory, the one or more elements being updated in response to input, as described in any of the methods described herein. According to some embodiments, an electronic device includes: a display, an input device; and means for performing or causing to perform any of the methods described herein. According to some embodiments, an information processing device for an electronic device having a display and an input device includes means for performing or causing to perform any of the methods described herein.

[0015] Therefore, electronic devices with displays, touch-sensitive surfaces, and optionally one or more sensors for detecting the intensity of contact with the touch-sensitive surfaces are provided with faster and more efficient methods and interfaces for window manipulation and management, thereby increasing the utility, efficiency, and user satisfaction of such devices. Such methods and interfaces can complement or replace conventional methods for window manipulation and management. Attached Figure Description

[0016] To better understand the various embodiments described, reference should be made to the following detailed description in conjunction with the accompanying drawings, wherein similar reference numerals indicate corresponding parts in all the drawings.

[0017] Figure 1A This is a block diagram illustrating a portable multi-functional device with a touch-sensitive display according to some embodiments.

[0018] Figure 1B This is a block diagram showing example components used for event handling according to some implementation schemes.

[0019] Figure 2 A portable multi-functional device with a touchscreen is shown according to some embodiments.

[0020] Figure 3 This is a block diagram of an example multifunctional device having a display and a touch-sensitive surface according to some implementation schemes.

[0021] Figure 4A An example user interface for an application menu on a portable multifunction device according to some implementation schemes is shown.

[0022] Figure 4B An example user interface is shown according to some implementations for a multifunctional device having a touch-sensitive surface separate from the display.

[0023] Figure 5A-Figure 5MMM An example user interface for pairing window edges is shown according to some implementation schemes.

[0024] Figures 6A-6Y An example user interface for resizing a window is shown according to some implementation schemes.

[0025] Figures 7A-7R This illustrates an example user interface for providing tabbed window functionality according to some implementation schemes.

[0026] Figures 8A-8E A flowchart is shown illustrating a method for pairing window edges according to some implementation schemes.

[0027] Figures 9A-9D A flowchart is shown illustrating a method for resizing a window according to some implementation schemes.

[0028] Figures 10A-10C A flowchart is shown illustrating a method for providing tabbed window functionality according to some implementation schemes.

[0029] Figures 11-13 It is a functional block diagram of an electronic device according to some implementation schemes. Detailed Implementation

[0030] In recent years, electronic devices with touch-based user interfaces have become increasingly popular (e.g., devices such as those from Apple Inc. (Cupertino, California)). iPod and The number of devices has increased significantly. These devices use touch-sensitive surfaces, such as touchscreen displays or touchpads, as the primary input for manipulating user interface objects on the display and / or controlling the device. These devices may also have contact strength sensors for determining the force or pressure of contact with the touch-sensitive surface.

[0031] The following describes devices and methods capable of pairing window edges. In some embodiments, the first and second edges are paired such that the windows do not overlap when the movement of a first edge of a first window toward a second edge of a second window satisfies a pairing criterion. In some embodiments, after edge pairing, the windows exhibit “sticky” behavior. Thus, according to some embodiments, a user can slide windows parallel to each other while the edges remain paired.

[0032] The following describes devices and methods capable of resizing a window. In some embodiments, a stationary input (e.g., a double-click) at the edge of the window causes the edge of the window to move to the corresponding edge of the display area. Thus, the window's scale expands in one direction, while the other edges of the window remain in their positions. In some embodiments, a stationary input (e.g., a double-click) at a corner of the window causes the edge intersecting the window to move to the corresponding edge of the display area. Thus, a first scale of the window expands in a first direction, and a second scale of the window expands in a second direction, while the other edges of the window remain in their positions.

[0033] The following describes devices and methods for providing tabbed window functionality. In some embodiments, the operating system provides tabbed window functionality for applications that do not have their own tabbed functionality. In some embodiments, when tab functionality is active, open windows are resized to the same size and stacked on top of each other, such that a foreground window is displayed on top of the stack. According to some embodiments, tabs corresponding to each window in the stack are displayed in a virtual tab bar superimposed on the top window of the stack by the operating system. For example, if another tab is selected in the tab bar, the window associated with the selected tab is moved to the top of the window stack. In some embodiments, the application is unaware that its windows are being displayed in a single tabbed window. According to some embodiments, the application is able to operate relative to windows as normally would, treating them as if they had just been stacked on top of each other.

[0034] under, Figures 1A-1B , Figures 2-3 as well as Figures 4A-4B A description of the example device is provided. Figure 5A-Figure 5MMM , Figures 6A-6Y and Figures 7A-7R An example user interface for window manipulation and management is shown. Figures 8A-8E A flowchart illustrating the method for pairing window edges is shown. Figures 9A-9D A flowchart illustrating a method for resizing a window is shown. Figures 10A-10C A flowchart illustrating a method for providing tabbed window functionality is shown. Figure 5A-Figure 5MMM , Figures 6A-6Y as well as Figures 7A-7RThe user interface in the document is used to show Figures 8A-8E , Figures 9A-9D and Figures 10A-10C The process in.

[0035] Example device

[0036] Reference will now be made in detail to the embodiments, examples of which are illustrated in the accompanying drawings. Numerous specific details are shown in the following detailed description in order to provide a full understanding of the various described embodiments. However, it will be apparent to those skilled in the art that the various described embodiments can be practiced without these specific details. In other instances, well-known methods, processes, components, circuits, and networks are not described in detail so as not to unnecessarily obscure the various aspects of the embodiments.

[0037] It will also be understood that, although in some cases the terms “first,” “second,” etc., are used herein to describe various elements, these elements should not be limited by these terms. These terms are only used to distinguish one element from another. For example, a first contact may be referred to as a second contact, and similarly, a second contact may be referred to as a first contact, without departing from the scope of the various described embodiments. Both the first contact and the second contact are contacts, but they are not the same contact unless the context clearly indicates otherwise.

[0038] The terminology used in the description of the various embodiments herein is for the purpose of describing particular embodiments only and is not intended to be limiting. As used in the description of the various embodiments and the appended claims, the singular forms “a” and “the” are intended to include the plural forms as well, unless the context clearly indicates otherwise. It will also be understood that the term “and / or” as used herein refers to and covers any and all possible combinations of one or more of the associated listed items. It will also be understood that the terms “includes”, “including”, “comprises”, and / or “comprising”, when used in this specification, specify the presence of the stated features, integers, steps, operations, elements, and / or components, but do not exclude the presence or addition of one or more other features, integers, steps, operations, elements, components, and / or groups thereof.

[0039] As used herein, depending on the context, the term “if” is optionally interpreted as meaning “when” or “upon” or “in response to determination” or “in response to detection”. Similarly, depending on the context, the phrase “if determination…” or “if detection [the stated condition or event]” is optionally interpreted as meaning “in response to determination…” or “in response to detection [the stated condition or event]” or “in response to detection [the stated condition or event]”.

[0040] This document describes implementations of electronic devices, user interfaces for such devices, and related processes for using such devices. In some implementations, the device is a portable communication device, such as a mobile phone, that also includes other functions such as PDA and / or music player functionality. Example implementations of portable multi-functional devices include, but are not limited to, those from Apple Inc. (Cupertino, California). iPod and Device. Optionally, other portable electronic devices may be used, such as laptops or tablets with touch-sensitive surfaces (e.g., touchscreen displays and / or touchpads). It should also be understood that in some embodiments, the device is not a portable communication device, but a desktop computer with touch-sensitive surfaces (e.g., touchscreen displays and / or touchpads).

[0041] The following discussion describes an electronic device that includes a display and a touch-sensitive surface. However, it should be understood that the electronic device may optionally include one or more other physical user interface devices, such as a physical keyboard, mouse, and / or joystick.

[0042] The device typically supports a variety of applications, such as one or more of the following: drawing applications, presentation applications, word processing applications, website creation applications, disk editing applications, spreadsheet applications, game applications, phone applications, video conferencing applications, email applications, instant messaging applications, fitness support applications, photo management applications, digital camera applications, digital video camcorder applications, web browsing applications, digital music player applications, and / or digital video player applications.

[0043] Various applications running on the device optionally use at least one common physical user interface device, such as a touch-sensitive surface. One or more functions of the touch-sensitive surface and the corresponding information displayed on the device are optionally adjusted and / or varied for different applications, and / or adjusted and / or varied within the respective applications. In this way, the device's common physical architecture (such as the touch-sensitive surface) optionally utilizes a user interface that is intuitive and clear to the user to support various applications.

[0044] Now let’s turn our attention to implementation schemes for portable devices with touch-sensitive displays. Figure 1A This is a block diagram illustrating a portable multi-functional device 100 having a touch-sensitive display system 112 according to some embodiments. The touch-sensitive display system 112 is sometimes referred to as a “touchscreen” for convenience, and sometimes simply as a touch-sensitive display. Device 100 includes a memory 102 (which optionally includes one or more computer-readable storage media), a memory controller 122, one or more processing units (CPUs) 120, a peripheral interface 118, RF circuitry 108, audio circuitry 110, a speaker 111, a microphone 113, an input / output (I / O) subsystem 106, other input or control devices 116, and an external port 124. Device 100 optionally includes one or more optical sensors 164. Device 100 optionally includes one or more intensity sensors 165 for detecting the intensity of contact on device 100 (e.g., a touch-sensitive surface, such as the touch-sensitive display system 112 of device 100). Device 100 optionally includes one or more haptic output generators 163 for generating haptic output on device 100 (e.g., generating haptic output on a touch-sensitive surface such as the touch-sensitive display system 112 of device 100 or the touchpad 355 of device 300). These components optionally communicate via one or more communication buses or signal lines 103.

[0045] As used in this specification and claims, the term "haptic output" refers to a physical displacement of the device relative to a previous position of the device, a physical displacement of a component of the device (e.g., a touch-sensitive surface) relative to another component of the device (e.g., the housing), or a displacement of a component relative to the center of mass of the device, which is detected by the user using the user's tactile sense. For example, when the device or a component of the device comes into contact with a touch-sensitive surface (e.g., a finger, palm, or other part of the user's hand), the haptic output generated by the physical displacement will be interpreted by the user as a tactile sensation corresponding to a perceived change in the physical characteristics of the device or a component of the device. For example, movement of a touch-sensitive surface (e.g., a touch-sensitive display or touchpad) may optionally be interpreted by the user as a "press-click" or "release-click" on a physically actuated button. In some cases, the user will feel a tactile sensation, such as a "press-click" or "release-click," even when a physically actuated button associated with a touch-sensitive surface that has been physically pressed (e.g., displaced) by the user's movement does not move. For example, even when the smoothness of the tactile surface remains unchanged, the movement of the tactile surface can optionally be interpreted or sensed by the user as the "roughness" of the tactile surface. While such interpretations of touch by users will be limited by the individualized sensory perceptions of the user, many sensory perceptions of touch are common to most users. Therefore, when a tactile output is described as corresponding to a specific sensory perception of a user (e.g., "press click", "release click", "roughness"), unless otherwise stated, the generated tactile output corresponds to a physical displacement of the device or its components that will generate the sensory perception of a typical (or ordinary) user.

[0046] It should be understood that device 100 is merely an example of a portable multifunctional device, and device 100 may optionally have more or fewer components than those shown, may optionally combine two or more components, or may optionally have different configurations or arrangements of these components. Figure 1A The various components shown are implemented in hardware, software, firmware, or any combination thereof (including one or more signal processing circuits and / or application-specific integrated circuits).

[0047] Memory 102 optionally includes high-speed random access memory and also optionally includes non-volatile memory, such as one or more disk storage devices, flash memory devices, or other non-volatile solid-state memory devices. Access to memory 102 by other components of device 100 (such as one or more CPUs 120 and peripheral interface 118) is optionally controlled by memory controller 122.

[0048] Peripheral interface 118 can be used to couple the device's input peripherals and output peripherals to memory 102 and one or more CPUs 120. One or more processors 120 run or execute various software programs and / or instruction sets stored in memory 102 to perform various functions of device 100 and process data.

[0049] In some implementations, the peripheral interface 118, one or more CPUs 120, and memory controller 122 are optionally implemented on a single chip, such as chip 104. In other implementations, they are optionally implemented on separate chips.

[0050] RF (Radio Frequency) circuit 108 receives and transmits RF signals, also known as electromagnetic signals. RF circuit 108 converts electrical signals into electromagnetic signals and vice versa, and communicates with communication networks and other communication devices via these electromagnetic signals. RF circuit 108 optionally includes well-known circuitry for performing these functions, including but not limited to antenna systems, RF transceivers, one or more amplifiers, tuners, one or more oscillators, digital signal processors, codec chipsets, Subscriber Identity Module (SIM) cards, memory, etc. RF circuit 108 optionally communicates wirelessly with networks and other devices, such as the Internet (also known as the World Wide Web (WWW)), intranets, and / or wireless networks (such as cellular telephone networks, wireless local area networks (LANs), and / or metropolitan area networks (MANs)). This wireless communication may optionally use any of a variety of communication standards, protocols, and technologies, including but not limited to Global System for Mobile Communications (GSM), Enhanced Data GSM Environment (EDGE), High-Speed ​​Downlink Packet Access (HSDPA), High-Speed ​​Uplink Packet Access (HSUPA), Evolved Pure Data (EV-DO), HSPA, HSPA+, Dual-Unit HSPA (DC-HSPDA), Long Term Evolution (LTE), Near Field Communication (NFC), Wideband Code Division Multiple Access (W-CDMA), Code Division Multiple Access (CDMA), Time Division Multiple Access (TDMA), Bluetooth, and Wi-Fi (e.g., IEEE 802.11a, IEEE 802.11ac, IEEE 802.11ax, IEEE 802.11b, IEEE...). 802.11g and / or IEEE 802.11n), Voice over Internet Protocol (VoIP), Wi-MAX, email protocols (e.g., Internet Messaging Access Protocol (IMAP) and / or Post Office Protocol (POP)), instant messaging (e.g., Extensible Messaging and Presence Protocol (XMPP), Session Initiation Protocol for Instant Messaging and Presence with Extended Utility (SIMPLE), Instant Messaging and Presence Service (IMPS), and / or Short Message Service (SMS)), or any other suitable communication protocol including those not yet developed as of the date of this document submission.

[0051] Audio circuitry 110, speaker 111, and microphone 113 provide an audio interface between the user and device 100. Audio circuitry 110 receives audio data from peripheral interface 118, converts the audio data into electrical signals, and transmits the electrical signals to speaker 111. Speaker 111 converts the electrical signals into sound waves audible to the human ear. Audio circuitry 110 also receives electrical signals converted from sound waves by microphone 113. Audio circuitry 110 converts the electrical signals into audio data and transmits the audio data to peripheral interface 118 for processing. Audio data is optionally retrieved by peripheral interface 118 from and / or transmitted to memory 102 and / or RF circuitry 108. In some embodiments, audio circuitry 110 also includes a headset jack (e.g., ...). Figure 2 (212 in the text). The headset jack provides an interface between the audio circuitry 110 and a removable audio input / output peripheral device, such as an output-only headphone or a headset with both output (e.g., a single-ear or dual-ear headphone) and input (e.g., a microphone).

[0052] I / O subsystem 106 couples input / output peripherals on device 100, such as touch-sensitive display system 112 and other input or control devices 116, to peripheral interface 118. I / O subsystem 106 optionally includes display controller 156, optical sensor controller 158, intensity sensor controller 159, haptic feedback controller 161, and one or more input controllers 160 for other input or control devices. The one or more input controllers 160 receive electrical signals from / send electrical signals to other input or control devices 116. Other input control devices 116 optionally include physical buttons (e.g., push-buttons, rocker buttons, etc.), dial pads, slide switches, joysticks, click wheels, etc. In some alternative embodiments, one or more input controllers 160 are optionally coupled to (or not coupled to) any of the following: keyboard, infrared port, USB port, stylus, and / or pointing device such as mouse. One or more buttons (e.g., Figure 2 Optionally, 208) includes an up / down button for volume control of speaker 111 and / or microphone 113. One or more buttons optionally include a push-down button (e.g., Figure 2 (206 in the middle).

[0053] The touch-sensitive display system 112 provides input and output interfaces between the device and the user. The display controller 156 receives electrical signals from and / or sends electrical signals to the touch-sensitive display system 112. The touch-sensitive display system 112 displays visual output to the user. The visual output optionally includes graphics, text, icons, video, and any combination thereof (collectively, "graphics"). In some embodiments, some or all of the visual output corresponds to user interface objects.

[0054] The touch-sensitive display system 112 has a touch-sensitive surface, sensor, or sensor array that accepts input from a user based on tactile / haptic contact. The touch-sensitive display system 112 and the display controller 156 (along with any associated modules and / or instruction sets in memory 102) detect contact on the touch-sensitive display system 112 (and any movement or interruption of that contact) and translate the detected contact into interaction with user interface objects (e.g., one or more soft keys, icons, web pages, or images) displayed on the touch-sensitive display system 112. In one example embodiment, the point of contact between the touch-sensitive display system 112 and the user corresponds to the user's finger or stylus.

[0055] The touch-sensitive display system 112 optionally employs LCD (Liquid Crystal Display) technology, LPD (Light Emitting Polymer Display) technology, or LED (Light Emitting Diode) technology, but other display technologies are used in other embodiments. The touch-sensitive display system 112 and display controller 156 optionally employ any of a variety of touch sensing technologies now known or to be developed thereafter, along with other proximity sensor arrays or other elements for determining one or more points of contact with the touch-sensitive display system 112, to detect contact and any movement or interruption thereof. These various touch sensing technologies include, but are not limited to, capacitive, resistive, infrared, and surface acoustic wave technologies. In one example embodiment, projected mutual capacitance sensing technology, such as that from Apple Inc. (Cupertino, California), is used. iPod and The technology discovered in [the text].

[0056] The touch-sensitive display system 112 optionally has a video resolution exceeding 100 dpi. In some embodiments, the touchscreen video resolution exceeds 400 dpi (e.g., 500 dpi, 800 dpi, or greater). Users optionally use any suitable object or accessory such as a stylus, finger, etc., to interact with the touch-sensitive display system 112. In some embodiments, the user interface is designed to work with finger-based touch and gestures, which may be less precise than stylus-based input due to the larger contact area of ​​a finger on the touchscreen. In some embodiments, the device translates coarse finger-based input into precise pointer / cursor positions or commands to perform the user-desired actions.

[0057] In some embodiments, in addition to the touchscreen, device 100 optionally includes a touchpad (not shown) for activating or deactivating specific functions. In some embodiments, the touchpad is a touch-sensitive area of ​​the device that, unlike the touchscreen, does not display visual output. The touchpad is optionally a touch-sensitive surface separate from the touch-sensitive display system 112, or an extension of the touch-sensitive surface formed by the touchscreen.

[0058] The device 100 also includes a power system 162 for supplying power to various components. The power system 162 optionally includes a power management system, one or more power sources (e.g., batteries, alternating current (AC)), a recharging system, a power fault detection circuit, a power converter or inverter, a power status indicator (e.g., light-emitting diodes (LEDs)), and any other components associated with the generation, management, and distribution of power in the portable device.

[0059] The device 100 may optionally also include one or more optical sensors 164. Figure 1A An optical sensor coupled to an optical sensor controller 158 in I / O subsystem 106 is shown. One or more optical sensors 164 optionally include charge-coupled devices (CCDs) or complementary metal-oxide-semiconductor (CMOS) phototransistors. The one or more optical sensors 164 receive light projected through one or more lenses from the environment and convert the light into data representing an image. In conjunction with imaging module 143 (also referred to as a camera module), the one or more optical sensors 164 optionally capture still images and / or video. In some embodiments, the optical sensor is located on the rear of device 100, opposite to the touch-sensitive display system 112 on the front of the device, enabling the touchscreen to be used as a viewfinder for still image and / or video image acquisition. In some embodiments, another optical sensor is located on the front of the device to acquire images of the user (e.g., for selfies, for video conferencing while the user views other video conference participants on the touchscreen, etc.).

[0060] The device 100 may optionally also include one or more contact strength sensors 165. Figure 1A A contact strength sensor coupled to a strength sensor controller 159 in I / O subsystem 106 is shown. The contact strength sensor 165 optionally includes one or more piezoresistive strain gauges, capacitive force sensors, electro-force sensors, piezoelectric sensors, optical force sensors, capacitive touch-sensitive surfaces, or other strength sensors (e.g., sensors for measuring the force (or pressure) of contact on a touch-sensitive surface). One or more contact strength sensors 165 receive contact strength information (e.g., pressure information or substitutes for pressure information) from the environment. In some embodiments, at least one contact strength sensor is arranged juxtaposed with or adjacent to a touch-sensitive surface (e.g., touch-sensitive display system 112). In some embodiments, at least one contact strength sensor is located on the rear of device 100, opposite to the touch-sensitive display system 112 located on the front of device 100.

[0061] The device 100 optionally also includes one or more proximity sensors 166. Figure 1A A proximity sensor 166 coupled to a peripheral device interface 118 is shown. Alternatively, the proximity sensor 166 is coupled to an input controller 160 in an I / O subsystem 106. In some embodiments, the proximity sensor turns off and disables the touch-sensitive display system 112 when the multifunction device is placed near the user's ear (e.g., when the user is making a phone call).

[0062] The device 100 may optionally also include one or more tactile output generators 163. Figure 1A A haptic output generator coupled to a haptic feedback controller 161 in I / O subsystem 106 is shown. One or more haptic output generators 163 optionally include one or more electroacoustic devices such as speakers or other audio components; and / or electromechanical devices for converting energy into linear motion, such as motors, solenoids, electroactive polymerizers, piezoelectric actuators, electrostatic actuators, or other haptic output generating components (e.g., components for converting electrical signals into haptic outputs on the device). The haptic output generator 163 receives haptic feedback generation instructions from haptic feedback module 133 and generates a haptic output on device 100 that can be felt by a user of device 100. In some embodiments, at least one haptic output generator is juxtaposed or adjacent to a haptic surface (e.g., haptic display system 112) and optionally generates the haptic output by moving the haptic surface vertically (e.g., in / outward from the surface of device 100) or laterally (e.g., backward and forward in the same plane as the surface of device 100). In some embodiments, at least one tactile output generator sensor is located on the rear of the device 100 opposite to the touch-sensitive display system 112 located on the front of the device 100.

[0063] The device 100 may optionally also include one or more accelerometers 167, gyroscopes 168 and / or magnetometers 169 (e.g., as part of an inertial measurement unit (IMU)) for obtaining information about the device’s position (e.g., attitude). Figure 1A Sensors 167, 168, and 169, coupled to peripheral interface 118, are shown. Alternatively, sensors 167, 168, and 169 may be coupled to input controller 160 in I / O subsystem 106. In some embodiments, information is displayed on a touchscreen display in portrait or landscape view based on analysis of data received from the one or more accelerometers. Device 100 may optionally include a GPS (or GLONASS or other global navigation system) receiver (not shown) for acquiring information about the location of device 100.

[0064] In some embodiments, the software components stored in memory 102 include an operating system 126, a communication module (or instruction set) 128, a touch / motion module (or instruction set) 130, a graphics module (or instruction set) 132, a haptic feedback module (or instruction set) 133, a text input module (or instruction set) 134, a Global Positioning System (GPS) module (or instruction set) 135, and an application program (or instruction set) 136. Furthermore, in some embodiments, memory 102 stores device / global internal state 157, as shown in Figures 1A and 1B. Figure 3 As shown in the diagram, the device / global internal state 157 includes one or more of the following: active application state, which indicates which applications (if any) are currently active; display state, which indicates what applications, views or other information occupy the various areas of the touch-sensitive display system 112; sensor state, including information obtained from the various sensors of the device and other input or control devices 116; and position and / or orientation information about the position and / or orientation of the device.

[0065] Operating system 126 (e.g., iOS, Darwin, RTXC, LINUX, UNIX, OS X, WINDOWS, or embedded operating systems such as VxWorks) includes various software components and / or drivers for controlling and managing general system tasks (e.g., memory management, storage device control, power management, etc.) and facilitates communication between various hardware and software components.

[0066] The communication module 128 facilitates communication with other devices via one or more external ports 124, and also includes various software components for processing data received by the RF circuitry 108 and / or the external ports 124. The external ports 124 (e.g., Universal Serial Bus (USB), FireWire, etc.) are adapted to be directly coupled to other devices or indirectly coupled via a network (e.g., the Internet, Wireless LAN, etc.). In some embodiments, the external ports are associated with Apple Inc. (Cupertino, California). iPod and The device uses the same or similar and / or compatible multi-pin (e.g., 30-pin) connectors as the 30-pin connector used in the device. In some implementations, the external port is compatible with some Apple Inc. (Cupertino, California) connectors. iPod and The device uses the same or similar and / or compatible Lightning connectors.

[0067] The contact / motion module 130 optionally detects contact with the touch-sensitive display system 112 (in conjunction with the display controller 156) and other touch-sensitive devices (e.g., a touchpad or physical click wheel). The contact / motion module 130 includes software components for performing various operations related to the detection of contact (e.g., by a finger or by a stylus), such as determining whether a contact has occurred (e.g., detecting a finger press event), determining the intensity of the contact (e.g., the force or pressure of the contact, or an alternative to force or pressure), determining whether there is movement of the contact and tracking movement on the touch-sensitive surface (e.g., detecting one or more finger drag events), and determining whether the contact has stopped (e.g., detecting a finger lift event or a break in contact). The contact / motion module 130 receives contact data from the touch-sensitive surface. Determining the movement of the contact point optionally includes determining the rate (magnitude), velocity (magnitude and direction), and / or acceleration (change in magnitude and / or direction) of the contact point, the movement of which is represented by a series of contact data. These operations can optionally be applied to single-point contact (e.g., single-finger contact or stylus contact) or multi-point simultaneous contact (e.g., "multi-touch" / multi-finger contact and / or stylus contact). In some embodiments, the contact / motion module 130 and the display controller 156 detect contact on the touchpad.

[0068] The contact / motion module 130 optionally detects user gesture input. Different gestures on a touch-sensitive surface have different contact patterns (e.g., different movements, timings, and / or intensities of the detected contact). Therefore, gestures are optionally detected by detecting specific contact patterns. For example, detecting a single-finger tap gesture includes detecting a finger press event, and then detecting a finger lift-off (lift-away) event at the same (or substantially the same) location as the finger press event (e.g., at the icon location). As another example, detecting a finger swipe gesture on a touch-sensitive surface includes detecting a finger press event, then detecting one or more finger drag events, and subsequently detecting a finger lift-off (lift-away) event. Similarly, stylus taps, swipes, drags, and other gestures are optionally detected by detecting specific contact patterns of the stylus.

[0069] The graphics module 132 includes various known software components for rendering and displaying graphics on the touch-sensitive display system 112 or other displays, including components for altering the visual impact of the displayed graphics (e.g., brightness, transparency, saturation, contrast, or other visual properties). As used herein, the term "graphics" includes any object that can be displayed to a user, and non-limitingly includes text, web pages, icons (such as user interface objects including soft keys), digital images, videos, animations, etc.

[0070] In some implementations, the graphics module 132 stores data for representing graphics to be used. Each graphic is optionally assigned a corresponding code. The graphics module 132 receives one or more codes from applications, etc., specifying the graphic to be displayed, and also receives coordinate data and other graphic attribute data if necessary, and then generates screen image data for output to the display controller 156.

[0071] The haptic feedback module 133 includes various software components for generating instructions that are used by one or more haptic output generators 163 to produce haptic output at one or more locations on the device 100 in response to user interaction with the device 100.

[0072] Optionally, the text input module 134, a component of the graphics module 132, provides a soft keyboard for entering text in various applications (e.g., contacts 137, email 140, IM 141, browser 147, and any other application that requires text input).

[0073] GPS module 135 determines the location of the device and provides this information for use in various applications (e.g., to a phone 138 for location-based dialing; to a camera 143 as image / video metadata; and to applications that provide location-based services such as weather desktop apps, local yellow pages desktop apps, and map / navigation desktop apps).

[0074] Application 136 optionally includes the following modules (or instruction sets) or subsets or supersets thereof:

[0075] • Contacts module 137 (sometimes called address book or contact list);

[0076] • Telephone module 138;

[0077] • Video conferencing module 139;

[0078] • Email client module 140;

[0079] • Instant Messaging (IM) module 141;

[0080] Fitness support module 142;

[0081] • Camera module 143 for still images and / or video images;

[0082] • Image management module 144;

[0083] • Browser module 147;

[0084] • Calendar module 148;

[0085] • Desktop mini-program module 149, which optionally includes one or more of the following: weather desktop mini-program 149-1, stock market desktop mini-program 149-2, calculator desktop mini-program 149-3, alarm clock desktop mini-program 149-4, dictionary desktop mini-program 149-5 and other desktop mini-programs obtained by the user, and desktop mini-programs created by the user 149-6;

[0086] • Desktop app creator module 150 for creating user-created desktop apps 149-6;

[0087] • Search module 151;

[0088] • Video and music player module 152, optionally composed of a video player module and a music player module;

[0089] • Notepad module 153;

[0090] • Map module 154; and / or

[0091] • Online video module 155.

[0092] Examples of other applications 136 optionally stored in memory 102 include other word processing applications, other image editing applications, drawing applications, presentation applications, JAVA-enabled applications, encryption, digital rights management, speech recognition, and speech duplication.

[0093] In conjunction with the touch-sensitive display system 112, display controller 156, contact module 130, graphics module 132, and text input module 134, the contact module 137 includes executable instructions for managing an address book or contact list (e.g., in the application internal state 192 of the contact module 137 stored in memory 102 or memory 370), including: adding names to the address book; deleting names from the address book; associating phone numbers, email addresses, physical addresses, or other information with names; associating images with names; categorizing and classifying names; providing phone numbers and / or email addresses to initiate and / or facilitate communication via telephone 138, video conferencing 139, email 140, or instant messaging 141; and so on.

[0094] Combining RF circuitry 108, audio circuitry 110, speaker 111, microphone 113, touch-sensitive display system 112, display controller 156, contact module 130, graphics module 132, and text input module 134, telephone module 138 includes executable instructions for performing the following operations: inputting a character sequence corresponding to a telephone number, accessing one or more telephone numbers in the address book 137, modifying an input telephone number, dialing a corresponding telephone number, initiating a conversation, and disconnecting or hanging up when the conversation is complete. As described above, wireless communication optionally employs any of a variety of communication standards, protocols, and technologies.

[0095] Combining RF circuitry 108, audio circuitry 110, speaker 111, microphone 113, touch-sensitive display system 112, display controller 156, one or more optical sensors 164, optical sensor controller 158, contact module 130, graphics module 132, text input module 134, contact list 137, and telephone module 138, video conferencing module 139 includes executable instructions to initiate, conduct, and terminate video conferences between the user and one or more other participants based on user instructions.

[0096] Incorporating RF circuitry 108, touch-sensitive display system 112, display controller 156, contact module 130, graphics module 132, and text input module 134, email client module 140 includes executable instructions for creating, sending, receiving, and managing emails in response to user commands. Combined with image management module 144, email client module 140 makes it very easy to create and send emails containing still images or video images captured by camera module 143.

[0097] In conjunction with RF circuitry 108, touch-sensitive display system 112, display controller 156, contact module 130, graphics module 132, and text input module 134, instant messaging module 141 includes executable instructions for performing the following operations: inputting a character sequence corresponding to an instant message, modifying previously input characters, sending a corresponding instant message (e.g., using Short Message Service (SMS) or Multimedia Messaging Service (MMS) protocols for telephone-based instant messaging or using XMPP, SIMPLE, Apple Push Notification Services (APNs), or IMPS for internet-based instant messaging), receiving an instant message, and viewing received instant messages. In some embodiments, the transmitted and / or received instant messages optionally include graphics, photographs, audio files, video files, and / or other attachments supported in MMS and / or Enhanced Messaging Services (EMS). As used herein, "instant message" means both telephone-based messages (e.g., messages sent using SMS or MMS) and internet-based messages (e.g., messages sent using XMPP, SIMPLE, APNs, or IMPS).

[0098] Incorporating RF circuitry 108, touch-sensitive display system 112, display controller 156, contact module 130, graphics module 132, text input module 134, GPS module 135, map module 154, and music player module 146, fitness support module 142 includes executable instructions for creating fitness activities (e.g., with time, distance, and / or calorie burning goals); communicating with fitness sensors (in sports equipment and smartwatches); receiving fitness sensor data; calibrating sensors used for monitoring fitness; selecting and playing music for fitness activities; and displaying, storing, and transmitting fitness data.

[0099] In conjunction with the touch-sensitive display system 112, display controller 156, one or more optical sensors 164, optical sensor controller 158, contact module 130, graphics module 132, and image management module 144, camera module 143 includes executable instructions for performing the following operations: capturing still images or videos (including video streams) and storing them in memory 102, modifying the characteristics of still images or videos, and / or deleting still images or videos from memory 102.

[0100] In conjunction with the touch-sensitive display system 112, display controller 156, contact module 130, graphics module 132, text input module 134, and camera module 143, the image management module 144 includes executable instructions for arranging, modifying (e.g., editing), or otherwise manipulating, tagging, deleting, displaying (e.g., in a digital slideshow or photo album), and storing still images and / or video images.

[0101] Combining RF circuit 108, touch-sensitive display system 112, display system controller 156, contact module 130, graphics module 132, and text input module 134, browser module 147 includes executable instructions for browsing the Internet (including searching, linking to, receiving, and displaying web pages or portions thereof, as well as attachments and other files linked to web pages) according to user instructions.

[0102] Incorporating RF circuitry 108, touch-sensitive display system 112, display system controller 156, contact module 130, graphics module 132, text input module 134, email client module 140, and browser module 147, calendar module 148 includes executable instructions for creating, displaying, modifying, and storing calendars and associated data (e.g., calendar entries, to-dos, etc.) according to user instructions.

[0103] In conjunction with RF circuitry 108, touch-sensitive display system 112, display system controller 156, contact module 130, graphics module 132, text input module 134, and browser module 147, desktop applet module 149 is optionally a micro-application downloaded and used by a user (e.g., weather desktop applet 149-1, stock market desktop applet 149-2, calculator desktop applet 149-3, alarm clock desktop applet 149-4, and dictionary desktop applet 149-5), or a user-created micro-application (e.g., user-created desktop applet 149-6). In some embodiments, the desktop applet includes HTML (Hypertext Markup Language) files, CSS (Cascading Style Sheets) files, and JavaScript files. In some embodiments, the desktop applet includes XML (Extensible Markup Language) files and JavaScript files (e.g., Yahoo! desktop applet).

[0104] Combining RF circuitry 108, touch-sensitive display system 112, display system controller 156, contact module 130, graphics module 132, text input module 134, and browser module 147, desktop applet creator module 150 includes executable instructions for creating desktop applets (e.g., transferring user-specified portions of web pages to desktop applets).

[0105] In conjunction with the touch-sensitive display system 112, display system controller 156, contact module 130, graphics module 132, and text input module 134, the search module 151 includes executable instructions for searching the memory 102 for text, music, sound, images, videos, and / or other files that match one or more search criteria (e.g., one or more user-specified search terms) according to user instructions.

[0106] Incorporating the touch-sensitive display system 112, display system controller 156, contact module 130, graphics module 132, audio circuitry 110, speaker 111, RF circuitry 108, and browser module 147, the video and music player module 152 includes executable instructions allowing users to download and play back recorded music and other sound files stored in one or more file formats, such as MP3 or AAC files, as well as executable instructions for displaying, presenting, or otherwise playing back video (e.g., on the touch-sensitive display system 112 or on an external display wirelessly connected via external port 124). In some embodiments, device 100 optionally includes the functionality of an MP3 player, such as an iPod (a trademark of Apple Inc.).

[0107] In conjunction with the touch-sensitive display system 112, display controller 156, contact module 130, graphics module 132, and text input module 134, the notepad module 153 includes executable instructions for creating and managing notes, to-do items, etc., according to user instructions.

[0108] Combining RF circuitry 108, touch-sensitive display system 112, display system controller 156, contact module 130, graphics module 132, text input module 134, GPS module 135, and browser module 147, map module 154 includes executable instructions for receiving, displaying, modifying, and storing maps and map-related data (e.g., driving routes; data on shops and other points of interest at or near specific locations; and other location-based data) according to user instructions.

[0109] In conjunction with the touch-sensitive display system 112, display system controller 156, contact module 130, graphics module 132, audio circuitry 110, speaker 111, RF circuitry 108, text input module 134, email client module 140, and browser module 147, the online video module 155 includes executable instructions that allow users to access, browse, receive (e.g., via streaming and / or downloading), play back (e.g., on the touchscreen 112 or on an external display connected wirelessly or via external port 124), send emails with links to specific online videos, and otherwise manage online videos in one or more file formats such as H.264. In some embodiments, an instant messaging module 141 is used instead of the email client module 140 to send links to specific online videos.

[0110] Each module and application identified above corresponds to a set of executable instructions for performing one or more of the functions described above and the methods described in this application (e.g., computer-implemented methods and other information processing methods described herein). These modules (i.e., instruction sets) need not be implemented as separate software programs, processes, or modules; therefore, various subsets of these modules may optionally be combined or otherwise rearranged in various embodiments. In some embodiments, memory 102 optionally stores a subset of the modules and data structures described above. Furthermore, memory 102 optionally stores additional modules and data structures not described above.

[0111] In some implementations, device 100 is a device on which the operation of a predefined set of functions is performed solely via a touchscreen and / or touchpad. By using a touchscreen and / or touchpad as the primary input control device for operating device 100, the number of physical input control devices (e.g., push-buttons, dials, etc.) on device 100 can be optionally reduced.

[0112] A predefined set of functions, uniquely performed via a touchscreen and / or touchpad, optionally includes navigation between user interfaces. In some embodiments, the touchpad, when touched by a user, navigates device 100 from any user interface displayed on device 100 to a main menu, main function menu, or root menu. In such embodiments, a touchpad is used to implement a "menu button." In some other embodiments, the menu button is a physical push-button or other physical input control device, rather than a touchpad.

[0113] Figure 1B This is a block diagram illustrating example components used for event handling according to some embodiments. In some embodiments, memory 102 ( Figure 1A (middle) or memory 370 ( Figure 3 This includes an event classifier 170 (e.g., in operating system 126) and a corresponding application 136-1 (e.g., any one of the aforementioned applications 136, 137 to 155, 380 to 390).

[0114] Event classifier 170 receives event information and determines the application 136-1 to which the event information should be delivered and the application view 191 of application 136-1. Event classifier 170 includes event monitor 171 and event dispatcher module 174. In some embodiments, application 136-1 includes application internal state 192, which indicates one or more current application views displayed on touch-sensitive display system 112 when the application is active or executing. In some embodiments, device / global internal state 157 is used by event classifier 170 to determine which application(s) is currently active, and application internal state 192 is used by event classifier 170 to determine the application view 191 to which the event information should be delivered.

[0115] In some implementations, the application internal state 192 includes additional information such as one or more of the following: recovery information to be used when the application 136-1 resumes execution, user interface state information indicating information being displayed by the application 136-1 or information ready to be displayed by the application 136-1, a state queue for enabling the user to return to the previous state or view of the application 136-1, and a repeat / undo queue for the user's previous actions.

[0116] Event monitor 171 receives event information from peripheral device interface 118. The event information includes information about sub-events (e.g., user touches on touch-sensitive display system 112 as part of a multi-touch gesture). Peripheral device interface 118 transmits information it receives from I / O subsystem 106 or sensors such as proximity sensor 166, one or more accelerometers 167, one or more gyroscopes 168, one or more magnetometers 169, and / or microphone 113 (via audio circuitry 110). The information received by peripheral device interface 118 from I / O subsystem 106 includes information from touch-sensitive display system 112 or touch-sensitive surfaces.

[0117] In some implementations, event monitor 171 sends requests to peripheral device interface 118 at predetermined intervals. In response, peripheral device interface 118 transmits event information. In other implementations, peripheral device interface 118 transmits event information only when a significant event occurs (e.g., receiving input above a predetermined noise threshold and / or receiving input for a predetermined duration).

[0118] In some implementations, the event classifier 170 also includes a hit view determination module 172 and / or an activity event recognizer determination module 173.

[0119] When the touch-sensitive display system 112 displays more than one view, the hit view determination module 172 provides a software process for determining where a sub-event has occurred within one or more views. A view consists of controls and other elements that the user can see on the display.

[0120] Another aspect of the user interface associated with an application is a set of views, sometimes referred to herein as application views or user interface windows, in which information is displayed and touch-based gestures occur. The application view (of the corresponding application) in which a touch is detected optionally corresponds to a procedural level within the application's procedural or view hierarchy. For example, the lowest-level view in which a touch is detected is optionally referred to as the hit view, and the set of events identified as correct input is optionally determined at least in part based on the hit view of the initial touch that initiates the touch-based gesture.

[0121] The hit view determination module 172 receives information related to sub-events of touch-based gestures. When an application has multiple views organized in a hierarchical structure, the hit view determination module 172 identifies the hit view as the lowest-level view in the hierarchical structure that handles the sub-events. In most cases, the hit view is the lowest-level view in which the initiating sub-event (i.e., the first sub-event in a sequence of sub-events that forms an event or potential event) occurs. Once a hit view is identified by the hit view determination module, the hit view typically receives all sub-events related to the same touch or input source to which it is identified as the hit view.

[0122] The activity event recognizer determination module 173 determines which views(s) within the view hierarchy should receive a specific sub-event sequence. In some embodiments, the activity event recognizer determination module 173 determines that only the hit view should receive the specific sub-event sequence. In other embodiments, the activity event recognizer determination module 173 determines that all views including the physical location of the sub-event are actively participating views, and thus determines that all actively participating views should receive the specific sub-event sequence. In other embodiments, even if the touch sub-event is entirely confined to the area associated with a particular view, the higher-level views in the hierarchy will still remain actively participating views.

[0123] Event assigner module 174 assigns event information to event identifiers (e.g., event identifier 180). In embodiments that include active event identifier determination module 173, event assigner module 174 delivers event information to the event identifier determined by active event identifier determination module 173. In some embodiments, event assigner module 174 stores event information in an event queue, which is retrieved by the corresponding event receiver module 182.

[0124] In some embodiments, operating system 126 includes event classifier 170. Alternatively, application 136-1 includes event classifier 170. In another embodiment, event classifier 170 is a standalone module or part of another module (such as contact / motion module 130) stored in memory 102.

[0125] In some embodiments, application 136-1 includes a plurality of event handlers 190 and one or more application views 191, wherein each application view includes instructions for handling touch events occurring within a corresponding view of the application's user interface. Each application view 191 of application 136-1 includes one or more event recognizers 180. Typically, a corresponding application view 191 includes a plurality of event recognizers 180. In other embodiments, one or more event recognizers among the event recognizers 180 are part of a separate module, which is a higher-level object such as a user interface toolkit (not shown) from which application 136-1 inherits methods and other properties. In some embodiments, a corresponding event handler 190 includes one or more of the following: a data updater 176, an object updater 177, a GUI updater 178, and / or event data 179 received from an event classifier 170. Event handlers 190 optionally utilize or invoke the data updater 176, the object updater 177, or the GUI updater 178 to update the application's internal state 192. Alternatively, one or more application views in application view 191 include one or more corresponding event handlers 190. Additionally, in some embodiments, one or more of data updater 176, object updater 177, and GUI updater 178 are included in the corresponding application view 191.

[0126] The corresponding event recognizer 180 receives event information (e.g., event data 179) from the event classifier 170 and identifies events from the event information. The event recognizer 180 includes an event receiver 182 and an event comparator 184. In some embodiments, the event recognizer 180 also includes at least one subset of metadata 183 and event delivery instructions 188 (which optionally include sub-event delivery instructions).

[0127] Event receiver 182 receives event information from event classifier 170. The event information includes information about sub-events, such as touch or touch movement. Depending on the sub-event, the event information also includes additional information, such as the location of the sub-event. When the sub-event involves touch movement, the event information optionally also includes the rate and direction of the sub-event. In some embodiments, the event includes the device rotating from one orientation to another (e.g., from a longitudinal orientation to a lateral orientation, or vice versa), and the event information includes corresponding information about the device's current orientation (also referred to as device pose).

[0128] Event comparator 184 compares event information with predefined event or sub-event definitions and determines the event or sub-event based on the comparison, or determines or updates the state of the event or sub-event. In some embodiments, event comparator 184 includes event definition 186. Event definition 186 contains definitions of events (e.g., predefined sequences of sub-events), such as event 1 (187-1), event 2 (187-2), and others. In some embodiments, sub-events in event 187 include, for example, touch start, touch end, touch move, touch cancel, and multi-touch. In one embodiment, event 1 (187-1) is defined as a double-click on a displayed object. For example, a double-click includes a first touch (touch start) of a predetermined duration on the displayed object, a first lift of a predetermined duration (touch end), a second touch (touch start) of a predetermined duration on the displayed object, and a second lift of a predetermined duration (touch end). In another embodiment, event 2 (187-2) is defined as a drag on a displayed object. For example, dragging includes a touch (or contact) on a displayed object for a predetermined duration, movement of the touch on the touch-sensitive display system 112, and lifting off the touch (end of touch). In some embodiments, the event also includes information for one or more associated event handlers 190.

[0129] In some implementations, event definition 187 includes definitions of events for corresponding user interface objects. In some implementations, event comparator 184 performs a hit test to determine which user interface object is associated with the sub-event. For example, in an application view displaying three user interface objects on a touch-sensitive display system 112, when a touch is detected on the touch-sensitive display system 112, event comparator 184 performs a hit test to determine which of the three user interface objects is associated with the touch (sub-event). If each displayed object is associated with a corresponding event handler 190, the event comparator uses the result of the hit test to determine which event handler 190 should be activated. For example, event comparator 184 selects the event handler associated with the sub-event and the object that triggered the hit test.

[0130] In some implementations, the definition of the corresponding event 187 also includes a delay action that delays the delivery of event information until it has been determined whether the sub-event sequence actually corresponds to or does not correspond to the event type of the event recognizer.

[0131] When the corresponding event recognizer 180 determines that the sub-event series does not match any event in event definition 186, the corresponding event recognizer 180 enters an event impossible, event failed, or event ended state, after which subsequent sub-events based on touch gestures are ignored. In this case, other event recognizers (if any) that remain active in the hit view continue to track and process the ongoing sub-events based on touch gestures.

[0132] In some embodiments, the corresponding event recognizer 180 includes metadata 183 having configurable properties, flags, and / or lists indicating how the event delivery system should perform sub-event delivery to actively participating event recognizers. In some embodiments, metadata 183 includes configurable properties, flags, and / or lists indicating how or how event recognizers can interact with each other. In some embodiments, metadata 183 includes configurable properties, flags, and / or lists indicating whether sub-events are delivered to different levels in a view or programmatic hierarchy.

[0133] In some implementations, when one or more specific sub-events of an event are identified, the corresponding event recognizer 180 activates the event handler 190 associated with the event. In some implementations, the corresponding event recognizer 180 delivers event information associated with the event to the event handler 190. Activating the event handler 190 is different from sending (and delaying) the sub-events to the corresponding hit view. In some implementations, the event recognizer 180 issues a flag associated with the identified event, and the event handler 190 associated with that flag acquires the flag and executes a predefined procedure.

[0134] In some implementations, event delivery instruction 188 includes a sub-event delivery instruction that delivers event information about a sub-event without activating an event handler. Instead, the sub-event delivery instruction delivers event information to an event handler associated with the sub-event sequence or to an actively participating view. The event handler associated with the sub-event sequence or the actively participating view receives the event information and performs a predetermined procedure.

[0135] In some implementations, data updater 176 creates and updates data used in application 136-1. For example, data updater 176 updates phone numbers used in contact module 137 or stores video files used in video player module 145. In some implementations, object updater 177 creates and updates objects used in application 136-1. For example, object updater 176 creates new user interface objects or updates the location of user interface objects. GUI updater 178 updates the GUI. For example, GUI updater 178 prepares display information and sends the display information to graphics module 132 for display on a touch-sensitive display.

[0136] In some embodiments, one or more event handlers 190 include, or have access to, a data updater 176, an object updater 177, and a GUI updater 178. In some embodiments, the data updater 176, object updater 177, and GUI updater 178 are included in a single module of the corresponding application 136-1 or application view 191. In other embodiments, they are included in two or more software modules.

[0137] It should be understood that the above discussion regarding event handling for user touch on a touch-sensitive display also applies to other forms of user input used to operate the multifunction device 100 using an input device, and not all user input is initiated on the touchscreen. For example, mouse movement and mouse button presses optionally in conjunction with single or multiple keyboard presses or holds; touch movements on the touchpad, such as taps, drags, scrolls, etc.; stylus input; device movement; verbal commands; detected eye movements; biometric input; and / or any combination thereof may optionally be used as input corresponding to sub-events that define the event to be identified.

[0138] Figure 2 It is shown that some embodiments have a touch screen (e.g., Figure 1AA portable multi-functional device 100 (a touch-sensitive display system 112). The touchscreen optionally displays one or more graphics within a user interface (UI) 200. In this embodiment and other embodiments described below, a user can select one or more graphics by gesturing over the graphics, for example, using one or more fingers 202 (not drawn to scale in the figures) or one or more styluses 203 (not drawn to scale in the figures). In some embodiments, selection of one or more graphics occurs when the user breaks contact with the graphics. In some embodiments, gestures optionally include one or more taps, one or more swipes (from left to right, from right to left, up and / or down), and / or scrolling (from right to left, from left to right, up and / or down) of a finger already in contact with the device 100. In some embodiments or in some cases, unintentional contact with a graphic does not select the graphic. For example, a swipe gesture over an application icon optionally does not select the corresponding application when the gesture corresponding to selection is a tap.

[0139] Device 100 optionally also includes one or more physical buttons, such as a "main function" button or a menu button 204. As previously described, menu button 204 is optionally used to navigate to any application 136 of a set of applications optionally executed on device 100. Alternatively, in some embodiments, the menu button is implemented as a soft key in a GUI displayed on a touchscreen display.

[0140] In some embodiments, device 100 includes a touchscreen display, a menu button 204, a push-button 206 for powering on / off and locking the device, one or more volume control buttons 208, a SIM card slot 210, a headset jack 212, and a docking / charging external port 124. The push-button 206 is optionally used to power on / off the device by pressing the button and holding it in the pressed state for a predefined time interval; to lock the device by pressing the button and releasing it before the predefined time interval has elapsed; and / or to unlock the device or initiate an unlocking process. In some embodiments, device 100 also accepts voice input via microphone 113 for activating or deactivating certain functions. Device 100 also optionally includes one or more contact strength sensors 165 for detecting the intensity of contact on the touch-sensitive display system 112, and / or one or more haptic output generators 163 for generating haptic outputs for a user of device 100.

[0141] Figure 3This is a block diagram of an example multifunctional device having a display and a touch-sensitive surface according to some embodiments. Device 300 need not be portable. In some embodiments, device 300 is a laptop, desktop computer, tablet computer, multimedia player device, navigation device, educational device (such as a children's learning toy), gaming system, or control device (e.g., a home controller or industrial controller). Device 300 typically includes one or more processing units (CPUs) 310, one or more network or other communication interfaces 360, memory 370, and one or more communication buses 320 for interconnecting these components. The communication bus 320 optionally includes circuitry (sometimes called a chipset) that interconnects system components and controls communication between system components. Device 300 includes an input / output (I / O) interface 330 having a display 340, which is typically a touchscreen display. The I / O interface 330 also optionally includes a keyboard and / or mouse (or other pointing device) 350 and a touchpad 355, and a haptic output generator 357 for generating haptic output on device 300 (e.g., similar to the above reference). Figure 1A The one or more tactile output generators 163 and sensors 359 (e.g., similar to those mentioned above) Figure 1A The sensors 112, 164, 165, 166, 167, 168, and 169 are touch sensors, optical sensors, contact strength sensors, proximity sensors, acceleration sensors, attitude and / or magnetic sensors. Memory 370 includes high-speed random access memory, such as DRAM, SRAM, DDR RAM, or other random access solid-state memory devices; and optionally includes non-volatile memory, such as one or more disk storage devices, optical disk storage devices, flash memory devices, or other non-volatile solid-state storage devices. Memory 370 optionally includes one or more storage devices located remotely from one or more CPUs 310. In some embodiments, memory 370 stores data with portable multifunction device 100 (…). Figure 1A The memory 370 stores programs, modules, and data structures similar to those stored in the memory 102 of the portable multifunction device 100, or subsets thereof. Additionally, the memory 370 optionally stores additional programs, modules, and data structures not present in the memory 102 of the portable multifunction device 100. For example, the memory 370 of the device 300 optionally stores a drawing module 380, a presentation module 382, ​​a word processing module 384, a website creation module 386, a disk editing module 388, and / or a spreadsheet module 390, while the portable multifunction device 100 (… Figure 1A The memory 102 may optionally not store these modules.

[0142] Figure 3Each of the elements identified above is optionally stored in one or more of the previously mentioned memory devices. Each of the modules identified above corresponds to a set of instructions for performing the functions described above. The modules or programs identified above (i.e., instruction sets) need not be implemented as separate software programs, processes, or modules; therefore, various subsets of these modules may optionally be combined or otherwise rearranged in various embodiments. In some embodiments, memory 370 optionally stores a subset of the modules and data structures described above. Furthermore, memory 370 optionally stores additional modules and data structures not described above.

[0143] Now let’s turn our attention to the implementation of the user interface (“UI”) optionally implemented on the portable multifunction device 100.

[0144] Figure 4A An example user interface for a menu of an application on a portable multifunction device 100 according to some embodiments is shown. A similar user interface is optionally implemented on device 300. In some embodiments, user interface 400 includes the following elements or a subset or superset thereof:

[0145] • One or more signal strength indicators 402 for one or more wireless communications (e.g., cellular signals and Wi-Fi signals);

[0146] • Time 404;

[0147] Bluetooth indicator 405;

[0148] • Battery status indicator 406;

[0149] • Tray icon 408 with commonly used application icons, such as:

[0150] The telephone module 138 has an icon 416 labeled "telephone", which optionally includes an indicator 414 for the number of missed calls or voicemails.

[0151] The email client module 140 has an icon 418 labeled "Mail", which optionally includes an indicator 410 for the number of unread emails;

[0152] The icon 420 of browser module 147, which is labeled "browser"; and

[0153] The video and music player module 152 (also known as the iPod (a trademark of Apple Inc.) module 152) is labeled with an icon 422 marked "iPod"; and

[0154] • Icons of other applications, such as:

[0155] Icon 424 of the οIM module 141, which is labeled "text";

[0156] The icon 426 of the calendar module 148 is labeled "Calendar";

[0157] The icon 428 of the image management module 144 is labeled "photo";

[0158] The icon 430 of the camera module 143 is labeled "camera";

[0159] The icon 432 of the online video module 155 is labeled "Online Video";

[0160] The icon 434 in the Stock Market Desktop Mini Program 149-2 is labeled "Stock Market";

[0161] The icon 436 of the map module 154 is labeled "map";

[0162] The icon 438 in the Weather Desktop Mini Program 149-1 is marked as "Weather".

[0163] The icon labeled "Clock" in the alarm clock desktop mini-program 169-6 is 440.

[0164] The icon 442 of the fitness support module 142 is labeled "fitness support";

[0165] The notepad module 153's icon 444, labeled "Notepad"; and

[0166] The icon 446 sets the application or module, which provides access to the settings of the device 100 and its various applications 136.

[0167] It should be noted that Figure 4A The icon labels shown are merely examples. For instance, in some embodiments, the icon 422 of the video and music player module 152 is labeled "Music" or "Music Player". Other labels are optionally used for various application icons. In some embodiments, the label of a particular application icon includes the name of the application corresponding to that particular application icon. In some embodiments, the label of a specific application icon is different from the name of the application corresponding to that particular application icon.

[0168] Figure 4B A touch-sensitive surface 451 separate from the display 450 is shown (e.g., Figure 3 Devices (e.g., tablets or touchpads 355) Figure 3An example user interface on device 300. Device 300 also optionally includes one or more contact intensity sensors (e.g., one or more sensors in sensor 359) for detecting the intensity of contact on the tactile surface 451 and / or one or more tactile output generators 359 for generating tactile outputs for the user of device 300.

[0169] Figure 4B A touch-sensitive surface 451 separate from the display 450 is shown (e.g., Figure 3 Devices (e.g., tablets or touchpads 355) Figure 3 An example user interface on device 300). Many subsequent embodiments of a device for detecting input on a touch-sensitive surface independent of the display are given as references. Figure 4B As shown. In some implementations, the touch-sensitive surface (e.g., Figure 4B 451) has a main axis (e.g., on the display (e.g., 450) that is aligned with the main axis on the display (e.g., 451). Figure 4B The principal axis corresponding to 453 in the middle (e.g., Figure 4B (452 in the middle). According to these embodiments, the device detects contact with the touch-sensitive surface 451 at a position corresponding to the corresponding position on the display (e.g., Figure 4B (460 and 462 in the example) Figure 4B In the diagram, 460 corresponds to 468 and 462 corresponds to 470. Thus, on a touch-sensitive surface (e.g., Figure 4B 451) and the display of a multi-functional device (e.g., Figure 4B When 450 is separated, user input detected by the device on the touch-sensitive surface (e.g., touches 460 and 462 and their movement) is used by the device to manipulate the user interface on the display. It should be understood that similar methods may be optionally used for other user interfaces described herein.

[0170] As used herein, the term "focus selector" refers to an input element used to indicate the current portion of a user interface with which a user is interacting. In some specific implementations that include a cursor or other positional marker, the cursor acts as a "focus selector," such that when the cursor is over a particular user interface element (e.g., a button, window, slider, or other user interface element), the cursor is positioned on a touch-sensitive surface (e.g., a...). Figure 3 The touchpad 355 or Figure 4B When an input (e.g., a press input) is detected on the touch-sensitive surface 451 of the display, the specific user interface element is adjusted according to the detected input. This applies to touchscreen displays that enable direct interaction with user interface elements on the touchscreen display. Figure 1A The touch-sensitive display system 112 or Figure 4AIn some implementations of a touchscreen, a touch detected on the touchscreen acts as a "focus selector," causing the specific user interface element to be adjusted based on the detected input when input (e.g., a press input via a touch) is detected at the location of a specific user interface element (e.g., a button, window, slider, or other user interface element) on the touchscreen display. In some implementations, focus moves from one area of ​​the user interface to another without corresponding cursor movement or touch movement on the touchscreen display (e.g., moving focus from one button to another using tab keys or arrow keys); in these implementations, the focus selector moves according to the movement of focus between different areas of the user interface. Regardless of the specific form the focus selector takes, it is typically a user-controlled element (or touch on the touchscreen display) that conveys the user's desired interaction with the user interface (e.g., by indicating to the device the element of the user interface the user expects to interact with). For example, when a press input is detected on a touch-sensitive surface (e.g., a touchpad or touchscreen), the position of the focus selector (e.g., a cursor, touch, or selection box) above the corresponding button will indicate that the user expects to activate that button (rather than other user interface elements shown on the device display).

[0171] User interface and related processes

[0172] Now turn attention to implementations of user interfaces (“UI”) and associated processes that can be implemented on electronic devices, such as a portable multi-functional device 100 having a display, a touch-sensitive surface and optionally one or more sensors to detect the intensity of contact with the touch-sensitive surface, or a device 300 having one or more processors, non-transitory memory, a display and input devices.

[0173] Figure 5A-Figure 5MMM Example user interfaces for window edge pairing according to some implementation schemes are shown. The user interfaces in these figures are used to illustrate the processes described below, including… Figures 8A-8E The process in question. Although some embodiments are given with reference to input on the touch-sensitive surface 451 independent of the display 450, in some embodiments the device detects input on a touchscreen display (which combines a touch-sensitive surface and a display), such as Figure 4A As shown in the image.

[0174] Figures 5A-5T The diagram shows windows 510 and 520 displayed within display area 501 of monitor 450. For example, window 510 corresponds to a first application, and window 520 corresponds to a second application different from the first application. For example, windows 510 and 520 correspond to the same application. Figure 5A-Figure 5MMMThe taskbar 504 is displayed within the display area 501, and multiple taskbar icons 506-A, 506-B and 506-C correspond to different applications.

[0175] like Figures 5A-5T As shown, window 510 includes a pane area 512a and a content area 512b. Window 510 has a right edge 514a, a top edge 514b, and a bottom edge 514c. Similarly, window 520 includes a pane area 522a and a content area 522b. Window 520 has a left edge 524a, a top edge 524b, and a bottom edge 524c.

[0176] Figures 5A-5B A sequence is shown in which, based on the determination that the movement of window 510 satisfies one or more pairing criteria, the right edge 514a of window 510 moves toward the left edge 524a of window 520, and the right edge 514a of window 510 pairs with the left edge 524a of window 520. In this embodiment, one or more pairing criteria are satisfied when both angle and speed criteria are met. For example, the angle criterion is satisfied when the angle of movement deviates from a predefined axis (e.g., an axis orthogonal to or perpendicular to the approaching edge) is less than an angle threshold (e.g., + / - 45° from a predefined axis). Therefore, according to some embodiments, the angle criterion is satisfied when the approach angle is between pairing values ​​516a (e.g., 45°) and 516b (e.g., 315°). For example, the speed criterion is satisfied when the movement speed is less than a pairing speed threshold 518.

[0177] exist Figure 5A In this process, based on the movement vector 508, the focus selector 502 is used to drag the window 510 through the pane area 512a. For example, based on the movement vector 508, the right edge 514a of the window 510 is moved towards the left edge 524a of the window 520. Figure 5A As shown, the angle (e.g., 15°) of the movement vector 508 relative to the normal associated with the left edge 524a of window 520 is between paired values ​​516a and 516b. Furthermore, in Figure 5A In this case, the velocity associated with the movement vector 508 is less than the paired velocity threshold 518.

[0178] Therefore, as Figures 5B-5C As shown, the right edge 514a of window 510 mates with the left edge 524a of window 520. For example, due to satisfying angle and speed criteria, window 510 stops moving when the right edge 514a of window 510 contacts the left edge 524a of window 520. However, in Figure 5CIn this embodiment, focus selector 502 moves past the left edge 524a of window 520 according to movement vector 508. In some embodiments, when a window is moved (or resized) based on input from a device with a haptic output generator (e.g., a touchpad with a haptic output generator), haptic output is generated when the edge of one window (e.g., window 510) aligns with the edge of another window (e.g., window 520). In contrast, in some embodiments, no haptic output is generated to indicate that the edge of one window has crossed the edge of another window if the edge of the window moves over the edge of another window without aligning.

[0179] Figures 5D-5F A sequence is shown in which, based on the determination that the movement of window 510 does not meet one or more separation criteria, window 510 moves substantially parallel to the left edge 524a of window 520, while the right edge 514a of window 510 remains paired with the left edge 524a of window 520. In this embodiment, one or more separation criteria are met when either an angle criterion or a speed criterion is met. For example, an angle criterion is met when the angle of movement deviates from a predefined axis (e.g., an axis orthogonal to or perpendicular to the paired edges) by an angle greater than an angle threshold (e.g., + / - 45° from a predefined axis). Therefore, according to some embodiments, an angle criterion is met when the angle of movement is not between separation values ​​530a (e.g., 45°) and 530b (e.g., 135°). For example, a speed criterion is met when the movement speed is greater than a separation speed threshold 532.

[0180] exist Figure 5D In this process, based on the movement vector 526, the focus selector 502 drags the window 510 through the pane area 512a. For example, based on the movement vector 526, the right edge 514a of the window 510 moves substantially parallel to the left edge 524a of the window 520. Figure 5D As shown, the angle (e.g., 75°) of the movement vector 526 relative to the normal associated with the left edge 524a of window 520 is between the separation values ​​530a and 530b. Furthermore, in Figure 5D In this case, the velocity associated with the movement vector 526 is less than the separation velocity threshold 532.

[0181] Therefore, as Figures 5E-5F As shown, the right edge 514a of window 510 remains paired with the left edge 524a of window 520. For example, window 510 moves parallel to window 520, but window 510 remains paired with window 520 because neither the angle criterion associated with one or more separation criteria nor the velocity criterion associated with one or more separation criteria is satisfied. Figures 5E-5FAs shown, the parallel movement of window 510 is constrained by line 528a associated with the top edge 524b of window 520. However, in Figure 5F In this context, focus selector 502 moves along line 528a according to movement vector 526. In some embodiments, when moving (or resizing) a window based on input from a device with a haptic output generator (e.g., a touchpad or touch-sensitive surface with a haptic output generator), if the separation criterion is not met, when the edge of window 510 reaches the other edge of its paired window (e.g., ...), Figure 5E Haptic output is generated when the top edge 524b) of window 520 in the window meets the constraint associated with the edge of another window. In contrast, in some embodiments, no haptic output is generated when the edge of a window meets the constraint associated with the edge of another window if the separation criterion is met.

[0182] Figure 5G-Figure 5J Another sequence is shown, wherein, based on the determination that the movement of window 510 does not meet one or more separation criteria, window 510 moves substantially parallel to the left edge 524a of window 520, while the right edge 514a of window 510 remains paired with the left edge 524a of window 520. In this embodiment, one or more separation criteria are met when either an angle criterion or a speed criterion is met. For example, an angle criterion is met when the angle of movement deviates from a predefined axis (e.g., an axis orthogonal to or perpendicular to the paired edges) greater than an angle threshold (e.g., + / - 45° from a predefined axis). Therefore, according to some embodiments, an angle criterion is met when the angle of movement is not between separation values ​​536a (e.g., 225°) and 536b (e.g., 315°). For example, a speed criterion is met when the movement speed is greater than a separation speed threshold 532.

[0183] exist Figure 5G In the middle, based on the movement vector 534, the window 510 is dragged through the pane area 512a using the focus selector 502. For example, the movement vector 534 is Figures 5D-5F The movement continues (e.g., clicking and dragging according to movement vector 526, then holding and dragging according to movement vector 534). For example, moving the right edge 514a of window 510 substantially parallel to the left edge 524a of window 520 according to movement vector 534. Figure 5G As shown, the angle (e.g., 285°) of the movement vector 534 relative to the normal associated with the left edge 524a of window 520 is between separation values ​​536a and 536b. Furthermore, in Figure 5G In this case, the velocity associated with the movement vector 534 is less than the separation velocity threshold 532.

[0184] Therefore, as Figures 5H-5JAs shown, the right edge 514a of window 510 remains paired with the left edge 524a of window 520. For example, window 510 slides parallel to window 520, but window 510 remains paired with window 520 because neither the angle criterion associated with one or more separation criteria nor the velocity criterion associated with one or more separation criteria is satisfied. Figures 5I-5J As shown, the parallel movement of window 510 is constrained by line 528b associated with the bottom edge 524c of window 520.

[0185] Figure 5K-Figure 5M A sequence is shown in which, based on determining that the movement of window 510 satisfies one or more separation criteria, window 510 moves substantially perpendicular to the left edge 524a of window 520, while the right edge 514a of window 510 is unpaired from the left edge 524a of window 520. In this embodiment, one or more separation criteria are met when the angle criteria are satisfied. For example, the angle criterion is satisfied when the angle of movement deviates from a predefined axis (e.g., an axis orthogonal to or perpendicular to the paired edges) by less than an angle threshold (e.g., + / - 45° from a predefined axis). Therefore, according to some embodiments, the angle criterion is satisfied when the angle of movement is between separation values ​​542a (e.g., 135°) and 542b (e.g., 225°).

[0186] In some implementations, if the first window moves away from the paired second window in a substantially vertical direction, then when an angle criterion is met (e.g., Figure 5K-Figure 5M In some implementations, if the first window moves toward the paired second window in a substantially perpendicular direction, then when the angle criterion and the distance criterion are met (e.g., without a distance criterion), the first window is unpaired from the second window. Figure 5Q-Figure 5T The first window is unpaired from the second window.

[0187] exist Figure 5K In this process, based on the movement vector 538, the focus selector 502 is used to drag the window 510 through the pane area 512a. For example, based on the movement vector 538, the right edge 514a of the window 510 is moved away from the left edge 524a of the window 520 in a substantially vertical direction. Figure 5K As shown, the angle (e.g., 180°) of the movement vector 538 relative to the normal associated with the left edge 524a of window 520 is between the separation values ​​542a and 542b.

[0188] Therefore, as Figure 5L-Figure 5MAs shown, the right edge 514a of window 510 is separated from the left edge 524a of window 520 and is no longer paired. For example, window 510 is separated from window 520 and moves according to the movement vector 538 because it satisfies the angle criterion and distance criterion associated with one or more separation criteria.

[0189] Figures 5N-5P Another sequence is shown, wherein, based on determining that the movement of window 510 satisfies one or more separation criteria, window 510 moves substantially perpendicular to the left edge 524a of window 520, while the right edge 514a of window 510 is unpaired from the left edge 524a of window 520. In this embodiment, one or more separation criteria are met when both angle and distance criteria are satisfied. For example, the angle criterion is satisfied when the angle of movement deviates from a predefined axis (e.g., an axis orthogonal to or perpendicular to the paired edges) by less than an angle threshold (e.g., + / - 45° from a predefined axis). Therefore, according to some embodiments, the angle criterion is satisfied when the angle of movement is between separation values ​​542a (e.g., 135°) and 542b (e.g., 225°). For example, the distance criterion is satisfied when the amount of movement is greater than a separation distance threshold 546.

[0190] exist Figure 5N In this process, based on the movement vector 544, the focus selector 502 is used to drag the window 510 through the pane area 512a. For example, based on the movement vector 544, the right edge 514a of the window 510 is moved away from the left edge 524a of the window 520 in a substantially vertical direction. Figure 5N As shown, the angle (e.g., 160°) of the movement vector 544 relative to the normal associated with the left edge 524a of window 520 is between the separation values ​​542a and 542b. Furthermore, in Figure 5N In the middle, the magnitude associated with the movement vector 544 is greater than the separation distance threshold 546.

[0191] Therefore, as Figures 5O-5PAs shown, the right edge 514a of window 510 separates from the left edge 524a of window 520 and is no longer paired. For example, window 510 separates from window 520 and moves according to movement vector 544 because it satisfies angle and distance criteria associated with one or more separation criteria. In some embodiments, haptic output is generated when the edge of a window (e.g., window 510) separates from the edge of another window (e.g., window 520) (e.g., unpairs) based on input from a device with a haptic output generator (e.g., a touchpad or touch-sensitive surface with a haptic output generator) to move (or resize) the window. In some implementations, when a window is moved (or resized) based on input from a device with a haptic output generator (e.g., a touchpad or touch-sensitive surface with a haptic output generator), haptic output is generated even when the edge of a window (e.g., window 510) is paired with the edge of another window (e.g., window 520), but not when the edge of a window (e.g., window 510) is separated from the edge of another window (e.g., window 520) (e.g., unpaired).

[0192] Figure 5Q-Figure 5T Another sequence is shown, in which window 510 moves substantially perpendicular to the left edge 524a of window 520, while the right edge 514a of window 510 is unpaired from the left edge 524a of window 520, based on the determination that the movement of window 510 satisfies one or more separation criteria. In this embodiment, one or more separation criteria are satisfied when both angle and distance criteria are met. For example, the angle criterion is satisfied when the angle of movement deviates from a predefined axis (e.g., an axis orthogonal to or perpendicular to the paired edges) by less than an angle threshold (e.g., + / - 45° from a predefined axis). Therefore, according to some embodiments, the angle criterion is satisfied when the angle of movement is between separation values ​​552a (e.g., 45°) and 552b (e.g., 315°). For example, the distance criterion is satisfied when the amount of movement is greater than a separation distance threshold 550.

[0193] In some implementations, the value associated with the distance criterion is scaled based on the angle of substantially vertical movement. For example, the value associated with the movement of window 510 at a 0° angle... Figure 5Q The separation distance threshold 550 is less than that associated with the movement of window 510 at a 160° angle. Figure 5N The separation distance threshold is 546.

[0194] exist Figure 5QIn this process, based on the movement vector 548, the focus selector 502 is used to drag the window 510 through the pane area 512a. For example, based on the movement vector 548, the right edge 514a of the window 510 is moved towards the left edge 524a of the window 520 in a substantially vertical direction. Figure 5Q As shown, the angle (e.g., 0°) of the movement vector 548 relative to the normal associated with the left edge 524a of window 520 is between the separation values ​​552a and 552b. Furthermore, in Figure 5Q In the middle, the magnitude associated with the movement vector 548 is greater than the separation distance threshold 550.

[0195] like Figure 5R-Figure 5S As shown, the focus selector 502 moves according to the movement vector 528, and the right edge 514a of window 510 remains paired with the left edge 524a of window 520 until the separation distance threshold 550 is met. When the separation distance threshold 550 is met, window 510... Figures 5S to 5T Jump between them so that it appears below the focus selector 502. Therefore, as... Figure 5T As shown, the right edge 514a of window 510 is separated from the left edge 524a of window 520 and is no longer paired. For example, window 510 is separated from window 520 and moves according to the movement vector 548 because it satisfies the angle criterion and distance criterion associated with one or more separation criteria.

[0196] Figure 5U-Figure 5JJ The diagram shows windows 560 and 570 displayed within display area 501 of monitor 450. For example, window 560 corresponds to a first application, and window 570 corresponds to a second application different from the first application. Alternatively, windows 560 and 570 may correspond to the same application. Figure 5U-Figure 5JJ As shown, window 560 includes a pane area 562a and a content area 562b. Window 560 has a top edge 564a, a left edge 564b, and a right edge 564c. Similarly, window 570 includes a pane area 572a and a content area 572b. Window 520 has a bottom edge 574a, a left edge 574b, and a right edge 574c.

[0197] Figure 5U-Figure 5WA sequence is shown in which, based on the determination that the movement of window 560 satisfies one or more pairing criteria, the top edge 564a of window 560 moves toward the bottom edge 574a of window 570, and the top edge 564a of window 560 pairs with the bottom edge 574a of window 570. In this embodiment, one or more pairing criteria are satisfied when both angle and speed criteria are met. For example, the angle criterion is satisfied when the angle of movement deviates from a predefined axis (e.g., the approaching edge) by less than an angle threshold (e.g., + / - 45° from a predefined axis). Therefore, according to some embodiments, the angle criterion is satisfied when the approach angle of movement is between pairing values ​​568a (e.g., 45°) and 568b (e.g., 135°). For example, the speed criterion is satisfied when the movement speed is less than a pairing speed threshold 518.

[0198] exist Figure 5U In this process, based on the movement vector 566, the focus selector 502 is used to drag the window 560 through the pane area 562a. For example, based on the movement vector 566, the top edge 564a of the window 560 is moved towards the bottom edge 574a of the window 570. Figure 5U As shown, the angle (e.g., 80°) of the movement vector 566 relative to the bottom edge 574a of the window 570 is between paired values ​​568a and 568b. Furthermore, in Figure 5U In this case, the velocity associated with the movement vector 566 is less than the paired velocity threshold 518.

[0199] Therefore, as Figure 5V-Figure 5W As shown, the top edge 564a of window 560 mates with the bottom edge 574a of window 570. For example, due to satisfying angle and speed criteria, window 560 stops moving when its top edge 564a contacts the bottom edge 574a of window 570. However, in Figure 5W In the middle, the focus selector 502 moves through line 528a according to the movement vector 526.

[0200] Figures 5X-5ZA sequence is shown in which, based on the determination that the movement of window 560 does not meet one or more separation criteria, window 560 moves substantially parallel to the bottom edge 574a of window 570, while the top edge 564a of window 560 remains paired with the bottom edge 574a of window 570. In this embodiment, one or more separation criteria are met when either an angle criterion or a speed criterion is met. For example, an angle criterion is met when the angle of movement deviates from a predefined axis (e.g., the paired edge) by more than an angle threshold (e.g., + / - 45° from a predefined axis). Therefore, according to some embodiments, an angle criterion is met when the angle of movement is not between separation values ​​580a (e.g., 135°) and 580b (e.g., 225°). For example, a speed criterion is met when the movement speed is greater than a separation speed threshold 532.

[0201] exist Figure 5X In the middle, based on the movement vector 576, the window 560 is dragged through the pane area 562a using the focus selector 502. For example, the movement vector 576 is... Figure 5U-Figure 5W The movement continues (e.g., clicking and dragging according to movement vector 566, then holding and dragging according to movement vector 576). For example, moving the top edge 564a of window 560 substantially parallel to the bottom edge 574a of window 570 according to movement vector 576. Figure 5X As shown, the angle (e.g., 200°) of the movement vector 576 relative to the bottom edge 574a of the window 570 is between the separation values ​​580a and 580b. Furthermore, in Figure 5X In this case, the velocity associated with the movement vector 576 is less than the separation velocity threshold 532.

[0202] Therefore, as Figures 5Y-5Z As shown, the top edge 564a of window 560 remains paired with the bottom edge 574a of window 570. For example, window 560 moves parallel to window 570, but window 560 remains paired with window 570 because neither the angle criterion associated with one or more separation criteria nor the speed criterion is met. Figure 5Z As shown, the parallel movement of window 510 is constrained by line 578a associated with the left edge 574b of window 570.

[0203] Figure 5AA-Figure 5DDA sequence is shown in which, based on the determination that the movement of window 570 does not meet one or more separation criteria, window 570 moves substantially parallel to the top edge 564a of window 560, while the top edge 564a of window 560 remains paired with the bottom edge 574a of window 570. In this embodiment, one or more separation criteria are met when either an angle criterion or a speed criterion is met. For example, an angle criterion is met when the angle of movement deviates from a predefined axis (e.g., the paired edge) by more than an angle threshold (e.g., + / - 45° from a predefined axis). Therefore, according to some embodiments, an angle criterion is met when the angle of movement is not between separation values ​​580a (e.g., 135°) and 580b (e.g., 225°). For example, a speed criterion is met when the movement speed is greater than a separation speed threshold 532.

[0204] exist Figure 5AA In this process, based on the movement vector 582, the focus selector 502 is used to drag the window 570 through the pane area 572a. For example, based on the movement vector 582, the bottom edge 574a of the window 570 is moved substantially parallel to the top edge 564a of the window 560. Figure 5AA As shown, the angle (e.g., 190°) of the movement vector 582 relative to the top edge 564a of the window 560 is between the separation values ​​580a and 580b. Furthermore, in Figure 5AA In this case, the velocity associated with the movement vector 582 is less than the separation velocity threshold 532.

[0205] Therefore, as Figure 5BB-Figure 5DD As shown, the bottom edge 574a of window 570 remains paired with the top edge 564a of window 560. For example, window 570 moves parallel to window 560, but window 570 remains paired with window 560 because neither the angular criterion associated with one or more separation criteria nor the speed criterion is met. Figure 5DD As shown, the parallel movement of window 570 is constrained by line 584b associated with the right edge 564c of window 560.

[0206] Figure 5EE-Figure 5FFAnother sequence is shown, wherein, based on the determination that the movement of window 570 does not meet one or more separation criteria, window 570 moves substantially parallel to the top edge 564a of window 560, while the top edge 564a of window 560 remains paired with the bottom edge 574a of window 570. In this embodiment, one or more separation criteria are met when either an angle criterion or a speed criterion is met. For example, an angle criterion is met when the angle of movement deviates from a predefined axis (e.g., the paired edge) by more than an angle threshold (e.g., + / - 45° from a predefined axis). Therefore, according to some embodiments, an angle criterion is met when the angle of movement is not between separation values ​​590a (e.g., 45°) and 590b (e.g., 315°). For example, a speed criterion is met when the movement speed is greater than a separation speed threshold 532.

[0207] exist Figure 5EE In this process, based on the movement vector 588, the focus selector 502 is used to drag the window 570 through the pane area 572a. For example, based on the movement vector 588, the bottom edge 574a of the window 570 is moved substantially parallel to the top edge 564a of the window 560. Figure 5EE As shown, the angle (e.g., 355°) of the movement vector 588 relative to the top edge 564a of the window 560 is between the separation values ​​590a and 590b. Furthermore, in Figure 5EE In this case, the velocity associated with the movement vector 588 is less than the separation velocity threshold 532.

[0208] Therefore, as Figure 5FF As shown, the bottom edge 574a of window 570 remains paired with the top edge 564a of window 560. For example, window 570 moves parallel to window 560, but window 570 remains paired with window 560 because neither the angular criterion associated with one or more separation criteria nor the speed criterion is met. Figure 5FF As shown, the parallel movement of window 570 is constrained by line 584a associated with the left edge 564b of window 560.

[0209] Figure 5GG-Figure 5JJA sequence is shown in which, based on the determination that the movement of window 560 satisfies one or more separation criteria, window 560 moves substantially perpendicular to the bottom edge 574a of window 570, while the top edge 564a of window 560 is unpaired from the bottom edge 574a of window 570. In this embodiment, one or more separation criteria are met when both angle and distance criteria are satisfied. For example, the angle criterion is satisfied when the angle of movement deviates from a predefined axis (e.g., the paired edge) by less than an angle threshold (e.g., + / - 45° from a predefined axis). Therefore, according to some embodiments, the angle criterion is satisfied when the angle of movement is between separation values ​​596a (e.g., 45°) and 596b (e.g., 135°). For example, the distance criterion is satisfied when the amount of movement is greater than a separation distance threshold 594.

[0210] exist Figure 5GG In this process, based on the movement vector 592, the window 560 is dragged through the pane area 562a using the focus selector 502. For example, based on the movement vector 592, the top edge 564a of the window 560 is moved towards the bottom edge 574a of the window 570 in a substantially vertical direction. Figure 5GG As shown, the angle (e.g., 90°) of the movement vector 592 relative to the bottom edge 574a of the window 570 is between the separation values ​​596a and 596b. Furthermore, in Figure 5GG In the middle, the magnitude associated with the movement vector 592 is greater than the separation distance threshold 594.

[0211] like Figure 5HH-Figure 5II As shown, the focus selector 502 moves according to the movement vector 592, and the right edge 514a of window 510 remains paired with the left edge 524a of window 520 until the separation distance threshold 594 is met. When the separation distance threshold 594 is met, window 560... Figure 5II-Figure 5JJ Jump between them so that it appears below the focus selector 502. Therefore, as... Figure 5JJ As shown, the top edge 564a of window 560 is unpaired from the bottom edge 574a of window 570. For example, window 560 separates from window 570 and moves according to the movement vector 592 because it satisfies an angle criterion and a distance criterion associated with one or more separation criteria.

[0212] Figure 5KK-Figure 5NN The diagram shows windows 5100 and 5110 displayed within display area 501 of monitor 450. For example, window 5100 corresponds to a first application, and window 5110 corresponds to a second application, different from the first application. Alternatively, windows 5100 and 5110 may correspond to the same application. Figure 5KK-Figure 5NNAs shown, window 5100 includes a pane area 5102a and a content area 5102b, and window 5100 has a right edge 5104a. Similarly, window 5110 includes a pane area 5112a and a content area 5112b, and window 5110 has a left edge 5114a.

[0213] Figure 5KK-Figure 5MM A sequence is shown in which, based on the determination that the movement of window 5100 does not meet one or more pairing criteria, the right edge 5104a of window 5100 moves toward the left edge 5114a of window 5110, and the right edge 5104a of window 5100 is not paired with the left edge 5114a of window 5110. In this embodiment, one or more pairing criteria are met when both angle and speed criteria are met. For example, the angle criterion is met when the angle of movement deviates from a predefined axis (e.g., an axis orthogonal to or perpendicular to the approaching edge) by less than an angle threshold (e.g., + / - 45° from a predefined axis). Therefore, according to some embodiments, the angle criterion is met when the approach angle of movement is between pairing values ​​516a (e.g., 45°) and 516b (e.g., 315°). For example, the speed criterion is met when the movement speed is less than a pairing speed threshold 518.

[0214] exist Figure 5KK In this process, based on the movement vector 5106, the focus selector 502 is used to drag the window 5100 through the pane area 5102a. For example, based on the movement vector 5106, the right edge 5104a of the window 5100 is moved towards the left edge 5114a of the window 5110. Figure 5KK As shown, the angle (e.g., 80°) of the movement vector 5106 relative to the normal associated with the left edge 5114a of window 5110 is not between the paired values ​​516a and 516b. Furthermore, in Figure 5KK In this case, the velocity associated with the movement vector 5106 is less than the paired velocity threshold 518.

[0215] Therefore, as Figure 5LL As shown, the right edge 5104a of window 5100 does not align with the left edge 5114a of window 5110. For example, the movement of window 5100 continues according to the movement vector 5106 and overlaps with window 5110 because the angle criterion is not met.

[0216] Figure 5MM-Figure 5NNAnother sequence is shown, wherein, based on the determination that the movement of window 5100 does not satisfy one or more pairing criteria, the right edge 5104a of window 5100 moves toward the left edge 5114a of window 5110, and the right edge 5104a of window 5100 is not paired with the left edge 5114a of window 5110. In this embodiment, one or more pairing criteria are satisfied when both angle and speed criteria are satisfied. For example, the angle criterion is satisfied when the angle of movement deviates from a predefined axis (e.g., an axis orthogonal to or perpendicular to the approaching edge) by less than an angle threshold (e.g., + / - 45° from a predefined axis). Therefore, according to some embodiments, the angle criterion is satisfied when the approach angle of movement is between pairing values ​​516a (e.g., 45°) and 516b (e.g., 315°). For example, the speed criterion is satisfied when the movement speed is less than a pairing speed threshold 518.

[0217] exist Figure 5MM In this process, based on the movement vector 5108, the focus selector 502 is used to drag the window 5100 through the pane area 5102a. For example, based on the movement vector 5108, the right edge 5104a of the window 5100 is moved towards the left edge 5114a of the window 5110. Figure 5MM As shown, the angle (e.g., 35°) of the movement vector 5108 relative to the normal associated with the left edge 5114a of window 5110 is between paired values ​​516a and 516b. Furthermore, in Figure 5MM In this case, the velocity associated with the movement vector 5108 is greater than the pairing velocity threshold 518.

[0218] Therefore, as Figure 5NN As shown, the right edge 5104a of window 5100 does not pair with the left edge 5114a of window 5110. For example, the movement of window 5100 continues according to the movement vector 5108 and overlaps with window 5110 because the speed criterion is not met.

[0219] Figures 500 to 5PP The diagram shows windows 5120 and 5130 displayed within display area 501 of monitor 450. For example, window 5120 corresponds to a first application, and window 5130 corresponds to a second application, different from the first application. Alternatively, windows 5120 and 5130 may correspond to the same application. Figure 500-Figure 5PP As shown, window 5120 includes a pane area 5122a and a content area 5122b, and window 5120 has a right edge 5124a. Similarly, window 5130 includes a pane area 5132a and a content area 5132b, and window 5130 has a right edge 5134a.

[0220] Figure 500-Figure 5PPA sequence is shown in which the right edge 5124a of window 5120 moves toward the right edge 5134a of window 5130, and the right edge 5124a of window 5120 does not pair with the right edge 5134a of window 5130 because window 5120 overlaps with window 5130. In this embodiment, one or more pairing criteria are met when both angle and speed criteria are satisfied. For example, the angle criterion is satisfied when the angle of movement deviates from a predefined axis (e.g., an axis orthogonal to or perpendicular to the approaching edge) by less than an angle threshold (e.g., + / - 45° from a predefined axis). Therefore, according to some embodiments, the angle criterion is satisfied when the approach angle of movement is between pairing values ​​516a (e.g., 45°) and 516b (e.g., 315°). For example, the speed criterion is satisfied when the movement speed is less than a pairing speed threshold 518.

[0221] exist Figure 500 In this process, based on the movement vector 5126, the focus selector 502 is used to drag the window 5120 through the pane area 5122a. For example, based on the movement vector 5126, the right edge 5124a of the window 5120 is moved towards the right edge 5134a of the window 5130. Figure 500 As shown, the angle (e.g., 10°) of the movement vector 5126 relative to the normal associated with the right edge 5134a of window 5130 is between paired values ​​516a and 516b. Furthermore, in Figure 500 In this case, the velocity associated with the movement vector 5126 is less than the paired velocity threshold 518.

[0222] However, as Figure 5PP As shown, the right edge 5124a of window 5120 does not align with the right edge 5134a of window 5130. For example, the movement of window 5120 continues according to the movement vector 5126 because window 5120 overlaps with window 5130 at least partially before the movement.

[0223] Figure 5 QQ - Figure 5 TT The diagram shows windows 5140 and 5150 displayed within display area 501 of monitor 450. For example, window 5140 corresponds to a first application, and window 5150 corresponds to a second application different from the first application. For example, windows 5140 and 5150 correspond to the same application.

[0224] like Figure 5 QQ - Figure 5 TT As shown, window 5140 includes a pane area 5142a and a content area 5142b, and window 5140 has a right edge 5144a. Similarly, window 5150 includes a pane area 5152a and a content area 5152b, and window 5150 has a left edge 5154a. Figure 5QQ-Figure 5RRAs shown, the left edge 5154a of window 5150 is associated with an attraction region 5156. For example, the attraction region 5156 extends N pixels from the left edge 5154a of window 5150. For example, if window 5140 moves within the attraction region 5156 associated with window 5150 (e.g., the movement stops within the attraction region 5156), then the right edge 5144a of window 5140 is magnetically attracted to the left edge 5154a of window 5150. Therefore, the right edge 5144a of window 5140 is close to (e.g., in contact with) and does not overlap with the left edge 5154a of window 5150.

[0225] Figure 5QQ-Figure 5RR A sequence is shown in which the right edge 5144a of window 5140 is moved within an attraction area 5156 associated with the left edge 5154a of window 5150, and the right edge 5144a of window 5140 is close to the left edge 5154a of window 5150. Figure 5 QQ In this process, based on the movement vector 5146, the focus selector 502 is used to drag the window 5140 through the pane area 5142a. For example, based on the movement vector 5146, the right edge 5144a of the window 5140 is moved toward the left edge 5154a of the window 5150. Figure 5RR A window 5140 is shown within the attraction region 5156 after the movement vector 5146 is completed.

[0226] Therefore, as Figure 5SS As shown, the right edge 5144a of window 5140 is close to the left edge 5154a of window 5150. For example, window 5140 is close to window 5150 because window 5140 is moved within the attraction area 5156 associated with window 5150.

[0227] Figure 5SS-Figure 5TT The sequence from which window 5140 separates from window 5150 is shown. Figure 5SS In this process, based on the movement vector 5156, the focus selector 502 is used to drag the window 5140 through the pane area 5142a. For example, the right edge 5144a of the window 5140 is moved substantially parallel to the left edge 5154a of the window 5150. Figure 5TT As shown, the right edge 5144a of window 5140 separates from the left edge 5154a of window 5150 without satisfying any separation criteria. For example, the movement of window 5140 continues according to the movement vector 5156 because windows 5140 and 5150 are not paired due to satisfying one or more pairing criteria.

[0228] In some implementations, when the windows are magnetically attracted and snapped together, they separate when a distance threshold is met. This creates threshold resistance, for example, when moving the first window toward or away from the second window. In some implementations, when the windows are magnetically attracted and snapped together, they separate without meeting the distance threshold. This creates no resistance, for example, when moving the first window toward or away from the second window.

[0229] Figure 5UU-Figure 5AAA The illustration shows windows 5160 and 5170 displayed within display area 501 of monitor 450. For example, window 5160 corresponds to a first application, and window 5170 corresponds to a second application, different from the first application. Alternatively, windows 5160 and 5170 may correspond to the same application. Figure 5UU-Figure 5AAA As shown, window 5160 includes a pane area 5162a and a content area 5162b, and window 5160 has a right edge 5164a and a top edge 5164b. Similarly, window 5170 includes a pane area 5172a and a content area 5172b, and window 5170 has a left edge 5174a and a top edge 5174b.

[0230] Figure 5UU-Figure 5WW A sequence is shown in which the right edge 5164a of window 5160 is dragged toward the left edge 5174a of window 5170, and the right edge 5164a of window 5160 is paired with the left edge 5174a of window 5170. In this embodiment, one or more pairing criteria are met when both angle and speed criteria are satisfied. For example, the angle criterion is satisfied when the angle of movement deviates from a predefined axis (e.g., an axis orthogonal to or perpendicular to the approached edge) by less than an angle threshold (e.g., + / - 45° from a predefined axis). Therefore, according to some embodiments, the angle criterion is satisfied when the approach angle of movement is between pairing values ​​516a (e.g., 45°) and 516b (e.g., 315°). For example, the speed criterion is satisfied when the movement speed is less than a pairing speed threshold 518.

[0231] exist Figure 5UU In this context, based on the movement vector 5166, the right edge 5164a of window 5160 is dragged using the focus selector 502. For example, based on the movement vector 5166, the right edge 5164a of window 5160 is dragged towards the left edge 5174a of window 5170. Figure 5UU As shown, the angle (e.g., 15°) of the movement vector 5166 relative to the normal associated with the left edge 5174a of window 5170 lies between paired values ​​516a and 516b. Furthermore, in Figure 5UU In this case, the velocity associated with the movement vector 5166 is less than the paired velocity threshold 518.

[0232] Therefore, as Figure 5VV As shown, the right edge 5164a of window 5160 is paired with the left edge 5174a of window 5170. For example, due to satisfying angle and speed criteria, dragging the right edge 5164a of window 5160 stops when it contacts the left edge 5174a of window 5170. The first scale (e.g., width) of window 5160 is... Figure 5UU The value is 5168a. After the right edge 5164a of window 5160 is paired with the left edge 5174a of window 5170, the first scale of window 5160 is... Figure 5VV The value is 5168b. For example, the value 5168a is less than the value 5168b. However, in Figure 5WW In the middle, the focus selector 502 moves past the left edge 5174a of the window 5170 according to the movement vector 5166.

[0233] Figures 5XX-5ZZ The sequence is shown, in which the top edge 5164b of window 5160 is dragged substantially parallel to the left edge 5174a of window 5170. Figure 5XX In this process, the top edge 5164b of window 5160 is dragged using focus selector 502, based on movement vector 5176. For example, the top edge 5164b of window 5160 is dragged substantially parallel to the left edge 5174a of window 5170, based on movement vector 5176.

[0234] Therefore, as Figures 5XX-5ZZ As shown, the right edge 5164a of window 5160 remains paired with the left edge 5174a of window 5170. The second scale (e.g., height) of window 5160 is... Figure 5XX The value is 5177a. After dragging the top edge 5164b substantially parallel to the left edge 5174a of window 5170, the second scale of window 5160 is... Figure 5YY-Figure 5ZZ The value is 5177b. For example, the value 5177a is less than the value 5177b. Figure 5YY-Figure 5ZZ As shown, the parallel movement of window 510 is constrained by line 5178a associated with the top edge 5174b of window 5170.

[0235] like Figure 5YY-Figure 5AAA As shown, the focus selector 502 moves according to the movement vector 5176, and the right edge 5164a of window 5160 remains paired with the left edge 5174a of window 5170 until the focus selector moves a threshold distance across line 5178a. When the threshold distance is met, window 5160... Figure 5ZZ-Figure 5AAA "Jump" between them so that they are displayed below the focus selector 502 (e.g., discontinuous animation).

[0236] Figure 5BBB-Figure 5GGG The diagram shows windows 5180 and 5190 displayed within display area 501 of monitor 450. For example, window 5180 corresponds to a first application, and window 5190 corresponds to a second application different from the first application. Alternatively, windows 5180 and 5190 may correspond to the same application. Figure 5BBB-Figure 5GGG As shown, window 5180 includes a pane area 5182a and a content area 5182b, and window 5180 has a right edge 5184a and a top edge 5184b. Similarly, window 5190 includes a pane area 5192a and a content area 5192b, and window 5190 has a left edge 5194a and a top edge 5194b.

[0237] Figure 5BBB-Figure 5CCC A sequence is shown in which the right edge 5184a of window 5180 moves toward the left edge 5194a of window 5190, and the right edge 5184a of window 5180 pairs with the left edge 5194a of window 5190 because the movement of window 5180 satisfies one or more pairing criteria. In this embodiment, one or more pairing criteria are satisfied when both an angle criterion and a distance criterion are satisfied. For example, an angle criterion is satisfied when the angle of movement deviates from a predefined axis (e.g., an axis orthogonal to or perpendicular to the approaching edge) by less than an angle threshold (e.g., a distance of + / - 45° from a predefined axis). Therefore, according to some embodiments, an angle criterion is satisfied when the approach angle of movement is between pairing values ​​516a (e.g., 45°) and 516b (e.g., 315°).

[0238] For example, the distance criterion is met when a portion of the movement value is less than the distance threshold 5188. For example, the distance criterion is met when the movement value is equal to or greater than the initial distance between the right edge 5184a of window 5180 and the left edge 5194a of window 5190, but the portion of the movement value extending beyond the left edge 5194a of window 5190 is also less than or equal to the distance threshold 5188.

[0239] exist Figure 5BBB In this process, based on the movement vector 5186, the focus selector 502 is used to drag the window 5180 through the pane area 5182a. For example, based on the movement vector 5186, the right edge 5184a of the window 5180 is moved towards the left edge 5194a of the window 5190. Figure 5BBB As shown, the angle (e.g., 15°) of the movement vector 5186 relative to the normal associated with the left edge 5194a of window 5190 lies between paired values ​​516a and 516b. Furthermore, in Figure 5BBBIn the value of the moving vector 5186, the portion extending beyond the left edge 5194a of the window 5190 is less than the distance threshold 5188.

[0240] Therefore, as Figure 5 CCC As shown, the right edge 5184a of window 5180 is paired with the left edge 5194a of window 5190. For example, due to satisfying angle and distance criteria, window 5180 stops moving when the right edge 5184a of window 5180 touches the left edge 5194a of window 5190.

[0241] Figure 5DDD-Figure 5EEE A sequence is shown in which, based on determining that the movement of window 5180 satisfies one or more separation criteria, window 5180 moves substantially parallel to the left edge 5194a of window 5190, while the right edge 5184a of window 5180 is unpaired from the left edge 5194a of window 5190. In this embodiment, one or more separation criteria are satisfied when either an angle criterion or a distance criterion is met. For example, an angle criterion is satisfied when the angle of movement deviates from a predefined axis (e.g., an axis orthogonal to or perpendicular to the paired edges) by an angle greater than an angle threshold (e.g., + / - 45° from a predefined axis). Therefore, according to some embodiments, an angle criterion is satisfied when the angle of movement is not between separation values ​​530a (e.g., 45°) and 530b (e.g., 135°). For example, a distance criterion is satisfied when a portion of the movement amount is greater than a distance threshold 5189. For example, the distance criterion is met when the portion of the movement value that extends beyond the line 5198a associated with the top edge 5194b of window 5190 is greater than the distance threshold 5189.

[0242] exist Figure 5DDD In this process, based on the movement vector 5196, the focus selector 502 is used to drag the window 5180 through the pane area 5182a. For example, based on the movement vector 5196, the right edge 5184a of the window 5180 is moved substantially parallel to the left edge 5194a of the window 5190. Figure 5DDD As shown, the angle (e.g., 75°) of the movement vector 5196 relative to the normal associated with the left edge 5194a of window 5190 lies between the separation values ​​530a and 530b. Furthermore, in Figure 5DDD In the value of the movement vector 5196, the portion extending beyond the left edge 5194a of the window 5190 and beyond the line 5198a associated with the top edge 5194b of the window 5190 is greater than the distance threshold 5189.

[0243] Therefore, as Figure 5 EEEAs shown, the right edge 5184a of window 5180 is unpaired from the left edge 5194a of window 5190. For example, window 5180 separates from window 5190 and moves according to the movement vector 5196 because it satisfies an angle criterion and a distance criterion associated with one or more separation criteria.

[0244] Figure 5FFF-Figure 5GGG A sequence is shown in which the right edge 5184a of window 5180 moves toward the left edge 5194a of window 5190, and the right edge 5184a of window 5180 does not pair with the left edge 5194a of window 5190 because the movement of window 5180 does not satisfy one or more pairing criteria. In this embodiment, one or more pairing criteria are satisfied when both angle and distance criteria are satisfied. For example, the angle criterion is satisfied when the angle of movement deviates from a predefined axis (e.g., an axis orthogonal to or perpendicular to the approaching edge) by less than an angle threshold (e.g., a distance of + / - 45° from a predefined axis). Therefore, according to some embodiments, the angle criterion is satisfied when the approach angle of movement is between pairing values ​​516a (e.g., 45°) and 516b (e.g., 315°).

[0245] For example, the distance criterion is met when a portion of the movement value is less than the distance threshold 5188. For example, the distance criterion is met when the movement value is equal to or greater than the initial distance between the right edge 5184a of window 5180 and the left edge 5194a of window 5190, but the portion of the movement value extending beyond the left edge 5194a of window 5190 is also less than or equal to the distance threshold 5188.

[0246] exist Figure 5FFF In this process, based on movement vector 5202, the focus selector 502 is used to drag window 5180 through pane area 5182a. For example, based on movement vector 5186, the right edge 5184a of window 5180 is moved towards the left edge 5194a of window 5190. Figure 5FFF As shown, the angle (e.g., 15°) of the movement vector 5202 relative to the normal associated with the left edge 5194a of window 5190 is between paired values ​​516a and 516b. Furthermore, in Figure 5FFF In the value of the moving vector 5202, the portion extending beyond the left edge 5194a of the window 5190 is greater than the distance threshold 5188.

[0247] Therefore, as Figure 5GGG As shown, the right edge 5184a of window 5180 does not pair with the left edge 5194a of window 5190. For example, the movement of window 5180 continues according to the movement vector 5202 and overlaps with window 5190 because the distance criterion is not met.

[0248] Figure 5HHH-Figure 5JJJ The diagram shows windows 5210, 5220, and 5230 displayed within display area 501 of monitor 450. For example, window 5210 corresponds to a first application, window 5220 corresponds to a second application, and window 5230 corresponds to a third application. Alternatively, windows 5210, 5220, and 5230 may correspond to the same application. Figure 5HHH-Figure 5JJJ As shown, window 5210 includes a pane area 5212a and a content area 5212b, and window 5210 has a left edge 5214a. Similarly, window 5220 includes a pane area 5222a and a content area 5222b, and window 5220 has a right edge 5224a. Similarly, window 5230 includes a pane area 5232a and a content area 5232b, and window 5230 has a right edge 5234a and a left edge 5234b.

[0249] Figure 5HHH-Figure 5JJJ A sequence is shown in which the left edge 5214a of window 5210 moves toward the right edge 5234a of window 5230, and the left edge 5214a of window 5210 does not pair with the right edge 5234a of window 5230 because window 5230 is partially occluded by window 5220. In this embodiment, one or more pairing criteria are met when both angle and speed criteria are satisfied. For example, the angle criterion is satisfied when the angle of movement deviates from a predefined axis (e.g., an axis orthogonal to or perpendicular to the approaching edge) by less than an angle threshold (e.g., + / - 45° from a predefined axis). Therefore, according to some embodiments, the angle criterion is satisfied when the approach angle of movement is between pairing values ​​5218a (e.g., 135°) and 5218b (e.g., 225°). For example, the speed criterion is satisfied when the movement speed is less than a pairing speed threshold 518.

[0250] exist Figure 5HHH In this context, based on the movement vector 5216, the focus selector 502 is used to drag the window 5210 through the pane area 5212a. For example, based on the movement vector 5216, the left edge 5214a of the window 5210 is moved towards the right edge 5234a of the window 5230. Figure 5HHH As shown, the angle (e.g., 185°) of the movement vector 5216 relative to the normal associated with the right edge 5234a of the window 5230 is between paired values ​​5218a and 5218b. Furthermore, in Figure 5HHH In this case, the velocity associated with the movement vector 5216 is less than the paired velocity threshold 518.

[0251] However, as Figure 5III As shown, the left edge 5214a of window 5210 does not align with the right edge 5234a of window 5230. For example, in Figure 5 JJJ In the middle, the movement of window 5210 continues according to the movement vector 5216 because the right edge 5234a of window 5230 is partially obscured by window 5220 (e.g., as shown in the image). Figure 5HHH-Figure 5JJJ (as shown by the dashed line within window 5220). Alternatively, according to some embodiments, assuming that the movement vector 5216 satisfies one or more pairing criteria, and that window 5220 occludes a portion of the left edge 5234b of window 5230 but not a portion of the right edge 5234a of window 5230 (not shown), then the left edge 5214a of window 5210 pairs with the right edge 5234a of window 5230.

[0252] Figure 5KKK-Figure 5MMM The diagram illustrates windows 5250, 5260, and 5270 displayed within the display area 501 of monitor 450. For example, window 5250 corresponds to a first application, window 5260 to a second application, and window 5270 to a third application. Alternatively, windows 5250, 5260, and 5270 may correspond to the same application. Figure 5KKK-Figure 5MMM As shown, window 5250 includes a pane area 5252a and a content area 5252b, and window 5250 has a left edge 5254a. Similarly, window 5260 includes a pane area 5262a and a content area 5262b, and window 5260 has a right edge 5264a. Similarly, window 5270 includes a pane area 5272a and a content area 5272b, and window 5270 has a right edge 5274a and a left edge 5274b.

[0253] Figure 5KKK-Figure 5MMM A sequence is shown in which the left edge 5254a of window 5250 moves toward the right edge 5264a of window 5260, and the left edge 5254a of window 5250 does not pair with the right edge 5264a of window 5260 because window 5260 is partially occluded by window 5270. In this embodiment, one or more pairing criteria are met when both angle and speed criteria are satisfied. For example, the angle criterion is satisfied when the angle of movement deviates from a predefined axis (e.g., an axis orthogonal to or perpendicular to the approaching edge) by less than an angle threshold (e.g., + / - 45° from a predefined axis). Therefore, according to some embodiments, the angle criterion is satisfied when the approach angle of movement is between pairing values ​​5218a (e.g., 135°) and 5218b (e.g., 225°). For example, the speed criterion is satisfied when the movement speed is less than a pairing speed threshold 518.

[0254] exist Figure 5KKKIn this process, based on the movement vector 5256, the focus selector 502 is used to drag the window 5250 through the pane area 5252a. For example, based on the movement vector 5256, the left edge 5254a of the window 5250 is moved towards the right edge 5264a of the window 5260. Figure 5KKK As shown, the angle (e.g., 185°) of the movement vector 5256 relative to the normal associated with the right edge 5264a of window 5260 is between paired values ​​5218a and 5218b. Furthermore, in Figure 5KKK In this case, the velocity associated with the movement vector 5256 is less than the paired velocity threshold 518.

[0255] However, as Figure 5MMM As shown, the left edge 5254a of window 5250 does not align with the right edge 5264a of window 5260. For example, in Figure 5LLL-Figure 5MMM In the middle, the movement of window 5250 continues according to the movement vector 5256, because the right edge 5264a of window 5260, which is associated with the movement vector 5256, is occluded by window 5270 (e.g., as...). Figure 5KKK-Figure 5MMM (As shown by the dashed line within window 5270). Therefore, in this embodiment, window 5270 obscures the position where the movement vector 5256 on the right edge 5264a of window 5260 contacts the right edge 5264a of window 5260.

[0256] Figures 6A-6Y The accompanying figures illustrate example user interfaces used for resizing windows according to some implementation schemes. The user interfaces in these figures are used to illustrate the processes described below, including... Figures 9A-9D The process in question. Although some embodiments are given with reference to input on a touch-sensitive surface 451 separate from the display 450, in some embodiments the device detects input on a touchscreen display (which combines a touch-sensitive surface and a display), such as Figure 4A As shown in the image.

[0257] Figures 6A-6G The image shows a window 610 displayed within the display area 601 of the monitor 450. (Example) Figures 6A-6G As shown, window 610 includes a pane area 612a and a content area 612b. Window 610 has a left edge 614a, a top edge 614b, a right edge 614c, and a bottom edge 614d. For example, window 610 corresponds to a first application. Figures 6A-6Y The taskbar 604 within the display area 601 is shown, with multiple taskbar icons 607-A, 607-B, and 607-C corresponding to different applications. Figures 6A-6Y In the middle, the display area 601 includes a top edge 606a, a left edge 606b, a bottom edge 606c, and a right edge 606d.

[0258] Figures 6A-6B The sequence is shown in which the two edges of window 610 move to the corresponding edges of display area 601 in response to a second input type (e.g., a static input such as a double-click) at the corner of window 610 (e.g., to expand the window by two scales). Figure 6A The focus selector 602 is shown above the corner of window 610, associated with the intersection of the left edge 614a and the top edge 614b of window 610. In some embodiments, when positioned above the window edge, the focus selector 602 is displayed as a double-headed arrow to indicate that the user is interacting with the edge of the window. In some embodiments, when positioned outside the window, within the window's pane area, content area, or display area 601, the focus selector 602 is displayed as a cursor.

[0259] like Figure 6B As shown, in response to Figure 6A Double-clicking the center focus selector 602 at the corner of window 610 moves the left edge 614a of window 610 to the left edge 606b of display area 601, and the top edge 614b of window 610 to the top edge 606a of display area 601. Figure 6B As shown, the right edge 614c of window 610 does not move to the right edge 606d of display area 601, and the bottom edge 614d of window 610 does not move to the bottom edge 606c of display area 601. Figures 6A-6B As shown, the position of focus selector 602 will not be affected by... Figure 6A The static input changes.

[0260] In some implementations, the extended scale outline of window 610 is displayed within display area 601 (e.g., as shown in the image). Figure 6A (As shown by the dashed line). The first scale (e.g., width) of window 610 has Figure 6A The values ​​616a and Figure 6B The value 616b. For example, the value 616b is greater than the value 616a. Similarly, the second scale (e.g., height) of window 610 has Figure 6A The value 618a and Figure 6B The value is 618b. For example, the value 618b is greater than the value 618a.

[0261] Figures 6C-6D The sequence is shown in which the two edges of window 610 move to their previous positions in response to a second input type (e.g., a static input such as a double-click) at the corner of window 610 by focus selector 602. Figure 6C The focus selector 602 is shown above the corner in window 610, associated with the intersection of the left edge 614a and the top edge 614b. (See image.) Figure 6DAs shown, in response to Figure 6C Double-clicking the center focus selector 602 on the corner of window 610 moves the left edge 614a and the top edge of window 610 to its center focus position. Figure 6A The previous position in the text. For example... Figures 6C-6D As shown, the position of focus selector 602 will not be affected by... Figure 6C The static input changes. The first scale (e.g., width) of window 610 has Figure 6C The value 616b and Figure 6D The value 616a. For example, the value 616b is greater than the value 616a. Similarly, the second scale (e.g., height) of window 610 has Figure 6C The value 618b and Figure 6D The value is 618a. For example, the value 618b is greater than the value 618a.

[0262] Figures 6E-6G The sequence is shown in which the size of two scales of window 610 is reset in response to a first input type (e.g., selection and then movement, such as a click and drag gesture) at a corner of window 610 by focus selector 602. Figure 6E This illustrates the corner in window 610 associated with the intersection of the right edge 614c and the top edge 614b, dragged using focus selector 602 according to movement vector 615. (See diagram.) Figures 6F-6G As shown, according to Figure 6E The movement vector 615 of the corner associated with the intersection of the window 610 with the right edge 614c and the top edge 614b is dragged, the window 610 expands at a first scale (e.g., width), and the window 610 expands at a second scale (e.g., height).

[0263] The first dimension (e.g., width) of window 610 has Figure 6E The value 616a in Figure 6F The value 616c and Figure 6G The value 616d in the example. For example, the value 616d is greater than the value 616c, and the value 616c is greater than the value 616a. Similarly, the second scale (e.g., height) of window 610 has Figure 6E The value 618a in Figure 6F The value 618c and Figure 6G The value is 618d. For example, the value 618d is greater than the value 618c, and the value 618c is greater than the value 618a.

[0264] Figures 6H-6K The illustration shows windows 620 and 630 displayed within display area 601 of monitor 450. For example, window 620 corresponds to a first application, and window 630 corresponds to a second application different from the first application. Alternatively, windows 620 and 630 may correspond to the same application. Figures 6H-6K As shown, window 620 includes a pane area 622a and a content area 622b, and window 620 has a right edge 624a and a left edge 624b. Similarly, window 630 includes a pane area 632a and a content area 632b, and window 630 has a right edge 634a.

[0265] Figures 6H-6J A sequence is shown in which, in response to user input corresponding to a first input type (e.g., select-and-move, such as a click and drag gesture) at the edge of window 610 by focus selector 602, the size of window 620 is reset in a first direction (e.g., from left to right). Figure 6H This illustrates dragging the right edge 624a of window 620 towards the right edge 606d of display area 601 using focus selector 602 according to movement vector 625. Figures 6H-6J As shown, based on user input that drags the right edge 624a of window 620 to the right edge 606d of display area 601, the first scale (e.g., width) of window 620 is extended to the right edge 606d of display area 601 in a first direction (e.g., from left to right). The first scale (e.g., width) of window 620 has Figure 6H The value 626a in Figure 6I The value 626b and Figure 6J The value is 626c. For example, the value 626c is greater than the value 626b, and the value 626b is greater than the value 626a.

[0266] Figures 6J-6K The sequence is shown in which the size of the window 620 is reset in a second direction (e.g., from right to left) when the user input corresponding to the focus selector 602 for a first input type (e.g., select and then move, such as a click and drag gesture) meets one or more extended criteria. Figure 6J This illustrates holding the focus selector 602 at the right edge 606d of the display area 601. For example, in Figure 6JAfter the right edge 624a of window 620 is dragged to the right edge 606d of display area 601, user input keeps the right edge 624a of window 620 at the right edge of display area 601. In some embodiments, one or more extension criteria are met when the click and drag input keeps the window edge at the edge of the display area for a predefined period of time. In some embodiments, one or more extension criteria are met when the magnitude of the click and drag input moves the window edge above the edge of the display area by a predefined distance. In some embodiments, haptic output is generated when the window (e.g., window 620) is extended to the boundary of the user interface (e.g., the edge of another window or the edge of the display area) based on input from a device with a haptic output generator (e.g., a touchpad with a haptic output generator) while the window is moved (or resized) based on input from a device with a haptic output generator (e.g., a touchpad with a haptic output generator). In contrast, in some implementations, if the window is not expanded (e.g., because inputs to move or resize the window do not meet the expansion criteria), no haptic output is generated to indicate that the window has expanded to the boundaries of the user interface.

[0267] like Figure 6K As shown, when the user input satisfies Figure 6G When one or more of the expansion criteria are used, the first scale (e.g., width) of window 620 is extended to the right edge 634a of window 630 in a second direction (e.g., from right to left). For example, the left edge 624b of window 620 is extended to the right edge 634a of window 630. For example, assuming that window 630 is not located between the left edge 624b of window 620 and the left edge 606b of display area 601, the left edge 624b of window 620 will move to the left edge 606b of display area 601. Therefore, in Figure 6K In this context, the expansion of the first scale of window 620 in the second direction is constrained by the intervening window 630. The first scale of window 620 (e.g., width) has... Figure 6J The value 626c and Figure 6K The value is 626d. For example, the value 626d is greater than the value 626c.

[0268] Figure 6L-Figure 6O The image shows a window 640 displayed within the display area 601 of the monitor 450. (Example) Figure 6L-Figure 6O As shown, window 640 includes a pane area 642a and a content area 642b. Window 640 has a right edge 644a, a top edge 644b, a left edge 644c, and a bottom edge 644d. For example, window 640 corresponds to a first application.

[0269] Figure 6L-Figure 6MThe sequence is shown in which the first edge of window 640 moves to the corresponding first edge of display area 601 in response to a second input type (e.g., a static input such as a double-click) on the first edge of window 640 by focus selector 602. Figure 6L The focus selector 602 is shown above the right edge 644a of the window 640.

[0270] like Figure 6M As shown, in response to Figure 6L Double-clicking the center focus selector 602 on the right edge 644a of window 640 moves the right edge 644a of window 640 to the right edge 606d of display area 601. For example... Figure 6M As shown, the top edge 644b of window 640 does not move to the top edge 606a of display area 601, the left edge 644c of window 610 does not move to the left edge 606b of display area 601, and the bottom edge 644d of window 610 does not move to the bottom edge 606c of display area 601. Figure 6L-Figure 6M As shown, the position of focus selector 602 will not be affected by... Figure 6L The static input changes.

[0271] In some implementations, the extended-scale outline of window 640 is displayed within display area 601 (e.g., as shown in the image). Figure 6L (As shown). The first scale (e.g., width) of window 610 has Figure 6L The value 646a and Figure 6M The value is 646b. For example, the value 646b is greater than the value 646a.

[0272] Figures 6N-6O The sequence is shown in which the second edge of window 640 moves to the corresponding second edge of display area 601 in response to a second input type (e.g., a static input such as a double-click) on the second edge of window 640 by focus selector 602. Figure 6N The focus selector 602 is shown above the top edge 644b of the window 640.

[0273] like Figure 6O As shown, in response to Figure 6N Double-clicking the center focus selector 602 on the top edge 644b of window 640 moves the top edge 644b of window 640 to the top edge 606a of display area 601. For example... Figure 6O As shown, the left edge 644c of window 610 does not move to the left edge 606b of display area 601, and the bottom edge 644d of window 610 does not move to the bottom edge 606c of display area 601. Figures 6N-6O As shown, the position of focus selector 602 will not be affected by... Figure 6N The static input changes.

[0274] In some implementations, the extended-scale outline of window 640 is displayed within display area 601 (e.g., as shown in the image). Figure 6N (As shown). The second scale (e.g., height) of window 640 has Figure 6N The value 648a and Figure 6O The value is 648b. For example, the value 648b is greater than the value 648a.

[0275] Figures 6P-6S The illustration shows windows 650 and 660 displayed within display area 601 of monitor 450. For example, window 650 corresponds to a first application, and window 660 corresponds to a second application different from the first application. Alternatively, windows 650 and 660 may correspond to the same application. Figures 6P-6S As shown, window 650 includes a pane area 652a and a content area 652b, and window 650 has a right edge 654a, a bottom edge 654b, a left edge 654c, and a top edge 654d. Similarly, window 660 includes a pane area 662a and a content area 662b, and window 660 has a right edge 664a.

[0276] Figures 6P-6Q The sequence is shown in which the edge of window 650 moves to the intervention edge of window 660 in response to a second input type (e.g., a static input such as a double-click) on the edge of focus selector 602 at the edge of window 650, the intervention edge being between the edge of window 650 and the corresponding edge of display area 601. Figure 6P The focus selector 602 is shown above the right edge 654a of the window 650.

[0277] like Figure 6Q As shown, in response to Figure 6P Double-clicking the center focus selector 602 on the right edge 654a of window 650 moves the right edge 654a of window 650 to the right edge 664a of window 660. For example... Figure 6Q As shown, the bottom edge 654b of window 650 does not move to the bottom edge 606c of display area 601, the left edge 654c of window 650 does not move to the left edge 606b of display area 601, and the top edge 654d of window 650 does not move to the top edge 606a of display area 601. Figures 6P-6Q As shown, the position of focus selector 602 will not be affected by... Figure 6P The static input changes. In some implementations, the outline of the expanded scale of window 650 is displayed within display area 601 (e.g., as shown in the image). Figure 6P (As shown).

[0278] For example, assuming window 660 is not located between the right edge 654a of window 650 and the right edge 606d of display area 601, the right edge 654a of window 650 will move to the right edge 606d of display area 601. Therefore, in Figure 6Q In this context, the movement of the right edge 654a of window 650 is constrained by the intervening window 660. The first scale (e.g., width) of window 650 has... Figure 6P The value 656a and Figure 6Q The value is 656b. For example, the value 656b is greater than the value 656a.

[0279] Figures 6R-6S The sequence is shown in which the edge of window 650 moves to its previous position in response to a second input type (e.g., a static input such as a double-click) on the edge of window 650 by focus selector 602. Figure 6R The focus selector 602 is shown above the right edge 654a of window 650. (See image.) Figure 6S As shown, in response to Figure 6R Double-clicking the center focus selector 602 on the right edge 654a of window 650 moves the right edge 654a of window 650 to its center focus position. Figure 6P The previous position in the text. For example... Figures 6R-6S As shown, the position of focus selector 602 will not be affected by... Figure 6R The static input changes. The first scale (e.g., width) of window 650 has Figure 6R The value 656b and Figure 6S The value is 656a. For example, the value 656b is greater than the value 656a.

[0280] Figure 6T-Figure 6U The illustration shows windows 670, 680, and 690 displayed within display area 601 of monitor 450. For example, window 670 corresponds to a first application, window 680 to a second application, and window 690 to a third application. Alternatively, windows 670, 680, and 690 may correspond to the same application. Figure 6T-Figure 6U As shown, window 670 includes a pane area 672a and a content area 672b, and window 670 has a top edge 674a, a right edge 674b, a bottom edge 674c, and a left edge 674d. Similarly, window 680 includes a pane area 682a and a content area 682b, and window 680 has a top edge 684a. Similarly, window 690 includes a pane area 692a and a content area 692b, and window 690 has a bottom edge 694a. Figure 6R As shown, window 670 overlaps at least partially with window 680.

[0281] Figure 6T-Figure 6UThe sequence is shown in which the edge of window 670 moves to the intervention edge of window 690 in response to a second input type (e.g., a static input such as a double-click) on the edge of focus selector 602 at the edge of window 670, the intervention edge being between the edge of window 670 and the corresponding edge of display area 601. Figure 6T The focus selector 602 is shown above the top edge 674a of the window 670.

[0282] like Figure 6U As shown, in response to Figure 6T Double-clicking the center focus selector 602 on the top edge 674a of window 670 moves the top edge 674a of window 670 to the bottom edge 694a of window 690. For example... Figure 6U As shown, the right edge 674b of window 670 does not move to the right edge 606d of display area 601, the bottom edge 674c of window 670 does not move to the bottom edge 606c of display area 601, and the left edge 674d of window 670 does not move to the left edge 606b of display area 601. Figure 6T-Figure 6U As shown, the position of focus selector 602 will not be affected by... Figure 6T The static input changes. In some implementations, the outline of the expanded scale of window 670 is displayed within display area 601 (e.g., as shown in the image). Figure 6T (As shown).

[0283] For example, assuming window 690 is not located between the top edge 674a of window 670 and the top edge 606a of display area 601, the top edge 674a of window 670 will move to the top edge 606a of display area 601. Therefore, in Figure 6U In the middle, the movement of the top edge 674a of window 670 is constrained by the intervention window 690.

[0284] Furthermore, the top edge 674a of window 670 is not constrained by the top edge 684a of window 680 because, when using focus selector 602... Figure 6T Before double-clicking on the top edge 674a of window 670, window 670 at least partially overlaps with window 680. In this way, the movement of the top edge 674a of window 670 is constrained by the intervening window 690, but not by the overlapping (background) window 680. Similarly, in some embodiments, the movement of the window edge to the edge of the display area is not constrained by the occluded edge of the window. A first scale (e.g., width) of window 670 has... Figure 6T The values ​​676a and Figure 6U The value is 676b. For example, the value 676b is greater than the value 676a.

[0285] Figure 6V-Figure 6YThe illustration shows windows 6100 and 6110 displayed within display area 601 of monitor 450. For example, window 6100 corresponds to a first application, and window 6110 corresponds to a second application different from the first application. Alternatively, windows 6100 and 6110 may correspond to the same application. Figure 6V-Figure 6Y As shown, window 6100 includes a pane area 6102a and a content area 6102b, and window 6100 has a right edge 6104a, a bottom edge 6104b, a left edge 6104c, and a top edge 6104d. Similarly, window 6110 includes a pane area 6112a and a content area 6112b, and window 6110 has a left edge 6114a.

[0286] Figure 6V-Figure 6Y The sequence is shown in which the two edges of window 6100 move to the corresponding edges of display area 601 in response to a second input type (e.g., a static input such as a double-click) at the corner of window 6100 by focus selector 602. Figure 6V The focus selector 602 is shown above the corner of window 6100, which is associated with the intersection of the right edge 6104a and the bottom edge 6104b of window 6100.

[0287] like Figure 6W As shown, in response to Figure 6V Double-clicking the center focus selector 602 at the corner of window 6100 moves the right edge 6104a of window 6100 to the left edge 6114a of window 6110, and the bottom edge 6104b of window 6100 to the bottom edge 606c of display area 601. For example... Figure 6W As shown, the left edge 6104c of window 6100 does not move to the left edge 606b of display area 601, and the top edge 6104d of window 6100 does not move to the top edge 606a of display area 601. Figure 6V-Figure 6W As shown, the position of focus selector 602 will not be affected by... Figure 6W The static input changes. In some implementations, the outline of the expanded scale of window 6100 is displayed within display area 601 (e.g., as shown in the image). Figure 6V (As shown).

[0288] In some implementations, the window size extends to the edge of the display area without being constrained by the taskbar 604. In other implementations, the window size extends to the edge of the display area but is constrained by the taskbar 604.

[0289] For example, assuming window 6110 is not located between the right edge 6104a of window 6100 and the right edge 606d of display area 601, the right edge 6104a of window 6100 will move to the right edge 606d of display area 601. Therefore, in Figure 6W In this context, the movement of the right edge 6104a of window 6100 is constrained by the intervening window 6110. The first scale (e.g., width) of window 6100 has... Figure 6V The values ​​6106a and Figure 6W The value 6106b. For example, the value 6106b is greater than the value 6106a. Similarly, the second scale (e.g., height) of window 6100 has Figure 6V The value 6108a and Figure 6W The value is 6108b. For example, the value 6108b is greater than the value 6108a.

[0290] Figures 6X-6Y The sequence is shown, in which the edge of window 6100 moves to its previous position in response to a second input type (e.g., a static input such as a double-click) above the edge of window 6100. Figure 6Y As shown, in response to a double-click of the focus selector 602 on the right edge 6104a of the window 6100, the right edge 6104a of the window 6100 moves to its position on the right edge 6104a. Figure 6V The previous position in. Furthermore, as... Figure 6Y As shown, in response to a double-click of the focus selector 602 on the right edge 6104a of the window 6100, the bottom edge 6104b of the window 6100 remains in its position. Figures 6X-6Y As shown, the position of focus selector 602 will not be affected by... Figure 6X The static input changes. The first scale (e.g., width) of window 6100 has Figure 6X The value 6106b and Figure 6Y The value is 6106a. For example, the value 6106b is greater than the value 6106a.

[0291] Figures 7A-7R The accompanying figures illustrate example user interfaces used to provide tabbed window functionality according to some implementation schemes. The user interfaces in these figures are used to illustrate the processes described below, including... Figures 10A-10C The process in question. Although some embodiments are given with reference to input on a touch-sensitive surface 451 separate from the display 450, in some embodiments the device detects input on a touchscreen display (which combines a touch-sensitive surface and a display), such as Figure 4A As shown in the image.

[0292] Figures 7A-7B Windows 710, 720, and 730 are shown that are associated with application A displayed in display area 701 of display 450. Figures 7A-7MA taskbar 704 is shown within the display area 701, with multiple taskbar icons 706-A, 706-B, and 706-C corresponding to different applications. For example, taskbar icon 706-A corresponds to application A (e.g., a web browser application), taskbar icon 706-B corresponds to application B (e.g., a word processing application), and taskbar icon 706-C corresponds to application C (e.g., an image viewing and editing application).

[0293] like Figures 7A-7B As shown, window 710 includes a pane area 712a and a content area 712b. Similarly, window 720 includes a pane area 722a and a content area 722b. And window 730 includes a pane area 732a and a content area 732b. Figure 7A In the foreground, window 730 is displayed in the shadow represented by the pane area 732a.

[0294] like Figures 7A-7G As shown, a menu bar 709 for application A is also displayed within the display area 701. Figures 7A-7G In the menu bar 709, multiple display options are associated with commands, functions, and / or operations of application A. For example, the menu bar 709 for application A includes: a file display option 708a, which, when activated (e.g., using focus selector 702), causes a drop-down menu of file options associated with application A to be displayed over the display area 701; an edit display option 708b, which, when activated (e.g., using focus selector 702), causes a drop-down menu of edit options associated with application A to be displayed over the display area 701; a view display option 708c, which, when activated (e.g., using focus selector 702), causes a drop-down menu of view options associated with application A to be displayed over the display area 701; and a history display option 708d, which, when activated (e.g., using focus selector 702), causes a drop-down menu of view options associated with application A to be displayed over the display area 701. A list of previously viewed / accessed electronic documents (e.g., documents, images, web pages, etc.) is displayed over the display area 701; a bookmark enablement 708e, when activated (e.g., using focus selector 702), causes a list of bookmarked electronic documents (e.g., documents, images, web pages, etc.) associated with application A to be displayed over the display area 701; a window enablement 708f, when activated (e.g., using focus selector 702), causes a drop-down menu of window options associated with application A to be displayed over the display area 701; and a help enablement 708g, when activated (e.g., using focus selector 702), causes a drop-down menu of help options associated with application A to be displayed over the display area 701.

[0295] exist Figures 7A-7BIn this context, application A runs in the foreground, represented by the shadow of taskbar icon 706-A and the text description 707 in menu bar 709. Figures 7A-7B In this context, application A operates in windowed mode (e.g., non-fullscreen mode), while the operating system operates in manual tab mode (e.g., reference mode). Figures 7E-7G (More detailed description of the "manual" behavior). Thus, in some implementations, when a new window command is issued to application A (e.g., selecting a new window menu option, performing a predefined new window gesture, performing a predefined new window keystroke combination such as "Ctrl+N", performing a predefined new window verbal command, etc.), a new window is displayed in display area 701.

[0296] Figures 7A-7B The sequence is shown, in which a new window is added to the user interface in response to a new window command issued to the application when the application is in windowed mode. Figure 7B This illustrates the display of a window 740 associated with application A within display area 701 in response to a new window command issued to application A (e.g., via the "Ctrl+N" operation). Figure 7B As shown, window 740 includes a pane area 742a and a content area 742b. Figure 7A In the foreground, window 740 is displayed in the shadow represented by the pane area 742a.

[0297] Figures 7B-7D The sequence shown is a combination of multiple windows associated with a corresponding application, which are merged into a single window with tabs for each of the multiple windows. Figure 7B A focus selector 702 is also shown at a position corresponding to the window display 708f. Figure 7C It is shown that, in response to Figure 7B The window display is selected (e.g., by clicking or double-clicking the focus selector 702) and a drop-down menu 746 of the window options is overlaid on the display area 701.

[0298] like Figure 7CAs shown, the drop-down menu 746 of the window options includes: a new window enablement 748a, which, when activated (e.g., using focus selector 702), causes a new window associated with application A to be displayed; a new tab enablement 748b, which, when activated (e.g., using focus selector 702), causes a new tab associated with application A to be displayed; a "create tabbed window" enablement 748c, which, when activated (e.g., using focus selector 702), causes open windows to be merged into a single tabbed window; and maximize. All window enablement 748d, when activated (e.g., using focus selector 702), causes the open windows associated with application A to be displayed in full-screen mode; cascading window enablement 748e, when activated (e.g., using focus selector 702), causes the open windows associated with application A to be cascaded within display area 701; and display all window enablement 748e, when activated (e.g., using focus selector 702), causes the open windows associated with application A to be displayed in exposed mode.

[0299] Figure 7C The focus selector 702 is also shown at the location corresponding to the “Create tabbed window” enablement 748c. Figure 7D Showing response to Figure 7C In the middle (for example, by clicking or double-clicking the focus selector 702), the "Create tabbed window" option is selected, and the merged window 750 is displayed in the display area 701.

[0300] like Figure 7D As shown, the merged window 750 includes a pane area 752a, a content area 752b, and a tab bar 752c. Figure 7D In the tab bar 752c, there are tabs 756a associated with window 710, tabs 756b associated with window 720, tabs 756c associated with window 730, and tabs associated with window 740 (e.g., from...). Figure 7B The associated tab 756d. Figure 7D In this context, the tab 756d associated with window 740 is displayed in the foreground within the merged window 750, represented by the shadow of tab 756d. Figure 7D In the tab bar 752c, there is also an add capability indicator 758 for adding a new tab associated with application A to the merged window 750. For example, the new tab can be added as a foreground or background tab.

[0301] In some implementations, the "create tabbed window" capability 748c enables the display of windows associated with applications that do not have their own tab functionality within a tabbed window. This is achieved, for example, by resizing open windows to the same size and stacking them on top of each other, such that a foreground window is displayed on top of the stack. In this embodiment, tabs are displayed within a virtual tab bar superimposed on the top window of the window stack by the operating system. In some implementations, if another tab is selected within the tab bar, the window associated with the selected tab is moved to the top of the window stack.

[0302] In some implementations, if a close tab command is issued to a tab, the operating system issues a command to the application to close the window corresponding to that tab. In some implementations, if a close / exit command is issued to the merged window, the operating system issues a command to the application to close each window corresponding to a tab in the merged window. According to some implementations, tabs can be dragged out from the tab bar to remove windows from the window stack and view the windows separated from the window stack. According to some implementations, windows can be dragged into the merged window and thus added to the merged window as new tabs (e.g., as foreground or background tabs). Therefore, in some implementations, tab functionality is enabled by the operating system for applications that do not have their own tab functionality.

[0303] Figures 7E-7G The sequence shows changes to the tab settings associated with the operating system (OS). Figure 7E The overlay on windows 710, 720, and 730 is shown (e.g., from...). Figure 7A The taskbar menu 760 is located on the operating system. For example, taskbar menu 760 includes several options associated with the operating system. For example, taskbar menu 760 can be accessed through the Control Panel or the System Preferences interface. Figure 7E As shown, the taskbar menu 760 includes: a slider 762a for adjusting the size of the taskbar 704; a zoom slider 762d for adjusting the size of the taskbar 704; a pick menu 762c for changing (e.g., scaling or sprite effect) the animation used to minimize the window; and a pick menu 762d for changing tab preferences (e.g., a "manual" mode for opening new windows as windows, a "always" mode for opening new windows as tabs, or a "fullscreen only" mode for opening new windows as tabs only in fullscreen mode). Figure 7E In this context, the current setting associated with pick menu 762c is "Sprite Effect," and the current setting associated with pick menu 762d is "Manual" behavior. Thus, for example, in... Figures 7A-7D The "manual" behavior has been implemented.

[0304] In some implementations, the tab preferences associated with the pick menu 762d apply to applications that do not have their own tab functionality. In some implementations, the tab preferences associated with the pick menu 762d apply to all applications. In some implementations, the tab preferences associated with the pick menu 762d apply to all applications that save the selection of applications included in the exit list.

[0305] Figure 7E The focus selector 702 is also shown at the position corresponding to the current setting used to pick up menu 762d. Figure 7F Several options for the pick menu 762d, which is overlaid on the display area 701, are shown. For example... Figure 7F As shown, the pick menu 762d includes a "Manual" option 764a, wherein a new window operation issued to the application opens a window, and a new tab operation issued to the application opens a new tab when the application has its own tab functionality. The pick menu 762d also includes a "Always" option 764b, wherein a new window operation issued to the application opens a new tab, and (optionally) a new tab operation issued to the application opens a new window. The pick menu 762d also includes a "Fullscreen Only" option 764c, wherein a new window operation issued to the application opens a new tab when in fullscreen mode, and (optionally) a new tab operation issued to the application when in fullscreen mode opens a new window.

[0306] Figure 7F The focus selector 702 is also shown at the location corresponding to the "always" option 764b. Figure 7G It shows the response in Figure 7F In the middle (e.g., by clicking or double-clicking the focus selector 702), select the "Always" option 764b, which is the current setting associated with the pick menu 762d. Thus, for example, in Figures 7H-7M The "always" behavior was achieved.

[0307] Figure 7H A window 760 associated with application B and a window 770 associated with application A displayed within the display area 701 of the monitor 450 are shown. Figure 7H As shown, window 760 includes a pane area 762a and a content area 762b. Similarly, window 770 includes a pane area 772a and a content area 772b. Figure 7H In the foreground, window 760 is displayed in the shadow of pane area 762a. Figure 7H In the foreground, application B runs as indicated by the shadow of taskbar icon 706-B and text description 707 in menu bar 709.

[0308] like Figures 7H-7J As shown, a menu bar 709 for application B is also displayed within the display area 701. Figures 7H-7J In the context of application B, menu bar 709 includes multiple function indicators associated with commands, functions, and / or operations of application B. For example, menu bar 709 for application B includes: a file function indicator 778a, which, when activated (e.g., using focus selector 702), causes a drop-down menu of file options associated with application B to cover display area 701; an edit function indicator 778b, which, when activated (e.g., using focus selector 702), causes a drop-down menu of edit options associated with application B to cover display area 701; a view function indicator 778c, which, when activated (e.g., using focus selector 702), causes a drop-down menu of view options associated with application B to cover display area 701; and an insert function indicator 778d, which, when activated (e.g., using focus selector 702), causes a drop-down menu of view options associated with application B to cover display area 701; and an insert function indicator 778d, which, when activated (e.g., using focus selector 702), causes a drop-down menu of edit ... When activated, 702) causes the drop-down menu of editing options associated with application B to be overlaid on display area 701; when activated (e.g. using focus selector 702), format enable display 778e causes the drop-down menu of formatting options associated with application B to be overlaid on display area 701; when activated (e.g. using focus selector 702), window enable display 778f causes the drop-down menu of window options associated with application B to be overlaid on display area 701; and when activated (e.g. using focus selector 702), help enable display 778g causes the drop-down menu of help options associated with application B to be overlaid on display area 701.

[0309] exist Figures 7H-7M In this context, application B operates in windowed mode (e.g., non-fullscreen mode), and the operating system operates in automatic tabbed mode (e.g., reference mode). Figures 7E-7G (More detailed description of the "manual" behavior). Thus, in some implementations, when a new window command is issued to application B (e.g., selecting a new window menu option, performing a predefined new window gesture, performing a predefined combination of keystrokes such as "Ctrl+N", performing a predefined verbal command for a new window, etc.), a merged window is displayed, which has a background tab associated with the previous foreground window (e.g., window 760) and a new foreground tab associated with the new foreground window.

[0310] Figures 7H-7I The sequence is shown, in which a new window is added for the presentation of the second application as a foreground tab within the merged window. Figure 7I This illustrates the display of a merged window 765 within display area 701 in response to a new window command issued to application B (e.g., via the "Ctrl+N" operation). Figure 7I As shown, the merged window 765 includes a pane area 767a, a content area 767b, and a tab bar 767c. Figure 7I In the foreground, the merged window 765 is displayed in the shadow represented by the pane area 767a.

[0311] like Figure 7I As shown, the tab bar 767c includes elements corresponding to window 760 (e.g., from...). Figure 7H Tab 764a and tab 764b, corresponding to the new window associated with application B. Figure 7I In the foreground, the tab bar 764b associated with the new window is displayed within the merged window 765, represented by the shadow of tab 764b. Figure 7I In the tab bar 767c, there is also an add capability 766 for adding a new tab associated with application B to the merged window 765. For example, adding a new tab as a foreground or background tab.

[0312] In some implementations, merging windows 765 enables the display of windows associated with applications that do not have their own tab functionality within a tabbed window. Thus, for example, windows corresponding to tabs 764a and 764b are resized to the same size and stacked on top of each other, such that a foreground window is displayed on top of the window stack (e.g., Figure 7I (A new window associated with tab 764b). According to some implementations, the tab is displayed within a virtual tab bar overlaid on the new foreground window by the operating system. Therefore, in some implementations, the operating system enables tab functionality for applications that do not have their own built-in tab functionality.

[0313] Figures 7I-7J This shows the sequence of changing the foreground tab within the merged window. Figure 7I The focus selector 702 is also shown at the location corresponding to tab 764a. Figure 7J It is shown that, in response to Figure 7I In the middle (e.g., by clicking or double-clicking using focus selector 702), tab 764a is selected, and window 760 (e.g., from...) Figure 7H The associated tab 764a is displayed in the foreground within the merged window 765, as indicated by the shadow of tab 764a. Thus, according to some implementations, window 760 (e.g., from...) is... Figure 7H Move to the top of the window stack associated with tabs 764a and 764b, and redisplay the virtual tab bar 767c on top of window 760.

[0314] Figures 7J-7KThe sequence is shown, in which a window for the first application rendering is added as a foreground tab in a merged window. Figure 7J It is also shown that the window 770 associated with application A can be dragged to the tab bar 767c of the merged window 765 via the pane area 772a using the focus selector 702. Figure 7K This shows the response to dragging window 770 to... Figure 7J The tab bar 767c corresponds to window 770 (e.g., from...). Figure 7J Tab 764c. Figure 7K In the middle, corresponding to window 770 (for example, from Figure 7J The tab 764c is displayed in the foreground within the merged window 765, represented by the shadow of tab 764c. Furthermore, in Figure 7K In the foreground, application A runs as indicated by the shadow of taskbar icon 706-A and text description 707 in menu bar 709.

[0315] Thus, according to some implementation schemes, window 770 (e.g., from...) Figure 7J Add it to the top of the window stack associated with tabs 764a, 764b, and 764c, and redisplay the virtual tab bar 767c on top of window 770. Therefore, the merged window 765 includes tabs 764a and 764b corresponding to the window associated with application B and tab 764c corresponding to the window associated with application A.

[0316] Figures 7K-7L This shows the sequence of tabs rearranged within the tab bar of the merged window. Figure 7K It also shows using the focus selector 702 to drag the tab 764c from a first position to a second position within the tab bar 767c. Figure 7L It shows the response to Figure 7K In the tab bar 767c, drag tabs 764c, 764a, and 764b (for example, with...). Figure 7K (Compared to different locations) between tabs 764c.

[0317] Figures 7L-7M This shows the sequence of tabs dragged out from the tab bar of the merged window. Figure 7L The diagram shows how to drag tab 764b from the tab bar 767c of the merged window 765 using focus selector 702. Figure 7M It is shown that, in response to Figure 7L Drag tab 764b from tab bar 767c to display window 780 associated with application B within display area 701. For example, window 780 corresponds to... Figure 7L Tab 764b in the [reference] section.

[0318] like Figure 7M As shown, window 780 includes a pane area 782a and a content area 782b. Figure 7M In the foreground, window 780 is displayed in the shadow represented by the pane area 782a. Figure 7M In the foreground, application B runs as indicated by the shadow of taskbar icon 706-B and text description 707 in menu bar 709.

[0319] Figures 7N-7O A window 790 is shown that is associated with application C displayed within display area 701 of monitor 450. (Example) Figures 7N-7O As shown, window 790 includes a pane area 792a and a content area 792b. Figure 7N In the foreground, window 790 is displayed in the shadow represented by the pane area 792a.

[0320] like Figures 7N-7O As shown, a menu bar 709 for application C is also displayed within the display area 701. Figures 7N-7O In the context of application C, menu bar 709 includes multiple indicator symbols associated with commands, functions, and / or operations of application C. For example, menu bar 709 for application C includes: a file indicator 798a, which, when activated (e.g., using focus selector 702), causes a drop-down menu of file options associated with application C to cover display area 701; an edit indicator 798b, which, when activated (e.g., using focus selector 702), causes a drop-down menu of edit options associated with application C to cover display area 701; a view indicator 798c, which, when activated (e.g., using focus selector 702), causes a drop-down menu of view options associated with application C to cover display area 701; and a go indicator 798d, which, when activated (e.g., using focus selector 702), causes a drop-down menu of view options associated with application C to cover display area 701; and a go indicator 798d, which, when activated (e.g., using focus selector 702), causes a drop-down menu of edit ... When the focus selector 702 is activated, it causes the drop-down menu of navigation options associated with application C to be overlaid on display area 701; when the tool enablement display 798e is activated (e.g., using focus selector 702), it causes the drop-down menu of tools associated with application C to be overlaid on display area 701; when the window enablement display 798f is activated (e.g., using focus selector 702), it causes the drop-down menu of window options associated with application C to be overlaid on display area 701; and when the help enablement display 798g is activated (e.g., using focus selector 702), it causes the drop-down menu of help options associated with application C to be overlaid on display area 701.

[0321] exist Figures 7N-7O In this context, application C runs in the foreground, as indicated by the text description 707 in the menu bar 709. Figures 7N-7OIn this context, application C operates in full-screen mode, while the operating system operates in full-screen tab mode (for example, see reference). Figures 7E-7G (See the more detailed description of the "fullscreen only" behavior). Thus, in some implementations, when a new window command is issued to application C (e.g., selecting a new window menu option, performing a predefined new window gesture, performing a predefined combination of keystrokes such as "Ctrl+N", performing a predefined verbal command for a new window, etc.), a merged window in fullscreen mode is displayed, which has a background tab associated with the previous foreground window (e.g., window 790) and a new foreground tab associated with the new foreground window.

[0322] Figures 7N-7O The sequence is shown, in which a new tab is added to a window in response to a new window command issued to the application when the application is in full-screen mode. Figure 7O This illustrates the display of a merged window 795 within display area 701 in response to a new window command issued to application C (e.g., via the "Ctrl+N" operation). Figure 7O As shown, the merged window 795 includes a pane area 797a, a content area 797b, and a tab bar 797c. Figure 7O In the foreground represented by the shadow of pane area 797a, merged window 795 is displayed.

[0323] like Figure 7O As shown, the tab bar 797c includes elements corresponding to window 790 (e.g., from...). Figure 7N Tab 794a and tab 794b, corresponding to the new window associated with application C. Figure 7O In the middle, the tab 794b associated with the new window is displayed in the foreground within the merged window 795, represented by the shadow of tab 794b. Figure 7N In the tab bar 797c, there is also an addition feature 796 for adding new tabs associated with application C to the merged window 795. For example, adding a new tab as a foreground or background tab.

[0324] In some implementations, merging windows 795 enables the display of windows associated with applications that do not have their own tab functionality within a tabbed window. Thus, for example, the windows corresponding to tabs 794a and 794b are full-screen windows stacked on top of each other, allowing a foreground window to be displayed on top of the stack (e.g., ...). Figure 7O (A new window associated with tab 794b). According to some implementations, the tab is displayed within a virtual tab bar overlaid on the new foreground window by the operating system. Therefore, in some implementations, the operating system enables tab functionality for applications that do not have their own built-in tab functionality.

[0325] Figures 7P-7R and Figure 7A Similarly, and from Figure 7A It was modified. Therefore, Figure 7A and Figures 7P-7R Including similar user interfaces, and components labeled with the same reference numerals in both sets of figures having the same function, only the differences are described here for the sake of brevity. Figures 7P-7R In the foreground, application A runs as indicated by the shadow of taskbar icon 706-A and text description 707 in menu bar 709. Figures 7P-7R A window 7100 associated with application A displayed within display area 701 of monitor 450 is shown. (Example) Figures 7P-7R As shown, window 7100 includes a pane area 7102a, a content area 7102b, and a tab bar 7102c. Figure 7P In the foreground, window 7100 is displayed in the shadow represented by the pane area 7102a.

[0326] exist Figure 7P In the middle, the tab bar 7102c includes tabs 7106a and 7106b. Figure 7P In the foreground, tab 7106b is displayed within window 7100, represented by the shadow of tab 7106b. Figure 7P In the tab bar 7102c, there is also an addition display 7108 for adding a new tab associated with application A to window 7100. For example, the new tab can be added as a foreground or background tab.

[0327] exist Figures 7P-7R In this context, window 7100 has its own tab functionality (for example, application A is selected to exit the global tab settings). For example... Figures 7P-7R As shown, application A operates in windowed mode (e.g., non-full-screen mode). Thus, in some implementations, when a new window command is issued to application A (e.g., selecting a new window menu option, performing a predefined new window gesture, performing a predefined new window keystroke combination such as "Ctrl+N", performing a predefined new window verbal command, etc.), a new window associated with application A (e.g., such as...) is displayed in display area 701. Figure 7R (As shown). Thus, in some implementations, when a new tab command is issued to application A (e.g., selecting a new tab menu option, performing a predefined new tab gesture, performing a predefined new tab combination of keystrokes, such as "Ctrl+T", performing a predefined new tab verbal command, etc.), a new foreground tab associated with application A is displayed within window 7100 (e.g., as shown). Figure 7Q (As shown).

[0328] Figures 7P-7Q The sequence is shown, in which, when working in windowed mode, a new tab is added to the tabbed window in response to a new tab command issued to application A. Figure 7Q A new tab 7106c is shown being displayed within the tab bar 7102c in response to a new window command issued to application A (e.g., via the "Ctrl+N" operation).

[0329] Figure 7P and Figure 7R The sequence is shown, in which, when working in windowed mode, a new window is added to the tabbed window in response to a new tab command issued to application A. Figure 7R This illustrates the display of a new window 7110 in response to a new window command issued to application A (e.g., via the "Ctrl+T" operation). Figure 7R As shown, window 7110 includes a pane area 7112a and a content area 7112b.

[0330] Figures 8A-8E A flowchart of a method 800 for pairing window edges according to some embodiments is shown. Method 800 is used in electronic devices having one or more processors, non-transitory memory, displays, and input devices (e.g., Figure 1A Portable multi-functional device 100 or Figure 3 The operation is performed in device 300. In some embodiments, the display is a touchscreen display, and the input device is located on or integrated with the display. In some embodiments, the display and the input device are separate. Some operations in method 800 may be combined, and / or the order of some operations may be changed.

[0331] As described below, method 800 provides an intuitive way to pair window edges. This method reduces the cognitive burden on users when pairing window edges, thereby creating a more efficient human-computer interface. For battery-powered electronic devices, it enables users to pair window edges faster and more efficiently, saving power and increasing the interval between battery charges.

[0332] The device displays (802) a first window and a second window on a display area, the first window having a first edge parallel to a second edge of the second window. In some embodiments, the first and second windows are rectangular. In some embodiments, the first and second windows are arranged horizontally within the display area, with a non-zero distance between them. For example, the first edge is the right edge of the first window, and the second edge is the left edge of the second window. In another embodiment, the first edge is the left edge of the first window, and the second edge is the right edge of the second window. In some embodiments, the first and second windows are arranged vertically within the display area, with a non-zero distance between them. For example, the first edge is the bottom edge of the first window, and the second edge is the top edge of the second window. In another embodiment, the first edge is the top edge of the first window, and the second edge is the bottom edge of the second window. For example, Figure 5A A first window 510 and a second window 520 are shown within a display area 501, wherein the right edge 514a (e.g., the first edge) of the first window 510 is parallel to the left edge 524a (e.g., the second edge) of the second window 520.

[0333] The device detects (804) a first user input via an input device that moves the first edge of the first window toward the second edge of the second window. In some embodiments, the first user input is associated with a movement vector accompanying the second edge. For example, assuming the first and second windows are horizontally arranged, the right edge of the first window is moved toward the left edge of the second window. In another embodiment, assuming the first and second windows are vertically arranged, the top edge of the first window is moved toward the bottom edge of the second window.

[0334] In some implementations, the first user input corresponds to (806) moving the first window within the display area by dragging the first window toward the second window. In some implementations, the first user input includes selecting a pane area of ​​the first window using a focus selector and moving the first window (e.g., clicking and dragging the window), wherein a first edge leads the movement associated with the first user input. As one example, Figures 5A-5C A sequence is shown in which window 510 is moved toward window 520. As another embodiment, Figure 5U-Figure 5W The sequence shown is a sequence of moving window 560 toward window 570.

[0335] In some implementations, the first user input corresponds to (808) resizing the first window within the display area by dragging a first edge of the first window toward the second window. In some implementations, the first user input includes selecting an edge of the first window using a focus selector and moving the first edge (e.g., clicking and dragging the first edge), wherein the first edge leads the movement associated with the first user input. As one example, Figure 5UU-Figure 5WW The sequence is shown in which the right edge 5164a of window 5160 is dragged toward the left edge 5174a of window 5170.

[0336] In response to detecting first user input, and based on determining that the first user input does not meet one or more pairing criteria, the device continues (810) the movement of the first window based on the first user input, such that the first window at least partially overlaps with the second window. As one embodiment, Figure 5KK-Figure 5LL A sequence is shown in which window 5100 moves toward the left edge 5114a of window 5110. In this embodiment, the right edge 5104a of window 5100 does not mate with the left edge 5114a of window 5110, and window 5100 moves above window 5110 because a first pairing criterion (e.g., an angle criterion) is not met. As another embodiment, Figure 5MM-Figure 5NN A sequence is shown in which window 5100 moves toward the left edge 5114a of window 5110. In this embodiment, the right edge 5104a of window 5100 does not pair with the left edge 5114a of window 5110, and window 5100 moves above window 5110 because the second pairing criterion (e.g., speed criterion) is not met. As yet another embodiment, Figure 5FF - Figure 5GG A sequence is shown in which window 5180 is moved toward the left edge 5194a of window 5190. In this embodiment, the right edge 5184a of window 5180 is not paired with the left edge 5194a of window 5190, and window 5180 moves above window 5190 because a third pairing criterion (e.g., a distance criterion) is not met. Therefore, according to some embodiments, the window is moved and aligned according to normal behavior when one or more pairing criteria are not met as expected by the user.

[0337] In response to detecting a first user input, and based on determining that the first user input satisfies one or more pairing criteria (e.g., one or more conditions for pairing a first window and a second window), the device pairs (812) a first edge of the first window to a second edge of the second window, such that the first window stops moving in response to the first user input before overlapping with the second window, wherein the one or more pairing criteria include the first pairing criteria being satisfied when the first input corresponds to a movement of the first edge toward the second edge from a predefined axis less than an angle threshold.

[0338] According to some embodiments, the first window and the second window are paired by stopping the movement of the first edge of the first window so that the first edge of the first window contacts (but does not overlap with) the second edge of the second window. In this way, window pairing involves stopping the movement of the first window once the first and second edges are close. For example, pixels associated with the first window do not overlap with the second window. For example, there are 0 pixels between the first and second windows. In some embodiments, there is no magnetic attraction between the first and second windows. Instead, the movement at least reaches the second edge of the second window, but does not exceed a threshold beyond the second edge. For example, the user intentionally moves the first window to be side-by-side or stacked with the second window. Continuing with this embodiment, the first and second windows are paired if one or more pairing criteria are met. Therefore, according to some embodiments, users can more easily manage the alignment and arrangement of windows within the display area, thereby saving user time and effort.

[0339] In some implementations, a predefined axis is perpendicular to or orthogonal to the first and second edges. For example, in some implementations, an angle criterion is met when the approach angle deviates from the normal of the second edge of the second window by less than 45° or 60°. Thus, the first and second edges pair when the first user input is substantially parallel to the second edge, and overlap when the first user input is substantially perpendicular to the second edge.

[0340] In some implementations, a second pairing criterion of the one or more pairing criteria includes (814) a speed threshold, and satisfying the second pairing criterion includes determining that the speed associated with the first user input violates the speed threshold. As an example, Figures 5A-5C A sequence is shown in which the right edge 514a of window 510 is paired with the left edge 524a of window 520 because the angle of movement vector 508 deviates from the normal of the left edge 524a of window 520 by less than values ​​516a and 516b and the velocity criterion is met (e.g., the velocity of movement vector 508 is less than the pairing threshold velocity 518). As another embodiment, Figure 5U-Figure 5W The sequence is shown in which the top edge 564a of window 560 is paired with the bottom edge 574a of window 570 because the angle of the movement vector 566 deviates from the normal of the bottom edge 574a of window 570 by less than values ​​568a and 568b) and the velocity criterion (e.g., the velocity of the movement vector 566 is less than the pairing threshold velocity 518) are satisfied.

[0341] In some implementations, a third pairing criterion of the one or more pairing criteria includes (816) a distance threshold, and satisfying the third pairing criterion includes determining that the input corresponds to a movement of the first edge of the window toward the edge of the second window in a corresponding direction, but not to a movement exceeding a threshold amount in the corresponding direction. In some implementations, the third pairing criterion is met when the magnitude of the first user input is greater than or equal to an initial distance value between the first edge of the first window and the second edge of the second window before the first user input, and when the magnitude of the first user input is less than or equal to the sum of the initial distance and the distance threshold. In this way, the magnitude of the first user input at least touches the first edge and the second edge, but does not exceed a threshold distance beyond the second edge. As one embodiment, Figure 5BBB-Figure 5CCC The sequence is shown in which the right edge 5184a of window 5180 is paired with the left edge 5194a of window 5190 because the angle of the movement vector 5186 deviates from the normal of the left edge 5194a of window 5190 by less than values ​​516a and 516b) and the distance criterion (e.g., the magnitude of the component of the movement vector 5186 above the left edge 5194a of window 5190 is less than the distance threshold 5188) are satisfied.

[0342] In some embodiments, the device (820) detects, via an input device, a second user input moving away from the first window from the second window when the first edge of the first window mates with the second edge of the second window; and, in response to the second user input, unpairs the first edge of the first window from the second edge of the second window and moves the first window according to a movement vector associated with the second user input. According to some embodiments, the second window is similarly separated from the first window if the second user input moves the second window substantially perpendicular to and away from the first edge of the first window. In some embodiments, the second user input is associated with a movement vector having a component perpendicular to the second edge that satisfies an angle separation threshold criterion. For example, the angle separation criterion is satisfied when the angle of the second user input deviates from the normal of the second edge by less than a threshold angle value. In some embodiments, the window is immediately unpaired when the second user input is perpendicular to and away from the paired edge (e.g., at a 180° angle relative to the normal of the second edge). Therefore, if the angle separation criterion is satisfied, the window is unpaired without a distance separation criterion or without any resistance. In some embodiments, the window is unpaired when the second user input is perpendicular to and away from the paired edge and satisfies a distance separation criterion. Therefore, according to some implementation schemes, users can unpair windows without any obstacles. For example, this makes it easier for users to manage the alignment and arrangement of windows within the display area, thereby saving users time and effort.

[0343] For example, Figure 5K-Figure 5MA sequence is shown in which window 510 is moved away from window 520 at a 180° angle relative to the normal of the left edge 524a of window 520. In this embodiment, the right edge 514a of window 510 is unpaired from the left edge 524a of window 520 without satisfying a distance criterion.

[0344] In some embodiments, the device (822) detects a second component of a first user input moving away from the first window when the first edge of the first window aligns with the second edge of the second window; and in response to the second component of the first user input and based on the determination that the magnitude of the second component violates a distance threshold (e.g., is at least equal to the magnitude of the first component), unaligns the first edge of the first window from the second edge of the second window, and moves the first window according to a movement vector associated with the second component of the first user input. For example, the first component of the first user input moves the first edge toward the second edge, and the second component of the first user input moves the first edge away from the second edge. In some embodiments, for continuous movement, the first window is unaligned from the second window when the first window has been moved at least a distance (e.g., a distance threshold) that would pair the first window with the second window. Thus, according to some embodiments, the user can unalign the windows with some resistance. For example, this makes it easier for the user to manage the alignment and arrangement of windows within the display area, thereby saving the user time and effort.

[0345] In some embodiments, when the first edge of the first window aligns with the second edge of the second window, the device detects (824) a second user input via an input device that moves the first window toward the second edge of the second window. In response to detecting the second user input, and based on determining that the second user input meets one or more separation criteria (e.g., one or more conditions for separating the first and second paired windows), the device unpairs the first edge of the first window from the second edge of the second window and moves the first window above the second window according to a movement vector associated with the second user input. In response to detecting the second user input, and based on determining that the second user input does not meet one or more separation criteria, the device maintains the pairing between the first edge of the first window and the second edge of the second window and abandons moving the first window above the second window. According to some embodiments, if the second user input moves the second window substantially perpendicular to and toward the first edge of the first window, the second window is similarly separated from or remains paired with the first window. In some implementations, windows are unpaired when the movement is substantially perpendicular to and toward the paired edge, and when the second user input meets an angle separation criterion (e.g., the movement angle toward the second edge deviates from the normal to the second edge by less than + / - 45°) and a distance criterion (e.g., the magnitude of the movement is greater than or equal to a separation distance threshold). Therefore, according to some implementations, by reducing accidental unpairing of windows, users can unpair windows with some resistance. For example, this makes it easier for users to manage the alignment and arrangement of windows within the display area, thereby saving users time and effort.

[0346] For example, Figure 5Q-Figure 5T The sequence of movement of window 510 toward window 520 is shown. In this embodiment, the right edge 514a of window 510 is unpaired from the left edge 524a of window 520 because the angle of movement vector 548 deviates from the normal of the second edge by less than values ​​552a and 552b and the distance criterion is met (e.g., the magnitude of movement vector 548 is greater than the separation distance threshold 550).

[0347] In some implementations, if the second user input is perpendicular to and away from the second edge of the second window, the paired windows are separated when the value of the second user input exceeds a first predefined value. In some implementations, if the second user input is perpendicular to and towards the second edge of the second window, the paired windows are separated when the value of the second user input exceeds a second predefined value. In some implementations, if the second user input is substantially parallel to the first edge of the first window, the paired windows are separated when the value of the second user input exceeds a second predefined value and the angle of the second user input relative to the normal of the second edge of the second window exceeds a predefined value. In some implementations, the second predefined value is greater than the first predefined value.

[0348] In some embodiments, moving the first window above the second window according to a movement vector associated with a second user input includes (826): displaying an animation that makes the movement of the first window above the second window discontinuous (e.g., "jumping" the first window so that the pane area appears below the focus selector when unpairing occurs) based on determining that the second user input does not correspond to moving the focus selector above the second window; and abandoning the animation that makes the movement of the first window above the second window discontinuous based on determining that the second user input does not correspond to moving the focus selector above the second window. In some embodiments, the first window jumps if the focus selector moves out of the window when the window is paired with another window (e.g., when the bottom window in a stack of paired windows is dragged toward the top window). However, the first window does not "jump" if the focus selector does not move out of the window (e.g., when the left window in a pair of side-by-side windows is dragged toward the right window). Therefore, according to some embodiments, the first window "follows" the focus selector to provide a smooth user experience. As one embodiment, Figure 5Q-Figure 5T The sequence is shown, in which the right edge 514a of window 510 is unpaired from the left edge 524a of window 520. Figure 5S In this case, the focus selector moves to the content area 522b of the window 520 according to the movement vector 548. However, as Figure 5S-Figure 5T As shown, when the distance separation criterion is met, window 510 "jumps" discontinuously below the position of focus selector 502.

[0349] In some implementations, when the first edge of the first window aligns with the second edge of the second window, the device detects (828) a second user input via an input device corresponding to movement of the first edge relative to the second edge. In response to detecting the second user input, and based on determining that the second user input corresponds to movement of the first window causing the first edge of the first window to move above the second edge, the device delays movement of the first window until the second user input reaches a movement threshold. In response to detecting the second user input, and based on determining that the second user input corresponds to movement of the first window causing the first edge of the first window to move away from the second edge, the device begins moving the first window before the second user input reaches the movement threshold. As one embodiment, Figure 5Q-Figure 5T A sequence is shown in which the right edge 514a of window 510 is unpaired from the left edge 524a of window 520 (e.g., delayed movement) when the distance separation criterion of movement vector 548 is met. As another embodiment, Figure 5K-Figure 5M The sequence is shown in which the right edge 514a of window 510 is immediately unpaired from the left edge 524a of window 520 (e.g., without delay).

[0350] In some embodiments, when the first edge of the first window is paired with the second edge of the second window, the device detects (830) a second user input via an input device that moves the first window along the second edge of the second window. In response to detecting the second user input, and based on determining that the second user input meets one or more separation criteria, the device unpairs the first edge of the first window from the second edge of the second window and moves the first window according to a movement vector associated with the second user input. In response to detecting the second user input, and based on determining that the second user input does not meet any of the one or more separation criteria, the device maintains the pairing between the first edge of the first window and the second edge of the second window and moves the first window parallel to the second edge of the second window according to the second user input. In one embodiment, assuming the first and second windows are paired side-by-side, if the first window is moved away from or toward the second window, the first window is separated from the second window. In another embodiment, assuming the first and second windows are paired side-by-side, if the first window is moved substantially parallel to the second window toward the top or bottom of the second window, the first window slides parallel to the second window and remains paired with the second window. Therefore, according to some embodiments, users can more easily manage the alignment and arrangement of windows within the display area, thus saving users time and effort.

[0351] In some implementations, the separation criterion is the opposite of the pairing criterion. In other implementations, the separation criterion is similar to and modified from the pairing criterion. For example, the separation criterion is met when the second user exceeds a predefined escape speed, the angle between the second user input and the second edge of the second window is greater than a predefined value, and / or the magnitude of the second user input is greater than a predefined value.

[0352] As an example, Figures 5N-5P A sequence is shown in which the right edge 514a of window 510 is unpaired from the left edge 524a of window 520 because the angle of the movement vector 544 deviates from the normal of the second edge by less than + / - 45° and the distance separation criterion is met (e.g., the magnitude of the movement vector 544 is greater than the separation distance threshold 546). As another embodiment, Figures 5D-5F The sequence is shown in which the right edge 514a of window 510 remains paired with the left edge 524a of window 520 because the angle separation criterion (e.g., the angle of the movement vector 526 deviates from the normal of the second edge by more than + / -45°) and the velocity separation criterion (e.g., the velocity of the movement vector 526 is less than the separation velocity threshold 532) are not met.

[0353] In some embodiments, the parallel movement of the first window is constrained by the third edge of the second window (832), and the third edge of the second window is perpendicular to the second edge of the second window. For example, the first window stops moving when the edge of the first window, which is parallel to the third edge of the second window, aligns with the third edge of the second window. In some embodiments, the parallel sliding movement is not constrained by the third edge of the second window. For example, in Figures 5E-5F In this embodiment, the parallel movement of window 510 is constrained by line 528a associated with the top edge 524b of window 520. In some embodiments, the parallel movement is not constrained by the third edge of the second window. Therefore, according to some embodiments, users can more easily manage the alignment and arrangement of windows within the display area, thereby saving users time and effort (e.g., windows with equal height or width).

[0354] In some embodiments, when the first edge of the first window is paired with the second edge of the second window, the device detects (834) a second user input via an input device that moves the second window along the first edge of the first window. In response to detecting the second user input, and based on determining that the second user input meets one or more separation criteria, the device unpairs the second edge of the second window from the first edge of the first window and moves the second window according to the second user input. In response to detecting the second user input, and based on any criterion that determines the second user input does not meet one or more separation criteria, the device maintains the pairing between the first edge of the first window and the second edge of the second window and moves the second window parallel to the first edge of the first window according to a movement vector associated with the second user input. Therefore, according to some embodiments, users can more easily manage the alignment and arrangement of windows within the display area, thus saving user time and effort. In one embodiment, assuming the first and second windows are paired side-by-side, if the second window is moved away from or toward the first window, the second window separates from the first window. In another embodiment, assuming the first and second windows are paired side-by-side, if the second window is moved substantially parallel to the first window toward the top or bottom of the second window, the second window slides parallel to the first window and remains paired with the first window. In some implementations, the parallel movement of the second window is constrained by the fourth edge of the first window, wherein the fourth edge of the first window is perpendicular to the first edge of the first window.

[0355] In some implementations, when the first edge of the first window aligns with the second edge of the second window, the device detects (836) second user input via an input device that drags the corresponding edge of the first window along the second edge of the second window, wherein the corresponding edge of the first window is perpendicular to the second edge of the second window. In response to detecting the second user input, the device resets the size of the scale of the first window associated with the corresponding edge based on the second user input. As one embodiment, Figures 5XX-5ZZ A sequence is shown in which the top edge 5164b of window 5160 is dragged along the left edge 5174a of window 5170. In this embodiment, a second scale (e.g., height) of window 5160 expands from value 5177a to value 5177b, where value 5177b is greater than value 5177a. According to some embodiments, if a second user input drags the edge of the second window perpendicular to the first edge of the first window in a direction parallel to the first edge of the first window, the size of the second window is reset.

[0356] In some implementations, the scale of the resizing of the first window is constrained by the third edge of the second window (838), and the third edge of the second window is perpendicular to the second edge of the second window. As one example, Figures 5XX-5ZZA sequence is shown in which the top edge 5164b of window 5160 is dragged along the left edge 5174a of window 5170. In this embodiment, the movement of the top edge 5164b of window 5160 is constrained by the line 5178a associated with the top edge 5174b of window 5170. In some embodiments, the parallel dimension reset size is not constrained by the third edge of the second window.

[0357] In some implementations, in response to detecting a first user input, and based on determining that the first user input meets one or more pairing criteria and that the first window overlaps with the second window, the device continues (840) the movement of the first window based on the first user input, and displays the first window at least partially overlapping the second window. For example, there is a non-zero distance between the first and second windows. Furthermore, the first and second edges are not both bottom edges of their respective windows, and neither are both top edges of their respective windows. Thus, an edge of a window approaching from inside the window cannot pair with such an edge, where the edge of the first window has already overlapped with the edge of the second window when it approaches the edge of the second window. For example, Figure 500-Figure 5PP The sequence is shown in which the right edge 5124a of window 5120 does not align with the right edge 5134a of window 5130 because window 5120 partially overlaps with window 5130 even if the alignment criteria (e.g., angle and speed criteria) are met. Therefore, according to some embodiments, users can more easily manage the alignment and arrangement of windows within the display area, thus saving user time and effort.

[0358] In some implementations, in response to detecting first user input, and based on determining that the first user input meets one or more pairing criteria and that the second edge of the second window is occluded within the display area, the device continues (842) the movement of the first window based on the first user input, and displays the first window at least partially overlapping the second window. In some implementations, the edges cannot be paired with those of windows hidden in the user interface (such as windows occluded by other windows). As one example, Figure 5HHH-Figure 5JJJ The sequence is shown in which the left edge 5214a of window 5210 is not paired with the right edge 5234a of window 5230 because the right edge 5234a of window 5230 is partially occluded by window 5220 even if the pairing criteria (e.g., angle and velocity criteria) are met. As another embodiment, Figure 5KKK-Figure 5MMMThe sequence is shown in which the left edge 5254a of window 5250 is not paired with the right edge 5264a of window 5260 because the right edge 5264a of window 5260, accompanied by the movement vector 5256, is occluded by window 5270. Therefore, according to some embodiments, users can more easily manage the alignment and arrangement of windows within the display area, thus saving user time and effort.

[0359] It should be understood that, Figures 8A-8E The specific order of operations described herein is merely illustrative and not intended to indicate that the order is the only possible order in which these operations can be performed. Those skilled in the art will conceive of various ways to reorder the operations described herein. Furthermore, it should be noted that the details of other processes described herein in conjunction with other methods (e.g., methods 900 and 1000) are similarly applicable to the above-described procedures. Figures 8A-8E The method 800. For example, the user interface object and focus selector described above with reference to method 800 optionally have one or more of the features of user interface objects and focus selectors described herein with reference to other methods (e.g., methods 900 and 1000). For the sake of brevity, these details will not be repeated here.

[0360] Figures 9A-9D A flowchart of a method 900 for resizing a window according to some implementation schemes is shown. Method 900 is used in electronic devices having one or more processors, non-transitory memory, displays, and input devices (e.g., Figure 1A Portable multi-functional device 100 or Figure 3 The method is performed in device 300. In some embodiments, the display is a touchscreen display, and the input device is located on or integrated with the display. In some embodiments, the display and the input device are separate. Some operations in method 900 may be combined, and / or the order of some operations may be changed.

[0361] As described below, Method 900 provides an intuitive way to resize windows. This method reduces the cognitive load on users when resizing windows, thus creating a more efficient human-computer interface. For battery-powered electronic devices, it allows users to resize windows faster and more efficiently, saving power and increasing the interval between battery charges.

[0362] The device displays a first window (902) on the display area of ​​the screen. For example, the first window is a rectangle with four edges. As one embodiment, Figure 6AA window 610 with a left edge 614a, a top edge 614b, a right edge 614c, and a bottom edge 614d is shown displayed within a display area 601. In this embodiment, a first dimension (e.g., width) of the window 610 has a value 616a, and a second dimension (e.g., height) of the window 610 has a value 618a.

[0363] The device detects (904) first user input associated with one or more edges of the first window via an input device. For example, the first user input includes selecting and then moving on the edge or corner of the first window using a focus selector, such as a click and drag gesture. In another embodiment, the first user input includes stationary input on the edge or corner of the first window using a focus selector, such as a single click or double click.

[0364] In response to detecting a first user input, and based on determining that the first user input corresponds to a first input type (e.g., dragging the edge of a first window), the device resets (906) the size of one or more scales corresponding to one or more edges of the first window based on a movement vector (e.g., distance and direction) associated with the first user input. As one embodiment, clicking and dragging on the right edge of the first window resets the width of the first window. As another embodiment, clicking and dragging on a corner of the first window resets the height and width of the first window. For example, Figures 6E-6G A sequence is shown in which the size of a first and second scale of window 610 is reset in response to a click and drag gesture at a corner associated with the intersection of the top edge 614b and the right edge 614c of window 610. In this embodiment, in Figures 6E-6F In this embodiment, the first dimension (e.g., width) of window 610 increases from value 616a to value 616c, and the second dimension (e.g., height) of window 610 increases from value 618a to value 618c. Continuing with this embodiment, in... Figures 6F-6G In this embodiment, the first dimension (e.g., width) of window 610 increases from value 616c to value 616d, and the second dimension (e.g., height) of window 610 increases from value 618c to value 618d. Therefore, according to some implementations, users can more easily manage the resizing of windows within the display area, thereby saving users time and effort.

[0365] In some implementations, the first input type corresponds to (908) an input that includes selection and subsequent movement. In some implementations, when the first user input corresponds to the first input type, the first user input includes selection and subsequent movement using a focus selector on the edge of the first window, such as a click and drag gesture. In some implementations, when the first user input corresponds to the first input type, the first user input includes selection and subsequent movement using a focus selector on a corner of the first window, such as a click and drag gesture.

[0366] In some implementations, resizing one or more scales of the first window corresponding to one or more edges of the first window includes (910): resizing one scale of the first window to two parallel edges of the display area based on determining that the first user input meets one or more expansion criteria; and resizing one scale of the first window to one edge of the display area based on determining that the first user input does not meet one or more expansion criteria. For example, the edge of the window is dragged toward the edge of the display area based on the magnitude of a first portion of the gesture (e.g., a portion of the gesture dragging to the edge of the display area). In some implementations, if the expansion criteria are met for a second portion of the gesture (e.g., a portion of the dragging gesture at the edge of the display area), the relative edge of the window is moved toward the relative edge of the display area. In some implementations, if the expansion criteria are not met for the second portion of the gesture, moving the relative edge of the window toward the relative edge of the display area is abandoned. In some implementations, the expansion criteria are met if the dragging gesture is held at the edge of the display area for a threshold duration. In some implementations, the expansion criteria are met when the magnitude of the dragging gesture above the edge of the display area is greater than or equal to a threshold distance. Therefore, according to some implementation schemes, users can more easily reset the size of windows within the display area, thus saving users time and effort.

[0367] For example, the right edge of the window is dragged to the right edge of the display area and held there for X seconds. If X is greater than this time threshold, the left edge of the window is moved to the left edge of the display area. However, if X is less than this time threshold, the left edge of the window is held in its position until the first user input. As one example, Figures 6H-6J A sequence is shown in which the right edge 624a of window 620 is dragged to the right edge 606d of display area 601. This increases the scale (e.g., width) of window 620 from value 626a to value 626c in a first direction (e.g., from left to right). Continuing with this embodiment, Figures 6J-6IThe sequence is illustrated where, upon meeting an expansion criterion (e.g., holding focus selector 602 at the right edge 606d of display area 601 for X seconds), the left edge 624b of window 620 is moved to the right edge 634a of window 630. This causes the scale (e.g., width) of window 620 to increase from value 626c to value 626d in a second direction (e.g., from right to left).

[0368] In some implementations, resizing one or more scales of the first window corresponding to one or more edges of the first window includes (912): resizing the first scale of the first window to a first set of two parallel edges of the display area based on determining that the first user input meets one or more extended criteria, and resizing the second scale of the first window to a second set of parallel edges of the display area, wherein the first set of parallel edges and the second set of parallel edges of the display area are different; and resizing the first scale of the first window to a first edge of the display area based on determining that the first user input does not meet one or more extended criteria, and resizing the second scale of the first window to a second edge of the display area.

[0369] In some implementations, the magnitude (914) of the motion vector associated with the first user input is less than the distance between one or more edges of the first window and one or more corresponding edges of the display area, and after the size of the first window corresponding to one or more scales of one or more edges of the first window is reset based on the motion vector (e.g., distance and direction) associated with the first user input, the one or more edges of the first window do not coexist with one or more corresponding edges of the display area. As one embodiment, Figures 6E-6G A sequence is shown in which the size of a first scale and a second scale of window 610 is reset in response to a click and drag gesture at a corner associated with the intersection of the top edge 614b and the right edge 614c of window 610. In this embodiment, after the size of window 610 is reset, the top edge 614b of window 610 does not coexist with the top edge 606a of display area 601, and the right edge 614c of window 610 does not coexist with the right edge 606d of display area 601.

[0370] In response to detecting a first user input, and based on determining that the first user input corresponds to a second input type (e.g., a static input, such as a single click or double click on the edge or corner of a first window), the device moves (916) one or more edges of the first window to one or more corresponding edges of the display area (e.g., to expand the window), while maintaining the corresponding one or more opposite edges of the first window. For example, if the user double-clicks on the top edge of the first window, the top edge of the first window moves to the top edge of the display area to increase the height of the first window. As another embodiment, if the user double-clicks on the upper right corner of the first window, the top and right edges of the first window move to the top and right edges of the display area. In some embodiments, double-clicking inside the pane of the first window causes the window to expand in all directions (e.g., become full screen). In some embodiments, double-clicking inside the pane of the first window causes the window to expand in two vertical directions. Therefore, according to some embodiments, users can more easily resize windows within the display area, thus saving users time and effort.

[0371] In some implementations, the second input type corresponds to (918) static input. In some implementations, when the first user input corresponds to the second input type, the first user input includes static input, such as a single click or double click on the edge of the first window. In some implementations, when the first user input corresponds to the second input type, the first user input includes static input, such as a single click or double click on the corner of the first window.

[0372] In some implementations, moving one or more edges of the first window to one or more corresponding edges of the display area includes (920) moving a single edge of the first window to the corresponding edge of the display area based on determining that a first user input corresponds to a single edge of the first window. As one example, Figure 6L-Figure 6M A sequence is shown in which, in response to a second input type (e.g., static input) on the right edge 644a of window 640, the right edge 644a of window 640 moves to the right edge 606d of display area 601. In this way, the first scale (e.g., width) of window 640 increases from value 646a to value 646b. As another embodiment, Figures 6N-6O A sequence is shown in which, in response to a second input type (e.g., static input) on the top edge 644b of window 640, the top edge 644b of window 640 moves to the top edge 606a of display area 601. This causes the second scale (e.g., height) of window 640 to increase from value 648a to value 648b. Thus, according to some embodiments, the user can more easily reset the size of the window in one direction, thereby saving the user time and effort in managing the alignment and arrangement of windows within the display area.

[0373] In some embodiments, the device (922) after moving a single edge of the first window to the edge of the display area corresponding to that single edge of the first window, detects a second user input associated with the single edge of the first window via an input device; and in response to detecting the second user input, and based on determining that the second user input corresponds to a second input type (e.g., a static input, such as a double-click), moves the single edge of the first window to the position it was on the display before (e.g., just before) the first user input was detected. For example, after moving the top edge of the first window to the top edge of the display area due to a first double-click on the top edge of the first window, if the user double-clicks the top edge of the first window a second time, the top edge of the first window moves to its previous position before the first double-click. In this way, according to some embodiments, the user can more easily restore the window's scale in one direction to its previous size, thereby saving the user time and effort in managing the alignment and arrangement of windows within the display area.

[0374] For example, Figures 6P-6Q A sequence is shown in which, in response to a second input type (e.g., a static input) on the right edge 654a of window 650, the right edge 654a of window 650 moves to the left edge 664a of window 660. In this way, the first scale (e.g., width) of window 650 increases from value 656a to value 656b. Continuing with this embodiment, Figure 6Q-Figure 6R The sequence is shown, wherein in response to a second input type (e.g., a static input) on the right edge 654a of window 650, the right edge 654a of window 650 moves to its position. Figure 6P The previous position in the window. In this way, the first scale (e.g., width) of window 650 is reduced from value 656b to value 656a.

[0375] In some implementations, before detecting the first user input, a second window is displayed (924) within a display area between the first window and the display area, at an edge corresponding to a single edge of the first window. Based on determining that the first user input corresponds to a single edge of the first window and the second input type (e.g., a static input such as a double-click), the movement of the single edge of the first window to the corresponding edge of the display area is constrained by the edge of the second window parallel to the single edge of the first window. For example, the second window may be located between the top edge of the first window and the top edge of the display area. Thus, if the user double-clicks on the top edge of the first window, the top edge of the first window moves to the bottom edge of the second window. In some implementations, this behavior is ignored if the second window is partially obscured. For example, Figures 6P-6QThe sequence is illustrated, wherein in response to a second input type (e.g., a static input) on the right edge 654a of window 650, the right edge 654a of window 650 moves to the left edge 664a of window 660. Thus, the movement of the right edge 654a of window 650 is constrained by window 660, which intervenes between the right edge 654a of window 650 and the right edge 606d of display area 601.

[0376] In some embodiments, moving one or more edges of the first window to one or more corresponding edges of the display area includes (926): based on determining that the first user input corresponds to a corner of the first window, moving two edges of the first window adjacent to the corner of the first window to two corresponding edges of the display area. In some embodiments, the two edges of the first window intersect (or are adjacent) to each other. Similarly, the two corresponding edges of the display area intersect (or are adjacent) to each other. In this way, according to some embodiments, the user can more easily reset the size of the window at a first scale in one direction and the size of the window at a second scale in one direction, thereby saving the user time and effort in managing the alignment and arrangement of windows within the display area.

[0377] As an example, Figures 6A-6B The sequence is illustrated, wherein in response to a second input type (e.g., static input) at the corner of window 610 associated with the intersection of left edge 614a and top edge 614b, the left edge 614a of window 610 moves to the left edge 606b of display area 601, and the top edge 614b of window 610 moves to the top edge 606a of display area 601. In this way, a first scale (e.g., width) of window 610 increases from value 616a to value 616b, and a second scale (e.g., height) of window 610 increases from value 618a to value 618b.

[0378] In some embodiments, after moving two edges of the first window adjacent to the corner of the first window to two corresponding edges of the display area, the device detects (928) a second user input associated with at least one edge of the first window via an input device. In response to detecting the second user input, and based on determining that the second user input corresponds to a single edge of the first window, and based on determining that the second user input corresponds to a second input type (e.g., a static input, such as a double-click), the device moves the single edge of the first window to the position it was on the display before (e.g., just before) the first user input was detected. In response to detecting the second user input, and based on determining that the second user input corresponds to a corner of the first window, and based on determining that the second user input corresponds to a second input type (e.g., a static input, such as a double-click), the device moves the two edges of the first window corresponding to the corner of the first window to the positions they were on the display before (e.g., just before) the first user input was detected. Thus, according to some embodiments, the user can more easily restore the size of one or more scales of the window to a previous size in one direction, thereby saving the user time and effort in managing the alignment and arrangement of windows within the display area.

[0379] For example, after a first double-click on the top-left edge of the first window moves the top edge of the first window to the top edge of the display area and the left edge of the first window to the left edge of the display area, if the user double-clicks the top-left edge of the first window a second time, the top and left edges of the first window move back to their previous positions before the first double-click. As an example, Figures 6C-6D The sequence is illustrated, wherein in response to a second input type (e.g., static input) at the corner of window 610 associated with the intersection of the top edge 614b and the left edge 614a of window 610, the top edge 614b and the left edge 614a of window 610 move to their respective corners. Figure 6A The previous position in the window. In this way, the first scale (e.g., width) of window 610 decreases from value 616b to value 616a, and the second scale (e.g., height) of window 610 decreases from value 618b to value 618a.

[0380] For example, after a first double-click on the top-left edge of the first window moves the top edge of the display area and the left edge of the first window to the left edge of the display area, if the user double-clicks a second time on the top edge of the first window, the top edge of the first window moves back to its previous position before the first double-click, while the left edge of the first window remains in its position after the first double-click. As one embodiment, Figure 6V-Figure 6WA sequence is shown in which, in response to a second input type (e.g., static input) at the corner of window 610 associated with the intersection of right edge 6104a and bottom edge 6104b, the right edge 6104a of window 6100 moves to the right edge 6116a of display area 6110, and the bottom edge 6104b of window 6100 moves to the bottom edge 606c of display area 601. In this way, the first scale (e.g., width) of window 6100 increases from value 6106a to value 6106b, and the second scale (e.g., height) of window 6100 increases from value 6108a to value 6108b. Continuing with this embodiment, Figures 6X-6Y The sequence is shown, wherein in response to a second input type (e.g., a static input) on the right edge 6104a of window 6100, the right edge 6104a of window 6100 moves to its position. Figure 6V The bottom edge 6104b remains in its previous position. In this way, the first scale (e.g., width) of window 6100 decreases from value 6106b to value 6106a.

[0381] In some implementations, before detecting the first user input, a second window is displayed (930) within a display area between two corresponding edges of the first window and the display area, and based on determining that the first user input corresponds to a corner of the first window, and based on determining that the second user input corresponds to a second input type (e.g., a static input such as a double-click), at least one of the two edges of the first window adjacent to the corner of the first window moves to the two corresponding edges of the display area, constrained by at least one edge of the second window parallel to the two edges of the first window. For example, Figure 6V-Figure 6W The sequence is illustrated, wherein in response to a second input type (e.g., a stationary input) at the corner of window 610 associated with the intersection of its right edge 6104a and bottom edge 6104b, the right edge 6104a of window 6100 moves to the right edge 6116a of display area 6110, and the bottom edge 6104b of window 6100 moves to the bottom edge 606c of display area 601. Thus, the movement of the right edge 6104a of window 6100 is constrained by window 6110, which intervenes between the right edge 6104a of window 6100 and the right edge 606d of display area 601.

[0382] In some embodiments, in response to detecting a first user input and determining that the first user input corresponds to a third input type, the device moves (932) one or more edges of the first window to one or more corresponding edges of the display area. In some embodiments, the third user input type corresponds to a static input within a predefined area of ​​the first window. For example, when the first user input corresponds to the third input type, the first user input includes a double-click or single-click on a pane area of ​​the first window. In one embodiment, a first scale (e.g., height) of the first window expands to two parallel edges of the display area (e.g., two vertical directions) in response to the third input type. In another embodiment, a second scale (e.g., width) of the first window expands to two parallel edges of the display area (e.g., two horizontal directions) in response to the third input type. In yet another embodiment, the scale of the first window expands to fill the display area (e.g., full-screen mode) in response to the third input type. Therefore, according to some embodiments, users can more easily manage window resizing within the display area, thereby saving users time and effort.

[0383] It should be understood that, Figures 9A-9D The specific order of operations described herein is merely illustrative and not intended to indicate that the order is the only possible order in which these operations can be performed. Those skilled in the art will conceive of various ways to reorder the operations described herein. Furthermore, it should be noted that the details of other processes described herein in conjunction with other methods (e.g., methods 800 and 1000) are similarly applicable to the above-described procedures. Figures 9A-9D The method 900. For example, the user interface object and focus selector described above with reference to method 900 optionally have one or more of the features of user interface objects and focus selectors described herein with reference to other methods (e.g., methods 800 and 1000). For the sake of brevity, these details will not be repeated here.

[0384] Figures 10A-10C A flowchart is shown of a method 1000 for providing tabbed window functionality according to some embodiments. Method 1000 is used in electronic devices having one or more processors, non-transitory memory, displays, and input devices (e.g., Figure 1A Portable multi-functional device 100 or Figure 3 The method is performed in device 300. In some embodiments, the display is a touchscreen display, and the input device is located on or integrated with the display. In some embodiments, the display and the input device are separate. Some operations in method 1000 may be combined, and / or the order of some operations may be changed.

[0385] As described below, Method 1000 provides an intuitive way to offer tabbed window functionality. This method reduces the cognitive burden on users when providing tabbed window functionality, thereby creating a more efficient human-computer interface. For battery-powered electronic devices, it enables users to utilize tabbed window functionality faster and more efficiently, saving power and increasing the interval between battery charges.

[0386] The device displays (1002) a first window associated with a first application on the display area. In some embodiments, the first window is currently in the foreground or "in focus" within the display area. As one embodiment, Figure 7A A window 730 is shown associated with application A operating in windowed mode (e.g., non-fullscreen mode). Figure 7A In this context, window 730 is displayed in the foreground, represented by the shadow of pane area 732a. As another embodiment, Figure 7N A window 790 is shown associated with application C operating in full-screen mode (e.g., non-windowed mode). Figure 7N In the foreground represented by the shadow of pane area 792a, window 790 is displayed.

[0387] The device detects (1004) a first user input via an input device, the first user input corresponding to a request to add a second window associated with the first application.

[0388] In some implementations, the first user input corresponds to (1006) a selection within the first window that causes a command to be sent to the first application to generate a new window associated with the first application. For example, refer to Figure 7A Window 730 includes a capability representation (not shown) for opening a new window associated with application A. As another embodiment, refer to... Figure 7C The drop-down menu 746 includes a new window display 748a for opening a new window associated with application A.

[0389] In some implementations, the first user input corresponds to (1008) a combination of one or more keystrokes that causes an instruction to be sent to the first application to generate a new window associated with the first application. For example, a combination of one or more keystrokes that causes an instruction to be sent to the application to generate a new window associated with the application is the "Ctrl+N" combination. As one embodiment, Figures 7A-7B A sequence is shown in which a new window 740 is displayed within display area 701 in response to a "Ctrl+N" key combination issued to application A while application A is operating in windowed mode. As another embodiment, Figures 7N-7OThe sequence is shown, wherein in response to a "Ctrl+N" key combination issued to application C while application C is operating in full-screen mode, a merged window 795 with tabs 794a for the previous window 790 is created and a new tab 794b is displayed.

[0390] In some implementations, a combination of one or more keystrokes that causes a command to be sent to a first application to generate a new tab associated with the first application results in a new window associated with the first application (e.g., "Ctrl+T"). In some implementations, if a user enters a combination of one or more keystrokes corresponding to a command to be sent to the first application to generate a new tab associated with the first application plus a modifier key (e.g., "Ctrl+Opt+T"), a new window associated with the first application is displayed. In some implementations, if a user enters a combination of one or more keystrokes corresponding to a command to be sent to the first application to generate a new window associated with the first application plus a modifier key (e.g., "Ctrl+Opt+N"), a new tab associated with the first application is displayed.

[0391] In response to detecting first user input, and based on determining that a first window should be displayed in the display area in full-screen mode, the device adds a second window as a new tab within the tab bar associated with the first window (1010). In some embodiments, the first window becomes a background tab, and the new tab associated with the second window is displayed in the foreground. In some embodiments, the new tab associated with the second window is added as a background tab, and the first window remains in the foreground. For example, Figures 7N-7O The sequence is illustrated, in which a new window command (e.g., the "Ctrl+N" key combination) is issued to application C when application C is operating in full-screen mode, a merged window 795 with tabs 794a for the previous window 790 is created and a new tab 794b is displayed. Thus, according to some implementations, the operating system enables tab functionality for applications that do not have their own tabbed functionality. This, for example, provides the user with a less cluttered and more intuitive interface.

[0392] In some implementations, adding a second window as a new tab within the tab bar associated with the first window includes (1012): after the second application generates the second window, displaying the second window as a tab within the tab bar associated with the first window, as a new tab. In some implementations, the first application does not have its own tab functionality. Therefore, the operating system treats the new window as a virtual tab and independently overlays the tab bar on the first and second windows. Thus, for example, in Figure 7OIn the example, the windows corresponding to tabs 794a and 794b are full-screen windows stacked on top of each other, so that the foreground window is displayed on top of the stack (e.g., Figure 7O (A new window associated with tab 794b). According to some implementations, the tab is displayed within a virtual tab bar overlaid on the new foreground window by the operating system. Therefore, in some implementations, the operating system enables tab functionality for applications that do not have their own built-in tab functionality. This, for example, provides the user with a less cluttered and more intuitive interface.

[0393] In some implementations, adding a second window as a new tab within the tab bar associated with the first window includes (1014): determining whether a global tabbed window feature is enabled; and, based on determining that the first window is displayed within the display area in full-screen mode, and based on determining that a global tabbed window is enabled, adding a second window as a new tab within the tab bar associated with the first window. In some implementations, the operating system includes global tab settings that can be adjusted so that tabbed windows can be created manually, always created, or only created when the application is operating in full-screen mode. For example, Figures 7E-7G The sequence of global tab settings changing from "Manual" to "Always" is shown. In some implementations, Figures 7E-7G The tab preferences associated with the pick menu 762d are suitable for applications that do not have their own tab functionality. This provides users with a more intuitive interface that is less cluttered, for example. In some implementations, Figures 7E-7G The tab preferences associated with the Pick menu 762d apply to all applications. In some implementations, Figures 7E-7G The tab preferences associated with the Pick menu 762d apply to all applications except those included in the Exit list.

[0394] like Figure 7FAs shown, the pick menu 762d includes a "Manual" option 764a, wherein a new window action issued to the foreground application opens a window associated with the foreground application, and a new tab action issued to the foreground application opens a new tab associated with the foreground application if the foreground application has its own tab functionality. In some embodiments, inputting a modifier key plus a new window key combination overrides the default setting. For example, if the default is to open in a new window (e.g., "Manual" behavior), it opens in a tabbed window associated with the foreground application. As another embodiment, if the default is to open in a tabbed window (e.g., "Always" behavior), it opens in a new window associated with the foreground application. In some embodiments, inputting a modifier key plus a click on the taskbar icon overrides the default setting. As one embodiment, if the default is to open in a new window (e.g., "Manual" behavior), it opens in a tabbed window for the application corresponding to the taskbar icon. As another embodiment, if the default is to open in a tabbed window (e.g., "Always" behavior), it opens in a new window for the application corresponding to the taskbar icon.

[0395] like Figure 7F As shown, the pick menu 762d also includes a "Always" option 764b, wherein a new window operation issued to the foreground application opens a new tab associated with the foreground application, and (optionally) a new tab operation issued to the foreground application opens a new window associated with the foreground application. Figure 7F As shown, the pick menu 762d also includes a "Fullscreen Only" option 764c, wherein a new window operation issued to the foreground application while in fullscreen mode opens a new tab associated with the foreground application, and (optionally) a new tab operation issued to the foreground application while in fullscreen mode opens a new window associated with the foreground application.

[0396] As an example, in Figures 7E-7G After the Lieutenant General changed the global tab setting from "Manual" to "Always", the "Always" behavior applies to Figures 7H to 7M As another embodiment, in Figures 7E-7G Before the global tab setting was changed from "Manual" to "Always", the "Manual" behavior applied to... Figures 7A-7D As another example, the "fullscreen only" behavior applies to Figures 7N-7O .

[0397] In some implementations, the first application is not included (1016) on the select-exit list for global tabbed window functionality. In some implementations, the global tab setting applies to all applications not included on the select-exit list. For example, the select-exit list includes applications with their own tab functionality, user-specified applications, and / or applications developed by the same developers as the operating system. Therefore, according to some implementations, applications with their own tab functionality can be exempted from the global tab setting, thereby avoiding potentially deceptive tab functionality.

[0398] In some implementations, after detecting the first user input, the device detects (1018) subsequent user input via an input device to add a third window associated with the second application. In response to detecting subsequent user input, and based on determining that the first window is displayed within the display area in full-screen mode, the device adds the third window as a new tab within the tab bar associated with the first window. In response to detecting subsequent user input, and based on determining that the first window is displayed within the display area in windowed mode, the device displays the third window as a separate window within the display area. For example, refer to... Figures 7N-7O If a subsequent new window command is issued to a different application (not shown), another tab will be added to the merged window 795. For example, see reference... Figures 7A-7B If a subsequent command to create a new window is issued to a different application (not shown), another window is added within display area 701. Therefore, according to some implementations, tab functionality is enabled between multiple applications. For example, a merged window with tabs for multiple applications provides the user with a less cluttered and more intuitive interface.

[0399] In response to detecting first user input, and based on determining that a first window is to be displayed within the display area in window mode, the device displays (1020) a second window independent of the first window within the display area. In some embodiments, the second window is located behind the first window, and the first window remains in the foreground or "in focus". In some embodiments, the second window overlays the first window, and the second window is a foreground window or "in focus". As one embodiment, Figures 7A-7B A sequence is shown in which a new window 740 is displayed within display area 701 in response to a new window command (e.g., the "Ctrl+N" key combination) issued to application A when application A is operating in window mode.

[0400] In some implementations, after displaying a second window independent of the first window within the display area, the device detects (1022) a second user input via an input device to merge the first and second windows into a single tabbed window. In response to the detected second user input, the device replaces the display of the independent first and second windows with a merged window, which includes a tab bar with a first tab associated with the first window and a second tab associated with the second window. According to some implementations, the tabbed window is generated by the operating system from multiple open windows. For example, the operating system hides open windows except for the "top" open window associated with the foreground tab and moves / resizes the windows when a request is made to display the hidden windows, so that they are displayed stacked on top of each other. Therefore, in some implementations, the operating system enables tab functionality for applications that do not have their own tabbed functionality. This, for example, provides the user with a less cluttered and more intuitive interface.

[0401] In some implementations, the application is unaware that its windows are being displayed within a single tabbed window. According to some implementations, the application can operate relative to windows as normal, treating them as if they had just been stacked on top of each other. For example, to improve performance, the application may optionally be required to resize windows only when they are moved to the foreground of the tabbed window.

[0402] For example, Figures 7B-7D A sequence is shown in which multiple windows 710, 720, 730, and 740 associated with application A are merged into a single merged window 750 having tabs 756a, 756b, 756c, and 756d corresponding to the multiple windows 710, 720, 730, and 740. In some embodiments, Figure 7C The "Create Tabbed Window" option 748c within the drop-down menu 746 enables the display of windows associated with applications that do not have their own tab functionality within a tabbed window. This allows, for example, opening windows 710, 720, 730, and 740 to be resized to the same size and stacked on top of each other, so that a foreground window (e.g., window 740 associated with tab 756d) is displayed on top of the stack. In this embodiment, tabs 756a, 756b, 756c, and 756d are displayed within a virtual tab bar 752c that is superimposed on the top window of the window stack by the operating system. For example, if another tab is selected within the tab bar 752c, the window associated with the selected tab is moved to the top of the window stack.

[0403] According to some implementations, if a close tab command is issued to one of tabs 756a, 756b, 756c, and 756d, the operating system issues a command to application A to close the window corresponding to that tab. According to some implementations, if a close / exit command is issued to the merged window 750, the operating system issues a command to application A to close each of the windows 710, 720, 730, and 740 corresponding to tabs 756a, 756b, 756c, and 756d in the merged window 750.

[0404] According to some implementations, if one of the tabs 756a, 756b, 756c, and 756d is dragged out from the tab bar 752c, the window corresponding to that tab is displayed independently of the window stack (e.g., as shown in the image). Figure 7L-Figure 7M (As shown). In some implementations, tabs 756a, 756b, 756c, and 756d can be dragged out from the merged window 750 and into the space bar associated with the top edge of the display area 701. According to some implementations, if a window is dragged into the merged window 750, a new tab is added to the merged window 750 as a foreground or background tab (e.g., as shown). Figures 7J-7K (As shown).

[0405] In some implementations, a tab bar is displayed (1024) in the pane area of ​​the merged window, and the tab bar is generated and controlled independently of the first application. In some implementations, the first application does not have its own tab functionality. Therefore, according to some implementations, the operating system treats the first and second windows as virtual tabs and displays the tab bar independently of the first application. This, for example, provides the user with a less cluttered and more intuitive interface. For example, see Reference Figure 7D Tabs 756a, 756b, 756c, and 756d are displayed within a virtual tab bar 752c, which is overlaid on the top window of the window stack by the operating system. In this embodiment, the virtual tab bar 752c is overlaid on the pane area of ​​the window 740 associated with the foreground tab 756d. Thus, in Figure 7D In the above, window 740 is the top window in a stack of windows 710, 720, 730 and 740.

[0406] In some implementations, after displaying the merged window, the device detects (1026) third user input via an input device to close the merged window, and in response to detecting the third user input, the device sends a window closing command to the first application to close the first and second windows. For example, see Reference Figure 7DIf a close / exit command is issued to the merged window 750 (e.g., by selecting the close enable option in the pane area 752a), the operating system issues a command to application A to close each of the windows 710, 720, 730, and 740 corresponding to the tabs 756a, 756b, 756c, and 756d in the merged window 750 (not shown).

[0407] In some implementations, after displaying the merged window, the device detects (1028) a third user input, independent of the merged window, dragging a third window associated with the second application into the tab bar of the merged window; and in response to the third user input, the device adds a new tab associated with the third window to the tab bar of the merged window. For example, the third window may include one or more tabs corresponding to a window of the second application. Figures 7J-7K The sequence is shown, in which a window 770 associated with application A is added as a new foreground tab 764c to a merged window 765 that includes tabs 764a and 764b associated with application B. Thus, in Figure 7K In this configuration, the merged window 765 includes tabs 764a and 764b associated with application B and a foreground tab 764c associated with application A. Therefore, according to some implementations, the tab functionality provided by the operating system functions similarly to an application with its own tab functionality.

[0408] In some implementations, after the merged window is displayed, the device drags a third user input to a third window independent of the merged window via input device detection (1030), wherein the third window is associated with the second application, and in response to the third user input, the device adds a new tab associated with the third window to the tab bar of the merged window. In some implementations, a virtual tab bar is overlaid on the third window, and tabs are created within the new virtual tab bar for both the third window and the merged window. For example, see reference... Figure 7J Drag the merged window 765 into the pane area 772a of window 770 (not shown). Continuing with this embodiment, a virtual tab bar with tabs 764a and 764b corresponding to window 770 is overlaid on the merged window (not shown). Thus, according to some embodiments, the tab functionality provided by the operating system works similarly to an application with its own tab functionality. This, for example, provides the user with a less cluttered and more intuitive interface.

[0409] In some implementations, after adding a new tab associated with the third window to the tab bar of the merged window, the device detects (1032) a fourth user input to close the merged window via an input device, and in response to detecting the fourth user input, the device sends a first window close instruction to a first application to close the first and second windows, and sends a second window close instruction to a second application to close the third window. For example, see reference... Figure 7K If a close / exit command is issued to the merged window 765 (e.g., by selecting the close enable option in the pane area 767a), the operating system issues a command to application A to close each of the windows corresponding to tabs 764a and 764b and the window corresponding to tab 764c (not shown).

[0410] It should be understood that, Figures 10A-10C The specific order of operations described herein is merely an example and is not intended to indicate that the order is the only possible order in which these operations can be performed. Those skilled in the art will conceive of various ways to reorder the operations described herein. Furthermore, it should be noted that the details of other processes described herein in conjunction with other methods (e.g., method 800 and method 900) are similarly applicable to the above-described procedures. Figures 10A-10C The method 1000. For example, the user interface object and / or focus selector described above with reference to method 1000 optionally has one or more of the features of user interface objects and / or focus selectors described herein with reference to other methods (e.g., methods 800 and 900). For the sake of brevity, these details will not be repeated here.

[0411] According to some implementation plans Figure 11 A functional block diagram of an electronic device 1100 configured according to the principles of various described embodiments is shown. The functional blocks of this device are optionally implemented by hardware, software, firmware, or a combination thereof, carrying out the principles of the various described embodiments. Those skilled in the art will understand that... Figure 11 The functional blocks described herein may be optionally combined or separated into sub-blocks to implement the principles of the various described embodiments. Therefore, the description herein optionally supports any possible combination or separation or further limitation of the functional blocks described herein.

[0412] like Figure 11As shown, the electronic device 1100 includes a display unit 1102 configured to display a user interface; one or more input units 1104 configured to receive user input; and a processing unit 1108 coupled to the display unit 1102 and the one or more input units 1104. In some embodiments, the processing unit 1108 includes a display control unit 1110, an input detection unit 1112, a pairing unit 1114, and a depairing unit 1116.

[0413] Processing unit 1108 is configured (e.g., using display control unit 1110) to display a first window and a second window on display unit 1102 within a display area, the first window having a first edge parallel to a second edge of the second window; and (e.g., using input detection unit 1112) to detect a first user input via one or more input units 1103 that moves the first edge of the first window toward the second edge of the second window. In response to detecting the first user input, and based on determining that the first user input satisfies one or more pairing criteria, processing unit 1108 is further configured (e.g., using pairing unit 1114) to pair the first edge of the first window to the second edge of the second window, such that the first window stops moving in response to the first user input before overlapping with the second window, wherein the one or more pairing criteria include a first pairing criterion satisfied when the first input corresponds to a movement of the first edge toward the second edge less than an angle threshold along a predefined axis. In response to detecting the first user input, and based on determining that the first user input does not meet one or more pairing criteria, the processing unit 1108 is further configured to: (e.g., using the display control unit 1110) continue the movement of the first window based on the first user input, such that the first window at least partially overlaps with the second window.

[0414] In some implementations, the first user input corresponds to moving the first window within the display area by dragging the first window toward the second window.

[0415] In some implementations, the first user input corresponds to resizing the first window within the display area by dragging the first edge of the first window toward the second window.

[0416] In some implementations, a second pairing criterion of one or more pairing criteria includes a speed threshold, and satisfying the second pairing criterion includes determining that the speed associated with the first user input violates the speed threshold.

[0417] In some implementations, a third pairing criterion of one or more pairing criteria includes a distance threshold, and satisfying the third pairing criterion includes determining that the input corresponds to a movement of the first edge of the window toward the edge of the second window in the corresponding direction, but does not correspond to a movement exceeding a threshold amount in the corresponding direction.

[0418] In some implementations, in response to detecting a first user input, and based on determining that the first user input meets one or more pairing criteria and that the first window overlaps with the second window, the processing unit 1108 is further configured to: (e.g., using the display control unit 1110) continue the movement of the first window based on the first user input, and enable (e.g., using the display control unit 1110) to display the first window at least partially overlapping with the second window.

[0419] In some implementations, in response to detecting a first user input, and based on determining that the first user input satisfies one or more pairing criteria and that the second edge of the second window is occluded within the display area, the processing unit 1108 is further configured to: (e.g., using the display control unit 1110) continue the movement of the first window based on the first user input, and enable (e.g., using the display control unit 1110) to display the first window at least partially overlapping the second window.

[0420] In some embodiments, when the first edge of the first window aligns with the second edge of the second window, the processing unit 1108 is further configured to: (e.g., using the input detection unit 1112) detect a second user input that moves the first window away from the second window via one or more input units 1104. In response to the second user input, the processing unit 1108 is further configured to: (e.g., using the unpairing unit 1116) unpair the first edge of the first window from the second edge of the second window, and (e.g., using the display control unit 1110) move the first window according to a movement vector associated with the second user input.

[0421] In some embodiments, when the first edge of the first window is paired with the second edge of the second window, the processing unit 1108 is further configured to: (e.g., using the input detection unit 1112) detect a second component of the first user input that moves the first window away from the second window. In response to the second component of the first user input, and based on the determination that the magnitude of the second component violates a distance threshold, the processing unit 1108 is further configured to: (e.g., using the unpairing unit 1116) unpair the first edge of the first window from the second edge of the second window, and (e.g., using the display control unit 1110) move the first window according to the movement vector associated with the second component of the first user input.

[0422] In some embodiments, when the first edge of the first window is paired with the second edge of the second window, the processing unit 1108 is further configured to: (e.g., using the input detection unit 1112) detect a second user input via one or more input units 1104 that moves the first window toward the second edge of the second window. In response to detecting the second user input, and based on determining that the second user input meets one or more separation criteria, the processing unit 1108 is further configured to: (e.g., using the unpairing unit 1116) unpair the first edge of the first window from the second edge of the second window, and (e.g., using the display control unit 1110) move the first window above the second window according to the movement vector associated with the second user input. In response to detecting the second user input, and based on determining that the second user input does not meet one or more separation criteria, the processing unit 1108 is further configured to: (e.g., using the pairing unit 1114) maintain the pairing between the first edge of the first window and the second edge of the second window, and abandon moving the first window above the second window.

[0423] In some implementations, moving the first window above the second window according to a movement vector associated with a second user input includes: displaying an animation that makes the movement of the first window above the second window discontinuous, based on determining that the second user input corresponds to moving a focus selector above the second window; and abandoning the display of the animation that makes the movement of the first window above the second window discontinuous, based on determining that the second user input does not correspond to moving a focus selector above the second window.

[0424] In some embodiments, when the first edge of the first window aligns with the second edge of the second window, the processing unit 1108 is further configured to: (e.g., using the input detection unit 1112) detect a second user input corresponding to movement of the first edge relative to the second edge via one or more input units 1104. In response to detecting the second user input, and based on determining that the second user input corresponds to movement of the first window causing the first edge of the first window to move above the second edge, the processing unit 1108 is further configured to: (e.g., using the display control unit 1110) delay the movement of the first window until the second user input reaches a movement threshold. In response to detecting the second user input, and based on determining that the second user input corresponds to movement of the first window causing the first edge of the first window to move away from the second edge, the processing unit 1108 is further configured to: (e.g., using the display control unit 1110) begin moving the first window before the second user input reaches the movement threshold.

[0425] In some embodiments, when the first edge of the first window is paired with the second edge of the second window, the processing unit 1108 is further configured to: (e.g., using the input detection unit 1112) detect a second user input via one or more input units 1104 that moves the first window along the second edge of the second window. In response to detecting the second user input, and based on determining that the second user input meets one or more separation criteria, the processing unit 1108 is further configured to: (e.g., using the unpairing unit 1116) unpair the first edge of the first window from the second edge of the second window, and (e.g., using the display control unit 1110) move the first window according to a movement vector associated with the second user input. In response to detecting the second user input, and based on determining that the second user input does not meet any one of one or more separation criteria, the processing unit 1108 is further configured to: (e.g., using the pairing unit 1114) maintain the pairing between the first edge of the first window and the second edge of the second window, and (e.g., using the display control unit 1110) move the first window parallel to the second edge of the second window according to the second user input.

[0426] In some implementations, the parallel movement of the first window is constrained by the third edge of the second window, and the third edge of the second window is perpendicular to the second edge of the second window.

[0427] In some embodiments, when the first edge of the first window is paired with the second edge of the second window, the processing unit 1108 is further configured to: (e.g., using the input detection unit 1112) detect a second user input via one or more input units 1104 that moves the second window along the first edge of the first window. In response to detecting the second user input, and based on determining that the second user input meets one or more separation criteria, the processing unit 1108 is further configured to: (e.g., using the unpairing unit 1116) unpair the second edge of the second window from the first edge of the first window, and (e.g., using the display control unit 1110) move the second window according to the second user input. In response to detecting the second user input, and based on determining that the second user input does not meet any one of one or more separation criteria, the processing unit 1108 is further configured to: (e.g., using the pairing unit 1114) maintain the pairing between the first edge of the first window and the second edge of the second window, and (e.g., using the display control unit 1110) move the second window parallel to the first edge of the first window according to the movement vector associated with the second user input.

[0428] In some embodiments, when the first edge of the first window aligns with the second edge of the second window, the processing unit 1108 is further configured to: (e.g., using the input detection unit 1112) detect, via one or more input units 1104, a second user input that drags a corresponding edge of the first window along the second edge of the second window, wherein the corresponding edge of the first window is perpendicular to the second edge of the second window. In response to detecting the second user input, the processing unit 1108 is further configured to: (e.g., using the display control unit 1110) reset the size of the scale of the first window associated with the corresponding edge based on the second user input.

[0429] In some implementations, the scale of the first window is reset by the third edge of the second window, and the third edge of the second window is perpendicular to the second edge of the second window.

[0430] According to some implementation plans Figure 12 A functional block diagram of an electronic device 1200 configured according to the principles of various described embodiments is shown. The functional blocks of this device are optionally implemented by hardware, software, firmware, or a combination thereof, carrying out the principles of the various described embodiments. Those skilled in the art will understand that... Figure 12 The functional blocks described herein may be optionally combined or separated into sub-blocks to implement the principles of the various described embodiments. Therefore, the description herein optionally supports any possible combination or separation or further limitation of the functional blocks described herein.

[0431] like Figure 12 As shown, the electronic device 1200 includes a display unit 1202 configured to display a user interface; one or more input units 1204 configured to receive user input; and a processing unit 1208 coupled to the display unit 1202 and the one or more input units 1204. In some embodiments, the processing unit 1208 includes a display control unit 1210, an input detection unit 1212, an input type determination unit 1214, and an extension determination unit 1216.

[0432] Processing unit 1208 is configured to: enable (e.g., using display control unit 1210) to display a first window on display unit 1202 in a display area; and (e.g., using input detection unit 1212) to detect a first user input associated with one or more edges of the first window via one or more input units 1204. In response to detecting the first user input, and based on a determination (e.g., using input type determination unit 1214) that the first user input corresponds to a first input type, processing unit 1208 is further configured to: (e.g., using display control unit 1210) reset the size of one or more scales corresponding to one or more edges of the first window based on the movement associated with the first user input. In response to detecting the first user input, and based on a determination (e.g., using input type determination unit 1214) that the first user input corresponds to a second input type, processing unit 1208 is further configured to: (e.g., using display control unit 1210) move one or more edges of the first window to one or more corresponding edges of the display area while maintaining the corresponding one or more opposite edges of the first window.

[0433] In some implementations, the first input type corresponds to an input that includes selection followed by movement.

[0434] In some implementations, the second input type corresponds to a static input.

[0435] In some implementations, moving one or more edges of the first window to one or more corresponding edges of the display area includes moving a single edge of the first window to the corresponding edge of the display area based on determining that a first user input corresponds to a single edge of the first window.

[0436] In some implementations, after moving a single edge of the first window to the edge of the display area corresponding to the single edge of the first window, the processing unit 1208 is further configured to: (e.g., using the input detection unit 1212) detect a second user input associated with the single edge of the first window via one or more input units 1204. In response to detecting the second user input, and based on a determination (e.g., using the input type determination unit 1214) that the second user input corresponds to a second input, the processing unit 1208 is further configured to: (e.g., using the display control unit 1210) move the single edge of the first window to the position on the display unit 1202 where the single edge was located before the first user input was detected.

[0437] In some implementations, before the first user input is detected, a second window is displayed in the display area between the first window and the display area at the edge corresponding to a single edge of the first window, and according to determining (e.g., using the input type determination unit 1214) that the first user input corresponds to a single edge of the first window and a second input type, the single edge of the first window moves to the corresponding edge of the display area and is constrained by the edge of the second window parallel to the single edge of the first window.

[0438] In some implementations, moving one or more edges of the first window to one or more corresponding edges of the display area includes: moving two edges of the first window adjacent to ...

Claims

1. A method comprising: at a device with one or more processors, non-transitory memory, a display, and an input device: displaying, on the display, in a display area, a first window, wherein the first window includes a first edge at a first location and a second edge at a second location; detecting, via the input device, a first user input associated with the first edge of the first window; in response to detecting the first user input: in accordance with a determination that the first user input corresponds to a first input type, resizing a size of a dimension of the first window that corresponds to the first edge of the first window based on a determined amount of movement associated with the first user input, wherein an amount of the determined amount of movement associated with the first user input is less than a distance between the first edge of the first window and a corresponding edge of the display area, and wherein after resizing the size of the dimension of the first window that corresponds to the first edge of the first window, the first edge of the first window is not co-located with the corresponding edge of the display area; and in accordance with a determination that the first user input corresponds to a second input type that is different from the first input type, moving the first edge of the first window to the corresponding edge of the display area while maintaining display of the second edge at the second location.

2. The method of claim 1, wherein the first input type corresponds to an input that includes a selection followed by the determined amount of movement.

3. The method of claim 1, wherein the second input type corresponds to a stationary input.

4. The method of claim 1, wherein moving the first edge of the first window to the corresponding edge of the display area is in accordance with a determination that the first user input corresponds to the first edge of the first window.

5. The method of claim 4, further comprising: after moving the first edge of the first window to the corresponding edge of the display area, detecting, via the input device, a second user input associated with the first edge of the first window; and in response to detecting the second user input, and in accordance with a determination that the second user input corresponds to the second input type, moving the first edge of the first window to the first location.

6. The method of claim 4, wherein, prior to detecting the first user input, displaying, within the display area, between the first window and the corresponding edge of the display area, a second window, and wherein, in accordance with a determination that the first user input corresponds to the first edge of the first window and to the second input type, the movement of the first edge of the first window to the corresponding edge of the display area is constrained by the second window parallel to an edge of the first window.

7. The method of claim 1, further comprising: in accordance with a determination that the first user input corresponds to a corner of the first window and is of the second input type, moving the first edge of the first window to the corresponding edge of the display area and moving a third edge of the first window to a corresponding edge of the display area, wherein the first edge and the third edge are adjacent to the corner of the first window.

8. The method of claim 7, further comprising: after moving the first edge and the third edge of the first window adjacent to the corner of the first window to two corresponding edges of the display area, detecting, via the input device, a second user input associated with at least one edge of the first window; and in response to detecting the second user input: in accordance with a determination that the second user input corresponds to a single edge of the first window, and in accordance with a determination that the second user input corresponds to the second input type, moving the single edge of the first window to a position on the display that the single edge was in prior to detecting the first user input; and in accordance with a determination that the second user input corresponds to a corner of the first window, and in accordance with a determination that the second user input corresponds to the second input type, moving two edges of the first window corresponding to the corner of the first window to positions on the display that the two edges were in prior to detecting the first user input.

9. The method of claim 7, wherein prior to detecting the first user input, a second window is displayed within the display area between the first window and at least one of the two corresponding edges of the display area, and wherein in accordance with a determination that the first user input corresponds to the corner of the first window, and in accordance with a determination that the second user input corresponds to the second input type, the movement of at least one of the two edges of the first window adjacent to the corner of the first window to the two corresponding edges of the display area is constrained by the second window being parallel to at least one of the two edges of the first window.

10. The method of claim 1, wherein resetting the size of the dimension of the first window corresponding to the first edge of the first window comprises: in accordance with a determination that the first user input satisfies one or more expansion criteria, resetting the size of the dimension of the first window to two parallel edges of the display area; and in accordance with a determination that the first user input does not satisfy the one or more expansion criteria, resetting the size of the dimension of the first window to one edge of the display area.

11. The method of claim 1, further comprising: ​ in accordance with a determination that the first user input satisfies one or more expansion criteria, resizing a first dimension of the first window to a first set of parallel edges of the display area and resizing a second dimension of the first window to a second set of parallel edges of the display area, wherein the first set of parallel edges and the second set of parallel edges of the display area are different; and in accordance with a determination that the first user input does not satisfy the one or more expansion criteria, resizing the first dimension of the first window to a first edge of the display area and resizing the second dimension of the first window to a second edge of the display area.

12. The method of claim 1, further comprising: in response to detecting the first user input: in accordance with a determination that the first user input corresponds to a third input type, moving one or more edges of the first window to one or more corresponding edges of the display area.

13. An electronic device, comprising: one or more processors; a non-transitory memory storing one or more programs that, when executed by the one or more processors, cause the one or more processors to perform the methods of any of claims 1-12.

14. A non-transitory computer-readable storage medium storing one or more programs that, when executed by one or more processors, cause the one or more processors to perform the methods of any of claims 1-12.

15. A computer program product, comprising one or more programs that, when executed by one or more processors, cause the one or more processors to perform the methods of any of claims 1-12.

16. An apparatus comprising means for performing the methods of any of claims 1-12.

Images