The lower part of the browser window (containing translate5's editor) is changed compared to the "normal mode" (see below for details) as follows:

• the file panel on the left is completely hidden
• the header area of translate5 is hidden
• the menu between header area and column headers is hidden
• the metadata and comment-panel on the right is hidden
• the 'MatchResource' panel is not displayed (the plug-in is not active)
• all keyboard short-cuts that make sense to be used are working identically to the normal translate5 editor mode (regardless if they are hidden, or not; but for hidden ones only if this does not create extra effort)

Info

For visual representation see translate5-layoutedReview (PDF-like quality).pdf in [T5DEV-126] (which does not has to be matched exactly)

Conception

Basic example of the pdf layout and editor.
The editor is placed in the south region, and the pdf layout in the north.(paste the code in the console)

var west= Ext.ComponentQuery.query('#editorViewport panel[region="west"]')[0];
var east= Ext.ComponentQuery.query('#editorViewport panel[region="east"]')[0];
var north= Ext.ComponentQuery.query('#editorViewport headPanel[region="north"]')[0];

west.setVisible(false);
east.setVisible(false);
north.setVisible(false);

var newPanel= new Ext.panel.Panel({ 
	xtype:'panel',
	region: 'north',
	resizable: true,
	resizeHandles: 's',
	height:400,
	html:'<iframe src="https://www.translate5.net" width="100%" height="100%"></iframe>'
});

Ext.ComponentQuery.query('#editorViewport')[0].add(newPanel);

• The hiding of the elements and insertion of the pdf layout iframe, is handled by the global javascript controller in the plugin.
• Listen on beforerender event of the editor grid and apply the changes