diff options
Diffstat (limited to '')
| -rw-r--r-- | comm/mail/base/content/widgets/glodaFacet.js | 1823 |
1 files changed, 1823 insertions, 0 deletions
diff --git a/comm/mail/base/content/widgets/glodaFacet.js b/comm/mail/base/content/widgets/glodaFacet.js new file mode 100644 index 0000000000..c8d1e78dd8 --- /dev/null +++ b/comm/mail/base/content/widgets/glodaFacet.js @@ -0,0 +1,1823 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +/* global DateFacetVis, FacetContext */ + +// Wrap in a block to prevent leaking to window scope. +{ + const { MailServices } = ChromeUtils.import( + "resource:///modules/MailServices.jsm" + ); + const { TagUtils } = ChromeUtils.import("resource:///modules/TagUtils.jsm"); + const { FacetUtils } = ChromeUtils.import( + "resource:///modules/gloda/Facet.jsm" + ); + const { PluralForm } = ChromeUtils.importESModule( + "resource://gre/modules/PluralForm.sys.mjs" + ); + const { Gloda } = ChromeUtils.import("resource:///modules/gloda/Gloda.jsm"); + + var glodaFacetStrings = Services.strings.createBundle( + "chrome://messenger/locale/glodaFacetView.properties" + ); + + class MozFacetDate extends HTMLElement { + get build() { + return this.buildFunc; + } + + get brushItems() { + return items => this.vis.hoverItems(items); + } + + get clearBrushedItems() { + return () => this.vis.clearHover(); + } + + connectedCallback() { + const wrapper = document.createElement("div"); + wrapper.classList.add("facet", "date-wrapper"); + + const h2 = document.createElement("h2"); + + const canvas = document.createElement("div"); + canvas.classList.add("date-vis-frame"); + + const zoomOut = document.createElement("div"); + zoomOut.classList.add("facet-date-zoom-out"); + zoomOut.setAttribute("role", "image"); + zoomOut.addEventListener("click", () => FacetContext.zoomOut()); + + wrapper.appendChild(h2); + wrapper.appendChild(canvas); + wrapper.appendChild(zoomOut); + this.appendChild(wrapper); + + this.canUpdate = true; + this.canvasNode = canvas; + this.vis = null; + if ("faceter" in this) { + this.buildFunc(true); + } + } + + buildFunc(aDoSize) { + if (!this.vis) { + this.vis = new DateFacetVis(this, this.canvasNode); + this.vis.build(); + } else { + while (this.canvasNode.hasChildNodes()) { + this.canvasNode.lastChild.remove(); + } + if (aDoSize) { + this.vis.build(); + } else { + this.vis.rebuild(); + } + } + } + } + + customElements.define("facet-date", MozFacetDate); + + /** + * MozFacetResultsMessage shows the search results for the string entered in gloda-searchbox. + * + * @augments {HTMLElement} + */ + class MozFacetResultsMessage extends HTMLElement { + connectedCallback() { + const header = document.createElement("div"); + header.classList.add("results-message-header"); + + this.countNode = document.createElement("h2"); + this.countNode.classList.add("results-message-count"); + + this.toggleTimeline = document.createElement("button"); + this.toggleTimeline.setAttribute("id", "date-toggle"); + this.toggleTimeline.setAttribute("tabindex", 0); + this.toggleTimeline.classList.add("gloda-timeline-button"); + this.toggleTimeline.addEventListener("click", () => { + FacetContext.toggleTimeline(); + }); + + const timelineImage = document.createElement("img"); + timelineImage.setAttribute( + "src", + "chrome://messenger/skin/icons/popular.svg" + ); + timelineImage.setAttribute("alt", ""); + this.toggleTimeline.appendChild(timelineImage); + + this.toggleText = document.createElement("span"); + this.toggleTimeline.appendChild(this.toggleText); + + const sortDiv = document.createElement("div"); + sortDiv.classList.add("results-message-sort-bar"); + + this.sortSelect = document.createElement("select"); + this.sortSelect.setAttribute("id", "sortby"); + let sortByPref = Services.prefs.getIntPref("gloda.facetview.sortby"); + + let relevanceItem = document.createElement("option"); + relevanceItem.textContent = glodaFacetStrings.GetStringFromName( + "glodaFacetView.results.message.sort.relevance2" + ); + relevanceItem.setAttribute("value", "-dascore"); + relevanceItem.toggleAttribute( + "selected", + sortByPref <= 0 || sortByPref == 2 || sortByPref > 3 + ); + this.sortSelect.appendChild(relevanceItem); + + let dateItem = document.createElement("option"); + dateItem.textContent = glodaFacetStrings.GetStringFromName( + "glodaFacetView.results.message.sort.date2" + ); + dateItem.setAttribute("value", "-date"); + dateItem.toggleAttribute("selected", sortByPref == 1 || sortByPref == 3); + this.sortSelect.appendChild(dateItem); + + this.messagesNode = document.createElement("div"); + this.messagesNode.classList.add("messages"); + + header.appendChild(this.countNode); + header.appendChild(this.toggleTimeline); + header.appendChild(sortDiv); + + sortDiv.appendChild(this.sortSelect); + + this.appendChild(header); + this.appendChild(this.messagesNode); + } + + setMessages(messages) { + let topMessagesPluralFormat = glodaFacetStrings.GetStringFromName( + "glodaFacetView.results.header.countLabel.NMessages" + ); + let outOfPluralFormat = glodaFacetStrings.GetStringFromName( + "glodaFacetView.results.header.countLabel.ofN" + ); + let groupingFormat = glodaFacetStrings.GetStringFromName( + "glodaFacetView.results.header.countLabel.grouping" + ); + + let displayCount = messages.length; + let totalCount = FacetContext.activeSet.length; + + // set the count so CSS selectors can know what the results look like + this.setAttribute("state", totalCount <= 0 ? "empty" : "some"); + + let topMessagesStr = PluralForm.get( + displayCount, + topMessagesPluralFormat + ).replace("#1", displayCount.toLocaleString()); + let outOfStr = PluralForm.get(totalCount, outOfPluralFormat).replace( + "#1", + totalCount.toLocaleString() + ); + + this.countNode.textContent = groupingFormat + .replace("#1", topMessagesStr) + .replace("#2", outOfStr); + + this.toggleText.textContent = glodaFacetStrings.GetStringFromName( + "glodaFacetView.results.message.timeline.label" + ); + + let sortByPref = Services.prefs.getIntPref("gloda.facetview.sortby"); + this.sortSelect.addEventListener("change", () => { + if (sortByPref >= 2) { + Services.prefs.setIntPref( + "gloda.facetview.sortby", + this.sortSelect.value == "-dascore" ? 2 : 3 + ); + } + + FacetContext.sortBy = this.sortSelect.value; + }); + + while (this.messagesNode.hasChildNodes()) { + this.messagesNode.lastChild.remove(); + } + try { + // -- Messages + for (let message of messages) { + let msgNode = document.createElement("facet-result-message"); + msgNode.message = message; + msgNode.setAttribute("class", "message"); + this.messagesNode.appendChild(msgNode); + } + } catch (e) { + console.error(e); + } + } + } + + customElements.define("facet-results-message", MozFacetResultsMessage); + + class MozFacetBoolean extends HTMLElement { + constructor() { + super(); + + this.addEventListener("mouseover", event => { + FacetContext.hoverFacet( + this.faceter, + this.faceter.attrDef, + true, + this.trueValues + ); + }); + + this.addEventListener("mouseout", event => { + FacetContext.unhoverFacet( + this.faceter, + this.faceter.attrDef, + true, + this.trueValues + ); + }); + } + + connectedCallback() { + this.addChildren(); + + this.canUpdate = true; + this.bubble.addEventListener("click", event => { + return this.bubbleClicked(event); + }); + + if ("faceter" in this) { + this.build(true); + } + } + + addChildren() { + this.bubble = document.createElement("span"); + this.bubble.classList.add("facet-checkbox-bubble"); + + this.checkbox = document.createElement("input"); + this.checkbox.setAttribute("type", "checkbox"); + + this.labelNode = document.createElement("span"); + this.labelNode.classList.add("facet-checkbox-label"); + + this.countNode = document.createElement("span"); + this.countNode.classList.add("facet-checkbox-count"); + + this.bubble.appendChild(this.checkbox); + this.bubble.appendChild(this.labelNode); + this.bubble.appendChild(this.countNode); + + this.appendChild(this.bubble); + } + + set disabled(val) { + if (val) { + this.setAttribute("disabled", "true"); + this.checkbox.setAttribute("disabled", "true"); + } else { + this.removeAttribute("disabled"); + this.checkbox.removeAttribute("disabled"); + } + } + + get disabled() { + return this.getAttribute("disabled") == "true"; + } + + set checked(val) { + if (this.checked == val) { + return; + } + this.checkbox.checked = val; + if (val) { + this.setAttribute("checked", "true"); + if (!this.disabled) { + FacetContext.addFacetConstraint(this.faceter, true, this.trueGroups); + } + } else { + this.removeAttribute("checked"); + this.checkbox.removeAttribute("checked"); + if (!this.disabled) { + FacetContext.removeFacetConstraint( + this.faceter, + true, + this.trueGroups + ); + } + } + this.checkStateChanged(); + } + + get checked() { + return this.getAttribute("checked") == "true"; + } + + extraSetup() {} + + checkStateChanged() {} + + brushItems() {} + + clearBrushedItems() {} + + build(firstTime) { + if (firstTime) { + this.labelNode.textContent = this.facetDef.strings.facetNameLabel; + this.checkbox.setAttribute( + "aria-label", + this.facetDef.strings.facetNameLabel + ); + this.trueValues = []; + } + + // If we do not currently have a constraint applied and there is only + // one (or no) group, then: disable us, but reflect the underlying + // state of the data (checked or non-checked) + if (!this.faceter.constraint && this.orderedGroups.length <= 1) { + this.disabled = true; + let count = 0; + if (this.orderedGroups.length) { + // true case? + if (this.orderedGroups[0][0]) { + count = this.orderedGroups[0][1].length; + this.checked = true; + } else { + this.checked = false; + } + } + this.countNode.textContent = count.toLocaleString(); + return; + } + // if we were disabled checked before, clear ourselves out + if (this.disabled && this.checked) { + this.checked = false; + } + this.disabled = false; + + // if we are here, we have our 2 groups, find true... + // (note: it is possible to get jerked around by null values + // currently, so leave a reasonable failure case) + this.trueValues = []; + this.trueGroups = [true]; + for (let groupPair of this.orderedGroups) { + if (groupPair[0]) { + this.trueValues = groupPair[1]; + } + } + + this.countNode.textContent = this.trueValues.length.toLocaleString(); + } + + bubbleClicked(event) { + if (!this.disabled) { + this.checked = !this.checked; + } + event.stopPropagation(); + } + } + + customElements.define("facet-boolean", MozFacetBoolean); + + class MozFacetBooleanFiltered extends MozFacetBoolean { + static get observedAttributes() { + return ["checked", "disabled"]; + } + + connectedCallback() { + super.addChildren(); + + this.filterNode = document.createElement("select"); + this.filterNode.classList.add("facet-filter-list"); + this.appendChild(this.filterNode); + + this.canUpdate = true; + this.bubble.addEventListener("click", event => { + return super.bubbleClicked(event); + }); + + this.extraSetup(); + + if ("faceter" in this) { + this.build(true); + } + + this._updateAttributes(); + } + + attributeChangedCallback() { + this._updateAttributes(); + } + + _updateAttributes() { + if (!this.checkbox) { + return; + } + + if (this.hasAttribute("checked")) { + this.checkbox.setAttribute("checked", this.getAttribute("checked")); + } else { + this.checkbox.removeAttribute("checked"); + } + + if (this.hasAttribute("disabled")) { + this.checkbox.setAttribute("disabled", this.getAttribute("disabled")); + } else { + this.checkbox.removeAttribute("disabled"); + } + } + + extraSetup() { + this.groupDisplayProperty = this.getAttribute("groupDisplayProperty"); + + this.filterNode.addEventListener("change", event => + this.filterChanged(event) + ); + + this.selectedValue = "all"; + } + + build(firstTime) { + if (firstTime) { + this.labelNode.textContent = this.facetDef.strings.facetNameLabel; + this.checkbox.setAttribute( + "aria-label", + this.facetDef.strings.facetNameLabel + ); + this.trueValues = []; + } + + // Only update count if anything other than "all" is selected. + // Otherwise we lose the set of attachment types in our select box, + // and that makes us sad. We do want to update on "all" though + // because other facets may further reduce the number of attachments + // we see. (Or if this is not just being used for attachments, it + // still holds.) + if (this.selectedValue != "all") { + let count = 0; + for (let groupPair of this.orderedGroups) { + if (groupPair[0] != null) { + count += groupPair[1].length; + } + } + this.countNode.textContent = count.toLocaleString(); + return; + } + + while (this.filterNode.hasChildNodes()) { + this.filterNode.lastChild.remove(); + } + + let allNode = document.createElement("option"); + allNode.textContent = glodaFacetStrings.GetStringFromName( + "glodaFacetView.facets.filter." + + this.attrDef.attributeName + + ".allLabel" + ); + allNode.setAttribute("value", "all"); + if (this.selectedValue == "all") { + allNode.setAttribute("selected", "selected"); + } + this.filterNode.appendChild(allNode); + + // if we are here, we have our 2 groups, find true... + // (note: it is possible to get jerked around by null values + // currently, so leave a reasonable failure case) + // empty true groups is for the checkbox + this.trueGroups = []; + // the real true groups is the actual true values for our explicit + // filtering + this.realTrueGroups = []; + this.trueValues = []; + this.falseValues = []; + let selectNodes = []; + for (let groupPair of this.orderedGroups) { + if (groupPair[0] === null) { + this.falseValues.push.apply(this.falseValues, groupPair[1]); + } else { + this.trueValues.push.apply(this.trueValues, groupPair[1]); + + let groupValue = groupPair[0]; + let selNode = document.createElement("option"); + selNode.textContent = groupValue[this.groupDisplayProperty]; + selNode.setAttribute("value", this.realTrueGroups.length); + if (this.selectedValue == groupValue.category) { + selNode.setAttribute("selected", "selected"); + } + selectNodes.push(selNode); + + this.realTrueGroups.push(groupValue); + } + } + selectNodes.sort((a, b) => { + return a.textContent.localeCompare(b.textContent); + }); + selectNodes.forEach(selNode => { + this.filterNode.appendChild(selNode); + }); + + this.disabled = !this.trueValues.length; + + this.countNode.textContent = this.trueValues.length.toLocaleString(); + } + + checkStateChanged() { + // if they un-check us, revert our value to all. + if (!this.checked) { + this.selectedValue = "all"; + } + } + + filterChanged(event) { + if (!this.checked) { + return; + } + if (this.filterNode.value == "all") { + this.selectedValue = "all"; + FacetContext.addFacetConstraint( + this.faceter, + true, + this.trueGroups, + false, + true + ); + } else { + let groupValue = this.realTrueGroups[parseInt(this.filterNode.value)]; + this.selectedValue = groupValue.category; + FacetContext.addFacetConstraint( + this.faceter, + true, + [groupValue], + false, + true + ); + } + } + } + + customElements.define("facet-boolean-filtered", MozFacetBooleanFiltered); + + class MozFacetDiscrete extends HTMLElement { + constructor() { + super(); + + this.addEventListener("click", event => { + this.showPopup(event); + }); + + this.addEventListener("keypress", event => { + if (event.keyCode != KeyEvent.DOM_VK_RETURN) { + return; + } + this.showPopup(event); + }); + + this.addEventListener("keypress", event => { + this.activateLink(event); + }); + + this.addEventListener("mouseover", event => { + // we dispatch based on the class of the thing we clicked on. + // there are other ways we could accomplish this, but they all sorta suck. + if ( + event.target.hasAttribute("class") && + event.target.classList.contains("bar-link") + ) { + this.barHovered(event.target.parentNode, true); + } + }); + + this.addEventListener("mouseout", event => { + // we dispatch based on the class of the thing we clicked on. + // there are other ways we could accomplish this, but they all sorta suck. + if ( + event.target.hasAttribute("class") && + event.target.classList.contains("bar-link") + ) { + this.barHoverGone(event.target.parentNode, true); + } + }); + } + + connectedCallback() { + const facet = document.createElement("div"); + facet.classList.add("facet"); + + this.nameNode = document.createElement("h2"); + + this.contentBox = document.createElement("div"); + this.contentBox.classList.add("facet-content"); + + this.includeLabel = document.createElement("h3"); + this.includeLabel.classList.add("facet-included-header"); + + this.includeList = document.createElement("ul"); + this.includeList.classList.add("facet-included", "barry"); + + this.remainderLabel = document.createElement("h3"); + this.remainderLabel.classList.add("facet-remaindered-header"); + + this.remainderList = document.createElement("ul"); + this.remainderList.classList.add("facet-remaindered", "barry"); + + this.excludeLabel = document.createElement("h3"); + this.excludeLabel.classList.add("facet-excluded-header"); + + this.excludeList = document.createElement("ul"); + this.excludeList.classList.add("facet-excluded", "barry"); + + this.moreButton = document.createElement("button"); + this.moreButton.classList.add("facet-more"); + this.moreButton.setAttribute("needed", "false"); + this.moreButton.setAttribute("tabindex", "0"); + + this.contentBox.appendChild(this.includeLabel); + this.contentBox.appendChild(this.includeList); + this.contentBox.appendChild(this.remainderLabel); + this.contentBox.appendChild(this.remainderList); + this.contentBox.appendChild(this.excludeLabel); + this.contentBox.appendChild(this.excludeList); + this.contentBox.appendChild(this.moreButton); + + facet.appendChild(this.nameNode); + facet.appendChild(this.contentBox); + + this.appendChild(facet); + + this.canUpdate = false; + + if ("faceter" in this) { + this.build(true); + } + } + + build(firstTime) { + // -- Header Building + this.nameNode.textContent = this.facetDef.strings.facetNameLabel; + + // - include + // setup the include label + if ("includeLabel" in this.facetDef.strings) { + this.includeLabel.textContent = this.facetDef.strings.includeLabel; + } else { + this.includeLabel.textContent = glodaFacetStrings.GetStringFromName( + "glodaFacetView.facets.included.fallbackLabel" + ); + } + this.includeLabel.setAttribute("state", "empty"); + + // - exclude + // setup the exclude label + if ("excludeLabel" in this.facetDef.strings) { + this.excludeLabel.textContent = this.facetDef.strings.excludeLabel; + } else { + this.excludeLabel.textContent = glodaFacetStrings.GetStringFromName( + "glodaFacetView.facets.excluded.fallbackLabel" + ); + } + this.excludeLabel.setAttribute("state", "empty"); + + // - remainder + // setup the remainder label + if ("remainderLabel" in this.facetDef.strings) { + this.remainderLabel.textContent = this.facetDef.strings.remainderLabel; + } else { + this.remainderLabel.textContent = glodaFacetStrings.GetStringFromName( + "glodaFacetView.facets.remainder.fallbackLabel" + ); + } + + // -- House-cleaning + // -- All/Top mode decision + this.modes = ["all"]; + if (this.maxDisplayRows >= this.orderedGroups.length) { + this.mode = "all"; + } else { + // top mode must be used + this.modes.push("top"); + this.mode = "top"; + this.topGroups = FacetUtils.makeTopGroups( + this.attrDef, + this.orderedGroups, + this.maxDisplayRows + ); + // setup the more button string + let groupCount = this.orderedGroups.length; + this.moreButton.textContent = PluralForm.get( + groupCount, + glodaFacetStrings.GetStringFromName( + "glodaFacetView.facets.mode.top.listAllLabel" + ) + ).replace("#1", groupCount); + } + + // -- Row Building + this.buildRows(); + } + + changeMode(newMode) { + this.mode = newMode; + this.setAttribute("mode", newMode); + this.buildRows(); + } + + buildRows() { + let nounDef = this.nounDef; + let useGroups = this.mode == "all" ? this.orderedGroups : this.topGroups; + + // should we just rely on automatic string coercion? + this.moreButton.setAttribute( + "needed", + this.mode == "top" ? "true" : "false" + ); + + let constraint = this.faceter.constraint; + + // -- empty all of our display buckets... + let remainderList = this.remainderList; + while (remainderList.hasChildNodes()) { + remainderList.lastChild.remove(); + } + let includeList = this.includeList; + let excludeList = this.excludeList; + while (includeList.hasChildNodes()) { + includeList.lastChild.remove(); + } + while (excludeList.hasChildNodes()) { + excludeList.lastChild.remove(); + } + + // -- first pass, check for ambiguous labels + // It's possible that multiple groups are identified by the same short + // string, in which case we want to use the longer string to + // disambiguate. For example, un-merged contacts can result in + // multiple identities having contacts with the same name. In that + // case we want to display both the contact name and the identity + // name. + // This is generically addressed by using the userVisibleString function + // defined on the noun type if it is defined. It takes an argument + // indicating whether it should be a short string or a long string. + // Our algorithm is somewhat dumb. We get the short strings, put them + // in a dictionary that maps to whether they are ambiguous or not. We + // do not attempt to map based on their id, so then when it comes time + // to actually build the labels, we must build the short string and + // then re-call for the long name. We could be smarter by building + // a list of the input values that resulted in the output string and + // then using that to back-update the id map, but it's more compelx and + // the performance difference is unlikely to be meaningful. + let ambiguousKeyValues; + if ("userVisibleString" in nounDef) { + ambiguousKeyValues = {}; + for (let groupPair of useGroups) { + let [groupValue] = groupPair; + + // skip null values, they are handled by the none special-case + if (groupValue == null) { + continue; + } + + let groupStr = nounDef.userVisibleString(groupValue, false); + // We use hasOwnProperty because it is possible that groupStr could + // be the same as the name of one of the attributes on + // Object.prototype. + if (ambiguousKeyValues.hasOwnProperty(groupStr)) { + ambiguousKeyValues[groupStr] = true; + } else { + ambiguousKeyValues[groupStr] = false; + } + } + } + + // -- create the items, assigning them to the right list based on + // existing constraint values + for (let groupPair of useGroups) { + let [groupValue, groupItems] = groupPair; + let li = document.createElement("li"); + li.setAttribute("class", "bar"); + li.setAttribute("tabindex", "0"); + li.setAttribute("role", "link"); + li.setAttribute("aria-haspopup", "true"); + li.groupValue = groupValue; + li.setAttribute("groupValue", groupValue); + li.groupItems = groupItems; + + let countSpan = document.createElement("span"); + countSpan.setAttribute("class", "bar-count"); + countSpan.textContent = groupItems.length.toLocaleString(); + li.appendChild(countSpan); + + let label = document.createElement("span"); + label.setAttribute("class", "bar-link"); + + // The null value is a special indicator for 'none' + if (groupValue == null) { + if ("noneLabel" in this.facetDef.strings) { + label.textContent = this.facetDef.strings.noneLabel; + } else { + label.textContent = glodaFacetStrings.GetStringFromName( + "glodaFacetView.facets.noneLabel" + ); + } + } else { + // Otherwise stringify the group object + let labelStr; + if (ambiguousKeyValues) { + labelStr = nounDef.userVisibleString(groupValue, false); + if (ambiguousKeyValues[labelStr]) { + labelStr = nounDef.userVisibleString(groupValue, true); + } + } else if ("labelFunc" in this.facetDef) { + labelStr = this.facetDef.labelFunc(groupValue); + } else { + labelStr = groupValue.toLocaleString().substring(0, 80); + } + label.textContent = labelStr; + label.setAttribute("title", labelStr); + } + li.appendChild(label); + + // root it under the appropriate list + if (constraint) { + if (constraint.isIncludedGroup(groupValue)) { + li.setAttribute("variety", "include"); + includeList.appendChild(li); + } else if (constraint.isExcludedGroup(groupValue)) { + li.setAttribute("variety", "exclude"); + excludeList.appendChild(li); + } else { + li.setAttribute("variety", "remainder"); + remainderList.appendChild(li); + } + } else { + li.setAttribute("variety", "remainder"); + remainderList.appendChild(li); + } + } + + this.updateHeaderStates(); + } + + /** + * - Mark the include/exclude headers as "some" if there is anything in their + * - lists, mark the remainder header as "needed" if either of include / + * - exclude exist so we need that label. + */ + updateHeaderStates(items) { + this.includeLabel.setAttribute( + "state", + this.includeList.childElementCount ? "some" : "empty" + ); + this.excludeLabel.setAttribute( + "state", + this.excludeList.childElementCount ? "some" : "empty" + ); + this.remainderLabel.setAttribute( + "needed", + (this.includeList.childElementCount || + this.excludeList.childElementCount) && + this.remainderList.childElementCount + ? "true" + : "false" + ); + + // nuke the style attributes. + this.includeLabel.removeAttribute("style"); + this.excludeLabel.removeAttribute("style"); + this.remainderLabel.removeAttribute("style"); + } + + brushItems(items) {} + + clearBrushedItems() {} + + afterListVisible(variety, callback) { + let labelNode = this[variety + "Label"]; + let listNode = this[variety + "List"]; + + // if there are already things displayed, no need + if (listNode.childElementCount) { + callback(); + return; + } + + let remListVisible = this.remainderLabel.getAttribute("needed") == "true"; + let remListShouldBeVisible = this.remainderList.childElementCount > 1; + + labelNode.setAttribute("state", "some"); + + let showNodes = [labelNode]; + if (remListVisible != remListShouldBeVisible) { + showNodes = [labelNode, this.remainderLabel]; + } + + showNodes.forEach(node => (node.style.display = "block")); + + callback(); + } + + _flyBarAway(barNode, variety, callback) { + function getRect(aElement) { + let box = aElement.getBoundingClientRect(); + let documentElement = aElement.ownerDocument.documentElement; + return { + top: box.top + window.pageYOffset - documentElement.clientTop, + left: box.left + window.pageXOffset - documentElement.clientLeft, + width: box.width, + height: box.height, + }; + } + // figure out our origin location prior to adding the target or it + // will shift us down. + let origin = getRect(barNode); + + // clone the node into its target location + let targetNode = barNode.cloneNode(true); + targetNode.groupValue = barNode.groupValue; + targetNode.groupItems = barNode.groupItems; + targetNode.setAttribute("variety", variety); + + let targetParent = this[variety + "List"]; + targetParent.appendChild(targetNode); + + // create a flying clone + let flyingNode = barNode.cloneNode(true); + + let dest = getRect(targetNode); + + // if the flying box wants to go higher than the content box goes, just + // send it to the top of the content box instead. + let contentRect = getRect(this.contentBox); + if (dest.top < contentRect.top) { + dest.top = contentRect.top; + } + + // likewise if it wants to go further south than the content box, stop + // that + if (dest.top > contentRect.top + contentRect.height) { + dest.top = contentRect.top + contentRect.height - dest.height; + } + + flyingNode.style.position = "absolute"; + flyingNode.style.width = origin.width + "px"; + flyingNode.style.height = origin.height + "px"; + flyingNode.style.top = origin.top + "px"; + flyingNode.style.left = origin.left + "px"; + flyingNode.style.zIndex = 1000; + + flyingNode.style.transitionDuration = + Math.abs(dest.top - origin.top) * 2 + "ms"; + flyingNode.style.transitionProperty = "top, left"; + + flyingNode.addEventListener("transitionend", () => { + barNode.remove(); + targetNode.style.display = "block"; + flyingNode.remove(); + + if (callback) { + setTimeout(callback, 50); + } + }); + + document.body.appendChild(flyingNode); + + // Adding setTimeout to improve the facet-discrete animation. + // See Bug 1439323 for more detail. + setTimeout(() => { + // animate the flying clone... flying! + window.requestAnimationFrame(() => { + flyingNode.style.top = dest.top + "px"; + flyingNode.style.left = dest.left + "px"; + }); + + // hide the target (cloned) node + targetNode.style.display = "none"; + + // hide the original node and remove its JS properties + barNode.style.visibility = "hidden"; + delete barNode.groupValue; + delete barNode.groupItems; + }, 100); + } + + barClicked(barNode, variety) { + let groupValue = barNode.groupValue; + // These determine what goAnimate actually does. + // flyAway allows us to cancel flying in the case the constraint is + // being fully dropped and so the facet is just going to get rebuilt + let flyAway = true; + + const goAnimate = () => { + setTimeout(() => { + if (flyAway) { + this.afterListVisible(variety, () => { + this._flyBarAway(barNode, variety, () => { + this.updateHeaderStates(); + }); + }); + } + }, 0); + }; + + // Immediately apply the facet change, triggering the animation after + // the faceting completes. + if (variety == "remainder") { + let currentVariety = barNode.getAttribute("variety"); + let constraintGone = FacetContext.removeFacetConstraint( + this.faceter, + currentVariety == "include", + [groupValue], + goAnimate + ); + + // we will automatically rebuild if the constraint is gone, so + // just make the animation a no-op. + if (constraintGone) { + flyAway = false; + } + } else { + // include/exclude + let revalidate = FacetContext.addFacetConstraint( + this.faceter, + variety == "include", + [groupValue], + false, + false, + goAnimate + ); + + // revalidate means we need to blow away the other dudes, in which + // case it makes the most sense to just trigger a rebuild of ourself + if (revalidate) { + flyAway = false; + this.build(false); + } + } + } + + barHovered(barNode, aInclude) { + let groupValue = barNode.groupValue; + let groupItems = barNode.groupItems; + + FacetContext.hoverFacet( + this.faceter, + this.attrDef, + groupValue, + groupItems + ); + } + + /** + * HoverGone! HoverGone! + * We know it's gone, but where has it gone? + */ + barHoverGone(barNode, include) { + let groupValue = barNode.groupValue; + let groupItems = barNode.groupItems; + + FacetContext.unhoverFacet( + this.faceter, + this.attrDef, + groupValue, + groupItems + ); + } + + includeFacet(node) { + this.barClicked( + node, + node.getAttribute("variety") == "remainder" ? "include" : "remainder" + ); + } + + undoFacet(node) { + this.barClicked( + node, + node.getAttribute("variety") == "remainder" ? "include" : "remainder" + ); + } + + excludeFacet(node) { + this.barClicked(node, "exclude"); + } + + showPopup(event) { + try { + // event.target could be the <li> node, or a span inside + // of it, or perhaps the facet-more button, or maybe something + // else that we'll handle in the next version. We walk up its + // parent chain until we get to the right level of the DOM + // hierarchy, or the facet-content which seems to be the root. + if (this.currentNode) { + this.currentNode.removeAttribute("selected"); + } + + let node = event.target; + + while ( + !(node && node.hasAttribute && node.hasAttribute("class")) || + (!node.classList.contains("bar") && + !node.classList.contains("facet-more") && + !node.classList.contains("facet-content")) + ) { + node = node.parentNode; + } + + if (!(node && node.hasAttribute && node.hasAttribute("class"))) { + return false; + } + + this.currentNode = node; + node.setAttribute("selected", "true"); + + if (node.classList.contains("bar")) { + document.querySelector("facet-popup-menu").show(event, this, node); + } else if (node.classList.contains("facet-more")) { + this.changeMode("all"); + } + + return false; + } catch (e) { + return console.error(e); + } + } + + activateLink(event) { + try { + let node = event.target; + + while ( + !node.hasAttribute("class") || + (!node.classList.contains("facet-more") && + !node.classList.contains("facet-content")) + ) { + node = node.parentNode; + } + + if (node.classList.contains("facet-more")) { + this.changeMode("all"); + } + + return false; + } catch (e) { + return console.error(e); + } + } + } + + customElements.define("facet-discrete", MozFacetDiscrete); + + class MozFacetPopupMenu extends HTMLElement { + constructor() { + super(); + + this.addEventListener("keypress", event => { + switch (event.keyCode) { + case KeyEvent.DOM_VK_ESCAPE: + this.hide(); + break; + + case KeyEvent.DOM_VK_DOWN: + this.moveFocus(event, 1); + break; + + case KeyEvent.DOM_VK_TAB: + if (event.shiftKey) { + this.moveFocus(event, -1); + break; + } + + this.moveFocus(event, 1); + break; + + case KeyEvent.DOM_VK_UP: + this.moveFocus(event, -1); + break; + + default: + break; + } + }); + } + + connectedCallback() { + const parentDiv = document.createElement("div"); + parentDiv.classList.add("parent"); + parentDiv.setAttribute("tabIndex", "0"); + + this.includeNode = document.createElement("div"); + this.includeNode.classList.add("popup-menuitem", "top"); + this.includeNode.setAttribute("tabindex", "0"); + this.includeNode.onmouseover = () => { + this.focus(); + }; + this.includeNode.onkeypress = event => { + if (event.keyCode == event.DOM_VK_RETURN) { + this.doInclude(); + } + }; + this.includeNode.onmouseup = () => { + this.doInclude(); + }; + + this.excludeNode = document.createElement("div"); + this.excludeNode.classList.add("popup-menuitem", "bottom"); + this.excludeNode.setAttribute("tabindex", "0"); + this.excludeNode.onmouseover = () => { + this.focus(); + }; + this.excludeNode.onkeypress = event => { + if (event.keyCode == event.DOM_VK_RETURN) { + this.doExclude(); + } + }; + this.excludeNode.onmouseup = () => { + this.doExclude(); + }; + + this.undoNode = document.createElement("div"); + this.undoNode.classList.add("popup-menuitem", "undo"); + this.undoNode.setAttribute("tabindex", "0"); + this.undoNode.onmouseover = () => { + this.focus(); + }; + this.undoNode.onkeypress = event => { + if (event.keyCode == event.DOM_VK_RETURN) { + this.doUndo(); + } + }; + this.undoNode.onmouseup = () => { + this.doUndo(); + }; + + parentDiv.appendChild(this.includeNode); + parentDiv.appendChild(this.excludeNode); + parentDiv.appendChild(this.undoNode); + + this.appendChild(parentDiv); + } + + _getLabel(facetDef, facetValue, groupValue, stringName) { + let labelFormat; + if (stringName in facetDef.strings) { + labelFormat = facetDef.strings[stringName]; + } else { + labelFormat = glodaFacetStrings.GetStringFromName( + `glodaFacetView.facets.${stringName}.fallbackLabel` + ); + } + + if (!labelFormat.includes("#1")) { + return labelFormat; + } + + return labelFormat.replace("#1", facetValue); + } + + build(facetDef, facetValue, groupValue) { + try { + if (groupValue) { + this.includeNode.textContent = this._getLabel( + facetDef, + facetValue, + groupValue, + "mustMatchLabel" + ); + this.excludeNode.textContent = this._getLabel( + facetDef, + facetValue, + groupValue, + "cantMatchLabel" + ); + this.undoNode.textContent = this._getLabel( + facetDef, + facetValue, + groupValue, + "mayMatchLabel" + ); + } else { + this.includeNode.textContent = this._getLabel( + facetDef, + facetValue, + groupValue, + "mustMatchNoneLabel" + ); + this.excludeNode.textContent = this._getLabel( + facetDef, + facetValue, + groupValue, + "mustMatchSomeLabel" + ); + this.undoNode.textContent = this._getLabel( + facetDef, + facetValue, + groupValue, + "mayMatchAnyLabel" + ); + } + } catch (e) { + console.error(e); + } + } + + moveFocus(event, delta) { + try { + // We probably want something quite generic in the long term, but that + // is way too much for now (needs to skip over invisible items, etc) + let focused = document.activeElement; + if (focused == this.includeNode) { + this.excludeNode.focus(); + } else if (focused == this.excludeNode) { + this.includeNode.focus(); + } + event.preventDefault(); + event.stopPropagation(); + } catch (e) { + console.error(e); + } + } + + selectItem(event) { + try { + let focused = document.activeElement; + if (focused == this.includeNode) { + this.doInclude(); + } else if (focused == this.excludeNode) { + this.doExclude(); + } else { + this.doUndo(); + } + } catch (e) { + console.error(e); + } + } + + show(event, facetNode, barNode) { + try { + this.node = barNode; + this.facetNode = facetNode; + let facetDef = facetNode.facetDef; + let groupValue = barNode.groupValue; + let variety = barNode.getAttribute("variety"); + let label = barNode.querySelector(".bar-link").textContent; + this.build(facetDef, label, groupValue); + this.node.setAttribute("selected", "true"); + const rtl = window.getComputedStyle(this).direction == "rtl"; + /* We show different menus if we're on an "unselected" facet value, + or if we're on a preselected facet value, whether included or + excluded. The variety attribute handles that through CSS */ + this.setAttribute("variety", variety); + let rect = barNode.getBoundingClientRect(); + let x, y; + if (event.type == "click") { + // center the menu on the mouse click + if (rtl) { + x = event.pageX + 10; + } else { + x = event.pageX - 10; + } + y = Math.max(20, event.pageY - 15); + } else { + if (rtl) { + x = rect.left + rect.width / 2 + 20; + } else { + x = rect.left + rect.width / 2 - 20; + } + y = rect.top - 10; + } + if (rtl) { + this.style.left = x - this.getBoundingClientRect().width + "px"; + } else { + this.style.left = x + "px"; + } + this.style.top = y + "px"; + + if (variety == "remainder") { + // include + this.includeNode.focus(); + } else { + // undo + this.undoNode.focus(); + } + } catch (e) { + console.error(e); + } + } + + hide() { + try { + this.setAttribute("variety", "invisible"); + if (this.node) { + this.node.removeAttribute("selected"); + this.node.focus(); + } + } catch (e) { + console.error(e); + } + } + + doInclude() { + try { + this.facetNode.includeFacet(this.node); + this.hide(); + } catch (e) { + console.error(e); + } + } + + doExclude() { + this.facetNode.excludeFacet(this.node); + this.hide(); + } + + doUndo() { + this.facetNode.undoFacet(this.node); + this.hide(); + } + } + + customElements.define("facet-popup-menu", MozFacetPopupMenu); + + /** + * MozResultMessage displays an excerpt of a message. Typically these are used in the gloda + * results listing, showing the messages that matched. + */ + class MozFacetResultMessage extends HTMLElement { + constructor() { + super(); + + this.addEventListener("mouseover", event => { + FacetContext.hoverFacet( + FacetContext.fakeResultFaceter, + FacetContext.fakeResultAttr, + this.message, + [this.message] + ); + }); + + this.addEventListener("mouseout", event => { + FacetContext.unhoverFacet( + FacetContext.fakeResultFaceter, + FacetContext.fakeResultAttr, + this.message, + [this.message] + ); + }); + } + + connectedCallback() { + const messageHeader = document.createElement("div"); + + const messageLine = document.createElement("div"); + messageLine.classList.add("message-line"); + + const messageMeta = document.createElement("div"); + messageMeta.classList.add("message-meta"); + + this.addressesGroup = document.createElement("div"); + this.addressesGroup.classList.add("message-addresses-group"); + + this.authorGroup = document.createElement("div"); + this.authorGroup.classList.add("message-author-group"); + + this.author = document.createElement("span"); + this.author.classList.add("message-author"); + + this.date = document.createElement("div"); + this.date.classList.add("message-date"); + + this.authorGroup.appendChild(this.author); + this.authorGroup.appendChild(this.date); + this.addressesGroup.appendChild(this.authorGroup); + messageMeta.appendChild(this.addressesGroup); + messageLine.appendChild(messageMeta); + + const messageSubjectGroup = document.createElement("div"); + messageSubjectGroup.classList.add("message-subject-group"); + + this.star = document.createElement("span"); + this.star.classList.add("message-star"); + + this.subject = document.createElement("span"); + this.subject.classList.add("message-subject"); + this.subject.setAttribute("tabindex", "0"); + this.subject.setAttribute("role", "link"); + + this.tags = document.createElement("span"); + this.tags.classList.add("message-tags"); + + this.recipientsGroup = document.createElement("div"); + this.recipientsGroup.classList.add("message-recipients-group"); + + this.to = document.createElement("span"); + this.to.classList.add("message-to-label"); + + this.recipients = document.createElement("div"); + this.recipients.classList.add("message-recipients"); + + this.recipientsGroup.appendChild(this.to); + this.recipientsGroup.appendChild(this.recipients); + messageSubjectGroup.appendChild(this.star); + messageSubjectGroup.appendChild(this.subject); + messageSubjectGroup.appendChild(this.tags); + messageSubjectGroup.appendChild(this.recipientsGroup); + messageLine.appendChild(messageSubjectGroup); + messageHeader.appendChild(messageLine); + this.appendChild(messageHeader); + + this.snippet = document.createElement("pre"); + this.snippet.classList.add("message-body"); + + this.attachments = document.createElement("div"); + this.attachments.classList.add("message-attachments"); + + this.appendChild(this.snippet); + this.appendChild(this.attachments); + + this.build(); + } + + /* eslint-disable complexity */ + build() { + let message = this.message; + + let subject = this.subject; + // -- eventify + subject.onclick = event => { + FacetContext.showConversationInTab(this, event.button == 1); + }; + subject.onkeypress = event => { + if (Event.keyCode == event.DOM_VK_RETURN) { + FacetContext.showConversationInTab(this, event.shiftKey); + } + }; + + // -- Content Poking + if (message.subject.trim() == "") { + subject.textContent = glodaFacetStrings.GetStringFromName( + "glodaFacetView.result.message.noSubject" + ); + } else { + subject.textContent = message.subject; + } + let authorNode = this.author; + authorNode.setAttribute("title", message.from.value); + authorNode.textContent = message.from.contact.name; + let toNode = this.to; + toNode.textContent = glodaFacetStrings.GetStringFromName( + "glodaFacetView.result.message.toLabel" + ); + + // this.author.textContent = ; + let { makeFriendlyDateAgo } = ChromeUtils.import( + "resource:///modules/TemplateUtils.jsm" + ); + this.date.textContent = makeFriendlyDateAgo(message.date); + + // - Recipients + try { + let recipientsNode = this.recipients; + if (message.recipients) { + let recipientCount = 0; + const MAX_RECIPIENTS = 3; + let totalRecipientCount = message.recipients.length; + let recipientSeparator = glodaFacetStrings.GetStringFromName( + "glodaFacetView.results.message.recipientSeparator" + ); + for (let index in message.recipients) { + let recipNode = document.createElement("span"); + recipNode.setAttribute("class", "message-recipient"); + recipNode.textContent = message.recipients[index].contact.name; + recipientsNode.appendChild(recipNode); + recipientCount++; + if (recipientCount == MAX_RECIPIENTS) { + break; + } + if (index != totalRecipientCount - 1) { + // add separators (usually commas) + let sepNode = document.createElement("span"); + sepNode.setAttribute("class", "message-recipient-separator"); + sepNode.textContent = recipientSeparator; + recipientsNode.appendChild(sepNode); + } + } + if (totalRecipientCount > MAX_RECIPIENTS) { + let nOthers = totalRecipientCount - recipientCount; + let andNOthers = document.createElement("span"); + andNOthers.setAttribute("class", "message-recipients-andothers"); + + let andOthersLabel = PluralForm.get( + nOthers, + glodaFacetStrings.GetStringFromName( + "glodaFacetView.results.message.andOthers" + ) + ).replace("#1", nOthers); + + andNOthers.textContent = andOthersLabel; + recipientsNode.appendChild(andNOthers); + } + } + } catch (e) { + console.error(e); + } + + // - Starred + let starNode = this.star; + if (message.starred) { + starNode.setAttribute("starred", "true"); + } + + // - Attachments + if (message.attachmentNames) { + let attachmentsNode = this.attachments; + let imgNode = document.createElement("div"); + imgNode.setAttribute("class", "message-attachment-icon"); + attachmentsNode.appendChild(imgNode); + for (let attach of message.attachmentNames) { + let attachNode = document.createElement("div"); + attachNode.setAttribute("class", "message-attachment"); + if (attach.length >= 28) { + attach = attach.substring(0, 24) + "…"; + } + attachNode.textContent = attach; + attachmentsNode.appendChild(attachNode); + } + } + + // - Tags + let tagsNode = this.tags; + if ("tags" in message && message.tags.length) { + for (let tag of message.tags) { + let tagNode = document.createElement("span"); + tagNode.setAttribute("class", "message-tag"); + let color = MailServices.tags.getColorForKey(tag.key); + if (color) { + let textColor = !TagUtils.isColorContrastEnough(color) + ? "white" + : "black"; + tagNode.setAttribute( + "style", + "color: " + textColor + "; background-color: " + color + ";" + ); + } + tagNode.textContent = tag.tag; + tagsNode.appendChild(tagNode); + } + } + + // - Body + if (message.indexedBodyText) { + let bodyText = message.indexedBodyText; + + let matches = []; + if ("stashedColumns" in FacetContext.collection) { + let collection; + if ( + "IMCollection" in FacetContext && + message instanceof Gloda.lookupNounDef("im-conversation").clazz + ) { + collection = FacetContext.IMCollection; + } else { + collection = FacetContext.collection; + } + let offsets = collection.stashedColumns[message.id][0]; + let offsetNums = offsets.split(" ").map(x => parseInt(x)); + for (let i = 0; i < offsetNums.length; i += 4) { + // i is the column index. The indexedBodyText is in the column 0. + // Ignore matches for other columns. + if (offsetNums[i] != 0) { + continue; + } + + // i+1 is the term index, indicating which queried term was found. + // We can ignore for now... + + // i+2 is the *byte* offset at which the term is in the string. + // i+3 is the term's length. + matches.push([offsetNums[i + 2], offsetNums[i + 3]]); + } + + // Sort the matches by index, just to be sure. + // They are probably already sorted, but if they aren't it could + // mess things up at the next step. + matches.sort((a, b) => a[0] - b[0]); + + // Convert the byte offsets and lengths into character indexes. + let charCodeToByteCount = c => { + // UTF-8 stores: + // - code points below U+0080 on 1 byte, + // - code points below U+0800 on 2 bytes, + // - code points U+D800 through U+DFFF are UTF-16 surrogate halves + // (they indicate that JS has split a 4 bytes UTF-8 character + // in two halves of 2 bytes each), + // - other code points on 3 bytes. + if (c < 0x80) { + return 1; + } + if (c < 0x800 || (c >= 0xd800 && c <= 0xdfff)) { + return 2; + } + return 3; + }; + let byteOffset = 0; + let offset = 0; + for (let match of matches) { + while (byteOffset < match[0]) { + byteOffset += charCodeToByteCount(bodyText.charCodeAt(offset++)); + } + match[0] = offset; + for (let i = offset; i < offset + match[1]; ++i) { + let size = charCodeToByteCount(bodyText.charCodeAt(i)); + if (size > 1) { + match[1] -= size - 1; + } + } + } + } + + // how many lines of context we want before the first match: + const kContextLines = 2; + + let startIndex = 0; + if (matches.length > 0) { + // Find where the snippet should begin to show at least the + // first match and kContextLines of context before the match. + startIndex = matches[0][0]; + for (let context = kContextLines; context >= 0; --context) { + startIndex = bodyText.lastIndexOf("\n", startIndex - 1); + if (startIndex == -1) { + startIndex = 0; + break; + } + } + } + + // start assuming it's just one line that we want to show + let idxNewline = -1; + let ellipses = "…"; + + let maxLineCount = 5; + if (startIndex != 0) { + // Avoid displaying an ellipses followed by an empty line. + while (bodyText[startIndex + 1] == "\n") { + ++startIndex; + } + bodyText = ellipses + bodyText.substring(startIndex); + // The first line will only contain the ellipsis as the character + // at startIndex is always \n, so we show an additional line. + ++maxLineCount; + } + + for ( + let newlineCount = 0; + newlineCount < maxLineCount; + newlineCount++ + ) { + idxNewline = bodyText.indexOf("\n", idxNewline + 1); + if (idxNewline == -1) { + ellipses = ""; + break; + } + } + let snippet = ""; + if (idxNewline > -1) { + snippet = bodyText.substring(0, idxNewline); + } else { + snippet = bodyText; + } + if (ellipses) { + snippet = snippet.trimRight() + ellipses; + } + + let parent = this.snippet; + let node = document.createTextNode(snippet); + parent.appendChild(node); + + let offset = startIndex ? startIndex - 1 : 0; // The ellipsis takes 1 character. + for (let match of matches) { + if (idxNewline > -1 && match[0] > startIndex + idxNewline) { + break; + } + let secondNode = node.splitText(match[0] - offset); + node = secondNode.splitText(match[1]); + offset += match[0] + match[1] - offset; + let span = document.createElement("span"); + span.textContent = secondNode.data; + if (!this.firstMatchText) { + this.firstMatchText = secondNode.data; + } + span.setAttribute("class", "message-body-fulltext-match"); + parent.replaceChild(span, secondNode); + } + } + + // - Misc attributes + if (!message.read) { + this.setAttribute("unread", "true"); + } + } + } + + customElements.define("facet-result-message", MozFacetResultMessage); +} |