Index: ChangeLog
===================================================================
--- ChangeLog	(revision 26841)
+++ ChangeLog	(working copy)
@@ -1,3 +1,16 @@
+2007-10-20  Timothy Hatcher  <timothy@apple.com>
+
+        Reviewed by NOBODY (OOPS!).
+
+        Add basic @font-face to the Web Inspector.
+
+        * page/InspectorController.cpp:
+        (WebCore::InspectorResource::type): Check for CachedResource::FontResource.
+        * page/inspector/Resource.js: Add support for Font types and font preview in the icon.
+        * page/inspector/ResourcePanel.js: Show a font preview for font resources.
+        * page/inspector/inspector.css: Style for the font preview and font icon.
+        * page/inspector/inspector.js: Add font mime types.
+
 2007-10-20  Sam Weinig  <sam@webkit.org>
 
         Reviewed by Mark Rowe.
Index: page/InspectorController.cpp
===================================================================
--- page/InspectorController.cpp	(revision 26841)
+++ page/InspectorController.cpp	(working copy)
@@ -86,6 +86,7 @@ struct InspectorResource : public Shared
         Doc,
         Stylesheet,
         Image,
+        Font,
         Script,
         Other
     };
@@ -136,6 +137,8 @@ struct InspectorResource : public Shared
         switch (cachedResource->type()) {
             case CachedResource::ImageResource:
                 return Image;
+            case CachedResource::FontResource:
+                return Font;
             case CachedResource::CSSStyleSheet:
 #if ENABLE(XSLT)
             case CachedResource::XSLStyleSheet:
Index: page/inspector/Resource.js
===================================================================
--- page/inspector/Resource.js	(revision 26841)
+++ page/inspector/Resource.js	(working copy)
@@ -51,26 +51,29 @@ WebInspector.Resource.Type = {
     Document:   0,
     Stylesheet: 1,
     Image:      2,
-    Script:     3,
-    Other:      4,
+    Font:       3,
+    Script:     4,
+    Other:      5,
 
     isTextType: function(type)
     {
-        return (type == 0) || (type == 1) || (type == 3);
+        return (type == this.Document) || (type == this.Stylesheet) || (type == this.Script);
     },
 
     toString: function(type)
     {
         switch (type) {
-            case 0:
+            case this.Document:
                 return "document";
-            case 1:
+            case this.Stylesheet:
                 return "stylesheet";
-            case 2:
+            case this.Image:
                 return "image";
-            case 3:
+            case this.Font:
+                return "font";
+            case this.Script:
                 return "script";
-            case 4:
+            case this.Other:
             default:
                 return "other";
         }
@@ -318,6 +321,9 @@ WebInspector.Resource.prototype = {
             case WebInspector.Resource.Type.Image:
                 this.category = WebInspector.resourceCategories.images;
                 break;
+            case WebInspector.Resource.Type.Font:
+                this.category = WebInspector.resourceCategories.fonts;
+                break;
             case WebInspector.Resource.Type.Other:
             default:
                 this.category = WebInspector.resourceCategories.other;
@@ -527,13 +533,24 @@ WebInspector.Resource.prototype = {
         case WebInspector.resourceCategories.images:
         case WebInspector.resourceCategories.other:
             iconClass = "icon plain";
+            break;
+        case WebInspector.resourceCategories.fonts:
+            iconClass = "icon font";
         }
 
         if (!this.finished)
             fullTitle += "<div class=\"" + iconClass + "\"><canvas id=\"loadingIcon" + this.identifier + "\" class=\"progress\" width=\"16\" height=\"16\"></canvas></div>";
         else if (this.category === WebInspector.resourceCategories.images)
             fullTitle += "<div class=\"" + iconClass + "\"><img class=\"preview\" src=\"" + this.url + "\"></div>";
-        else
+        else if (this.category === WebInspector.resourceCategories.fonts) {
+            var uniqueFontName = "WebInspectorFontPreview" + this.identifier;
+
+            this.fontStyleElement = document.createElement("style");
+            this.fontStyleElement.textContent = "@font-face { font-family: \"" + uniqueFontName + "\"; src: url(" + this.url + "); }";
+            document.getElementsByTagName("head").item(0).appendChild(this.fontStyleElement);
+
+            fullTitle += "<div class=\"" + iconClass + "\"><div class=\"preview\" style=\"font-family: " + uniqueFontName + "\">Ag</div></div>";
+        } else
             fullTitle += "<div class=\"" + iconClass + "\"></div>";
 
         this.listItem.title = fullTitle;
@@ -568,6 +585,8 @@ WebInspector.Resource.prototype = {
     {
         if (this._panel)
             this.panel.detach();
+        if (this.fontStyleElement && this.fontStyleElement.parentNode)
+            this.fontStyleElement.parentNode.removeChild(this.fontStyleElement);
     },
 
     get errors()
Index: page/inspector/ResourcePanel.js
===================================================================
--- page/inspector/ResourcePanel.js	(revision 26841)
+++ page/inspector/ResourcePanel.js	(working copy)
@@ -37,13 +37,13 @@ WebInspector.ResourcePanel = function(re
 WebInspector.ResourcePanel.prototype = {
     show: function()
     {
+        WebInspector.Panel.prototype.show.call(this);
+
         this.resource.listItem.select(true);
         this.resource.listItem.reveal();
 
         if (this.currentView && "onshow" in this.currentView)
             this.currentView.onshow();
-
-        WebInspector.Panel.prototype.show.call(this);
     },
 
     hide: function()
@@ -312,9 +312,38 @@ WebInspector.ResourcePanel.prototype = {
 
             infoListElement.innerHTML = listHTML;
             container.appendChild(infoListElement);
-        } else if (this.resource.category === WebInspector.resourceCategories.stylesheets
-                   || this.resource.category === WebInspector.resourceCategories.scripts) {
-                this.views.source.contentElement.addStyleClass(this.resource.category.title.toLowerCase());
+        } else if (this.resource.category === WebInspector.resourceCategories.fonts) {
+            var panel = this;
+            var resizeListener = function() {
+                panel.updateFontPreviewSize();
+            };
+
+            this.views.source.onshow = function() {
+                this.panel.updateFontPreviewSize();
+                window.addEventListener("resize", resizeListener, false);
+            };
+
+            this.views.source.onhide = function() {
+                window.removeEventListener("resize", resizeListener, false);
+            };
+
+            window.addEventListener("resize", resizeListener, false);
+
+            this.views.source.contentElement.removeStyleClass("source");
+            this.views.source.contentElement.addStyleClass("font");
+
+            var uniqueFontName = "WebInspectorFontPreview" + this.resource.identifier;
+
+            this.fontPreviewElement = document.createElement("div");
+            this.fontPreviewElement.className = "preview";
+            this.views.source.contentElement.appendChild(this.fontPreviewElement);
+
+            this.fontPreviewElement.style.setProperty("font-family", uniqueFontName, null);
+            this.fontPreviewElement.innerHTML = "ABCDEFGHIJKLM<br>NOPQRSTUVWXYZ<br>abcdefghijklm<br>nopqrstuvwxyz<br>1234567890";
+
+            this.updateFontPreviewSize();
+        } else if (this.resource.category === WebInspector.resourceCategories.stylesheets || this.resource.category === WebInspector.resourceCategories.scripts) {
+            this.views.source.contentElement.addStyleClass(this.resource.category.title.toLowerCase());
             this._createSourceFrame();
         } else {
             if (this.resource.category)
@@ -322,6 +351,49 @@ WebInspector.ResourcePanel.prototype = {
         }
     },
 
+    updateFontPreviewSize: function ()
+    {
+        if (!this.fontPreviewElement)
+            return;
+
+        this.fontPreviewElement.removeStyleClass("preview");
+
+        var measureFontSize = 50;
+        this.fontPreviewElement.style.setProperty("position", "absolute", null);
+        this.fontPreviewElement.style.setProperty("font-size", measureFontSize + "px", null);
+        this.fontPreviewElement.style.removeProperty("height");
+
+        var height = this.fontPreviewElement.offsetHeight;
+        var width = this.fontPreviewElement.offsetWidth;
+
+        var containerHeight = this.views.source.contentElement.offsetHeight;
+        var containerWidth = this.views.source.contentElement.offsetWidth;
+
+        if (!height || !width || !containerHeight || !containerWidth) {
+            this.fontPreviewElement.style.removeProperty("font-size");
+            this.fontPreviewElement.style.removeProperty("position");
+            this.fontPreviewElement.addStyleClass("preview");
+            return;
+        }
+
+        var lineCount = this.fontPreviewElement.getElementsByTagName("br").length + 1;
+        var realLineHeight = Math.floor(height / lineCount);
+        var fontSizeLineRadio = measureFontSize / realLineHeight;
+        var widthRatio = containerWidth / width;
+        var heightRatio = containerHeight / height;
+
+        if (heightRatio < widthRatio)
+            var finalFontSize = Math.floor(realLineHeight * heightRatio * fontSizeLineRadio) - 1;
+        else
+            var finalFontSize = Math.floor(realLineHeight * widthRatio * fontSizeLineRadio) - 1;
+
+        this.fontPreviewElement.style.setProperty("font-size", finalFontSize + "px", null);
+        this.fontPreviewElement.style.setProperty("height", this.fontPreviewElement.offsetHeight + "px", null);
+        this.fontPreviewElement.style.removeProperty("position");
+
+        this.fontPreviewElement.addStyleClass("preview");
+    },
+
     get currentView()
     {
         return this._currentView;
Index: page/inspector/inspector.css
===================================================================
--- page/inspector/inspector.css	(revision 26841)
+++ page/inspector/inspector.css	(working copy)
@@ -532,6 +532,20 @@ body.attached #attachToggle:active {
     background-image: url(Images/plainDocument.png);
 }
 
+#list .icon.font {
+    background-image: url(Images/plainDocument.png);
+}
+
+#list .icon.font .preview {
+    overflow: hidden;
+    text-align: center;
+    font-size: 14px;
+    line-height: 14px;
+    font-weight: normal;
+    color: black;
+    text-shadow: none;
+}
+
 #list .icon .preview {
     margin: auto;
     display: block;
@@ -675,6 +689,26 @@ body.inactive #sidebar li.selected {
     background-color: transparent !important;
 }
 
+.content.font {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    font-size: 60px;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    text-align: center;
+}
+
+.content.font .preview {
+    position: absolute;
+    margin-top: auto;
+    margin-bottom: auto;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
 .content.image {
     position: relative;
     width: 100%;
Index: page/inspector/inspector.js
===================================================================
--- page/inspector/inspector.js	(revision 26841)
+++ page/inspector/inspector.js	(working copy)
@@ -204,6 +204,7 @@ WebInspector.loaded = function(event)
         stylesheets: new WebInspector.ResourceCategory("stylesheets"),
         images: new WebInspector.ResourceCategory("images"),
         scripts: new WebInspector.ResourceCategory("scripts"),
+        fonts: new WebInspector.ResourceCategory("fonts"),
         databases: new WebInspector.ResourceCategory("databases"),
         other: new WebInspector.ResourceCategory("other")
     };
@@ -1089,26 +1090,31 @@ WebInspector.Warnings = {
 // means that text/html is a valid MIME type for resources that have type
 // WebInspector.Resource.Type.Document (which has a value of 0).
 WebInspector.MIMETypes = {
-    "text/html":                {0: 1},
-    "text/xml":                 {0: 1},
-    "text/plain":               {0: 1},
-    "application/xhtml+xml":    {0: 1},
-    "text/css":                 {1: 1},
-    "text/xsl":                 {1: 1},
-    "image/jpeg":               {2: 1},
-    "image/png":                {2: 1},
-    "image/gif":                {2: 1},
-    "image/bmp":                {2: 1},
-    "image/x-icon":             {2: 1},
-    "image/x-xbitmap":          {2: 1},
-    "text/javascript":          {3: 1},
-    "text/ecmascript":          {3: 1},
-    "application/javascript":   {3: 1},
-    "application/ecmascript":   {3: 1},
-    "application/x-javascript": {3: 1},
-    "text/javascript1.1":       {3: 1},
-    "text/javascript1.2":       {3: 1},
-    "text/javascript1.3":       {3: 1},
-    "text/jscript":             {3: 1},
-    "text/livescript":          {3: 1},
+    "text/html":                   {0: true},
+    "text/xml":                    {0: true},
+    "text/plain":                  {0: true},
+    "application/xhtml+xml":       {0: true},
+    "text/css":                    {1: true},
+    "text/xsl":                    {1: true},
+    "image/jpeg":                  {2: true},
+    "image/png":                   {2: true},
+    "image/gif":                   {2: true},
+    "image/bmp":                   {2: true},
+    "image/x-icon":                {2: true},
+    "image/x-xbitmap":             {2: true},
+    "font/ttf":                    {3: true},
+    "font/opentype":               {3: true},
+    "application/x-font-type1":    {3: true},
+    "application/x-font-ttf":      {3: true},
+    "application/x-truetype-font": {3: true},
+    "text/javascript":             {4: true},
+    "text/ecmascript":             {4: true},
+    "application/javascript":      {4: true},
+    "application/ecmascript":      {4: true},
+    "application/x-javascript":    {4: true},
+    "text/javascript1.1":          {4: true},
+    "text/javascript1.2":          {4: true},
+    "text/javascript1.3":          {4: true},
+    "text/jscript":                {4: true},
+    "text/livescript":             {4: true},
 }