Fixes a regression where the Image and Font preview views do not
authortimothy@apple.com <timothy@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 28 May 2008 02:45:01 +0000 (02:45 +0000)
committertimothy@apple.com <timothy@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 28 May 2008 02:45:01 +0000 (02:45 +0000)
size correctly.

<rdar://problem/5966723> REGRESSION (r33991): Image and font previews
are shrunken and can't be made larger (19281)

Reviewed by Adam Roben.

* page/inspector/FontView.js: Adjust the font size based only on the
container width minus padding.
* page/inspector/inspector.css: Updated styles for the image and
font views.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@34161 268f45cc-cd09-0410-ab3c-d52691b4dbfc

WebCore/ChangeLog
WebCore/page/inspector/FontView.js
WebCore/page/inspector/inspector.css

index 4c130e8..fd752bd 100644 (file)
@@ -1,3 +1,18 @@
+2008-05-27  Timothy Hatcher  <timothy@apple.com>
+
+        Fixes a regression where the Image and Font preview views do not
+        size correctly.
+
+        <rdar://problem/5966723> REGRESSION (r33991): Image and font previews
+        are shrunken and can't be made larger (19281)
+
+        Reviewed by Adam Roben.
+
+        * page/inspector/FontView.js: Adjust the font size based only on the
+        container width minus padding.
+        * page/inspector/inspector.css: Updated styles for the image and
+        font views.
+
 2008-05-27  Adam Roben  <aroben@apple.com>
 
         Fix Bug 19276: XHR resources are classified as "Other" until Inspector
 2008-05-27  Adam Roben  <aroben@apple.com>
 
         Fix Bug 19276: XHR resources are classified as "Other" until Inspector
index cafff31..f4c2a84 100644 (file)
@@ -71,10 +71,12 @@ WebInspector.FontView.prototype = {
         var height = this.fontPreviewElement.offsetHeight;
         var width = this.fontPreviewElement.offsetWidth;
 
         var height = this.fontPreviewElement.offsetHeight;
         var width = this.fontPreviewElement.offsetWidth;
 
-        var containerHeight = this.contentElement.offsetHeight;
         var containerWidth = this.contentElement.offsetWidth;
 
         var containerWidth = this.contentElement.offsetWidth;
 
-        if (!height || !width || !containerHeight || !containerWidth) {
+        // Subtract some padding. This should match the padding in the CSS plus room for the scrollbar.
+        containerWidth -= 40;
+
+        if (!height || !width || !containerWidth) {
             this.fontPreviewElement.style.removeProperty("font-size");
             this.fontPreviewElement.style.removeProperty("position");
             this.fontPreviewElement.addStyleClass("preview");
             this.fontPreviewElement.style.removeProperty("font-size");
             this.fontPreviewElement.style.removeProperty("position");
             this.fontPreviewElement.addStyleClass("preview");
@@ -85,12 +87,7 @@ WebInspector.FontView.prototype = {
         var realLineHeight = Math.floor(height / lineCount);
         var fontSizeLineRatio = measureFontSize / realLineHeight;
         var widthRatio = containerWidth / width;
         var realLineHeight = Math.floor(height / lineCount);
         var fontSizeLineRatio = measureFontSize / realLineHeight;
         var widthRatio = containerWidth / width;
-        var heightRatio = containerHeight / height;
-
-        if (heightRatio < widthRatio)
-            var finalFontSize = Math.floor(realLineHeight * heightRatio * fontSizeLineRatio) - 1;
-        else
-            var finalFontSize = Math.floor(realLineHeight * widthRatio * fontSizeLineRatio) - 1;
+        var finalFontSize = Math.floor(realLineHeight * widthRatio * fontSizeLineRatio) - 1;
 
         this.fontPreviewElement.style.setProperty("font-size", finalFontSize + "px", null);
         this.fontPreviewElement.style.setProperty("height", this.fontPreviewElement.offsetHeight + "px", null);
 
         this.fontPreviewElement.style.setProperty("font-size", finalFontSize + "px", null);
         this.fontPreviewElement.style.setProperty("height", this.fontPreviewElement.offsetHeight + "px", null);
index 507c2f3..2fcb9ce 100644 (file)
@@ -649,48 +649,32 @@ body.console-visible #console {
     height: 100%
 }
 
     height: 100%
 }
 
-.resource-view.font {
+.resource-view.font .resource-view-content {
     font-size: 60px;
     white-space: pre-wrap;
     word-wrap: break-word;
     text-align: center;
     font-size: 60px;
     white-space: pre-wrap;
     word-wrap: break-word;
     text-align: center;
-}
-
-.resource-view.font .preview {
-    position: absolute;
-    margin-top: auto;
-    margin-bottom: auto;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    padding: 15px;
 }
 
 .resource-view.image .resource-view-content > .image {
 }
 
 .resource-view.image .resource-view-content > .image {
-    position: relative;
-    height: 70%;
-    padding: 20px;
+    padding: 20px 20px 10px 20px;
+    text-align: center;
 }
 
 .resource-view.image .resource-view-content > .info {
 }
 
 .resource-view.image .resource-view-content > .info {
-    position: relative;
-    height: 30%;
-    padding-top: 10px;
-    overflow: auto;
+    padding-bottom: 10px;
     font-size: 11px;
     font-size: 11px;
+    -webkit-user-select: text;
 }
 
 .resource-view.image img {
 }
 
 .resource-view.image img {
-    margin: auto;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    max-width: 80%;
-    max-height: 80%;
+    max-width: 100%;
+    max-height: 1000px;
     background-image: url(Images/checker.png);
     -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
     background-image: url(Images/checker.png);
     -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
+    -webkit-user-select: text;
+    -webkit-user-drag: auto;
 }
 
 .resource-view.image .title {
 }
 
 .resource-view.image .title {
@@ -707,11 +691,12 @@ body.console-visible #console {
     display: inline-block;
     width: 50%;
     text-align: right;
     display: inline-block;
     width: 50%;
     text-align: right;
+    color: rgb(76, 76, 76);
 }
 
 .resource-view.image .infoList dd {
     display: inline-block;
 }
 
 .resource-view.image .infoList dd {
     display: inline-block;
-    padding-left: 10px;
+    padding-left: 8px;
     width: 50%;
     text-align: left;
     margin: 0;
     width: 50%;
     text-align: left;
     margin: 0;