Bug 101910 alt text is not displayed in image properties

patch by neil.marshall@sympatico.ca r=cmanske sr=jag a=asa git-svn-id: svn://10.0.0.236/trunk@132054 18797224-902f-48f8-a5cc-f745e15eee43
2002-10-16 02:05:34 +00:00
parent 5d7c539c7c
commit 4f89d003a3
4 changed files with 130 additions and 79 deletions
--- a/mozilla/xpfe/browser/resources/content/metadata.js
+++ b/mozilla/xpfe/browser/resources/content/metadata.js
@@ -147,6 +147,7 @@ function checkForImage(elem, htmllocalname)
                   // "object" = <object>
                   // "input" = <input type=image>
                   // "background" = css background (to be added later)
+    var ismap = false;

    if (htmllocalname === "img") {
        img = elem;
@@ -167,25 +168,38 @@ function checkForImage(elem, htmllocalname)

        // Clicked in image map?
        var map = elem;
+        ismap = true;
+        setAlt(map);
+
        while (map && map.nodeType == Node.ELEMENT_NODE && !isHTMLElement(map,"map") )
            map = map.parentNode;

-        if (map && map.nodeType == Node.ELEMENT_NODE)
+        if (map && map.nodeType == Node.ELEMENT_NODE) {
            img = getImageForMap(map);
+            var imgLocalName = img && img.localName.toLowerCase();
+            if (imgLocalName == "img" || imgLocalName == "object") {
+                imgType = imgLocalName;
+            }
+        }
+
    }

    if (img) {
-        setInfo("image-url", img.src);

-        var size = getSize(img.src);
+        var imgInfo = imgType == "object" ? img.data : img.src;
+        setInfo ("image-url", imgInfo);
+        var size = getSize(imgInfo);
+
        if (size != -1) {
            var kbSize = size / 1024;
            kbSize = Math.round(kbSize*100)/100;
            setInfo("image-filesize", gMetadataBundle.getFormattedString("imageSize", [kbSize, size]));
+        } else {
+            setInfo("image-filesize", gMetadataBundle.getString("imageSizeUnknown"));
        }
-        if ("width" in img) {
-            setInfo("image-width", img.width);
-            setInfo("image-height", img.height);
+        if ("width" in img && img.width != "") {
+            setInfo("image-width", gMetadataBundle.getFormattedString("imageWidth", [ img.width ]));
+            setInfo("image-height", gMetadataBundle.getFormattedString("imageHeight", [ img.height ]));
        }
        else {
            setInfo("image-width", "");
@@ -200,6 +214,14 @@ function checkForImage(elem, htmllocalname)
        
        onImage = true;
    }
+
+    if (!ismap) {
+       if (imgType == "img" || imgType == "input") {
+           setAlt(img);
+       } else {
+           hideNode("image-alt");
+       }
+    }
 }

 function checkForLink(elem, htmllocalname)
@@ -327,14 +349,15 @@ function checkForTitle(elem, htmllocalname)
 */
 function setInfo(id, value)
 {
-    if (value == "") {
+    if (!value) {
        hideNode(id);
        return;
    }

    var node = document.getElementById(id+"-text");

-    if (node.namespaceURI == XULNS && node.localName == "label") {
+    if (node.namespaceURI == XULNS && node.localName == "label" ||
+       (node.namespaceURI == XULNS && node.localName == "textbox")) {
        node.setAttribute("value",value);

    } else if (node.namespaceURI == XULNS && node.localName == "description") {
@@ -566,3 +589,20 @@ function getSize(url) {
    catch(ex) {}
    return -1;
 }
+
+function setAlt(elem) {
+    var altText = document.getElementById("image-alt-text");
+    if (elem.hasAttribute("alt")) {
+        if (elem.alt != "") {
+            altText.value = elem.alt;
+            altText.setAttribute("style","font-style:inherit");
+        } else {
+            altText.value = gMetadataBundle.getString("altTextBlank");
+            altText.setAttribute("style","font-style:italic");
+        }
+    } else {
+        altText.value = gMetadataBundle.getString("altTextMissing");
+        altText.setAttribute("style","font-style:italic");
+    }
+
+}
--- a/mozilla/xpfe/browser/resources/content/metadata.xul
+++ b/mozilla/xpfe/browser/resources/content/metadata.xul
@@ -36,6 +36,7 @@
  -->

 <?xml-stylesheet href="chrome://navigator/skin/" type="text/css"?>
+<?xml-stylesheet href="chrome://navigator/skin/pageInfo.css" type="text/css"?>

 <?xul-overlay href="chrome://global/content/dialogOverlay.xul"?>

@@ -49,6 +50,7 @@
        title="&caption.label;"
        onload="onLoad()"
        class="dialog"
+        minwidth="350"
        persist="screenX screenY"
        screenX="24" screenY="24">

@@ -60,158 +62,164 @@

  <label id="no-properties" value="&no-properties.label;"/>
  
-  <groupbox id="link-sec">
-    <caption label="&link-sec.label;"/>
+  <vbox id="link-sec">
+    <label value="&link-sec.label;"/>
+    <separator class="groove"/>
    <grid>
      <columns>
+        <column/>
        <column/>
        <column flex="1"/>
      </columns>
      <rows>
        <row id="link-url">
+          <separator orient="vertical"/>
          <label value="&link-url.label; "/>
-          <hbox>
-            <label id="link-url-text" value="" class="text-link" 
-                  onclick="openLink(this)"/>
-            <spacer flex="1"/>
-          </hbox>
+          <textbox readonly="true" id="link-url-text"/>
        </row>
        <row id="link-target">
+          <separator orient="vertical"/>
          <label value="&link-target.label; "/>
-          <label id="link-target-text" value=""/>
+          <textbox readonly="true" id="link-target-text"/>
        </row>
        <row id="link-type">
+          <separator orient="vertical"/>
          <label value="&link-type.label; "/>
-          <label id="link-type-text" value=""/>
+          <textbox readonly="true" id="link-type-text"/>
        </row>
        <row id="link-lang">
+          <separator orient="vertical"/>
          <label value="&link-lang.label; "/>
-          <label id="link-lang-text" value=""/>
+          <textbox readonly="true" id="link-lang-text"/>
        </row>
        <row id="link-rel">
+          <separator orient="vertical"/>
          <label value="&link-rel.label; "/>
-          <label id="link-rel-text" value=""/>
+          <textbox readonly="true" id="link-rel-text"/>
        </row>
        <row id="link-rev">
+          <separator orient="vertical"/>
          <label value="&link-rev.label; "/>
-          <label id="link-rev-text" value=""/>
+          <textbox readonly="true" id="link-rev-text"/>
        </row>
      </rows>
    </grid>
-  </groupbox>
-  <groupbox id="image-sec">
-    <caption label="&image-sec.label;"/>
+    <separator/>
+  </vbox>
+  <vbox id="image-sec">
+    <label value="&image-sec.label;"/>
+    <separator class="groove"/>
    <grid>
      <columns>
+        <column/>
        <column/>
        <column flex="1"/>
      </columns>
      <rows>
        <row id="image-url">
+          <separator orient="vertical"/>
          <label value="&image-url.label; "/>
-          <hbox>
-            <label id="image-url-text" value="" class="text-link" 
-                  onclick="openLink(this)"/>
-            <spacer flex="1"/>
-          </hbox>
+          <textbox readonly="true" id="image-url-text"/>
        </row>
        <row id="image-width">
+          <separator orient="vertical"/>
          <label value="&image-width.label; "/>
-          <hbox>
-            <label id="image-width-text" value=""/>
-            <label value=" &image-pixels.label;"/>
-          </hbox>
+          <textbox readonly="true" id="image-width-text"/>
        </row>
-        <row id="image-height">    
+        <row id="image-height">
+          <separator orient="vertical"/>
          <label value="&image-height.label; "/>
-          <hbox>
-            <label id="image-height-text" value=""/>
-            <label value=" &image-pixels.label;"/>
-          </hbox>
-        </row>
-        <row id="image-desc">
-          <label value="&image-desc.label; "/>
-          <hbox>
-            <label id="image-desc-text" value="" class="text-link" 
-                  onclick="openLink(this)"/>
-            <spacer flex="1"/>
-          </hbox>
+          <textbox readonly="true" id="image-height-text"/>
        </row>
 	<row id="image-filesize">
-	  <label value="&image-filesize.label; "/>
-	  <label id="image-filesize-text" value="&filesize-unknown.label;"/>
+          <separator orient="vertical"/>
+          <label value="&image-filesize.label; "/>
+          <textbox id="image-filesize-text"/>
 	</row>
+        <row id="image-alt">
+          <separator orient="vertical"/>
+          <label value="&image-alt.label; "/>
+          <textbox readonly="true" id="image-alt-text"/>
+        </row>
+        <row id="image-desc">
+          <separator orient="vertical"/>
+          <label value="&image-desc.label; "/>
+          <textbox readonly="true" id="image-desc-text"/>
+        </row>
      </rows>
    </grid>
-  </groupbox>
-  <groupbox id="insdel-sec">
-    <caption label="&insdel-sec.label;"/>
+    <separator/>
+  </vbox>
+  <vbox id="insdel-sec">
+    <label value="&insdel-sec.label;"/>
+    <separator class="groove"/>
    <grid>
      <columns>
+        <column/>
        <column/>
        <column flex="1"/>
      </columns>
      <rows>
        <row id="insdel-cite">
+          <separator orient="vertical"/>
          <label value="&insdel-cite.label; "/>
-          <hbox>
-            <label id="insdel-cite-text" value="" class="text-link" 
-                  onclick="openLink(this)"/>
-            <spacer flex="1"/>
-          </hbox>
+          <textbox readonly="true" id="insdel-cite-text"/>
        </row>
        <row id="insdel-date">
+          <separator orient="vertical"/>
          <label value="&insdel-date.label; "/>
-          <label id="insdel-date-text" value=""/>
+          <textbox readonly="true" id="insdel-date-text"/>
        </row>
      </rows>
    </grid>
-  </groupbox>
-  <groupbox id="quote-sec">
-    <caption label="&quote-sec.label;"/>
+    <separator/>
+  </vbox>
+  <vbox id="quote-sec">
+    <label value="&quote-sec.label;"/>
+    <separator class="groove"/>
    <grid>
      <columns>
+        <column/>
        <column/>
        <column flex="1"/>
      </columns>
      <rows>
        <row id="quote-cite">
+          <separator orient="vertical"/>
          <label value="&quote-cite.label; "/>
-          <hbox>
-            <label id="quote-cite-text" value="" class="text-link" 
-                  onclick="openLink(this)"/>
-            <spacer flex="1"/>
-          </hbox>
+          <textbox readonly="true" id="quote-cite-text"/>
        </row>
      </rows>
    </grid>
-  </groupbox>
-  <groupbox id="misc-sec">
-    <caption label="&misc-sec.label;"/>
+    <separator/>
+  </vbox>
+  <vbox id="misc-sec">
+    <label value="&misc-sec.label;"/>
+    <separator class="groove"/>
    <grid>
      <columns>
+        <column/>
        <column/>
        <column flex="1"/>
      </columns>
      <rows>
        <row id="misc-lang">
+          <separator orient="vertical"/>
          <label value="&misc-lang.label; "/>
-          <label id="misc-lang-text" value=""/>
+          <textbox readonly="true" id="misc-lang-text"/>
        </row>
        <row id="misc-title">
+          <separator orient="vertical"/>
          <label value="&misc-title.label; "/>
-          <hbox>
-          <description id="misc-title-text" width="100%" style="margin: 0px;" flex="1"/>
-          </hbox>
+          <textbox readonly="true" id="misc-title-text"/>
        </row>
        <row id="misc-tblsummary">
+          <separator orient="vertical"/>
          <label value="&misc-tblsummary.label; "/>
-          <label id="misc-tblsummary-text" value=""/>
+          <textbox readonly="true" id="misc-tblsummary-text"/>
        </row>
      </rows>
    </grid>
-  </groupbox>
-
-  <spacer flex="1"/>
-
+    <separator/>
+  </vbox>
 </window>
--- a/mozilla/xpfe/browser/resources/locale/en-US/metadata.dtd
+++ b/mozilla/xpfe/browser/resources/locale/en-US/metadata.dtd
@@ -4,11 +4,10 @@
 <!ENTITY image-sec.label       "Image Properties">
 <!ENTITY image-url.label       "Location:">
 <!ENTITY image-desc.label      "Description:">
+<!ENTITY image-alt.label       "Alternate text:">
 <!ENTITY image-width.label     "Width:">
 <!ENTITY image-height.label    "Height:">
-<!ENTITY image-pixels.label    "pixels">
 <!ENTITY image-filesize.label  "Size of File:">
-<!ENTITY filesize-unknown.label "Unknown (not cached)">
 <!ENTITY insdel-sec.label      "Insert/Delete Properties">
 <!ENTITY insdel-cite.label     "Info:">
 <!ENTITY insdel-date.label     "Date:">
--- a/mozilla/xpfe/browser/resources/locale/en-US/metadata.properties
+++ b/mozilla/xpfe/browser/resources/locale/en-US/metadata.properties
@@ -4,5 +4,9 @@ parentFrameText=Parent frame
 sameFrameText=Same frame
 embeddedText=Embedded
 unableToShowProps=No properties available.
-
+altTextMissing=Missing
+altTextBlank=Blank
 imageSize=%S KB (%S bytes)
+imageSizeUnknown=Unknown (not cached)
+imageWidth=%Spx
+imageHeight=%Spx