Firefox For Mac Touch Bar

The Touch Bar is a hardware component on some MacBook Pros released from 2016.It is a display above the keyboard that allows more flexible types ofinput than is otherwise possible with a normal keyboard. Apple offers Touch BarAPIs so developers can extend the Touch Bar to display inputs specific to theirapplication. Firefox consumes these APIs to offer a customizable row of inputsin the Touch Bar.

The Touch Bar does not provide word or emoji suggestions when using Firefox browser. Firefox Touch Bar. This seems potentially related to the Keyboard setting Touch Bar typing suggestions that is not showing for Firefox. Touch Bar typing suggestions. Firefox: 88.0.1. Much appreciated! The Touch Bar should never offer functionality unavailable to Firefox users without the Touch Bar. Most macOS Firefox users do not have the Touch Bar and some choose to disable it. Apple's own Human Interface Guidelines (HIG) forbids this kind of Touch Bar functionality. Please read the HIG for more design considerations before you plan on implementing a new Touch Bar feature.

In Apple's documentation, the term 'the Touch Bar' refers to the hardware.The term 'a Touch Bar' refers not to the hardware but to a collection of inputsshown on the Touch Bar. This means that there can be multiple 'Touch Bars' thatswitch out as the user switches contexts. The same naming convention is used inthis document.

In this document and in the code, the word 'input' is used to refer toan interactive element in the Touch Bar. It is often interchangeable with'button', but 'input' can also refer to any element displayed in the Touch Bar.

The Touch Bar should never offer functionality unavailable to Firefox userswithout the Touch Bar. Most macOS Firefox users do not have the Touch Bar andsome choose to disable it. Apple's own Human Interface Guidelines (HIG)forbids this kind of Touch Bar functionality. Please read the HIG for moredesign considerations before you plan on implementing a new Touch Bar feature.

Does your MacBook fail to respond or display dynamic controls when you. Whether it was social media or the tech press it seems like all I'd been hearing about the Touch Bar for years was negativity. Do people mostly like.

If you have questions about the Touch Bar that are not answered in thisdocument, feel free to reach out to Harry Twyford (:harry on Slack).He wrote this document and Firefox's initial Touch Bar implementation.

Firefox For Mac Touch Bars

Table of Contents

Firefox's Touch Bar implementation is equal parts JavaScript and Cocoa(Objective-C++). The JavaScript code lives in browser/components/touchbarand the Cocoa code lives in widget/cocoa, mostly in nsTouchBar.mm. TheCocoa code is a consumer of Apple's Touch Bar APIs and defines what types ofTouch Bar inputs are available to its own consumers. The JS code inbrowser/components/touchbar provides services to nsTouchBar.mm anddefines what inputs the user actually sees in the Touch Bar. There is two-waycommunication between the JS and the Cocoa: the Cocoa code asks the JS whatinputs it should display, and the JS asks the Cocoa code to update those inputswhen needed.

browser/components/touchbar/MacTouchBar.js defines what specific inputs areavailable to the user, what icon they will have, what action they will perform,and so on. Inputs are defined in the gBuiltInInputs object in that file.When creating a new object in gBuiltInInputs, the available properties aredocumented in the JSDoc for TouchBarInput:

Clarification on some of these properties is warranted.

• title is the key to a Fluent translation defined in browser/locales//browser/touchbar/touchbar.ftl.

• type must be a value from the kInputTypes enum in MacTouchBar.js.For example, kInputTypes.BUTTON. More information on input types followsbelow.

• callback points to a JavaScript function. Any chrome-level JavaScript canbe executed. execCommand is a convenience method in MacTouchBar.jsthat takes a XUL command as a string and executes that command. For instance,one input sets callback to execCommand('Browser:Back').

• children is an array of objects with the same properties as members ofgBuiltInInputs. When used with an input of typekInputTypes.SCROLLVIEW, children can only contain inputs of typekInputTypes.BUTTON. When used with an input of typekInputTypes.POPOVER, any input type except another kInputTypes.POPOVERcan be used.

A simple button. If image is not specified, the buttons displays the textlabel from title. If both image and title are specified, only theimage is shown. The action specified in callback is executed when thebutton is pressed.

Caution

Even if the title will not be shown in the Touch Bar, you must stilldefine a title property.

Similar to a button, but displayed at double the width. A main buttondisplays both the string in title and the icon in image. Only onemain button should be shown in the Touch Bar at any time, although this isnot enforced.

A non-interactive text label. This input takes only the attributes titleand type.

Initially represented in the Touch Bar as a button, a popover will display anentirely different set of inputs when pressed. These different inputs shouldbe defined in the children property of the parent. Popovers can also beshown and hidden programmatically, by calling

where the second argument is a reference to a popover TouchBarInput andthe third argument is whether the popover should be shown or hidden.

Firefox For Mac Touch Bar Download

A Scroll View is a scrolling list of buttons. The buttons should be definedin the Scroll View's children array.

Note

In Firefox, a list of search shortcuts appears in the Touch Bar when theaddress bar is focused. This is an example of a ScrollView contained withina popover. The popover is opened programmatically withgTouchBarUpdater.showPopover when the address bar is focused and it ishidden when the address bar is blurred.

Some examples of gBuiltInInputs objects follow.

A button is defined with a title, icon, type, and a callback. The callbacksimply calls the XUL command to go back.

This is the input that occupies the Touch Bar when the address bar is focused.

In Firefox, a list of search shortcuts appears in the Touch Bar when theaddress bar is focused. This is an example of a ScrollView contained withina popover. The popover is opened programmatically withgTouchBarUpdater.showPopover when the address bar is focused and it ishidden when the address bar is blurred.

Some examples of gBuiltInInputs objects follow.

A button is defined with a title, icon, type, and a callback. The callbacksimply calls the XUL command to go back.

This is the input that occupies the Touch Bar when the address bar is focused.

At the top level, a Popover is defined. This allows a collection of childrento be shown in a separate Touch Bar. The Popover has two children: a Label,and a Scroll View. The Scroll View displays five similar buttons that call ahelper method to insert search shortcut symbols into the address bar.

Adding a new input is easy: just add a new object to gBuiltInInputs. Thiswill make the input available in the Touch Bar customization window (accessiblefrom the Firefox menu bar item).

If you want to to add your new input to the default set, add its identifierhere, where type is a value from kAllowedInputTypes in thatfile and key is the value you set for title in gBuiltInInputs.You should request approval from UX before changing the default set of inputs.

If you are interested in adding new features to Firefox's implementation of theTouch Bar API, read on!

Firefox implements Apple's Touch Bar API in its Widget: Cocoa code with annsTouchBar class. nsTouchBar interfaces between Apple's Touch Bar APIand the TouchBarHelper JavaScript API.

The best resource to understand the Touch Bar API is Apple'sofficial documentation. This documentation will cover how Firefox implementsthese APIs and how one might extend nsTouchBar to enable new Touch Barfeatures.

Every new Firefox window initializes nsTouchBar (link). The functionmakeTouchBar is looked for automatically on every new instance of anNSWindow*. If makeTouchBar is defined, that window will own a newinstance of nsTouchBar.

At the time of this writing, every window initializes nsTouchBar with adefault set of inputs. In the future, Firefox windows other than the mainbrowser window (such as the Library window or DevTools) may initializensTouchBar with a different set of inputs.

nsTouchBar has two different initialization methods: init andinitWithInputs. The former is a convenience method for the latter, callinginitWithInputs with a nil argument. When that happens, a Touch Bar iscreated containing a default set of inputs. initWithInputs can also take anNSArray*. In that case, a non-customizable Touch Bar will beinitialized with only those inputs available.

The architecture of the Touch Bar is based largely around an NSString*wrapper class called NSTouchBarItemIdentifier. Every input in the Touch Barhas a unique NSTouchBarItemIdentifier. They are structured in reverse-URIformat like so:

com.mozilla.firefox.touchbar.[TYPE].[KEY]

[TYPE] is a string indicating the type of the input, e.g. 'button'. If aninput is a child of another input, the parent's type is prepended to the child'stype, e.g. 'scrubber.button' indicates a button contained in a scrubber.

[KEY] is the title attribute defined for that input on the JS side.

If you need to generate an identifier, use the convenience method[TouchBarInputnativeIdentifierWithType:withKey:].

Caution

Do not create a new input that would have the same identifier as any otherinput. All identifiers must be unique.

Warning

NSTouchBarItemIdentifieris used in one other place: settingcustomizationIdentifier. Do not ever change this string. If it is changed,any customizations users have made to the layout of their Touch Bar in Firefoxwill be erased.

Each identifier is tied to a TouchBarInput. TouchBarInput is a classthat holds the properties specified for each input in gBuiltInInputs.nsTouchBar uses them to create instances of NSTouchBarItemwhich are the actual objects used by Apple's Touch Bar API and displayed in theTouch Bar. It is important to understand the difference betweenTouchBarInput and NSTouchBarItem!

Creating a Touch Bar and its TouchBarInputs flows as follows:

1. [nsTouchBarinit] is called from [NSWindowmakeTouchBar].

2. init populates two NSArrays: customizationAllowedItemIdentifiers anddefaultItemIdentifiers. It also initializes a TouchBarInput objectfor every element in the union of the two arrays and stores them inNSMutableDictionaryTouchBarInput*>*mappedLayoutItems.

3. touchBar:makeItemForIdentifier: is called for every element in the unionof the two arrays of identifiers. This method retrieves the TouchBarInputfor the given identifier and uses it to initialize a NSTouchBarItem.touchBar:makeItemForIdentifier: reads the type attribute from theTouchBarInput to determine what NSTouchBarItem subclass should beinitialized. Our Touch Bar code currently supports NSCustomTouchBarItem(buttons, main buttons); NSPopoverTouchBarItem (popovers);NSTextField (labels); and NSScrollView (ScrollViews).

4. Once the NSTouchBarItem is initialized, its properties are populated withan assortment of 'update' methods. These include updateButton,updateMainButton, updateLabel, updatePopover, andupdateScrollView.

5. Since the localization of TouchBarInput titles happens asynchronously inJavaScript code, the l10n callback executes[nsTouchBarUpdaterupdateTouchBarInputs:]. This method reads theidentifier of the input(s) that need to be updated and calls their respective'update' methods. This method is most often used to update title afterl10n is complete. It can also be used to update any property of aTouchBarInput; for instance, one might wish to change colorwhen a specific event occurs in the browser.