Title: [171312] trunk/Source/WebInspectorUI
Revision
171312
Author
jonowe...@apple.com
Date
2014-07-21 12:16:28 -0700 (Mon, 21 Jul 2014)

Log Message

Back/Forward arrows (modern) are too large.
https://bugs.webkit.org/show_bug.cgi?id=135073

Reviewed by Joseph Pecoraro.

Changes to adjust new forward and back arrow sizes to be more consistent with the
universal design language. Moved WebInspector.Platform definition to its own file.
Refactored handling of image versions inside ImageUtilities.js.

* UserInterface/Base/ImageUtilities.js:
(.restoreImage):
(.generateImage):
(generateColoredImagesForCSS):
Make the default image versioning smarter.

* UserInterface/Base/Main.js:
(WebInspector.contentLoaded):
(WebInspector.contentLoaded.WebInspector.Platform.version.toString): Deleted.
(WebInspector.contentLoaded.WebInspector.Platform.toString): Deleted.
* UserInterface/Base/Platform.js: Added.
Move platform information definition into Platform.js.

* UserInterface/Main.html: Include Platform.js.

* UserInterface/Views/ContentBrowser.js:
(WebInspector.ContentBrowser):
* UserInterface/Views/FindBanner.css:
(.find-banner > button > .glyph):
(body.mac-platform.legacy .find-banner > button > .glyph):
(.find-banner > button.segmented.left > .glyph):
(body.mac-platform.legacy .find-banner > button.segmented.left > .glyph):
(.find-banner > button.segmented.right > .glyph):
(body.mac-platform.legacy .find-banner > button.segmented.right > .glyph):
(.find-banner > button.segmented):
(body.mac-platform.legacy .find-banner > button.segmented):
* UserInterface/Views/FindBanner.js:
(WebInspector.FindBanner.prototype._generateButtonsGlyphsIfNeeded):
Size of forward and back arrows adjusted.

Modified Paths

Added Paths

Diff

Modified: trunk/Source/WebInspectorUI/ChangeLog (171311 => 171312)


--- trunk/Source/WebInspectorUI/ChangeLog	2014-07-21 19:15:34 UTC (rev 171311)
+++ trunk/Source/WebInspectorUI/ChangeLog	2014-07-21 19:16:28 UTC (rev 171312)
@@ -1,3 +1,44 @@
+2014-07-21  Jonathan Wells  <jonowe...@apple.com>
+
+        Back/Forward arrows (modern) are too large.
+        https://bugs.webkit.org/show_bug.cgi?id=135073
+
+        Reviewed by Joseph Pecoraro.
+
+        Changes to adjust new forward and back arrow sizes to be more consistent with the 
+        universal design language. Moved WebInspector.Platform definition to its own file.
+        Refactored handling of image versions inside ImageUtilities.js.
+
+        * UserInterface/Base/ImageUtilities.js:
+        (.restoreImage):
+        (.generateImage):
+        (generateColoredImagesForCSS):
+        Make the default image versioning smarter.
+
+        * UserInterface/Base/Main.js:
+        (WebInspector.contentLoaded):
+        (WebInspector.contentLoaded.WebInspector.Platform.version.toString): Deleted.
+        (WebInspector.contentLoaded.WebInspector.Platform.toString): Deleted.
+        * UserInterface/Base/Platform.js: Added.
+        Move platform information definition into Platform.js.
+
+        * UserInterface/Main.html: Include Platform.js.
+
+        * UserInterface/Views/ContentBrowser.js:
+        (WebInspector.ContentBrowser):
+        * UserInterface/Views/FindBanner.css:
+        (.find-banner > button > .glyph):
+        (body.mac-platform.legacy .find-banner > button > .glyph):
+        (.find-banner > button.segmented.left > .glyph):
+        (body.mac-platform.legacy .find-banner > button.segmented.left > .glyph):
+        (.find-banner > button.segmented.right > .glyph):
+        (body.mac-platform.legacy .find-banner > button.segmented.right > .glyph):
+        (.find-banner > button.segmented):
+        (body.mac-platform.legacy .find-banner > button.segmented):
+        * UserInterface/Views/FindBanner.js:
+        (WebInspector.FindBanner.prototype._generateButtonsGlyphsIfNeeded):
+        Size of forward and back arrows adjusted.
+
 2014-07-19  Saam Barati  <sbar...@apple.com>
 
         Web Inspector: TextContentView calls wrong prototype function in the hidden() function

Modified: trunk/Source/WebInspectorUI/UserInterface/Base/ImageUtilities.js (171311 => 171312)


--- trunk/Source/WebInspectorUI/UserInterface/Base/ImageUtilities.js	2014-07-21 19:15:34 UTC (rev 171311)
+++ trunk/Source/WebInspectorUI/UserInterface/Base/ImageUtilities.js	2014-07-21 19:16:28 UTC (rev 171312)
@@ -26,6 +26,11 @@
 // Bump this version when making changes that affect the storage format.
 const _imageStorageFormatVersion = 1;
 
+// Use as a default where an image version is not otherwise specified.
+// Bump the base version when making changes that affect the result image.
+const baseDefaultImageVersion = 3;
+const defaultImageVersion = baseDefaultImageVersion + 0.01 * WebInspector.Platform.version.base + 0.0001 * WebInspector.Platform.version.release;
+
 try {
     var _generatedImageCacheDatabase = openDatabase("com.apple.WebInspector", 1, "Web Inspector Storage Database", 5 * 1024 * 1024);
 } catch (e) {
@@ -337,7 +342,7 @@
     {
         const storageKey = storageKeyPrefix + canvasIdentifierPrefix + canvasIdentifier;
         const context = document.getCSSCanvasContext("2d", canvasIdentifierPrefix + canvasIdentifier, scaledWidth, scaledHeight);
-        restoreImageFromStorage(storageKey, context, scaledWidth, scaledHeight, specification.imageVersion || 0, function() {
+        restoreImageFromStorage(storageKey, context, scaledWidth, scaledHeight, specification.imageVersion || defaultImageVersion, function() {
             ensureImageIsLoaded(generateImage.bind(null, canvasIdentifier, specification));
         });
     }
@@ -374,7 +379,7 @@
         context.drawImage(coloredImage, 0, 0, width, height);
 
         const storageKey = storageKeyPrefix + canvasIdentifierPrefix + canvasIdentifier;
-        saveImageToStorage(storageKey, context, scaledWidth, scaledHeight, specification.imageVersion || 0);
+        saveImageToStorage(storageKey, context, scaledWidth, scaledHeight, specification.imageVersion || defaultImageVersion);
         context.restore();
     }
 }
@@ -393,9 +398,7 @@
     var scaledWidth = width * scaleFactor;
     var scaledHeight = height * scaleFactor;
 
-    // Bump the base version when making changes that affect the result image.
-    const baseImageVersion = 3;
-    const imageVersion = baseImageVersion + 0.01 * WebInspector.Platform.version.base + 0.0001 * WebInspector.Platform.version.release;
+    const imageVersion = defaultImageVersion;
 
     const storageKeyPrefix = "generated-embossed-image-";
 

Modified: trunk/Source/WebInspectorUI/UserInterface/Base/Main.js (171311 => 171312)


--- trunk/Source/WebInspectorUI/UserInterface/Base/Main.js	2014-07-21 19:15:34 UTC (rev 171311)
+++ trunk/Source/WebInspectorUI/UserInterface/Base/Main.js	2014-07-21 19:16:28 UTC (rev 171312)
@@ -187,55 +187,14 @@
     window.addEventListener("mousemove", this._mouseMoved.bind(this), true);
     window.addEventListener("pagehide", this._pageHidden.bind(this));
 
-    // Check for a nightly build by looking for a plus in the version number and a small number of stylesheets (indicating combined resources).
-    var versionMatch = / AppleWebKit\/([^ ]+)/.exec(navigator.userAgent);
-    if (versionMatch && versionMatch[1].indexOf("+") !== -1 && document.styleSheets.length < 10)
-        document.body.classList.add("nightly-build");
-
     // Add platform style classes so the UI can be tweaked per-platform.
-    WebInspector.Platform = {
-        name: InspectorFrontendHost.platform(),
-        codeName: "",
-        version: {
-            base: 0,
-            release: 0,
-            toString: function()
-            {
-                return this.base + "." + this.version;
-            }
-        },
-        toString: function()
-        {
-            return this.name;
-        }
-    };
-
-    var isLegacyMacOS = false;
-    var osVersionMatch = / Mac OS X (\d+)_(\d+)/.exec(navigator.appVersion);
-    if (osVersionMatch && osVersionMatch[1] === "10") {
-        WebInspector.Platform.version.base = 10;
-        switch(osVersionMatch[2]) {
-            case "10":
-                WebInspector.Platform.codeName = "yosemite";
-                WebInspector.Platform.version.release = 10;
-                break;
-            case "9":
-                WebInspector.Platform.codeName = "mavericks";
-                WebInspector.Platform.version.release = 9;
-                isLegacyMacOS = true;
-                break;
-            case "8":
-                WebInspector.Platform.codeName = "mountain-lion";
-                WebInspector.Platform.version.release = 8;
-                isLegacyMacOS = true;
-        }
-    }
-
-    document.body.classList.add(WebInspector.Platform + "-platform");
-    if (WebInspector.Platform.codeName)
-        document.body.classList.add(WebInspector.Platform.codeName);
-    if (isLegacyMacOS)
+    document.body.classList.add(WebInspector.Platform.name + "-platform");
+    if (WebInspector.Platform.isNightlyBuild)
+        document.body.classList.add("nightly-build");
+    if (WebInspector.Platform.isLegacyMacOS)
         document.body.classList.add("legacy");
+    if (WebInspector.Platform.version.name)
+        document.body.classList.add(WebInspector.Platform.version.name);
 
     this.debuggableType = InspectorFrontendHost.debuggableType() === "web" ? WebInspector.DebuggableType.Web : WebInspector.DebuggableType._javascript_;
     document.body.classList.add(this.debuggableType);

Added: trunk/Source/WebInspectorUI/UserInterface/Base/Platform.js (0 => 171312)


--- trunk/Source/WebInspectorUI/UserInterface/Base/Platform.js	                        (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Base/Platform.js	2014-07-21 19:16:28 UTC (rev 171312)
@@ -0,0 +1,64 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.Platform = {
+    name: InspectorFrontendHost.platform(),
+    isLegacyMacOS: false,
+    isNightlyBuild: false,
+    version: {
+        base: 0,
+        release: 0,
+        name: ""
+    }
+};
+
+(function () {
+    // Check for a nightly build by looking for a plus in the version number and a small number of stylesheets (indicating combined resources).
+    var versionMatch = / AppleWebKit\/([^ ]+)/.exec(navigator.userAgent);
+    if (versionMatch && versionMatch[1].indexOf("+") !== -1 && document.styleSheets.length < 10)
+        WebInspector.Platform.isNightlyBuild = true;
+
+    var isLegacyMacOS = false;
+    var osVersionMatch = / Mac OS X (\d+)_(\d+)/.exec(navigator.appVersion);
+    if (osVersionMatch && osVersionMatch[1] === "10") {
+        WebInspector.Platform.version.base = 10;
+        switch(osVersionMatch[2]) {
+            case "10":
+                WebInspector.Platform.version.name = "yosemite";
+                WebInspector.Platform.version.release = 10;
+                break;
+            case "9":
+                WebInspector.Platform.version.name = "mavericks";
+                WebInspector.Platform.version.release = 9;
+                WebInspector.Platform.isLegacyMacOS = true;
+                break;
+            case "8":
+                WebInspector.Platform.version.name = "mountain-lion";
+                WebInspector.Platform.version.release = 8;
+                WebInspector.Platform.isLegacyMacOS = true;
+                break;
+        }
+    }
+})();

Modified: trunk/Source/WebInspectorUI/UserInterface/Main.html (171311 => 171312)


--- trunk/Source/WebInspectorUI/UserInterface/Main.html	2014-07-21 19:15:34 UTC (rev 171311)
+++ trunk/Source/WebInspectorUI/UserInterface/Main.html	2014-07-21 19:16:28 UTC (rev 171312)
@@ -161,6 +161,7 @@
     <script src=""
 
     <script src=""
+    <script src=""
     <script src=""
 
     <script src=""

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ContentBrowser.js (171311 => 171312)


--- trunk/Source/WebInspectorUI/UserInterface/Views/ContentBrowser.js	2014-07-21 19:15:34 UTC (rev 171311)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ContentBrowser.js	2014-07-21 19:16:28 UTC (rev 171312)
@@ -53,11 +53,10 @@
         if (WebInspector.Platform.name === "mac" && WebInspector.Platform.version.release < 10) {
             forwardArrow = {src: "Images/ForwardArrowLegacy.svg", width: 9, height: 9};
             backArrow = {src: "Images/BackArrowLegacy.svg", width: 9, height: 9};
+        } else {
+            forwardArrow = {src: "Images/ForwardArrow.svg", width: 8, height: 13};
+            backArrow = {src: "Images/BackArrow.svg", width: 8, height: 13};
         }
-        else {
-            forwardArrow = {src: "Images/ForwardArrow.svg", width: 10, height: 16};
-            backArrow = {src: "Images/BackArrow.svg", width: 10, height: 16};
-        }
 
         this._backButtonNavigationItem = new WebInspector.ButtonNavigationItem("back", WebInspector.UIString("Back (%s)").format(this._backKeyboardShortcut.displayName), backArrow.src, backArrow.width, backArrow.height);
         this._backButtonNavigationItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._backButtonClicked, this);

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/FindBanner.css (171311 => 171312)


--- trunk/Source/WebInspectorUI/UserInterface/Views/FindBanner.css	2014-07-21 19:15:34 UTC (rev 171311)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/FindBanner.css	2014-07-21 19:16:28 UTC (rev 171312)
@@ -120,6 +120,10 @@
     display: inline-block;
 
     width: 7px;
+    height: 11px;
+}
+
+body.mac-platform.legacy .find-banner > button > .glyph {
     height: 7px;
 }
 
@@ -150,10 +154,14 @@
 
 .find-banner > button.segmented.left > .glyph {
     background-image: -webkit-canvas(find-banner-previous-arrow-normal);
-    background-size: 7px 7px;
+    background-size: 7px 11px;
     background-repeat: no-repeat;
 }
 
+body.mac-platform.legacy .find-banner > button.segmented.left > .glyph {
+    background-size: 7px 7px;
+}
+
 .find-banner > button.segmented.left:active:not(:disabled) > .glyph {
     background-image: -webkit-canvas(find-banner-previous-arrow-normal-active);
 }
@@ -170,18 +178,29 @@
 
 .find-banner > button.segmented.right > .glyph {
     background-image: -webkit-canvas(find-banner-next-arrow-normal);
-    background-size: 7px 7px;
+    background-size: 7px 11px;
     background-repeat: no-repeat;
 }
 
+body.mac-platform.legacy .find-banner > button.segmented.right > .glyph {
+    background-size: 7px 7px;
+}
+
 .find-banner > button.segmented.right:active:not(:disabled) > .glyph {
     background-image: -webkit-canvas(find-banner-next-arrow-normal-active);
 }
 
 .find-banner > button.segmented {
     min-width: 22px;
+    padding-top: 3px;
+    padding-bottom: 2px;
 }
 
+body.mac-platform.legacy .find-banner > button.segmented {
+    padding-top: 2px;
+    padding-bottom: 3px;
+}
+
 .find-banner > button.segmented:active {
     z-index: 100;
     position: relative;

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/FindBanner.js (171311 => 171312)


--- trunk/Source/WebInspectorUI/UserInterface/Views/FindBanner.js	2014-07-21 19:15:34 UTC (rev 171311)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/FindBanner.js	2014-07-21 19:16:28 UTC (rev 171312)
@@ -328,15 +328,15 @@
 
         var forwardArrow, backArrow;
         if (WebInspector.Platform.name === "mac" && WebInspector.Platform.version.release < 10) {
-            forwardArrow = "Images/ForwardArrowLegacy.svg";
-            backArrow = "Images/BackArrowLegacy.svg";
+            forwardArrow = {src: "Images/ForwardArrowLegacy.svg", width: 7, height: 7};
+            backArrow = {src: "Images/BackArrowLegacy.svg", width: 7, height: 7};
         } else {
-            forwardArrow = "Images/ForwardArrow.svg";
-            backArrow = "Images/BackArrow.svg";
+            forwardArrow = {src: "Images/ForwardArrow.svg", width: 7, height: 11};
+            backArrow = {src: "Images/BackArrow.svg", width: 7, height: 11};
         }
 
-        generateColoredImagesForCSS(backArrow, specifications, 7, 7, "find-banner-previous-arrow-");
-        generateColoredImagesForCSS(forwardArrow, specifications, 7, 7, "find-banner-next-arrow-");
+        generateColoredImagesForCSS(backArrow.src, specifications, backArrow.width, backArrow.height, "find-banner-previous-arrow-");
+        generateColoredImagesForCSS(forwardArrow.src, specifications, forwardArrow.width, forwardArrow.height, "find-banner-next-arrow-");
     }
 };
 
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to