Image Dialogs
There are four tabbed dialog panes that make up a related set. When
text is selected instead of an image, the first pane is the Character
Properties instead of the Image pane. For descriptions of the other
panes used with both the Image and Character panes, see the Link
Properties and Paragraph
Properties. All four of these property panes behave according the the
rules common to all "multipane
or tabbed dialogs."
1. Image Properties
| Windows: |
 |
| Mac: |
UNIX: |
 |
|
Issues
Issues
Alignment Control
The Windows version uses an "Alignment toolbar" whose buttons
retain the pressed down state and are mutually exclusive like radio buttons.
We have already decided to use the popup menu or combobox control as shown
in the Mac version. The behavior described here is based on using the combobox
as the alignment control.
We also have a problem in trying to reduce the number of alignment
states. In the 4.x and earlier versions, Netscape has supported the following
alignment values (in the order of the Windows buttons shown above): TEXTTOP,
ABSCENTER, CENTER, BASELINE, ABSBOTTOM, LEFT, and RIGHT. (The BASELINE
value is never actually written out - it is the default alignment.)
The correct HTML 3.2 and 4.0 vertical alignment values are TOP, MIDDLE,
and BOTTOM. (The default display style is BOTTOM, so we should assign no
attribute in that case.) We made some progress in conforming to the standards
in the initial 5.0 work by using MIDDLE instead of CENTER, and converting
ABSCENTER to MIDDLE, and ABSBOTTOM to the default baseline/bottom style
when the user edits image properties. The implementation in the now "MozillaClassic"
Composer converts these attributes, but does not alter the document if
the old ALIGN values were not actually edited. In the new 5.0, these attributes
will be abstracted through the DOM, so we will have to "permanently" convert
all the old styles to the accepted HTML values during document parsing.
See the enhancements for further
improvements to the Alignment control.
Original Size Control
Windows and Mac also differ in the implementation of the "Original Size"
control. In Windows, a button is supplied which, when clicked, should get
the actual size of the image and set those values as the Width and Height
editboxes. Mac uses the radio buttons as shown to let the user choose between
the original size and a custom size. We need to decide which way is better.
The discussion below refers to the Windows implementation.
Invoke
-
Menu: Insert | Image to insert a new image
-
Click on the "Image" toolbar button to insert a new image
-
Menu: Format | Image Properties (this menu item should be active only if
the current selection consists of a single image)
This is used to change properties of an existing image.
-
Double click on an image to edit properties of that image (this should
select the single image on the first mouse down).
Initialization
-
The "Use as background" checkbox is always unchecked initially.
-
Get the current document selection:
-
If the selection is a single image, get the current attributes of this
image.
-
Set a boolean to remember if we are inserting a new image (TRUE if selection
is not a single image.)
-
Set the enable state of the "Remove Image Map" button.
-
First time only: Set a boolean ("HaveIsMap") to record if an ISMAP attribute
is set for the image.
-
Enable the button if HaveIsMap is TRUE, else disable the button
-
Set the "Image location" to the SRC value of an image and the "Alternate
text" to the ALT value if we editing properties of an existing image.
-
Set the state of the "OK" button:
-
If there exists non-empty text for both the current "Image location" and
the "Alternate text" (ALT value), enable the OK button.
-
Otherwise, disable the OK button.
-
Set the enable state of the "Edit Image"
button:
-
If the current Image location is a local file URL, enable the button.
-
If the Image location is empty or not a local file URL, disable the button.
-
Initialize the dialog controls with the state of the existing image, or
use the default values if we are inserting a new image:
| HTML Attribute |
Dialog Control |
Default Value |
| SRC |
"Image location" editbox |
empty |
| ALT |
"Alternate text" editbox
If we have an image location and there is no current Alt text,
construct a string from just the filename portion of the location (strip
away the protocol, host, and subdirectories, but keep the file extension)
and use that for the Alternate text editbox. |
empty |
| ALIGN |
Alignment toolbar (or combobox,
see below)
(The toolbar buttons act like radio buttons: When one is pressed, the
previous pressed button is raised, and the button stays pressed when user
lifts mouse button.) |
No attribute set
Select "Bottom baseline" in the control |
| HEIGHT |
"Height" editbox
If current value includes "%", set the Height units combobox to "percent",
else select "pixels" |
not set |
| WIDTH |
"Width" edtibox
Use same rules as Height to set the selected item in the associated
units combox. |
not set |
| NOSAVE |
"Leave image at original location" checkbox |
Unchecked |
| The rest of the controls are in the "Space around image"
group or region |
| HSPACE |
"Left and right" editbox |
0 |
| VSPACE |
"Top and bottom" editbox |
0 |
| BORDER |
"Solid border" editbox |
0 |
Dialog Rules
| User Action |
Response |
| Change text in "Image location" editbox |
-
Get contents of editbox, remove excess whitespace from beginning and end
of string and save as the current Image location.
-
Set the enable states of the OK and Edit
Image buttons as described above
|
-
User changes focus from Image location editbox, or
-
After selecting a file with "Choose File" button, or
-
User tries to change to a different tabbed pane.
|
Get and validate the "Image location" from
the contents of the Image location editobox:
-
Remove excess whitespace from beginning and end of string
-
Convert string to URL format. Strings typed in local file format (e.g.,
"d:\specs\image.gif") are converted into the file URL format ( "file:///d|specs/image.gif")
if they are fully qualified (i.e., the drive letter is included.) Windows
backslashes "\" are always changed to web/UNIX style forward slashes "/".
-
Convert URL to an absolute URL using the current document's URL to resolve
relative URLs. For example: Assume document URL is "http://webgroup/ComposerEngSpec.html"
An image enterred as "http://anyplace/anyfile.gif" will not be changed,
but a local image such as "MyImage.gif" will be changed to: "http://webgroup/MyImage.gif."
Note that all image URLs will be reexamined if the file is saved or
published to a different location. The copying and resolution of image
URLs also depends on the state of the "Leave iamge at original location"
checkbox in this dialog and the setting of the "Keep images with page"
checkbox in the Composer
Publishing Preferences (Edit | Preferences | Composer | Publishing.)
-
Set the Alternate text editbox contents as described
above.
-
Set the enable states of the OK and Edit
Image buttons as described above
-
If the user was changing tabbed panes, also check if the Image location
and Alternate text are emtpy. Warn the
user as described below and don't change panes if there is no Image
location. (There must be Alternate text if there was an Image location
since we just set it automatically.)
|
| Click on "Use as background" checkbox |
-
If new state is checked, disable all controls except those in the
"Image location" group (Image location editbox, "Choose file" and "Edit
Image" buttons, "Leave image..." and "Use as background checkboxes.)
-
If new state is unchecked, enable all controls in the dialog disabled by
unchecking this, but set the "Remove Image Map" button only if HaveIsMap
is still TRUE.
|
| Click on "Constrain" checkbox |
|
Actions
| Click Button |
Response |
| Choose File |
Popup the OS-specific Open File dialog and let user select a file.
Use the caption "Choose Image File" for this dialog. If they do not cancel
from that dialog, validate the entry (as described
above) and display the user's filename URL in the Image location editbox. |
| Edit Image |
-
Get the external image editor application from the preference "editor.image_editor".
If it is empty, popup the OS-specific Open File dialog, using the caption
"Choose Image Editor Application." If they do not cancel from that dialog,
save the image editor string to the "editor.image_editor" preference and
continue.
-
Launch the external editor application with the current Image location.
(See the comment in the Enhancements
section.)
|
| Remove Image Map |
-
Set the HaveIsMap boolean to FALSE
-
Disable the "Remove Image Map" button (it can be used only once)
|
| Edit Extra HTML |
Popup the Extra HTML dialog and save
the resulting string as the "extra HTML" for the Image element. |
| OK or Apply |
-
Get and validate the Image location and get
the "Alternate text" from the "Alternate text" editbox.
-
If the either the Image location
or Alternate text is empty, popup a message dialog with the caption "Image
Properties" and the message: "You must supply an Image URL and Alternate
text for the image". If we use that dialog, set the enable state of the
OK
and Edit Image buttons as described above,
put the focus in the offending editbox so user can enter a valid value,
and don't continue with the following:
-
Get the values of all attributes from the controls.
-
Get "Use as background" checkbox state:
-
If checked, use the Image location with the
|
Enhancements:
-
In the current implementation,
if the current selection is an single image, the menu command "Insert |
Image" and the "Image" toolbar button do not cause the insertion of a new
image, but rather bring up properties of the selected image. Is this the
behavior we want in the new version? Maybe keep that behavior only if using
the toobar button?
This problem exists for other elements as well: (Target, HTML Tag,
and Horizontal line), so we should use the same behavior for all of these
objects.
-
Optimally, each line in the contents
of the Alignment combobox should include a bitmap like that shown on the
current Windows button faces or Mac popup menu items, with words to the
right to describe the alignment type: "Top", "Middle", "Bottom", "Left
margin", and "Right margin". Considering that these alignments are really
not about the vertical alignment of the image relative to its parent, but
are really about the alignment or wrapping of text relative to the image,
it might be clearer and more consistent to use "Wrap text right" and "Wrap
text left" instead of, or in addition to "Left margin" and "Right margin"
respectively.
-
In the current implementation, the text in the Height and Width units comboboxes
is for the percent mode is "% of window." This is technically correct only
if the image is not within a table cell. In that case, the percent is based
on the height or width of the cell, rather than the window dimension. We
should change this string to "% of parent" or set different strings ("%
of window" and "% of cell") appropriately.
-
We need to figure out how to update the
image after it has been changed by the user, either by using the "Edt Image"
button, or by some other means of changing the image outside of Communicator,
such as simply renaming a file. We currently have a bug such that we can't
reload an image that has changed without first exiting the application.
It has to do with how we cache images.
2. Image
Conversion
| Windows: |
Mac: |
UNIX: |
 |
|
|
Invoke
Initialization
Dialog Rules
Actions
Click Button
User Action |
Response |
|
|
|
|
3. JPEG Quality
| Windows: |
Mac: |
UNIX: |
 |
|
|
Invoke
Initialization
Dialog Rules
Actions
Click Button
User Action |
Response |
|
|
|
|
4. Loading
Image
| Windows: |
Mac: |
UNIX: |
 |
|
|
Invoke
Initialization
Dialog Rules
Actions
Click Button
User Action |
Response |
|
|
|
|