qdoc: Highlight selected section / entry in the documentation

This commit adds id tags with the anchor reference as the value
to html entities for documentation section titles and function
signatures, properties etc. for both C++ and QML documentation
pages.

Together with new CSS rules, we can dynamically highlight the
title that the user clicked on. This helps to locate the item
of interest on a crowded page or when the page cannot be
scrolled down enough to place the selected item on top.

Change-Id: I7d1db2ed4e12779e1a9e571996ee65c3befa4e7a
Reviewed-by: Martin Smith <martin.smith@digia.com>
Reviewed-by: Venugopal Shivashankar <venugopal.shivashankar@digia.com>

2 files changed, 32 insertions, 0 deletions

diff --git a/doc/global/template/style/offline.css b/doc/global/template/style/offline.css
index 7fc0d62fa6..5957e3840d 100644
--- a/doc/global/template/style/offline.css
+++ b/doc/global/template/style/offline.css
@@ -97,6 +97,10 @@ a[href*="http://"], a[href*="ftp://"], a[href*="https://"] {
     text-height: 24px;
 }
 
+.flags:target {
+    background-color: #FFFFD6;
+}
+
 /*
 -------------------------------
 NOTE styles
@@ -327,6 +331,10 @@ h2, p.h2 {
     max-width: 99%;
 }
 
+h2:target {
+    background-color: #F2F3D4;
+}
+
 h3 {
     font: 500 14px/1.2 Arial;
     font-weight: 100;
@@ -353,6 +361,10 @@ h3.fn, span.fn {
     margin-top: 45px;
 }
 
+h3.fn:target {
+    background-color: #F6F6D6;
+}
+
 .name {
     color: #1A1A1A
 }
@@ -413,6 +425,10 @@ table, pre {
      color: #66666E;
  }
 
+ table tr:target {
+     background-color: #F6F6D6;
+ }
+
  table thead {
      text-align: left;
      padding-left: 20px;
diff --git a/doc/global/template/style/online.css b/doc/global/template/style/online.css
index 0dc01d396b..5d0cd7ecfb 100644
--- a/doc/global/template/style/online.css
+++ b/doc/global/template/style/online.css
@@ -48,6 +48,10 @@ links
     text-height: 24px;
 }
 
+.flags:target {
+    background-color: #FFFFD6;
+}
+
 /*
 -------------------------------
 NOTE styles
@@ -204,6 +208,10 @@ h2, p.h2 {
     overflow: hidden;
 }
 
+h2:target {
+    background-color: #F2F3D4;
+}
+
 h3 {
     font: 500 14px/1.2 Arial;
     font-weight: 100;
@@ -212,6 +220,10 @@ h3 {
     margin-top: 30px;
 }
 
+h3.fn:target {
+    background-color: #F6F6D6;
+}
+
 h3.fn, span.fn {
     border-width: 1px;
     border-style: solid;
@@ -293,6 +305,10 @@ table, pre {
      color: #66666E;
  }
 
+ table tr:target {
+     background-color: #F6F6D6;
+ }
+
  table thead {
      text-align: left;
      padding-left: 20px;