This patch provides a new XBL binding that extends a textbox with an
integrated "annotation". The annotation is arbitrary text that
appears in the textbox, to the right of the input, and it is pushed
further to the right as the input grows. This will be applied to a
minibuffer-input feature in a following patch.
When a textbox is bound to annotated-textbox it gains two properties.
The annotate property is a boolean that determines whether the
annotation is shown. When false (the default) the annotated-textbox
behaves just like a regular textbox. The annotation property is a
string that determines the displayed text.
Users should style the elements appropriately, including a width for
the textbox-input-box, a visually distinct style for the annotation
and right padding for the strut; the latter provides visual separation
and allows room for the cursor.
Implementing the annotated-textbox binding to extend the textbox
binding is simpler than encapsulating it; all the properties from the
textbox apply to the new binding with no effort. Many more inherits
properties would otherwise need to be set and maintained as the
xulrunner platform evolves.
However there is the disadvantage that the content element needs to be
copied from the textbox binding; there is no way in XBL to include the
content when extending a binding. The textbox content (an hbox and an
input element) has changed only slightly between xulrunner 1.9.1 and
11.0. There are new properties to be inherited and the setting of
flex on the input element has gone. The content in annotated-textbox
specifies all the properties to inherit from 11.0 and includes the
flex on the input element; the latter does no harm in recent xulrunner
and is required to handle growing correctly in 1.9.1.
Internally, the annotated-textbox makes a deck of the input textbox
with a "strut" label, then continually updates the label with the
input text, so that the strut width controls the input width. The
strut is placed in a box with hidden overflow; this prevents wide text
from expanding the textbox. The annotation is given a much larger
flex value than the input, so that as the textbox fills, the
annotation will be truncated before the input. The strut has right
padding which acts as a spacer between the input and annotation and
also allows room for the cursor.
It is assumed that the annotation will only be enabled with an initial
blank input value. This is true of the minibuffer-input use case.
However, in the more general case where it is enabled later during an
input, the strut will be wrong until the next keystroke. It does not
work to set the strut to the input value when enabled, because in the
usual case the input field may not yet have had a prior value cleared.
The implementation looks more complicated than might be wished, but
largely this is merely due to the verbosity of the XML representation
and the awkwardness of XBL.
Development note: To check that the strut label matches the input,
change the deck to a stack and use the following css:
textbox [anonid="strut"] {
color: red;
font-style: oblique;
}
Thanks to John Foerch for many suggestions. The idea for using a deck
and strut is from http://www.blackfishsoftware.com/node/47.
---
content/annotated-textbox.xml | 71 +++++++++++++++++++++++++++++++++++++++++
1 files changed, 71 insertions(+), 0 deletions(-)
create mode 100644 content/annotated-textbox.xml
diff --git a/content/annotated-textbox.xml b/content/annotated-textbox.xml
new file mode 100644
index 0000000..e579865
--- /dev/null
+++ b/content/annotated-textbox.xml
@@ -0,0 +1,71 @@
+<?xml version="1.0"?>
+<!--
+(C) Copyright 2012 David Kettler
+
+Use, modification, and distribution are subject to the terms specified in the
+COPYING file.
+-->
+<bindings
+ xmlns="http://www.mozilla.org/xbl";
+ xmlns:html="http://www.w3.org/1999/xhtml";
+ xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
+ xmlns:xbl="http://www.mozilla.org/xbl";>
+
+ <binding id="annotated-textbox"
+ extends="chrome://global/content/bindings/textbox.xml#textbox">
+
+ <content>
+ <children/>
+ <xul:deck flex="1">
+ <xul:hbox class="textbox-input-box" flex="1"
xbl:inherits="context,spellcheck">
+ <html:input class="textbox-input" flex="1" anonid="input"
+
xbl:inherits="onfocus,onblur,value,type,maxlength,disabled,size,readonly,placeholder,tabindex,accesskey,noinitialfocus,mozactionhint,spellcheck"/>
+ </xul:hbox>
+ <xul:hbox style="overflow: hidden">
+ <xul:label class="plain" anonid="strut"/>
+ </xul:hbox>
+ </xul:deck>
+ <xul:label class="plain" anonid="annotation"
+ xbl:inherits="value=annotation"
+ flex="1000" crop="right" collapsed="true"/>
+ </content>
+
+ <implementation>
+
+ <field name="_annotate"> false </field>
+ <field name="_annot" readonly="true">
+ document.getAnonymousElementByAttribute(this, "anonid", "annotation");
+ </field>
+ <field name="_strut" readonly="true">
+ document.getAnonymousElementByAttribute(this, "anonid", "strut");
+ </field>
+
+ <property name="annotate">
+ <getter>
+ return this._annotate;
+ </getter>
+ <setter><![CDATA[
+ this._annotate = !!val;
+ this.annotation = "";
+ this._strut.setAttribute("value", "");
+ this._annot.setAttribute("collapsed",
+ this._annotate ? "false" : "true");
+ return this._annotate;
+ ]]></setter>
+ </property>
+
+ <property name="annotation"
+ onset="this.setAttribute('annotation', val); return val;"
+ onget="return this.getAttribute('annotation');"/>
+
+ </implementation>
+
+ <handlers>
+ <handler event="input">
+ if (this._annotate)
+ this._strut.setAttribute("value", this.value);
+ </handler>
+ </handlers>
+
+ </binding>
+</bindings>
--
1.7.9.1
_______________________________________________
Conkeror mailing list
[email protected]
https://www.mozdev.org/mailman/listinfo/conkeror
