New <object> element in online help + cleanups

* Implementation of <object> element in XHP files, with corresponding
  transformation in XSLT. Video objects maps to HTML5 <video> and
  audio objects into <audio> elements. Generic <object> maps to
  HTML5 <object> (WIP)

* CSS file with some cleanup and branding colors, includes the option
  to show debug info in .debug class. CSS fonts with recent changes.

* Index.html file with new <div> and better font rendering

* help.js with info on top right about the page displayed

* Cleanup of getbookmark.sh * New README with instructions

Change-Id: I856b99308ee008d8607dd0ba60a446224cc26e58
Reviewed-on: https://gerrit.libreoffice.org/30812
Reviewed-by: Olivier Hallot <olivier.hallot@edx.srv.br>
Tested-by: Olivier Hallot <olivier.hallot@edx.srv.br>

5 files changed, 178 insertions, 33 deletions

diff --git a/source/HELP-IN-BROWSER-README.txt b/source/HELP-IN-BROWSER-README.txt
new file mode 100644
index 0000000000..ab8f49a5df
--- /dev/null
+++ b/source/HELP-IN-BROWSER-README.txt
@@ -0,0 +1,109 @@
+----------------------------------------------------------------- 
+Helpcontent displayed in a browser directly from XML 
+----------------------------------------------------------------- 
+
+This README shows how to display Helpcontent2 XML pages (XHP) directly rendered in a modern browser. 
+
+----------------------------------------------------------------- 
+Background 
+----------------------------------------------------------------- 
+
+The XML files must be transformed into HTML files with the help of a style sheet file (XSL).
+
+In the current helpcontent2, the processing is done in xmlhelp/ module, an ancient XSLT processor developed circa 2005 (OpenOffice.org 1.5)
+
+Modern browsers such as Firefox, Chrome and Rekonq are capable to execute the transformation direcly in the client, by getting an URL that returns a XML file that contains the reference of the necessary XSL style sheet.
+
+How to display Helpcontent2 in a browser
+
+1. Open the browser
+2. Open the file index.html in source/ folder
+3. Navigate in pages
+
+----------------------------------------------------------------- 
+File descriptions
+----------------------------------------------------------------- 
+
+default.css: 
+-------------
+the cascading style sheet for HTML formatting.
+
+index.html: 
+-----------
+The entry web page in the root folder of the server. Displays the #TopLeft <div> with links to LibreOffice modules help libraries.
+
+online_transform.xsl:
+--------------------
+the XSL transform file. Transform XHP files into HTML files.
+
+This file is a modification of xmlhelper/util/main_transform.xsl, which was designed for xmlhelp XSL processor.
+
+The XSLT online_transform.xsl is used inside help.js. 
+
+help.js
+-------
+This javascript file: 
+1. takes XHP files and online_transform.xsl and generates the HTML contents to be displayed in #DisplayArea <div>. 
+2. picks the bookmarks file and displays in #BottomLeft <div> area.
+3. displays the XHP file patch and bookmark in the #TopRight <div> area
+
+-----------------------------------------------------------------
+New ‘Object’ tag
+-----------------------------------------------------------------
+
+The filter online_transform.xsl now support the <object> tag defined for XHP files to allow a generic object in the browser. The <object> tag now maps to the folowing HTML5 tags:
+Maps to HTML5 <video> tag:
+
+<section id="video">
+  <object id="1232312" type ="video/ogg" data="movies/testvideo.ogv" height="480px" width="640px"/>
+</section>
+
+Maps to HTML5 <audio> tag:
+<section id="audio">
+  <object id="1232312" type ="audio/ogg" data="audio/testaudio.wav" height="" width=""/>
+</section>
+
+Maps to HTML5 <object> tag:
+
+  <object id="1232312" type ="{mimetype}" data="object/testobject.swf" height="" width=""/>
+
+----------------------------------------------------------------- 
+How to build the LibreOffice Browser help 
+----------------------------------------------------------------- 
+
+1) Media files: Media files in helpcontent2 are located in module 
+icons-themes/ . It is necessary to copy core/icon-themes/galaxy into the media/ folder 
+
+Note: For the moment, only Galaxy icon them is fully supported.
+
+2) Run the getbookmark.sh script to generate the bookmark index for the
+LibreOffice Modules
+
+----------------------------------------------------------------- 
+Folder layout.
+----------------------------------------------------------------- 
+
+Root folder:source/
+			default.css
+			online_transform.xsl
+			index.html
+			help.js
+			jquery<version>-min.js
+			media/
+				movies/
+				screenshots/
+			text/
+
+
+Notes:
+1. the online_transform.xsl is main_transform.xsl of HC2 modified to accomodate the layout of the screen, It has 4 <div> hooked in each of the 4 corners of the browser screen to allow resizing.
+2. the lower-right <div> displays the help content
+3. the upper-left <div> has entries to change help books/modules
+4. the upper right <div> is available to place a search mechanism
+5. the lower-left <div> is available to inser a index with javascript
+6. index.html is just a top landing page.
+7. default.css is the css used in helpconten2/languages
+8. plenty of simplification/tweak is possible in the XSLT.
+9. The whole HC can be tranformed in html with XSLTPROC or any other XSL processor, provided the reference to the XSL file is fixed, and the xsl file be aware of the specifics of the XSL processor.
+10. Works with Firefox, Chrome, Rekonq.
+11. References to media are incomplete. That will require a change in the urls of the media inside the help pages, thus forking from HC2
diff --git a/source/default.css b/source/default.css
index 40349cb07d..99f738cf7b 100644
--- a/source/default.css
+++ b/source/default.css
@@ -18,17 +18,15 @@
 
 /*
 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
-+                          OPENOFFICE.ORG 2.0 HELP                  +
++                     LIBREOFFICE HELP IN BROWSER                   +
 +                          DEFAULT STYLESHEET                       +
 +                           WESTERN LANGUAGES                       +
 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
-+ LAST CHANGES: 15-NOV-2004                                         +
-+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
-*/
 
+*/
 
 body, p, h1, h2, h3, h4, h5, h6, .listitem, .listitemintable, .tablecontent, .tablecontentintable
-	{ font-family: "Segoe UI",Ubuntu,Cantarell,"Noto Sans","DejaVu Sans","Lucida Sans Unicode","Helvetica Neue",Helvetica,Tahoma,sans-serif; }
+	 { font-family: "Segoe UI",Ubuntu,Cantarell,"Noto Sans","DejaVu Sans","Lucida Sans Unicode","Helvetica Neue",Helvetica,Tahoma,sans-serif; }
 
 pre, .code, .codeintable, .example, .exampleintable, .literal, .literalintable, .path, .pathintable
 	{ font-family: Menlo,Consolas,"DejaVu Sans Mono","Nimbus Mono L","Lucida Sans Typewriter","Courier New",Courier,Monaco,monospace; margin-top: 1pt; margin-bottom: 1pt; }
@@ -43,19 +41,19 @@ pre, .code, .codeintable, .example, .exampleintable, .literal, .literalintable,
 	{ font-weight: bold; }
 
 .tablehead, .tableheadintable
-	{ font-weight: bold; margin-top: 0px;}
+	{ font-weight: bold; margin-top: 0px; background:#CCF4C6; text-align: center;}
 
 .howtogetheader
 	{ font-weight: bold; border: 1px solid #999999; background: #FFFFFF; padding: 3px;}
 
 h1, h2, h3, h4, h5, h6
-	{ margin-bottom: 5pt; }
+	{ margin-bottom: 5pt; color: #18A303;}
 
 p, td
-	{ font-size: 10pt; margin-top: 2px; margin-bottom: 2px;}
+	{ font-size: 10pt; margin: 2px 2px 2px 2px;}
 
 h1
-	{ font-size: 18pt; border-bottom: 1px solid black; padding-bottom: 6px; margin-bottom: 6px;}
+	{ font-size: 18pt; border-bottom: 5px solid #18A303; padding-bottom: 6px; margin-bottom: 6px;}
 
 h2
 	{ font-size: 14pt; }
@@ -73,10 +71,10 @@ h4, h5, h6
 	{ margin-top: 2px; margin-bottom: 2px; margin-left: 5px; }
 
 .howtoget
-	{ background:#EEEEEE;}
+	{ background:#CCF4C6;}
 
 .howtogetbody
-	{ background:#EEEEEE; margin: 0px;}
+	{ background:#CCF4C6; margin: 0px;}
 
 .wide
 	{ width: 100%; }
@@ -88,7 +86,7 @@ h4, h5, h6
 	{ color: red; border: 1px solid red;}
 
 .debug
-	{ border: 1px solid black; padding: 3px; display: none;}
+	{ border: 1px solid black; padding: 3px; display: show;}
 
 /* Basic code syntax highlight */
 .identifier, .unknown
@@ -116,10 +114,12 @@ h4, h5, h6
         }
 
 .topmenu{
-    color: green;
+    color: #18A303;
     background-color: white;
-    font-size:24pt;
+    font-size:12pt;
     font-weight:bold;
+    padding:1px;
+    border: solid 1px #18A303;
 }
 .indexlink{font-size: 10pt; margin-top: 2px; margin-bottom: 2px;}
 
@@ -128,8 +128,9 @@ position: fixed;
 bottom: 5px;
 right: 5px;
 overflow:auto;
-width: 70%;
+width: 69%;
 height: 90%;
+border:solid 1px;
 }
 
 #BottomLeft {
@@ -137,20 +138,27 @@ position: fixed;
 bottom: 5px;
 left: 5px;
 overflow:auto;
-width: 29%;
+width: 30%;
 height: 90%;
+border:solid 1px;
 }
 
 #TopRight {
+width: 69%;
+height: 9%;
 position: fixed;
 top: 5px;
 right: 5px;
+border:solid 1px;
 }
 
 #TopLeft {
+width: 30%;
+height: 9%;
 position: fixed;
 top: 5px;
 left: 5px;
+border:solid 1px;
 }
 
 #centerdiv {
@@ -160,7 +168,7 @@ left:25%;
 }
 
 .tintro {
-	color: white;
+color: white;
 background-color: green;
 font-family: Arial;
 font-weight: bold;
@@ -170,6 +178,6 @@ padding-bottom: 6px;
 margin-bottom: 6px;
 }
 .embedded {
-background-color:yellow;
+border-right: 10px solid red;
 }
 
diff --git a/source/get_bookmark.sh b/source/get_bookmark.sh
index af2edd88d5..b979a07081 100755
--- a/source/get_bookmark.sh
+++ b/source/get_bookmark.sh
@@ -6,8 +6,8 @@
 # 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/.
 
-stub1='<html><head><link rel="stylesheet" type="text/css" href="/default.css"/></head><body><ul class="indexlink">'
-stub2='</ul></body></html>'
+stub1='<ul class="indexlink">'
+stub2='</ul>'
 ffile=bookmark_calc.html
 rm -f $ffile
 echo $stub1 > $ffile
diff --git a/source/index.html b/source/index.html
index 0ed44edc1d..9acc559723 100644
--- a/source/index.html
+++ b/source/index.html
@@ -9,27 +9,28 @@
 -->
 <html>
 <head>
+<title>LibreOffice Help</title>
 <link href="default.css" rel="Stylesheet" type="text/css" />
 <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
 <script type="text/javascript" src="help.js"></script>
 </head>
 <body>
-<input type="text" id="search-bar" style="margin-top:20px"/>
      <div id="DisplayArea"></div>
      <div id="TopLeft">
          <table>
             <tr>
-               <td class="topmenu"><p onclick="displayResult('text/scalc/main0000.xhp?Language=en-US&System=WIN&UseDB=no&DbPAR=calc','calc')">Calc</p></td>
-               <td class="topmenu"><p onclick="displayResult('text/swriter/main0000.xhp?Language=en-US&System=WIN&UseDB=no&DbPAR=writer','writer')">Writer</p></td>
-               <td class="topmenu"><p onclick="displayResult('text/simpress/main0000.xhp?Language=en-US&System=WIN&UseDB=no&DbPAR=simpress','impress')">Impress</p></td>
-               <td class="topmenu"><p onclick="displayResult('text/sdraw/main0000.xhp?Language=en-US&System=WIN&UseDB=no&DbPAR=sdraw','draw')">Draw</p></td>
-               <td class="topmenu"><p onclick="displayResult('text/schart/main0000.xhp?Language=en-US&System=WIN&UseDB=no&DbPAR=schart','chart')">Chart</p></td>
-               <td class="topmenu"><p onclick="displayResult('text/sbasic/shared/main0001.xhp?Language=en-US&System=WIN&UseDB=no&DbPAR=sbasic','basic')">Basic</p></td>
-               <td class="topmenu"><p onclick="displayResult('text/smath/main0000.xhp?Language=en-US&System=WIN&UseDB=no&DbPAR=smath','math')">Math</p></td>
-               <td class="topmenu"><p onclick="displayResult('text/shared/explorer/database/main.xhp?Language=en-US&System=WIN&UseDB=no&DbPAR=shared','shared')">Base</p></td>
-               <td class="topmenu"><p onclick="displayResult('text/shared/guide/main.xhp?Language=en-US&System=WIN&UseDB=no&DbPAR=shared','shared')">Guide</p></td>
+               <td><p class="topmenu" onclick="displayResult('text/scalc/main0000.xhp?Language=en-US&System=WIN&UseDB=no&DbPAR=calc','calc')">Calc</p></td>
+               <td><p class="topmenu" onclick="displayResult('text/swriter/main0000.xhp?Language=en-US&System=WIN&UseDB=no&DbPAR=writer','writer')">Writer</p></td>
+               <td><p class="topmenu" onclick="displayResult('text/simpress/main0000.xhp?Language=en-US&System=WIN&UseDB=no&DbPAR=simpress','impress')">Impress</p></td>
+               <td><p class="topmenu" onclick="displayResult('text/sdraw/main0000.xhp?Language=en-US&System=WIN&UseDB=no&DbPAR=sdraw','draw')">Draw</p></td>
+               <td><p class="topmenu" onclick="displayResult('text/schart/main0000.xhp?Language=en-US&System=WIN&UseDB=no&DbPAR=schart','chart')">Chart</p></td>
+               <td><p class="topmenu" onclick="displayResult('text/sbasic/shared/main0601.xhp?Language=en-US&System=WIN&UseDB=no&DbPAR=sbasic','basic')">Basic</p></td>
+               <td><p class="topmenu" onclick="displayResult('text/smath/main0000.xhp?Language=en-US&System=WIN&UseDB=no&DbPAR=smath','math')">Math</p></td>
+               <td><p class="topmenu" onclick="displayResult('text/shared/explorer/database/main.xhp?Language=en-US&System=WIN&UseDB=no&DbPAR=shared','shared')">Base</p></td>
+               <td><p class="topmenu" onclick="displayResult('text/shared/guide/main.xhp?Language=en-US&System=WIN&UseDB=no&DbPAR=shared','shared')">Guide</p></td>
              </tr>
           </table>
+          <p>Search: <input type="text" id="search-bar"/></p>
       </div>
      <div id="BottomLeft"></div>
      <div id="TopRight"></div>
diff --git a/source/online_transform.xsl b/source/online_transform.xsl
index 42e5def05e..14c3dea329 100644
--- a/source/online_transform.xsl
+++ b/source/online_transform.xsl
@@ -327,7 +327,8 @@
 <xsl:template match="meta" />
 
 <!-- OBJECT (UNUSED) -->
-<xsl:template match="object" />
+<xsl:template match="object"><xsl:call-template name="insertobject"/></xsl:template>
+<xsl:template match="object" mode="embedded"><xsl:call-template name="insertobject"/></xsl:template>
 
 <!-- PARAGRAPH -->
 <xsl:template match="paragraph">
@@ -655,7 +656,7 @@
 <!--	<p>href: <xsl:value-of select="$href"/></p>
 	<p>anchor: <xsl:value-of select="$anchor"/></p>
 	<p>document: <xsl:value-of select="$doc"/></p>-->
-	<p class="bug">image source: <xsl:value-of select="$imgsrc"/></p>
+	<p class="debug">image source: <xsl:value-of select="$imgsrc"/></p>
 	<div class="{$type}">
 		<table border="0" class="{$type}" cellspacing="0" cellpadding="5">
 			<tr>
@@ -814,7 +815,7 @@
       </xsl:otherwise>
     </xsl:choose>
   </xsl:variable>
-  <p class="bug">Image: <xsl:value-of select="$src"/></p>
+  <p class="debug">Image: <xsl:value-of select="$src"/></p>
 	<!--<xsl:variable name="src"><xsl:value-of select="concat($img_url_prefix,@src)"/></xsl:variable>-->
   <xsl:variable name="alt"><xsl:value-of select="./alt"/></xsl:variable>
   <xsl:variable name="width">
@@ -827,6 +828,32 @@
   <img src="{$src}" alt="{$alt}" title="{$alt}" style="{$istyle}"></img>
 </xsl:template>
 
+<!-- Insert an object -->
+<xsl:template name="insertobject">
+  <xsl:variable name="data">
+       <xsl:value-of select="concat($img_url_prefix,@data)"/>
+  </xsl:variable>
+  <p class="debug">Object: <xsl:value-of select="$data"/></p>
+  <xsl:variable name="type"><xsl:value-of select="@type"/></xsl:variable>
+  <xsl:variable name="width">
+        <xsl:call-template name="convert2px"><xsl:with-param name="value" select="@width"/></xsl:call-template>
+  </xsl:variable>
+  <xsl:variable name="height">
+        <xsl:call-template name="convert2px"><xsl:with-param name="value" select="@height"/></xsl:call-template>
+  </xsl:variable>
+  <xsl:choose>
+        <xsl:when test="starts-with($type,'video')">
+            <video src="{$data}" type="{$type}" width="{$width}" height="{$height}" controls="'1'"></video>
+        </xsl:when>
+        <xsl:when test="starts-with($type,'audio')">
+            <audio src="{$data}" type="{$type}" controls="'1'"></audio>
+        </xsl:when>
+        <xsl:otherwise>
+           <object width="{$width}" height="{$height}" data="{$data}"></object>
+        </xsl:otherwise>
+  </xsl:choose>
+</xsl:template>
+
 <!-- changing measure to pixel -->
 <xsl:template name="convert2px">
         <xsl:param name="value"/>