launchpad-reviewers team mailing list archive
-
launchpad-reviewers team
-
Mailing list archive
-
Message #03587
[Merge] lp:~benji/launchpad/fix-generated-html into lp:launchpad
Benji York has proposed merging lp:~benji/launchpad/fix-generated-html into lp:launchpad.
Requested reviews:
Launchpad code reviewers (launchpad-reviewers)
For more details, see:
https://code.launchpad.net/~benji/launchpad/fix-generated-html/+merge/60697
The new structural subscription add/edit form is in an overlay and uses
the current project name in its title. Because the project name can be
long, it sometimes wraps. This branch adds the text-overflow style for
browsers that support it (almost all of the recent ones) and uses a
workaround for those that don't (Firefox, I'm looking at you ಠ_ಠ).
The lint report is clean.
A test was added to demonstrate that the ellipsisification works. The
test and its friends can be run by pointing a web browser at
/lib/lp/registry/javascript/tests/test_structural_subscription.html.
--
https://code.launchpad.net/~benji/launchpad/fix-generated-html/+merge/60697
Your team Launchpad code reviewers is requested to review the proposed merge of lp:~benji/launchpad/fix-generated-html into lp:launchpad.
=== modified file 'lib/lp/bugs/templates/bugtarget-bugs.pt'
--- lib/lp/bugs/templates/bugtarget-bugs.pt 2011-04-06 00:35:12 +0000
+++ lib/lp/bugs/templates/bugtarget-bugs.pt 2011-05-11 21:06:35 +0000
@@ -26,7 +26,17 @@
</script>
</tal:uses_launchpad_bugtracker>
<style type="text/css">
- p#more-hot-bugs {float:right; margin-top:7px;}
+ p#more-hot-bugs {
+ float:right;
+ margin-top:7px;
+ }
+ .force-ellipsis:before {
+ width: 21em;
+ content: '\2026';
+ position: absolute;
+ margin-left: 19.5em;
+ width: 1em;
+ }
</style>
</metal:block>
<body>
=== modified file 'lib/lp/registry/javascript/structural-subscription.js'
--- lib/lp/registry/javascript/structural-subscription.js 2011-05-05 20:11:00 +0000
+++ lib/lp/registry/javascript/structural-subscription.js 2011-05-11 21:06:35 +0000
@@ -324,6 +324,13 @@
add_input_validator(overlay, overlay_id, 'tags', get_error_for_tags_list);
}
+var ellipsis_supported =
+ typeof document.createElement('span').style.textOverflow === 'string';
+var is_gecko = navigator.product === 'Gecko';
+// If we're running on a Gecko-based browser (like Firefox) and it doesn't
+// have text-overflow then use the ellipsis hack.
+var using_ellipsis_hack = is_gecko && !ellipsis_supported;
+
/**
* Populate the overlay element with the contents of the add/edit form.
*/
@@ -336,11 +343,18 @@
if (Y.Lang.isValue(namespace._add_subscription_overlay)) {
namespace._add_subscription_overlay.destroy();
}
+ var header = Y.Node.create('<h2/>')
+ .set('id', 'subscription-overlay-title')
+ .set('text', 'Add a mail subscription '+
+ 'for '+LP.cache.context.title+' bugs')
+ .setStyle('display', 'block')
+ .setStyle('overflow', 'hidden')
+ .setStyle('textOverflow', 'ellipsis')
+ .setStyle('whiteSpace', 'nowrap')
+ .setStyle('width', '21em');
// Create the overlay.
namespace._add_subscription_overlay = new Y.lazr.FormOverlay({
- headerContent:
- '<h2 id="subscription-overlay-title">Add a mail subscription '+
- 'for '+LP.cache.context.title + ' bugs</h2>',
+ headerContent: header,
form_content: Y.one(overlay_id),
visible: false,
form_submit_button: submit_button,
@@ -364,6 +378,20 @@
if (side_portlets) {
Y.one('#subscription-overlay-title').scrollIntoView();
}
+ if (using_ellipsis_hack) {
+ // Look away.
+ var header_text = header.get('text');
+ var i;
+ for (i=header_text.length; i--; i > 0) {
+ if (header.get('scrollWidth') <= header.get('offsetWidth')) {
+ if (i !== header_text.length) {
+ header.addClass('force-ellipsis');
+ }
+ break;
+ }
+ header.set('text', header_text.substring(0, i));
+ }
+ }
setup_overlay_validators(namespace._add_subscription_overlay, overlay_id);
// Prevent cruft from hanging around upon closing.
// For some reason, clicking on the cancel button doesn't fire a cancel
=== modified file 'lib/lp/registry/javascript/tests/test_structural_subscription.js'
--- lib/lp/registry/javascript/tests/test_structural_subscription.js 2011-05-04 05:02:39 +0000
+++ lib/lp/registry/javascript/tests/test_structural_subscription.js 2011-05-11 21:06:35 +0000
@@ -391,6 +391,59 @@
});
suite.add(test_case);
+ suite.add(new Y.Test.Case({
+ name: 'Dialog title ellipsis',
+
+ _should: {error: {}},
+
+ setUp: function() {
+ // Monkeypatch LP to avoid network traffic and to allow
+ // insertion of test data.
+ window.LP = {
+ links: {},
+ cache: {}
+ };
+
+ this.project_title = 'A very long name for the current project';
+ LP.cache.context = {
+ title: this.project_title,
+ self_link: 'https://launchpad.dev/api/test_project'
+ };
+ LP.cache.administratedTeams = [];
+ LP.cache.importances = [];
+ LP.cache.statuses = [];
+ LP.links.me = 'https://launchpad.dev/api/~someone';
+
+ var lp_client = function() {};
+ this.configuration = {
+ content_box: content_box_id,
+ lp_client: lp_client
+ };
+
+ this.content_node = create_test_node();
+ Y.one('body').appendChild(this.content_node);
+ },
+
+ tearDown: function() {
+ remove_test_node();
+ delete this.content_node;
+ },
+
+ test_title_ellipsisification: function() {
+ // Long titles are cut down.
+ module.setup(this.configuration);
+ module._show_add_overlay(this.configuration);
+ overlay = Y.one('#accordion-overlay');
+ var header = Y.one(content_box_id).one('h2').get('text');
+ // This is the title we would expect if there were no shortening.
+ var full_title = (
+ 'Add a mail subscription for ' + this.project_title);
+ // The actual title is a prefix of the unabridged title.
+ Assert.areEqual(full_title.match('^'+header), header);
+ }
+
+ }));
+
test_case = new Y.Test.Case({
name: 'Structural Subscription interaction tests',
@@ -410,7 +463,7 @@
};
LP.cache.context = {
- title: 'Test Project',
+ title: 'Test',
self_link: 'https://launchpad.dev/api/test_project'
};
LP.cache.administratedTeams = [];
@@ -444,7 +497,7 @@
Assert.isNotNull(overlay);
var header = Y.one(content_box_id).one('h2');
Assert.areEqual(
- 'Add a mail subscription for Test Project bugs',
+ 'Add a mail subscription for Test bugs',
header.get('text'));
},
