Permalink
Browse files

hud is now passed into style info overlay constructor.

  • Loading branch information...
toolness committed Apr 6, 2012
1 parent 9cff0f2 commit 335532e039ef47543e4f8530bf9bf0120d7ccede
Showing with 19 additions and 8 deletions.
  1. +6 −6 src/style-info.js
  2. +2 −1 src/ui.js
  3. +11 −1 test/unit/style-info.js
View
@@ -120,7 +120,7 @@
}
function buildPropertyWidget(element, row, style, parentStyle, name,
- locale) {
+ locale, hud) {
var nameCell = $('<div class="webxray-name"></div>');
var valueCell = $('<div class="webxray-value"></div>');
@@ -189,8 +189,7 @@
if (locale.has(docKey)) {
var moreInfo = $('<span class="webxray-more-info"></span>')
.text(locale.get("style-info:more-info"));
- // TODO: the HUD should be passed in as an argument, really.
- $(".webxray-hud").html(locale.get(docKey))
+ $(hud.overlay).html(locale.get(docKey))
.append(moreInfo)
.find("a").css({textDecoration: "none"});
}
@@ -307,6 +306,7 @@
var locale = options.locale || jQuery.locale;
var propertyNames = options.propertyNames;
var mouseMonitor = options.mouseMonitor;
+ var hud = options.hud;
var body = options.body || document.body;
var isVisible = false;
var l10n = locale.scope("style-info");
@@ -326,7 +326,7 @@
overlay.empty();
if (primary) {
- var info = $(primary).getStyleInfo(propertyNames, locale);
+ var info = $(primary).getStyleInfo(propertyNames, locale, hud);
var instructions = $('<div class="webxray-instructions"></div>');
var close = $('<div class="webxray-close-button"></div>');
instructions.html(l10n("tap-space-html"));
@@ -427,7 +427,7 @@
});
jQuery.fn.extend({
- getStyleInfo: function getStyleInfo(propertyNames, locale) {
+ getStyleInfo: function getStyleInfo(propertyNames, locale, hud) {
var names = propertyNames || DEFAULT_PROPERTIES;
var element = this.get(0);
var window = element.ownerDocument.defaultView;
@@ -445,7 +445,7 @@
var row = $('<div class="webxray-row"></div>');
for (var j = 0; j < NUM_COLS; j++)
buildPropertyWidget(element, row, style, parentStyle, names[i+j],
- locale);
+ locale, hud);
info.append(row);
}
View
@@ -47,7 +47,8 @@
var styleInfo = jQuery.styleInfoOverlay({
focused: focused,
commandManager: commandManager,
- mouseMonitor: mouseMonitor
+ mouseMonitor: mouseMonitor,
+ hud: hud
});
var input = jQuery.xRayInput({
focusedOverlay: focused,
View
@@ -3,17 +3,27 @@ module("style-info");
test("jQuery.fn.getStyleInfo()", function() {
var $ = jQuery;
var info = $(document.documentElement).getStyleInfo();
+ var fakeHud = $("<div></div>");
+ jQuery.localization.extend("en", "css-property-docs", {
+ "background-color": "HI THERE"
+ });
+ var locale = jQuery.localization.createLocale(["en"]);
equal(info.find(".webxray-value-different-from-parent").length, 0,
"HTML element has no 'value different from parent' class");
var element = $('<p style="background-color: firebrick"></p>');
$(document.body).append(element);
- info = element.getStyleInfo();
+ info = element.getStyleInfo(null, locale, {overlay: fakeHud});
var diff = info.find(".webxray-value-different-from-parent")
.prev(":contains('background\u2011color')");
equal(diff.length, 1,
"values different from parent have expected class");
element.remove();
+
+ equal(fakeHud.html(), "", "HUD should have nothing by default");
+ diff.parent().trigger("mouseover");
+ ok(fakeHud.html().indexOf("HI THERE") != -1,
+ "HUD should have CSS docs on mouseover");
});
test("jQuery.cssHooks", function() {

0 comments on commit 335532e

Please sign in to comment.