Style Developers: Migrating to 7.0.3



For a style to be fully compatible with version 7.0.3, some changes are required.
This knowledge base article describes these changes.

baseLayout.mustache Template

Changes have been made to the baseLayout.mustache template file. If a style overrides this template file, then the changes made to this file must also be applied to that overridden by the style.

View Differences


CSS properties that should be consistent between all styles has been moved to a separate file named baseLayout.css which is now imported by baseLayout.mustache. Do not override baseLayout.css.

Addition of message_buffer container

The #message_buffer container is used by the new dynamic buffer feature to house messages that it maintains.
Without this container, no messages will appear for the user because there is nowhere to place them.

Removal of historic_message container

The #historic_messages container has been removed. Messages from the previous session are now placed in the #message_buffer container with no distinguishable characteristics.

Message Buffer Session Indicator

The dynamic buffer inserts a marker stylized with the class .message_buffer_session_indicator to allow the user to distinguish which session a section of the scrollback is from.

A style can modify the properties of this class or replace the contents of the messageBufferSessionIndicator.mustache template to change the appearance of this marker.

Example Appearance

Image 1

Example Appearance Properties

/* Message buffer session indicator */

.message_buffer_session_indicator {
    display: flex;
    display: -webkit-flex;
    padding: 0.5em 0;

.message_buffer_session_indicator > hr {
    background: #dbdbdb;
    border: 0;
    height: 1px;
    margin-top: 0.6em;
    flex: 1;
    -webkit-flex: 1;

.message_buffer_session_indicator > span {
    font-style: oblique;
    margin: 0 1em;
    color: #a6a6a6;

.message_buffer_session_indicator + #mark {
    display: none;

Dynamic Buffer

The new dynamic buffer feature removes messages from the top or bottom of the scrollback, depending on scroller position, when the number of visible messages exceeds a undocumented limit. A style should be designed with the understanding that there is no guarantee a particular message will be visible in the scrollback because of this.

If a style wants to keep a copy of a particular message so that it is not removed, then that message should be moved outside of the #message_buffer container.

Dynamic Buffer — core.js Changes

Message Added

The Textual.newMessagePostedToView(lineNumber) callback is now deprecated. It will be called if present, but it is preferred that you use Textual.messageAddedToView(lineNumber, fromBuffer) instead.

The second argument of the Textual.messageAddedToView callback is true when the message was restored by the dynamic buffer when the user scrolls towards it.

Message Removed

Added Textual.messageRemovedFromView(lineNumber) callback which is called when a message is removed by the dynamic buffer.

Other Changes

Some functions declared by the Textual object have moved. These functions were out of the scope of core.js to begin with which means this change should not break a custom style unless it was doing naughty things.

Scrolling Changes

The automatic scroller no longer uses a timer to detect when the height of the document changes.
Instead, it is told when HTML will be added to or removed from the document.

If a custom style adds or removes HTML through the use of JavaScript, then it will need to tell the automatic scroller before it does so, so that the document can be automatically scrolled.

To accomplish this, call the prototype function prepareForMutation() on any element prior to modifying it.

You only need to call prepareForMutation() once within a synchronous block of code (such as a function).
The automatic scroller will not scroll until the block of code completes.



Last modified: May 09, 2018
The contents of this webpage are released into the Public Domain for unlimited distribution.